/* ============================================================
   DARK-THEME.CSS — Giao diện tối điện ảnh cho trang khách (index.html)
   - Mặc định: nền tối. Trang Đặt lịch: body.theme-light -> màu kem như cũ (script.js globalSwitchPage)
   - Đổi giữa 2 bộ màu: mọi màu là biến được đăng ký @property -> trình duyệt pha màu từ từ
     (--theme-fade bên dưới). Trang vẫn bấm / gõ được trong lúc màu đang chuyển.
   - Trang Quản trị (admin.html) không nạp file này -> vẫn nền sáng.
   - Màu đặt cứng trong code đã đổi thành biến --c-* (tools/tokenize-colors.py).
   ============================================================ */

/* ---- đăng ký biến màu để chuyển động được ---- */
@property --bg-dark      { syntax: '<color>'; inherits: true; initial-value: #101A16; }
@property --bg-card      { syntax: '<color>'; inherits: true; initial-value: #1B2922; }
@property --sand         { syntax: '<color>'; inherits: true; initial-value: #1B2922; }
@property --border-color { syntax: '<color>'; inherits: true; initial-value: #3D4940; }
@property --gold         { syntax: '<color>'; inherits: true; initial-value: #DCC38D; }
@property --gold-hover   { syntax: '<color>'; inherits: true; initial-value: #EAD8AF; }
@property --logo-gold    { syntax: '<color>'; inherits: true; initial-value: #E2CC9E; }
@property --burgundy     { syntax: '<color>'; inherits: true; initial-value: #741B38; }
@property --olive        { syntax: '<color>'; inherits: true; initial-value: #A5AF91; }
@property --text-main    { syntax: '<color>'; inherits: true; initial-value: #F5EFDF; }
@property --text-muted   { syntax: '<color>'; inherits: true; initial-value: #C1C6B8; }
@property --nav-green    { syntax: '<color>'; inherits: true; initial-value: rgba(16,26,22,0.94); }
@property --c-surface    { syntax: '<color>'; inherits: true; initial-value: #1B2922; }
@property --c-soft       { syntax: '<color>'; inherits: true; initial-value: #16221C; }
@property --c-sand       { syntax: '<color>'; inherits: true; initial-value: #24362B; }
@property --c-line       { syntax: '<color>'; inherits: true; initial-value: #3D4940; }
@property --c-line-soft  { syntax: '<color>'; inherits: true; initial-value: #2C3C31; }
@property --c-text       { syntax: '<color>'; inherits: true; initial-value: #F5EFDF; }
@property --c-muted      { syntax: '<color>'; inherits: true; initial-value: #C1C6B8; }
@property --c-tint       { syntax: '<color>'; inherits: true; initial-value: #3D4940; }
@property --c-input      { syntax: '<color>'; inherits: true; initial-value: #16221C; }
@property --c-placeholder{ syntax: '<color>'; inherits: true; initial-value: #9AA590; }
@property --c-nav-link   { syntax: '<color>'; inherits: true; initial-value: #D6D9CA; }
@property --c-nav-active { syntax: '<color>'; inherits: true; initial-value: #E2CC9E; }
@property --c-nav-line   { syntax: '<color>'; inherits: true; initial-value: rgba(226,204,158,0.16); }
@property --c-footer     { syntax: '<color>'; inherits: true; initial-value: #0C1510; }
@property --c-footer-text{ syntax: '<color>'; inherits: true; initial-value: #E6E8D9; }
@property --c-footer-dim { syntax: '<color>'; inherits: true; initial-value: #9AA590; }
@property --c-box        { syntax: '<color>'; inherits: true; initial-value: #16221C; }
@property --c-opt        { syntax: '<color>'; inherits: true; initial-value: #D6D9CA; }

/* ---- BẢNG MÀU XANH TRỜI (mặc định) ---- */
body {
    --bg-dark: #F3FAFD;
    --bg-card: #FFFFFF;
    --sand: #EDF3DF;
    --border-color: #C4DFE9;
    --gold: #237B96;
    --gold-hover: #185D75;
    --logo-gold: #237B96;
    --burgundy: #456A42;
    --olive: #557A43;
    --meadow: #EDF3DF;
    --sunlight: #F6E5AB;
    --sunlight-soft: #FFF9E9;
    --text-main: #203F4C;
    --text-muted: #526E79;
    --nav-green: rgba(255,255,255,0.95);
    --c-surface: #FFFFFF;
    --c-soft: #EFF8FC;
    --c-sand: #EDF3DF;
    --c-line: #C4DFE9;
    --c-line-soft: #E5F1F5;
    --c-text: #203F4C;
    --c-muted: #526E79;
    --c-tint: #B9E2EE;
    --c-input: #FFFFFF;
    --c-placeholder: #647F8A;
    --c-nav-link: #3C6475;
    --c-nav-active: #237B96;
    --c-nav-line: #C4DFE9;
    --c-footer: #E9F0DF;
    --c-footer-text: #203F4C;
    --c-footer-dim: #526E79;
    --c-box: #EFF8FC;
    --c-opt: #3C6475;
}

/* ---- BẢNG MÀU TRANG ĐẶT LỊCH ---- */
body.theme-light {
    --bg-dark: #F3FAFD;
    --bg-card: #FFFFFF;
    --sand: #EDF3DF;
    --border-color: #C4DFE9;
    --gold: #237B96;
    --gold-hover: #185D75;
    --logo-gold: #237B96;
    --burgundy: #456A42;
    --olive: #557A43;
    --meadow: #EDF3DF;
    --sunlight: #F6E5AB;
    --sunlight-soft: #FFF9E9;
    --text-main: #203F4C;
    --text-muted: #526E79;
    --nav-green: rgba(255,255,255,0.95);
    --c-surface: #FFFFFF;
    --c-soft: #EFF8FC;
    --c-sand: #EDF3DF;
    --c-line: #C4DFE9;
    --c-line-soft: #E5F1F5;
    --c-text: #203F4C;
    --c-muted: #526E79;
    --c-tint: #B9E2EE;
    --c-input: #FFFFFF;
    --c-placeholder: #647F8A;
    --c-nav-link: #3C6475;
    --c-nav-active: #237B96;
    --c-nav-line: #C4DFE9;
    --c-footer: #E9F0DF;
    --c-footer-text: #203F4C;
    --c-footer-dim: #526E79;
    --c-box: #EFF8FC;
    --c-opt: #3C6475;
}

/* ---- CHUYỂN MÀU CHẬM RÃI giữa 2 bộ màu ---- */
body {
    --theme-fade: 2.8s cubic-bezier(0.45, 0, 0.2, 1);
    transition:
        --bg-dark var(--theme-fade), --bg-card var(--theme-fade), --sand var(--theme-fade), --border-color var(--theme-fade),
        --gold var(--theme-fade), --gold-hover var(--theme-fade), --logo-gold var(--theme-fade), --burgundy var(--theme-fade),
        --olive var(--theme-fade), --text-main var(--theme-fade), --text-muted var(--theme-fade), --nav-green var(--theme-fade),
        --c-surface var(--theme-fade), --c-soft var(--theme-fade), --c-sand var(--theme-fade), --c-line var(--theme-fade),
        --c-line-soft var(--theme-fade), --c-text var(--theme-fade), --c-muted var(--theme-fade), --c-tint var(--theme-fade),
        --c-input var(--theme-fade), --c-placeholder var(--theme-fade), --c-nav-link var(--theme-fade), --c-nav-active var(--theme-fade),
        --c-nav-line var(--theme-fade), --c-footer var(--theme-fade), --c-footer-text var(--theme-fade), --c-footer-dim var(--theme-fade),
        --c-box var(--theme-fade), --c-opt var(--theme-fade);
    background-color: var(--bg-dark);
    color: var(--text-main);
    color-scheme: light;
}
body.theme-light { color-scheme: light; }
html { background-color: #F3FAFD; }
@media (prefers-reduced-motion: reduce) { body { --theme-fade: 0.01s linear; } }

/* ---------- Thanh menu ---------- */
.main-navbar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--c-nav-line); }
.nav-links a { color: var(--c-nav-link); }
.nav-links a:hover, .nav-links a.active { color: var(--c-nav-active); }
.nav-hamburger { color: var(--text-main); border-color: var(--c-line); background: transparent; }
.nav-user-name { color: var(--text-main); }
.user-dropdown-menu { background: var(--bg-card); border-color: var(--c-line); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.user-dropdown-menu a { color: var(--c-footer-text); }
.user-dropdown-menu a:hover { background: var(--c-sand); }
.dropdown-divider { background: var(--c-line); }

/* ---------- Ô nhập liệu ---------- */
input, select, textarea { background-color: var(--c-input); color: var(--text-main); border-color: var(--c-line); }
input::placeholder, textarea::placeholder { color: var(--c-placeholder); }
option { background: var(--bg-card); color: var(--text-main); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }

/* ---------- Chân trang ---------- */
.main-footer { background-color: var(--c-footer); border-top-color: var(--c-nav-line); }
.footer-contact-item { color: var(--c-footer-text); }
.footer-bottom { color: var(--c-footer-dim); }
.footer-container { border-bottom-color: var(--c-nav-line); }

/* ---------- Sửa riêng từng chỗ ---------- */
.outfits-form-box { background-color: var(--c-box) !important; }
.process-tracker-container { background-color: var(--c-box); }
.badge { background-color: color-mix(in srgb, var(--bg-dark) 82%, transparent); }
.survey-opt { color: var(--c-opt); }
.survey-opt i, .survey-opt svg { color: var(--text-muted); fill: var(--text-muted); }
.survey-opt:hover { color: var(--text-main); }

/* ---------- Hoá đơn / giấy tờ xuất ảnh: luôn nền giấy sáng ---------- */
.invoice-container {
    --bg-dark: #F3FAFD; --bg-card: #FFFFFF; --sand: #C4DFE9; --border-color: #C4DFE9;
    --gold: #237B96; --logo-gold: #237B96; --burgundy: #237B96;
    --text-main: #203F4C; --text-muted: #526E79;
    --c-surface: #FFFFFF; --c-soft: #F3FAFD; --c-sand: #C4DFE9; --c-line: #C4DFE9; --c-line-soft: #FFFFFF;
    --c-text: #203F4C; --c-muted: #526E79; --c-tint: #C4DFE9; --c-input: #FFFFFF;
    color-scheme: light;
    color: #203F4C;
}