/*
 * RoTracker technician overhaul
 * Modern visual system for the unified tech.html application.
 */

:root {
    --ui-sidebar-width: 248px;
    --ui-page: #f6f7f9;
    --ui-surface: #ffffff;
    --ui-subtle: #f1f3f5;
    --ui-subtle-2: #e9edf1;
    --ui-ink: #171a1f;
    --ui-ink-soft: #384152;
    --ui-muted: #6d7582;
    --ui-line: #dfe3e8;
    --ui-line-strong: #cfd5dc;
    --ui-accent: #2458d6;
    --ui-accent-hover: #1949bf;
    --ui-accent-soft: #edf2ff;
    --ui-positive: #138a5b;
    --ui-warning: #b15b09;
    --ui-danger: #c73535;
    --ui-nav-active: #15181d;
    --ui-on-active: #ffffff;
    --ui-radius: 10px;
}

html { color-scheme: light; background: var(--ui-page); }
html.dark {
    --ui-page: #0f141b;
    --ui-surface: #171d25;
    --ui-subtle: #1d242e;
    --ui-subtle-2: #252e3a;
    --ui-ink: #f1f4f7;
    --ui-ink-soft: #c8d0da;
    --ui-muted: #939eac;
    --ui-line: #2d3744;
    --ui-line-strong: #3a4655;
    --ui-accent: #6f9df5;
    --ui-accent-hover: #86adf7;
    --ui-accent-soft: #1d2b47;
    --ui-positive: #45c58b;
    --ui-warning: #e7a14f;
    --ui-danger: #f07d7d;
    --ui-nav-active: #356fd8;
    --ui-on-active: #ffffff;
    color-scheme: dark;
    background: var(--ui-page);
}

body.rt-tech,
.dark body.rt-tech {
    min-height: 100vh;
    margin: 0;
    color: var(--ui-ink) !important;
    background: var(--ui-page) !important;
    background-image: none !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

.design-preview #app-wrapper { display: block !important; }
.design-preview #auth-view,
.design-preview #subscription-view { display: none !important; }
.hidden { display: none !important; }
button, input, select, textarea { font: inherit; }
button { filter: none !important; }

/* Left navigation */
@media (min-width: 768px) {
    #app-header {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 60 !important;
        display: flex !important;
        width: var(--ui-sidebar-width) !important;
        height: 100dvh !important;
        padding: 0 16px 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: hidden auto;
        color: var(--ui-ink) !important;
        border: 0 !important;
        border-right: 1px solid var(--ui-line) !important;
        background: var(--ui-surface) !important;
        background-image: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    #app-header > .sidebar-brand {
        display: flex;
        min-height: 82px;
        padding: 0 8px;
        align-items: center;
        gap: 11px;
        border-bottom: 1px solid var(--ui-line);
    }

    #app-header .dashboard-brand-logo {
        width: 41px !important;
        height: 41px !important;
        padding: 0 !important;
        object-fit: cover;
        border: 1px solid var(--ui-line-strong);
        border-radius: 9px !important;
        box-shadow: none !important;
    }

    #app-header .rt-brand-title { display: block !important; }
    #app-header h1 {
        margin: 0;
        color: var(--ui-ink) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -.02em;
    }
    #app-header .rt-role-badge { display: none !important; }

    #user-email-display {
        display: block;
        max-width: 158px;
        margin-top: 3px;
        overflow: hidden;
        color: #8a929e !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: .05em !important;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
    }

    #app-header > .workspace-nav-shell {
        display: flex !important;
        min-height: 0;
        flex: 1;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important;
    }

    #app-header nav {
        display: flex !important;
        width: 100% !important;
        min-height: 0;
        padding: 24px 0 16px !important;
        flex: 1;
        flex-direction: column !important;
        gap: 5px !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .sidebar-nav-label {
        display: block;
        padding: 0 10px 9px;
        color: #9aa1ac;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    body.rt-app.rt-tech #app-header nav button {
        position: relative;
        display: flex !important;
        width: 100%;
        min-height: 43px;
        padding: 8px 10px !important;
        align-items: center;
        gap: 10px;
        color: #626b78 !important;
        border: 1px solid transparent !important;
        border-radius: 7px !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: left;
        transition: color .12s ease, background-color .12s ease !important;
    }
    body.rt-app.rt-tech #app-header nav button.hidden { display: none !important; }
    body.rt-app.rt-tech #app-header nav button:hover {
        color: var(--ui-ink) !important;
        border-color: transparent !important;
        background: var(--ui-subtle) !important;
        transform: none !important;
    }

    #app-header nav button .nav-svg-wrap {
        display: grid;
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
        place-items: center;
        color: #7a8390;
        border: 0;
        background: transparent;
    }
    #app-header nav button .nav-svg { width: 17px; height: 17px; stroke-width: 1.75; }

    body.rt-app.rt-tech #app-header nav button[id][aria-current="page"] {
        color: var(--ui-on-active) !important;
        border-color: var(--ui-nav-active) !important;
        background: var(--ui-nav-active) !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    body.rt-app.rt-tech #app-header nav button[id][aria-current="page"] .nav-svg-wrap { color: var(--ui-on-active); }

    .sidebar-footer { padding-top: 14px; border-top: 1px solid var(--ui-line); }

    #app-header .sidebar-logout {
        display: flex;
        width: 100%;
        min-height: 40px;
        padding: 8px 10px !important;
        align-items: center;
        gap: 10px;
        color: #747d89 !important;
        border: 1px solid var(--ui-line);
        border-radius: 7px;
        background: var(--ui-surface);
        font-size: 11px !important;
        font-weight: 600;
    }
    #app-header .sidebar-logout:hover { color: var(--ui-danger) !important; border-color: var(--ui-danger); background: var(--ui-subtle); }

    #workspace-topbar,
    #main-content { margin-left: var(--ui-sidebar-width) !important; }
    #announcement-banner-stack {
        margin-left: calc(var(--ui-sidebar-width) + 24px) !important;
        margin-right: 24px !important;
    }
    #mobile-bottom-nav { display: none !important; }
}

/* Top bar */
#workspace-topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: grid;
    min-height: 76px;
    padding: 14px 28px;
    grid-template-columns: minmax(160px, 1fr) auto;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface);
    box-shadow: none;
    backdrop-filter: none;
}

.workspace-eyebrow { color: #989faa; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
#workspace-view-title { margin: 2px 0 0; color: var(--ui-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }

.workspace-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.workspace-date-chip {
    display: inline-flex;
    min-height: 32px;
    padding: 0 9px;
    align-items: center;
    gap: 6px;
    color: #737c88;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: var(--ui-surface);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

/* Main content */
#main-content {
    width: auto !important;
    max-width: none !important;
    padding: 24px 28px 44px !important;
    color: var(--ui-ink) !important;
    background: var(--ui-page) !important;
}
#main-content > [id^="view-"] { max-width: 1480px; margin: 0 auto; }
#view-dashboard { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }

@media (min-width: 1380px) {
    #view-dashboard { grid-template-columns: minmax(0, 1.25fr) minmax(370px, .75fr) !important; }
}

.dashboard-section-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

/* Neutralize Tailwind dark utilities inside the redesigned application. */
body.rt-tech #main-content .bg-white,
body.rt-tech #main-content [class*="dark:bg-slate-800"],
.dark body.rt-tech #main-content .bg-white,
.dark body.rt-tech #main-content [class*="dark:bg-slate-800"] {
    color: var(--ui-ink) !important;
    border-color: var(--ui-line) !important;
    background-color: var(--ui-surface) !important;
}
body.rt-tech #main-content .bg-slate-50,
body.rt-tech #main-content .bg-slate-100,
body.rt-tech #main-content [class*="dark:bg-slate-900"],
.dark body.rt-tech #main-content .bg-slate-50,
.dark body.rt-tech #main-content .bg-slate-100,
.dark body.rt-tech #main-content [class*="dark:bg-slate-900"] {
    color: var(--ui-ink-soft) !important;
    border-color: var(--ui-line) !important;
    background-color: var(--ui-subtle) !important;
}

body.rt-tech #main-content .rounded-2xl,
body.rt-tech #main-content .rounded-xl { border-radius: var(--ui-radius) !important; }
body.rt-tech #main-content > div:not(.hidden),
body.rt-tech #form-container,
body.rt-tech #view-history,
body.rt-tech #view-admin,
body.rt-tech #view-support,
body.rt-tech #view-settings > div,
body.rt-tech #view-quotes > div > div { box-shadow: none !important; }

#main-content h2,
#main-content h3 { color: var(--ui-ink) !important; letter-spacing: -.015em; }
#main-content label[class*="uppercase"] { color: #7d8591 !important; letter-spacing: .07em !important; }
#main-content .text-slate-400,
#main-content .text-slate-500,
#main-content .dark\:text-slate-400 { color: var(--ui-muted) !important; }
.dark body.rt-tech #main-content [class*="dark:text-slate-100"],
.dark body.rt-tech #main-content [class*="dark:text-slate-200"],
.dark body.rt-tech #main-content [class*="dark:text-slate-300"],
.dark body.rt-tech #main-content [class*="dark:text-white"] { color: var(--ui-ink-soft) !important; }
.dark body.rt-tech #main-content [class*="dark:text-slate-400"],
.dark body.rt-tech #main-content [class*="dark:text-slate-500"] { color: var(--ui-muted) !important; }

body.rt-tech #main-content input,
body.rt-tech #main-content select,
body.rt-tech #main-content textarea,
.dark body.rt-tech #main-content input,
.dark body.rt-tech #main-content select,
.dark body.rt-tech #main-content textarea {
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line-strong) !important;
    border-radius: 8px !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}
body.rt-tech #main-content input::placeholder,
body.rt-tech #main-content textarea::placeholder { color: #a0a7b1 !important; }
body.rt-tech #main-content input:hover,
body.rt-tech #main-content select:hover,
body.rt-tech #main-content textarea:hover { border-color: #adb5c0 !important; }
body.rt-tech #main-content input:focus,
body.rt-tech #main-content select:focus,
body.rt-tech #main-content textarea:focus { border-color: #7898e3 !important; box-shadow: 0 0 0 3px rgba(36, 88, 214, .10) !important; }

body.rt-tech #main-content button { border-radius: 7px !important; box-shadow: none !important; }
body.rt-tech #main-content button[class*="bg-primary-600"],
body.rt-tech #main-content button[class*="bg-indigo-600"] {
    color: #fff !important;
    border-color: var(--ui-accent) !important;
    background: var(--ui-accent) !important;
    background-image: none !important;
}
body.rt-tech #main-content button[class*="bg-primary-600"]:hover,
body.rt-tech #main-content button[class*="bg-indigo-600"]:hover { background: var(--ui-accent-hover) !important; }
body.rt-tech #main-content button[class*="bg-primary-50"] {
    color: var(--ui-accent) !important;
    border: 1px solid #dbe4f8 !important;
    background: var(--ui-accent-soft) !important;
}
body.rt-tech #main-content #form-container button[onclick="window.openRoQuickTools()"] {
    color: var(--ui-on-active) !important;
    border: 1px solid var(--ui-nav-active) !important;
    background: var(--ui-nav-active) !important;
}

#form-container { border-top: 3px solid var(--ui-ink) !important; }
#main-content table { color: var(--ui-ink-soft); }
#main-content table thead { background: var(--ui-subtle) !important; }
#main-content table th { color: var(--ui-muted) !important; border-color: var(--ui-line) !important; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
#main-content table td { color: var(--ui-ink-soft) !important; border-color: var(--ui-line) !important; }
#main-content table tbody tr:hover { background: var(--ui-subtle) !important; }

.performance-chart-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.performance-chart-card { padding: 16px !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; border-radius: 9px !important; background: var(--ui-subtle) !important; text-align: center; }
.performance-chart-title { margin: 0 0 12px; color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.donut-chart {
    display: flex !important;
    width: 118px !important;
    height: 118px !important;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    border: 13px solid var(--ui-subtle-2);
    border-radius: 50% !important;
    background-color: var(--ui-subtle);
    box-shadow: none !important;
}
.donut-hole {
    display: flex;
    width: 78px;
    height: 78px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background: var(--ui-surface) !important;
}
.donut-hole strong { color: var(--ui-ink) !important; font-size: 20px; line-height: 1; }
.donut-hole span { margin-top: 4px; color: var(--ui-muted) !important; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.chart-breakdown-grid { display: grid; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.chart-breakdown-grid > * { padding: 7px 5px; color: var(--ui-muted) !important; border: 1px solid var(--ui-line); border-radius: 5px; background: var(--ui-surface); font-size: 12px !important; font-weight: 600; line-height: 1.3; }

#weekly-statistics-panel > div > p.text-sm {
    font-size: 14px !important;
    line-height: 1.5;
}

#weekly-statistics-panel p[class*="uppercase"],
#weekly-statistics-panel [class*="text-[10px]"] {
    font-size: 11px !important;
    line-height: 1.35;
}

#weekly-statistics-panel [class*="text-xs"] {
    font-size: 12px !important;
    line-height: 1.4;
}
#week-display-label,
#display-repairs { color: var(--ui-ink) !important; }
#display-hours { color: var(--ui-accent) !important; }
#display-today-hours,
#display-gross { color: var(--ui-positive) !important; }
#progress-bar,
#pay-period-progress-bar { background: var(--ui-accent) !important; }
#announcement-banner-stack > div { border-radius: 8px !important; box-shadow: none !important; }
#shop-chat-launcher { color: var(--ui-on-active) !important; background: var(--ui-nav-active) !important; box-shadow: 0 10px 24px rgba(23, 26, 31, .16) !important; }

/* Theme-safe tool output and high-contrast light-mode statistics. */
#converter-result-card {
    color: var(--ui-ink);
    border: 1px solid var(--ui-line-strong);
    background: var(--ui-subtle);
}
#converter-result-card .converter-result-label { color: var(--ui-muted) !important; }
#converter-result { color: var(--ui-accent) !important; }

html:not(.dark) body.rt-tech #technician-toolbox-label,
html:not(.dark) body.rt-tech #display-hours,
html:not(.dark) body.rt-tech #display-repairs,
html:not(.dark) body.rt-tech #pay-period-hours,
html:not(.dark) body.rt-tech #pay-period-ros,
html:not(.dark) body.rt-tech #history-total-ros,
html:not(.dark) body.rt-tech #history-stat-total-hours,
html:not(.dark) body.rt-tech #history-stat-goal-streak {
    color: var(--ui-accent) !important;
}

/* Unified overlays */
body.rt-tech [id$="-modal"] {
    color: var(--ui-ink) !important;
    background-color: rgba(26, 31, 39, .42) !important;
    backdrop-filter: blur(2px);
}
body.rt-tech [id$="-modal"] > div:not(.ro-quick-modal-dialog) {
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 12px !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 22px 60px rgba(25, 31, 41, .16) !important;
}
body.rt-tech [id$="-modal"] h2,
body.rt-tech [id$="-modal"] h3,
body.rt-tech [id$="-modal"] h4 { color: var(--ui-ink) !important; letter-spacing: -.015em; }
body.rt-tech [id$="-modal"] input,
body.rt-tech [id$="-modal"] select,
body.rt-tech [id$="-modal"] textarea {
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line-strong) !important;
    border-radius: 8px !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
}
body.rt-tech [id$="-modal"] input:focus,
body.rt-tech [id$="-modal"] select:focus,
body.rt-tech [id$="-modal"] textarea:focus { border-color: #7898e3 !important; outline: 0; box-shadow: 0 0 0 3px rgba(36, 88, 214, .10) !important; }
body.rt-tech [id$="-modal"] [class*="dark:bg-slate-800"],
body.rt-tech [id$="-modal"] [class*="dark:bg-slate-900"],
body.rt-tech [id$="-modal"] .bg-slate-50,
body.rt-tech [id$="-modal"] .bg-slate-100 { color: var(--ui-ink-soft) !important; border-color: var(--ui-line) !important; background-color: var(--ui-subtle) !important; }
body.rt-tech [id$="-modal"] [class*="dark:text-slate-100"],
body.rt-tech [id$="-modal"] [class*="dark:text-slate-200"],
body.rt-tech [id$="-modal"] [class*="dark:text-slate-300"],
body.rt-tech [id$="-modal"] [class*="dark:text-white"] { color: var(--ui-ink-soft) !important; }
body.rt-tech [id$="-modal"] button[class*="bg-primary-600"] { color: #fff !important; border: 1px solid var(--ui-accent) !important; border-radius: 7px !important; background: var(--ui-accent) !important; box-shadow: none !important; }
body.rt-tech [id$="-modal"] button[class*="bg-slate-800"] { color: var(--ui-on-active) !important; border-radius: 7px !important; background: var(--ui-nav-active) !important; box-shadow: none !important; }

/* Quick Tools has its own structure instead of inheriting the old modal layout. */
.ro-quick-modal-dialog {
    display: grid;
    width: min(900px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 40px));
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    color: var(--ui-ink);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: 0 24px 70px rgba(25, 31, 41, .20);
}
.ro-quick-modal-header {
    display: flex;
    min-height: 78px;
    padding: 17px 20px;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface);
}
.ro-quick-modal-header p { margin: 0 0 3px; color: #949ca7; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.ro-quick-modal-header h3 { margin: 0; color: var(--ui-ink); font-size: 19px; font-weight: 700; }
.ro-quick-modal-header h3 span { margin-left: 5px; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ro-quick-modal-header > button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #7e8793;
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    background: var(--ui-surface);
    font-size: 22px;
    line-height: 1;
}
.ro-quick-modal-header > button:hover { color: var(--ui-danger); border-color: var(--ui-danger); background: var(--ui-subtle); }
.ro-quick-modal-tabs {
    min-height: 0;
    padding: 16px 12px;
    border-right: 1px solid var(--ui-line);
    background: var(--ui-subtle);
}
.ro-quick-modal-tabs > div { display: flex; flex-direction: column; gap: 4px; }
.ro-quick-modal-tabs button {
    position: relative;
    width: 100%;
    min-height: 41px;
    padding: 8px 11px;
    color: #68717e;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
}
.ro-quick-modal-tabs button:hover { color: var(--ui-ink); background: var(--ui-subtle-2); }
.ro-quick-modal-tabs button[aria-selected="true"] { color: var(--ui-on-active); border-color: var(--ui-nav-active); background: var(--ui-nav-active); }
.ro-quick-modal-content {
    min-width: 0;
    min-height: 0;
    padding: 22px 24px 26px;
    overflow-y: auto;
    background: var(--ui-surface);
}
.ro-quick-modal-content [data-ro-quick-panel] > p:first-child { margin: 0 0 16px; color: var(--ui-muted) !important; font-size: 12px; line-height: 1.5; }
#ro-quick-notes-list,
#ro-quick-diagnostic-list,
#ro-quick-compression-list,
#ro-quick-qc-list { display: flex; flex-direction: column; gap: 8px; }
#ro-quick-notes-list > div,
#ro-quick-diagnostic-list > div,
#ro-quick-compression-list > div,
#ro-quick-qc-list > div {
    display: flex;
    padding: 13px 14px !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    color: var(--ui-ink);
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: var(--ui-surface);
}
#ro-quick-notes-list > div:hover,
#ro-quick-diagnostic-list > div:hover,
#ro-quick-compression-list > div:hover,
#ro-quick-qc-list > div:hover { border-color: var(--ui-line-strong) !important; background: var(--ui-subtle); }
#ro-quick-tools-modal [data-ro-quick-panel] button[class*="bg-primary-50"] {
    flex: 0 0 auto;
    padding: 7px 11px !important;
    color: var(--ui-accent) !important;
    border: 1px solid #d6e1fb !important;
    border-radius: 6px !important;
    background: var(--ui-accent-soft) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}
#ro-quick-panel-photos > div:first-child { padding: 16px !important; border: 1px solid var(--ui-line) !important; border-radius: 9px !important; background: var(--ui-subtle) !important; }
#ro-quick-photos-list > label { border-color: var(--ui-line) !important; border-radius: 8px !important; background: var(--ui-surface); }

/* Authentication and overlays */
#auth-view,
#subscription-view { color: var(--ui-ink) !important; background: var(--ui-page) !important; background-image: none !important; }
#auth-view > div,
#subscription-view > div {
    color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 12px !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 16px 44px rgba(30, 38, 50, .08) !important;
}
html.dark #subscription-view #yearly-plan-option {
    color: #f8fafc !important;
    border-color: #0f766e !important;
    background: #0f2f33 !important;
}
html.dark #subscription-view #yearly-plan-option .yearly-plan-label {
    color: #5eead4 !important;
}
html.dark #subscription-view #yearly-plan-option .yearly-plan-price {
    color: #ffffff !important;
}
html.dark #subscription-view #yearly-plan-option .yearly-plan-period,
html.dark #subscription-view #yearly-plan-option .yearly-plan-description {
    color: #cbd5e1 !important;
}
html:not(.dark)[data-interface="workspace"] #auth-primary-btn {
    color: #ffffff !important;
    border: 1px solid #2458d6 !important;
    background: #2458d6 !important;
    box-shadow: 0 6px 16px rgba(36, 88, 214, .18) !important;
}
html:not(.dark)[data-interface="workspace"] #auth-primary-btn:hover {
    color: #ffffff !important;
    border-color: #1949bf !important;
    background: #1949bf !important;
}
html.dark[data-interface="workspace"] #auth-install-btn {
    color: #ffffff !important;
    border-color: #6f9df5 !important;
    background: #356fd8 !important;
}
html.dark[data-interface="workspace"] #auth-install-btn:hover {
    color: #ffffff !important;
    border-color: #86adf7 !important;
    background: #2b61c3 !important;
}
body.rt-tech [id$="-modal"] .bg-white,
body.rt-tech [id$="-modal"] [class*="dark:bg-slate-800"] { color: var(--ui-ink) !important; border-color: var(--ui-line) !important; background-color: var(--ui-surface) !important; }

/* Mobile */
@media (max-width: 767px) {
    #app-header {
        position: sticky !important;
        top: 0;
        z-index: 45;
        display: flex !important;
        min-height: 64px;
        padding: 10px 13px !important;
        align-items: center !important;
        justify-content: space-between;
        flex-direction: row !important;
        gap: 10px !important;
        color: var(--ui-ink) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ui-line) !important;
        background: var(--ui-surface) !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    #app-header > .sidebar-brand { display: flex; min-width: 0; align-items: center; gap: 9px; }
    #app-header .dashboard-brand-logo { width: 37px !important; height: 37px !important; border: 1px solid var(--ui-line); border-radius: 8px !important; }
    #app-header .rt-brand-title { display: block !important; }
    #app-header h1 { color: var(--ui-ink) !important; font-size: 15px !important; }
    #app-header .rt-role-badge,
    #user-email-display { display: none !important; }
    #app-header > .workspace-nav-shell { display: block !important; width: auto !important; }
    #app-header nav,
    .sidebar-nav-label { display: none !important; }
    .sidebar-footer { border: 0; padding: 0; }
    #app-header .sidebar-logout {
        display: grid;
        width: 35px;
        height: 35px;
        padding: 0 !important;
        place-items: center;
        color: #707987 !important;
        border: 1px solid var(--ui-line);
        border-radius: 7px;
        background: var(--ui-surface);
        font-size: 0;
    }
    #app-header .sidebar-logout span { display: none !important; }
    #app-header .sidebar-logout svg { width: 16px; height: 16px; }

    #workspace-topbar {
        position: sticky;
        top: 64px;
        min-height: 64px;
        padding: 10px 13px;
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
    #workspace-view-title { font-size: 16px; }
    .workspace-date-chip { min-height: 28px; font-size: 8px; }

    #main-content { margin: 0 !important; padding: 12px 10px 86px !important; }
    #announcement-banner-stack { margin: 10px 10px 0 !important; }
    .dashboard-section-title { font-size: 20px !important; }

    .ro-quick-modal-dialog {
        width: min(100%, calc(100vw - 18px));
        max-height: calc(100dvh - 18px);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
    }
    .ro-quick-modal-header { min-height: 68px; padding: 13px 15px; grid-column: 1; }
    .ro-quick-modal-header h3 { font-size: 17px; }
    .ro-quick-modal-tabs { padding: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); }
    .ro-quick-modal-tabs > div { min-width: 590px; flex-direction: row; }
    .ro-quick-modal-tabs button { min-height: 36px; padding: 7px 10px; text-align: center; }
    .ro-quick-modal-content { padding: 17px 15px 20px; }

    #mobile-bottom-nav {
        display: block !important;
        padding: 6px 7px max(6px, env(safe-area-inset-bottom)) !important;
        border-color: var(--ui-line) !important;
        background: var(--ui-surface) !important;
        box-shadow: 0 -8px 22px rgba(28, 35, 46, .06) !important;
        backdrop-filter: none !important;
    }
    #mobile-bottom-nav .grid { gap: 2px !important; }
    #mobile-bottom-nav .mobile-nav-btn {
        min-height: 50px;
        padding: 5px 2px !important;
        gap: 2px !important;
        color: #777f8b !important;
        border-radius: 6px !important;
        font-size: 8px !important;
    }
    #mobile-bottom-nav .mobile-nav-btn[data-active="true"] { color: var(--ui-on-active) !important; background: var(--ui-nav-active) !important; }
    #mobile-bottom-nav .nav-icon { display: grid; height: 19px; place-items: center; }
    #mobile-bottom-nav .nav-svg { width: 17px; height: 17px; stroke-width: 1.8; }
}

@media (max-width: 430px) {
    #mobile-bottom-nav .grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    #mobile-tab-admin:not(.hidden) { grid-column: span 2; }
}

/* Modern notifications stay above the workspace instead of entering page flow. */
html[data-interface="workspace"] .toast-stack {
    position: fixed !important;
    top: auto !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    z-index: 100000;
    display: flex;
    width: min(23rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
    overscroll-behavior: contain;
}

html[data-interface="workspace"] .toast-item {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    overflow-wrap: anywhere;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    background: #27303c;
    box-shadow: 0 12px 30px rgba(16, 21, 29, .24);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    pointer-events: auto;
    transform-origin: right bottom;
    animation: modern-toast-in .18s ease-out;
    transition: opacity .2s ease, transform .2s ease;
}

html[data-interface="workspace"] .toast-item.success { background: #087a50; }
html[data-interface="workspace"] .toast-item.warning { background: #a75309; }
html[data-interface="workspace"] .toast-item.error { background: #b52f35; }
html[data-interface="workspace"] .toast-item button { color: inherit; }

@keyframes modern-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
    html[data-interface="workspace"] .toast-stack {
        right: max(.625rem, env(safe-area-inset-right)) !important;
        bottom: calc(5.75rem + env(safe-area-inset-bottom)) !important;
        left: max(.625rem, env(safe-area-inset-left)) !important;
        width: auto;
        max-height: calc(100dvh - 7.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}

@media print {
    html, body { height: auto !important; min-height: 0 !important; color: #000 !important; background: #fff !important; }
    #app-wrapper, #auth-view, #mobile-bottom-nav, #toast-stack, #shop-chat-launcher, #shop-chat-root, [id$="-modal"] { display: none !important; }
    .print-section { display: none !important; }
    .print-section.active-print { display: block !important; position: static !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
    @page { margin: .5in; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}