/* ==========================================================================
   ระบบเสนอแนะทรัพยากรสารสนเทศ — สไตล์กลางของทั้งระบบ
   ใช้ร่วมกันทุกหน้า เพื่อให้หน้าตาสม่ำเสมอและรองรับทุกขนาดจอ
   ==========================================================================
   สารบัญ
     1. Design tokens
     2. Base & typography
     3. Layout (header / nav / main / footer)
     4. Cards & sections
     5. Forms
     6. Buttons
     7. Badges & status
     8. Tables (responsive: จอเล็กแปลงแถวเป็นการ์ด)
     9. Pagination
    10. Modal
    11. States / utilities
    12. Print
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
:root{
  --brand:        #006666;
  --brand-600:    #0a8080;
  --brand-700:    #044f4f;
  --brand-050:    #eff8f8;
  --brand-100:    #d8eded;

  --accent:       #C4D631;
  --danger:       #c62828;
  --danger-050:   #fdecec;
  --warn:         #b45309;
  --warn-050:     #fff7e6;
  --ok:           #10786a;

  --bg:           #f2f6f7;
  --bg-top:       #e6f1f1;
  --card:         #ffffff;
  --line:         #e2eaec;
  --line-strong:  #cbdadd;

  --text:         #17262b;
  --muted:        #5f7279;

  --radius:       14px;
  --radius-sm:    10px;
  --radius-pill:  999px;

  --shadow-sm:    0 1px 2px rgba(11,45,52,.06), 0 4px 12px rgba(11,45,52,.05);
  --shadow-md:    0 2px 6px rgba(11,45,52,.07), 0 12px 32px rgba(11,45,52,.09);
  --shadow-lg:    0 8px 24px rgba(11,45,52,.10), 0 24px 60px rgba(11,45,52,.14);

  --header-h:     64px;
  --maxw:         1200px;
  --gutter:       16px;

  --ring:         0 0 0 3px rgba(0,102,102,.25);
}

/* โหมดไว้อาลัย — สลับชุดสีให้เป็นโทนสุภาพ
   (ไม่ใช้ filter บน body เพราะทำให้ position:fixed ของ modal/แบนเนอร์เพี้ยน) */
body.mourning{
  --brand:      #4a5558;
  --brand-600:  #5b676a;
  --brand-700:  #394244;
  --brand-050:  #f2f4f4;
  --brand-100:  #e2e6e7;
  --accent:     #c9cdb8;
  --danger:     #8c5a5a;
  --ok:         #5c6b68;
  --bg:         #f4f5f5;
  --bg-top:     #eceeee;
}

/* ---------- 2. Base ------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Prompt', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Thai', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-top) 0, var(--bg) 340px);
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; }

a{ color: var(--brand); }
a:hover{ color: var(--brand-700); }

h1,h2,h3,h4{ line-height: 1.35; margin: 0 0 .5em; font-weight: 600; }
h1{ font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
h2{ font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
h3{ font-size: 1.08rem; }

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ลิงก์ข้ามไปเนื้อหา: ซ่อนด้วย transform แทน left:-9999px
   เพราะการดันออกนอกจอทำให้เกิดแถบเลื่อนแนวนอนในบางเบราว์เซอร์ */
.skip-link{
  position: absolute; left: 0; top: 0; z-index: 200;
  background: #fff; color: var(--brand-700); padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
  transform: translateY(-120%);
  transition: transform .15s ease;
}
.skip-link:focus{ transform: none; }

/* ---------- 3. Layout ----------------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.site-header__inner{
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 8px var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand{
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; margin-right: auto;
  padding: 4px 6px; border-radius: var(--radius-sm);
}
.brand__logo{
  width: 38px; height: 38px; object-fit: contain;
  background: #fff; border-radius: 9px; padding: 3px; flex: none;
}
.brand__text{ display: flex; flex-direction: column; line-height: 1.25; }
.brand__text strong{ font-size: .98rem; letter-spacing: .2px; }
.brand__text small{ font-size: .76rem; opacity: .85; }

.nav-toggle{
  display: none;
  background: rgba(255,255,255,.14);
  color: #fff; border: 0; cursor: pointer;
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  font-size: 1.15rem; flex: none;
}
.nav-toggle:hover{ background: rgba(255,255,255,.24); }

.site-nav{ display: flex; align-items: center; gap: 14px; }

.site-nav__list{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
.site-nav__list a{
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; text-decoration: none;
  font-size: .9rem; padding: 8px 10px; border-radius: var(--radius-sm);
  transition: background .18s ease;
  white-space: nowrap;
}
.site-nav__list a:hover{ background: rgba(255,255,255,.16); color: #fff; }
.site-nav__list a.is-active{ background: rgba(255,255,255,.22); font-weight: 600; }
.site-nav__list .ext{ font-size: .65em; opacity: .7; }

.nav-admin{
  background: var(--accent) !important;
  color: #23301a !important;
  font-weight: 700 !important;
}
.nav-admin:hover{ filter: brightness(.94); }

.site-nav__user{
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28);
}
.site-nav__user .uid{
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.logout-form{ margin: 0; }
.btn-logout{
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn-logout:hover{ background: rgba(255,255,255,.28); }

.site-main{
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 22px var(--gutter) 40px;
}

.site-footer{
  flex: none;
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff;
  margin-top: auto;
}
.site-footer__inner{
  max-width: var(--maxw); margin-inline: auto;
  padding: 18px var(--gutter);
  text-align: center; font-size: .88rem;
}
.site-footer__inner p{ margin: 0 0 4px; }
.site-footer a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .sep{ opacity: .5; margin: 0 8px; }

/* -- เมนูมือถือ ------------------------------------------------------------ */
@media (max-width: 960px){
  .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }

  .site-nav{
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--brand-700);
    padding: 8px var(--gutter) 16px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-nav.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }

  .site-nav__list{ flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__list a{
    font-size: 1rem; padding: 13px 12px; border-radius: var(--radius-sm);
    white-space: normal;
  }
  .nav-admin{ margin-top: 6px; justify-content: center; }

  .site-nav__user{
    margin-top: 12px; padding: 12px 4px 0;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.22);
    justify-content: space-between;
  }
}

@media (max-width: 420px){
  .brand__text small{ display: none; }
}

/* ---------- 4. Cards ------------------------------------------------------ */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.2vw, 24px);
}
.card + .card{ margin-top: 18px; }
.card__title{
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 4px; color: var(--brand-700);
}
.card__subtitle{ color: var(--muted); font-size: .92rem; margin: 0 0 16px; }

.page-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.page-head h1{ margin: 0; color: var(--brand-700); }
.page-head .muted{ margin: 2px 0 0; }

/* -- การ์ดข้อมูลผู้ใช้ ------------------------------------------------------ */
.user-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.2vw, 22px);
  margin-bottom: 18px;
}
.user-card__head{ display: flex; align-items: center; gap: 14px; }
.avatar{
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: var(--brand-050); color: var(--brand);
  display: grid; place-items: center; font-size: 1.4rem;
  border: 1px solid var(--brand-100);
}
.user-card__id h1{ margin: 0; font-size: 1.22rem; }
.user-card__id .muted{ margin: 0; font-size: .9rem; }

.user-card__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 20px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.user-card__grid div{ min-width: 0; }
.user-card__grid dt{ font-size: .78rem; color: var(--muted); letter-spacing: .2px; }
.user-card__grid dd{ margin: 0; font-weight: 500; }
.breakable{ overflow-wrap: anywhere; }

/* -- โควตา ------------------------------------------------------------------ */
.quota{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.quota__title{ font-size: .95rem; color: var(--brand-700); display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.quota__list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px;
}
.quota__row{ display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.quota__name{ color: var(--muted); overflow-wrap: anywhere; }
.quota__num{ font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quota__bar{
  margin-top: 5px; height: 7px; border-radius: var(--radius-pill);
  background: var(--brand-100); overflow: hidden;
}
.quota__bar > span{ display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.quota__item.is-warn .quota__bar > span{ background: #d18700; }
.quota__item.is-warn .quota__num{ color: #a05e00; }
.quota__item.is-full .quota__bar > span{ background: var(--danger); }
.quota__item.is-full .quota__num{ color: var(--danger); }

/* ---------- 5. Forms ------------------------------------------------------ */
.form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full{ grid-column: 1 / -1; }

label{ font-weight: 600; font-size: .92rem; color: var(--brand-700); }
label .req{ color: var(--danger); }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea{
  width: 100%;
  font: inherit;
  font-size: 1rem;              /* 16px กัน iOS ซูมอัตโนมัติตอนโฟกัส */
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 0;
}
textarea{ min-height: 110px; resize: vertical; }
select{
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%235f7279' d='M1.2 1.2 7 7l5.8-5.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled{ background: #f4f6f7; color: var(--muted); }

.help{ font-size: .82rem; color: var(--muted); }
.form-actions{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; grid-column: 1 / -1;
}

/* แถบค้นหา */
.search-bar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
}
.search-bar__actions{ display: flex; gap: 8px; }
.search-bar__actions .btn{ flex: 1; justify-content: center; }

/* ---------- 6. Buttons ---------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .95rem; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; cursor: pointer; text-decoration: none;
  min-height: 44px;                   /* พื้นที่กดบนมือถือ */
  transition: filter .15s ease, background .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled, .btn.is-disabled{ opacity: .55; pointer-events: none; }

.btn-primary{ background: var(--brand); color: #fff; }
.btn-primary:hover{ background: var(--brand-700); color: #fff; }

.btn-secondary{ background: #fff; color: var(--brand-700); border-color: var(--line-strong); }
.btn-secondary:hover{ background: var(--brand-050); color: var(--brand-700); }

.btn-danger{ background: var(--danger); color: #fff; }
.btn-danger:hover{ filter: brightness(.92); color: #fff; }

.btn-ghost{ background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost:hover{ background: #f3f6f7; color: var(--text); }

.btn-sm{ padding: 7px 12px; font-size: .85rem; min-height: 36px; }
.btn-block{ width: 100%; }

/* ---------- 7. Badges ----------------------------------------------------- */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; line-height: 1.3;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.badge i{ font-size: .85em; }

.badge-pending   { background:#fff5e0; color:#8a5a00; border-color:#f3dfae; }
.badge-reviewing { background:#eaf1ff; color:#1f4193; border-color:#c9d8f7; }
.badge-purchasing{ background:#eef3d8; color:#5a6a12; border-color:#dbe4ab; }
.badge-ready     { background:#e2f6f1; color:#0b6a58; border-color:#b5e3d7; }
.badge-available { background:#e3f3e6; color:#1d6b32; border-color:#b8e0c2; }
.badge-rejected  { background:#fdecec; color:#9a2020; border-color:#f4c9c9; }
.badge-cancelled { background:#eef1f2; color:#4b5b60; border-color:#d7dfe1; }
.badge-unknown   { background:#eef1f2; color:#4b5b60; border-color:#d7dfe1; }

.count-badge{
  margin-left: auto; min-width: 30px; text-align: center;
  background: #fff; color: var(--brand-700); border: 1px solid var(--line-strong);
  padding: 1px 9px; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- แถบตัวกรองด้านข้าง (mainA / MainB) ---------------------------- */
/* minmax(0, …) ทั้งสองคอลัมน์ มิฉะนั้นตารางกว้าง ๆ ในคอลัมน์ขวา
   จะดันให้ grid กว้างเกินจอ (min-content ของ grid track มีค่าเป็น auto โดยปริยาย) */
.workspace{
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.workspace > *{ min-width: 0; }
@media (max-width: 900px){
  .workspace{ grid-template-columns: minmax(0, 1fr); }
}

.filter-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.filter-list > li > button,
.filter-list > li > a{
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: .95rem; color: var(--text); text-decoration: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px;
  cursor: pointer; min-height: 46px;
  transition: background .15s ease, border-color .15s ease;
}
.filter-list > li > button:hover,
.filter-list > li > a:hover{ background: var(--brand-050); border-color: var(--brand-100); }
.filter-list > li > button.is-active{
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.filter-list > li > button.is-active .count-badge{ background: rgba(255,255,255,.2); color:#fff; border-color: rgba(255,255,255,.4); }
.filter-list i.lead{ width: 18px; text-align: center; opacity: .85; flex: none; }

.submenu{
  list-style: none; margin: 4px 0 0; padding: 0 0 0 10px;
  display: flex; flex-direction: column; gap: 4px;
  border-left: 2px solid var(--line);
}
.submenu button,
.submenu a{
  width: 100%; text-align: left; font: inherit; font-size: .9rem;
  background: none; border: 0; color: var(--text);
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  text-decoration: none; min-height: 40px;
  display: flex; align-items: center; gap: 8px;
}
.submenu button:hover, .submenu a:hover{ background: var(--brand-050); }
.submenu[hidden]{ display: none; }

.disclosure{
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: .95rem; text-align: left;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; min-height: 46px;
}
.disclosure:hover{ background: var(--brand-050); }
.disclosure .chev{ margin-left: auto; transition: transform .18s ease; opacity: .6; }
.disclosure[aria-expanded="true"] .chev{ transform: rotate(90deg); }

.results{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(14px, 2vw, 20px);
  min-height: 260px;
  min-width: 0;            /* ให้ตารางภายในเลื่อนเองแทนที่จะดันหน้าให้กว้าง */
  overflow: hidden;
}

/* ---------- 8. Tables ----------------------------------------------------- */
.table-wrap{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table-scroll{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: #fff;
}
table.data th,
table.data td{
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.data thead th{
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .2px;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.data tbody tr:nth-child(even) td{ background: #fafcfc; }
table.data tbody tr:hover td{ background: var(--brand-050); }
table.data tbody tr:last-child td{ border-bottom: 0; }
/* break-word (ไม่ใช่ anywhere) เพื่อไม่ให้คำภาษาอังกฤษถูกตัดทีละตัวอักษร */
table.data td.wrap{ overflow-wrap: break-word; }
table.data .nowrap{ white-space: nowrap; }
table.data .num{ font-variant-numeric: tabular-nums; }

/* บนจอกว้างพอ ให้ตารางมีความกว้างขั้นต่ำเพื่อไม่ให้คอลัมน์แคบจนอ่านยาก
   ถ้าไม่พอก็เลื่อนในกรอบ .table-scroll แทนที่จะบีบตัวอักษร */
@media (min-width: 721px){
  table.data{ min-width: 720px; }
  table.data.wide{ min-width: 940px; }
}

/* จอเล็ก: แปลงแต่ละแถวเป็นการ์ด ไม่ต้องเลื่อนตารางซ้ายขวา */
@media (max-width: 720px){
  .table-wrap{ border: 0; border-radius: 0; }
  .table-scroll{ overflow: visible; }

  table.data{ font-size: .95rem; }
  table.data thead{
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  table.data tbody tr{
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 6px 12px;
    margin-bottom: 12px;
  }
  table.data tbody tr:nth-child(even) td,
  table.data tbody tr:hover td{ background: transparent; }
  table.data td{
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    overflow-wrap: anywhere;
  }
  table.data tr td:last-child{ border-bottom: 0; }
  table.data td::before{
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 38%;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
  }
  table.data td:empty{ display: none; }
  table.data td[colspan]{ display: block; text-align: center; }
  table.data td[colspan]::before{ content: none; }
}

/* ---------- 9. Pagination ------------------------------------------------- */
.pagination{
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; align-items: center;
  margin-top: 18px; padding: 0; list-style: none;
}
.pagination a,
.pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--brand-700);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover{ background: var(--brand-050); border-color: var(--brand-600); }
.pagination .is-current{ background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .is-gap{ border-color: transparent; background: transparent; min-width: 26px; color: var(--muted); }
.pagination-info{
  text-align: center; color: var(--muted); font-size: .85rem; margin-top: 10px;
}

/* ---------- 10. Modal ----------------------------------------------------- */
.modal{
  position: fixed; inset: 0; z-index: 120;
  display: none;                     /* ค่าเริ่มต้นต้องซ่อนจริง */
  align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(10,32,36,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal.is-open{ display: flex; }

.modal__dialog{
  width: min(100%, 680px);
  max-height: min(88dvh, 720px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-in .22s ease-out;
}
@keyframes modal-in{
  from{ transform: translateY(14px); opacity: 0; }
  to  { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .modal__dialog{ animation: none; }
  html{ scroll-behavior: auto; }
}

.modal__header{
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff;
}
.modal__header h2{ margin: 0; font-size: 1.05rem; }
.modal__close{
  background: rgba(255,255,255,.16); border: 0; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; line-height: 1; flex: none;
}
.modal__close:hover{ background: rgba(255,255,255,.3); }

.modal__body{ padding: 18px; overflow-y: auto; }
.modal__footer{
  flex: none; padding: 12px 18px;
  background: #f7f9fa; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px;
}

body.modal-open{ overflow: hidden; }

/* รายละเอียดใน modal */
.detail-list{ margin: 0; }
.detail-list div{
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 14px;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.detail-list div:last-child{ border-bottom: 0; }
.detail-list dt{ color: var(--muted); font-size: .86rem; }
.detail-list dd{ margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px){
  .detail-list div{ grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 11. States / utilities ---------------------------------------- */
.state{
  text-align: center; color: var(--muted);
  padding: 40px 16px; margin: 0;
}
.state i{ display: block; font-size: 2rem; opacity: .35; margin-bottom: 10px; }
.state-error{ color: var(--danger); }

.notice{
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radius-sm); padding: 13px 15px;
  font-size: .93rem; line-height: 1.6;
  border: 1px solid; margin-bottom: 16px;
}
.notice i{ flex: none; margin-top: 3px; font-size: 1.05rem; }
.notice-info { background: var(--brand-050); border-color: var(--brand-100); color: #0e4f4f; }
.notice-warn { background: var(--warn-050); border-color: #f0dcb0; color: var(--warn); }
.notice-error{ background: var(--danger-050); border-color: #f2cccc; color: #9a2020; }
.notice-ok   { background: #e7f5ec; border-color: #bfe3cb; color: #1d6b32; }

.muted{ color: var(--muted); }
.text-center{ text-align: center; }
.stack > * + *{ margin-top: 14px; }
.hidden{ display: none !important; }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.prose h2{ color: var(--brand-700); margin-top: 1.6em; }
.prose h2:first-child{ margin-top: 0; }
.prose ol, .prose ul{ padding-left: 20px; }
.prose li{ margin-bottom: .4em; }

.stat-row{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.stat{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.stat__label{ font-size: .82rem; color: var(--muted); }
.stat__value{ font-size: 1.6rem; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; }

.chart-box{ position: relative; width: 100%; height: clamp(280px, 46vw, 440px); }

/* ---------- 12. Print ----------------------------------------------------- */
@media print{
  .site-header, .site-footer, .nav-toggle, .form-actions,
  .pagination, .search-bar, .modal{ display: none !important; }
  body{ background: #fff; }
  .card, .results, .user-card{ box-shadow: none; border-color: #ccc; }
  a[href]::after{ content: ""; }
}