/* ============================================================
   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: #14110E; }
@property --bg-card      { syntax: '<color>'; inherits: true; initial-value: #1E1915; }
@property --sand         { syntax: '<color>'; inherits: true; initial-value: #1E1915; }
@property --border-color { syntax: '<color>'; inherits: true; initial-value: #3A322B; }
@property --gold         { syntax: '<color>'; inherits: true; initial-value: #C8653F; }
@property --gold-hover   { syntax: '<color>'; inherits: true; initial-value: #DB7A52; }
@property --logo-gold    { syntax: '<color>'; inherits: true; initial-value: #D9774F; }
@property --burgundy     { syntax: '<color>'; inherits: true; initial-value: #7A2620; }
@property --olive        { syntax: '<color>'; inherits: true; initial-value: #9A9D7C; }
@property --text-main    { syntax: '<color>'; inherits: true; initial-value: #F3ECE0; }
@property --text-muted   { syntax: '<color>'; inherits: true; initial-value: #B8AA98; }
@property --nav-green    { syntax: '<color>'; inherits: true; initial-value: rgba(20,17,14,0.88); }
@property --c-surface    { syntax: '<color>'; inherits: true; initial-value: #1E1915; }
@property --c-soft       { syntax: '<color>'; inherits: true; initial-value: #1A1612; }
@property --c-sand       { syntax: '<color>'; inherits: true; initial-value: #262019; }
@property --c-line       { syntax: '<color>'; inherits: true; initial-value: #3A322B; }
@property --c-line-soft  { syntax: '<color>'; inherits: true; initial-value: #2A231D; }
@property --c-text       { syntax: '<color>'; inherits: true; initial-value: #F3ECE0; }
@property --c-muted      { syntax: '<color>'; inherits: true; initial-value: #B8AA98; }
@property --c-tint       { syntax: '<color>'; inherits: true; initial-value: #3A322B; }
@property --c-input      { syntax: '<color>'; inherits: true; initial-value: #1A1612; }
@property --c-placeholder{ syntax: '<color>'; inherits: true; initial-value: #8E8272; }
@property --c-nav-link   { syntax: '<color>'; inherits: true; initial-value: #CFC3B2; }
@property --c-nav-active { syntax: '<color>'; inherits: true; initial-value: #E08A62; }
@property --c-nav-line   { syntax: '<color>'; inherits: true; initial-value: rgba(243,236,224,0.08); }
@property --c-footer     { syntax: '<color>'; inherits: true; initial-value: #0F0D0B; }
@property --c-footer-text{ syntax: '<color>'; inherits: true; initial-value: #E6DCCD; }
@property --c-footer-dim { syntax: '<color>'; inherits: true; initial-value: #8E8272; }
@property --c-box        { syntax: '<color>'; inherits: true; initial-value: #1A1612; }
@property --c-opt        { syntax: '<color>'; inherits: true; initial-value: #CFC3B2; }

/* ---- BỘ MÀU TỐI (mặc định) ---- */
body {
    --bg-dark: #14110E;  --bg-card: #1E1915;  --sand: #1E1915;  --border-color: #3A322B;
    --gold: #C8653F;  --gold-hover: #DB7A52;  --logo-gold: #D9774F;  --burgundy: #7A2620;  --olive: #9A9D7C;
    --text-main: #F3ECE0;  --text-muted: #B8AA98;  --nav-green: rgba(20,17,14,0.88);
    --c-surface: #1E1915;  --c-soft: #1A1612;  --c-sand: #262019;  --c-line: #3A322B;  --c-line-soft: #2A231D;
    --c-text: #F3ECE0;  --c-muted: #B8AA98;  --c-tint: #3A322B;
    --c-input: #1A1612;  --c-placeholder: #8E8272;
    --c-nav-link: #CFC3B2;  --c-nav-active: #E08A62;  --c-nav-line: rgba(243,236,224,0.08);
    --c-footer: #0F0D0B;  --c-footer-text: #E6DCCD;  --c-footer-dim: #8E8272;
    --c-box: #1A1612;  --c-opt: #CFC3B2;
}

/* ---- BỘ MÀU SÁNG (trang Đặt lịch) — đúng màu kem như trước ---- */
body.theme-light {
    --bg-dark: #F5EFE2;  --bg-card: #FFFDF7;  --sand: #E6D7BC;  --border-color: #E6D7BC;
    --gold: #B84A2B;  --gold-hover: #9C3B20;  --logo-gold: #B84A2B;  --burgundy: #681F1B;  --olive: #686B4D;
    --text-main: #171513;  --text-muted: #4A3429;  --nav-green: rgba(255,253,247,0.96);
    --c-surface: #FFFDF7;  --c-soft: #F5EFE2;  --c-sand: #E6D7BC;  --c-line: #E6D7BC;  --c-line-soft: #FFFDF7;
    --c-text: #171513;  --c-muted: #4A3429;  --c-tint: #E6D7BC;
    --c-input: #FFFDF7;  --c-placeholder: #9A8A7A;
    --c-nav-link: #4A3429;  --c-nav-active: #B84A2B;  --c-nav-line: rgba(184,74,43,0.15);
    --c-footer: #FFFDF7;  --c-footer-text: #171513;  --c-footer-dim: #4A3429;
    --c-box: rgba(230,215,188,0.5);  --c-opt: rgba(74,52,41,0.7);
}

/* ---- 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: dark;
}
body.theme-light { color-scheme: light; }
html { background-color: #14110E; }
@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: #F5EFE2; --bg-card: #FFFDF7; --sand: #E6D7BC; --border-color: #E6D7BC;
    --gold: #B84A2B; --logo-gold: #B84A2B; --burgundy: #681F1B;
    --text-main: #171513; --text-muted: #4A3429;
    --c-surface: #FFFDF7; --c-soft: #F5EFE2; --c-sand: #E6D7BC; --c-line: #E6D7BC; --c-line-soft: #FFFDF7;
    --c-text: #171513; --c-muted: #4A3429; --c-tint: #E6D7BC; --c-input: #FFFDF7;
    color-scheme: light;
    color: #171513;
}