/* ==========================================================================
   Bara Service Helpdesk — Design System (ds.css)
   ไฟล์นี้ต้องเหมือนกันทุกตัวอักษรระหว่าง apps/customer-web และ apps/admin-web
   (มี unit test ตรวจ) — แก้ที่ไฟล์เดียวแล้วคัดลอกไปอีกแอป
   ไม่ใช้ CDN / ฟอนต์ภายนอก: ฟอนต์ IBM Plex Sans Thai (SIL OFL) อยู่ใน ./fonts
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  /* Colour — brand */
  --navy-950:#062a43; --navy-900:#083b5c; --navy-700:#0b4f73;
  --teal-700:#0a6b7c; --teal-800:#085a69; --teal-600:#0a7f90; --teal-100:#cfe9ee; --teal-50:#e6f4f6;
  /* Colour — neutral */
  --ink:#12354c; --ink-muted:#3f5b6b; --ink-hint:#55707f;
  --line:#cddbe2; --line-strong:#6f8a99; --bg:#f1f6f8; --surface:#ffffff; --surface-2:#f7fafb;
  /* Colour — status (ทุกคู่ตัวอักษร/พื้นหลังผ่าน WCAG AA ≥ 4.5:1 — ตรวจใน tests/unit/design-system.test.mjs) */
  --danger:#b42318; --danger-bg:#fef1ef; --danger-line:#f1b8b0;
  --warn:#7a4306;   --warn-bg:#fff4e5;   --warn-line:#f0c98e;
  --success:#17694f;--success-bg:#e6f5ee;--success-line:#9fd5bf;
  --info:#0b5d78;   --info-bg:#e5f3f8;   --info-line:#a6d3e3;
  --urgent:#9a4a0a;
  --focus:#0a6b7c; --focus-on-dark:#f5a524;
  /* Typography */
  --font:"IBM Plex Sans Thai","Leelawadee UI","Noto Sans Thai",Tahoma,system-ui,sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:clamp(1.65rem,1.2rem + 2vw,2.5rem);
  --lh-body:1.65; --lh-tight:1.3;
  /* Spacing (4px grid) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;
  /* Shape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(8,59,92,.06),0 6px 20px rgba(8,59,92,.06);
  --shadow-2:0 12px 40px rgba(8,42,60,.22);
  --tap:44px;
  --container:1120px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:320px;font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{line-height:var(--lh-tight);font-weight:700;letter-spacing:0}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
ul,ol{padding:0;list-style:none}
a{color:var(--teal-700);text-underline-offset:3px}
a:hover{color:var(--teal-800)}
img{max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:absolute;left:var(--sp-4);top:-100px;z-index:100;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:var(--navy-950);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{top:var(--sp-3)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.on-dark :focus-visible,.is-dark :focus-visible{outline-color:var(--focus-on-dark)}
.eyebrow{font-size:var(--fs-xs);font-weight:600;color:var(--teal-700);letter-spacing:.02em}
.muted{color:var(--ink-muted)} .hint{color:var(--ink-hint);font-size:var(--fs-sm)}
.nowrap{white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:clamp(var(--sp-4),3.2vw,var(--sp-8))}
.card--flat{box-shadow:none}
.card--tint{background:var(--teal-50);border-color:var(--teal-100);box-shadow:none}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.card-head h2{margin-top:2px}

/* ---------- Buttons: หนึ่งหน้าจอมี .btn--primary เด่นได้ 1 ปุ่ม; .btn--danger ใช้เฉพาะงานย้อนกลับยาก ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:10px 20px;border:1.5px solid transparent;border-radius:var(--r-md);font:inherit;font-weight:600;font-size:var(--fs-md);line-height:1.25;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn--primary{background:var(--teal-700);color:#fff}
.btn--primary:hover{background:var(--teal-800);color:#fff}
.btn--secondary{background:var(--surface);color:var(--teal-800);border-color:var(--teal-700)}
.btn--secondary:hover{background:var(--teal-50);color:var(--teal-800)}
.btn--quiet{background:transparent;color:var(--ink-muted);border-color:transparent;padding-inline:12px}
.btn--quiet:hover{background:var(--teal-50);color:var(--ink)}
.btn--danger{background:var(--danger);color:#fff}
.btn--danger:hover{background:#8f1c12;color:#fff}
.btn--danger-outline{background:var(--surface);color:var(--danger);border-color:var(--danger)}
.btn--danger-outline:hover{background:var(--danger-bg);color:var(--danger)}
.btn--block{width:100%}
.btn--sm{min-height:36px;padding:6px 14px;font-size:var(--fs-sm)}
.btn:disabled,.btn[aria-disabled="true"]{background:#e3eaee;border-color:#e3eaee;color:#5f7684;cursor:not-allowed}
.btn.is-busy{position:relative;pointer-events:none}
.btn.is-busy::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .7s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ---------- Forms ---------- */
.field{display:block;margin:0 0 var(--sp-5)}
.field>.label,.field>label,.label{display:block;font-weight:600;color:var(--ink);margin-bottom:var(--sp-2)}
.req,.opt{margin-left:var(--sp-2);font-size:var(--fs-xs);font-weight:600;padding:1px 8px;border-radius:var(--r-pill);vertical-align:1px}
.req{background:var(--danger-bg);color:var(--danger)}
.opt{background:#e9eff2;color:var(--ink-muted)}
.input,.select,.textarea,input:not([type]),input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],input[type=search],input[type=file],select,textarea{display:block;width:100%;min-height:var(--tap);padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;font-weight:400}
textarea{resize:vertical;min-height:7.5rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--teal-700)}
input::placeholder,textarea::placeholder{color:#6a8392;opacity:1}
.field.has-error .input,.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger);background:var(--danger-bg)}
.field-help{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-hint)}
.field-error{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--danger)}
.field-error::before{content:"!";flex:none;width:1.25em;height:1.25em;display:grid;place-items:center;border-radius:50%;background:var(--danger);color:#fff;font-size:.8em;line-height:1;margin-top:.2em}
.field-row{display:flex;justify-content:space-between;gap:var(--sp-3)}
.counter{font-size:var(--fs-sm);color:var(--ink-hint);white-space:nowrap}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
@media (max-width:640px){.field-grid{grid-template-columns:1fr}}
.choice{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);min-height:var(--tap);border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.choice input{flex:none;width:1.25rem;height:1.25rem;min-height:0;margin:.2rem 0 0;accent-color:var(--teal-700)}
.choice:has(input:checked){border-color:var(--teal-700);background:var(--teal-50)}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.choice strong{display:block}
.choice span{display:block;font-size:var(--fs-sm);color:var(--ink-muted)}
fieldset{border:0;margin:0 0 var(--sp-5);padding:0;min-width:0}
legend{padding:0;margin-bottom:var(--sp-2);font-weight:600}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 12px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;line-height:1.6;background:#e9eff2;color:var(--ink-muted);white-space:nowrap}
.badge--info{background:var(--info-bg);color:var(--info)}
.badge--success{background:var(--success-bg);color:var(--success)}
.badge--warn{background:var(--warn-bg);color:var(--warn)}
.badge--danger{background:var(--danger-bg);color:var(--danger)}
.badge--brand{background:var(--teal-50);color:var(--teal-800)}
.badge--dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---------- Alerts (status / success / warning / error) ---------- */
.alert{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--info-line);border-radius:var(--r-md);background:var(--info-bg);color:var(--info);font-size:var(--fs-sm)}
.alert>.alert-icon{flex:none;width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;background:currentColor;margin-top:1px}
.alert>.alert-icon::before{content:"i";color:#fff;font-weight:700;font-size:.85rem;line-height:1}
.alert>.alert-body{flex:1;min-width:0}
.alert strong{display:block;color:inherit}
.alert--success{background:var(--success-bg);border-color:var(--success-line);color:var(--success)}
.alert--success>.alert-icon::before{content:"✓"}
.alert--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.alert--warn>.alert-icon::before{content:"!"}
.alert--error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.alert--error>.alert-icon::before{content:"!"}
.alert .alert-close{flex:none;align-self:flex-start;min-width:32px;min-height:32px;border:0;border-radius:var(--r-sm);background:transparent;color:inherit;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.alert .alert-close:hover{background:rgba(0,0,0,.06)}

/* ---------- Lists / key-value / tables ---------- */
.kv>div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0;padding-top:0}
.kv dt{color:var(--ink-muted)}
.kv dd{font-weight:600;text-align:right;overflow-wrap:anywhere}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table caption{text-align:left;padding:var(--sp-3) var(--sp-4);font-weight:600}
.table th{padding:var(--sp-3) var(--sp-4);text-align:left;font-weight:600;color:var(--ink-muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
.table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}

/* ---------- Dialog / confirmation ---------- */
dialog.dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);overflow:auto}
dialog.dialog::backdrop{background:rgba(6,42,67,.55)}
.dialog-body{padding:clamp(var(--sp-5),4vw,var(--sp-8))}
.dialog-body h2{font-size:var(--fs-xl);margin:2px 0 var(--sp-3)}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-4) clamp(var(--sp-5),4vw,var(--sp-8));border-top:1px solid var(--line);background:var(--surface-2)}
.dialog-list{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0;padding:0;list-style:none}
.dialog-list li{position:relative;padding-left:1.5rem}
.dialog-list li::before{content:"";position:absolute;left:.35rem;top:.7em;width:6px;height:6px;border-radius:50%;background:currentColor}
.dialog--danger .eyebrow{color:var(--danger)}
@media (max-width:520px){.dialog-actions{flex-direction:column-reverse}.dialog-actions .btn{width:100%}}

/* ---------- States: loading skeleton ---------- */
.skeleton{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,#e3ecf0 25%,#f0f5f7 37%,#e3ecf0 63%);background-size:400% 100%;animation:ds-shimmer 1.4s ease infinite}
@keyframes ds-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}