/* ============================================================
   SALESUPPORT — Design Tokens
   ============================================================
   ไฟล์นี้เป็น "หัวใจ" ของระบบ — เปลี่ยนสี/ขนาดที่นี่ที่เดียว
   เปลี่ยนทุกหน้าทั้งเว็บได้ทันที

   คนที่ไม่มีความรู้โค้ด: แก้แค่ค่าหลังเครื่องหมาย ":"
   เช่น --color-emerald-500: #10B981;
                  เปลี่ยนเป็น →  --color-emerald-500: #00A86B;
   ============================================================ */

:root {
  /* ============================================================
     1. สีหลัก (Color Palette)
     ============================================================ */

  /* กลุ่มสีขาว / เทา — สำหรับพื้นหลังและตัวอักษร */
  --color-white:        #FFFFFF;   /* ขาวบริสุทธิ์ — พื้นหลังการ์ด */
  --color-bg:           #F8FAFC;   /* ขาวอมเทา — พื้นหลังหน้าเว็บ */
  --color-surface:      #F1F5F9;   /* เทาอ่อน — พื้นหลังตารางสลับ */
  --color-border:       #E2E8F0;   /* เทากลาง — เส้นขอบ */
  --color-muted:        #94A3B8;   /* เทาเข้มอ่อน — ตัวอักษรรอง */
  --color-secondary:    #64748B;   /* เทาเข้ม — caption */
  --color-text:         #1E293B;   /* เทาเข้มมาก — ตัวอักษรหลัก */
  --color-heading:      #0F172A;   /* เกือบดำ — หัวข้อ */

  /* กลุ่มสีเขียว Emerald — สีหลักของแบรนด์ */
  --color-emerald-50:   #ECFDF5;   /* เขียวอ่อนมาก — พื้นหลัง badge */
  --color-emerald-100:  #D1FAE5;   /* เขียวอ่อน — สถานะสำเร็จ */
  --color-emerald-500:  #10B981;   /* เขียวหลัก — ปุ่ม primary */
  --color-emerald-600:  #059669;   /* เขียวเข้ม — hover state */
  --color-emerald-700:  #047857;   /* เขียวเข้มมาก — active state */

  /* กลุ่มสีสถานะ (Status) */
  --color-success:      #10B981;   /* สำเร็จ — เขียว */
  --color-warning:      #F59E0B;   /* เตือน — ส้ม (SLA ใกล้หมด) */
  --color-error:        #EF4444;   /* ผิดพลาด — แดง (ticket เร่งด่วน) */
  --color-info:         #3B82F6;   /* ข้อมูล — ฟ้า (notification) */

  /* พื้นหลังสถานะ (สีอ่อนสำหรับ badge) */
  --color-success-bg:   #D1FAE5;
  --color-warning-bg:   #FEF3C7;
  --color-error-bg:     #FEE2E2;
  --color-info-bg:      #DBEAFE;

  /* ตัวอักษรสถานะ (สีเข้มสำหรับ badge) */
  --color-success-text: #065F46;
  --color-warning-text: #92400E;
  --color-error-text:   #991B1B;
  --color-info-text:    #1E40AF;


  /* ============================================================
     2. ฟอนต์ (Typography)
     ============================================================ */

  --font-body:    'Sarabun', 'Inter', system-ui, sans-serif;
  --font-heading: 'Sarabun', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  /* ขนาดฟอนต์ */
  --text-xs:    12px;   /* caption, badge */
  --text-sm:    13px;   /* ตัวอักษรเล็ก, ตาราง */
  --text-base:  14px;   /* ตัวอักษรหลัก */
  --text-lg:    16px;   /* ตัวอักษรใหญ่, ปุ่ม */
  --text-xl:    20px;   /* หัวข้อ section */
  --text-2xl:   24px;   /* ชื่อหน้า */
  --text-3xl:   32px;   /* ตัวเลข KPI */

  /* น้ำหนักฟอนต์ */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;


  /* ============================================================
     3. ระยะห่าง (Spacing) — ใช้ scale 4px
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ============================================================
     4. ความโค้งมุม (Border Radius)
     ============================================================ */
  --radius-sm:    4px;     /* input, badge */
  --radius-md:    8px;     /* ปุ่ม, การ์ด */
  --radius-lg:   12px;     /* modal */
  --radius-full: 9999px;   /* วงกลม — avatar, status dot */


  /* ============================================================
     5. เงา (Shadow) — ใช้สี slate ไม่ใช่ดำ ลดความเข้ม
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.10);


  /* ============================================================
     6. เค้าโครงหน้า (Layout)
     ============================================================ */
  --sidebar-width:    256px;
  --sidebar-width-collapsed: 72px;
  --topbar-height:     56px;
  --content-max-width: 1280px;
  --content-padding:  24px;


  /* ============================================================
     7. อนิเมชัน (Transition)
     ============================================================ */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.3s ease;


  /* ============================================================
     8. z-index (ลำดับการซ้อนทับ)
     ============================================================ */
  --z-sidebar:   100;
  --z-topbar:    110;
  --z-dropdown:  1000;
  --z-modal:     2000;
  --z-toast:     3000;
}

/* ============================================================
   9. Dark Theme — เปิดใช้เมื่อ <html> มี class 'dark'
   ============================================================ */
html.dark {
  /* สีหลัก — พื้นหลังเข้ม + ตัวอักษรสว่าง */
  --color-white:        #1E293B;   /* พื้นการ์ด (เข้ม) */
  --color-bg:           #0F172A;   /* พื้นหลังหน้า (เข้มกว่า) */
  --color-surface:      #334155;   /* เทาเข้ม — table stripe */
  --color-border:       #334155;   /* เส้นขอบ */
  --color-muted:        #94A3B8;   /* ตัวอักษรรอง */
  --color-secondary:    #CBD5E1;   /* caption */
  --color-text:         #E2E8F0;   /* ตัวอักษรหลัก */
  --color-heading:      #F8FAFC;   /* หัวข้อ */

  /* สีสถานะ — ปรับ alpha ให้โทนเข้ม */
  --color-success-bg:   #064E3B;
  --color-warning-bg:   #78350F;
  --color-error-bg:     #7F1D1D;
  --color-info-bg:      #1E3A8A;

  --color-success-text: #6EE7B7;
  --color-warning-text: #FCD34D;
  --color-error-text:   #FCA5A5;
  --color-info-text:    #93C5FD;

  /* สี Emerald — คงเดิม (สีหลักของแบรนด์) */
  --color-emerald-50:   #064E3B;
  --color-emerald-100:  #065F46;
  --color-emerald-500:  #10B981;
  --color-emerald-600:  #34D399;
  --color-emerald-700:  #6EE7B7;

  /* shadow — ใช้ black แทน slate */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* ปรับ body background ใน dark mode */
html.dark body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* ปรับตารางใน dark mode */
html.dark .table thead th {
  background: var(--color-surface);
  color: var(--color-heading);
  border-color: var(--color-border);
}

html.dark .table tbody tr {
  border-color: var(--color-border);
}

html.dark .table tbody tr:hover {
  background: var(--color-surface);
}

/* ปรับ form-control ใน dark mode */
html.dark .form-control {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.dark .form-control:focus {
  border-color: var(--color-emerald-500);
  background: var(--color-bg);
}

/* ปรับ badge — ใช้สีที่อ่านง่ายบนพื้นเข้ม */
html.dark .badge {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ปรับ SLA dot rows */
.sla-breach-row {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border-left: 3px solid #ef4444 !important;
}

.sla-warning-row {
  background-color: rgba(245, 158, 11, 0.10) !important;
  border-left: 3px solid #f59e0b !important;
}

html.dark .sla-breach-row {
  background-color: rgba(239, 68, 68, 0.20) !important;
}

html.dark .sla-warning-row {
  background-color: rgba(245, 158, 11, 0.18) !important;
}

/* ปรับ modal ใน dark mode */
html.dark .modal {
  background: var(--color-white);
  color: var(--color-text);
}

/* ปรับ toast ใน dark mode */
html.dark .toast {
  background: var(--color-white);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Dark mode toggle button */
.dark-mode-btn {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.dark-mode-btn:hover {
  background: var(--color-surface);
  color: var(--color-emerald-500);
}