/* clockthyme — ธีมกลาง: สี ฟอนต์ ความมน และโลโก้ lockup
   ─────────────────────────────────────────────────────────────────────────
   ไฟล์นี้คือ**แหล่งเดียว**ของค่าสีทั้งระบบ — หน้าเว็บแนะนำระบบ (/) หน้าผู้จัดการ
   (/admin/) และหน้าพนักงาน (/me/) ลิงก์ไฟล์นี้ตรง ๆ การเปลี่ยนธีมคือแก้ค่าที่นี่
   ที่เดียว ไม่ต้องไล่แก้ทีละหน้า

   ⚠️ หน้าจอ kiosk (/kiosk/) **ไม่ได้ลิงก์ไฟล์นี้ และตั้งใจให้เป็นแบบนั้น** — iPad
   ที่ติดผนังต้องลงเวลาได้แม้เน็ตล่มตั้งแต่เปิดเครื่อง ถ้า CSS อยู่คนละไฟล์แล้วโหลด
   ไม่ทัน หน้าจอจะกลายเป็น HTML เปล่า ๆ ที่กดอะไรไม่ถูก kiosk จึงคัดค่าสีชุดโหมดมืด
   ไปไว้ใน <style> ของตัวเอง และมีเทส "โทนสีของ kiosk ตรงกับธีมกลาง" ใน
   scripts/test-e2e.mjs กันไม่ให้สองที่เพี้ยนจากกัน แก้ที่นี่แล้วเทสจะบอกเองว่า
   ต้องไปแก้ kiosk ด้วย

   🎨 กฎของสี (เคยพลาดมาแล้ว): navy #1c3597 คือสีที่แบกอินเทอร์เฟซ ส่วน #0084b7
   เป็นสีรองสำหรับเส้นขอบ/ไอคอน/จุดสถานะเท่านั้น บนพื้นมืด #0084b7 ได้ contrast
   แค่ 3.9:1 จึงอ่านไม่ออก โหมดมืดใช้เฉดอ่อนของสีเดียวกันแทน (#6FC3EC สำหรับ
   ตัวหนังสือ, #4FB6E3 สำหรับปุ่มทึบที่มีตัวอักษรสีเข้ม)
   **ทุกครั้งที่เปลี่ยนสี ต้องคิดเป็นคู่สว่าง/มืดเสมอ — ค่าเดียวใช้ได้ทั้งสองโหมดไม่มีจริง** */

:root{
  /* แบรนด์ */
  --navy:#1c3597; --navy-deep:#16287a; --cyan:#0084b7; --cyan-deep:#00709c;

  /* พื้นและตัวอักษร */
  --ground:#fff;          /* พื้นหลังหน้าเว็บ */
  --alt:#F4F8FC;          /* พื้นรองสำหรับแถบ/หัวตาราง/ช่องกรอก และพื้นของหน้าแอป */
  --surface:#fff;         /* การ์ด */
  --tint:#EDF6FA;         /* พื้นอ่อนของสีแบรนด์ ใช้กับป้ายและไอคอน */
  --ink:#131A2B; --ink-2:#4B5872; --ink-3:#626d84;
  --line:#DCE4EF; --line-2:#C3D0E3;
  /* ขอบของสิ่งที่กดหรือพิมพ์ได้ (ปุ่มโปร่ง ช่องกรอก) — เส้นนี้คือสิ่งเดียวที่บอกว่า
     ตรงนั้นเป็นคอนโทรล WCAG 1.4.11 จึงขอ 3:1 กับพื้นรอบ ๆ ส่วน --line/--line-2
     ยังเป็นเส้นคั่นบาง ๆ ของการ์ดและตารางเหมือนเดิม ไม่ต้องเข้มขนาดนั้น */
  --edge:#8089A0;

  /* สีแบรนด์ที่ปลอดภัยกับตัวอักษร และปุ่มหลัก */
  --brand:#1c3597;
  --btn-bg:#1c3597; --btn-ink:#fff;
  --mark-ink:#1c3597;     /* ตัว C ในโลโก้ */

  /* สถานะ — ใช้ร่วมกันทั้งหน้าผู้จัดการและหน้าพนักงาน */
  --warn:#9c3b22; --warn-soft:#f3ded6;
  --amber:#8a6212; --amber-soft:#f6e9cd;

  --shadow:0 1px 2px rgba(19,26,43,.05), 0 12px 28px -12px rgba(19,26,43,.18);

  /* ความมน — ตั้งชื่อตามสิ่งที่มันเป็น ไม่ใช่ตามขนาด */
  --r-card:16px; --r-panel:12px; --r-btn:11px; --r-field:10px; --r-chip:999px;

  --font-sans:"IBM Plex Sans Thai",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-brand:Nunito,system-ui,sans-serif;
}

/* โหมดมืด — ค่าชุดเดียวกันเขียนสองบล็อก บล็อกบนคือ "ตามเครื่อง" บล็อกล่างคือ
   "สั่งมืดไว้เลย" (<html data-theme="dark">) CSS ล้วนแชร์บล็อกกันไม่ได้
   **แก้บล็อกไหนต้องแก้อีกบล็อกด้วยเสมอ** เทสเทียบสองบล็อกนี้ให้แล้ว */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B1120; --alt:#101A2E; --surface:#141E33; --tint:#12233A;
    --ink:#E7EDF7; --ink-2:#A6B3CB; --ink-3:#8593AE;
    --line:#243150; --line-2:#33436A;
    --edge:#62729A;
    --brand:#6FC3EC;
    --btn-bg:#4FB6E3; --btn-ink:#062338;
    --mark-ink:#E7EDF7;
    --warn:#e4906f; --warn-soft:#37201a;
    --amber:#d9ad5c; --amber-soft:#332711;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0B1120; --alt:#101A2E; --surface:#141E33; --tint:#12233A;
  --ink:#E7EDF7; --ink-2:#A6B3CB; --ink-3:#8593AE;
  --line:#243150; --line-2:#33436A;
  --edge:#62729A;
  --brand:#6FC3EC;
  --btn-bg:#4FB6E3; --btn-ink:#062338;
  --mark-ink:#E7EDF7;
  --warn:#e4906f; --warn-soft:#37201a;
  --amber:#d9ad5c; --amber-soft:#332711;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* วงแหวนโฟกัสเดียวกันทุกหน้า คนที่ใช้คีย์บอร์ดอย่างเดียวจะได้รู้เสมอว่าอยู่ตรงไหน */
:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px;border-radius:4px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :focus-visible{outline-color:var(--cyan)}
}
:root[data-theme="dark"] :focus-visible{outline-color:var(--cyan)}

/* ── โลโก้ lockup ────────────────────────────────────────────────────────
   ใช้มาร์กอัปชุดเดียวกันทุกหน้า: <a class="lockup"> + svg + <span class="word">
   ตัวอักษร clockthyme เป็นฟอนต์ Nunito 800 ไม่ใช่ตัวอักษรจากไฟล์โลโก้จริง */
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.lockup svg{width:34px;height:34px;flex:none}
.lockup .word{font-family:var(--font-brand);font-weight:800;font-size:22px;
  letter-spacing:-.02em;color:var(--mark-ink);line-height:1}
.lockup .word .tld{font-size:.62em;opacity:.8}
/* ขนาดเล็กสำหรับแถบหัวของแอป ซึ่งมีเมนูและชื่อคนใช้งานเบียดอยู่แล้ว */
.lockup.sm svg{width:26px;height:26px}
.lockup.sm .word{font-size:17px}
/* บนพื้น navy (หัวหน้าพนักงาน, แถบ CTA) โลโก้ต้องเป็นสีขาวทั้งสองโหมด */
.lockup.on-navy .word{color:#fff}
.lockup.on-navy svg [style*="--mark-ink"],
.lockup.on-navy svg g{color:#fff!important}
