/*
 * CKIMS CENTRAL THEME
 * Childline Kenya · single source of truth for application appearance.
 * Change the tokens in this file to re-theme CKIMS without editing page files.
 * Optional seasonal skins can be activated by setting data-season on <html>.
 */
:root {
    color-scheme: light;
    --ckims-font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    --ckims-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;

    --ck-accent: #F7941D !important;
    --ck-accent-strong: #d96f08 !important;
    --ck-accent-ink: #512c05 !important;
    --ck-accent-soft: rgba(247,148,29,.15) !important;
    --ck-teal: #168b88 !important;
    --ck-success: #15803d !important;
    --ck-danger: #c62828 !important;
    --ck-warning: #b45309 !important;

    --ck-page: #f7f4ed !important;
    --ck-page-deep: #edf6f5 !important;
    --ck-ink: #1c2830 !important;
    --ck-muted: #5d6c75 !important;
    --ck-subtle: #7b8a93 !important;
    --ck-label: #465762 !important;
    --ck-border: rgba(71,88,98,.18) !important;

    --ck-glass: rgba(255,255,255,.52) !important;
    --ck-glass-soft: rgba(255,253,249,.38) !important;
    --ck-glass-strong: rgba(255,255,255,.72) !important;
    --ck-glass-elevated: rgba(255,255,255,.82) !important;
    --ck-glass-border: rgba(255,255,255,.82) !important;
    --ck-glass-highlight: rgba(255,255,255,.96) !important;
    --ck-glass-shadow: 0 18px 58px rgba(43,58,65,.10), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(255,255,255,.18) !important;
    --ck-glass-shadow-elevated: 0 34px 100px rgba(31,43,50,.22), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(255,255,255,.20) !important;
    --ck-input: rgba(255,255,255,.82) !important;
    --ck-input-focus: rgba(255,255,255,.97) !important;
    --ck-overlay: rgba(28,37,43,.34) !important;
    --ck-sidebar: rgba(255,251,244,.66) !important;
    --ck-sidebar-text: #243039 !important;
    --ck-sidebar-muted: #65737c !important;
    --ck-table-head: rgba(255,255,255,.48) !important;
    --ck-row-hover: rgba(247,148,29,.075) !important;

    --ck-radius-control: .85rem !important;
    --ck-radius-card: 1.35rem !important;
    --ck-radius-modal: 1.65rem !important;
    --ck-radius-pill: 999px !important;
    --ck-modal-max-height: min(92dvh, 940px) !important;
    --ck-modal-max-width: min(960px, calc(100vw - 2rem)) !important;

    /* Legacy aliases remain here so older pages inherit the same theme. */
    --rexius-accent: var(--ck-accent) !important;
    --rexius-accent-soft: var(--ck-accent-soft) !important;
    --rexius-ink: var(--ck-ink) !important;
    --ck-card: var(--ck-glass-strong) !important;
    --ck-card-soft: var(--ck-glass-soft) !important;
    --ck-panel: var(--ck-glass) !important;
    --ck-soft: var(--ck-glass-soft) !important;
    --ck-shadow: var(--ck-glass-shadow) !important;
    --ck-orange: var(--ck-accent) !important;
    --ck-gold: #FBC02D !important;
    --ck-bg: var(--ck-page) !important;
    --ckims-page-bg: var(--ck-page) !important;
    --ck-surface: var(--ck-glass-strong) !important;
    --ck-line: var(--ck-border) !important;
    --bg: var(--ck-page) !important;
    --surface: var(--ck-glass-strong) !important;
    --soft: var(--ck-glass-soft) !important;
    --text: var(--ck-ink) !important;
    --muted: var(--ck-muted) !important;
    --border: var(--ck-border) !important;
    --accent: var(--ck-accent) !important;

    /* Page-era aliases: older modules may declare these locally, but these
       !important aliases keep colour/material ownership in this one file. */
    --ckims-bg: var(--ck-page) !important;
    --ckims-panel: var(--ck-glass-strong) !important;
    --ckims-panel-2: var(--ck-glass-soft) !important;
    --ckims-soft: var(--ck-glass-soft) !important;
    --ckims-text: var(--ck-ink) !important;
    --ckims-muted: var(--ck-muted) !important;
    --ckims-border: var(--ck-border) !important;
    --ckims-gold: var(--ck-accent) !important;
    --card: var(--ck-glass-strong) !important;
    --ink: var(--ck-ink) !important;
    --line: var(--ck-border) !important;
    --orange: var(--ck-accent) !important;
    --orange-deep: var(--ck-accent-strong) !important;
    --shadow: var(--ck-glass-shadow) !important;
    --cream: var(--ck-page) !important;
    --cream-2: var(--ck-page-deep) !important;
    --green: var(--ck-success) !important;
    --red: var(--ck-danger) !important;
    --yellow: var(--ck-warning) !important;
    --blue: #2563eb !important;
    --ck-blue: #2563eb !important;
    --pass: #087a55 !important;
    --passbg: rgba(21,128,61,.10) !important;
    --warn: #9a6700 !important;
    --warnbg: rgba(180,83,9,.12) !important;
    --fail: #b42318 !important;
    --failbg: rgba(198,40,40,.10) !important;
    --ck-green: var(--ck-success) !important;
    --ck-red: var(--ck-danger) !important;
    --ck-cream: var(--ck-page) !important;
    --tc-ink: var(--ck-ink) !important;
    --tc-line: var(--ck-border) !important;
    --tc-muted: var(--ck-muted) !important;
    --tc-orange: var(--ck-accent) !important;
    --tc-soft: var(--ck-glass-soft) !important;

    --ck-chat-ink: var(--ck-ink) !important;
    --ck-chat-muted: var(--ck-muted) !important;
    --ck-chat-orange: var(--ck-accent) !important;
    --ck-chat-soft: var(--ck-glass-soft) !important;
    --ck-chat-page: var(--ck-page) !important;
    --ck-chat-line: var(--ck-border) !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ck-page: #081118 !important;
    --ck-page-deep: #111a21 !important;
    --ck-ink: #f2f6f8 !important;
    --ck-muted: #b8c4ca !important;
    --ck-subtle: #92a0a9 !important;
    --ck-label: #d0d9de !important;
    --ck-border: rgba(225,235,240,.15) !important;
    --ck-accent-ink: #ffddb3 !important;
    --ck-accent-soft: rgba(247,148,29,.19) !important;

    --ck-glass: rgba(20,31,39,.52) !important;
    --ck-glass-soft: rgba(24,36,45,.44) !important;
    --ck-glass-strong: rgba(25,38,47,.72) !important;
    --ck-glass-elevated: rgba(28,42,52,.82) !important;
    --ck-glass-border: rgba(255,255,255,.15) !important;
    --ck-glass-highlight: rgba(255,255,255,.18) !important;
    --ck-glass-shadow: 0 24px 72px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.04) !important;
    --ck-glass-shadow-elevated: 0 38px 110px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.17), inset 0 -1px 0 rgba(255,255,255,.04) !important;
    --ck-input: rgba(13,23,31,.82) !important;
    --ck-input-focus: rgba(20,32,41,.97) !important;
    --ck-overlay: rgba(1,7,11,.66) !important;
    --ck-sidebar: rgba(12,22,29,.68) !important;
    --ck-sidebar-text: #f4f7f8 !important;
    --ck-sidebar-muted: #bac5cb !important;
    --ck-table-head: rgba(7,16,22,.46) !important;
    --ck-row-hover: rgba(247,148,29,.10) !important;
    --pass: #4ade80 !important;
    --warn: #fbbf24 !important;
    --fail: #f87171 !important;
}

/* Seasonal example: enable with document.documentElement.dataset.season = 'christmas'. */
html[data-season="christmas"] {
    --ck-accent: #c62828 !important;
    --ck-accent-strong: #991b1b !important;
    --ck-accent-soft: rgba(198,40,40,.14) !important;
    --ck-teal: #137c45 !important;
    --ck-gold: #137c45 !important;
}
html[data-season="christmas"][data-theme="dark"] {
    --ck-accent: #ef4444 !important;
    --ck-accent-soft: rgba(239,68,68,.18) !important;
    --ck-teal: #4ade80 !important;
}

/* Brand utility bridges. These beat page-local Tailwind colour literals so a
   seasonal theme can change the application without touching individual pages. */
html body :where(.text-rexius-gold,.text-rexius-teal,.text-\[\#F7941D\]) { color: var(--ck-accent) !important; }
html body :where(.text-\[\#b45309\]) { color: var(--ck-accent-strong) !important; }
html body :where(.bg-rexius-gold,.bg-rexius-teal,.bg-\[\#F7941D\]) { background-color: var(--ck-accent) !important; }
html body :where(.border-rexius-gold,.border-rexius-teal,.border-\[\#F7941D\]) { border-color: var(--ck-accent) !important; }
html body :where(.hover\:text-rexius-gold:hover,.hover\:text-rexius-teal:hover,.hover\:text-\[\#F7941D\]:hover) { color: var(--ck-accent) !important; }
html body :where(.hover\:bg-rexius-gold:hover,.hover\:bg-rexius-teal:hover,.hover\:bg-\[\#F7941D\]:hover) { background-color: var(--ck-accent-strong) !important; }
html body :where(.focus\:border-\[\#F7941D\]:focus,.peer:checked ~ .peer-checked\:border-\[\#F7941D\]) { border-color: var(--ck-accent) !important; }
html body :where(input.accent-\[\#F7941D\],input[type="checkbox"],input[type="radio"]) { accent-color: var(--ck-accent) !important; }
html body .bg-rexius-teal\/15 { background-color: var(--ck-accent-soft) !important; }
html body .border-rexius-teal\/20 { border-color: color-mix(in srgb, var(--ck-accent) 20%, transparent) !important; }
html body :where(.text-childline,.hover\:text-childline:hover,.group:hover .group-hover\:text-rexius-gold) { color: var(--ck-accent) !important; }
html body :where(.hover\:text-childlinedark:hover) { color: var(--ck-accent-strong) !important; }
html body :where(.bg-childline,.hover\:bg-childline:hover) { background-color: var(--ck-accent) !important; }
html body :where(.border-childline,.hover\:border-childline:hover,.hover\:border-rexius-gold:hover,.focus\:border-rexius-gold:focus) { border-color: var(--ck-accent) !important; }
html body :where(.bg-rexius-gold\/10,.bg-rexius-teal\/10,.bg-childline\/10) { background-color: color-mix(in srgb, var(--ck-accent) 10%, transparent) !important; }
html body :where(.bg-rexius-gold\/15) { background-color: color-mix(in srgb, var(--ck-accent) 15%, transparent) !important; }
html body :where(.bg-rexius-gold\/20,.hover\:bg-rexius-gold\/20:hover) { background-color: color-mix(in srgb, var(--ck-accent) 20%, transparent) !important; }
html body :where(.border-rexius-gold\/20) { border-color: color-mix(in srgb, var(--ck-accent) 20%, transparent) !important; }
html body :where(.border-rexius-gold\/30,.hover\:border-rexius-gold\/30:hover) { border-color: color-mix(in srgb, var(--ck-accent) 30%, transparent) !important; }
html body :where(.border-rexius-gold\/50) { border-color: color-mix(in srgb, var(--ck-accent) 50%, transparent) !important; }
html body :where(.text-rexius-gold\/70) { color: color-mix(in srgb, var(--ck-accent) 70%, transparent) !important; }
html body :where(.focus\:ring-rexius-gold:focus) { --tw-ring-color: var(--ck-accent) !important; }
html body :where(.from-rexius-gold) { --tw-gradient-from: var(--ck-accent) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in srgb, var(--ck-accent) 0%, transparent) var(--tw-gradient-to-position) !important; }
html body .selection\:bg-rexius-gold::selection { background: var(--ck-accent) !important; }

/* Accessibility preference changes theme tokens here, not in component files. */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --ck-glass: #fffaf2 !important;
        --ck-glass-soft: #fffaf2 !important;
        --ck-glass-strong: #fff !important;
        --ck-glass-elevated: #fff !important;
        --ck-sidebar: #fffaf2 !important;
        --ck-input: #fff !important;
    }
    html[data-theme="dark"] {
        --ck-glass: #17242c !important;
        --ck-glass-soft: #17242c !important;
        --ck-glass-strong: #1d2b34 !important;
        --ck-glass-elevated: #1d2b34 !important;
        --ck-sidebar: #111d24 !important;
        --ck-input: #15222b !important;
    }
}

html, body, button, input, select, textarea, option, table, th, td, .font-sans {
    font-family: var(--ckims-font) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.font-mono, code, pre { font-family: var(--ckims-font-mono) !important; }

/* Final material/contrast bridge: this file deliberately wins over page-local colour leftovers. */
html body {
    color: var(--ck-ink) !important;
}
html body :where(input,select,textarea,.inp,.modal-input,.filter-input,.ctl,.tc-input,.rx-input) {
    color: var(--ck-ink) !important;
    background: var(--ck-input) !important;
    border-color: var(--ck-border) !important;
}
html body :where(input,select,textarea,.inp,.modal-input,.filter-input,.ctl,.tc-input,.rx-input):focus {
    background: var(--ck-input-focus) !important;
    border-color: color-mix(in srgb, var(--ck-accent) 70%, var(--ck-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-accent) 18%, transparent) !important;
    outline: none !important;
}
html body :where(input,textarea)::placeholder { color: var(--ck-subtle) !important; opacity: .9; }
html body select option { color: var(--ck-ink) !important; background: var(--ck-page-deep) !important; }

/* Every modal gets the same rounded, scroll-safe Apple-glass treatment. */
html body [data-ckims-modal="1"]:not([data-ckims-modal-panel="1"]) {
    overflow: auto !important;
    overscroll-behavior: contain;
    padding: clamp(.65rem, 2vw, 1.5rem) !important;
    background: var(--ck-overlay) !important;
    backdrop-filter: blur(24px) saturate(138%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(138%) !important;
}
html body [data-ckims-modal-panel="1"],
html body :where(.glass-modal,.rx-modal-card,.modal-content,.modal-dialog,.modal-bg,.ck-modal-panel,.modal-panel) {
    border-radius: var(--ck-radius-modal) !important;
    max-height: var(--ck-modal-max-height) !important;
    max-width: var(--ck-modal-max-width) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    color: var(--ck-ink) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ck-glass-elevated) 94%, transparent), color-mix(in srgb, var(--ck-glass-strong) 88%, transparent)) !important;
    border: 1px solid var(--ck-glass-border) !important;
    box-shadow: var(--ck-glass-shadow-elevated) !important;
    backdrop-filter: blur(42px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(42px) saturate(190%) !important;
}
html body [data-ckims-modal-panel="1"] :where(h1,h2,h3,h4,h5,h6,strong) { color: var(--ck-ink) !important; }
html body [data-ckims-modal-panel="1"] :where(p,label,legend,small,.text-slate-500,.text-slate-400,.text-slate-300) { color: var(--ck-muted) !important; }
html body [data-ckims-modal-panel="1"]::-webkit-scrollbar,
html body .ckims-notification-list::-webkit-scrollbar,
html body .ck-chat-messages::-webkit-scrollbar,
html body #ckChatContacts::-webkit-scrollbar { width: 8px; height: 8px; }
html body [data-ckims-modal-panel="1"]::-webkit-scrollbar-thumb,
html body .ckims-notification-list::-webkit-scrollbar-thumb,
html body .ck-chat-messages::-webkit-scrollbar-thumb,
html body #ckChatContacts::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--ck-accent) 50%, var(--ck-border));
}

/* Top-right communication controls: Notifications + Messages live together. */
.ckims-comm-dock {
    position: static;
    top: auto;
    right: auto;
    z-index: 9200;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem;
    border-radius: 1.15rem;
    background: var(--ck-glass-elevated);
    border: 1px solid var(--ck-glass-border);
    box-shadow: var(--ck-glass-shadow);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}
.ckims-comm-button {
    position: relative;
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    padding: 0 .78rem;
    color: var(--ck-ink);
    background: transparent;
    font-size: .73rem;
    font-weight: 800;
    transition: .16s ease;
}
.ckims-comm-button:hover,.ckims-comm-button[aria-expanded="true"] {
    background: var(--ck-accent-soft);
    border-color: color-mix(in srgb, var(--ck-accent) 38%, var(--ck-border));
    color: var(--ck-ink);
}
.ckims-comm-button > i { color: var(--ck-accent); }
.ckims-comm-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .28rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--ck-danger);
    font-size: .62rem;
    line-height: 1;
    font-weight: 900;
}
.ckims-utility-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--ck-overlay);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.ckims-utility-backdrop[hidden] { display: none !important; }

/* Shared modal placement for communication utilities. */
#ckNotificationsOverlay,
html body #ckChatOverlay {
    position: fixed !important;
    top: 4.6rem !important;
    right: 1rem !important;
    bottom: auto !important;
    z-index: 9100 !important;
    width: min(520px, calc(100vw - 2rem)) !important;
    height: min(720px, calc(100dvh - 5.6rem)) !important;
    max-height: calc(100dvh - 5.6rem) !important;
    border-radius: var(--ck-radius-modal) !important;
    overflow: hidden !important;
    color: var(--ck-ink) !important;
    background: var(--ck-glass-elevated) !important;
    border: 1px solid var(--ck-glass-border) !important;
    box-shadow: var(--ck-glass-shadow-elevated) !important;
    backdrop-filter: blur(42px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(42px) saturate(190%) !important;
    transform-origin: top right !important;
}
#ckNotificationsOverlay[hidden] { display: none !important; }
#ckNotificationsOverlay.is-open { display: grid !important; grid-template-rows: auto auto 1fr auto; }
html body #ckChatOverlay.open { display: grid !important; }
#ckNotificationsOverlay header,
html body #ckChatOverlay header,
html body #ckChatOverlay form,
html body #ckChatOverlay .ck-chat-body {
    color: var(--ck-ink) !important;
    background: color-mix(in srgb, var(--ck-glass-strong) 88%, transparent) !important;
    border-color: var(--ck-border) !important;
}
.ckims-notification-list { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ckims-notification-item { border-bottom: 1px solid var(--ck-border); }
.ckims-notification-item:last-child { border-bottom: 0; }
.ckims-notification-item.is-read { opacity: .68; }
.ckims-notification-item[hidden] { display: none !important; }
.ckims-notification-action {
    border-radius: 999px;
    border: 1px solid var(--ck-border);
    padding: .48rem .7rem;
    font-size: .68rem;
    font-weight: 850;
    color: var(--ck-ink);
    background: var(--ck-glass-soft);
}
.ckims-notification-action.primary { background: var(--ck-accent); color: #2b1a12; border-color: transparent; }

/* Live toast stack sits below the communication dock instead of covering it. */
html body .ckims-live-stack { top: 4.65rem !important; }

/* Consistent curvature for common UI surfaces without changing workflow structure. */
html body main :where(.glass,.glass-card,.glass-panel,.dashboard-card,.stat-card,.panel,.card,.notification-shell,[class*="-card"],[class*="_card"],[class*="-panel"],[class*="_panel"]) {
    border-radius: var(--ck-radius-card);
}
html body :where(button,input,select,textarea,.inp,.modal-input,.filter-input,.ctl,.subnav-toggle,.subnav-link) {
    border-radius: var(--ck-radius-control);
}

/* Printing: presentation only. JavaScript picks portrait/landscape before print. */
@media print {
    html, body { background: #fff !important; color: #111827 !important; }
    body { display: block !important; }
    #sidebar-container,#mobile-overlay,#mobile-sidebar-toggle,.ckims-comm-dock,.ckims-utility-backdrop,
    #ckNotificationsOverlay,#ckChatOverlay,.ck-chat-launch,.ckims-live-stack,.ckims-live-permission,.no-print {
        display: none !important;
    }
    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        background: #fff !important;
        color: #111827 !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    main :where(.glass,.glass-card,.glass-panel,.dashboard-card,.stat-card,.panel,.card,.notification-shell,[class*="-card"],[class*="-panel"]) {
        background: #fff !important;
        color: #111827 !important;
        border-color: #d8dee6 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group !important; }
    tfoot { display: table-footer-group !important; }
    tr, td, th { break-inside: avoid; page-break-inside: avoid; }
    a { color: inherit !important; text-decoration: none !important; }
    input,select,textarea { color:#111827 !important; background:#fff !important; box-shadow:none !important; }
    .print-only { display: block !important; }

    html[data-print-orientation="landscape"] [data-print-fit="wide"],
    html[data-print-orientation="landscape"] [data-print-fit="12-months"] {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }
    html[data-print-orientation="landscape"] [data-print-fit="12-months"] table,
    html[data-print-orientation="landscape"] table[data-print-fit="12-months"],
    html[data-print-orientation="landscape"] .ckims-budget-year-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 6.2pt !important;
        line-height: 1.15 !important;
    }
    .ckims-budget-year-table th,.ckims-budget-year-table td {
        min-width: 0 !important;
        padding: 1.4mm .65mm !important;
        vertical-align: top !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .ckims-budget-year-table .ckims-budget-line-col { width: 15.5% !important; }
    .ckims-budget-year-table .ckims-budget-default-gl-col { width: 7.5% !important; }
    .ckims-budget-year-table .ckims-budget-allowed-gl-col { width: 11.5% !important; }
    .ckims-budget-year-table .ckims-budget-month-col { width: 3.25% !important; text-align:center !important; }
    .ckims-budget-year-table .ckims-budget-total-col { width: 8.25% !important; }
    .ckims-budget-year-table .ckims-budget-notes-col { width: 11.75% !important; }
    .ckims-budget-year-table .ckims-sticky-cell { position: static !important; background:#fff !important; backdrop-filter:none !important; }
    .ckims-budget-year-table input,.ckims-budget-year-table select,.ckims-budget-year-table textarea {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        font: inherit !important;
        color:#111827 !important;
        background:transparent !important;
        appearance:none !important;
    }
    .ckims-budget-year-table select[multiple] { height: auto !important; }
}

@media (max-width: 767px) {
    .ckims-comm-dock { top: .75rem; right: .65rem; }
    .ckims-comm-label { display:none; }
    .ckims-comm-button { width:2.55rem; min-width:2.55rem; padding:0; }
    .ckims-comm-count { position:absolute; top:-.25rem; right:-.25rem; }
    #ckNotificationsOverlay,html body #ckChatOverlay {
        top:4.25rem !important;
        right:.5rem !important;
        width:calc(100vw - 1rem) !important;
        height:calc(100dvh - 4.75rem) !important;
        max-height:calc(100dvh - 4.75rem) !important;
        border-radius:1.25rem !important;
    }
    html body .ckims-live-stack { top:4.3rem !important; right:.5rem !important; width:calc(100vw - 1rem) !important; }
}


/* ==========================================================================
   CKIMS THEME HARDENING · 2026-09-15
   Authoritative light/dark, modal, portal, hover and print treatment.
   Component files own layout; this file owns appearance.
   ========================================================================== */
:root {
    --ck-surface: rgba(255,255,255,.64) !important;
    --ck-surface-soft: rgba(255,255,255,.42) !important;
    --ck-surface-solid: #ffffff !important;
    --ck-hover: rgba(247,148,29,.10) !important;
    --ck-hover-strong: rgba(247,148,29,.17) !important;
    --ck-focus-ring: rgba(247,148,29,.20) !important;
}
html[data-theme="dark"] {
    --ck-page: #071118 !important;
    --ck-page-deep: #0d1921 !important;
    --ck-ink: #f4f7f9 !important;
    --ck-muted: #bcc7cd !important;
    --ck-subtle: #95a5ae !important;
    --ck-label: #d9e1e5 !important;
    --ck-border: rgba(224,235,240,.17) !important;
    --ck-glass: rgba(20,32,41,.72) !important;
    --ck-glass-soft: rgba(24,37,47,.66) !important;
    --ck-glass-strong: rgba(25,39,49,.82) !important;
    --ck-glass-elevated: rgba(28,43,54,.94) !important;
    --ck-input: rgba(10,20,28,.88) !important;
    --ck-input-focus: rgba(17,30,40,.98) !important;
    --ck-overlay: rgba(1,7,12,.76) !important;
    --ck-sidebar: rgba(10,20,27,.95) !important;
    --ck-sidebar-text: #f5f8fa !important;
    --ck-sidebar-muted: #bac6cd !important;
    --ck-table-head: rgba(9,19,26,.84) !important;
    --ck-row-hover: rgba(247,148,29,.12) !important;
    --ck-surface: rgba(24,38,48,.80) !important;
    --ck-surface-soft: rgba(29,44,55,.72) !important;
    --ck-surface-solid: #172630 !important;
    --ck-hover: rgba(255,255,255,.075) !important;
    --ck-hover-strong: rgba(247,148,29,.18) !important;
}

html body {
    background:
        radial-gradient(circle at 7% 2%, color-mix(in srgb, var(--ck-accent) 20%, transparent), transparent 29rem),
        radial-gradient(circle at 91% 8%, color-mix(in srgb, var(--ck-teal) 15%, transparent), transparent 31rem),
        radial-gradient(circle at 72% 84%, rgba(59,130,246,.07), transparent 29rem),
        linear-gradient(145deg, var(--ck-page), var(--ck-page-deep)) !important;
    background-attachment: fixed !important;
    color: var(--ck-ink) !important;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 8% 2%, rgba(247,148,29,.11), transparent 30rem),
        radial-gradient(circle at 92% 6%, rgba(22,139,136,.10), transparent 34rem),
        radial-gradient(circle at 70% 84%, rgba(59,130,246,.055), transparent 31rem),
        linear-gradient(145deg, #061017, #0b1820 55%, #071119) !important;
}
html body main {
    color: var(--ck-ink) !important;
    background: color-mix(in srgb, var(--ck-glass) 82%, transparent) !important;
    border-color: var(--ck-glass-border) !important;
    box-shadow: var(--ck-glass-shadow) !important;
    backdrop-filter: blur(28px) saturate(158%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(158%) !important;
}
html[data-theme="dark"] body main {
    background: rgba(10,23,31,.73) !important;
    border-color: rgba(231,240,244,.13) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Neutral surfaces and legacy Tailwind utilities obey the active theme. */
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],.ckims-comm-dock,#sidebar-container) :where(
    .bg-white,.bg-white\/70,.bg-white\/80,.bg-white\/90,.bg-slate-50,.bg-slate-100,.bg-slate-200,
    .bg-gray-50,.bg-gray-100,.bg-gray-200,.bg-zinc-50,.bg-zinc-100,.bg-neutral-50,.bg-neutral-100
) { background-color: var(--ck-surface-soft) !important; background-image: none !important; }
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],.ckims-comm-dock,#sidebar-container) :where(
    .text-black,.text-slate-950,.text-slate-900,.text-slate-800,.text-slate-700,.text-gray-950,.text-gray-900,.text-gray-800,.text-gray-700
) { color: var(--ck-ink) !important; }
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],.ckims-comm-dock,#sidebar-container) :where(
    .text-slate-600,.text-slate-500,.text-slate-400,.text-slate-300,.text-gray-600,.text-gray-500,.text-gray-400,.text-gray-300
) { color: var(--ck-muted) !important; }
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],#sidebar-container) :where(
    .border-slate-100,.border-slate-200,.border-slate-300,.border-gray-100,.border-gray-200,.border-gray-300,.divide-slate-100,.divide-slate-200
) { border-color: var(--ck-border) !important; }

/* Hover/focus states must remain visible in dark mode. */
html[data-theme="dark"] body :where(main,#sidebar-container,[data-ckims-modal-panel="1"]) :where(
    .hover\:bg-white:hover,.hover\:bg-white\/5:hover,.hover\:bg-white\/10:hover,.hover\:bg-white\/20:hover,.hover\:bg-white\/70:hover,
    .hover\:bg-slate-50:hover,.hover\:bg-slate-100:hover,.hover\:bg-gray-50:hover,.hover\:bg-gray-100:hover
) { background: var(--ck-hover) !important; }
html[data-theme="dark"] body :where(main,#sidebar-container,[data-ckims-modal-panel="1"]) :where(
    .hover\:text-slate-950:hover,.hover\:text-slate-900:hover,.hover\:text-slate-800:hover,.hover\:text-slate-700:hover,
    .hover\:text-gray-950:hover,.hover\:text-gray-900:hover,.hover\:text-gray-800:hover,.hover\:text-white:hover
) { color: var(--ck-ink) !important; }
html[data-theme="dark"] body :where(main,#sidebar-container,[data-ckims-modal-panel="1"]) :where(button,a,[role="button"]):focus-visible {
    outline: 2px solid var(--ck-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ck-focus-ring) !important;
}


/* Core shell surfaces: these were previously scattered through page/UI files. */
html[data-theme="dark"] body #sidebar-container {
    color: var(--ck-sidebar-text) !important;
    background: linear-gradient(165deg, rgba(10,22,30,.97), rgba(14,28,37,.94)) !important;
    border-right-color: rgba(229,239,244,.13) !important;
    box-shadow: 16px 0 55px rgba(0,0,0,.28), inset -1px 0 0 rgba(255,255,255,.045) !important;
    backdrop-filter: blur(36px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(170%) !important;
}
html[data-theme="dark"] body main > header:not(.portal-hero),
html[data-theme="dark"] body main > .page-header,
html[data-theme="dark"] body main > .workspace-header {
    color: var(--ck-ink) !important;
    background: linear-gradient(145deg, rgba(28,43,53,.72), rgba(16,29,38,.58)) !important;
    border-color: rgba(230,240,244,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
}
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"]) :where(input,select,textarea,.inp,.modal-input,.filter-input,.ctl,.tc-input,.rx-input) {
    color: var(--ck-ink) !important;
    background: var(--ck-input) !important;
    border-color: rgba(226,238,243,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.16) !important;
}
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"]) :where(input,select,textarea,.inp,.modal-input,.filter-input,.ctl,.tc-input,.rx-input):focus {
    background: var(--ck-input-focus) !important;
    border-color: color-mix(in srgb, var(--ck-accent) 78%, white 4%) !important;
    box-shadow: 0 0 0 3px var(--ck-focus-ring), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
html[data-theme="dark"] body #sidebar-container .ckims-nav-search { background: linear-gradient(180deg, rgba(10,22,30,.99) 72%, rgba(10,22,30,0)) !important; }
html[data-theme="dark"] body #sidebar-container .ckims-nav-search input {
    color: var(--ck-sidebar-text) !important;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(230,240,244,.14) !important;
}
html[data-theme="dark"] body #sidebar-container .ckims-nav-search input:focus { background: rgba(255,255,255,.075) !important; }
html[data-theme="dark"] body #sidebar-container .ckims-clock-card,
html[data-theme="dark"] body #sidebar-container .ckims-theme-toggle {
    color: var(--ck-sidebar-text) !important;
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(230,240,244,.14) !important;
}
html[data-theme="dark"] body #sidebar-container .ckims-clock-time { color: var(--ck-sidebar-text) !important; }
html[data-theme="dark"] body #sidebar-container .ckims-theme-track { background: var(--ck-accent) !important; }
html[data-theme="dark"] body #sidebar-container .ckims-theme-thumb { transform: translateX(.95rem) !important; background: #101c24 !important; }
html[data-theme="dark"] body #sidebar-container :where(.brand-text h1,.nav-item,.subnav-link,.subnav-toggle,button) { color: var(--ck-sidebar-text) !important; }
html[data-theme="dark"] body #sidebar-container :where(.nav-label,.text-slate-400,.text-slate-500,.text-slate-600,.ckims-user-role) { color: var(--ck-sidebar-muted) !important; }

/* Sidebar active/cascade rows: no white inversion in dark mode. */
html[data-theme="dark"] body #sidebar-container :where(.nav-item.bg-white,.subnav-link.bg-white,.subnav-toggle.bg-white,a.bg-white,button.bg-white) {
    background: linear-gradient(135deg, rgba(247,148,29,.14), rgba(255,255,255,.055)) !important;
    color: var(--ck-sidebar-text) !important;
    border-color: color-mix(in srgb, var(--ck-accent) 48%, var(--ck-border)) !important;
}
html[data-theme="dark"] body #sidebar-container :where(.nav-item,.subnav-link,.subnav-toggle):hover {
    background: rgba(255,255,255,.07) !important;
    color: var(--ck-sidebar-text) !important;
}
html[data-theme="dark"] body #sidebar-container :where(.nav-item.bg-white,.subnav-link.bg-white,.subnav-toggle.bg-white) :where(i,.nav-text,.subnav-caret) {
    color: #ffbd70 !important;
}

/* Portal/dashboard cards use the same liquid material in both themes. */
html body main :where(.portal-home-card,.portal-home-card-head,.portal-home-row,.warm-panel,.report-section,.attendance-calendar-cell,.leave-month,.profile-panel,.dashboard-card,.stat-card,.soft-card) {
    color: var(--ck-ink) !important;
    border-color: var(--ck-border) !important;
}
html body main :where(.portal-home-card,.warm-panel,.report-section,.attendance-calendar-cell,.leave-month,.profile-panel,.dashboard-card,.stat-card,.soft-card) {
    background: var(--ck-surface) !important;
    box-shadow: 0 12px 34px rgba(31,43,50,.07), inset 0 1px 0 rgba(255,255,255,.42) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
html[data-theme="dark"] body main :where(.portal-home-card,.warm-panel,.report-section,.attendance-calendar-cell,.leave-month,.profile-panel,.dashboard-card,.stat-card,.soft-card) {
    background: var(--ck-surface) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
html[data-theme="dark"] body main :where(.portal-home-card-head,.portal-home-row) { border-color: var(--ck-border) !important; }

/* Modal contract: dark stays dark, light stays light, even before JS decoration. */
html body :where(
    [data-ckims-modal="1"],.rx-modal,.ck-modal,.modal-overlay,.modal-backdrop,
    div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed,div[id*="Modal_"].fixed
):not([data-ckims-modal-panel="1"]) {
    background: var(--ck-overlay) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
}
html body :where(
    [data-ckims-modal-panel="1"],
    div[id$="Modal"].fixed > .glass-card,div[id$="Modal"].fixed > .glass,div[id$="Modal"].fixed > .glass-panel,
    div[id$="-modal"].fixed > .glass-card,div[id$="-modal"].fixed > .glass,div[id$="-modal"].fixed > .glass-panel,
    div[id$="_modal"].fixed > .glass-card,div[id$="_modal"].fixed > .glass,div[id$="_modal"].fixed > .glass-panel,
    .modal-content,.modal-card,.rx-modal-card,.glass-modal,.ck-modal-panel,.modal-panel
) {
    color: var(--ck-ink) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ck-glass-elevated) 96%, transparent), color-mix(in srgb, var(--ck-glass-strong) 94%, transparent)) !important;
    border: 1px solid var(--ck-glass-border) !important;
    border-radius: var(--ck-radius-modal) !important;
    box-shadow: var(--ck-glass-shadow-elevated) !important;
    backdrop-filter: blur(42px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(42px) saturate(180%) !important;
}
html[data-theme="dark"] body :where(
    [data-ckims-modal-panel="1"],div[id$="Modal"].fixed > .glass-card,div[id$="Modal"].fixed > .glass,
    div[id$="-modal"].fixed > .glass-card,div[id$="_modal"].fixed > .glass-card,.modal-content,.modal-card,.rx-modal-card,.glass-modal
) {
    background: linear-gradient(145deg, rgba(29,45,56,.97), rgba(17,31,40,.96)) !important;
    border-color: rgba(233,241,245,.17) !important;
}
html[data-theme="dark"] body :where([data-ckims-modal-panel="1"],div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed) :where(.bg-white,.bg-slate-50,.bg-slate-100) {
    background: rgba(255,255,255,.055) !important;
}
html[data-theme="dark"] body :where([data-ckims-modal-panel="1"],div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed) :where(.text-slate-950,.text-slate-900,.text-slate-800,.text-slate-700) { color: var(--ck-ink) !important; }
html[data-theme="dark"] body :where([data-ckims-modal-panel="1"],div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed) :where(.text-slate-600,.text-slate-500,.text-slate-400,.text-slate-300) { color: var(--ck-muted) !important; }
html[data-theme="dark"] body :where([data-ckims-modal-panel="1"],div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed) :where(textarea,input,select,.inp) {
    color: var(--ck-ink) !important;
    background: rgba(8,18,25,.88) !important;
    border-color: rgba(230,240,244,.18) !important;
}
html[data-theme="dark"] body :where([data-ckims-modal-panel="1"],div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed) label > :where(input[type="radio"],input[type="checkbox"]) + span {
    color: var(--ck-muted) !important;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(233,241,245,.16) !important;
}
html[data-theme="dark"] body :where([data-ckims-modal-panel="1"],div[id$="Modal"].fixed,div[id$="-modal"].fixed,div[id$="_modal"].fixed) label > :where(input[type="radio"],input[type="checkbox"]):checked + span {
    color: #ffd6a3 !important;
    background: linear-gradient(135deg, rgba(247,148,29,.22), rgba(255,255,255,.06)) !important;
    border-color: rgba(247,148,29,.72) !important;
}

/* Communication controls are in normal document flow; opened inbox/chat remain modal overlays. */
.ckims-comm-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 3.25rem;
    margin: 0 0 .55rem 0;
    padding: 0 .1rem;
    position: relative;
    z-index: 30;
}
.ckims-comm-dock:not(.is-inline) { visibility: hidden !important; pointer-events: none !important; }
.ckims-comm-dock.is-inline {
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    z-index: 1 !important;
}
html[data-theme="dark"] body .ckims-comm-dock {
    color: var(--ck-ink) !important;
    background: rgba(25,40,50,.88) !important;
    border-color: rgba(232,241,245,.16) !important;
}
html[data-theme="dark"] body .ckims-comm-button:hover,
html[data-theme="dark"] body .ckims-comm-button[aria-expanded="true"] {
    background: var(--ck-hover-strong) !important;
    color: var(--ck-ink) !important;
}

/* Printing is an official paper document: no glass, aurora, overlays or inverted surfaces. */
@media print {
    @page { margin: 8mm; }
    html,body,body main { background:#fff !important; background-image:none !important; color:#111827 !important; box-shadow:none !important; filter:none !important; }
    body::before,body::after,main::before,main::after,
    .ckims-comm-row,.ckims-comm-dock,.ckims-utility-backdrop,#ckNotificationsOverlay,#ckChatOverlay,
    #mobile-overlay,#mobile-sidebar-toggle,#sidebar-container,.ck-chat-launch,.ckims-live-stack,.ckims-live-permission,
    [data-ckims-modal="1"],.modal-overlay,.modal-backdrop,.rx-modal,.ck-modal,.no-print {
        display:none !important;
    }
    body main, body main :where(section,article,aside,header,footer,div,table,thead,tbody,tr,td,th,form) {
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        filter:none !important;
        text-shadow:none !important;
    }
    body main :where(.glass,.glass-card,.glass-panel,.portal-home-card,.dashboard-card,.stat-card,.soft-card,.warm-panel,.profile-panel,.report-section,.panel,.card,[class*="-card"],[class*="-panel"]) {
        background:#fff !important;
        background-image:none !important;
        color:#111827 !important;
        border-color:#d6dde5 !important;
        box-shadow:none !important;
    }
    body main :where(h1,h2,h3,h4,h5,h6,p,span,small,label,legend,td,th,.text-slate-950,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-slate-400) {
        color:#111827 !important;
    }
    body main :where(input,select,textarea) { background:#fff !important; color:#111827 !important; border-color:#cfd7df !important; box-shadow:none !important; }
    body main a { color:#111827 !important; text-decoration:none !important; }
}


/* Login and password-reset surfaces also inherit the centralized theme. */
html[data-theme="dark"] body .login-shell { background:rgba(13,20,29,.82)!important; border-color:rgba(224,235,240,.16)!important; box-shadow:0 32px 100px rgba(0,0,0,.45)!important; }
html[data-theme="dark"] body .story-panel { background:linear-gradient(160deg,rgba(247,148,29,.16),rgba(13,25,34,.84))!important; border-color:rgba(247,148,29,.20)!important; }
html[data-theme="dark"] body :where(.auth-panel,.modal-card,.message-card) { background:rgba(22,35,45,.86)!important; color:var(--ck-ink)!important; border-color:rgba(224,235,240,.16)!important; }
html[data-theme="dark"] body :where(.auth-title,.auth-panel h1,.auth-panel h2,.auth-panel h3) { color:var(--ck-ink)!important; }
html[data-theme="dark"] body :where(.auth-subtitle,.auth-panel label,.auth-panel p) { color:var(--ck-muted)!important; }
html[data-theme="dark"] body .auth-panel input { background:var(--ck-input)!important; color:var(--ck-ink)!important; border-color:var(--ck-border)!important; }
html[data-theme="dark"] body .first-theme-toggle { background:var(--ck-glass-strong)!important; border-color:var(--ck-border)!important; color:var(--ck-ink)!important; backdrop-filter:blur(20px); }

/* CKIMS THEME HARDENING R2 · modal controls, portal glass and paper output */
html[data-theme="dark"] body :where(
    [data-ckims-modal-panel="1"],
    div[id$="Modal"].fixed > :first-child,
    div[id$="-modal"].fixed > :first-child,
    div[id$="_modal"].fixed > :first-child,
    [role="dialog"]
) :where(button:not(.bg-green-600):not(.bg-red-600):not(.bg-indigo-600):not(.bg-orange-500):not(.btn-primary),[role="button"]) {
    border-color: rgba(228,238,243,.17) !important;
}
html[data-theme="dark"] body :where(
    [data-ckims-modal-panel="1"],
    div[id$="Modal"].fixed,
    div[id$="-modal"].fixed,
    div[id$="_modal"].fixed
) :where(.bg-orange-50,.bg-amber-50,.bg-emerald-50,.bg-green-50,.bg-red-50,.bg-blue-50,.bg-indigo-50) {
    background-color: color-mix(in srgb, currentColor 8%, rgba(255,255,255,.035)) !important;
}
html[data-theme="dark"] body :where(
    [data-ckims-modal-panel="1"],
    div[id$="Modal"].fixed,
    div[id$="-modal"].fixed,
    div[id$="_modal"].fixed
) :where(.peer:checked ~ .peer-checked\:bg-orange-50) {
    background: linear-gradient(135deg, rgba(247,148,29,.23), rgba(255,255,255,.055)) !important;
}

/* Employee portal overview receives the same page-depth/glass field as the admin workspace. */
html body.portal-view-overview main {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--ck-glass-border) !important;
    border-radius: clamp(1rem, 1.6vw, 1.8rem) !important;
}
html body.portal-view-overview main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--ck-accent) 11%, transparent), transparent 24rem),
        radial-gradient(circle at 94% 2%, color-mix(in srgb, var(--ck-teal) 10%, transparent), transparent 28rem);
}
html[data-theme="dark"] body.portal-view-overview main::before {
    background:
        radial-gradient(circle at 8% 4%, rgba(247,148,29,.075), transparent 25rem),
        radial-gradient(circle at 94% 2%, rgba(22,139,136,.065), transparent 29rem);
}

/* Dock belongs to layout flow. Never allow it to float over a page header/control row. */
.ckims-comm-row {
    clear: both;
    contain: layout;
}
.ckims-comm-row + header,
.ckims-comm-row + .page-header,
.ckims-comm-row + .workspace-header {
    position: relative;
    z-index: 1;
}

@media print {
    @page { background: #fff; }
    html, body, body main {
        background: #fff !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body.portal-view-overview main::before,
    body main::before,
    body main::after { content: none !important; display: none !important; }
    body main :where(*) {
        -webkit-print-color-adjust: economy;
        print-color-adjust: economy;
    }
}

/* Dark-mode semantic colours keep alerts/status/links readable instead of inheriting
   Tailwind's light-theme 700/800 tones. */
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],#sidebar-container,.ckims-comm-dock) :where(
    .text-green-600,.text-green-700,.text-green-800,.text-emerald-600,.text-emerald-700,.text-emerald-800
) { color: #86efac !important; }
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],#sidebar-container,.ckims-comm-dock) :where(
    .text-red-500,.text-red-600,.text-red-700,.text-red-800
) { color: #fca5a5 !important; }
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],#sidebar-container,.ckims-comm-dock) :where(
    .text-orange-600,.text-orange-700,.text-orange-800,.text-amber-600,.text-amber-700,.text-amber-800,.text-\[\#7c2d12\],.text-\[\#9a3d05\]
) { color: #fdba74 !important; }
html[data-theme="dark"] body :where(main,[data-ckims-modal-panel="1"],#sidebar-container,.ckims-comm-dock) :where(
    .text-blue-600,.text-blue-700,.text-blue-800,.text-indigo-600,.text-indigo-700,.text-indigo-800
) { color: #93c5fd !important; }


/* R5 interaction safety: hidden/dialog decoration must never sit on top of page controls. */
[data-ckims-modal="1"].hidden,
[data-ckims-modal="1"][hidden],
[data-ckims-modal-root="1"].hidden,
[data-ckims-modal-root="1"][hidden],
#ckNotificationsOverlay[hidden],
#ckChatOverlay[aria-hidden="true"]:not(.open),
.ckims-utility-backdrop[hidden] { pointer-events: none !important; }

html body::before, html body::after, html body main::before, html body main::after { pointer-events: none; }