:root {
    --jm-primary: #26313f;
    --jm-primary-strong: #17212d;
    --jm-secondary: #667085;
    --jm-accent: #2563eb;
    --jm-accent-dark: #1d4ed8;
    --jm-accent-soft: #eff6ff;
    --jm-surface: #ffffff;
    --jm-surface-soft: #f7f8fa;
    --jm-page: #f1f3f6;
    --jm-border: #dfe3e8;
    --jm-border-strong: #cbd2da;
    --jm-text: #202833;
    --jm-muted: #667085;
    --jm-success: #16794f;
    --jm-danger: #c73545;
    --jm-warning: #9a6700;
    --jm-info: #2463a7;
    --jm-radius-sm: 8px;
    --jm-radius: 12px;
    --jm-radius-lg: 16px;
    --jm-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --jm-shadow: 0 8px 24px rgba(16, 24, 40, .07);
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #1d4ed8;
    --bs-link-hover-color: #1e40af;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--jm-page);
    color: var(--jm-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .95rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

body.modal-open { padding-right: 0 !important; }

a { text-underline-offset: 2px; }

code {
    color: #1e40af;
    background: #eff6ff;
    border-radius: 5px;
    padding: .1rem .3rem;
}

.app-layout { min-height: 100vh; }
.app-main { min-width: 0; min-height: 100vh; }

@media (min-width: 992px) {
    .app-layout { display: flex; }
    .app-main { flex: 1; }

    /* old 

     .app-sidebar {
        position: sticky;
        top: 0;
        display: flex;
        width: 258px;
        height: 100vh;
        padding: 1rem .8rem;
        background: var(--jm-primary-strong);
        color: #fff;
        border-right: 1px solid rgba(255, 255, 255, .06);
        overflow-y: auto;
        z-index: 1030;
    } */

    .app-sidebar {
        position: sticky;
        top: 0;
        display: flex;
        width: 258px;
        height: 100vh;
         /* padding: 0rem .8rem;  */
        background: var(--jm-primary-strong);
        color: #0f0 !important;
        border-right: 3px solid rgba(255, 255, 255, .06);
        overflow-y: auto;
        z-index: 1030;
    }
}

.sidebar-brand {
    padding: .2rem .45rem 1rem;
    margin-bottom: .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: contain;
}

.sidebar-eyebrow {
    margin-bottom: .05rem;
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sidebar-title {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    padding: .3rem 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 43px;
    padding: .66rem .75rem;
    color: rgba(255, 255, 255, .76);
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none;
    font-size: .91rem;
    font-weight: 550;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sidebar-link i {
    width: 19px;
    color: rgba(255, 255, 255, .55);
    text-align: center;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.sidebar-link:hover i { color: rgba(255, 255, 255, .85); }

.sidebar-link.active {
    color: #fff;
    background: rgba(37, 99, 235, .20);
    border-color: rgba(96, 165, 250, .30);
}

.sidebar-link.active i { color: #93c5fd; }


.sidebar-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-group-toggle {
    width: 100%;
    margin: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.sidebar-group-toggle .sidebar-group-chevron {
    width: auto;
    margin-left: auto;
    font-size: .72rem;
    transition: transform .18s ease;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron {
    transform: rotate(180deg);
}

.sidebar-subnav {
    display: flex;
    flex-direction: column;
    gap: .16rem;
    margin: .12rem 0 .38rem .68rem;
    padding: .08rem 0 .08rem .6rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-sublink {
    min-height: 37px;
    padding: .5rem .64rem;
    font-size: .85rem;
}

.sidebar-sublink i {
    width: 16px;
    font-size: .8rem;
}
.sidebar-footer { margin-top: 1rem; }

.topbar {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.5rem;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--jm-border);
    box-shadow: var(--jm-shadow-sm);
    z-index: 1020;
}

.topbar-title {
    color: var(--jm-primary);
    font-size: 1.03rem;
    font-weight: 750;
}

.topbar-subtitle { color: var(--jm-muted); font-size: .82rem; }
.topbar-user { color: var(--jm-muted); font-size: .9rem; font-weight: 600; }
.topbar-actions { flex-wrap: nowrap; }

.btn-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.topbar-logout { background: #fff; }

.app-content {
    width: 100%;
    max-width: 1680px;
    padding: 1.5rem;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 8px;
    margin-bottom: 1rem;
}

.card,
.form-panel,
.hero-card,
.stat-card,
.login-card,
.type-card {
    background: var(--jm-surface);
    border: 1px solid var(--jm-border) !important;
    border-radius: var(--jm-radius-lg);
    box-shadow: var(--jm-shadow-sm) !important;
}

.card:hover,
.form-panel:hover,
.stat-card:hover { border-color: var(--jm-border-strong) !important; }

.card-body { padding: 1.25rem; }
.form-panel { padding: 1.25rem; }
.hero-card { padding: 1.5rem; }
.stat-card { height: 100%; padding: 1.25rem; }

.hero-card {
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--jm-accent) !important;
}

.hero-logo { width: 100%; max-width: 126px; height: auto; }

.panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--jm-border);
}

.panel-title {
    margin: 0;
    color: var(--jm-primary);
    font-size: 1.03rem;
    font-weight: 750;
}

.eyebrow {
    color: var(--jm-accent-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.company-block {
    padding: .9rem 1rem;
    background: var(--jm-surface-soft);
    border: 1px solid var(--jm-border);
    border-radius: var(--jm-radius);
}

.panel-logo { width: auto; max-width: 110px; max-height: 74px; object-fit: contain; }

.stat-icon,
.manual-hero-icon,
.manual-admin-icon,
.unit-list-hero-icon,
.unit-list-admin-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 12px !important;
    color: var(--jm-accent-dark) !important;
    background: var(--jm-accent-soft) !important;
    border: 1px solid #bfdbfe;
    box-shadow: none !important;
    font-size: 1.25rem !important;
}

.manual-hero-icon,
.unit-list-hero-icon { width: 72px; height: 72px; font-size: 1.6rem !important; }

.wo-badge,
.manual-file-pill,
.unit-list-file-pill,
.save-badge,
.editor-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .38rem .65rem;
    color: #475467;
    background: #f8f9fb;
    border: 1px solid var(--jm-border);
    border-radius: 999px;
    font-size: .79rem;
    font-weight: 650;
    line-height: 1.25;
}

.manual-file-pill,
.unit-list-file-pill {
    color: var(--jm-primary);
    white-space: normal;
    word-break: break-word;
}

.unit-list-desc { max-width: 520px; white-space: pre-wrap; }

.save-badge.is-saving { color: #7a4f00; background: #fff9e8; border-color: #ecd8a7; }
.save-badge.is-saved { color: #11643f; background: #ebf8f1; border-color: #bfe3cf; }
.save-badge.is-error { color: #a32231; background: #fff0f2; border-color: #efc1c7; }

.form-label {
    margin-bottom: .38rem;
    color: #344054;
    font-size: .83rem;
    font-weight: 700;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 42px;
    border-color: var(--jm-border-strong);
    border-radius: var(--jm-radius-sm);
    font-size: .93rem;
}

textarea.form-control { min-height: 92px; }
.form-control-tall { min-height: 120px; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(37, 99, 235, .72);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
}

.form-control::placeholder { color: #98a2b3; }
.input-group-text { color: #667085; background: #f8f9fb; }
.form-text { color: var(--jm-muted); }

.calc-field {
    background: #f8f9fb !important;
    color: #344054;
    font-weight: 700;
}

.form-check-input:checked {
    background-color: var(--jm-accent);
    border-color: var(--jm-accent);
}

.btn {
    min-height: 39px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: none !important;
}

.btn-sm { min-height: 32px; padding: .3rem .55rem; font-size: .82rem; }
.btn-lg { min-height: 47px; border-radius: 10px; }

.btn-primary {
    --bs-btn-bg: var(--jm-accent);
    --bs-btn-border-color: var(--jm-accent);
    --bs-btn-hover-bg: var(--jm-accent-dark);
    --bs-btn-hover-border-color: var(--jm-accent-dark);
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: #93c5fd;
    --bs-btn-disabled-border-color: #93c5fd;
}

.btn-outline-primary {
    --bs-btn-color: var(--jm-accent-dark);
    --bs-btn-border-color: #60a5fa;
    --bs-btn-hover-bg: var(--jm-accent);
    --bs-btn-hover-border-color: var(--jm-accent);
    --bs-btn-active-bg: var(--jm-accent-dark);
    --bs-btn-active-border-color: var(--jm-accent-dark);
}

.btn-outline-secondary {
    --bs-btn-color: #475467;
    --bs-btn-border-color: #b8c0ca;
    --bs-btn-hover-bg: #475467;
    --bs-btn-hover-border-color: #475467;
}

.btn-group > form { display: inline-flex; }
.btn-group > form .btn { border-radius: 0; }
.btn-group > form:last-child .btn { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.alert {
    border-width: 1px;
    border-radius: var(--jm-radius);
    font-size: .91rem;
}

.badge { font-weight: 700; letter-spacing: .01em; }
.text-bg-success { background-color: #16794f !important; }
.text-bg-secondary { background-color: #667085 !important; }
.text-bg-info { background-color: #2463a7 !important; color: #fff !important; }
.text-bg-dark { background-color: #26313f !important; }
.text-bg-primary { background-color: var(--jm-accent) !important; }
.text-primary { color: var(--jm-accent-dark) !important; }

.table-responsive {
    border: 1px solid var(--jm-border);
    border-radius: var(--jm-radius);
    overflow: auto;
}

.app-table { margin-bottom: 0; }

.app-table > :not(caption) > * > * {
    padding: .76rem .8rem;
    border-bottom-color: #e8ebef;
    vertical-align: middle;
}

.app-table thead th {
    color: #475467;
    background: #f7f8fa;
    border-bottom: 1px solid var(--jm-border-strong);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-table tbody tr:last-child > * { border-bottom: 0; }
.app-table tbody tr:hover > * { background: #f8fbff; }

.data-entry-table .form-control,
.data-entry-table .form-select { min-width: 105px; }

.section-title {
    color: var(--jm-primary);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.chart-panel { min-height: 100%; }
.chart-wrap { position: relative; min-height: 280px; }
.chart-wrap-lg { min-height: 360px; }
.chart-empty { color: var(--jm-muted); text-align: center; padding: 4rem 1rem; }

.type-card { padding: 1rem; }
.type-card:hover { border-color: #60a5fa !important; }

.permission-matrix-wrap { overflow: auto; border: 1px solid var(--jm-border); border-radius: var(--jm-radius); }
.permission-matrix-table { min-width: 760px; margin: 0; }
.permission-type-col { min-width: 210px; }
.permission-page-col { min-width: 118px; text-align: center; }
.permission-check { display: inline-flex; align-items: center; justify-content: center; }

.modal-content {
    border: 1px solid var(--jm-border);
    border-radius: var(--jm-radius-lg);
    box-shadow: 0 18px 52px rgba(16, 24, 40, .18);
}

.modal-header,
.modal-footer { border-color: var(--jm-border); }
.modal-title { color: var(--jm-primary); font-weight: 750; }

.login-body {
    display: flex;
    align-items: center;
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .07), transparent 42%),
        var(--jm-page);
}

.login-card {
    width: 100%;
    max-width: 430px;
    padding: 2rem;
    border-top: 4px solid var(--jm-accent) !important;
    box-shadow: var(--jm-shadow) !important;
}

.login-heading { display: flex; align-items: center; gap: 1rem; color: var(--jm-primary); }
.login-heading h1 { font-size: 1.45rem; font-weight: 800; }
.login-logo { width: 92px; height: 92px; object-fit: contain; }

.app-mobile-sidebar .offcanvas-header,
.app-mobile-sidebar .offcanvas-body { background: #fff; }

.app-mobile-sidebar .sidebar-link { color: #344054; }
.app-mobile-sidebar .sidebar-link i { color: #667085; }
.app-mobile-sidebar .sidebar-link:hover,
.app-mobile-sidebar .sidebar-link.active {
    color: var(--jm-accent-dark);
    background: var(--jm-accent-soft);
    border-color: #bfdbfe;
}

.app-mobile-sidebar .sidebar-link.active i { color: var(--jm-accent-dark); }

.app-mobile-sidebar .sidebar-subnav {
    border-left-color: var(--jm-border);
}

.editor-status-pill.is-warning { color: #7a4b00; background: #fff8e6; border-color: #ead19c; }
.sheet-cell.sheet-cell-changed { background: #fff9e8 !important; box-shadow: inset 0 0 0 2px rgba(176, 116, 0, .2); }
.sheet-cell.sheet-search-match { box-shadow: inset 0 0 0 9999px rgba(36, 99, 167, .12); }

@media (max-width: 991.98px) {
    .app-main { width: 100%; }
    .topbar { padding: .68rem 1rem; }
    .app-content { padding: 1rem; }
    .page-header { align-items: flex-start; flex-wrap: wrap; }
    .hero-card, .form-panel, .stat-card, .card-body { padding: 1rem; }
}

@media (max-width: 575.98px) {
    body { font-size: .92rem; }
    .topbar-user { display: none !important; }
    .topbar-title { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-content { padding: .75rem; }
    .login-card { padding: 1.35rem; }
    .panel-top { align-items: flex-start; }
    .table-responsive { border-radius: 9px; }
    .app-table > :not(caption) > * > * { padding: .65rem; }
}

@media print {
    .app-sidebar,
    .topbar,
    .page-header,
    .btn,
    .modal { display: none !important; }

    body, .app-main, .app-content { background: #fff !important; padding: 0 !important; margin: 0 !important; }
    .card, .form-panel, .hero-card { box-shadow: none !important; border-color: #bbb !important; }
}

.modal-host-row,
.modal-host-row > td {
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.manual-current-file,
.unit-list-current-file {
    padding: .75rem .85rem;
    color: #475467;
    background: #f8f9fb;
    border: 1px solid var(--jm-border);
    border-radius: var(--jm-radius-sm);
    word-break: break-word;
}

.sheet-scroll { border-radius: var(--jm-radius) !important; }
.sheet-tabs .nav-link { border-radius: 8px 8px 0 0 !important; }
.chart-empty { border-radius: var(--jm-radius) !important; background: #fafbfc !important; }


/* Blue-theme override for the browser spreadsheet editor's page-level focus style. */
.sheet-cell[contenteditable="true"]:focus {
    outline: 2px solid rgba(37, 99, 235, .38) !important;
    outline-offset: -2px;
    background: #f8fbff !important;
}

/* ==========================================================================
   JAYBE DARK MODE
   CSS-only replacement theme. The Jaybe logo images are intentionally
   unchanged and are not filtered or recoloured.
   ========================================================================== */

:root {
    color-scheme: dark;

    --jm-primary: #e5edf7;
    --jm-primary-strong: #08111f;
    --jm-secondary: #9aa8bc;
    --jm-accent: #3b82f6;
    --jm-accent-dark: #2563eb;
    --jm-accent-soft: #172554;
    --jm-surface: #111827;
    --jm-surface-soft: #172033;
    --jm-page: #0b1120;
    --jm-border: #29364a;
    --jm-border-strong: #3c4b63;
    --jm-text: #e5edf7;
    --jm-muted: #9aa8bc;
    --jm-success: #34d399;
    --jm-danger: #f87171;
    --jm-warning: #fbbf24;
    --jm-info: #60a5fa;
    --jm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .34);
    --jm-shadow: 0 12px 34px rgba(0, 0, 0, .34);

    --bs-body-color: #e5edf7;
    --bs-body-color-rgb: 229, 237, 247;
    --bs-body-bg: #0b1120;
    --bs-body-bg-rgb: 11, 17, 32;
    --bs-secondary-color: #9aa8bc;
    --bs-secondary-color-rgb: 154, 168, 188;
    --bs-tertiary-color: #7f8da3;
    --bs-tertiary-bg: #172033;
    --bs-secondary-bg: #111827;
    --bs-border-color: #29364a;
    --bs-border-color-translucent: rgba(148, 163, 184, .18);
    --bs-emphasis-color: #f8fafc;
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-link-color: #60a5fa;
    --bs-link-hover-color: #93c5fd;
}

html,
body {
    background: var(--jm-page);
}

body {
    color: var(--jm-text);
    background:
        radial-gradient(circle at 86% 0%, rgba(37, 99, 235, .08), transparent 28rem),
        var(--jm-page);
}

body,
input,
select,
textarea,
button {
    color-scheme: dark;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    color: #f8fafc;
}

a {
    color: #60a5fa;
}

a:hover {
    color: #93c5fd;
}

.text-secondary,
.text-muted,
.form-text,
.topbar-subtitle,
.topbar-user {
    color: var(--jm-muted) !important;
}

code {
    color: #bfdbfe;
    background: #172554;
    border: 1px solid rgba(96, 165, 250, .22);
}

/* Shell */
.app-sidebar {
    background: #08111f !important;
    border-right-color: rgba(148, 163, 184, .13) !important;
}

.sidebar-brand {
    border-bottom-color: rgba(148, 163, 184, .18);
}

.sidebar-eyebrow {
    color: #94a3b8;
}

.sidebar-link {
    color: #c3cedd;
}

.sidebar-link i {
    color: #8fa1b8;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(148, 163, 184, .10);
    border-color: rgba(148, 163, 184, .08);
}

.sidebar-link.active {
    color: #fff;
    background: rgba(37, 99, 235, .24);
    border-color: rgba(96, 165, 250, .42);
}

.sidebar-link.active i {
    color: #93c5fd;
}

.topbar {
    background: rgba(15, 23, 42, .96);
    border-bottom-color: var(--jm-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
    backdrop-filter: blur(10px);
}

.topbar-title {
    color: #f8fafc;
}

.topbar-logout {
    color: #cbd5e1;
    background: #111827;
    border-color: #3c4b63;
}

.topbar-logout:hover {
    color: #fff;
    background: #1e293b;
    border-color: #52627b;
}

/* Surfaces */
.card,
.form-panel,
.hero-card,
.stat-card,
.login-card,
.type-card {
    color: var(--jm-text);
    background: var(--jm-surface);
    border-color: var(--jm-border) !important;
    box-shadow: var(--jm-shadow-sm) !important;
}

.card:hover,
.form-panel:hover,
.stat-card:hover,
.type-card:hover {
    border-color: var(--jm-border-strong) !important;
}

.hero-card {
    background:
        linear-gradient(120deg, rgba(37, 99, 235, .08), transparent 46%),
        var(--jm-surface);
}

.panel-title,
.section-title,
.modal-title,
.login-heading,
.topbar-title {
    color: #f8fafc;
}

.eyebrow,
.text-primary {
    color: #93c5fd !important;
}

.company-block,
.manual-current-file,
.unit-list-current-file {
    color: #cbd5e1;
    background: var(--jm-surface-soft);
    border-color: var(--jm-border);
}

/* Icons and pills */
.stat-icon,
.manual-hero-icon,
.manual-admin-icon,
.unit-list-hero-icon,
.unit-list-admin-icon {
    color: #93c5fd !important;
    background: #172554 !important;
    border-color: rgba(96, 165, 250, .32) !important;
}

.wo-badge,
.manual-file-pill,
.unit-list-file-pill,
.save-badge,
.editor-status-pill {
    color: #cbd5e1;
    background: #172033;
    border-color: #35445a;
}

.manual-file-pill,
.unit-list-file-pill {
    color: #e5edf7;
}

.save-badge.is-saving {
    color: #fde68a;
    background: #3a2a08;
    border-color: #6f5312;
}

.save-badge.is-saved,
.editor-status-pill.is-success {
    color: #a7f3d0 !important;
    background: #062c23 !important;
    border-color: #166548 !important;
}

.save-badge.is-error,
.editor-status-pill.is-error {
    color: #fecaca !important;
    background: #3a1118 !important;
    border-color: #7f1d2d !important;
}

.editor-status-pill.is-warning {
    color: #fde68a;
    background: #352609;
    border-color: #725315;
}

/* Forms */
.form-label {
    color: #cbd5e1;
}

.form-control,
.form-select,
.input-group-text {
    color: #e5edf7;
    background-color: #0d1526;
    border-color: var(--jm-border-strong);
}

.form-control:hover,
.form-select:hover {
    border-color: #52627b;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    color: #f8fafc;
    background-color: #0d1526;
    border-color: #60a5fa;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .22);
}

.form-control::placeholder {
    color: #738198;
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: #91a0b5;
    background: #161f30;
    border-color: #2f3c50;
}

.input-group-text,
.calc-field {
    color: #cbd5e1 !important;
    background: #172033 !important;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control::file-selector-button {
    color: #e2e8f0;
    background: #1e293b;
    border-color: #3c4b63;
}

.form-control:hover::file-selector-button {
    color: #fff;
    background: #273449;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(.82);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e5edf7;
    -webkit-box-shadow: 0 0 0 1000px #0d1526 inset;
    caret-color: #e5edf7;
}

.form-check-input {
    background-color: #0d1526;
    border-color: #52627b;
}

.form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Buttons */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-color: #dbeafe;
    --bs-btn-disabled-bg: #315da8;
    --bs-btn-disabled-border-color: #315da8;
}

.btn-outline-primary {
    --bs-btn-color: #93c5fd;
    --bs-btn-border-color: #3b82f6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;
}

.btn-outline-secondary {
    --bs-btn-color: #cbd5e1;
    --bs-btn-border-color: #52627b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-border-color: #64748b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #263449;
    --bs-btn-active-border-color: #64748b;
}

.btn-outline-danger {
    --bs-btn-color: #fca5a5;
    --bs-btn-border-color: #ef4444;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
}

.btn-outline-success {
    --bs-btn-color: #6ee7b7;
    --bs-btn-border-color: #10b981;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #047857;
    --bs-btn-hover-border-color: #047857;
}

/* Alerts and badges */
.alert-success {
    color: #a7f3d0;
    background: #062c23;
    border-color: #166548;
}

.alert-danger {
    color: #fecaca;
    background: #3a1118;
    border-color: #7f1d2d;
}

.alert-warning {
    color: #fde68a;
    background: #352609;
    border-color: #725315;
}

.alert-info {
    color: #bfdbfe;
    background: #102544;
    border-color: #1e4f85;
}

.text-bg-light,
.bg-light {
    color: #dce6f3 !important;
    background-color: #1b2638 !important;
}

.text-bg-success {
    background-color: #047857 !important;
}

.text-bg-secondary {
    background-color: #475569 !important;
}

.text-bg-info {
    background-color: #1d4ed8 !important;
}

.text-bg-dark {
    background-color: #020617 !important;
}

.badge.border {
    border-color: #3c4b63 !important;
}

/* Tables */
.table,
.app-table {
    --bs-table-color: #dce6f3;
    --bs-table-bg: transparent;
    --bs-table-border-color: #29364a;
    --bs-table-striped-color: #dce6f3;
    --bs-table-striped-bg: rgba(148, 163, 184, .035);
    --bs-table-active-color: #fff;
    --bs-table-active-bg: rgba(59, 130, 246, .13);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(59, 130, 246, .08);
    color: #dce6f3;
}

.table-responsive,
.permission-matrix-wrap {
    background: #0f172a;
    border-color: var(--jm-border);
}

.app-table > :not(caption) > * > * {
    color: #dce6f3;
    background-color: transparent;
    border-bottom-color: #263347;
}

.app-table thead th {
    color: #cbd5e1;
    background: #172033;
    border-bottom-color: #3c4b63;
}

.app-table tbody tr:hover > * {
    color: #fff;
    background: rgba(59, 130, 246, .08);
}

.type-card {
    background: #111827;
}

/* Navigation, dropdowns and overlays */
.modal-content,
.offcanvas,
.dropdown-menu,
.list-group-item,
.popover,
.toast {
    color: #e5edf7;
    background: #111827;
    border-color: #35445a;
}

.modal-header,
.modal-footer,
.offcanvas-header {
    border-color: #29364a;
}

.modal-content {
    box-shadow: 0 22px 70px rgba(0, 0, 0, .58);
}

.modal-backdrop.show {
    opacity: .72;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(190%);
}

.dropdown-item {
    color: #dce6f3;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background: #1e293b;
}

.dropdown-divider {
    border-color: #35445a;
}

.app-mobile-sidebar .offcanvas-header,
.app-mobile-sidebar .offcanvas-body {
    background: #0f172a;
}

.app-mobile-sidebar .sidebar-link {
    color: #cbd5e1;
}

.app-mobile-sidebar .sidebar-link i {
    color: #8fa1b8;
}

.app-mobile-sidebar .sidebar-link:hover,
.app-mobile-sidebar .sidebar-link.active {
    color: #fff;
    background: rgba(37, 99, 235, .24);
    border-color: rgba(96, 165, 250, .42);
}

.app-mobile-sidebar .sidebar-subnav {
    border-left-color: #35445a;
}

.nav-tabs {
    --bs-nav-tabs-border-color: #35445a;
    --bs-nav-tabs-link-hover-border-color: #35445a #35445a transparent;
    --bs-nav-tabs-link-active-color: #f8fafc;
    --bs-nav-tabs-link-active-bg: #172033;
    --bs-nav-tabs-link-active-border-color: #35445a #35445a #172033;
}

.nav-tabs .nav-link {
    color: #93c5fd;
}

.nav-tabs .nav-link:hover {
    color: #bfdbfe;
}

/* Dashboard charts.
   Chart.js text and grid colours are painted onto canvas by JavaScript.
   This CSS filter keeps the existing CSS-only dark theme readable without
   changing dashboard.php. */
.chart-wrap canvas {
    filter: invert(.88) hue-rotate(180deg) saturate(1.08) brightness(1.12);
}

.chart-empty {
    color: #9aa8bc;
    background: #0f172a !important;
    border-color: #35445a !important;
}

/* Spreadsheet editor overrides. These use !important because the editor
   includes page-level styles after the main stylesheet. */
.sheet-scroll {
    background: #0b1220 !important;
    border-color: #35445a !important;
}

.spreadsheet-table {
    color: #e5edf7 !important;
    background: #0b1220 !important;
}

.spreadsheet-table > :not(caption) > * > * {
    color: #e5edf7 !important;
    border-color: #29364a !important;
}

.spreadsheet-table thead th,
.row-head {
    color: #dce6f3 !important;
    background: #1b2638 !important;
}

.corner-cell {
    color: #dce6f3 !important;
    background: #263449 !important;
}

.sheet-cell {
    color: #e5edf7 !important;
    background: #0f172a !important;
}

.sheet-cell[contenteditable="true"]:focus {
    outline: 2px solid rgba(96, 165, 250, .75) !important;
    background: #13213a !important;
}

.sheet-cell.formula-cell {
    color: #9aa8bc !important;
    background: #172033 !important;
}

.sheet-cell.merged-cell {
    background: #121c2d !important;
}

.sheet-cell.sheet-cell-changed {
    background: #352609 !important;
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, .36) !important;
}

.sheet-cell.sheet-search-match {
    box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, .22) !important;
}

.sheet-empty {
    color: #738198 !important;
}

/* Login */
.login-body {
    background:
        radial-gradient(circle at 20% 15%, rgba(37, 99, 235, .16), transparent 28rem),
        radial-gradient(circle at 90% 90%, rgba(14, 116, 144, .08), transparent 24rem),
        var(--jm-page);
}

.login-card {
    background: #111827;
}

/* Scrollbars */
* {
    scrollbar-color: #475569 #111827;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #111827;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border: 3px solid #111827;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Keep printed work orders and time records light and printer friendly. */
@media print {
    :root {
        color-scheme: light;
    }

    body,
    .app-main,
    .app-content,
    .card,
    .form-panel,
    .hero-card,
    .stat-card,
    .type-card,
    .table,
    .app-table,
    .table-responsive {
        color: #111 !important;
        background: #fff !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    b,
    .panel-title,
    .section-title {
        color: #111 !important;
    }

    .app-table thead th {
        color: #222 !important;
        background: #eee !important;
    }

    .app-table > :not(caption) > * > * {
        color: #111 !important;
        border-color: #bbb !important;
    }

    .chart-wrap canvas {
        filter: none !important;
    }
}

/* ==========================================================================
   DARK MODE TABLE ZEBRA STRIPES
   ========================================================================== */

/* Standard application tables */
.app-table tbody > tr:not(.modal-host-row):nth-child(odd) > * {
    background-color: #0f172a !important;
}

.app-table tbody > tr:not(.modal-host-row):nth-child(even) > * {
    background-color: #141f31 !important;
}

/*
   Management tables sometimes insert a hidden modal-host row after every
   visible data row. These selectors preserve alternating visible rows.
*/
.app-table tbody:has(> .modal-host-row) > tr[data-filter]:nth-child(4n + 1) > * {
    background-color: #0f172a !important;
}

.app-table tbody:has(> .modal-host-row) > tr[data-filter]:nth-child(4n + 3) > * {
    background-color: #141f31 !important;
}

/* Hidden rows that contain Bootstrap modals should not appear striped. */
.app-table tbody > tr.modal-host-row > * {
    background: transparent !important;
}

/* Stronger hover state, while preserving readable text and action buttons. */
.app-table tbody > tr:not(.modal-host-row):hover > * {
    color: #ffffff !important;
    background-color: #1d2b42 !important;
}

/* Empty-state rows should remain visually neutral. */
.app-table tbody > tr:only-child > td[colspan],
.app-table tbody > tr[id$="NoResultsRow"] > td {
    background-color: #111827 !important;
}

/* Two-factor authentication */
.two-factor-card {
    max-width: 980px;
    margin: 0 auto;
}

.two-factor-qr-panel {
    border: 1px solid var(--jm-border);
    border-radius: var(--jm-radius-lg);
    background: var(--jm-surface-soft);
    padding: 1.5rem;
}

.two-factor-qr {
    width: 244px;
    min-height: 244px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.two-factor-qr canvas,
.two-factor-qr img {
    display: block;
    max-width: 220px;
    height: auto !important;
}

.two-factor-steps li {
    margin-bottom: .65rem;
}

.two-factor-code-input {
    letter-spacing: .5rem;
    font-weight: 700;
    font-size: 1.55rem;
}

.two-factor-admin-box {
    background: var(--jm-surface-soft);
    border-color: var(--jm-border) !important;
}

@media (max-width: 575.98px) {
    .two-factor-qr {
        width: 220px;
        min-height: 220px;
        padding: 10px;
    }
    .two-factor-qr canvas,
    .two-factor-qr img {
        max-width: 200px;
    }
}

/* ==========================================================================
   DARK MODAL HARDENING
   Keep every Bootstrap/Jaybe modal surface dark. Page-level modal styles are
   intentionally overridden with !important so alert-state headers cannot
   fall back to Bootstrap/light-theme white or pastel backgrounds.
   ========================================================================== */
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    color: #e5edf7 !important;
    background-color: #111827 !important;
}

.modal-header,
.modal-footer {
    border-color: #29364a !important;
}

.modal-title {
    color: #f8fafc !important;
}

.editor-modal-header.is-success {
    color: #a7f3d0 !important;
    background-color: #062c23 !important;
    border-bottom-color: #166548 !important;
}

.editor-modal-header.is-error {
    color: #fecaca !important;
    background-color: #3a1118 !important;
    border-bottom-color: #7f1d2d !important;
}

.editor-modal-header.is-warning {
    color: #fde68a !important;
    background-color: #352609 !important;
    border-bottom-color: #725315 !important;
}

.editor-modal-header.is-info {
    color: #bfdbfe !important;
    background-color: #102447 !important;
    border-bottom-color: #1d4f91 !important;
}

/* Shared list-table behavior: sortable headings, compact filters, and phone-friendly horizontal scrolling. */
.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.table-sort-button:hover { text-decoration: underline; }
.table-sort-button:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 4px; border-radius: 2px; }
.table-sort-indicator { font-size: .75em; }
.js-status-filter { min-width: 140px; }
@media (max-width: 767.98px) {
    .table-responsive { position: relative; }
    .js-responsive-list { min-width: 760px; }
    .js-responsive-list thead th:first-child,
    .js-responsive-list tbody tr[data-filter]:not(.modal-host-row) td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--bs-body-bg);
        box-shadow: 4px 0 8px rgba(0, 0, 0, .08);
    }
    .js-responsive-list thead th:last-child,
    .js-responsive-list tbody tr[data-filter]:not(.modal-host-row) td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        min-width: 148px;
        white-space: nowrap;
        background-color: var(--bs-body-bg);
        box-shadow: -4px 0 8px rgba(0, 0, 0, .08);
    }
    .js-responsive-list thead th:first-child,
    .js-responsive-list thead th:last-child { z-index: 3; }
    .js-responsive-list .btn-group { white-space: nowrap; }
}