/*!
 * theme.css — TJ Platform Design System
 * สี: ฟ้า #2563EB (primary) + แสด #F97316 (accent เท่านั้น ไม่ใช่พื้นปุ่มที่มีตัวอักษร)
 * ฟอนต์: Kanit (หัวข้อ/ตัวเลข) + Anuphan (เนื้อหา) · ไอคอน: Bootstrap Icons
 * โหลดหลัง Bootstrap 5 · ไม่มี build step
 *
 * กฎสำคัญ:
 *  - ปุ่ม action = ฟ้า ตัวอักษรขาว (อ่านคม)
 *  - แสด = accent เท่านั้น: โลโก้, เส้น active, badge, แจ้งเตือน, สถานะ "สาย", progress, border การ์ดเด่น
 *  - ห้ามใช้ตัวอักษรขาวบนแสด (ตก contrast) · ถ้าต้องมีตัวอักษรบนแสด ใช้ --accent-text (#9A3412)
 * ================================================================ */

/* ========== 1) TOKENS ========== */
:root{
  /* brand */
  --brand-primary:#2563EB;  --brand-hover:#1D4ED8;
  --brand-soft:#EFF6FF;      --brand-light:#BFDBFE;
  --accent:#F97316;          --accent-soft:#FED7AA;
  --accent-text:#9A3412;     --accent-tint:#FFF7ED;

  /* neutral / text */
  --bg-page:#F8FAFC;  --bg-surface:#FFFFFF;  --bg-soft:#F1F5F9;
  --border:#E2E8F0;   --border-soft:#EFF2F7;
  --text-primary:#1E293B;  --text-secondary:#475569;  --text-muted:#64748B;

  /* status (ผ่าน WCAG AA บนขาว / ตัวอักษรขาว) */
  --success:#15803D; --success-bg:#EAFBF1;
  --warning:#B45309; --warning-bg:#FFF4E0;
  --danger:#B91C1C;  --danger-bg:#FEECEC;
  --info:#2563EB;    --info-bg:#EFF6FF;

  /* fonts */
  --font-display:"Kanit", system-ui, sans-serif;   /* หัวข้อ + ตัวเลข */
  --font-body:"Anuphan", system-ui, sans-serif;    /* เนื้อหา */

  /* scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --radius-sm:8px; --radius:11px; --radius-lg:14px; --radius-pill:9999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-card:0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 4px 14px rgba(15,23,42,.08);
  --transition:150ms ease;

  /* bridge ค่าให้ Bootstrap 5 ใช้ token เดียวกัน */
  --bs-primary:#2563EB; --bs-primary-rgb:37,99,235;
  --bs-body-color:#1E293B; --bs-body-bg:#F8FAFC;
  --bs-body-font-family:var(--font-body); --bs-body-font-size:.95rem;
  --bs-border-color:#E2E8F0; --bs-border-radius:.65rem;
  --bs-link-color:#2563EB; --bs-link-hover-color:#1D4ED8;
  --bs-link-color-rgb:37,99,235;
}

/* ========== 2) BASE ========== */
body{
  font-family:var(--font-body);
  background:var(--bg-page);
  color:var(--text-primary);
  font-size:15px; line-height:1.55;
}
h1,h2,h3,h4,h5,h6,.font-display{ font-family:var(--font-display); font-weight:600; color:var(--text-primary); line-height:1.3; }
.font-num{ font-family:var(--font-display); font-weight:700; }
a{ color:var(--brand-primary); text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--brand-hover); }
:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; border-radius:4px; }
.text-secondary{ color:var(--text-secondary)!important; }
.text-muted{ color:var(--text-muted)!important; }
.text-accent{ color:var(--accent-text)!important; }

/* ========== 3) BUTTONS (override ผ่านตัวแปร Bootstrap 5.3) ========== */
.btn{ --bs-btn-font-family:var(--font-body); --bs-btn-font-weight:600;
  --bs-btn-border-radius:var(--radius); --bs-btn-padding-y:.6rem; --bs-btn-padding-x:1.1rem; }
.btn-primary{ --bs-btn-bg:var(--brand-primary); --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:var(--brand-hover); --bs-btn-hover-border-color:var(--brand-hover);
  --bs-btn-active-bg:var(--brand-hover); --bs-btn-active-border-color:var(--brand-hover);
  --bs-btn-disabled-bg:var(--brand-primary); --bs-btn-disabled-border-color:var(--brand-primary); }
.btn-outline-primary{ --bs-btn-color:var(--brand-primary); --bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--brand-soft); --bs-btn-hover-color:var(--brand-primary); --bs-btn-hover-border-color:var(--brand-primary); }
.btn-outline-secondary{ --bs-btn-color:var(--text-primary); --bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--bg-soft); --bs-btn-hover-color:var(--text-primary); --bs-btn-hover-border-color:var(--border); }
.btn-success{ --bs-btn-bg:var(--success); --bs-btn-border-color:var(--success); --bs-btn-hover-bg:#166534; --bs-btn-hover-border-color:#166534; }
.btn-warning{ --bs-btn-bg:var(--warning); --bs-btn-border-color:var(--warning); --bs-btn-color:#fff; --bs-btn-hover-bg:#92400E; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#92400E; }
.btn-danger{ --bs-btn-bg:var(--danger); --bs-btn-border-color:var(--danger); --bs-btn-hover-bg:#991B1B; --bs-btn-hover-border-color:#991B1B; }
.btn-link{ --bs-btn-color:var(--brand-primary); --bs-btn-hover-color:var(--brand-hover); --bs-btn-font-weight:600; text-decoration:none; }
/* ❌ ไม่มี .btn สีแสด — แสดเป็น accent ไม่ใช่พื้นปุ่มที่มีตัวอักษร */

/* ========== 4) BADGES ========== */
.badge{ font-weight:600; border-radius:var(--radius-pill); padding:.32em .7em; font-size:.78em; }
.badge-info,.text-bg-info{ background:var(--info-bg)!important; color:var(--brand-primary)!important; }
.badge-success,.text-bg-success{ background:var(--success-bg)!important; color:var(--success)!important; }
.badge-warning,.text-bg-warning{ background:var(--warning-bg)!important; color:var(--warning)!important; }
.badge-danger,.text-bg-danger{ background:var(--danger-bg)!important; color:var(--danger)!important; }
.badge-accent{ background:var(--accent-soft)!important; color:var(--accent-text)!important; }  /* เช่น สถานะ "สาย" */

/* ========== 5) CARDS ========== */
.card{ --bs-card-border-color:var(--border); --bs-card-border-radius:var(--radius-lg);
  --bs-card-bg:var(--bg-surface); --bs-card-spacer-y:1.1rem; --bs-card-spacer-x:1.25rem;
  box-shadow:var(--shadow-card); }
.card-accent{ border-top:3px solid var(--accent); }  /* การ์ดเด่น */
.card-stat .stat-value{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; line-height:1.1; }
.card-stat .stat-label{ color:var(--text-secondary); font-size:.9rem; }

/* ========== 6) FORMS ========== */
.form-label{ font-weight:600; color:var(--text-secondary); font-size:.85rem; margin-bottom:.4rem; }
.form-control,.form-select{ border-color:var(--border); border-radius:var(--radius-sm);
  color:var(--text-primary); font-family:var(--font-body); min-height:42px; }
.form-control:focus,.form-select:focus{ border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.form-control::placeholder{ color:var(--text-muted); }

/* ========== 7) TABLES ========== */
.table{ --bs-table-color:var(--text-primary); --bs-table-border-color:var(--border-soft); vertical-align:middle; }
.table thead th{ background:var(--bg-soft); color:var(--text-secondary); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.04em; font-weight:600; padding:.7rem 1rem; border-bottom:1px solid var(--border); }
.table tbody td{ padding:.75rem 1rem; font-size:.9rem; }

/* ========== 8) ALERTS ========== */
.alert{ border:none; border-left:3px solid; border-radius:var(--radius-sm); }
.alert-primary,.alert-info{ background:var(--info-bg); border-color:var(--brand-primary); color:var(--text-primary); }
.alert-success{ background:var(--success-bg); border-color:var(--success); color:var(--text-primary); }
.alert-warning{ background:var(--warning-bg); border-color:var(--warning); color:var(--text-primary); }
.alert-danger{ background:var(--danger-bg); border-color:var(--danger); color:var(--text-primary); }
.alert-accent{ background:var(--accent-tint); border-color:var(--accent); color:var(--text-primary); }  /* แจ้งเตือน/attention */

/* ========== 9) NAV PILLS / TABS ========== */
.nav-pills .nav-link{ color:var(--text-secondary); font-weight:600; border-radius:var(--radius-pill); padding:.4rem .9rem; }
.nav-pills .nav-link.active{ background:var(--brand-primary); color:#fff; }
.nav-tabs .nav-link.active{ color:var(--brand-primary); border-bottom:2px solid var(--brand-primary); }

/* ========== 10) PAGINATION ========== */
.pagination{ --bs-pagination-color:var(--text-secondary); --bs-pagination-border-color:var(--border);
  --bs-pagination-border-radius:var(--radius-sm); --bs-pagination-active-bg:var(--brand-primary);
  --bs-pagination-active-border-color:var(--brand-primary); --bs-pagination-hover-bg:var(--brand-soft);
  --bs-pagination-focus-box-shadow:0 0 0 3px rgba(37,99,235,.15); gap:6px; }
.page-link{ font-weight:600; }

/* ========== 11) DROPDOWN / MODAL / BREADCRUMB ========== */
.dropdown-menu{ --bs-dropdown-border-color:var(--border); --bs-dropdown-border-radius:var(--radius);
  --bs-dropdown-link-active-bg:var(--brand-soft); --bs-dropdown-link-active-color:var(--brand-primary);
  box-shadow:var(--shadow-md); }
.modal-content{ border:none; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.breadcrumb{ --bs-breadcrumb-divider-color:var(--text-muted); font-size:.85rem; }
.breadcrumb-item.active{ color:var(--text-primary); font-weight:600; }

/* ========== 12) APP SHELL (โครงหน้า — ใช้ร่วมทุกโมดูล) ========== */
.app-layout{ display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.app-sidebar{ background:var(--bg-surface); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.app-sidebar .brand{ display:flex; align-items:center; gap:10px; padding:18px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.app-sidebar .brand .logo{ width:34px; height:34px; border-radius:9px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; }
.app-sidebar .nav-section{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; padding:14px 18px 6px; }
.app-sidebar .nav-item{ display:flex; align-items:center; gap:11px; padding:10px 18px; color:var(--text-secondary); font-weight:500; text-decoration:none; border-left:3px solid transparent; transition:var(--transition); }
.app-sidebar .nav-item:hover{ background:var(--brand-soft); color:var(--text-primary); }
.app-sidebar .nav-item.active{ background:var(--brand-soft); color:var(--brand-primary); border-left-color:var(--accent); font-weight:600; }
.app-sidebar .nav-item .count{ margin-left:auto; background:var(--accent-soft); color:var(--accent-text); font-size:.68rem; font-weight:700; padding:1px 8px; border-radius:var(--radius-pill); }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--border-soft); position:sticky; top:0; z-index:50; }
.app-topbar .icon-btn{ position:relative; width:38px; height:38px; border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.app-topbar .icon-btn .dot{ position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid #fff; }
.app-content{ padding:24px; }
@media (max-width:991.98px){ .app-layout{ grid-template-columns:1fr; } .app-sidebar{ display:none; } }

.page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-header h1{ font-size:1.55rem; font-weight:700; }
.page-header .subtitle{ color:var(--text-muted); font-size:.9rem; margin-top:2px; }

/* ========== 13) AVATAR / PROGRESS ========== */
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--brand-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }
.progress-accent{ height:8px; border-radius:var(--radius-pill); background:var(--border-soft); overflow:hidden; }
.progress-accent > span{ display:block; height:100%; background:var(--accent); }

/* ========== 14) UTILITIES ========== */
.bg-accent-soft{ background:var(--accent-soft)!important; }
.border-accent{ border-color:var(--accent)!important; }
.shadow-card{ box-shadow:var(--shadow-card)!important; }