:root,
html[data-theme="light"],
html[data-bs-theme="light"],
body.theme-light{
    color-scheme: light;
    --bg:#f3f6fb;
    --bg-soft:#ffffff;
    --bg-elevated:#ffffff;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --surface-3:#eef4ff;
    --text:#0f172a;
    --muted-text:#5b6b81;
    --heading:#0b1220;
    --border:rgba(148,163,184,.24);
    --primary:#2563eb;
    --primary-2:#1d4ed8;
    --success:#059669;
    --warning:#d97706;
    --danger:#dc2626;
    --info:#0284c7;
    --shadow:0 18px 40px rgba(15,23,42,.08);
    --shadow-sm:0 10px 24px rgba(15,23,42,.06);
    --chart-grid:rgba(148,163,184,.18);
    --auth-start:#fff5ee;
    --auth-mid:#f8eefb;
    --auth-end:#eef8ff;
    --topbar-bg:linear-gradient(135deg,#0f172a 0%, #1d4ed8 100%);
    --sidebar-bg:#0f172a;
    --sidebar-text:#cbd5e1;
    --sidebar-active:#ffffff;
    --sidebar-active-bg:rgba(255,255,255,.12);
    --station-bg:#edf3fb;
    --kds-bg:#edf2f8;
    --cash-bg:#eef8f2;
    --panel-overlay:rgba(255,255,255,.72);
    --tooltip-bg:#172030;
    --tooltip-text:#ffffff;
    --theme-toggle-bg:rgba(255,255,255,.12);
    --theme-toggle-border:rgba(255,255,255,.18);
    --theme-toggle-color:#ffffff;

    --bs-body-bg:var(--bg);
    --bs-body-color:var(--text);
    --bs-secondary-color:var(--muted-text);
    --bs-secondary-bg:var(--surface-2);
    --bs-tertiary-bg:var(--surface-3);
    --bs-border-color:var(--border);
    --bs-card-bg:var(--surface);
    --bs-card-cap-bg:var(--surface-2);
    --bs-emphasis-color:var(--heading);
    --bs-light-rgb:248,250,252;
    --bs-dark-rgb:15,23,42;
    --bs-link-color:var(--primary);
    --bs-link-hover-color:var(--primary-2);
}
html[data-theme="dark"],
html[data-bs-theme="dark"],
body.theme-dark{
    color-scheme: dark;
    --bg:#06111c;
    --bg-soft:#0b1625;
    --bg-elevated:#0e1b2d;
    --surface:#0f1b2d;
    --surface-2:#132238;
    --surface-3:#182a44;
    --text:#e8eef7;
    --muted-text:#a4b2c5;
    --heading:#f8fbff;
    --border:rgba(148,163,184,.20);
    --primary:#60a5fa;
    --primary-2:#93c5fd;
    --success:#34d399;
    --warning:#fbbf24;
    --danger:#fb7185;
    --info:#38bdf8;
    --shadow:0 18px 40px rgba(0,0,0,.34);
    --shadow-sm:0 10px 24px rgba(0,0,0,.26);
    --chart-grid:rgba(148,163,184,.14);
    --auth-start:#07111d;
    --auth-mid:#0a1628;
    --auth-end:#0e1d35;
    --topbar-bg:linear-gradient(135deg,#020617 0%, #1e3a8a 100%);
    --sidebar-bg:#020617;
    --sidebar-text:#a9b8ca;
    --sidebar-active:#ffffff;
    --sidebar-active-bg:rgba(96,165,250,.16);
    --station-bg:#081321;
    --kds-bg:#020617;
    --cash-bg:#08161f;
    --panel-overlay:rgba(7,17,29,.72);
    --tooltip-bg:#f8fbff;
    --tooltip-text:#0f172a;
    --theme-toggle-bg:rgba(15,23,42,.46);
    --theme-toggle-border:rgba(255,255,255,.14);
    --theme-toggle-color:#f8fbff;

    --bs-body-bg:var(--bg);
    --bs-body-color:var(--text);
    --bs-secondary-color:var(--muted-text);
    --bs-secondary-bg:var(--surface-2);
    --bs-tertiary-bg:var(--surface-3);
    --bs-border-color:var(--border);
    --bs-card-bg:var(--surface);
    --bs-card-cap-bg:var(--surface-2);
    --bs-emphasis-color:var(--heading);
    --bs-light-rgb:248,250,252;
    --bs-dark-rgb:2,6,23;
    --bs-link-color:var(--primary);
    --bs-link-hover-color:var(--primary-2);
}
html, body{min-height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--heading)}
a{color:var(--primary)}
.text-muted,.text-secondary{color:var(--muted-text)!important}
.card,.surface-card,.dashboard-stat-card,.auth-card,.mesa-visual,.product-card,.order-panel,.kds-card,.ops-tile,.alert-tile{
    border-radius:1.35rem;
}
.card,
.table,
.dropdown-menu,
.modal-content,
.offcanvas,
.list-group-item,
.accordion-item{
    background-color:var(--surface);
    color:var(--text);
    border-color:var(--border);
}
.table > :not(caption) > * > * {vertical-align: middle; background-color: transparent; color: inherit; border-bottom-color: var(--border)}
.table thead th{color:var(--heading); background:var(--surface-2)}
.table-hover tbody tr:hover > *{background-color:var(--surface-2)}
.modal-header,.modal-footer,.offcanvas-header,.offcanvas-body,.accordion-button,.accordion-body,.list-group-item,.dropdown-item{
    border-color:var(--border);
}
.dropdown-menu,.offcanvas,.modal-content{
    box-shadow:var(--shadow);
}
.dropdown-item{color:var(--text)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2); color:var(--heading)}
.form-control,.form-select,.btn{border-radius:1rem}
.form-control,
.form-select,
.input-group-text,
.accordion-button{
    background-color:var(--surface-2);
    color:var(--text);
    border-color:var(--border);
}
.form-control::placeholder{color:var(--muted-text)}
.form-control:focus,
.form-select:focus{
    border-color:color-mix(in srgb, var(--primary) 42%, var(--border));
    box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 16%, transparent);
    background:var(--surface);
    color:var(--text);
}
.form-control-modern{
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    min-height:3rem;
}
.form-control-modern:focus{
    border-color:color-mix(in srgb, var(--primary) 42%, var(--border));
    box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 16%, transparent);
    background:var(--surface);
    color:var(--text);
}
.form-check-input{background-color:var(--surface); border-color:var(--border)}
.form-check-input:checked{background-color:var(--primary); border-color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--primary-2);border-color:var(--primary-2)}
.btn-outline-secondary{
    color:var(--muted-text);
    border-color:var(--border);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
    background:var(--surface-2);
    color:var(--heading);
    border-color:var(--border);
}
.badge.text-bg-light{
    background:var(--surface-2)!important;
    color:var(--heading)!important;
}
.alert{
    border-radius:1rem;
    border-color:var(--border);
}
.btn-theme-toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border:1px solid var(--theme-toggle-border);
    color:var(--theme-toggle-color);
    background:var(--theme-toggle-bg);
    border-radius:999px;
    padding:.55rem .9rem;
    line-height:1;
    transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-theme-toggle:hover{
    background:color-mix(in srgb, var(--theme-toggle-bg) 72%, white 12%);
    color:var(--theme-toggle-color);
    border-color:color-mix(in srgb, var(--theme-toggle-border) 70%, white 20%);
    transform:translateY(-1px);
}
.btn-theme-toggle:focus-visible{
    outline:0;
    box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 22%, transparent);
}
.theme-icon-light{display:none}
html[data-theme="dark"] .theme-icon-light{display:inline-block}
html[data-theme="dark"] .theme-icon-dark{display:none}
.theme-toggle-label{font-weight:700; font-size:.9rem}
.topbar-user-chip{
    border:1px solid rgba(255,255,255,.08);
}

.topbar-logout.btn-light{
    background:rgba(255,255,255,.96);
    border-color:rgba(255,255,255,.96);
    color:#0f172a;
}
.topbar-logout.btn-light:hover{
    background:#ffffff;
    border-color:#ffffff;
    color:#020617;
}
.station-topbar .btn-outline-light{
    border-color:rgba(255,255,255,.32);
    color:#fff;
}
.station-topbar .btn-outline-light:hover{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.4);
    color:#fff;
}
.nav-tabs .nav-link{
    color:var(--muted-text);
    border-color:transparent;
}
.nav-tabs .nav-link:hover{border-color:transparent; color:var(--heading)}
.nav-tabs .nav-link.active{
    color:var(--heading);
    background:var(--surface);
    border-color:var(--border) var(--border) var(--surface);
}
.pagination{
    --bs-pagination-bg:var(--surface);
    --bs-pagination-color:var(--text);
    --bs-pagination-border-color:var(--border);
    --bs-pagination-hover-bg:var(--surface-2);
    --bs-pagination-hover-color:var(--heading);
    --bs-pagination-hover-border-color:var(--border);
    --bs-pagination-active-bg:var(--primary);
    --bs-pagination-active-border-color:var(--primary);
}
.tooltip .tooltip-inner{
    background:var(--tooltip-bg);
    color:var(--tooltip-text);
    box-shadow:var(--shadow-sm);
}
.toast{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
}
.toast .btn-close{filter:var(--toast-close-filter, none)}
html[data-theme="dark"],
html[data-bs-theme="dark"],
body.theme-dark{--toast-close-filter:invert(1)}
/* RESPONSIVE */
@media (max-width:1199.98px){
    .admin-app{grid-template-columns:1fr}
    .admin-main{padding:1rem}
    .mesero-order-shell{grid-template-columns:1fr}
    .order-panel{position:fixed;right:1rem;bottom:1rem;top:auto;left:auto;width:min(94vw,420px);max-height:78vh;z-index:1045}
    .order-panel .order-items{max-height:38vh}
    body.order-panel-collapsed .order-panel{transform:translateY(calc(100% - 72px))}
    .ai-placeholder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991.98px){
    .mesa-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
    .mesa-visual{min-height:205px}
    .mesa-visual__image{width:102px;height:102px}
    .product-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
    .product-image{height:132px}
    .alert-stack{grid-template-columns:1fr 1fr}
}
@media (max-width:767.98px){
    .alert-stack{grid-template-columns:1fr}
    .ops-grid,.ai-placeholder-grid{grid-template-columns:1fr}
}


/* Theme mode hardening */
html[data-theme="light"] .theme-icon-dark,
body[data-theme="light"] .theme-icon-dark,
.theme-light .theme-icon-dark{display:inline-block}
html[data-theme="light"] .theme-icon-light,
body[data-theme="light"] .theme-icon-light,
.theme-light .theme-icon-light{display:none}

html[data-theme="dark"] .theme-icon-dark,
body[data-theme="dark"] .theme-icon-dark,
.theme-dark .theme-icon-dark{display:none}
html[data-theme="dark"] .theme-icon-light,
body[data-theme="dark"] .theme-icon-light,
.theme-dark .theme-icon-light{display:inline-block}

html[data-theme="dark"] body,
body[data-theme="dark"]{
    background:var(--bg);
    color:var(--text);
}

.btn-secondary,
.btn-light,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info{
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

html[data-theme="dark"] .btn-light,
body[data-theme="dark"] .btn-light{
    --bs-btn-color: var(--heading);
    --bs-btn-bg: var(--surface-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--heading);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--heading);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--border);
}

html[data-theme="dark"] .btn-outline-light,
body[data-theme="dark"] .btn-outline-light{
    --bs-btn-color:#f8fbff;
    --bs-btn-border-color:rgba(255,255,255,.32);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:rgba(255,255,255,.12);
    --bs-btn-hover-border-color:rgba(255,255,255,.4);
}

html[data-theme="dark"] .text-dark,
body[data-theme="dark"] .text-dark{color:var(--heading)!important}
html[data-theme="dark"] .bg-light,
body[data-theme="dark"] .bg-light{background-color:var(--surface-2)!important;color:var(--text)!important}
html[data-theme="dark"] .border,
body[data-theme="dark"] .border{border-color:var(--border)!important}

html[data-theme="dark"] .navbar,
body[data-theme="dark"] .navbar{color:var(--heading)}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
body[data-theme="dark"] .card-header,
body[data-theme="dark"] .card-footer{
    background-color:var(--surface-2);
    border-color:var(--border);
}


html.theme-light body,
body.theme-light{
    background-color: var(--bg);
    color: var(--text);
}

html.theme-dark body,
body.theme-dark{
    background-color: var(--bg);
    color: var(--text);
}

html[data-theme="light"] .btn-theme-toggle .theme-icon-dark,
html[data-bs-theme="light"] .btn-theme-toggle .theme-icon-dark,
body.theme-light .btn-theme-toggle .theme-icon-dark{
    display:inline-block;
}
html[data-theme="light"] .btn-theme-toggle .theme-icon-light,
html[data-bs-theme="light"] .btn-theme-toggle .theme-icon-light,
body.theme-light .btn-theme-toggle .theme-icon-light{
    display:none;
}
html[data-theme="dark"] .btn-theme-toggle .theme-icon-light,
html[data-bs-theme="dark"] .btn-theme-toggle .theme-icon-light,
body.theme-dark .btn-theme-toggle .theme-icon-light{
    display:inline-block;
}
html[data-theme="dark"] .btn-theme-toggle .theme-icon-dark,
html[data-bs-theme="dark"] .btn-theme-toggle .theme-icon-dark,
body.theme-dark .btn-theme-toggle .theme-icon-dark{
    display:none;
}

html[data-theme="light"] .btn,
html[data-bs-theme="light"] .btn,
body.theme-light .btn{
    --bs-btn-color: var(--text);
}
html[data-theme="dark"] .btn,
html[data-bs-theme="dark"] .btn,
body.theme-dark .btn{
    --bs-btn-color: var(--text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .table,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .offcanvas,
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text,
body.theme-dark .table,
body.theme-dark .dropdown-menu,
body.theme-dark .modal-content,
body.theme-dark .offcanvas{
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-dark,
body.theme-dark .text-dark{
    color: var(--text) !important;
}

html[data-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-white,
body.theme-dark .bg-white{
    background-color: var(--surface) !important;
}

html[data-theme="dark"] .navbar,
html[data-bs-theme="dark"] .navbar,
body.theme-dark .navbar{
    color: #fff;
}