/* default = light */
/* bware.theme.tokens.css */

/* Light (default) */
:root {
    --bware-bg: #ffffff;
    --bware-surface: #ffffff;
    --bware-surface-2: #f8f9fa;
    --bware-text: #212529;
    --bware-muted: #6c757d;
    --bware-border: rgba(15,23,42,.10);
    --bware-primary: rgb(34,101,154);
    --bware-shadow: 0 .25rem 1rem rgba(0,0,0,.06);
    --bware-alt-bg: #f5f6f8;
}

/* Dark */
html[data-theme="dark"] {
    --bware-bg: #0f141a;
    --bware-surface: #151c24;
    --bware-surface-2: #1b2430;
    --bware-text: #e9eef5;
    --bware-muted: #a7b3c2;
    --bware-border: rgba(255,255,255,.10);
    --bware-shadow: 0 .25rem 1rem rgba(0,0,0,.35);
    --bware-alt-bg: var(--bware-surface-2);
    /* BS 5.1 wiring */
    --bs-body-bg: var(--bware-bg);
    --bs-body-color: var(--bware-text);
    --bs-secondary-color: var(--bware-muted);
    --bs-border-color: rgba(255,255,255,.12);
    --bs-light: var(--bware-surface-2);
    --bs-dark: var(--bware-text);
}
    /* ========= Bootstrap 5.1 dark compatibility ========= */
    html[data-theme="dark"] body {
        background: var(--bware-bg);
        color: var(--bware-text);
    }

    /* Cards / surfaces */
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .card-item {
        background: var(--bware-surface);
        color: var(--bware-text);
        border-color: var(--bware-border);
    }

    /* Tabs */
    html[data-theme="dark"] .nav-tabs .nav-link {
        color: var(--bware-muted);
    }

        html[data-theme="dark"] .nav-tabs .nav-link.active {
            color: var(--bware-text);
            background: var(--bware-surface);
            border-color: var(--bware-border) var(--bware-border) var(--bware-surface);
        }

    /* Tables */
    html[data-theme="dark"] .table {
        color: var(--bware-text);
    }

        html[data-theme="dark"] .table > :not(caption) > * > * {
            border-color: rgba(255,255,255,.08);
        }

        html[data-theme="dark"] thead,
        html[data-theme="dark"] .table thead th {
            background: var(--bware-surface-2) !important;
            color: var(--bware-text) !important;
        }

    /* Inputs */
    html[data-theme="dark"] .form-control:focus,
    html[data-theme="dark"] .form-select:focus {
        border-color: rgba(34,101,154,.55);
        box-shadow: 0 0 0 .2rem rgba(34,101,154,.18);
    }

    html[data-theme="dark"] .form-control[readonly] {
        background: rgba(255,255,255,.03);
    }


        html[data-theme="dark"] .form-control::placeholder {
            color: rgba(233,238,245,.55);
        }

    html[data-theme="dark"] .input-group-text {
        background: var(--bware-surface-2);
        color: var(--bware-text);
        border-color: rgba(255,255,255,.14);
    }

    /* Dropdowns / menus */
    html[data-theme="dark"] .dropdown-menu {
        background: var(--bware-surface);
        border-color: rgba(255,255,255,.12);
    }

    html[data-theme="dark"] .dropdown-item {
        color: var(--bware-text);
    }

        html[data-theme="dark"] .dropdown-item:hover {
            background: rgba(255,255,255,.06);
        }

    /* Buttons (outline variants look washed in dark by default) */
    html[data-theme="dark"] .btn-outline-secondary {
        color: var(--bware-text);
        border-color: rgba(255,255,255,.18);
    }

        html[data-theme="dark"] .btn-outline-secondary:hover {
            background: rgba(255,255,255,.08);
        }
    html[data-theme="dark"] .bware-tabs.nav-tabs {
        border-bottom-color: rgba(255,255,255,.12);
    }

    html[data-theme="dark"] .bware-tabs .nav-link {
        background-color: var(--bware-surface-2) !important;
        color: var(--bware-text) !important;
        border-color: rgba(255,255,255,.12) !important;
    }

        html[data-theme="dark"] .bware-tabs .nav-link:hover {
            background-color: rgba(255,255,255,.06) !important;
        }

        html[data-theme="dark"] .bware-tabs .nav-link.active {
            background-color: var(--bware-primary) !important;
            border-color: var(--bware-primary) !important;
            color: var(--bware-surface) !important;
        }

    /* your panel background is hard-coded to #fff in bware-admin.css */
    html[data-theme="dark"] .tab-panel,
    html[data-theme="dark"] .bware-tab-panel {
        background: var(--bware-surface) !important;
        border-color: rgba(255,255,255,.12) !important;
    }
    /* ===== CRM LEFT RAIL (dark) ===== */
    html[data-theme="dark"] .crm-left {
        background: var(--bware-surface);
        color: var(--bware-text);
    }

        /* your scroll container */
        html[data-theme="dark"] .crm-left .listbox-container {
            background: var(--bware-surface);
            border-color: rgba(255,255,255,.10);
        }

        /* list-group base */
        html[data-theme="dark"] .crm-left .list-group {
            background: transparent;
        }

        /* items */
        html[data-theme="dark"] .crm-left .list-group-item {
            background: var(--bware-surface);
            color: var(--bware-text);
            border-color: rgba(255,255,255,.08);
        }

            /* subtle zebra if you still have it in CRM css */
            html[data-theme="dark"] .crm-left .list-group-item:nth-child(odd) {
                background: rgba(255,255,255,.02);
            }

            /* hover */
            html[data-theme="dark"] .crm-left .list-group-item:hover {
                background: rgba(255,255,255,.05);
            }

            /* your custom selected class */
            html[data-theme="dark"] .crm-left .org-item.selected,
            html[data-theme="dark"] .crm-left .list-group-item.selected {
                background: rgba(34,101,154,.35) !important; /* tinted primary */
                border-color: rgba(34,101,154,.55) !important;
                color: var(--bware-surface) !important;
            }

        /* renew date colouring (if your GetRenewClass uses "text-danger"/etc this might be enough) */
        html[data-theme="dark"] .crm-left .item-info {
            color: rgba(233,238,245,.75);
        }

        /* inputs inside the left rail */
        html[data-theme="dark"] .crm-left .form-control,
        html[data-theme="dark"] .crm-left .form-select {
            background: var(--bware-surface-2);
            color: var(--bware-text);
            border-color: rgba(255,255,255,.14);
        }
    /* Form labels */
    html[data-theme="dark"] .bware-form .form-label {
        color: rgba(233,238,245,.85); /* readable label tone */
    }

    /* If some labels still look “disabled”, they’re probably inheriting opacity */
    html[data-theme="dark"] .bware-form label {
        opacity: 1 !important;
    }
    html[data-theme="dark"] .details-shell {
        color: var(--bware-text);
    }
    /* ===== Table hover fixes for dark mode ===== */
    html[data-theme="dark"] .table-hover > tbody > tr:hover {
        background-color: rgba(255,255,255,.06) !important;
        color: var(--bware-text) !important; /* keep text light */
    }

        /* Ensure cells inherit the row hover text color */
        html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
            color: var(--bware-text) !important;
        }

        /* If you use links/buttons inside rows */
        html[data-theme="dark"] .table-hover > tbody > tr:hover a,
        html[data-theme="dark"] .table-hover > tbody > tr:hover .btn-link {
            color: var(--bware-text) !important;
        }
    /* ===== Modal Dark Mode ===== */
    html[data-theme="dark"] .modal-content {
        background: var(--bware-surface);
        color: var(--bware-text);
        border-color: var(--bware-border);
    }

    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-footer {
        background: var(--bware-surface-2);
        border-color: var(--bware-border);
        color: var(--bware-text);
    }

        /* Close button */
        html[data-theme="dark"] .modal-header .btn-close {
            filter: invert(1) opacity(.7);
        }
    /* ===== Dark Form Controls ===== */
    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .form-select,
    html[data-theme="dark"] textarea {
        background-color: #1a222c !important;
        color: var(--bware-text) !important;
        border-color: rgba(255,255,255,.14) !important;
    }

        html[data-theme="dark"] .form-control:focus,
        html[data-theme="dark"] .form-select:focus {
            background-color: #1a222c !important;
            border-color: var(--bware-primary) !important;
            box-shadow: var(--bware-focus);
        }
    html[data-theme="dark"] .form-control {
        box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
    }
    html[data-theme="dark"] .modal-content {
        box-shadow: 0 20px 60px rgba(0,0,0,.6);
    }
/* ===== Summary card (Renew modal) ===== */
.bware-summary-card {
    background: var(--bware-surface);
    border: 1px solid var(--bware-border);
    border-radius: 12px;
}

    .bware-summary-card .label {
        color: var(--bware-muted);
        font-weight: 600;
        font-size: .8rem;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .bware-summary-card .value {
        color: var(--bware-text);
        font-weight: 700;
        font-size: 1.05rem;
    }

/* If anything is forcing dark text in dark mode, harden it */
html[data-theme="dark"] .bware-summary-card,
html[data-theme="dark"] .bware-summary-card * {
    color: inherit;
}

    html[data-theme="dark"] .bware-summary-card .label {
        color: var(--bware-muted) !important;
    }

    html[data-theme="dark"] .bware-summary-card .value {
        color: var(--bware-text) !important;
    }
/* ===== Disabled / readonly controls ===== */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] textarea[readonly] {
    background-color: rgba(255,255,255,.03) !important; /* slightly flatter */
    color: rgba(233,238,245,.70) !important; /* muted text */
    border-color: rgba(255,255,255,.08) !important;
    opacity: 1 !important; /* stop bootstrap washout */
    cursor: not-allowed;
}

/* Optional: make readonly feel "inset" */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
/* ===== Edit row highlight ===== */
html[data-theme="dark"] .table tbody tr.editing,
html[data-theme="dark"] .table tbody tr.is-editing,
html[data-theme="dark"] .table tbody tr.row-edit {
    background: rgba(34,101,154,.12) !important; /* brand tint */
    box-shadow: inset 0 0 0 1px rgba(34,101,154,.25);
}

    /* ensure text stays readable */
    html[data-theme="dark"] .table tbody tr.editing > *,
    html[data-theme="dark"] .table tbody tr.is-editing > *,
    html[data-theme="dark"] .table tbody tr.row-edit > * {
        color: var(--bware-text) !important;
    }
/* ------------------------------
   NAVMENU FIX FOR DARK MODE
------------------------------ */
html[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--bware-text) !important;
}

    html[data-theme="dark"] .navbar-nav .nav-link.active,
    html[data-theme="dark"] .navbar-nav .nav-link:hover,
    html[data-theme="dark"] .navbar-nav .nav-link:focus {
        color: var(--bware-primary) !important;
        font-weight: 600;
    }

.card-title,
.bware-card-title {
    color: var(--bware-text) !important;
    font-weight: 600;
}