:root {
    --black: #090909;
    --panel: #141414;
    --panel2: #1b1b1b;
    --panel3: #242424;

    --silver: #c6c8cb;
    --white: #f7f7f7;
    --muted: #9da1a6;
    --line: #343434;

    --orange: #f57c00;
    --orange2: #ff8c1a;
    --orangeSoft: #2a190d;

    --green: #2f9e61;
    --red: #d9534f;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #090909 0%,
            #101010 60%,
            #0b0b0b 100%
        );

    color: var(--white);
}


/* ============================================================
   HEADER
   ============================================================ */

header {
    height: 72px;

    background: #050505;

    border-bottom:
        1px solid #2c2c2c;

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 28px;

    position: sticky;

    top: 0;

    z-index: 10;
}


.brand {
    display: flex;

    align-items: center;

    gap: 14px;

    font-weight: 800;

    letter-spacing: .4px;
}


.brandmark {
    width: 34px;
    height: 34px;

    border:
        3px solid var(--orange);

    border-radius: 6px;

    position: relative;
}


.brandmark::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 5px;

    background:
        var(--silver);

    left: 5px;
    top: 12px;
}


.brand strong {
    font-size: 21px;

    font-style: italic;
}


.brand strong span {
    color:
        var(--orange);
}


.brand small {
    display: block;

    color:
        var(--silver);

    font-size: 10px;

    letter-spacing: 2px;

    margin-top: 2px;

    font-weight: 600;
}


.user {
    font-size: 13px;

    color:
        var(--silver);
}


/* ============================================================
   APP LAYOUT
   ============================================================ */

.shell {
    display: grid;

    grid-template-columns:
        238px 1fr;

    min-height:
        calc(100vh - 72px);
}


aside {
    background:
        #0b0b0b;

    border-right:
        1px solid #2d2d2d;

    padding:
        22px 14px;
}


aside hr {
    border: 0;

    border-top:
        1px solid var(--line);

    margin:
        16px 0;
}


main {
    padding: 30px;

    max-width: 1500px;

    width: 100%;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.navbtn {
    display: block;

    width: 100%;

    border: 0;

    background:
        transparent;

    color:
        #d3d3d3;

    text-align: left;

    padding:
        12px 13px;

    border-radius:
        8px;

    font-size:
        14px;

    cursor:
        pointer;

    margin-bottom:
        5px;

    text-decoration:
        none;
}


.navbtn.active,
.navbtn:hover {
    background:
        var(--orange);

    color:
        white;
}


/* ============================================================
   HEADINGS
   ============================================================ */

.toprow {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 20px;

    margin-bottom:
        22px;
}


h1 {
    font-size:
        28px;

    margin:
        0 0 5px;

    color:
        white;
}


.sub {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    border:
        0;

    border-radius:
        7px;

    padding:
        10px 14px;

    font-weight:
        700;

    cursor:
        pointer;

    text-decoration:
        none;

    display:
        inline-block;
}


.primary {
    background:
        var(--orange);

    color:
        white;
}


.primary:hover {
    background:
        var(--orange2);
}


.secondary {
    background:
        #202020;

    border:
        1px solid #3a3a3a;

    color:
        #eeeeee;
}


.secondary:hover {
    border-color:
        var(--orange);
}


.danger {
    background:
        var(--red);

    color:
        white;
}


.danger:hover {
    background:
        #c74440;
}


.action-group {
    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;
}


/* ============================================================
   PITCH HERO
   ============================================================ */

.pitch-hero {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        18px;

    padding:
        18px 20px;

    border:
        1px solid #333333;

    border-left:
        5px solid var(--orange);

    background:
        linear-gradient(
            90deg,
            #0d0d0d,
            #17120f
        );
}


.pitch-title {
    font-size:
        34px;

    font-weight:
        900;

    font-style:
        italic;

    letter-spacing:
        -1px;
}


.pitch-title span {
    color:
        var(--orange);
}


.pitch-tag {
    color:
        var(--silver);

    font-size:
        12px;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;
}


/* ============================================================
   CARDS
   ============================================================ */

.card {
    background:
        linear-gradient(
            180deg,
            #171717,
            #121212
        );

    border:
        1px solid #303030;

    border-radius:
        11px;

    padding:
        18px;

    box-shadow:
        0 8px 20px rgba(
            0,
            0,
            0,
            .22
        );
}


/* ============================================================
   KPI CARDS
   ============================================================ */

.kpis {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        14px;

    margin-bottom:
        20px;
}


.kpi {
    border-top:
        2px solid var(--orange);
}


.kpi .label {
    font-size:
        12px;

    color:
        var(--muted);

    text-transform:
        uppercase;

    letter-spacing:
        .5px;
}


.kpi .value {
    font-size:
        28px;

    font-weight:
        780;

    margin-top:
        6px;

    color:
        white;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section {
    margin-bottom:
        18px;
}


.sectiontitle {
    font-size:
        13px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;

    color:
        var(--silver);

    margin-bottom:
        10px;
}


.sectiontitle::before {
    content:
        "";

    display:
        inline-block;

    width:
        4px;

    height:
        13px;

    background:
        var(--orange);

    margin-right:
        8px;

    vertical-align:
        -2px;

    border-radius:
        2px;
}


/* ============================================================
   GRID / FIELDS
   ============================================================ */

.grid3 {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        14px;
}


.field label {
    display:
        block;

    font-size:
        12px;

    font-weight:
        700;

    margin:
        0 0 6px;

    color:
        #d6d6d6;
}


.field input,
.field select,
.field textarea {
    width:
        100%;

    border:
        1px solid #444444;

    border-radius:
        7px;

    padding:
        9px 10px;

    background:
        #0f0f0f;

    color:
        #f1f1f1;

    font:
        inherit;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    outline:
        2px solid rgba(
            245,
            124,
            0,
            .35
        );

    border-color:
        var(--orange);
}


.field input:disabled {
    color:
        #888888;

    background:
        #161616;
}


/* ============================================================
   WORKFLOW
   ============================================================ */

.workflow {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-wrap:
        wrap;

    margin-bottom:
        18px;
}


.step {
    background:
        #161616;

    border:
        1px solid #343434;

    color:
        #c6c6c6;

    padding:
        9px 12px;

    border-radius:
        8px;

    font-size:
        12px;

    font-weight:
        700;
}


.step.current {
    border-color:
        var(--orange);

    color:
        white;

    box-shadow:
        0 0 0 2px rgba(
            245,
            124,
            0,
            .12
        );
}


.arrow {
    color:
        #666666;
}


/* ============================================================
   TABLES
   ============================================================ */

table {
    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        13px;
}


th {
    color:
        #aeb1b5;

    font-size:
        11px;

    text-transform:
        uppercase;

    text-align:
        left;

    border-bottom:
        1px solid var(--line);

    padding:
        11px 9px;
}


td {
    padding:
        12px 9px;

    border-bottom:
        1px solid #2a2a2a;

    color:
        #e7e7e7;
}


tbody tr:hover {
    background:
        #181818;
}


/* ============================================================
   CLICKABLE ROI ROWS
   ============================================================ */

.clickable-row {
    cursor:
        pointer;

    transition:
        background-color .15s ease;
}


.clickable-row:hover {
    background:
        #202020;
}


.clickable-row:focus {
    outline:
        2px solid var(--orange);

    outline-offset:
        -2px;
}


/* ============================================================
   STATUS
   ============================================================ */

.status {
    padding:
        4px 8px;

    border-radius:
        999px;

    font-weight:
        700;

    font-size:
        11px;

    display:
        inline-block;
}


.draft {
    background:
        #2a2a2a;

    color:
        #d4d4d4;
}


.submitted {
    background:
        #3a2b13;

    color:
        #ffbf5a;
}


.approved {
    background:
        #153425;

    color:
        #71d69b;
}


.changes {
    background:
        #3c1c1c;

    color:
        #ff8c8c;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
    padding:
        35px;

    text-align:
        center;

    color:
        var(--muted);

    border:
        1px dashed #3a3a3a;

    border-radius:
        8px;

    margin-top:
        12px;
}


/* ============================================================
   PRODUCT TOOLBAR / SEARCH
   ============================================================ */

.product-toolbar {
    display: flex;

    gap: 12px;

    align-items: end;

    margin-bottom: 12px;
}


.product-search-field {
    flex: 1;
}


.sku-search-results {
    display: none;

    border:
        1px solid #3a3a3a;

    border-radius: 8px;

    background: #111;

    margin-bottom: 14px;

    max-height: 280px;

    overflow-y: auto;
}


.sku-result {
    padding: 10px 12px;

    border-bottom:
        1px solid #292929;

    cursor: pointer;
}


.sku-result:hover {
    background: #1e1e1e;
}


.sku-result:last-child {
    border-bottom: 0;
}


.sku-result-code {
    font-weight: 800;

    color: white;
}


.sku-result-description {
    color:
        var(--muted);

    font-size: 12px;

    margin-top: 2px;
}


.table-wrap {
    overflow-x: auto;
}


.lineitems input,
.lineitems select {
    width: 100%;

    border:
        1px solid #444;

    border-radius: 6px;

    padding: 7px;

    background: #0e0e0e;

    color: white;
}


.remove-line {
    background: transparent;

    color: #ff8c8c;

    border: 0;

    cursor: pointer;

    font-weight: 700;
}


/* ============================================================
   PERCENTAGE INPUTS
   ============================================================ */

.percent-input {
    position: relative;

    display: flex;

    align-items: center;
}


.percent-input input {
    width: 100%;

    padding-right: 38px;
}


.percent-input span {
    position: absolute;

    right: 14px;

    color:
        var(--muted);

    font-weight: 700;

    pointer-events: none;
}


/* ============================================================
   CURRENCY INPUTS
   ============================================================ */

.currency-input {
    position: relative;

    display: flex;

    align-items: center;
}


.currency-input span {
    position: absolute;

    left: 12px;

    color:
        var(--muted);

    font-weight: 700;

    pointer-events: none;
}


.currency-input input {
    width: 100%;

    padding-left: 28px;
}


/* ============================================================
   COMMISSION SUMMARY SIDEBAR
   ============================================================ */

.sidebar-commission-wrap {
    position: fixed;

    left: 14px;

    bottom: 24px;

    width: 210px;

    z-index: 9;
}


.sidebar-commission-card {
    width: 100%;

    border:
        1px solid #333333;

    border-radius: 10px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #191919,
            #111111
        );

    box-shadow:
        0 8px 24px rgba(
            0,
            0,
            0,
            0.28
        );
}


.sidebar-commission-header {
    padding:
        11px 12px;

    background:
        var(--orange);

    color:
        #ffffff;

    text-align:
        center;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.sidebar-commission-body {
    padding:
        18px 14px
        20px;

    text-align: center;
}


.sidebar-commission-amount {
    font-size: 27px;

    font-weight: 900;

    line-height: 1.1;

    color: #ffffff;
}


.sidebar-commission-label {
    margin-top: 6px;

    font-size: 10px;

    font-weight: 700;

    color:
        var(--muted);

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


.sidebar-commission-divider {
    height: 1px;

    margin:
        17px 6px;

    background:
        #313131;
}


.sidebar-commission-ratio {
    font-size: 21px;

    font-weight: 900;

    color:
        var(--orange2);
}


.sidebar-commission-ratio-label {
    margin-top: 5px;

    font-size: 10px;

    font-weight: 700;

    color:
        var(--muted);

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
    max-width: 950px
) {

    .shell {
        grid-template-columns:
            1fr;
    }


    aside {
        display:
            none;
    }


    .kpis {
        grid-template-columns:
            1fr;
    }


    .grid3 {
        grid-template-columns:
            1fr;
    }


    .sidebar-commission-wrap {
        display:
            none;
    }

}

/* ============================================================
   LOGGED-IN USER / ACCOUNT TYPE
   ============================================================ */

.user-account {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.user-account-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    text-align: right;
    line-height: 1.05;
}

.user-account-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.user-account-type {
    color: var(--orange2);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 3px;
    white-space: nowrap;
}

.user-account form {
    margin: 0;
    flex: 0 0 auto;
}


/* ============================================================
   LIGHT / DARK THEME TOGGLE
   Added 2026-09-16
   ============================================================ */

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;

    --black: #f3f4f6;
    --panel: #ffffff;
    --panel2: #f6f7f8;
    --panel3: #eceef0;

    --silver: #555b62;
    --white: #181a1d;
    --muted: #6d737a;
    --line: #d9dcdf;

    --orangeSoft: #fff2e4;
}


/* ============================================================
   THEME BUTTON
   ============================================================ */

.theme-toggle {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid #343434;
    border-radius: 9px;

    background: #151515;
    color: #f4f4f4;

    font: inherit;
    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.theme-toggle:hover {
    border-color: var(--orange);
    background: #202020;
    color: var(--orange2);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .20);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

.theme-toggle-icon {
    font-size: 18px;
    line-height: 1;
}


/* ============================================================
   PAGE
   ============================================================ */

html[data-theme="light"] body {
    background:
        linear-gradient(
            135deg,
            #f6f7f8 0%,
            #ffffff 60%,
            #f0f1f2 100%
        );

    color: #181a1d;
}


/* ============================================================
   HEADER
   ============================================================ */

html[data-theme="light"] header {
    background: #ffffff;
    border-bottom: 1px solid #dadde0;
    color: #181a1d;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

html[data-theme="light"] .brand strong {
    color: #181a1d;
}

html[data-theme="light"] .brand small {
    color: #6b7075;
}

html[data-theme="light"] .brandmark::after {
    background: #595e64;
}

html[data-theme="light"] .user {
    color: #555b62;
}

html[data-theme="light"] .user-account-name {
    color: #181a1d;
}

html[data-theme="light"] .theme-toggle {
    background: #f5f6f7;
    border-color: #d6d9dc;
    color: #25282b;
}

html[data-theme="light"] .theme-toggle:hover {
    background: #ffffff;
    border-color: var(--orange);
    color: var(--orange);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

html[data-theme="light"] aside {
    background: #ffffff;
    border-right: 1px solid #dadde0;
}

html[data-theme="light"] .navbtn {
    color: #40454a;
}

html[data-theme="light"] .navbtn.active,
html[data-theme="light"] .navbtn:hover {
    background: var(--orange);
    color: #ffffff;
}


/* ============================================================
   HEADINGS
   ============================================================ */

html[data-theme="light"] h1 {
    color: #181a1d;
}

html[data-theme="light"] .sectiontitle {
    color: #44494e;
}


/* ============================================================
   BUTTONS
   ============================================================ */

html[data-theme="light"] .secondary {
    background: #ffffff;
    border-color: #cdd1d5;
    color: #292d31;
}

html[data-theme="light"] .secondary:hover {
    border-color: var(--orange);
    background: #fff8f1;
}


/* ============================================================
   HERO / CARDS
   ============================================================ */

html[data-theme="light"] .pitch-hero {
    border-color: #d9dcdf;
    border-left-color: var(--orange);
    background:
        linear-gradient(
            90deg,
            #ffffff,
            #fff7ef
        );
}

html[data-theme="light"] .card {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafafa
        );

    border-color: #dcdfe2;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

html[data-theme="light"] .kpi .value {
    color: #181a1d;
}


/* ============================================================
   FIELDS
   ============================================================ */

html[data-theme="light"] .field label {
    color: #404449;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
    background: #ffffff;
    color: #181a1d;
    border-color: #cdd1d5;
}

html[data-theme="light"] .field input:disabled {
    color: #777c82;
    background: #eef0f2;
}


/* ============================================================
   WORKFLOW
   ============================================================ */

html[data-theme="light"] .step {
    background: #f4f5f6;
    border-color: #d4d7da;
    color: #53585d;
}

html[data-theme="light"] .step.current {
    border-color: var(--orange);
    color: #181a1d;
}


/* ============================================================
   TABLES
   ============================================================ */

html[data-theme="light"] th {
    color: #666c72;
    border-bottom-color: #d8dbde;
}

html[data-theme="light"] td {
    color: #292d31;
    border-bottom-color: #e1e3e5;
}

html[data-theme="light"] tbody tr:hover {
    background: #f6f7f8;
}

html[data-theme="light"] .clickable-row:hover {
    background: #f1f3f4;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

html[data-theme="light"] .draft {
    background: #e8eaec;
    color: #4d5257;
}

html[data-theme="light"] .submitted {
    background: #fff0d7;
    color: #966000;
}

html[data-theme="light"] .approved {
    background: #def3e7;
    color: #197143;
}

html[data-theme="light"] .changes {
    background: #fde5e5;
    color: #a33636;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

html[data-theme="light"] .empty-state {
    border-color: #ccd0d4;
}


/* ============================================================
   SEARCH RESULTS
   ============================================================ */

html[data-theme="light"] .sku-search-results {
    background: #ffffff;
    border-color: #d4d7da;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

html[data-theme="light"] .sku-result {
    border-bottom-color: #e0e2e4;
}

html[data-theme="light"] .sku-result:hover {
    background: #f4f5f6;
}

html[data-theme="light"] .sku-result-code {
    color: #181a1d;
}


/* ============================================================
   LINE ITEM INPUTS
   ============================================================ */

html[data-theme="light"] .lineitems input,
html[data-theme="light"] .lineitems select {
    background: #ffffff;
    color: #181a1d;
    border-color: #cdd1d5;
}


/* ============================================================
   COMMISSION SIDEBAR
   ============================================================ */

html[data-theme="light"] .sidebar-commission-card {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8f8f8
        );

    border-color: #d5d8db;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

html[data-theme="light"] .sidebar-commission-amount {
    color: #181a1d;
}

html[data-theme="light"] .sidebar-commission-divider {
    background: #d8dbde;
}


/* ============================================================
   PAGE-SPECIFIC DARK ELEMENT FALLBACKS
   These catch common hard-coded dark styles in child templates.
   More specific page CSS can still override them if required.
   ============================================================ */

html[data-theme="light"] .approval-submit-card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .filter-card,
html[data-theme="light"] .panel {
    background: #ffffff;
    color: #181a1d;
    border-color: #d5d8db;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    caret-color: #181a1d;
}

html[data-theme="light"] ::placeholder {
    color: #8a9096;
}


/* ============================================================
   RESPONSIVE HEADER
   ============================================================ */

@media (max-width: 700px) {
    .theme-toggle {
        width: 34px;
        height: 34px;
    }
}


/* ============================================================
   LIGHT MODE CONTRAST CLEANUP
   Audit History / Notifications / common page text
   ============================================================ */

html[data-theme="light"] {
    --muted: #596068;
    --silver: #454b51;
}

/* General muted/detail copy */
html[data-theme="light"] .sub,
html[data-theme="light"] .muted,
html[data-theme="light"] .detail,
html[data-theme="light"] .details,
html[data-theme="light"] .description,
html[data-theme="light"] .audit-detail,
html[data-theme="light"] .audit-details,
html[data-theme="light"] .audit-description,
html[data-theme="light"] .notification-detail,
html[data-theme="light"] .notification-description {
    color: #555d65 !important;
}

/* Audit History table: DETAILS is the second column in the current layout. */
html[data-theme="light"] table td:nth-child(2) {
    color: #4b535b;
}

/* Keep notes visibly orange and readable. */
html[data-theme="light"] .note,
html[data-theme="light"] .notes,
html[data-theme="light"] .audit-note,
html[data-theme="light"] [class*="note"] {
    color: #d96b00;
}

/* Stronger table headers without making them heavy. */
html[data-theme="light"] th {
    color: #424950;
}

/* Common secondary copy inside cards/tables. */
html[data-theme="light"] td small,
html[data-theme="light"] .card small {
    color: #5b6269;
}


/* ============================================================
   LIGHT MODE CLEANUP - APPROVALS / WORKFLOW / COMMISSION
   ============================================================ */

/* ------------------------------------------------------------
   WORKFLOW / APPROVAL PAGE
   ------------------------------------------------------------ */

html[data-theme="light"] .workflow-card,
html[data-theme="light"] .workflow-panel,
html[data-theme="light"] .approval-workflow,
html[data-theme="light"] .approval-workflow-card {
    background: #ffffff !important;
    color: #181a1d !important;
    border-color: #d5d8db !important;
}

html[data-theme="light"] .workflow-card *,
html[data-theme="light"] .workflow-panel *,
html[data-theme="light"] .approval-workflow *,
html[data-theme="light"] .approval-workflow-card * {
    color: inherit;
}

html[data-theme="light"] .workflow-card .muted,
html[data-theme="light"] .workflow-panel .muted,
html[data-theme="light"] .approval-workflow .muted,
html[data-theme="light"] .approval-workflow-card .muted {
    color: #5b6269 !important;
}

/* Common workflow state pills / blocks */
html[data-theme="light"] .workflow-step,
html[data-theme="light"] .workflow-item,
html[data-theme="light"] .approval-step {
    background: #f4f5f6 !important;
    color: #343a40 !important;
    border-color: #d4d7da !important;
}

html[data-theme="light"] .workflow-step.active,
html[data-theme="light"] .workflow-item.active,
html[data-theme="light"] .approval-step.active {
    background: #fff4e8 !important;
    color: #7a3e00 !important;
    border-color: #f57c00 !important;
}


/* ------------------------------------------------------------
   REVIEW / APPROVAL SUMMARY TILES
   ------------------------------------------------------------ */

html[data-theme="light"] .review-card,
html[data-theme="light"] .review-tile,
html[data-theme="light"] .review-box,
html[data-theme="light"] .approval-summary-card,
html[data-theme="light"] .approval-summary-tile,
html[data-theme="light"] .approval-detail-card {
    background: #f7f8f9 !important;
    color: #181a1d !important;
    border-color: #d3d7da !important;
    box-shadow: none !important;
}

html[data-theme="light"] .review-card .label,
html[data-theme="light"] .review-tile .label,
html[data-theme="light"] .review-box .label,
html[data-theme="light"] .approval-summary-card .label,
html[data-theme="light"] .approval-summary-tile .label,
html[data-theme="light"] .approval-detail-card .label {
    color: #626970 !important;
}

html[data-theme="light"] .review-card .value,
html[data-theme="light"] .review-tile .value,
html[data-theme="light"] .review-box .value,
html[data-theme="light"] .approval-summary-card .value,
html[data-theme="light"] .approval-summary-tile .value,
html[data-theme="light"] .approval-detail-card .value {
    color: #181a1d !important;
}


/* Catch common approval grid cards even if they use generic names */
html[data-theme="light"] .review-grid > div,
html[data-theme="light"] .approval-summary-grid > div,
html[data-theme="light"] .approval-review-grid > div {
    background: #f7f8f9 !important;
    color: #181a1d !important;
    border-color: #d3d7da !important;
}

html[data-theme="light"] .review-grid > div *,
html[data-theme="light"] .approval-summary-grid > div *,
html[data-theme="light"] .approval-review-grid > div * {
    color: inherit;
}


/* ------------------------------------------------------------
   APPROVAL NOTES
   ------------------------------------------------------------ */

html[data-theme="light"] .edit-note,
html[data-theme="light"] .edit-notes,
html[data-theme="light"] .approval-note-card,
html[data-theme="light"] .approval-notes-card,
html[data-theme="light"] .note-card {
    background: #f7f8f9 !important;
    color: #181a1d !important;
    border-color: #d3d7da !important;
}

html[data-theme="light"] .edit-note small,
html[data-theme="light"] .edit-notes small,
html[data-theme="light"] .approval-note-card small,
html[data-theme="light"] .approval-notes-card small,
html[data-theme="light"] .note-card small {
    color: #60676e !important;
}


/* ------------------------------------------------------------
   COMMISSION TOP KPI CARDS
   ------------------------------------------------------------ */

html[data-theme="light"] .commission-kpi,
html[data-theme="light"] .commission-summary-card,
html[data-theme="light"] .commission-metric,
html[data-theme="light"] .scorecard-kpi,
html[data-theme="light"] .metric-card {
    background: #ffffff !important;
    color: #181a1d !important;
    border-color: #d5d8db !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .05) !important;
}

html[data-theme="light"] .commission-kpi .label,
html[data-theme="light"] .commission-summary-card .label,
html[data-theme="light"] .commission-metric .label,
html[data-theme="light"] .scorecard-kpi .label,
html[data-theme="light"] .metric-card .label {
    color: #5d646b !important;
}

html[data-theme="light"] .commission-kpi .value,
html[data-theme="light"] .commission-summary-card .value,
html[data-theme="light"] .commission-metric .value,
html[data-theme="light"] .scorecard-kpi .value,
html[data-theme="light"] .metric-card .value {
    color: #181a1d !important;
}


/* Common top-row KPI containers */
html[data-theme="light"] .commission-kpis > div,
html[data-theme="light"] .commission-summary > div,
html[data-theme="light"] .scorecard-summary > div {
    background: #ffffff !important;
    color: #181a1d !important;
    border-color: #d5d8db !important;
}

html[data-theme="light"] .commission-kpis > div *,
html[data-theme="light"] .commission-summary > div *,
html[data-theme="light"] .scorecard-summary > div * {
    color: inherit;
}


/* ------------------------------------------------------------
   COMMISSION SCORECARD TABLE
   ------------------------------------------------------------ */

html[data-theme="light"] .commission-scorecard,
html[data-theme="light"] .scorecard {
    background: #ffffff !important;
    color: #181a1d !important;
    border-color: #d5d8db !important;
}

html[data-theme="light"] .commission-scorecard thead th,
html[data-theme="light"] .scorecard thead th,
html[data-theme="light"] table.scorecard thead th {
    background: #eef0f2 !important;
    color: #343a40 !important;
    border-bottom-color: #d1d5d8 !important;
}

html[data-theme="light"] .commission-scorecard tbody td,
html[data-theme="light"] .scorecard tbody td,
html[data-theme="light"] table.scorecard tbody td {
    background: #ffffff !important;
    color: #202428 !important;
    border-bottom-color: #e0e3e5 !important;
}


/* ------------------------------------------------------------
   GENERIC LIGHT MODE OVERRIDES FOR HARDCODED DARK PAGE BLOCKS
   Scoped to likely content containers to avoid changing status badges.
   ------------------------------------------------------------ */

html[data-theme="light"] main .dark-card,
html[data-theme="light"] main .dark-panel,
html[data-theme="light"] main .black-card,
html[data-theme="light"] main .summary-box {
    background: #ffffff !important;
    color: #181a1d !important;
    border-color: #d5d8db !important;
}

html[data-theme="light"] main .dark-card *,
html[data-theme="light"] main .dark-panel *,
html[data-theme="light"] main .black-card *,
html[data-theme="light"] main .summary-box * {
    color: inherit;
}


/* ------------------------------------------------------------
   FORCE COMMON WHITE TEXT BACK TO DARK IN LIGHT MODE
   Only inside main content; header/sidebar are handled separately.
   ------------------------------------------------------------ */

html[data-theme="light"] main .text-white {
    color: #181a1d !important;
}

html[data-theme="light"] main .text-muted {
    color: #5b6269 !important;
}


/* ------------------------------------------------------------
   APPROVAL ACTION HELP TEXT / LABELS
   ------------------------------------------------------------ */

html[data-theme="light"] .approval-help,
html[data-theme="light"] .approval-instructions,
html[data-theme="light"] .review-help {
    color: #596068 !important;
}