/* ============================================================
   AIH BRAND LAYER — "Dawn of Healing Days" (2026-10-01)
   โหลดต่อท้าย style.css ทุกหน้า (body ต้องมีคลาส .aih) — ถอดออก = เอา <link> + คลาส aih ออก
   ค่าสี/ฟอนต์/radius/เงา มาจาก AIH Design System (aih-tokens.css)
   หลัก: Navy คุมโครง · Future Blue = action · Dawn gradient ใช้เป็นจุดเด่นบาง ๆ · พื้นขาวหายใจได้
   motion: นุ่ม สั้น (160–260ms) และปิดเองเมื่อผู้ใช้ตั้ง prefers-reduced-motion
   ============================================================ */

/* ── ฟอนต์แบรนด์ (เสิร์ฟจากเครื่องเอง ใช้ได้แม้ไม่มีอินเทอร์เน็ต) ── */
@font-face { font-family: 'Google Sans'; font-weight: 400; font-display: swap; src: local('Google Sans'), url('/fonts/GoogleSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Google Sans'; font-weight: 500; font-display: swap; src: local('Google Sans Medium'), url('/fonts/GoogleSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Google Sans'; font-weight: 600; font-display: swap; src: local('Google Sans SemiBold'), url('/fonts/GoogleSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Google Sans'; font-weight: 700; font-display: swap; src: local('Google Sans Bold'), url('/fonts/GoogleSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Sarabun'; font-weight: 400; font-display: swap; src: local('Sarabun'), url('/fonts/Sarabun-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Sarabun'; font-weight: 600; font-display: swap; src: local('Sarabun SemiBold'), url('/fonts/Sarabun-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Sarabun'; font-weight: 700; font-display: swap; src: local('Sarabun Bold'), url('/fonts/Sarabun-Bold.ttf') format('truetype'); }

body.aih {
  /* AIH tokens */
  --aih-future-blue: #1781B8; --aih-hygiene-green: #00B59D; --aih-fresh-green: #A0D37E; --aih-pink: #F8C8CC;
  --aih-navy: #002545; --aih-dark-gray: #383637; --aih-screen-white: #F6F7F7;
  --aih-fade-blue: #8BC0DB; --aih-fade-green: #7FDACE; --aih-fade-fresh: #D0E9BF; --aih-fade-pink: #FBE3E5;
  --aih-surface-tint: #EEF6FB; --aih-hairline: #C3CDD6; --aih-divider: #DDE3E8; --aih-subhead-blue: #16557D;
  --aih-grad-dawn: linear-gradient(135deg, #1781B8 0%, #00B59D 45%, #A0D37E 82%, #F8C8CC 100%);
  --aih-grad-dawn-90: linear-gradient(90deg, #1781B8 0%, #00B59D 45%, #A0D37E 82%, #F8C8CC 100%);
  --aih-grad-sky: linear-gradient(135deg, #1781B8 0%, #00B59D 100%);
  --aih-font: 'Google Sans', 'Noto Sans Thai', 'Sarabun', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms; --t: 220ms; --t-slow: 320ms;

  /* map ตัวแปรของ style.css เดิม → แบรนด์ */
  --brand: #1781B8; --brand-dark: #16557D; --brand-soft: #EEF6FB; --navy: #002545;
  --bg: #F6F7F7; --surface: #ffffff; --surface-2: #F3F8FB;
  --border: #E3E9EE; --border-strong: #C3CDD6;
  --text: #002545; --text-muted: #5E6F7C; --text-faint: #8A97A1;
  --green: #00B59D; --green-soft: #E6F7F4; --green-ink: #067365;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --sh-sm: 0 1px 2px rgba(0,37,69,.06), 0 1px 1px rgba(0,37,69,.03);
  --sh: 0 8px 24px rgba(0,37,69,.08);
  --sh-lg: 0 20px 48px rgba(0,37,69,.14);
  --ring: 0 0 0 3px rgba(23,129,184,.22);
  /* ตัวแปรของ refined layer */
  --line: #E6ECF0; --line-2: #D3DCE3; --ground: #F6F7F7; --ink: #002545; --ink-2: #3F5566; --ink-3: #5E6F7C;
  --brand-ink: #11689A; --accent: #1781B8; --accent-strong: #1478AC;

  font-family: var(--aih-font);
  color: var(--aih-navy);
  background:
    radial-gradient(1200px 380px at 12% -120px, rgba(23,129,184,.10), transparent 70%),
    radial-gradient(900px 320px at 92% -140px, rgba(0,181,157,.09), transparent 70%),
    var(--aih-screen-white);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ชั้นเดิมของ style.css บังคับ Inter ด้วย !important หลายจุด → ทับด้วยฟอนต์แบรนด์ (ยกเว้นโค้ด/ลิงก์ monospace) */
body.aih, body.aih *:not(code):not(pre):not(kbd):not(.track-url):not(.qr-url) { font-family: var(--aih-font) !important; }
body.aih .app-header .title b { color: var(--aih-navy) !important; font-weight: 600 !important; font-size: 1.05rem !important; letter-spacing: -.01em; }
body.aih h1, body.aih h2, body.aih h3, body.aih .card-head h2, body.aih .stat .v { font-weight: 600; letter-spacing: -.005em; }

/* แถบ Dawn บางด้านบน (ลายเซ็นของแบรนด์ — ไม่ทับโลโก้) */
body.aih.static-app::before { height: 3px; background: var(--aih-grad-dawn-90); opacity: 1; }
body.aih.static-app::after { display: none; }

/* ── Header ── */
body.aih .app-header {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(0,37,69,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
body.aih .app-header .title b { font-weight: 600; color: var(--aih-navy); letter-spacing: -.01em; }
body.aih .app-header .title small { color: var(--aih-subhead-blue); opacity: .8; }
body.aih .nav-switch { background: #EEF3F6; border: 0; border-radius: 999px; padding: 4px; gap: 2px; }
body.aih .nav-switch .nav-link {
  border-radius: 999px; font-weight: 500; color: var(--ink-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
body.aih .nav-switch .nav-link:hover { background: rgba(255,255,255,.75); color: var(--aih-navy); }
body.aih .nav-switch .nav-link.active { background: #fff; color: var(--aih-future-blue); box-shadow: 0 2px 8px rgba(0,37,69,.10); }

/* ── การ์ด / สถิติ ── */
body.aih .card, body.aih .stat {
  border: 1px solid rgba(0,37,69,.06); border-radius: var(--r-lg); background: #fff;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
body.aih .card:hover { box-shadow: var(--sh); }
body.aih .stat.clickable:hover, body.aih .stat-btn:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: rgba(23,129,184,.18); }
body.aih .stat .k { color: var(--ink-3); font-weight: 500; }
body.aih .card-head { border-bottom: 1px solid var(--line); }
body.aih .card-head h2 { color: var(--aih-navy); }

/* ── ปุ่ม ── */
body.aih .btn { border-radius: 999px; font-weight: 500; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease); }
body.aih .btn:active { transform: scale(.97); }
body.aih .btn-primary { background: var(--aih-grad-sky); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(23,129,184,.28); }
body.aih .btn-primary:hover { background: linear-gradient(135deg, #1478AC 0%, #00A38D 100%); box-shadow: 0 6px 18px rgba(23,129,184,.34); }
body.aih .btn-ghost { background: #fff; border-color: var(--line-2); }
body.aih .btn-ghost:hover { background: var(--aih-surface-tint); border-color: rgba(23,129,184,.35); color: var(--brand-ink); }
body.aih .btn-soft { background: var(--aih-surface-tint); color: var(--brand-ink); }

/* ── ฟอร์ม ── */
body.aih input:not([type=checkbox]):not([type=radio]), body.aih select, body.aih textarea {
  border-radius: 12px; border-color: var(--line-2); background: #fff;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
body.aih input:focus, body.aih select:focus, body.aih textarea:focus { border-color: var(--aih-future-blue); box-shadow: var(--ring); outline: none; }

/* ── แท็บ ── */
body.aih .tabs .tab { font-weight: 500; transition: color var(--t) var(--ease); }
body.aih .tabs .tab.active { color: var(--aih-navy); font-weight: 600; }
/* ตัวชี้แท็บ: เส้น Dawn บาง ๆ ใต้แท็บ (กล่องขนาดเท่าแท็บ JS เป็นคนเลื่อน) */
body.aih .tabs .tab-indicator { background: var(--aih-grad-dawn-90) bottom / 100% 3px no-repeat; box-shadow: none; border-radius: 0; }

/* ── ตาราง ── */
body.aih .q-table thead th, body.aih .wl-table thead th { background: #F7FAFC; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--line); }
body.aih .q-table tbody tr { transition: background var(--t-fast) var(--ease); }
body.aih .q-table tbody tr:hover td { background: #F5F9FC; }
body.aih .q-table td { border-bottom-color: #EEF2F5; }

/* ── ป้ายสถานะ ── */
body.aih .badge { border-radius: 999px; font-weight: 500; }

/* ── หน้าต่าง / drawer / toast ── */
body.aih .overlay { background: rgba(0,37,69,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity var(--t) var(--ease); }
body.aih .modal { border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid rgba(0,37,69,.06); }
body.aih .overlay.open .modal { animation: aih-pop var(--t-slow) var(--ease) both; }
body.aih .toast { border-radius: 14px; box-shadow: var(--sh-lg); }
@keyframes aih-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── เข้าหน้า: ไล่ขึ้นทีละส่วนเบา ๆ ── */
body.aih main > * { animation: aih-rise var(--t-slow) var(--ease) both; }
body.aih main > *:nth-child(2) { animation-delay: 40ms; }
body.aih main > *:nth-child(3) { animation-delay: 80ms; }
body.aih main > *:nth-child(4) { animation-delay: 120ms; }
body.aih main > *:nth-child(n+5) { animation-delay: 160ms; }
@keyframes aih-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ตัวเลขเปลี่ยนค่า → กระพริบนุ่ม ๆ (ใส่คลาส .bump ด้วย JS) */
body.aih .bump { animation: aih-bump 520ms var(--ease); }
@keyframes aih-bump { 0% { transform: scale(1); } 35% { transform: scale(1.08); color: var(--aih-future-blue); } 100% { transform: scale(1); } }

/* โหลดข้อมูล: แถบ shimmer แทนข้อความ "กำลังโหลด" */
body.aih .skeleton { position: relative; overflow: hidden; background: #EDF2F5; border-radius: 8px; color: transparent !important; }
body.aih .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: aih-shimmer 1.2s infinite; }
@keyframes aih-shimmer { to { transform: translateX(100%); } }

/* scrollbar บางและกลืนกับพื้น */
body.aih ::-webkit-scrollbar { width: 10px; height: 10px; }
body.aih ::-webkit-scrollbar-thumb { background: #CBD6DE; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
body.aih ::-webkit-scrollbar-thumb:hover { background: #AEBCC7; border: 3px solid transparent; background-clip: padding-box; }
body.aih { scrollbar-width: thin; scrollbar-color: #CBD6DE transparent; }

/* ============================================================
   LOGIN — แผง Dawn ด้านซ้าย + ฟอร์มด้านขวา
   ============================================================ */
body.aih.login-page { min-height: 100vh; }
.aih-login { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(400px, 1fr); }
.aih-login-hero {
  position: relative; overflow: hidden; color: #fff; padding: 56px 56px 44px;
  background: var(--aih-grad-dawn); display: flex; flex-direction: column; justify-content: space-between;
}
.aih-login-hero::before { /* วงแสงอาทิตย์ขึ้น — ลายเซ็น Dawn */
  content: ''; position: absolute; width: 720px; height: 720px; right: -260px; bottom: -380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 62%);
}
.aih-login-hero .emblem-mark { position: absolute; right: 48px; top: 44px; width: 120px; opacity: .22; filter: brightness(0) invert(1); }
.aih-login-hero h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; max-width: 12ch; }
.aih-login-hero .eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.aih-login-hero p { font-size: 16px; line-height: 1.6; max-width: 34ch; opacity: .95; margin-top: 14px; }
.aih-login-hero .foot-note { font-size: 13px; opacity: .85; position: relative; }
.aih-login-hero > div:first-of-type { margin: auto 0; position: relative; }   /* ข้อความกลางแนวตั้ง */
.aih-login-hero h1 { font-size: clamp(34px, 3.6vw, 52px); }
body.aih .login-hero .brand-logo, body.aih .login-hero .brand-logo.lg { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; width: auto; height: auto; }
body.aih .login-hero h1::after, body.aih .login-title::after { display: none !important; }
body.aih .submit-big, body.aih.login-page .btn-primary { background: var(--aih-grad-sky) !important; }
.aih-login-side { display: grid; place-items: center; padding: 40px 24px; }
.aih-login-side .login-box { width: min(420px, 100%); }
@media (max-width: 860px) {
  .aih-login { grid-template-columns: 1fr; }
  .aih-login-hero { padding: 28px 24px; min-height: 200px; }
  .aih-login-hero h1 { font-size: 26px; }
  .aih-login-hero .emblem-mark { width: 72px; right: 20px; top: 20px; }
}

/* ============================================================
   หน้าแจ้งงาน (Vue) — การ์ดฟอร์มนุ่มขึ้น
   ============================================================ */
body.aih.request-page .req-card, body.aih.request-page .mine-card { border-radius: var(--r-lg); border: 1px solid rgba(0,37,69,.06); box-shadow: var(--sh); }
body.aih.request-page .sla-pick label, body.aih.request-page .mine-item { border-radius: 14px; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  body.aih *, body.aih *::before, body.aih *::after { animation: none !important; transition: none !important; }
}