/* ============================================================
   Dark Mode — Custom indigo/violet palette (Tailwind Generator)
   Toggle via html[data-theme="dark"]; saved at localStorage["lavian-theme"]

   Scale (chỉ dùng các shade này — không lệch ra ngoài):
     50  #f5f6fa     500 #4b5680    primary
     100 #e2e8f0     600 #3a4060
     200 #cbd5e1     700 #252840
     300 #94a3b8     800 #1f2340
     400 #6b7793     900 #1a1d30
                     950 #13162a    base bg
   ============================================================ */

html[data-theme="dark"] {
    /* NITA palette (from boss's index.html design) */
    --c-50:  #f5f6fa;
    --c-100: #e2e8f0;   /* text bright */
    --c-200: #cbd5e1;
    --c-300: #94a3b8;   /* text mute */
    --c-400: #6b7793;
    --c-500: #4b5680;   /* text dim */
    --c-600: #3a4060;
    --c-700: #252840;   /* border */
    --c-800: #1f2340;   /* bg-hover */
    --c-900: #1a1d30;   /* bg-sec */
    --c-950: #13162a;   /* bg-card */

    /* NITA accent palette */
    --c-accent:   #4f87ff;   /* primary blue */
    --c-accent2:  #6366f1;   /* indigo */
    --c-purple:   #8b5cf6;
    --c-cyan:     #06b6d4;

    /* Semantic surfaces */
    --dm-bg:           #0d0f18;        /* page bg — darker than c-950 */
    --dm-bg-card:      var(--c-950);
    --dm-bg-sec:       var(--c-900);
    --dm-bg-hover:     var(--c-800);
    --dm-bg-elevated:  var(--c-700);

    --dm-border:       var(--c-700);
    --dm-border-strong: var(--c-600);

    --dm-text:         var(--c-100);   /* main body text */
    --dm-text-strong:  var(--c-50);    /* headings */
    --dm-text-mute:    var(--c-300);   /* secondary text */
    --dm-text-dim:     var(--c-500);   /* placeholders */

    --dm-primary:      var(--c-accent);
    --dm-primary-h:    #6ea3ff;
    --dm-primary-act:  var(--c-accent2);

    /* Semantic states — NITA */
    --dm-success: #10b981;
    --dm-warning: #f59e0b;
    --dm-danger:  #ef4444;
    --dm-info:    #06b6d4;

    --dm-radius:     12px;
    --dm-radius-sm:  8px;
    --dm-shadow:     0 4px 24px rgba(13, 15, 24, .4);

    color-scheme: dark;
}

/* ── Floating toggle button (both modes) ── */
.theme-toggle-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #f79c0a;   /* moon amber (light mode) — drives SVG currentColor */
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.08);
}

.theme-toggle-btn svg {
    display: block;
}

html[data-theme="dark"] .theme-toggle-btn {
    background: linear-gradient(135deg, var(--c-500), var(--c-700));
    color: #f79c0a;   /* sun amber (dark mode) — drives SVG currentColor */
    box-shadow: 0 4px 18px rgba(75, 86, 128, .4);
}

/* ============================================================
   Layout & surfaces
   ============================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-footer {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text);
}

html[data-theme="dark"] .content-header > h1,
html[data-theme="dark"] .content-header > h1 small {
    color: var(--dm-text-strong);
}

/* Cards / Boxes */
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .small-box {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text);
    border: 1px solid var(--dm-border) !important;
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow);
}

html[data-theme="dark"] .box-header,
html[data-theme="dark"] .panel-heading {
    color: var(--dm-text-strong);
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html[data-theme="dark"] .box-title,
html[data-theme="dark"] .panel-title {
    color: var(--dm-text-strong);
    font-weight: 600;
}

html[data-theme="dark"] .box-footer {
    background-color: var(--dm-bg-sec) !important;
    border-top: 1px solid var(--dm-border) !important;
    color: var(--dm-text-mute);
}

/* Tables (Bootstrap) */
html[data-theme="dark"] .table {
    color: var(--c-200);
    background-color: transparent;
}

html[data-theme="dark"] .table > thead > tr > th {
    color: var(--c-50);
    background-color: var(--c-950);
    border-bottom: 1px solid var(--c-700) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em;
    font-weight: 700;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    color: var(--c-100);
    border-color: var(--dm-border) !important;
}

/* Bootstrap .table-bordered: every cell has border — make dark in dark mode */
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tfoot > tr > th,
html[data-theme="dark"] .table-bordered > tfoot > tr > td {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .table > tbody > tr > td strong,
html[data-theme="dark"] .table > tbody > tr > td b {
    color: var(--c-50);
}

/* Hover = subtle brighten overlay (same pattern as .ratings-page
   and other dark mode tables — slight lighten, no color shift) */
html[data-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) !important;
}

/* ============================================================
   Checkboxes — make visible against dark navy backgrounds.
   Native HTML uses accent-color (NITA blue) for checked state and
   bg/border tweaks to make the unchecked square readable.
   ============================================================ */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: var(--c-accent, #4f87ff);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--c-400, #6b7793);
    border-radius: 3px;
    cursor: pointer;
}

html[data-theme="dark"] input[type="checkbox"]:hover,
html[data-theme="dark"] input[type="radio"]:hover {
    border-color: var(--c-300, #93a4cf);
    background-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] input[type="checkbox"]:focus,
html[data-theme="dark"] input[type="radio"]:focus {
    outline: 2px solid rgba(79, 135, 255, 0.4);
    outline-offset: 1px;
}

/* AntD checkbox — when not scoped to .cskh-table (covers all React pages) */
html[data-theme="dark"] .ant-checkbox-inner {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--c-400, #6b7793) !important;
}

html[data-theme="dark"] .ant-checkbox-wrapper:hover .ant-checkbox-inner,
html[data-theme="dark"] .ant-checkbox:hover .ant-checkbox-inner {
    border-color: var(--c-300, #93a4cf) !important;
}

html[data-theme="dark"] .ant-checkbox-checked .ant-checkbox-inner {
    background-color: var(--c-accent, #4f87ff) !important;
    border-color: var(--c-accent, #4f87ff) !important;
}

html[data-theme="dark"] .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: var(--c-300, #93a4cf) !important;
}

/* iCheck (AdminLTE icheck plugin) — its checkbox skins also dim in dark */
html[data-theme="dark"] .icheckbox_minimal,
html[data-theme="dark"] .icheckbox_flat,
html[data-theme="dark"] .icheckbox_square,
html[data-theme="dark"] .iradio_minimal,
html[data-theme="dark"] .iradio_flat,
html[data-theme="dark"] .iradio_square {
    filter: brightness(2.2) contrast(0.9);
}

/* AntD Table (React pages) */
html[data-theme="dark"] .ant-table {
    background: transparent !important;
    color: var(--c-200) !important;
}

html[data-theme="dark"] .ant-table-thead > tr > th,
html[data-theme="dark"] .ant-table-thead > tr > td {
    background-color: var(--c-950) !important;
    color: var(--c-50) !important;
    border-bottom: 1px solid var(--c-700) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme="dark"] .ant-table-thead > tr > th::before {
    background-color: var(--c-700) !important;
}

html[data-theme="dark"] .ant-table-tbody > tr > td {
    background-color: var(--dm-bg-card) !important;
    color: var(--c-50) !important;
    border-bottom-color: var(--dm-border) !important;
}

html[data-theme="dark"] .ant-table-tbody > tr > td strong,
html[data-theme="dark"] .ant-table-tbody > tr > td b,
html[data-theme="dark"] .ant-table-tbody > tr > td .font-bold,
html[data-theme="dark"] .ant-table-tbody > tr > td .font-semibold {
    color: var(--c-50) !important;
}

/* AntD row hover = darken overlay (no color shift) */
html[data-theme="dark"] .ant-table-tbody > tr.ant-table-row:hover > td,
html[data-theme="dark"] .ant-table-tbody > tr > td.ant-table-cell-row-hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) !important;
}

html[data-theme="dark"] .ant-table-summary > tr > td,
html[data-theme="dark"] .ant-table-footer {
    background-color: var(--c-900) !important;
    color: var(--c-50) !important;
    border-top: 1px solid var(--c-700) !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .ant-table-cell-fix-left,
html[data-theme="dark"] .ant-table-cell-fix-right {
    background-color: var(--dm-bg-card) !important;
}

html[data-theme="dark"] .ant-table-thead .ant-table-cell-fix-left,
html[data-theme="dark"] .ant-table-thead .ant-table-cell-fix-right {
    background-color: var(--c-950) !important;
}

/* AntD Pagination on tables */
html[data-theme="dark"] .ant-pagination .ant-pagination-item {
    background-color: var(--dm-bg-sec);
    border-color: var(--dm-border);
}

html[data-theme="dark"] .ant-pagination .ant-pagination-item a {
    color: var(--c-200);
}

html[data-theme="dark"] .ant-pagination .ant-pagination-item-active {
    background-color: var(--c-500);
    border-color: var(--c-500);
}

html[data-theme="dark"] .ant-pagination .ant-pagination-item-active a {
    color: #fff;
}

/* AntD Tag — harmonized with indigo scale */
html[data-theme="dark"] .ant-tag {
    background-color: rgba(107, 119, 147, 0.12);
    border-color: rgba(37, 40, 64, 0.4);
    color: var(--c-200);
}

html[data-theme="dark"] .ant-tag-blue,
html[data-theme="dark"] .ant-tag-geekblue,
html[data-theme="dark"] .ant-tag-purple {
    background-color: rgba(75, 86, 128, 0.18);
    border-color: rgba(75, 86, 128, 0.5);
    color: var(--c-300);
}

html[data-theme="dark"] .ant-tag-green,
html[data-theme="dark"] .ant-tag-success {
    background-color: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.45);
    color: var(--dm-success);
}

html[data-theme="dark"] .ant-tag-orange,
html[data-theme="dark"] .ant-tag-gold,
html[data-theme="dark"] .ant-tag-warning {
    background-color: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.45);
    color: var(--dm-warning);
}

html[data-theme="dark"] .ant-tag-red,
html[data-theme="dark"] .ant-tag-volcano,
html[data-theme="dark"] .ant-tag-error {
    background-color: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.45);
    color: var(--dm-danger);
}

html[data-theme="dark"] .ant-tag-cyan {
    background-color: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.45);
    color: var(--dm-info);
}

/* ============================================================
   Number / statistic visibility — always bright on dark
   ============================================================ */
html[data-theme="dark"] .ant-statistic-content,
html[data-theme="dark"] .ant-statistic-content-value,
html[data-theme="dark"] .ant-statistic-content-value-int,
html[data-theme="dark"] .ant-statistic-content-value-decimal,
html[data-theme="dark"] .ant-statistic-content-prefix,
html[data-theme="dark"] .ant-statistic-content-suffix {
    color: var(--c-50) !important;
    font-weight: 700;
}

html[data-theme="dark"] .ant-statistic-title {
    color: var(--c-300) !important;
    font-weight: 600;
}

/* Generic "number/value/amount" classes used across pages */
html[data-theme="dark"] [class*="-value"],
html[data-theme="dark"] [class*="-amount"],
html[data-theme="dark"] [class*="-total"],
html[data-theme="dark"] [class*="-count"],
html[data-theme="dark"] [class*="-number"] {
    /* don't force color globally, keep specific classes scoped */
}

html[data-theme="dark"] .stat-card-value,
html[data-theme="dark"] .revenue-card-value,
html[data-theme="dark"] .revenue-result-amount strong {
    color: var(--c-50) !important;
}

/* Lead report / common report table number cells */
html[data-theme="dark"] .ant-table-tbody > tr > td .text-right,
html[data-theme="dark"] .ant-table-tbody > tr > td.text-right {
    color: var(--c-100) !important;
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .ant-descriptions-item-label {
    color: var(--c-300) !important;
}

html[data-theme="dark"] .ant-descriptions-item-content {
    color: var(--c-100) !important;
}

/* AntD Card header on top of indigo dark surface */
html[data-theme="dark"] .ant-card-head {
    background-color: var(--c-900) !important;
    border-bottom: 1px solid var(--c-700) !important;
    color: var(--c-50) !important;
}

html[data-theme="dark"] .ant-card-head-title {
    color: var(--c-50) !important;
    font-weight: 700;
}

html[data-theme="dark"] .ant-card-body {
    color: var(--c-200);
}

/* AntD Empty state */
html[data-theme="dark"] .ant-empty-description {
    color: var(--c-400) !important;
}

/* ============================================================
   Lead Report / Sale Report tables — override hardcoded colors
   to fit indigo palette (50→950)
   ============================================================ */

/* Main thead row (.table-tr-name) — extra strong contrast on top */
html[data-theme="dark"] .table-custom thead .table-tr-name th,
html[data-theme="dark"] .table-custom thead .table-tr-name {
    background-color: var(--c-800) !important;
    color: var(--c-50) !important;
    border-color: var(--c-700) !important;
}

/* Formula sub-row in thead (.table-tr-recipe) — slightly darker */
html[data-theme="dark"] .table-custom thead .table-tr-recipe th,
html[data-theme="dark"] .table-tr-recipe {
    background-color: var(--c-900) !important;
    color: var(--c-200) !important;
    border-color: var(--c-700) !important;
}

/* Summary rows — lightseagreen → indigo-700 */
html[data-theme="dark"] .lead-report-sum-row,
html[data-theme="dark"] .lead-report-sum-row td,
html[data-theme="dark"] .lead-report-sum-row .sticky-col-lead-report-1,
html[data-theme="dark"] .lead-report-sum-row .sticky-col-lead-report-2,
html[data-theme="dark"] .lead-report-sum-row .sticky-col-lead-report-3,
html[data-theme="dark"] .sale-report-sum-row,
html[data-theme="dark"] .sale-report-sum-row td,
html[data-theme="dark"] .sale-report-sum-row .sticky-col-lead-report-1,
html[data-theme="dark"] .sale-report-sum-row .sticky-col-lead-report-2,
html[data-theme="dark"] .lead-report-doctor-sum-row,
html[data-theme="dark"] .lead-report-doctor-sum-row td,
html[data-theme="dark"] .lead-report-doctor-sum-row .sticky-col-lead-report-1,
html[data-theme="dark"] .lead-report-doctor-sum-row .sticky-col-lead-report-2 {
    background-color: var(--c-700) !important;
    color: var(--c-50) !important;
    font-weight: 700;
}

/* Avg-date row */
html[data-theme="dark"] .lead-report-average-date-row,
html[data-theme="dark"] .lead-report-average-date-row td,
html[data-theme="dark"] .lead-report-average-date-row .sticky-col-lead-report-1,
html[data-theme="dark"] .lead-report-average-date-row .sticky-col-lead-report-2 {
    background-color: var(--c-800) !important;
    color: var(--c-50) !important;
    font-weight: 600;
}

/* Avg-3 months row */
html[data-theme="dark"] .lead-report-avg-3m-row,
html[data-theme="dark"] .lead-report-avg-3m-row td,
html[data-theme="dark"] .lead-report-avg-3m-row .sticky-col-lead-report-1,
html[data-theme="dark"] .lead-report-avg-3m-row .sticky-col-lead-report-2 {
    background-color: var(--c-900) !important;
    color: var(--c-100) !important;
    font-weight: 600;
}

/* Default sticky columns for regular body rows */
html[data-theme="dark"] .sticky-col-lead-report-1,
html[data-theme="dark"] .sticky-col-lead-report-2,
html[data-theme="dark"] .sticky-col-lead-report-3 {
    background-color: var(--dm-bg-card) !important;
    color: var(--c-200) !important;
}

/* Weekend rows (.lead-report-search-light-blue): #b1e3fb → indigo subtle */
html[data-theme="dark"] tr.lead-report-search-light-blue,
html[data-theme="dark"] td.lead-report-search-light-blue,
html[data-theme="dark"] .lead-report-search-light-blue {
    background-color: rgba(75, 86, 128, 0.10) !important;
    color: var(--c-200) !important;
}

html[data-theme="dark"] tr.lead-report-search-light-blue .sticky-col-lead-report-1,
html[data-theme="dark"] tr.lead-report-search-light-blue .sticky-col-lead-report-2 {
    background-color: rgba(75, 86, 128, 0.18) !important;
}

/* Avg-day row (.lead-report-row-avg-day): #66ffb2 → emerald subtle */
html[data-theme="dark"] td.lead-report-row-avg-day,
html[data-theme="dark"] tr.lead-report-row-avg-day td,
html[data-theme="dark"] .lead-report-row-avg-day {
    background-color: rgba(52, 211, 153, 0.12) !important;
    color: var(--dm-success) !important;
}

/* Previous month/period td (.lead-report-prev-month-td): #f39c12 → amber subtle */
html[data-theme="dark"] td.lead-report-prev-month-td,
html[data-theme="dark"] .lead-report-prev-month-td {
    background-color: rgba(251, 191, 36, 0.12) !important;
    color: var(--dm-warning) !important;
}

/* Body cells get readable text */
html[data-theme="dark"] .table-custom tbody td {
    color: var(--c-200);
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .table-custom tbody td strong,
html[data-theme="dark"] .table-custom tbody td b {
    color: var(--c-50);
}

/* Lead report row hover — darken overlay, no color shift */
html[data-theme="dark"] .table-lead-report-all tbody tr:hover > td,
html[data-theme="dark"] .table-lead-report tbody tr:hover > td,
html[data-theme="dark"] .table-lead-report-mkt tbody tr:hover > td,
html[data-theme="dark"] .table-lead-report-product tbody tr:hover > td {
    background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));
}

/* Bootstrap colored row classes (.danger/.warning/.success/.info) — semantic dark */
html[data-theme="dark"] tr.success > td,
html[data-theme="dark"] .table > tbody > tr.success > td,
html[data-theme="dark"] .table > tbody > tr > td.success {
    background-color: rgba(52, 211, 153, 0.12) !important;
    color: var(--dm-success) !important;
}

html[data-theme="dark"] tr.warning > td,
html[data-theme="dark"] .table > tbody > tr.warning > td,
html[data-theme="dark"] .table > tbody > tr > td.warning {
    background-color: rgba(251, 191, 36, 0.12) !important;
    color: var(--dm-warning) !important;
}

html[data-theme="dark"] tr.danger > td,
html[data-theme="dark"] .table > tbody > tr.danger > td,
html[data-theme="dark"] .table > tbody > tr > td.danger {
    background-color: rgba(248, 113, 113, 0.12) !important;
    color: var(--dm-danger) !important;
}

html[data-theme="dark"] tr.info > td,
html[data-theme="dark"] .table > tbody > tr.info > td,
html[data-theme="dark"] .table > tbody > tr > td.info {
    background-color: rgba(96, 165, 250, 0.12) !important;
    color: var(--dm-info) !important;
}

/* Row deleted — dark red tint, readable danger color */
html[data-theme="dark"] .row-deleted,
html[data-theme="dark"] .row-deleted > td {
    background-color: rgba(239, 68, 68, 0.14) !important;
    color: #fca5a5 !important;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.6);
}

/* Watermark text */
html[data-theme="dark"] .watermark {
    color: rgba(75, 86, 128, 0.15) !important;
}

/* Forms — brighter than the page background so inputs don't blend in.
   Page bg sits around #0d1530 / #13162a, so the field surface goes one
   shade lighter (#1f2547) and the border is a visible #3a4470. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #1f2547 !important;
    color: #f5f6fa !important;
    border: 1px solid #3a4470 !important;
    border-radius: var(--dm-radius-sm);
}

html[data-theme="dark"] .input-group-addon {
    color: #93a4cf !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #8b95b0;
}

html[data-theme="dark"] .form-control:focus {
    border-color: #6ea6ff !important;
    background-color: #1f2547 !important;
    box-shadow: 0 0 0 0.18rem rgba(110, 166, 255, 0.22) !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .control-label {
    color: #e3e7f5;
    font-weight: 600;
}

/* Buttons */
html[data-theme="dark"] .btn-default {
    background-color: var(--dm-bg-sec);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
}

html[data-theme="dark"] .btn-default:hover {
    background-color: var(--dm-bg-hover);
    color: var(--dm-text-strong);
    border-color: var(--dm-border-strong);
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus {
    background-color: var(--c-accent2) !important;
    border-color: var(--c-accent2) !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.active {
    background-color: var(--c-accent2) !important;
    border-color: var(--c-accent2) !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-success {
    background-color: var(--dm-success);
    border-color: var(--dm-success);
    color: var(--c-950);
}

html[data-theme="dark"] .btn-danger {
    background-color: var(--dm-danger);
    border-color: var(--dm-danger);
    color: var(--c-950);
}

html[data-theme="dark"] .btn-warning {
    background-color: var(--dm-warning);
    border-color: var(--dm-warning);
    color: var(--c-950);
}

html[data-theme="dark"] .btn-info {
    background-color: var(--dm-info);
    border-color: var(--dm-info);
    color: var(--c-950);
}

/* Modals */
html[data-theme="dark"] .modal-content {
    background-color: var(--dm-bg-card);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(19, 22, 42, .75);
}

html[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--dm-border);
    background: linear-gradient(135deg, rgba(75, 86, 128, .08), rgba(37, 40, 64, .08));
}

html[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--dm-border);
}

html[data-theme="dark"] .modal-title {
    color: var(--dm-text-strong);
    font-weight: 700;
}

html[data-theme="dark"] .close {
    color: var(--dm-text);
    opacity: 0.7;
}

html[data-theme="dark"] .modal-backdrop.in {
    opacity: 0.7;
    background-color: var(--c-950);
}

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--dm-bg-card);
    border: 1px solid var(--dm-border);
    box-shadow: var(--dm-shadow);
}

html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--dm-text);
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--dm-bg-hover);
    color: var(--dm-text-strong);
}

html[data-theme="dark"] .dropdown-menu .divider {
    background-color: var(--dm-border);
}

/* User dropdown menu (AdminLTE user-menu) */
html[data-theme="dark"] .user-menu .dropdown-menu {
    padding: 0;
    overflow: hidden;
    min-width: 280px;
    border-radius: 10px;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #4f87ff 100%);
    height: auto;
    padding: 20px 16px;
    text-align: center;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header img {
    width: 78px;
    height: 78px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header p {
    color: #ffffff;
    margin-top: 10px;
    font-size: 13px;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header .user-name {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 16px;
    display: block;
    margin-bottom: 2px;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header .user-position {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px;
    display: block;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-header small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-footer {
    background-color: var(--dm-bg-sec, #1a1d30) !important;
    padding: 12px 14px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--dm-border, rgba(37, 40, 64, 0.5));
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-footer .btn {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--c-50, #f5f6fa) !important;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-footer .btn:hover {
    background-color: rgba(79, 135, 255, 0.18) !important;
    border-color: rgba(79, 135, 255, 0.4) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .user-menu .dropdown-menu .user-footer .btn:last-child:hover {
    background-color: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* Typography */
html[data-theme="dark"] hr {
    border-color: var(--dm-border);
}

html[data-theme="dark"] .text-muted {
    color: var(--dm-text-mute) !important;
}

html[data-theme="dark"] a {
    color: var(--dm-primary-h);
}

html[data-theme="dark"] a:hover {
    color: var(--c-300);
}

/* Pagination */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--dm-bg-sec);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme="dark"] .pagination > li > a:hover {
    background-color: var(--dm-bg-hover);
    border-color: var(--dm-border-strong);
}

html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span {
    background-color: var(--dm-primary);
    border-color: var(--dm-primary);
    color: #fff;
}

/* Nav tabs */
html[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid var(--dm-border);
}

html[data-theme="dark"] .nav-tabs > li > a {
    color: var(--dm-text-mute);
    border: 1px solid transparent;
}

html[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: var(--dm-bg-hover);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: var(--dm-bg-sec);
    border-color: var(--dm-border) var(--dm-border) transparent;
    color: var(--dm-text-strong);
    font-weight: 600;
}

/* Login page */
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .register-page {
    background-color: var(--dm-bg);
}

html[data-theme="dark"] .login-box-body,
html[data-theme="dark"] .register-box-body {
    background-color: var(--dm-bg-card);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    border-radius: 18px;
    box-shadow: var(--dm-shadow);
}

html[data-theme="dark"] .login-logo a,
html[data-theme="dark"] .register-logo a {
    background: linear-gradient(135deg, var(--c-400), var(--c-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Select2 — same brighter surface + visible border treatment as inputs. */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #1f2547;
    border: 1px solid #3a4470;
    color: #f5f6fa;
    min-height: 36px;
    border-radius: var(--dm-radius-sm);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #f5f6fa;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: #8b95b0;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #93a4cf transparent transparent transparent;
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #6ea6ff;
    box-shadow: 0 0 0 0.18rem rgba(110, 166, 255, 0.22);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2a3460;
    border: 1px solid #3a4470;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: #15192e;
    border-color: #3a4470;
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #e3e7f5;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #4f87ff;
    color: #ffffff;
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #1f2547;
    border: 1px solid #3a4470;
    color: #f5f6fa;
}

html[data-theme="dark"] .select2-results__option {
    color: var(--dm-text);
}

html[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--dm-primary) !important;
    color: #fff !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--dm-bg-sec);
    border: 1px solid var(--dm-border);
    color: var(--dm-text);
}

/* Labels / badges semantic */
html[data-theme="dark"] .label-success,
html[data-theme="dark"] .badge-success {
    background-color: rgba(52, 211, 153, .12);
    color: var(--dm-success);
}

html[data-theme="dark"] .label-warning,
html[data-theme="dark"] .badge-warning {
    background-color: rgba(251, 191, 36, .12);
    color: var(--dm-warning);
}

html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .badge-danger {
    background-color: rgba(248, 113, 113, .12);
    color: var(--dm-danger);
}

html[data-theme="dark"] .label-info,
html[data-theme="dark"] .badge-info {
    background-color: rgba(96, 165, 250, .12);
    color: var(--dm-info);
}

html[data-theme="dark"] .label-primary,
html[data-theme="dark"] .badge-primary {
    background-color: rgba(75, 86, 128, .15);
    color: var(--c-300);
}

html[data-theme="dark"] .label-default,
html[data-theme="dark"] .badge-default {
    background-color: rgba(147, 164, 207, 0.22);
    color: var(--c-50);
    border: 1px solid rgba(147, 164, 207, 0.3);
    padding: 3px 9px;
    font-weight: 600;
}

/* Date picker */
html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .datepicker {
    background-color: var(--dm-bg-card);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .daterangepicker td,
html[data-theme="dark"] .daterangepicker th {
    background-color: transparent;
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--dm-bg-hover);
}

html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--dm-primary);
    color: #fff;
}

html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: rgba(75, 86, 128, .15);
    color: var(--dm-text);
}

/* Alerts */
html[data-theme="dark"] .alert-success {
    background-color: rgba(52, 211, 153, .08);
    border-color: rgba(52, 211, 153, .3);
    color: var(--dm-success);
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, .08);
    border-color: rgba(251, 191, 36, .3);
    color: var(--dm-warning);
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(248, 113, 113, .08);
    border-color: rgba(248, 113, 113, .3);
    color: var(--dm-danger);
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(96, 165, 250, .08);
    border-color: rgba(96, 165, 250, .3);
    color: var(--dm-info);
}

/* AdminLTE skin tweaks */
html[data-theme="dark"] .skin-blue .main-header .navbar,
html[data-theme="dark"] .skin-blue .main-header .logo {
    background-color: var(--dm-bg-card) !important;
    border-bottom: 1px solid var(--dm-border);
}

html[data-theme="dark"] .skin-blue .main-header .navbar .nav > li > a {
    color: var(--dm-text);
}

html[data-theme="dark"] .skin-blue .main-header .navbar .nav > li > a:hover {
    background-color: var(--dm-bg-hover);
    color: var(--dm-text-strong);
}

html[data-theme="dark"] .skin-blue .sidebar-menu > li > a {
    color: var(--c-100);
}

html[data-theme="dark"] .skin-blue .sidebar-menu .treeview-menu > li > a {
    color: var(--c-200);
}

html[data-theme="dark"] .skin-blue .sidebar-menu > li:hover > a {
    background-color: rgba(79, 135, 255, 0.08) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .skin-blue .sidebar-menu > li.active > a,
html[data-theme="dark"] .skin-blue .sidebar-menu > li.active > a:hover {
    background-color: rgba(79, 135, 255, 0.16) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .skin-blue .sidebar,
html[data-theme="dark"] .skin-blue .left-side {
    background-color: var(--dm-bg-card);
}

/* Code / pre */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: var(--dm-bg-sec);
    color: var(--c-200);
    border: 1px solid var(--dm-border);
}

/* Scrollbar (WebKit + Firefox) — indigo palette */
html[data-theme="dark"] * {
    scrollbar-color: rgb(132 134 150 / 55%) transparent;
}

html[data-theme="dark"] *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html[data-theme="dark"] *::-webkit-scrollbar-track {
    background: transparent;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background-color: rgba(37, 40, 64, 0.55);
    border-radius: 3px;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 86, 128, 0.8);
}

/* Selection */
html[data-theme="dark"] ::selection {
    background-color: var(--c-600);
    color: #fff;
}

/* ============================================================
   Tailwind utility class overrides for React/AntD pages
   ============================================================ */
html[data-theme="dark"] .bg-gray-50  { background-color: var(--dm-bg) !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--dm-bg-card) !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--dm-bg-sec) !important; }
html[data-theme="dark"] .bg-white    { background-color: var(--dm-bg-card) !important; }

html[data-theme="dark"] .text-gray-50,
html[data-theme="dark"] .text-gray-100,
html[data-theme="dark"] .text-gray-200 { color: var(--dm-text-strong) !important; }
html[data-theme="dark"] .text-gray-400 { color: var(--dm-text-dim) !important; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600 { color: var(--dm-text-mute) !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 { color: var(--dm-text) !important; }

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 { border-color: var(--dm-border) !important; }

/* Tailwind backgrounds (alpha tints — NITA accent for blue) */
html[data-theme="dark"] .bg-blue-50    { background-color: rgba(79, 135, 255, 0.10) !important; }
html[data-theme="dark"] .bg-blue-100   { background-color: rgba(79, 135, 255, 0.16) !important; }
html[data-theme="dark"] .bg-slate-50   { background-color: var(--dm-bg-sec) !important; }
html[data-theme="dark"] .bg-slate-100  { background-color: var(--dm-bg-hover) !important; }
html[data-theme="dark"] .bg-amber-50   { background-color: rgba(245, 158, 11, 0.10) !important; }
html[data-theme="dark"] .bg-amber-100  { background-color: rgba(245, 158, 11, 0.16) !important; }
html[data-theme="dark"] .bg-orange-50  { background-color: rgba(249, 115, 22, 0.10) !important; }
html[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.16) !important; }
html[data-theme="dark"] .bg-green-50   { background-color: rgba(16, 185, 129, 0.10) !important; }
html[data-theme="dark"] .bg-green-100  { background-color: rgba(16, 185, 129, 0.16) !important; }
html[data-theme="dark"] .bg-red-50     { background-color: rgba(239, 68, 68, 0.10) !important; }
html[data-theme="dark"] .bg-red-100    { background-color: rgba(239, 68, 68, 0.16) !important; }
html[data-theme="dark"] .bg-purple-50  { background-color: rgba(139, 92, 246, 0.12) !important; }
html[data-theme="dark"] .bg-purple-100 { background-color: rgba(139, 92, 246, 0.18) !important; }
html[data-theme="dark"] .bg-cyan-50    { background-color: rgba(6, 182, 212, 0.10) !important; }
html[data-theme="dark"] .bg-cyan-100   { background-color: rgba(6, 182, 212, 0.16) !important; }
html[data-theme="dark"] .bg-yellow-50  { background-color: rgba(234, 179, 8, 0.10) !important; }
html[data-theme="dark"] .bg-pink-50    { background-color: rgba(236, 72, 153, 0.10) !important; }

/* Tailwind borders */
html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-blue-300  { border-color: rgba(79, 135, 255, 0.35) !important; }
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200 { border-color: var(--dm-border) !important; }
html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }
html[data-theme="dark"] .border-orange-100,
html[data-theme="dark"] .border-orange-200 { border-color: rgba(249, 115, 22, 0.3) !important; }
html[data-theme="dark"] .border-green-100,
html[data-theme="dark"] .border-green-200 { border-color: rgba(16, 185, 129, 0.3) !important; }
html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200   { border-color: rgba(239, 68, 68, 0.3) !important; }
html[data-theme="dark"] .border-purple-100,
html[data-theme="dark"] .border-purple-200 { border-color: rgba(139, 92, 246, 0.3) !important; }
html[data-theme="dark"] .border-cyan-100,
html[data-theme="dark"] .border-cyan-200  { border-color: rgba(6, 182, 212, 0.3) !important; }
html[data-theme="dark"] .border-yellow-100,
html[data-theme="dark"] .border-yellow-200 { border-color: rgba(234, 179, 8, 0.3) !important; }

/* Tailwind text colors */
html[data-theme="dark"] .text-blue-500,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800   { color: #6ea3ff !important; }
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-700  { color: var(--c-200) !important; }
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-900  { color: var(--c-50) !important; }
html[data-theme="dark"] .text-amber-500,
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700  { color: #fcd34d !important; }
html[data-theme="dark"] .text-orange-500,
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-700 { color: #fdba74 !important; }
html[data-theme="dark"] .text-green-500,
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700  { color: #6ee7b7 !important; }
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700    { color: #fca5a5 !important; }
html[data-theme="dark"] .text-purple-500,
html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-purple-700 { color: #c4b5fd !important; }
html[data-theme="dark"] .text-cyan-500,
html[data-theme="dark"] .text-cyan-600   { color: #67e8f9 !important; }

/* Hover variants */
html[data-theme="dark"] .hover\:bg-blue-50:hover  { background-color: rgba(79, 135, 255, 0.16) !important; }
html[data-theme="dark"] .hover\:text-blue-800:hover { color: #94a3b8 !important; }
html[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: rgba(255, 255, 255, 0.05) !important; }

/* Content section wrapper (showCard=false) — give it spacing */
html[data-theme="dark"] .content-section {
    color: var(--dm-text);
}

/* ============================================================
   Override colors.css semantic tokens → indigo palette
   All page-specific CSS files (dashboard, customers, surgery…)
   that consume these tokens get dark mode for free.
   ============================================================ */
html[data-theme="dark"] {
    /* Surfaces */
    --color-bg-primary:        var(--dm-bg-card);
    --color-bg-secondary:      var(--dm-bg-sec);
    --color-bg-tertiary:       var(--dm-bg-hover);
    --color-bg-dark:           var(--c-950);
    --color-bg-dark-secondary: var(--c-900);
    --color-bg-glass:          rgba(26, 23, 72, 0.85);
    --color-bg-glass-light:    rgba(107, 119, 147, 0.08);

    /* Text */
    --color-text-primary:   var(--dm-text-strong);
    --color-text-secondary: var(--dm-text);
    --color-text-muted:     var(--dm-text-mute);
    --color-text-light:     var(--dm-text-dim);

    /* Borders */
    --color-border:        var(--dm-border-strong);
    --color-border-light:  var(--dm-border);
    --color-border-medium: var(--c-700);
    --color-border-dark:   var(--c-800);
    --color-border-focus:  var(--dm-primary);
    --color-border-glass:  rgba(107, 119, 147, 0.2);
    --color-border-glass-light: rgba(107, 119, 147, 0.1);

    /* Primary (remap ocean blue → indigo scale) */
    --color-primary:       var(--c-500);
    --color-primary-50:    var(--c-50);
    --color-primary-100:   var(--c-100);
    --color-primary-200:   var(--c-200);
    --color-primary-300:   var(--c-300);
    --color-primary-400:   var(--c-400);
    --color-primary-500:   var(--c-500);
    --color-primary-600:   var(--c-600);
    --color-primary-700:   var(--c-700);
    --color-primary-800:   var(--c-800);
    --color-primary-900:   var(--c-900);
    --color-primary-950:   var(--c-950);
    --color-primary-light: var(--c-400);
    --color-primary-dark:  var(--c-600);
    --color-primary-hover: var(--c-400);

    /* Accent */
    --color-accent:       var(--c-700);
    --color-accent-light: var(--c-600);
    --color-accent-dark:  var(--c-800);

    /* Primary opacity variants */
    --color-primary-10: rgba(75, 86, 128, 0.10);
    --color-primary-20: rgba(75, 86, 128, 0.20);
    --color-primary-30: rgba(75, 86, 128, 0.30);
    --color-primary-40: rgba(75, 86, 128, 0.40);
    --color-primary-50-opacity: rgba(75, 86, 128, 0.50);
    --color-primary-60: rgba(75, 86, 128, 0.60);
    --color-primary-70: rgba(75, 86, 128, 0.70);
    --color-primary-80: rgba(75, 86, 128, 0.80);
    --color-primary-90: rgba(75, 86, 128, 0.90);

    /* Semantic state opacity variants */
    --color-success-10: rgba(52, 211, 153, 0.10);
    --color-success-20: rgba(52, 211, 153, 0.20);
    --color-success-30: rgba(52, 211, 153, 0.30);
    --color-warning-10: rgba(251, 191, 36, 0.10);
    --color-warning-20: rgba(251, 191, 36, 0.20);
    --color-warning-30: rgba(251, 191, 36, 0.30);
    --color-danger-10:  rgba(248, 113, 113, 0.10);
    --color-danger-20:  rgba(248, 113, 113, 0.20);
    --color-danger-30:  rgba(248, 113, 113, 0.30);
    --color-info-10:    rgba(96, 165, 250, 0.10);
    --color-info-20:    rgba(96, 165, 250, 0.20);
    --color-info-30:    rgba(96, 165, 250, 0.30);
    --color-info-50:    rgba(96, 165, 250, 0.50);

    /* Bring semantic 500 colors in line with indigo dark mode */
    --color-success: var(--dm-success);
    --color-warning: var(--dm-warning);
    --color-danger:  var(--dm-danger);
    --color-info:    var(--dm-info);

    /* Shadows (deeper, color-tinted with palette base) */
    --shadow-xs:  0 1px 2px rgba(19, 22, 42, 0.40);
    --shadow-sm:  0 2px 4px rgba(19, 22, 42, 0.45);
    --shadow:     0 4px 6px rgba(19, 22, 42, 0.50);
    --shadow-md:  0 10px 15px rgba(19, 22, 42, 0.55);
    --shadow-lg:  0 20px 25px rgba(19, 22, 42, 0.60);
    --shadow-xl:  0 25px 50px rgba(19, 22, 42, 0.65);
    --shadow-2xl: 0 30px 60px rgba(19, 22, 42, 0.70);

    /* Colored shadows → indigo */
    --shadow-primary:        0 4px 12px rgba(75, 86, 128, 0.30);
    --shadow-primary-md:     0 8px 24px rgba(75, 86, 128, 0.40);
    --shadow-primary-lg:     0 12px 32px rgba(75, 86, 128, 0.50);
    --shadow-primary-glow:   0 0 40px rgba(75, 86, 128, 0.30);
    --shadow-primary-colored: 0 10px 40px rgba(75, 86, 128, 0.40);

    /* Primary gradients → indigo scale */
    --gradient-primary:       linear-gradient(135deg, var(--c-500) 0%, var(--c-700) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--c-400) 0%, var(--c-500) 50%, var(--c-700) 100%);
    --gradient-primary-dark:  linear-gradient(135deg, var(--c-600) 0%, var(--c-800) 100%);
    --gradient-primary-full:  linear-gradient(135deg, var(--c-400) 0%, var(--c-500) 50%, var(--c-700) 100%);
    --gradient-accent:        linear-gradient(135deg, var(--c-700) 0%, var(--c-900) 100%);
    --gradient-ocean:         linear-gradient(135deg, var(--c-500) 0%, var(--c-700) 50%, var(--c-800) 100%);
    --gradient-ocean-light:   linear-gradient(135deg, var(--c-400) 0%, var(--c-500) 50%, var(--c-700) 100%);
    --gradient-ocean-subtle:  linear-gradient(135deg, rgba(75, 86, 128, 0.10) 0%, rgba(37, 40, 64, 0.10) 100%);
}

/* ============================================================
   CKEditor 4 chrome (toolbar + frame) — match NITA dark mode.
   The actual editing area lives inside an <iframe>, so its
   body styling is loaded via CKEDITOR.config.contentsCss
   (see public/css/ckeditor-dark-content.css).
   ============================================================ */
html[data-theme="dark"] .cke,
html[data-theme="dark"] .cke_chrome {
    background: #15192e !important;
    border-color: #2f3a66 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .cke_inner {
    background: #15192e !important;
}
html[data-theme="dark"] .cke_top {
    background: #1b2747 !important;
    border-bottom: 1px solid #2f3a66 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cke_bottom {
    background: #1b2747 !important;
    border-top: 1px solid #2f3a66 !important;
    color: #c9d0e4 !important;
}
html[data-theme="dark"] .cke_path_item,
html[data-theme="dark"] .cke_path_empty {
    color: #c9d0e4 !important;
}
html[data-theme="dark"] .cke_path_item:hover,
html[data-theme="dark"] .cke_path_item:focus,
html[data-theme="dark"] .cke_path_item:active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f5f6fa !important;
}
html[data-theme="dark"] .cke_toolgroup {
    background: transparent !important;
    border: 1px solid #2f3a66 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cke_button {
    color: #c9d0e4 !important;
}
html[data-theme="dark"] .cke_button:hover,
html[data-theme="dark"] .cke_button:focus,
html[data-theme="dark"] .cke_button:active,
html[data-theme="dark"] .cke_button_on {
    background: rgba(79, 135, 255, 0.18) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cke_button_icon {
    filter: invert(0.85) hue-rotate(180deg);
}
html[data-theme="dark"] .cke_toolbar_separator {
    background: #2f3a66 !important;
}
html[data-theme="dark"] .cke_combo_button,
html[data-theme="dark"] .cke_combo_text {
    background: transparent !important;
    color: #c9d0e4 !important;
    border-color: #2f3a66 !important;
}
html[data-theme="dark"] .cke_resizer {
    border-color: transparent #6b7793 transparent transparent !important;
}
/* CKEditor focus ring */
html[data-theme="dark"] .cke_focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(110, 166, 255, 0.4) !important;
}

/* ============================================================
   Bootstrap .progress bar — used on the booking image uploader
   ("Ảnh trước và sau khi làm dịch vụ"). Default is white track
   which jars against the dark surface.
   ============================================================ */
html[data-theme="dark"] .progress {
    background-color: #1a1f3a !important;
    border: 1px solid #2f3a66 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .progress-bar {
    background-color: #4f87ff !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.18) 75%,
        transparent 75%,
        transparent
    ) !important;
}

/* ============================================================
   Surgery / CSKH table borders — the React tableProps use
   bordered:false, leaving cells without dividers. These rules
   re-add visible grid lines in dark mode.

   The bundled react.css chunk sets
     html[data-theme="dark"] .surgery-table .ant-table-tbody>tr>td {
         border-bottom-color: #25284059 !important;
     }
   with identical specificity and loads AFTER this file, so we
   bump specificity by inserting `body` to win the cascade
   without needing a Vite rebuild.
   ============================================================ */
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr > td,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr > td {
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] body .surgery-table .ant-table-thead > tr > th,
html[data-theme="dark"] body .surgery-table .ant-table-thead > tr > th.ant-table-cell-fix-left,
html[data-theme="dark"] body .surgery-table .ant-table-thead > tr > th.ant-table-cell-fix-right,
html[data-theme="dark"] body .cskh-table .ant-table-thead > tr > th,
html[data-theme="dark"] body .cskh-table .ant-table-thead > tr > th.ant-table-cell-fix-left,
html[data-theme="dark"] body .cskh-table .ant-table-thead > tr > th.ant-table-cell-fix-right {
    background-color: #1b2747 !important;   /* lighter navy header — match bookings/customers */
    text-align: left !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #2f3a66 !important;
}
html[data-theme="dark"] body .surgery-table .ant-table,
html[data-theme="dark"] body .cskh-table .ant-table {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* React's onRow handler hardcodes inline `<tr style="background-color:
   #ffffff/#f3f4f6">` (light-mode zebra) regardless of theme. Force the
   tr bg to transparent so the td bg below shows through cleanly, and
   force td bg to NITA navy on every cell (incl. fixed columns) so the
   zebra mix can't bleed through. */
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr {
    background-color: transparent !important;
}
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr > td,
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr > td.ant-table-cell-fix-right,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr > td,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {
    background-color: #13162a !important;
    color: #f5f6fa !important;
}
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr:hover > td,
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr:hover > td,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right {
    background-color: #1b2747 !important;
}

/* Bottom of thead — strong divider between header rows and body rows. */
html[data-theme="dark"] body .surgery-table .ant-table-thead,
html[data-theme="dark"] body .cskh-table .ant-table-thead {
    border-bottom: 1px solid #2f3a66 !important;
}
/* Make sure the last body row has a visible bottom border (AntD strips
   it by default). */
html[data-theme="dark"] body .surgery-table .ant-table-tbody > tr:last-child > td,
html[data-theme="dark"] body .cskh-table .ant-table-tbody > tr:last-child > td {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #3a4470 !important;
}
html[data-theme="dark"] body .surgery-table .ant-table-footer,
html[data-theme="dark"] body .surgery-table .ant-table-pagination,
html[data-theme="dark"] body .cskh-table .ant-table-footer,
html[data-theme="dark"] body .cskh-table .ant-table-pagination {
    border-top: 1px solid #3a4470 !important;
}

/* ============================================================
   daily-schedule page header — .daily-schedule-header hard-coded
   background: #ffffff. Override for dark mode (incl. the sticky
   mobile variant set on body .content-wrapper > .box > .box-header).
   ============================================================ */
html[data-theme="dark"] body .daily-schedule-header,
html[data-theme="dark"] body .content-wrapper > .box > .daily-schedule-header,
html[data-theme="dark"] body section.content > .box > .daily-schedule-header {
    background: #1b2747 !important;
    border-bottom: 1px solid #2f3a66 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] body .daily-schedule-header .box-title,
html[data-theme="dark"] body .daily-schedule-header h3.box-title,
html[data-theme="dark"] body .daily-schedule-header .box-title span {
    color: #f5f6fa !important;
}
html[data-theme="dark"] body .daily-schedule-header .box-title i {
    color: #6ea6ff !important;
}

/* ============================================================
   daily-schedule mobile cards
   The .schedule-card.booking / .reexam used light pastel gradients
   that bled white-ish over the NITA dark page bg. Replace with
   solid navy + a colored left rail to keep the booking/reexam
   distinction.
   ============================================================ */
html[data-theme="dark"] .schedule-card,
html[data-theme="dark"] .schedule-card.booking,
html[data-theme="dark"] .schedule-card.reexam {
    background: #15192e !important;
    border: 1px solid #2f3a66 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .schedule-card.booking {
    border-left: 4px solid #4f87ff !important;
}
html[data-theme="dark"] .schedule-card.reexam {
    border-left: 4px solid #10b981 !important;
}
html[data-theme="dark"] .schedule-card:hover {
    border-color: #4a558a !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .schedule-card-header {
    border-bottom: 1px solid #2f3a66 !important;
}
html[data-theme="dark"] .schedule-card-time {
    color: #f5f6fa !important;
}
html[data-theme="dark"] .schedule-card-date {
    color: #93a4cf !important;
}
html[data-theme="dark"] .schedule-card-label {
    color: #93a4cf !important;
}
html[data-theme="dark"] .schedule-card-value,
html[data-theme="dark"] .schedule-card-value strong {
    color: #f5f6fa !important;
}
html[data-theme="dark"] .schedule-card-value a {
    color: #6ea6ff !important;
}
html[data-theme="dark"] .schedule-card-value a:hover {
    color: #93b8ff !important;
}
/* "Cập nhật CSKH" button — keep accent but solid, less gradient noise */
html[data-theme="dark"] .btn-update-cskh-date {
    background: #4f87ff !important;
    box-shadow: 0 2px 6px rgba(79, 135, 255, 0.3) !important;
}
html[data-theme="dark"] .btn-update-cskh-date:hover {
    background: #3a72e8 !important;
    box-shadow: 0 4px 10px rgba(79, 135, 255, 0.4) !important;
}

/* ============================================================
   reception/assignments — CreateAssignmentModal
   ============================================================ */
html[data-theme="dark"] .create-assignment-modal .ant-modal-content {
    background: #15192e !important;
    border: 1px solid #3a4470;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .create-assignment-modal .ant-modal-header {
    background: #1b2747 !important;
    border-bottom: 1px solid #2f3a66 !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-modal-body {
    background: #10142a !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-modal-close-x,
html[data-theme="dark"] .create-assignment-modal .ant-modal-close {
    color: #c9d0e4 !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-modal-title,
html[data-theme="dark"] .create-assignment-modal .ant-typography {
    color: #f5f6fa !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-typography.ant-typography-secondary,
html[data-theme="dark"] .create-assignment-modal .ant-typography-secondary {
    color: #93a4cf !important;
}

/* Steps strip */
html[data-theme="dark"] .create-assignment-modal__steps {
    background: #15192e !important;
    border: 1px solid #2f3a66;
    box-shadow: none !important;
}
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-title {
    color: #c9d0e4 !important;
}
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-icon {
    background: #1f2547 !important;
    border-color: #4a558a !important;
}
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-active .ant-steps-item-icon,
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-process .ant-steps-item-icon {
    background: #4f87ff !important;
    border-color: #4f87ff !important;
}
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-finish .ant-steps-item-icon {
    background: transparent !important;
    border-color: #4f87ff !important;
}
html[data-theme="dark"] .create-assignment-modal__steps .ant-steps-item-tail::after {
    background: #2f3a66 !important;
}

/* Inner cards */
html[data-theme="dark"] .create-assignment-modal .ant-card {
    background: #1a1f3a !important;
    border-color: #3a4470 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-card-head {
    background: #1b2747 !important;
    border-bottom-color: #2f3a66 !important;
    color: #f5f6fa !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-card-head-title,
html[data-theme="dark"] .create-assignment-modal .ant-card-head .ant-typography {
    color: #f5f6fa !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-card-body {
    background: transparent !important;
}

/* Inputs / select inside modal */
html[data-theme="dark"] .create-assignment-modal .ant-input,
html[data-theme="dark"] .create-assignment-modal .ant-input-affix-wrapper,
html[data-theme="dark"] .create-assignment-modal .ant-select-selector,
html[data-theme="dark"] .create-assignment-modal .ant-picker {
    background: #1f2547 !important;
    border-color: #3a4470 !important;
    color: #f5f6fa !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-input::placeholder,
html[data-theme="dark"] .create-assignment-modal .ant-input-affix-wrapper input::placeholder,
html[data-theme="dark"] .create-assignment-modal .ant-select-selection-placeholder,
html[data-theme="dark"] .create-assignment-modal .ant-picker-input > input::placeholder {
    color: #8b95b0 !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-select-selection-item,
html[data-theme="dark"] .create-assignment-modal .ant-picker-input > input {
    color: #f5f6fa !important;
}
html[data-theme="dark"] .create-assignment-modal label {
    color: #e3e7f5 !important;
}

/* Buttons "Tạo Khách Hàng Mới" etc */
html[data-theme="dark"] .create-assignment-modal .ant-btn-default {
    background: #1f2547 !important;
    border-color: #3a4470 !important;
    color: #e3e7f5 !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-btn-default:hover {
    background: #232a4a !important;
    border-color: #4a558a !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .create-assignment-modal .ant-divider {
    border-color: #2f3a66 !important;
}

/* Light mode counterpart — same selectors, lighter palette.
   Horizontal row borders only — no vertical column dividers. */
.surgery-table .ant-table-tbody > tr > td,
.cskh-table .ant-table-tbody > tr > td {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #e5e7eb;
}
.surgery-table .ant-table-thead > tr > th,
.cskh-table .ant-table-thead > tr > th {
    border-right: 0;
    border-left: 0;
}
.surgery-table .ant-table-thead,
.cskh-table .ant-table-thead {
    border-bottom: 2px solid #d1d5db;
}
.surgery-table .ant-table-tbody > tr:last-child > td,
.cskh-table .ant-table-tbody > tr:last-child > td {
    border-bottom: 1px solid #e5e7eb;
}
.surgery-table .ant-table,
.cskh-table .ant-table {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.surgery-table .ant-table-footer,
.surgery-table .ant-table-pagination,
.cskh-table .ant-table-footer,
.cskh-table .ant-table-pagination {
    border-top: 1px solid #e5e7eb;
}

/* ============================================================
   Customer revenues table (Blade) — match the bookings/customers
   clean look: navy header, left-aligned, no vertical grid lines,
   subtle row dividers.
   ============================================================ */
.customer-revenues-table.table-bordered > thead > tr > th,
.customer-revenues-table.table-bordered > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
}
.customer-revenues-table.table-bordered > tbody > tr > td {
    border-top: 0 !important;
    border-bottom: 1px solid #eef0f5 !important;
}
.customer-revenues-table > thead > tr > th {
    background: var(--color-primary, #0ea5e9) !important;
    color: #fff !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: none !important;
    box-shadow:
        0 1px 0 0 var(--color-primary, #0ea5e9),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
}
html[data-theme="dark"] .customer-revenues-table > thead > tr > th {
    background: #1b2747 !important;
    color: #f5f6fa !important;
    box-shadow:
        0 1px 0 0 #1b2747,
        inset 0 -1px 0 0 #2f3a66 !important;
}
html[data-theme="dark"] .customer-revenues-table.table-bordered > tbody > tr > td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Top horizontal scrollbar — global so Blade tables without a page
   stylesheet (e.g. customer-revenues) can use it too. */
.table-scroll-top {
    height: 14px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.table-scroll-top-spacer {
    height: 1px;
}
.table-scroll-top::-webkit-scrollbar {
    height: 10px;
    -webkit-appearance: none;
}
.table-scroll-top::-webkit-scrollbar-track {
    background: rgba(100, 116, 139, 0.12);
    border-radius: 5px;
}
.table-scroll-top::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.55);
    border-radius: 5px;
}
html[data-theme="dark"] .table-scroll-top::-webkit-scrollbar-track {
    background: rgba(37, 40, 64, 0.5);
}
html[data-theme="dark"] .table-scroll-top::-webkit-scrollbar-thumb {
    background-color: rgba(120, 134, 170, 0.8);
}

/* ============================================================
   Ratings table — match the clean look (navy header, left-aligned,
   no vertical grid lines, subtle row dividers).
   ============================================================ */
.ratings-table.table-bordered > thead > tr > th,
.ratings-table.table-bordered > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
}
.ratings-table.table-bordered > tbody > tr > td {
    border-top: 0 !important;
    border-bottom: 1px solid #eef0f5 !important;
}
.ratings-table > thead > tr > th {
    background: var(--color-primary, #4b5680) !important;
    color: #fff !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="dark"] .ratings-table > thead > tr > th {
    background: #1b2747 !important;
    color: #f5f6fa !important;
    border-bottom-color: #2f3a66 !important;
}
html[data-theme="dark"] .ratings-table.table-bordered > tbody > tr > td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}