/* ============================================================
   The Gent Clinic — Apple Dark Theme
   ธีมมืดสไตล์ Apple (macOS dark) ครอบทั้งระบบด้วยไฟล์เดียว
   โหลดหลัง <style> เดิมของแต่ละหน้า จึงกดทับสไตล์เก่าได้
   ใช้ !important เฉพาะจุดที่ต้องกดทับ inline style ของเดิม
   ยกเลิกธีม = ลบ <link> ที่อ้างไฟล์นี้ออกจากเทมเพลต
   ============================================================ */

:root {
    color-scheme: dark;                    /* ทำให้ date picker / scrollbar / native control เป็นโทนมืด */

    --bg:          #0d0d0f;                 /* พื้นหลังหลัก */
    --bg-elev:     #1c1c1e;                 /* การ์ด / แผง */
    --bg-elev-2:   #2c2c2e;                 /* input / แถวที่ยกขึ้นมา */
    --bg-elev-3:   #3a3a3c;                 /* hover */
    --border:      rgba(255,255,255,0.10);
    --border-soft: rgba(255,255,255,0.06);

    --text:        #f5f5f7;                 /* ข้อความหลัก (off-white แบบ Apple) */
    --text-2:      rgba(235,235,245,0.62);  /* ข้อความรอง */
    --text-3:      rgba(235,235,245,0.34);  /* ข้อความจาง/placeholder */

    --gold:        #d8b968;                 /* accent หลัก (แบรนด์ทอง ปรับให้สว่างพอบนพื้นมืด) */
    --gold-solid:  #c9a84c;                 /* ทองสำหรับพื้นปุ่ม */
    --maroon:      #8d1b41;                 /* เลือดหมู ใช้เป็น accent รอง */

    --green: #30d158;  --red: #ff453a;  --blue: #0a84ff;  --orange: #ff9f0a;

    --radius:   16px;
    --radius-sm: 10px;
    --shadow:   0 8px 30px rgba(0,0,0,0.45);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Helvetica Neue", "Inter", "Segoe UI", "Sarabun", sans-serif;
}

/* ---------- Base ---------- */
html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { letter-spacing: 0.1px; }

::selection { background: var(--gold); color: #1a1a1a; }

/* Webkit scrollbar โทนมืด */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4c; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Sidebar ---------- */
.sidebar {
    background: linear-gradient(180deg, #17151a 0%, #0e0d10 100%) !important;
    border-right: 1px solid var(--border) !important;
}
.logo { border-bottom: 1px solid var(--border) !important; }
/* โลโก้พื้นดำ (logo-new.png) — ใช้ screen blend ให้พื้นดำกลืนหายไปกับพื้นมืด เหลือแต่ตัวอักษร/สัญลักษณ์ */
.logo img { mix-blend-mode: screen; }
.nav a { color: var(--text-2) !important; border-radius: 0; transition: all .2s ease; }
.nav a:hover { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }
.nav a.active {
    background: rgba(216,185,104,0.14) !important;
    color: var(--gold) !important;
    border-left: 3px solid var(--gold) !important;
}
.sidebar .logo p,
.sidebar [style*="color:#fff"], .sidebar [style*="color: #fff"] { color: var(--text) !important; }

/* ---------- Main / headings ---------- */
.main { background: transparent !important; }
.topbar h2, h1, h2, h3, h4 { color: var(--text) !important; }

/* ---------- Surfaces: cards / sections / modals / ฯลฯ ---------- */
.card, .section, .modal, .stat-card, .box, .panel, .tile,
.inst-item, .queue-item {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text) !important;
}
.card .label, .card .sub, .card .subtitle { color: var(--text-2) !important; }

/* หัวข้อ + ตัวเลข/ค่าที่ตั้งสีเลือดหมู (#6B1232) ผ่าน class rule — บนพื้นมืดอ่านไม่ออก → ทำให้สว่าง
   (สีเชิงความหมาย เขียว/แดง/น้ำเงิน/ทอง ไม่แตะ ปล่อยไว้ตามเดิม) */
.section h3, .modal h3, .card h3,
.card .value, .appt-time, .amt, .rate-pill .amt, .vital-box .val,
.clinic-name, .section-title, .inst-name, .staff-card .name,
.topbar h2 { color: var(--text) !important; }
.section-title { border-left-color: var(--gold) !important; }

/* กดทับพื้นสีอ่อนที่ฝังแบบ inline (white / เทาอ่อน) ให้เป็นพื้นมืด */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:#ffffff"], [style*="background: #ffffff"],
[style*="background:white"], [style*="background: white"] {
    background: var(--bg-elev) !important;
}
[style*="background:#f0f2f5"], [style*="background: #f0f2f5"],
[style*="background:#f8f9fa"], [style*="background: #f8f9fa"],
[style*="background:#fafafa"], [style*="background: #fafafa"],
[style*="background:#f5f5f5"], [style*="background: #f5f5f5"],
[style*="background:#f0f0f0"], [style*="background: #f0f0f0"],
[style*="background:#f1f3f4"], [style*="background: #f1f3f4"] {
    background: var(--bg-elev-2) !important;
}

/* กดทับสีข้อความเข้ม (บนพื้นมืดจะอ่านไม่ออก) ให้สว่าง */
[style*="color:#333"], [style*="color: #333"],
[style*="color:#444"], [style*="color: #444"],
[style*="color:#555"], [style*="color: #555"] { color: var(--text) !important; }
[style*="color:#666"], [style*="color: #666"],
[style*="color:#777"], [style*="color: #777"],
[style*="color:#888"], [style*="color: #888"],
[style*="color:#999"], [style*="color: #999"],
[style*="color:#aaa"], [style*="color: #aaa"] { color: var(--text-2) !important; }

/* หัวข้อ/ข้อความสีแบรนด์เลือดหมู → ทอง (บนพื้นมืดอ่านชัดกว่า) */
[style*="color:#6B1232"], [style*="color: #6B1232"],
[style*="color:#6b1232"], [style*="color: #6b1232"] { color: var(--gold) !important; }

/* ---------- Inputs ---------- */
input, select, textarea {
    background: var(--bg-elev-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-3) !important; }
input:focus, select:focus, textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(216,185,104,0.25) !important;
    outline: none !important;
}
input[readonly], textarea[readonly] { background: #232325 !important; color: var(--text-2) !important; }
option { background: var(--bg-elev-2); color: var(--text); }
label { color: var(--text-2) !important; }

/* ---------- Tables ---------- */
table { color: var(--text) !important; }
th {
    background: #232325 !important;
    color: var(--text-2) !important;
    border-bottom: 1px solid var(--border) !important;
}
td { border-bottom: 1px solid var(--border-soft) !important; color: var(--text) !important; }
tr:hover td { background: rgba(255,255,255,0.04) !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 980px !important; transition: all .2s ease; font-weight: 600; }
.btn-gold, .btn-primary {
    background: var(--gold-solid) !important;
    color: #1a1510 !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(201,168,76,0.25);
}
.btn-gold:hover, .btn-primary:hover { background: var(--gold) !important; }
.btn-outline {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.btn-outline:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(216,185,104,0.10) !important; }

/* ปุ่มบน topbar ที่ตั้งพื้นเทาอ่อน inline */
.topbar .btn[style*="#f0f2f5"], .btn[style*="background:#f0f2f5"], .btn[style*="background: #f0f2f5"] {
    background: rgba(255,255,255,0.06) !important; color: var(--text) !important;
}

/* ---------- Period tabs ---------- */
.period-tab { background: var(--bg-elev) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; }
.period-tab.active { background: rgba(216,185,104,0.14) !important; color: var(--gold) !important; border-color: var(--gold) !important; }

/* ---------- Modals ---------- */
.modal-overlay { background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal { border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; }

/* ---------- Semantic tint chips (เขียว/แดง/น้ำเงิน/ส้ม/ทอง) ---------- */
/* เขียว */
[style*="background:#e6f4ea"], [style*="background: #e6f4ea"],
.badge.cash, .badge.confirmed, .btn-green, .alert-success, .diff-ok,
.pill.ok { background: rgba(48,209,88,0.16) !important; color: var(--green) !important; }
[style*="color:#2e7d32"], [style*="color: #2e7d32"], .status-on { color: var(--green) !important; }
/* แดง */
[style*="background:#fce8e6"], [style*="background: #fce8e6"],
.badge.credit, .alert-error, .role-admin, .btn-red, .diff-short,
.pill.short { background: rgba(255,69,58,0.16) !important; color: var(--red) !important; }
[style*="color:#c62828"], [style*="color: #c62828"],
[style*="color:#b71c1c"], [style*="color: #b71c1c"] { color: var(--red) !important; }
/* น้ำเงิน */
[style*="background:#e8f0fe"], [style*="background: #e8f0fe"],
.badge.transfer, .btn-blue, .role-staff, .diff-over,
.pill.over { background: rgba(10,132,255,0.16) !important; color: var(--blue) !important; }
[style*="color:#1967d2"], [style*="color: #1967d2"],
[style*="color:#1565c0"], [style*="color: #1565c0"] { color: var(--blue) !important; }
/* ส้ม */
[style*="background:#fff3e0"], [style*="background: #fff3e0"],
.badge.installment, .badge.pending, .role-manager { background: rgba(255,159,10,0.16) !important; color: var(--orange) !important; }
[style*="color:#e65100"], [style*="color: #e65100"],
[style*="color:#ef6c00"], [style*="color: #ef6c00"] { color: var(--orange) !important; }
/* เทา (badge done) */
.badge.done { background: rgba(235,235,245,0.12) !important; color: var(--text-2) !important; }
/* ทอง (tint) */
[style*="background:#fef9e7"], [style*="background: #fef9e7"] { background: rgba(216,185,104,0.14) !important; color: var(--gold) !important; }
[style*="color:#8a6d00"], [style*="color: #8a6d00"] { color: var(--gold) !important; }

/* แถบ "เงินสดที่ควรมี" ในหน้าปิดยอด (class rule สีเลือดหมู) → ทอง */
.calc-row.expected .lbl, .calc-row.expected .val { color: var(--gold) !important; }
.calc-row.expected { border-top-color: var(--gold) !important; }

/* พื้นทอง/เลือดหมูทึบที่ฝัง inline — คงไว้เป็น accent แต่ปรับข้อความให้อ่านออก */
[style*="background:#c9a84c"], [style*="background: #c9a84c"],
[style*="background:#b8962a"], [style*="background: #b8962a"] { color: #1a1510 !important; }

/* การ์ดสรุปสี gradient (หน้าบัญชีใหม่) — คงสีไว้ แค่ทำเงาให้เข้ากับพื้นมืด */
.acct-card { box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; border: none !important; }

/* ---------- เส้นคั่น / เบ็ดเตล็ด ---------- */
hr { border-color: var(--border) !important; }
.cat-bar, .inst-progress { background: rgba(255,255,255,0.08) !important; }
a { color: var(--gold); }
.muted, .sub, .card .sub { color: var(--text-2) !important; }

/* การ์ด/แผงที่ไม่มี class แต่ฝัง border สีอ่อน */
[style*="border:2px solid #e0e0e0"], [style*="border: 2px solid #e0e0e0"] { border-color: var(--border) !important; }

/* ---------- พื้นขาวที่ตั้งผ่าน class rule (ไม่ใช่ inline) ---------- */
/* แผง/การ์ดพื้นขาว → พื้นมืด */
.page, .pl-card, .staff-card, .stat-card, .day-schedule, .mini-cal {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text) !important;
}
/* ปุ่มพื้นขาว → โปร่งใสโทนมืด */
.btn-back, .btn-cancel {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
/* แท็บพื้นขาว → โทนมืด (active = ทอง) */
.filter-tab, .view-tab, .tab {
    background: var(--bg-elev) !important; color: var(--text-2) !important;
    border: 1px solid var(--border) !important;
}
.filter-tab.active, .view-tab.active, .tab.active {
    background: rgba(216,185,104,0.14) !important; color: var(--gold) !important; border-color: var(--gold) !important;
}
/* ปุ่มควบคุมปฏิทิน (เลื่อนเดือน / ไปวันนี้) */
.mini-cal-nav button, .cal-nav button, .mini-cal-today-btn {
    background: var(--bg-elev-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important;
}
.mini-cal-nav button:hover, .cal-nav button:hover, .mini-cal-today-btn:hover {
    border-color: var(--gold) !important; color: var(--gold) !important;
}
/* PIN pad (หน้าตั้งค่า) */
.pin-btn { background: var(--bg-elev-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.pin-btn:hover { background: var(--gold-solid) !important; color: #1a1510 !important; border-color: var(--gold-solid) !important; }
.pin-input { background: var(--bg-elev-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.pin-dot { background: rgba(255,255,255,0.18) !important; }
.pin-dot.filled { background: var(--gold) !important; }
/* ปุ่มลัดหน้า Dashboard (พื้นขาว) */
.action-btn { background: var(--bg-elev) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.action-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.icon-box { filter: saturate(0.9) brightness(0.95); }

/* กล่อง/พิลล์พื้นเทาอ่อน (#f8f9fa ฯลฯ) ที่ตั้งผ่าน class rule → พื้นมืด (กัน "ขาวบนขาว มองไม่เห็น") */
.rate-pill, .vital-box, .slot-row, .rx-table, .photo-card, .patient-box,
.info-grid, .info-box, .cat-bar-wrap {
    background: var(--bg-elev-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.rate-pill .amt { color: var(--gold) !important; }
.count-badge, .cat-badge { background: rgba(255,255,255,0.10) !important; color: var(--text) !important; }
/* ช่องวันในปฏิทินเดือน (คงไฮไลต์ "วันนี้" ไว้) */
.cal-day { background: var(--bg-elev-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.cal-day.today { background: rgba(216,185,104,0.20) !important; color: var(--gold) !important; }

/* ---------- Print: บังคับพื้นขาว/ตัวดำเสมอเวลาพิมพ์ (กันหน้ารายละเอียดพิมพ์ออกมาพื้นดำ) ---------- */
@media print {
    * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
    .sidebar { display: none !important; }
    .main { margin-left: 0 !important; }
}