/* ==========================================================================
   Auth Center Design System (ds) — v0.1 (นำร่องที่ index.php, 16 ต.ค. 2569)
   --------------------------------------------------------------------------
   ใช้ครอบด้วย <div class="ds"> เท่านั้น — ไม่กระทบหน้าอื่นที่ยังใช้สไตล์เดิม
   สีทั้งหมดอ้าง CSS var ที่ header.php ตั้งจากธีม/สีหลักใน settings
   (--card --border --text --muted --pri --c-ok --c-warn --c-err) จึงเปลี่ยนธีมได้ตามเดิม

   กติกา
   - ระยะห่าง: ใช้ --s-* (ฐาน 4px) เท่านั้น ห้ามใส่ตัวเลขเอง
   - ตัวอักษร: ใช้ --fs-* 7 ขนาด  ตัวเลขทุกตัวเป็น tabular
   - มุมโค้ง: panel 16 · ชิ้นใน 10 · ป้าย 6 · avatar วงกลม — ลำดับชั้นชัด
   - เงา: มีเฉพาะ panel ระดับ hero ชิ้นเดียว ที่เหลือใช้เส้นขอบ
   - motion: มีจังหวะเดียวคือกราฟตอนโหลด และเคารพ prefers-reduced-motion
   ========================================================================== */

/* ค่าตั้งต้นสำหรับหน้าที่ไม่ได้ผ่าน header.php (login, setup ฯลฯ)
   :where() ทำให้ specificity = 0 — header.php ที่ตั้ง :root จากธีมจะชนะเสมอ */
:where(:root){--bg:#f5f7fa;--card:#fff;--topbar:#fff;--border:#edf0f4;--text:#1e293b;--muted:#64748b;--hover:#f8fafd;
  --pri:#6366f1;--pri2:#4f46e5;--glow:rgba(99,102,241,.25);--pri-light:#eef2ff;--c-err:#ef4444;--c-ok:#059669;--c-warn:#d97706}

.ds{
  /* spacing (4px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;
  /* type scale */
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-base:16px;--fs-lg:20px;--fs-xl:28px;--fs-hero:56px;
  /* radius */
  --r-panel:16px;--r-inner:10px;--r-chip:6px;
  /* colour roles (derived from theme vars) */
  --ink:var(--text);
  --ink-2:var(--muted);
  --ink-3:color-mix(in srgb,var(--muted) 60%,var(--card));
  --line:var(--border);
  --line-soft:color-mix(in srgb,var(--border) 55%,var(--card));
  --surface:var(--card);
  --sunken:color-mix(in srgb,var(--bg) 70%,var(--card));
  --accent:var(--pri);
  --accent-soft:color-mix(in srgb,var(--pri) 14%,var(--card));
  --accent-mid:color-mix(in srgb,var(--pri) 38%,var(--card));
  --ok:var(--c-ok);--warn:var(--c-warn);--err:var(--c-err);
  --ok-soft:color-mix(in srgb,var(--c-ok) 12%,var(--card));
  --warn-soft:color-mix(in srgb,var(--c-warn) 12%,var(--card));
  --err-soft:color-mix(in srgb,var(--c-err) 12%,var(--card));
  --info:#2563eb;--info-soft:color-mix(in srgb,#2563eb 12%,var(--card));

  /* ฟอนต์ใช้ Google Sans ตาม header.php เสมอ — ห้ามเปลี่ยน */
  font-size:var(--fs-md);line-height:1.6;color:var(--ink);
  max-width:1440px;
}
.ds .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* ── Page head ─────────────────────────────────────────────── */
.ds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6)}
.ds-head h1{font-size:var(--fs-xl);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0}
.ds-head p{margin:var(--s-1) 0 0;color:var(--ink-2);font-size:var(--fs-md)}
.ds-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ── Buttons ───────────────────────────────────────────────── */
.ds .ds-btn{display:inline-flex;align-items:center;gap:var(--s-2);height:40px;padding:0 var(--s-4);border-radius:var(--r-inner);
  font-size:var(--fs-md);font-weight:500;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.ds .ds-btn .material-symbols-outlined{font-size:20px}
.ds .ds-btn--primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.ds .ds-btn--primary:hover{background:var(--pri2);border-color:var(--pri2)}
.ds .ds-btn--quiet{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.ds .ds-btn--quiet:hover{border-color:var(--ink-3)}
.ds .ds-btn:focus-visible,.ds .ds-link:focus-visible,.ds .ds-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ds .ds-link{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--accent);font-weight:500;font-size:var(--fs-sm);text-decoration:none;border-radius:4px}
.ds .ds-link:hover{text-decoration:underline;text-underline-offset:3px}
.ds .ds-link .material-symbols-outlined{font-size:18px}

/* ── Grid ──────────────────────────────────────────────────── */
.ds-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.ds-grid + .ds-grid,.ds-grid + .ds-panel,.ds-panel + .ds-grid,.ds-panel + .ds-panel{margin-top:var(--s-5)}
.ds-grid > *{margin-top:0!important}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-4{grid-column:span 4}
@media(max-width:1199px){.span-8,.span-4,.span-7,.span-5{grid-column:span 12}}

/* ── Panel ─────────────────────────────────────────────────── */
.ds-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);min-width:0}
.ds-panel--raised{box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -12px rgba(15,23,42,.10)}
.ds-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) var(--s-6) 0}
.ds-panel__title{font-size:var(--fs-base);font-weight:600;line-height:1.4;margin:0}
.ds-panel__sub{font-size:var(--fs-sm);color:var(--ink-2);margin:2px 0 0}
.ds-panel__body{padding:var(--s-4) var(--s-6) var(--s-6)}
.ds-panel__body--flush{padding:var(--s-2) 0 var(--s-2)}
.ds-panel__foot{padding:var(--s-3) var(--s-6);border-top:1px solid var(--line-soft)}

/* ── Hero: today ───────────────────────────────────────────── */
.ds-hero{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:0}
.ds-hero__today{padding:var(--s-8);border-right:1px solid var(--line-soft);display:flex;flex-direction:column}
.ds-hero__chart{padding:var(--s-8) var(--s-8) var(--s-6);min-width:0}
@media(max-width:899px){.ds-hero{grid-template-columns:1fr}.ds-hero__today{border-right:0;border-bottom:1px solid var(--line-soft)}.ds-hero__today,.ds-hero__chart{padding:var(--s-6)}}

.ds-kicker{font-size:var(--fs-sm);color:var(--ink-2);font-weight:500;margin:0}
.ds-hero__value{font-size:var(--fs-hero);font-weight:600;line-height:1;letter-spacing:-.03em;margin:var(--s-3) 0 var(--s-2)}
.ds-hero__unit{font-size:var(--fs-lg);font-weight:500;color:var(--ink-2);letter-spacing:0;margin-left:var(--s-2)}
.ds-hero__line{color:var(--ink-2);margin:0 0 var(--s-6);max-width:38ch}
.ds-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:auto}
.ds-fact{padding:var(--s-3) var(--s-4);border-radius:var(--r-inner);background:var(--sunken)}
.ds-fact dt{font-size:var(--fs-xs);color:var(--ink-2)}
.ds-fact dd{margin:2px 0 0;font-size:var(--fs-lg);font-weight:600;line-height:1.3}
.ds-fact--err{background:var(--err-soft)}.ds-fact--err dd{color:var(--err)}

/* ── Notice (alert inline) ─────────────────────────────────── */
.ds-notice{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-inner);font-size:var(--fs-sm);margin-bottom:var(--s-5)}
.ds-notice .material-symbols-outlined{font-size:20px;flex-shrink:0;margin-top:1px}
.ds-notice--warn{background:var(--warn-soft);color:var(--ink)}.ds-notice--warn .material-symbols-outlined{color:var(--warn)}
.ds-notice--ok{background:var(--ok-soft);color:var(--ink)}.ds-notice--ok .material-symbols-outlined{color:var(--ok)}
.ds-notice a{color:inherit;font-weight:600;text-underline-offset:3px}

/* ── Bar chart ─────────────────────────────────────────────── */
.ds-chart__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-5)}
.ds-delta{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-sm);font-weight:600;padding:2px var(--s-2);border-radius:var(--r-chip)}
.ds-delta .material-symbols-outlined{font-size:16px}
.ds-delta--up{color:var(--ok);background:var(--ok-soft)}
.ds-delta--down{color:var(--err);background:var(--err-soft)}
.ds-delta--flat{color:var(--ink-2);background:var(--sunken)}

.ds-bars{position:relative;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;height:180px;align-items:end;
  background:linear-gradient(var(--line-soft),var(--line-soft)) 0 0/100% 1px no-repeat,
             linear-gradient(var(--line-soft),var(--line-soft)) 0 50%/100% 1px no-repeat;
  border-bottom:1px solid var(--line)}
.ds-bar{position:relative;height:100%;display:flex;align-items:flex-end;cursor:default;border-radius:6px 6px 0 0}
.ds-bar__fill{width:100%;height:var(--h);min-height:3px;border-radius:6px 6px 2px 2px;background:var(--line);
  transform-origin:bottom;animation:ds-grow .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 30ms)}
.ds-bar--week .ds-bar__fill{background:var(--accent-mid)}
.ds-bar--today .ds-bar__fill{background:var(--accent)}
.ds-bar__tip{position:absolute;left:50%;bottom:calc(var(--h) + 6px);transform:translateX(-50%);font-size:var(--fs-xs);font-weight:600;
  color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .12s;pointer-events:none}
.ds-bar:hover .ds-bar__tip,.ds-bar--today .ds-bar__tip{opacity:1}
.ds-bar:hover .ds-bar__fill{filter:brightness(.92)}
.ds-axis{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;margin-top:var(--s-2)}
.ds-axis span{text-align:center;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.3}
.ds-axis span b{display:block;font-weight:500;color:var(--ink-2)}
.ds-axis span.is-today b,.ds-axis span.is-today{color:var(--accent)}
.ds-legend{display:flex;gap:var(--s-4);margin-top:var(--s-4);font-size:var(--fs-xs);color:var(--ink-2)}
.ds-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ds-narrow{display:none}
@media(max-width:599px){.ds-axis span:not(.is-today) small{display:none}.ds-bars,.ds-axis{gap:3px}.ds-wide{display:none}.ds-narrow{display:inline}}
@keyframes ds-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── KPI strip (one panel, divided cells) ─────────────────── */
.ds-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-kpi{padding:var(--s-5) var(--s-6);display:flex;gap:var(--s-4);align-items:flex-start;text-decoration:none;color:inherit;transition:background-color .15s}
.ds-kpi + .ds-kpi{border-left:1px solid var(--line-soft)}
a.ds-kpi:hover{background:var(--sunken)}
a.ds-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ds-kpi:first-child{border-radius:var(--r-panel) 0 0 var(--r-panel)}.ds-kpi:last-child{border-radius:0 var(--r-panel) var(--r-panel) 0}
.ds-kpi__icon{width:40px;height:40px;border-radius:var(--r-inner);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.ds-kpi__icon .material-symbols-outlined{font-size:22px}
.ds-kpi__label{font-size:var(--fs-sm);color:var(--ink-2);margin:0}
.ds-kpi__value{font-size:var(--fs-xl);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:2px 0}
.ds-kpi__meta{font-size:var(--fs-xs);color:var(--ink-2);margin:0}
.ds-meter{height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden;margin-top:var(--s-2);width:100%;max-width:140px}
.ds-meter > span{display:block;height:100%;background:var(--accent);border-radius:2px}
@media(max-width:1099px){.ds-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-kpi:nth-child(3){border-left:0}.ds-kpi:nth-child(n+3){border-top:1px solid var(--line-soft)}.ds-kpi{border-radius:0!important}}
@media(max-width:519px){.ds-kpis{grid-template-columns:1fr}.ds-kpi + .ds-kpi{border-left:0;border-top:1px solid var(--line-soft)}}

/* ── List rows ─────────────────────────────────────────────── */
.ds-list{list-style:none;margin:0;padding:0}
.ds-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-6);min-height:56px}
.ds-row + .ds-row{border-top:1px solid var(--line-soft)}
.ds-row__main{flex:1;min-width:0}
.ds-row__title{font-size:var(--fs-md);font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.ds-row__sub{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.ds-row__end{flex-shrink:0;text-align:right;font-size:var(--fs-xs);color:var(--ink-2)}
@media(max-width:599px){.ds-row{padding:var(--s-3) var(--s-4)}.ds-panel__head,.ds-panel__body{padding-left:var(--s-4);padding-right:var(--s-4)}}

/* ── Avatar ────────────────────────────────────────────────── */
.ds-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:var(--fs-md);position:relative}
.ds-avatar--sm{width:32px;height:32px;font-size:var(--fs-sm)}
.ds-presence{position:relative;flex-shrink:0}
.ds-presence::after{content:'';position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--ok);border:2px solid var(--surface)}

/* ── Status tag ────────────────────────────────────────────── */
.ds .ds-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;padding:2px var(--s-2);border-radius:var(--r-chip);white-space:nowrap;line-height:1.6}
.ds .ds-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.ds .ds-tag--ok{color:var(--ok);background:var(--ok-soft)}
.ds .ds-tag--err{color:var(--err);background:var(--err-soft)}
.ds .ds-tag--info{color:var(--info);background:var(--info-soft)}
.ds .ds-tag--muted{color:var(--ink-2);background:var(--sunken)}

/* ── App usage rows ────────────────────────────────────────── */
.ds-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
.ds-apps .ds-row{padding-left:0;padding-right:0;border-top:1px solid var(--line-soft)}
.ds-apps .ds-row:nth-child(-n+2){border-top:0}
@media(max-width:899px){.ds-apps{grid-template-columns:1fr}.ds-apps .ds-row:nth-child(2){border-top:1px solid var(--line-soft)}}
.ds-appicon{width:40px;height:40px;border-radius:var(--r-inner);display:grid;place-items:center;color:#fff;flex-shrink:0}
.ds-appicon .material-symbols-outlined{font-size:22px}
.ds-usage{display:flex;align-items:center;gap:var(--s-3);margin-top:6px}
.ds-usage .ds-meter{margin:0;max-width:none;flex:1}
.ds-usage__n{font-size:var(--fs-xs);color:var(--ink-2);min-width:7ch;text-align:right}

/* ── Empty state ───────────────────────────────────────────── */
.ds-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-8) var(--s-6);color:var(--ink-2)}
.ds-empty .material-symbols-outlined{font-size:32px;color:var(--ink-3)}
.ds-empty p{margin:0;font-size:var(--fs-sm);max-width:32ch}

.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){.ds *{animation:none!important;transition:none!important}}

/* ==========================================================================
   ส่วนที่ 2 — ใช้ทั้งระบบ (16 ต.ค. 2569)
   header.php ใส่ class "ds ds-main" ที่ <main> แล้ว ทุกหน้าหลังบ้านจึงได้ token ชุดนี้
   ========================================================================== */
.ds-main{padding:var(--s-6) var(--s-8) var(--s-10);max-width:1440px}
@media(max-width:1023px){.ds-main{padding:var(--s-4) var(--s-4) var(--s-8)}}
.ds-main .ds{max-width:none}

/* หัวเรื่องในเนื้อหา — ลำดับเดียวกันทุกหน้า */
.ds h1{font-size:var(--fs-xl);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.ds h2,.ds h3{font-weight:600}

/* ── Toolbar / filter bar ──────────────────────────────────── */
.ds-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-3);padding:var(--s-4) var(--s-6);border-bottom:1px solid var(--line-soft)}
.ds-toolbar > .ds-field{min-width:160px;flex:1 1 180px}
.ds-toolbar > .ds-field--grow{flex:3 1 260px}
@media(max-width:599px){.ds-toolbar{padding:var(--s-3) var(--s-4)}}

/* ── Form fields ───────────────────────────────────────────── */
.ds-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ds-field > label,.ds-label{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);line-height:1.4}
.ds-hint{font-size:var(--fs-xs);color:var(--ink-2);margin:0}
.ds-form{display:grid;gap:var(--s-4)}
.ds-form--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:599px){.ds-form--2{grid-template-columns:1fr}}
.ds-section-title{font-size:var(--fs-base);font-weight:600;margin:0 0 var(--s-1)}

/* ── Table (ใหม่) — ใช้แทน .tbl ในหน้าที่เขียนใหม่ ──────────── */
.ds .ds-table-wrap{overflow-x:auto}
.ds .ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
.ds .ds-table th{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);text-align:left;padding:var(--s-3) var(--s-4);background:var(--sunken);border-bottom:1px solid var(--line);white-space:nowrap}
.ds .ds-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink)}
.ds .ds-table tbody tr:last-child td{border-bottom:0}
.ds .ds-table tbody tr:hover td{background:var(--sunken)}
.ds .ds-table th:first-child,.ds .ds-table td:first-child{padding-left:var(--s-6)}
.ds .ds-table th:last-child,.ds .ds-table td:last-child{padding-right:var(--s-6)}
.ds .ds-table .is-num{text-align:right;font-variant-numeric:tabular-nums}

/* ── Buttons (เพิ่ม) ───────────────────────────────────────── */
.ds .ds-iconbtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-inner);border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s}
.ds .ds-iconbtn:hover{background:var(--sunken);color:var(--ink)}
.ds .ds-iconbtn--danger:hover{background:var(--err-soft);color:var(--err)}
.ds .ds-iconbtn .material-symbols-outlined{font-size:20px}
.ds .ds-iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ds .ds-btn--danger{background:var(--err);color:#fff;border:1px solid var(--err)}
.ds .ds-btn--danger:hover{filter:brightness(.92)}
.ds .ds-btn--ghost{background:transparent;color:var(--ink-2);border:1px solid transparent}
.ds .ds-btn--ghost:hover{background:var(--sunken);color:var(--ink)}
.ds .ds-btn--sm{height:32px;padding:0 var(--s-3);font-size:var(--fs-sm)}
.ds .ds-btn[disabled],.btn-m[disabled],.ds .ds-btn.is-busy,.btn-m.is-busy{opacity:.65;cursor:progress;pointer-events:none}

/* ── Modal ─────────────────────────────────────────────────── */
.ds-modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:var(--s-4);background:rgba(15,23,42,.45);backdrop-filter:blur(3px)}
.ds-modal.is-open{display:flex}
.ds-modal__box{background:var(--surface);border-radius:var(--r-panel);width:100%;max-width:520px;max-height:90vh;overflow:auto;box-shadow:0 24px 64px -12px rgba(15,23,42,.35)}
.ds-modal__box--lg{max-width:760px}
.ds-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--line-soft)}
.ds-modal__title{font-size:var(--fs-lg);font-weight:600;margin:0}
.ds-modal__body{padding:var(--s-6)}
.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-4) var(--s-6);border-top:1px solid var(--line-soft)}

/* ── Tabs ──────────────────────────────────────────────────── */
.ds .ds-tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:var(--s-5)}
.ds .ds-tab{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);font-size:var(--fs-md);font-weight:500;color:var(--ink-2);border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;text-decoration:none;white-space:nowrap}
.ds .ds-tab:hover{color:var(--ink)}
.ds .ds-tab.is-active,.ds .ds-tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.ds .ds-tab .material-symbols-outlined{font-size:20px}

/* ── Code / secret ─────────────────────────────────────────── */
.ds-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--fs-sm);background:var(--sunken);border:1px solid var(--line-soft);border-radius:var(--r-chip);padding:2px 6px;word-break:break-all}
.ds-pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--fs-sm);line-height:1.6;background:#0f172a;color:#e2e8f0;border-radius:var(--r-inner);padding:var(--s-4);overflow:auto}

/* ── Progress (กฎ: งานที่ต้องรอ ต้องบอก % + เวลา) ─────────── */
.ds-progress{display:grid;gap:6px}
.ds-progress__track{height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.ds-progress__bar{height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .3s ease}
.ds-progress__bar.is-indeterminate{width:35%!important;animation:ds-indet 1.2s ease-in-out infinite}
.ds-progress__meta{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-xs);color:var(--ink-2);font-variant-numeric:tabular-nums}
@keyframes ds-indet{from{transform:translateX(-100%)}to{transform:translateX(290%)}}

/* แถบงานกลาง (footer.php → DSBusy) ติดบนสุดของจอ */
#dsBusy{position:fixed;left:0;right:0;top:0;z-index:9999;display:none}
#dsBusy.is-on{display:block}
#dsBusy .ds-busy__track{height:3px;background:color-mix(in srgb,var(--pri) 20%,transparent);overflow:hidden}
#dsBusy .ds-busy__bar{height:100%;width:35%;background:var(--pri);animation:ds-indet 1.1s ease-in-out infinite}
#dsBusy .ds-busy__pill{position:fixed;right:16px;top:12px;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 8px 24px -8px rgba(15,23,42,.25);font-size:14px;font-variant-numeric:tabular-nums}
.ds-spin{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--pri) 25%,transparent);border-top-color:var(--pri);animation:ds-rot .8s linear infinite;flex-shrink:0;display:inline-block}
@keyframes ds-rot{to{transform:rotate(360deg)}}

/* ==========================================================================
   ส่วนที่ 3 — Bridge: ปรับคลาสเดิมของระบบให้พูดภาษาเดียวกับ ds
   หน้าที่ยังใช้ card-m / tbl / pill / btn-m / inp / label / alert-* จะเป็นชุดเดียวกันทันที
   ========================================================================== */
.ds .card-m{border-radius:var(--r-panel);border:1px solid var(--line);box-shadow:none;transition:none}
.ds .card-m:hover{box-shadow:none}

.ds .tbl th{font-size:var(--fs-sm);font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-2);background:var(--sunken);border-bottom:1px solid var(--line);padding:var(--s-3) var(--s-4);white-space:nowrap}
.ds .tbl td{font-size:var(--fs-md);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-soft)}
.ds .tbl tbody tr:last-child td{border-bottom:0}
.ds .tbl tr:hover td{background:var(--sunken)}

.ds .pill{font-size:var(--fs-xs);font-weight:500;padding:2px var(--s-2);border-radius:var(--r-chip);line-height:1.6;gap:6px}
.ds .pill-green{background:var(--ok-soft);color:var(--ok)}
.ds .pill-red{background:var(--err-soft);color:var(--err)}
.ds .pill-amber{background:var(--warn-soft);color:var(--warn)}
.ds .pill-blue{background:var(--info-soft);color:var(--info)}
.ds .pill-gray{background:var(--sunken);color:var(--ink-2)}

.ds .btn-m{min-height:40px;padding:0 var(--s-4);font-size:15px;font-weight:500;border-radius:var(--r-inner);gap:var(--s-2);box-shadow:none;transform:none;white-space:nowrap;justify-content:center}
.ds .btn-m .material-symbols-outlined{font-size:20px}
.ds .btn-m.primary{background:var(--accent);border:1px solid var(--accent);box-shadow:none}
.ds .btn-m.primary:hover{background:var(--pri2);border-color:var(--pri2);box-shadow:none;transform:none}
.ds .btn-m.outline{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.ds .btn-m.outline:hover{border-color:var(--ink-3);color:var(--ink)}
.ds .btn-m.ghost:hover{background:var(--sunken)}
.ds .btn-m.danger{background:var(--err);border:1px solid var(--err)}
.ds .btn-m.danger:hover{filter:brightness(.92);background:var(--err)}

/* ช่องกรอกคง 16px — ต่ำกว่านี้ iOS จะซูมหน้าเอง */
.ds .inp{min-height:40px;padding:8px 12px;font-size:16px;border:1px solid var(--line);border-radius:var(--r-inner);background-color:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.ds .inp:hover{border-color:var(--ink-3)}
.ds .inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ds textarea.inp{min-height:88px}
.ds .label{font-size:var(--fs-sm);font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-2);margin-bottom:6px}

.ds .alert-success,.ds .alert-error,.ds .alert-info{border:0;border-radius:var(--r-inner);font-size:var(--fs-md);color:var(--ink)}
.ds .alert-success{background:var(--ok-soft)}.ds .alert-success .material-symbols-outlined{color:var(--ok)}
.ds .alert-error{background:var(--err-soft)}.ds .alert-error .material-symbols-outlined{color:var(--err)}
.ds .alert-info{background:var(--info-soft)}.ds .alert-info .material-symbols-outlined{color:var(--info)}

/* motion: เลิก fade-up ทุกกล่อง (ดูรก) — เหลือเฉพาะจังหวะที่ตอบสนองการกระทำ */
.ds .anim{animation:none}

/* SweetAlert ให้เข้าชุด */
.swal2-popup{border-radius:16px!important;font-family:'Google Sans Text','Google Sans',sans-serif!important}
.swal2-title{font-size:20px!important;font-weight:600!important}
.swal2-styled{border-radius:10px!important;font-weight:500!important;box-shadow:none!important;padding:10px 20px!important}

/* ==========================================================================
   ส่วนที่ 4 — รวมจากการปรับทุกหน้า (16 ต.ค. 2569)
   หมายเหตุ cascade: Tailwind CDN ใส่ <style> ท้าย <head> หลัง ds.css เสมอ
   ปุ่ม/ป้ายจึงต้องขึ้นต้นด้วย ".ds " (ดูด้านบน) ไม่งั้น preflight ของ Tailwind ลบสีพื้นปุ่ม submit
   ========================================================================== */
body.ds{max-width:none}
.ds-panel__head{flex-wrap:wrap}

/* ช่องกรอก: เส้นขอบเข้มขึ้นให้ผ่าน contrast 3:1 */
.ds .inp{border-color:color-mix(in srgb,var(--muted) 32%,var(--card))}
.ds .inp:focus{outline:none}

/* notice เพิ่ม */
.ds-notice--err{background:var(--err-soft);color:var(--ink)}.ds-notice--err .material-symbols-outlined{color:var(--err)}
.ds-notice--info{background:var(--info-soft);color:var(--ink)}.ds-notice--info .material-symbols-outlined{color:var(--info)}

/* tag เพิ่ม: warn และสีจากข้อมูล (ตั้ง --c เป็นสีของตำแหน่ง/หน่วยงาน) */
.ds .ds-tag--warn{color:var(--warn);background:var(--warn-soft)}
.ds .ds-tag--data{color:var(--c,var(--ink-2));background:color-mix(in srgb,var(--c,var(--ink-2)) 12%,var(--card))}
.ds .ds-tag--plain::before{display:none}

/* ปุ่มเพิ่ม */
.ds .ds-btn--block{width:100%;height:44px;justify-content:center}
.ds .ds-iconbtn--warn:hover{background:var(--warn-soft);color:var(--warn)}
.ds .ds-table .ds-iconbtn:hover{background:var(--line-soft)}
.ds button.ds-link{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:500}

/* ฟอร์ม/กริด */
.ds-form > .ds-field--full,.ds-form > .ds-col-full{grid-column:1/-1}
.ds-form--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:767px){.ds-form--3{grid-template-columns:1fr}}

/* avatar ใหญ่ / app icon เล็ก */
.ds-avatar--lg{width:72px;height:72px;font-size:var(--fs-xl)}
.ds-appicon--sm{width:28px;height:28px;border-radius:8px}.ds-appicon--sm .material-symbols-outlined{font-size:16px}

/* ตาราง */
.ds-table td.is-muted{color:var(--ink-2)}
.ds-table td.is-nowrap,.ds-table th.is-nowrap{white-space:nowrap}
.ds-table-wrap--sticky{max-height:520px;overflow:auto}
.ds-table-wrap--sticky th{position:sticky;top:0;z-index:1}

/* หลายหน้าใช้ JS สลับคลาส .active บนแท็บ */
.ds .ds-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* คลาส hidden ของ Tailwind ที่ JS ใช้สลับแสดง/ซ่อน ต้องชนะ display ของ component ds เสมอ
   (ไม่มีหน้าไหนใช้ hidden คู่กับ sm:/md:/lg: ในเนื้อหา — ตรวจแล้ว 16 ต.ค. 2569) */
.ds .hidden,body.ds .hidden{display:none}

/* ให้ element absolute ในตาราง (เช่น .ds-sr ในหัวคอลัมน์) อยู่ในกล่องเลื่อน ไม่ดันหน้าล้นแนวนอนบนมือถือ */
.ds-table-wrap{position:relative}

/* แถบแท็บ: เลื่อนได้แค่แนวนอน ไม่ให้ scrollbar แนวตั้งโผล่ */
.ds-tabs{overflow-y:hidden;scrollbar-width:thin}