/* ============================================================
   theme.css — ธีมกลางระบบ POS ยานาธร
   👉 แก้สี/ฟอนต์ของทั้งระบบ "ที่ไฟล์เดียวนี้" เปลี่ยนพร้อมกันทุกหน้า
   (ทุกหน้าลิงก์ไฟล์นี้ไว้แล้ว — ไม่ต้องไล่แก้ทีละหน้า)
   ============================================================ */
:root{
  /* ---------- ฟอนต์หลัก ---------- */
  --font:'Sarabun', sans-serif;

  /* ---------- เขียวมินต์ = สีหลัก/โครงสร้าง ---------- */
  --mint:#1DB98C; --mint-2:#19C39A; --mint-dark:#0F8F6B; --mint-soft:#E3F7F0; --mint-bg:#F2FBF8;
  --green1:#19C39A; --green2:#0F8F6B;

  /* ---------- ฟ้า (หัวตาราง / ข้อมูล) ---------- */
  --blue:#2E90E8; --blue-dark:#1B6FBF; --blue-soft:#E8F2FD; --blue-bd:#BAD9F5;

  /* ---------- ม่วง = AI ---------- */
  --ai:#8478D6; --ai-d:#5247A8; --ai-bg:#EEEBFA; --ai-bd:#D6CFF2;

  /* ---------- ทอง / อำพัน ---------- */
  --gold:#E0A030; --gold-d:#9A6B11; --gold-bg:#FBF1DA; --gold-bd:#F0DCA8;
  --amber:#E0A030; --amber-d:#9A6B11; --amber-bg:#FBF1DA; --amber-bd:#F0DCA8;

  /* ---------- คอรัล (รับคืน/เงินออก) ---------- */
  --coral:#E8825F; --coral-d:#B6492E; --coral-bg:#FBE7E0; --coral-bd:#F3CDBD;

  /* ---------- เทอร์ควอยซ์ ---------- */
  --teal:#17A6A0; --teal-d:#0C6E6A; --teal-bg:#DEF5F3; --teal-bd:#B3E6E2;

  /* ---------- ชมพู ---------- */
  --pink:#D4537E; --pink-d:#993556; --pink-bg:#FBEAF0; --pink-bd:#F2C6D6;

  /* ---------- แดง = อันตราย/แพ้ยา ---------- */
  --red:#E2574B; --red-dark:#A32D2D; --red-soft:#FCEBEB;
  --dng-bg:#FCEBEB; --dng-tx:#A32D2D;

  /* ---------- เหลืองเตือน / ข้อมูล ---------- */
  --warn-bg:#FAEEDA; --warn-tx:#854F0B; --warn-bd:#F0DCA8;
  --info-bg:#E8F2FD; --info-tx:#1B6FBF;

  /* ---------- กลาง (พื้น/เส้น/ตัวอักษร) ---------- */
  --card:#FFFFFF; --line:#E2EEE9; --t1:#16302A; --t2:#5E7C72; --t3:#9DB3AB;

  /* ---------- ความมน / เงา ---------- */
  --r-lg:16px; --r-md:11px; --r-sm:9px; --r:18px; --sh-soft:0 1px 3px rgba(20,60,50,.06);

  /* ---------- ไล่เฉด (gradient) หลัก ---------- */
  --grad-topbar:linear-gradient(135deg,#19C39A 0%,#1DB98C 52%,#16A98C 100%);   /* แถบหัวเขียว */
  --grad-green:linear-gradient(135deg,#19C39A,#0F8F6B);                          /* ปุ่ม/ยอดเงินเขียว */
  --grad-header:linear-gradient(135deg,#86C5F6,#5FACEE);                         /* หัวตารางฟ้า (Test1) */
  --grad-logo:linear-gradient(135deg,#3B8FF0,#19C39A);                           /* โลโก้ "+" */
  --branch-grad:linear-gradient(120deg,#19C39A,#2E90E8);                         /* ชื่อสาขา (หน้า login) — เปลี่ยนตามสาขา */
}

/* ============================================================
   🌙 Dark mode (สำหรับสาขาเปิดดึก) — สลับด้วยปุ่ม 🌙 มุมซ้ายล่าง
   พื้น/การ์ดมืด + ตัวอักษรสว่าง · ป้ายสีพาสเทล/ปุ่ม/แถบหัวยังสีสดเด้งบนพื้นมืด
   ============================================================ */
html[data-theme="dark"]{
  --t1:#E8F1ED; --t2:#A2B7AF; --t3:#74897F;
  --line:#2B3A35; --card:#1A2622; --mint-bg:#15231E;
  --sh-soft:0 1px 3px rgba(0,0,0,.45);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(820px 560px at 8% 0%, rgba(29,185,140,.16), transparent 60%),
    radial-gradient(760px 600px at 96% 4%, rgba(46,144,232,.12), transparent 60%),
    radial-gradient(680px 560px at 90% 100%, rgba(132,120,214,.12), transparent 62%),
    linear-gradient(135deg,#0E1714 0%,#101A20 50%,#141019 100%) !important;
}
html[data-theme="dark"] .app{ background:rgba(14,20,18,.5) !important; }
html[data-theme="dark"] .card, html[data-theme="dark"] .lcard{ background:rgba(26,38,34,.92) !important; border-color:rgba(255,255,255,.07) !important; }
html[data-theme="dark"] .modal{ background:rgba(26,38,34,.97) !important; }
html[data-theme="dark"] .tbl tbody tr:nth-child(even){ background:rgba(255,255,255,.03) !important; }
html[data-theme="dark"] .tbl tbody tr:hover td{ background:rgba(255,255,255,.05) !important; }
html[data-theme="dark"] .inp, html[data-theme="dark"] .search-box, html[data-theme="dark"] input,
html[data-theme="dark"] textarea, html[data-theme="dark"] select,
html[data-theme="dark"] .fkey, html[data-theme="dark"] .quick, html[data-theme="dark"] .pay-opt,
html[data-theme="dark"] .status-pill, html[data-theme="dark"] .billbox, html[data-theme="dark"] .mcell,
html[data-theme="dark"] .stat .s, html[data-theme="dark"] .sum .s, html[data-theme="dark"] .kpi:not([class*="k-"]),
html[data-theme="dark"] .kv, html[data-theme="dark"] .fstep{ background:rgba(255,255,255,.05) !important; }
html[data-theme="dark"] .slip{ background:#fff !important; color:#1b1b1b !important; }  /* ใบเสร็จยังขาว */
/* ขอเฉพาะ dark: กล่องรวมเงินใหญ่โปร่งใส (พื้นมืดโชว์เอง ไม่สว่างจ้า) */
html[data-theme="dark"] .total-bar{ background:transparent !important; box-shadow:none !important; border:1px solid rgba(255,255,255,.06) !important; }
/* ขอเฉพาะ dark: ปุ่มชำระเงินเป็นแดงเลือดหมูเข้ม จืดๆ */
html[data-theme="dark"] .pay-btn{
  background:linear-gradient(135deg,#723A3C,#4E2526) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.42),inset 0 2px 0 rgba(255,255,255,.08),inset 0 -3px 6px rgba(0,0,0,.3) !important;
}
/* ขอเฉพาะ dark: แถบหัว(เขียว) + หัวตาราง(ฟ้า) + แถวรวมทั้งสิ้น(เขียว) → จางโปร่งใส กลืนพื้นมืด */
html[data-theme="dark"] .topbar{ background:transparent !important; box-shadow:none !important; border-bottom:1px solid rgba(255,255,255,.07) !important; }
html[data-theme="dark"] .tbl thead th{ background:transparent !important; color:var(--t2) !important; border-bottom:1px solid rgba(255,255,255,.09) !important; }
html[data-theme="dark"] .sum-row td{ background:rgba(16,24,20,.94) !important; color:#62D6B4 !important; border-top-color:rgba(255,255,255,.1) !important; }