/* ════════════════════════════════════════════════════════════════
   DAR System — Light Refresh (drop-in CSS)
   ────────────────────────────────────────────────────────────────
   วิธีติดตั้ง:
   1. นำไฟล์นี้ไปวางที่  static/css/dar-refresh.css
   2. ใน templates/base.html  เพิ่มบรรทัดนี้ "หลัง" บรรทัด dar.css เดิม:
        <link rel="stylesheet" href="{% static 'css/dar-refresh.css' %}?v=1">
   3. (Optional) ลบ <meta name="theme-color" content="#1C3557"> เก่าออก
      หรือเปลี่ยนเป็น content="#2C7C82" เพื่อให้ tab สี mobile ตรงกับ accent ใหม่
   4. python manage.py collectstatic && redeploy
   ────────────────────────────────────────────────────────────────
   หลักการ: ปรับเฉพาะ design tokens (สี, font, radius, shadow, spacing)
   ไม่แตะ template HTML, ไม่แตะ JS, ไม่แตะ Bootstrap class names
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Accent (10%) — Deep teal — แทน ISO Blue เดิม */
  --accent:        oklch(0.45 0.085 195);
  --accent-hover:  oklch(0.38 0.085 195);
  --accent-light:  oklch(0.95 0.025 195);

  /* Secondary (30%) — Warm slate */
  --navy:          oklch(0.28 0.018 260);
  --navy-light:    oklch(0.96 0.005 260);
  --dark:          oklch(0.22 0.015 260);
  --dark-2:        oklch(0.40 0.012 260);
  --gray:          oklch(0.55 0.010 260);
  --border:        oklch(0.92 0.006 260);

  /* Dominant (60%) — clean off-white */
  --bg:            oklch(0.985 0.003 260);
  --surface:       oklch(0.97 0.005 260);
  --white:         #FFFFFF;

  /* Status — low-saturation */
  --ok:            oklch(0.55 0.13 155);
  --warn:          oklch(0.62 0.14 70);
  --bad:           oklch(0.55 0.16 25);

  /* Type */
  --font-sans: 'IBM Plex Sans Thai','Sukhumvit Set',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Radius */
  --r:    10px;
  --r-sm:  7px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.04);
  --shadow:    0 4px 12px rgba(15,23,42,0.05), 0 0 0 1px rgba(15,23,42,0.04);
}

/* ── 2. BASE ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

html, body {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--dark) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── 3. HEADER BAR ─────────────────────────────────────────── */
.dar-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02) !important;
}
.dar-header-brand:hover { background: var(--surface) !important; }
.dar-header-brand-text { font-weight: 700 !important; letter-spacing: 0.01em; }
.dar-header-link {
  color: var(--dark-2) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
}
.dar-header-link:hover { background: var(--surface) !important; color: var(--dark) !important; }
.dar-header-link.active {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.dar-header-link.has-active {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}
.dar-header-bell:hover, .dar-header-bell.active {
  background: var(--surface) !important;
  color: var(--dark) !important;
}
.dar-header-bell-badge { background: var(--bad) !important; }
.dar-header-profile:hover { background: var(--surface) !important; }
.dar-header .dar-avatar-sm { background: var(--navy) !important; }

/* ── 4. CARDS ─────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
.card-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600;
}

/* ── 5. STAT CARDS ────────────────────────────────────────── */
.stat-card {
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: none !important;
}
.stat-card:hover { border-color: oklch(0.85 0.008 260); }
.stat-card-icon {
  width: 40px; height: 40px; border-radius: 9px;
  font-size: 1.05rem;
}
.stat-card-icon.red    { background: oklch(0.96 0.025 25);  color: var(--bad); }
.stat-card-icon.dark   { background: var(--surface);         color: var(--navy); }
.stat-card-icon.green  { background: oklch(0.96 0.025 155); color: var(--ok); }
.stat-card-icon.orange { background: oklch(0.97 0.03 70);   color: var(--warn); }
.stat-card-num {
  font-size: 1.55rem !important; font-weight: 600 !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', sans-serif;
}

/* ── 6. QUEUE CARD ────────────────────────────────────────── */
.queue-card {
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: none !important;
}
.queue-card-header {
  background: var(--white) !important;
  color: var(--dark) !important;
  border-bottom: 1px solid var(--border);
  position: relative;
  font-weight: 600;
}
.queue-card-header::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.queue-card-header.red::before  { background: var(--bad); }
.queue-card-header.dark::before { background: var(--navy); }
.queue-card-header.red,
.queue-card-header.dark { background: var(--white) !important; color: var(--dark) !important; }
.queue-card-header .btn-light {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--dark-2) !important;
}
.queue-card-header .btn-light:hover {
  background: var(--white) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.queue-card-header .q-count {
  background: var(--surface) !important;
  color: var(--dark) !important;
  border: 1px solid var(--border);
  font-family: 'Inter', monospace;
  font-weight: 600;
}

/* ── 7. TABLES ────────────────────────────────────────────── */
.table {
  --bs-table-hover-bg: var(--surface);
  color: var(--dark);
}
.table thead th, .table-light {
  background: var(--surface) !important;
  color: var(--gray) !important;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-color: var(--border) !important;
}
.table tbody td { border-color: var(--border) !important; vertical-align: middle; }

/* ── 8. BUTTONS ───────────────────────────────────────────── */
.btn { border-radius: var(--r-sm) !important; font-weight: 500; }
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--white) !important;
}
.btn-primary:hover, .btn-primary:active {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.btn-outline-primary {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--accent) !important;
  color: var(--white) !important;
}
.btn-outline-secondary {
  border-color: var(--border) !important;
  color: var(--dark-2) !important;
  background: var(--white) !important;
}
.btn-outline-secondary:hover {
  background: var(--surface) !important;
  color: var(--dark) !important;
  border-color: var(--border) !important;
}

/* ── 9. BADGES ────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  border-radius: 10px;
}
.badge.bg-primary  { background: var(--accent) !important; }
.badge.bg-warning  { background: var(--warn) !important; }
.badge.bg-secondary{ background: var(--navy) !important; }
.badge.bg-success  { background: var(--ok) !important; }
.badge.bg-danger   { background: var(--bad) !important; }
.badge.bg-light    {
  background: var(--surface) !important;
  color: var(--dark) !important;
  border: 1px solid var(--border);
}

/* ── 10. ROLE FILTER ──────────────────────────────────────── */
.role-filter-btn {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--dark-2) !important;
  font-weight: 500;
}
.role-filter-btn:hover { background: var(--surface) !important; }
.role-filter-btn.active {
  background: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
}

/* ── 11. FORMS / DROPDOWN / ALERT (minor tweaks) ──────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.18rem var(--accent-light) !important;
}
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.dropdown-item:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}
.alert-info {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
  color: var(--accent-hover) !important;
}

/* ── 12. UTILITIES ────────────────────────────────────────── */
.text-primary { color: var(--accent) !important; }
hr { border-color: var(--border) !important; opacity: 1; }

/* ── 13. SKELETON OVERRIDE — ปรับสีให้ตรงกับ theme ใหม่ ───── */
.skel-header { background: var(--navy) !important; }
.skel-bar    { background: oklch(0.90 0.006 260) !important; }
.skel-circle { background: oklch(0.90 0.006 260) !important; }

/* End of file */