/* ---- theme-ui.css ----
 * Loaded right after app-shell.css. Three things live here:
 *   1. The sidebar, painted from --sb-* variables that the layout sets from
 *      the Super Admin's chosen colour (Settings > Appearance). The text
 *      colours are worked out from the background, so they stay readable.
 *   2. Dark mode for everything app-shell.css doesn't already cover through
 *      its colour variables (form fields, menus, scroll fades, notes...).
 *      theme-ui.js handles colours hard-coded inside individual pages.
 *   3. Coloured buttons: flat (no gloss, no shadow), compact, each one
 *      coloured by what it does. theme-ui.js tags every .btn with a
 *      data-tone; this file turns the tone into colours.
 */

/* ===================== 1. Sidebar ===================== */
.sidebar {
    background: var(--sb-bg, var(--sidebar-bg));
    color: var(--sb-strong, var(--text));
    border-right-color: var(--sb-border, var(--border));
    scrollbar-color: var(--sb-scroll, rgba(0,0,0,.25)) transparent;
}
.sidebar .sidebar-brand .mark {
    background: var(--sb-logo-plate, transparent);
    padding: var(--sb-logo-pad, 0);
    border-radius: 8px;
    max-width: 146px;
    box-sizing: border-box;
}
.sidebar .sidebar-nav a,
.sidebar .nav-group-toggle,
.sidebar .nav-group-items a,
.sidebar .nav-group-items .nav-item { color: var(--sb-text, var(--muted)); }

.sidebar .sidebar-nav a:hover,
.sidebar .nav-group-toggle:hover,
.sidebar .nav-group-items a:hover,
.sidebar .nav-group-items .nav-item:hover { background: var(--sb-hover-bg, var(--brand-lighter)); color: var(--sb-hover-text, var(--brand-darker)); }

.sidebar .sidebar-nav a.active,
.sidebar .nav-group-items a.active,
.sidebar .nav-group-items .nav-item.active { background: var(--sb-active-bg, var(--brand-light)); color: var(--sb-active-text, var(--brand-darker)); font-weight: 600; }

.sidebar .sidebar-nav a.active svg,
.sidebar .nav-group.has-active > .nav-group-toggle .label svg { color: var(--sb-active-icon, var(--brand-dark)); opacity: 1; }
.sidebar .nav-group.has-active > .nav-group-toggle { color: var(--sb-active-text, var(--brand-darker)); }

.sidebar .sidebar-nav .nav-section { color: var(--sb-section, var(--muted-soft)); }
.sidebar .nav-row .nav-plus { color: var(--sb-section, var(--muted-soft)); }
.sidebar .nav-row .nav-plus:hover { background: var(--sb-active-bg, var(--brand-light)); color: var(--sb-strong, var(--brand-darker)); }

.sidebar .sidebar-foot { border-top-color: var(--sb-border, var(--border-soft)); }
.sidebar .sidebar-foot .who { color: var(--sb-text, var(--muted)); }
.sidebar .logout-btn { border-color: var(--sb-border, var(--border)); color: var(--sb-text, var(--muted)); }
.sidebar .logout-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.sidebar .sidebar-close { background: var(--sb-control-bg, var(--card)); border-color: var(--sb-border, var(--border)); color: var(--sb-strong, var(--muted)); }
.sidebar .sidebar-cta .btn { box-shadow: 0 0 0 1px var(--sb-border, transparent) !important; }

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sb-scroll, rgba(0,0,0,.25)); border-radius: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* ===================== Theme switch (top bar + user menu) ===================== */
.theme-cycle-btn .ti { display: none; width: 14px; height: 14px; }
html[data-theme-pref="light"] .theme-cycle-btn .ti-light,
html[data-theme-pref="dark"] .theme-cycle-btn .ti-dark,
html[data-theme-pref="system"] .theme-cycle-btn .ti-system,
html:not([data-theme-pref]) .theme-cycle-btn .ti-system { display: block; }

.theme-switch-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.1rem 0 0.35rem 0.1rem; }
.theme-switch { display: flex; gap: 3px; padding: 3px; border-radius: 8px; background: var(--page-bg); border: 1px solid var(--border); }
.theme-switch button {
    flex: 1; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 0.32rem 0.4rem; border-radius: 6px; cursor: pointer;
}
.theme-switch button:hover { color: var(--text); }
html[data-theme-pref="system"] .theme-switch button[data-theme-set="system"],
html[data-theme-pref="light"] .theme-switch button[data-theme-set="light"],
html[data-theme-pref="dark"] .theme-switch button[data-theme-set="dark"] { background: var(--brand); color: #fff; }
.theme-switch-hint { font-size: 0.7rem; color: var(--muted); margin: 0.35rem 0.1rem 0.1rem; }

.theme-toast {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100000;
    background: #1F2937; color: #fff; padding: 0.45rem 0.9rem; border-radius: 99px; font-size: 0.8rem; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.theme-toast.show { opacity: 1; }
html[data-theme="dark"] .theme-toast { background: #E5E7EB; color: #111827; }

/* ===================== 2. Dark mode ===================== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: var(--page-bg); color: var(--text); }

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #11141A; color: var(--text); border-color: #2B313C;
}
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input[readonly], html[data-theme="dark"] textarea[readonly] { background-color: #191D24; color: var(--muted); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6B7280; }
html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup { background: #161920; color: var(--text); }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { outline-color: rgba(255,255,255,.12); }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }

html[data-theme="dark"] hr { border-color: var(--border); background: var(--border); }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #11141A; color: #E5E7EB; }
html[data-theme="dark"] .icon-btn .dot { border-color: var(--card); }
html[data-theme="dark"] .locked-note { border-color: rgba(240,165,25,.35); color: #F2C46D; }
html[data-theme="dark"] .callout-danger, html[data-theme="dark"] .flash-error { border-color: rgba(226,61,61,.35); }
html[data-theme="dark"] .callout-warning { border-color: rgba(240,165,25,.35); }
html[data-theme="dark"] .user-menu-panel a.notif-unread:hover { background: rgba(23,167,107,.24); }
html[data-theme="dark"] .sidebar-backdrop { background: rgba(0,0,0,.6); }

/* Edge fades on wide tables: were white, now match the dark card. */
html[data-theme="dark"] .list-card .table-scroll {
    background:
        linear-gradient(to right, var(--card) 0%, rgba(22,25,32,0) 100%) left / 24px 100% no-repeat local,
        linear-gradient(to left, var(--card) 0%, rgba(22,25,32,0) 100%) right / 24px 100% no-repeat local,
        linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0)) left / 10px 100% no-repeat scroll,
        linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0)) right / 10px 100% no-repeat scroll;
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0F1115; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2B313C; border-radius: 8px; border: 2px solid #0F1115; }

/* Embedded PDF previews are real PDF pages (white paper). Dim them a
   touch so they don't glare against the dark page. */
html[data-theme="dark"] iframe[src*="pdf"], html[data-theme="dark"] embed[type="application/pdf"], html[data-theme="dark"] object[type="application/pdf"] { filter: brightness(0.92); }
html[data-theme="dark"] .sidebar-brand img, html[data-theme="dark"] .ploader-mark img { filter: none; }

/* ===================== 3. Coloured buttons ===================== */
html.btn-tones .btn {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 6px !important;
    line-height: 1.25;
    font-weight: 600;
    gap: 0.3rem;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
html.btn-tones .btn.btn-sm { font-size: 0.74rem !important; padding: 0.28rem 0.65rem !important; }
html.btn-tones .btn svg { flex-shrink: 0; }

/* The document action row keeps its own fixed height and phone squeeze. */
html.btn-tones .detail-actions .btn,
html.btn-tones .detail-actions .dd > summary.btn,
html.btn-tones .detail-actions .approval-btn { padding: 0 0.75rem !important; font-size: 0.78rem !important; height: 32px; }
@media (max-width: 640px) {
    html.btn-tones .detail-actions .btn,
    html.btn-tones .detail-actions .dd > summary.btn,
    html.btn-tones .detail-actions .approval-btn { padding: 0 0.45rem !important; font-size: 0.72rem !important; height: 30px; }
}
html.btn-tones .feedback-fab { border-radius: 999px !important; padding: 0.45rem 0.95rem !important; }

/* Tone palette: flat, medium-strength colours that keep white text readable. */
.btn[data-tone="green"]  { --t: #2F9E5B; }
.btn[data-tone="blue"]   { --t: #1C7ED6; }
.btn[data-tone="teal"]   { --t: #0C8F8F; }
.btn[data-tone="indigo"] { --t: #5254C8; }
.btn[data-tone="purple"] { --t: #8441B5; }
.btn[data-tone="amber"]  { --t: #C77C02; }
.btn[data-tone="orange"] { --t: #E0601A; }
.btn[data-tone="red"]    { --t: #D63939; }
.btn[data-tone="slate"]  { --t: #5F6B7A; }
.btn[data-tone="pink"]   { --t: #C2366F; }
.btn[data-tone="cyan"]   { --t: #0B85A8; }

/* Filled buttons */
html.btn-tones .btn[data-tone] {
    background: var(--t) !important;
    border: 1px solid var(--t) !important;
    color: #fff !important;
    box-shadow: none !important;
    background-image: none !important;
}
html.btn-tones .btn[data-tone]:hover { background: color-mix(in srgb, var(--t) 84%, #000) !important; border-color: color-mix(in srgb, var(--t) 84%, #000) !important; }
html.btn-tones .btn[data-tone]:active { background: color-mix(in srgb, var(--t) 74%, #000) !important; }

/* Outline buttons: same colour as a tinted chip (like the period filter
   pills), so a filled/outlined pair still shows which one is selected. */
html.btn-tones .btn[data-tone].btn-outline,
html.btn-tones .btn[data-tone][class*="btn-outline-"] {
    --t-ink: color-mix(in srgb, var(--t) 80%, #000);
    background: color-mix(in srgb, var(--t) 10%, var(--card)) !important;
    border-color: color-mix(in srgb, var(--t) 55%, var(--card)) !important;
    color: var(--t-ink) !important;
}
html.btn-tones .btn[data-tone].btn-outline:hover,
html.btn-tones .btn[data-tone][class*="btn-outline-"]:hover {
    background: color-mix(in srgb, var(--t) 20%, var(--card)) !important;
    border-color: var(--t) !important;
}
html[data-theme="dark"].btn-tones .btn[data-tone].btn-outline,
html[data-theme="dark"].btn-tones .btn[data-tone][class*="btn-outline-"] {
    --t-ink: color-mix(in srgb, var(--t) 55%, #fff);
    background: color-mix(in srgb, var(--t) 16%, var(--card)) !important;
    border-color: color-mix(in srgb, var(--t) 50%, var(--card)) !important;
}
html[data-theme="dark"].btn-tones .btn[data-tone].btn-outline:hover,
html[data-theme="dark"].btn-tones .btn[data-tone][class*="btn-outline-"]:hover { background: color-mix(in srgb, var(--t) 28%, var(--card)) !important; }

html.btn-tones .btn:disabled, html.btn-tones .btn.disabled, html.btn-tones .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
html.btn-tones .btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--t, var(--brand)) 45%, transparent); outline-offset: 2px; }

/* Browsers without color-mix(): plain tone colours still work. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    html.btn-tones .btn[data-tone]:hover { filter: brightness(0.9); }
    html.btn-tones .btn[data-tone].btn-outline,
    html.btn-tones .btn[data-tone][class*="btn-outline-"] { background: var(--card) !important; border-color: var(--t) !important; color: var(--t) !important; }
}

/* ===================== Update available bar (update-check.js) ===================== */
.update-bar {
    position: fixed; left: 50%; bottom: 16px; z-index: 10000; transform: translate(-50%, 20px); opacity: 0;
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: center;
    width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box;
    background: #1F2937; color: #fff; border-radius: 12px; padding: 0.65rem 0.8rem 0.65rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.28); font-size: 0.85rem; line-height: 1.35;
    transition: transform .22s ease, opacity .22s ease;
}
.update-bar.in { transform: translate(-50%, 0); opacity: 1; }
.update-bar-icon { display: inline-flex; color: #7DD98A; flex-shrink: 0; }
.update-bar-text { min-width: 0; }
.update-bar button { border: 0; border-radius: 7px; font: inherit; font-weight: 700; font-size: 0.8rem; padding: 0.42rem 0.85rem; cursor: pointer; }
.update-bar-now { background: #2F9E5B; color: #fff; }
.update-bar-now:hover { background: #278550; }
.update-bar-later { background: transparent; color: #C3C8D1; }
.update-bar-later:hover { color: #fff; background: rgba(255,255,255,.08); }
html[data-theme="dark"] .update-bar { background: #E5E7EB; color: #111827; }
html[data-theme="dark"] .update-bar-icon { color: #2F9E5B; }
html[data-theme="dark"] .update-bar-later { color: #4B5563; }
html[data-theme="dark"] .update-bar-later:hover { color: #111827; background: rgba(0,0,0,.06); }
@media (max-width: 640px) {
    .update-bar { left: 12px; right: 12px; width: auto; transform: translate(0, 20px); bottom: 12px; }
    .update-bar.in { transform: translate(0, 0); }
}