/* ── Coloured icons (2026-10-30) ─────────────────────────────────────────────────────────────────────────────────
   One place for icon colours, loaded by _Layout after ssm-theme.css. Step 1: the sidebar (by section, on its dark
   background) and the Home / property tiles (a tinted square per tile: class ic-tone-<name>). Buttons and page headers
   come later. Colours are tokens so Branding (or dark mode) can override them.                                      */

:root {
    /* On light backgrounds (tiles): icon colour + its soft tint */
    --ic-blue: #2563eb;    --ic-blue-bg: #e8f0fe;
    --ic-sky: #0284c7;     --ic-sky-bg: #e2f3fb;
    --ic-teal: #0f8a7e;    --ic-teal-bg: #e1f5f2;
    --ic-green: #3f8f20;   --ic-green-bg: #ecf6e4;
    --ic-emerald: #15803d; --ic-emerald-bg: #e3f4e9;
    --ic-orange: #d9620b;  --ic-orange-bg: #fff0e3;
    --ic-amber: #b7791f;   --ic-amber-bg: #fdf3dd;
    --ic-rose: #e11d48;    --ic-rose-bg: #fde8ec;
    --ic-purple: #7c3aed;  --ic-purple-bg: #f1eafe;
    --ic-indigo: #4f46e5;  --ic-indigo-bg: #ebeafd;
    --ic-slate: #475569;   --ic-slate-bg: #eef1f5;

    /* On the dark sidebar: brighter tones, one per section */
    --ic-side-user: #38bdf8;        /* Home, Downloads, Reports */
    --ic-side-management: #fbbf24;
    --ic-side-pms: #60a5fa;
    --ic-side-pos: #fb923c;
    --ic-side-mc: #a3e635;
    --ic-side-sun: #c084fc;
    --ic-side-excel: #34d399;
    --ic-side-admin: #fb7185;
    --ic-side-properties: #fb923c;
}

/* ── Sidebar: icon colour by section; the selected page's icon stays white on the accent ── */
.k-drawer .k-drawer-item[data-section="User"] .ssm-icon { color: var(--ic-side-user); }
.k-drawer .k-drawer-item[data-section="Management"] .ssm-icon { color: var(--ic-side-management); }
.k-drawer .k-drawer-item[data-section="PMS"] .ssm-icon { color: var(--ic-side-pms); }
.k-drawer .k-drawer-item[data-section="POS"] .ssm-icon { color: var(--ic-side-pos); }
.k-drawer .k-drawer-item[data-section="MC"] .ssm-icon { color: var(--ic-side-mc); }
.k-drawer .k-drawer-item[data-section="SUN"] .ssm-icon { color: var(--ic-side-sun); }
.k-drawer .k-drawer-item[data-section="Excel"] .ssm-icon { color: var(--ic-side-excel); }
.k-drawer .k-drawer-item[data-section="Admin"] .ssm-icon { color: var(--ic-side-admin); }
.k-drawer .k-drawer-item[data-section="Properties"] .ssm-icon { color: var(--ic-side-properties); }
.k-drawer .k-drawer-item[data-section].k-selected .ssm-icon { color: #fff; }
.k-drawer .k-drawer-item .ssm-icon { opacity: 1; }

/* ── Tiles: a tinted square with the icon in its colour ── */
.ic-tone-blue    { background: var(--ic-blue-bg) !important;    color: var(--ic-blue) !important; }
.ic-tone-sky     { background: var(--ic-sky-bg) !important;     color: var(--ic-sky) !important; }
.ic-tone-teal    { background: var(--ic-teal-bg) !important;    color: var(--ic-teal) !important; }
.ic-tone-green   { background: var(--ic-green-bg) !important;   color: var(--ic-green) !important; }
.ic-tone-emerald { background: var(--ic-emerald-bg) !important; color: var(--ic-emerald) !important; }
.ic-tone-orange  { background: var(--ic-orange-bg) !important;  color: var(--ic-orange) !important; }
.ic-tone-amber   { background: var(--ic-amber-bg) !important;   color: var(--ic-amber) !important; }
.ic-tone-rose    { background: var(--ic-rose-bg) !important;    color: var(--ic-rose) !important; }
.ic-tone-purple  { background: var(--ic-purple-bg) !important;  color: var(--ic-purple) !important; }
.ic-tone-indigo  { background: var(--ic-indigo-bg) !important;  color: var(--ic-indigo) !important; }
.ic-tone-slate   { background: var(--ic-slate-bg) !important;   color: var(--ic-slate) !important; }

/* ── Step 2 (2026-10-30): page headers, buttons, status icons ─────────────────────────────────────────────────── */

/* Page header icon: --ph-c on the dark banner, --ph-l on the light "compact" header. From the open page's sidebar
   section (body data-section, set by _Layout), or on a property's page from its tile (data-tone, PageHeaderTagHelper). */
body[data-section="User"]       { --ph-c: var(--ic-side-user);       --ph-l: var(--ic-sky); }
body[data-section="Management"] { --ph-c: var(--ic-side-management); --ph-l: var(--ic-amber); }
body[data-section="PMS"]        { --ph-c: var(--ic-side-pms);        --ph-l: var(--ic-blue); }
body[data-section="POS"]        { --ph-c: var(--ic-side-pos);        --ph-l: var(--ic-orange); }
body[data-section="MC"]         { --ph-c: var(--ic-side-mc);         --ph-l: var(--ic-green); }
body[data-section="SUN"]        { --ph-c: var(--ic-side-sun);        --ph-l: var(--ic-purple); }
body[data-section="Excel"]      { --ph-c: var(--ic-side-excel);      --ph-l: var(--ic-emerald); }
body[data-section="Admin"]      { --ph-c: var(--ic-side-admin);      --ph-l: var(--ic-rose); }
body[data-section="Properties"] { --ph-c: var(--ic-side-properties); --ph-l: var(--ic-orange); }
.ssm-ph-icon[data-tone="blue"]    { --ph-c: #60a5fa; --ph-l: var(--ic-blue); }
.ssm-ph-icon[data-tone="sky"]     { --ph-c: #38bdf8; --ph-l: var(--ic-sky); }
.ssm-ph-icon[data-tone="teal"]    { --ph-c: #2dd4bf; --ph-l: var(--ic-teal); }
.ssm-ph-icon[data-tone="green"]   { --ph-c: #a3e635; --ph-l: var(--ic-green); }
.ssm-ph-icon[data-tone="emerald"] { --ph-c: #34d399; --ph-l: var(--ic-emerald); }
.ssm-ph-icon[data-tone="orange"]  { --ph-c: #fb923c; --ph-l: var(--ic-orange); }
.ssm-ph-icon[data-tone="amber"]   { --ph-c: #fbbf24; --ph-l: var(--ic-amber); }
.ssm-ph-icon[data-tone="rose"]    { --ph-c: #fb7185; --ph-l: var(--ic-rose); }
.ssm-ph-icon[data-tone="purple"]  { --ph-c: #c084fc; --ph-l: var(--ic-purple); }
.ssm-ph-icon[data-tone="indigo"]  { --ph-c: #a5b4fc; --ph-l: var(--ic-indigo); }
.ssm-ph-icon[data-tone="slate"]   { --ph-c: #cbd5e1; --ph-l: var(--ic-slate); }
body[data-section] .ssm-ph:not(.ssm-ph-compact) .ssm-ph-icon {
    color: var(--ph-c, var(--ssm-accent-emphasis));
    background: color-mix(in srgb, var(--ph-c, rgb(var(--ssm-accent-rgb))) 20%, transparent);
}
body[data-section] .ssm-ph.ssm-ph-compact .ssm-ph-icon {
    color: var(--ph-l, var(--ssm-primary-hover));
    background: color-mix(in srgb, var(--ph-l, var(--ssm-primary-hover)) 12%, #fff);
}

/* Button icons by what they do — only on neutral buttons (light, outline grey, link, flat, Kendo base); filled buttons
   (primary, success, danger …) and outline colour buttons keep their own icon colour */
:is(.k-button-solid-base, .k-button-flat, .btn-light, .btn-outline-secondary, .btn-link, .btn-ghost, .btn-tool, .btn-muted) {
    & :is(.fa-file-excel, .fa-file-csv) { color: var(--ic-emerald); }
    & :is(.fa-file-pdf, .fa-trash, .fa-trash-can) { color: #dc2626; }
    & :is(.fa-floppy-disk, .fa-pen, .fa-pen-to-square, .fa-eye) { color: var(--ic-blue); }
    & :is(.fa-file-import, .fa-file-export, .fa-download, .fa-upload, .fa-file-arrow-down, .fa-file-arrow-up, .fa-cloud-arrow-up, .fa-cloud-arrow-down) { color: var(--ic-teal); }
    & :is(.fa-plus, .fa-circle-plus, .fa-user-plus, .fa-play, .fa-check) { color: var(--ic-green); }
    & :is(.fa-copy, .fa-clone) { color: var(--ic-purple); }
    & :is(.fa-book, .fa-book-open, .fa-circle-question, .fa-lightbulb) { color: var(--ic-amber); }
    & :is(.fa-key, .fa-shield-halved, .fa-lock, .fa-user-shield) { color: var(--ic-indigo); }
    & :is(.fa-print, .fa-envelope, .fa-envelope-open-text, .fa-paper-plane, .fa-plug, .fa-chart-column) { color: var(--ic-sky); }
    & :is(.fa-rotate, .fa-rotate-left, .fa-arrow-left, .fa-filter, .fa-xmark, .fa-magnifying-glass) { color: var(--ic-slate); }
    /* Disabled: the icon greys out with the button */
    &:is(:disabled, .k-disabled) [class*="fa-"] { color: inherit; }
}

/* Status icons in the page text (not in toasts, buttons, badges, the sidebar or the header banner) */
:is(.fa-circle-check, .fa-check-circle):not(.k-notification *, .btn *, .k-button *, .badge *, .k-drawer *, .ssm-ph *) { color: #16a34a; }
:is(.fa-triangle-exclamation, .fa-exclamation-triangle, .fa-circle-exclamation):not(.k-notification *, .btn *, .k-button *, .badge *, .k-drawer *, .ssm-ph *) { color: #d97706; }
:is(.fa-circle-xmark, .fa-times-circle):not(.k-notification *, .btn *, .k-button *, .badge *, .k-drawer *, .ssm-ph *) { color: #dc2626; }
:is(.fa-circle-info, .fa-info-circle):not(.k-notification *, .btn *, .k-button *, .badge *, .k-drawer *, .ssm-ph *) { color: #2563eb; }