/* BIZAPI.Ui — the look a person picks for this browser (TP482 S14, operator 2026-11-05: "the dark color is a bit
   presumptive … a theme configurator on the right side … the preference lives in the browser local storage").
   BizLookPanel sets it, biz-boot.js keeps it in localStorage and puts it on <html> before the page is drawn:
   data-biz-accent, data-biz-dark, data-biz-light, data-biz-text. No attribute = BizJaya's own look (biz-ui.css):
   emerald on soft grey, deep indigo when dark, normal text. Also here: the footer every page ends with. */

/* ── the choices' colours ──────────────────────────────────────────────────────────────────────── */
:root {
    /* Accents: the colour itself (600), its deep ink on a light tint (800), its soft ink on a dark page (300). */
    --biz-accent-emerald: #059669; --biz-accent-emerald-deep: #047857; --biz-accent-emerald-soft: #6ee7b7;
    --biz-accent-blue: #2563eb;    --biz-accent-blue-deep: #1e40af;    --biz-accent-blue-soft: #93c5fd;
    --biz-accent-violet: #7c3aed;  --biz-accent-violet-deep: #5b21b6;  --biz-accent-violet-soft: #c4b5fd;
    --biz-accent-teal: #0d9488;    --biz-accent-teal-deep: #115e59;    --biz-accent-teal-soft: #5eead4;
    --biz-accent-amber: #b45309;   --biz-accent-amber-deep: #78350f;   --biz-accent-amber-soft: #fcd34d;
    --biz-accent-rose: #e11d48;    --biz-accent-rose-deep: #9f1239;    --biz-accent-rose-soft: #fda4af;
    --biz-accent-graphite: #475569; --biz-accent-graphite-deep: #1e293b; --biz-accent-graphite-soft: #cbd5e1;

    /* Dark pages: the page (900), cards and inputs (800), the header and menu (deep). Indigo is biz-ui.css's own. */
    --biz-dark-indigo-900: #121740;   --biz-dark-indigo-800: #1c2257;   --biz-dark-indigo-deep: #0d1236;
    --biz-dark-slate-900: #0f172a;    --biz-dark-slate-800: #1e293b;    --biz-dark-slate-deep: #0b1120;
    --biz-dark-charcoal-900: #18181b; --biz-dark-charcoal-800: #27272a; --biz-dark-charcoal-deep: #111113;
    --biz-dark-black-900: #0a0a0a;    --biz-dark-black-800: #171717;    --biz-dark-black-deep: #000000;

    /* Light pages: the page behind the cards, and the menu beside it. */
    --biz-light-soft-page: #f4f5f9;  --biz-light-soft-side: #ffffff;
    --biz-light-white-page: #ffffff; --biz-light-white-side: #ffffff;
    --biz-light-warm-page: #f6f3ec;  --biz-light-warm-side: #fdfcf9;
}

/* ── accent ────────────────────────────────────────────────────────────────────────────────────── */
:root[data-biz-accent="blue"]     { --biz-accent: var(--biz-accent-blue);     --biz-accent-deep: var(--biz-accent-blue-deep);     --biz-accent-soft: var(--biz-accent-blue-soft); }
:root[data-biz-accent="violet"]   { --biz-accent: var(--biz-accent-violet);   --biz-accent-deep: var(--biz-accent-violet-deep);   --biz-accent-soft: var(--biz-accent-violet-soft); }
:root[data-biz-accent="teal"]     { --biz-accent: var(--biz-accent-teal);     --biz-accent-deep: var(--biz-accent-teal-deep);     --biz-accent-soft: var(--biz-accent-teal-soft); }
:root[data-biz-accent="amber"]    { --biz-accent: var(--biz-accent-amber);    --biz-accent-deep: var(--biz-accent-amber-deep);    --biz-accent-soft: var(--biz-accent-amber-soft); }
:root[data-biz-accent="rose"]     { --biz-accent: var(--biz-accent-rose);     --biz-accent-deep: var(--biz-accent-rose-deep);     --biz-accent-soft: var(--biz-accent-rose-soft); }
:root[data-biz-accent="graphite"] { --biz-accent: var(--biz-accent-graphite); --biz-accent-deep: var(--biz-accent-graphite-deep); --biz-accent-soft: var(--biz-accent-graphite-soft); }

/* Every shade Radzen uses, mixed as biz-ui.css mixes emerald's (light = 16% white, dark = 16% black, darker = 24%). */
:root[data-biz-accent]:not([data-biz-accent="emerald"]) {
    --rz-primary: var(--biz-accent);
    --rz-primary-light: color-mix(in srgb, var(--biz-accent) 84%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--biz-accent) 16%, transparent);
    --rz-primary-dark: color-mix(in srgb, var(--biz-accent) 84%, black);
    --rz-primary-darker: color-mix(in srgb, var(--biz-accent) 76%, black);
    --rz-on-primary-lighter: var(--biz-accent-deep);
    --rz-link-color: var(--rz-primary-dark);
    --rz-link-hover-color: var(--rz-primary-darker);
}
:root[data-biz-theme="standard-dark"][data-biz-accent]:not([data-biz-accent="emerald"]) {
    --rz-primary: var(--biz-accent);
    --rz-primary-light: color-mix(in srgb, var(--biz-accent) 60%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--biz-accent) 20%, transparent);
    --rz-primary-dark: color-mix(in srgb, var(--biz-accent) 84%, black);
    --rz-primary-darker: color-mix(in srgb, var(--biz-accent) 76%, black);
    --rz-on-primary-lighter: var(--biz-accent-soft);
    --rz-link-color: var(--rz-primary-light);
    --rz-link-hover-color: var(--biz-accent-soft);
}

/* ── the dark page ─────────────────────────────────────────────────────────────────────────────── */
/* Radzen's dark theme draws almost everything from its base scale (biz-ui.css redraws it in indigo); each choice
   redraws it in its own family. */
:root[data-biz-theme="standard-dark"][data-biz-dark="slate"] {
    --rz-base: #475569; --rz-base-50: #f8fafc; --rz-base-100: #f1f5f9; --rz-base-200: #e2e8f0; --rz-base-300: #cbd5e1;
    --rz-base-400: #94a3b8; --rz-base-500: #64748b; --rz-base-600: #475569; --rz-base-700: #334155;
    --rz-base-800: var(--biz-dark-slate-800); --rz-base-900: var(--biz-dark-slate-900);
    --rz-base-light: #e2e8f0; --rz-base-dark: #334155; --rz-base-darker: #020617;
    --rz-on-base-light: var(--biz-dark-slate-900); --rz-on-base-lighter: var(--biz-dark-slate-900);
    --biz-indigo-deep: var(--biz-dark-slate-deep);
}
:root[data-biz-theme="standard-dark"][data-biz-dark="charcoal"] {
    --rz-base: #52525b; --rz-base-50: #fafafa; --rz-base-100: #f4f4f5; --rz-base-200: #e4e4e7; --rz-base-300: #d4d4d8;
    --rz-base-400: #a1a1aa; --rz-base-500: #71717a; --rz-base-600: #52525b; --rz-base-700: #3f3f46;
    --rz-base-800: var(--biz-dark-charcoal-800); --rz-base-900: var(--biz-dark-charcoal-900);
    --rz-base-light: #e4e4e7; --rz-base-dark: #3f3f46; --rz-base-darker: #09090b;
    --rz-on-base-light: var(--biz-dark-charcoal-900); --rz-on-base-lighter: var(--biz-dark-charcoal-900);
    --biz-indigo-deep: var(--biz-dark-charcoal-deep);
}
:root[data-biz-theme="standard-dark"][data-biz-dark="black"] {
    --rz-base: #525252; --rz-base-50: #fafafa; --rz-base-100: #f5f5f5; --rz-base-200: #e5e5e5; --rz-base-300: #d4d4d4;
    --rz-base-400: #a3a3a3; --rz-base-500: #737373; --rz-base-600: #404040; --rz-base-700: #262626;
    --rz-base-800: var(--biz-dark-black-800); --rz-base-900: var(--biz-dark-black-900);
    --rz-base-light: #e5e5e5; --rz-base-dark: #262626; --rz-base-darker: #000000;
    --rz-on-base-light: var(--biz-dark-black-900); --rz-on-base-lighter: var(--biz-dark-black-900);
    --biz-indigo-deep: var(--biz-dark-black-deep);
}

/* ── the light page ────────────────────────────────────────────────────────────────────────────── */
:root:not([data-biz-theme="standard-dark"])[data-biz-light="white"] {
    --rz-body-background-color: var(--biz-light-white-page);
    --rz-sidebar-background-color: var(--biz-light-white-side);
    --rz-panel-menu-item-background-color: var(--biz-light-white-side);
}
:root:not([data-biz-theme="standard-dark"])[data-biz-light="warm"] {
    --rz-body-background-color: var(--biz-light-warm-page);
    --rz-sidebar-background-color: var(--biz-light-warm-side);
    --rz-panel-menu-item-background-color: var(--biz-light-warm-side);
    --rz-header-background-color: var(--biz-light-warm-side);
}

/* ── text size: everything Radzen sizes in rem follows the root size ───────────────────────────── */
:root[data-biz-text="small"] { --rz-root-font-size: 14px; }
:root[data-biz-text="large"] { --rz-root-font-size: 18px; }

/* ── the panel (BizLookPanel, a side dialog without a veil, so the page shows each change) ───────── */
.biz-look { display: flex; flex-direction: column; gap: 1.1rem; }
.biz-look-section { display: flex; flex-direction: column; gap: .5rem; }
.biz-look-label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--biz-muted); }
.biz-look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .45rem; }
.biz-look-choice { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: .35rem .55rem; font: inherit; font-size: .85rem;
    color: var(--rz-text-color); background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-radius: var(--rz-border-radius);
    cursor: pointer; text-align: start; }
.biz-look-choice:hover { border-color: var(--rz-primary); }
.biz-look-choice:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 1px; }
.biz-look-choice[aria-checked="true"] { border-color: var(--rz-primary); box-shadow: 0 0 0 2px var(--rz-primary-lighter); font-weight: 600; }
.biz-look-dot { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--biz-line); }
.biz-look-page { flex: none; width: 1.5rem; height: 1.1rem; border-radius: 3px; border: 1px solid var(--biz-line); position: relative; overflow: hidden; }
.biz-look-page::after { content: ""; position: absolute; inset: 25% 12% 25% 40%; border-radius: 2px; background: var(--biz-look-card, transparent); }
.biz-look-dot[data-v="emerald"] { background: var(--biz-accent-emerald); }
.biz-look-dot[data-v="blue"] { background: var(--biz-accent-blue); }
.biz-look-dot[data-v="violet"] { background: var(--biz-accent-violet); }
.biz-look-dot[data-v="teal"] { background: var(--biz-accent-teal); }
.biz-look-dot[data-v="amber"] { background: var(--biz-accent-amber); }
.biz-look-dot[data-v="rose"] { background: var(--biz-accent-rose); }
.biz-look-dot[data-v="graphite"] { background: var(--biz-accent-graphite); }
.biz-look-page[data-v="indigo"] { background: var(--biz-dark-indigo-900); --biz-look-card: var(--biz-dark-indigo-800); }
.biz-look-page[data-v="slate"] { background: var(--biz-dark-slate-900); --biz-look-card: var(--biz-dark-slate-800); }
.biz-look-page[data-v="charcoal"] { background: var(--biz-dark-charcoal-900); --biz-look-card: var(--biz-dark-charcoal-800); }
.biz-look-page[data-v="black"] { background: var(--biz-dark-black-900); --biz-look-card: var(--biz-dark-black-800); }
.biz-look-page[data-v="soft"] { background: var(--biz-light-soft-page); --biz-look-card: var(--biz-light-white-page); }
.biz-look-page[data-v="white"] { background: var(--biz-light-white-page); --biz-look-card: var(--biz-light-soft-page); }
.biz-look-page[data-v="warm"] { background: var(--biz-light-warm-page); --biz-look-card: var(--biz-light-warm-side); }
.biz-look-note { margin: 0; font-size: .8rem; color: var(--biz-muted); }

/* ── the footer every page ends with (BizShell) ────────────────────────────────────────────────── */
.biz-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .6rem; margin-top: 2.5rem; padding: .9rem 0 .25rem;
    border-top: 1px solid var(--biz-line); font-size: .75rem; color: var(--biz-muted); }
.biz-footer strong { color: var(--rz-text-color); font-weight: 600; }
.biz-footer a { color: inherit; }
.biz-footer a:hover { color: var(--rz-link-hover-color); }
.biz-footer-dot { opacity: .6; }

/* While a panel lies along the right edge, the clipboard and contents leaves that sit on that edge step aside. */
body:has(.rz-dialog-side-position-right) :is(.biz-pin-leaf, .biz-toc-leaf) { display: none; }