/* ==================================================================
   ธีม "แดง-เหลืองธรรมศาสตร์" — ปรับใช้กับระบบฐานข้อมูลสำนักงานสภาฯ
   ------------------------------------------------------------------
   โทน: แดงหลัก #A4192C · แดงเข้ม #7C1420 · เหลืองทอง #F6C324
   ส่วนหน้าเว็บ (public) = ธีมใหม่  ·  ส่วนหลังบ้าน/แดชบอร์ด/PDF = ผสานของเดิม (ปรับสีตามธีมใหม่)
   ================================================================== */
:root {
    --brand:        #A4192C;   /* แดงหลักธรรมศาสตร์ */
    --brand-dark:   #7C1420;
    --brand-light:  #B93341;
    --brand-subtle: #FBEDEF;   /* พื้นแดงจาง (หัวตาราง/hover) */
    --gold:         #F6C324;   /* เหลืองทอง (เน้น/CTA) */
    --gold-dark:    #E8B01E;
    --accent:       #F6C324;   /* alias ของ --gold ให้เลย์เอาต์หลังบ้านเดิมใช้ต่อได้ */
    --ink:          #2A2A31;
    --ink-soft:     #6b6256;   /* ตัวอักษรรอง (โทนอุ่น) — เข้มพอผ่าน WCAG AA (≥4.5:1) */
    --surface:      #F7F4EE;   /* พื้นครีมอบอุ่น */
    --line:         #efe7d8;   /* เส้นขอบครีม */

    /* map เข้ากับตัวแปร Bootstrap เพื่อให้คอมโพเนนต์มาตรฐานเปลี่ยนสีตาม */
    --bs-primary:      #A4192C;
    --bs-primary-rgb:  164, 25, 44;
    --bs-link-color:          #A4192C;
    --bs-link-color-rgb:      164, 25, 44;
    --bs-link-hover-color:    #7C1420;
    --bs-border-radius:       .7rem;
    --bs-border-radius-lg:    1rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Sarabun', 'Leelawadee UI', sans-serif;
    background: var(--surface);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* หัวเรื่องใช้ IBM Plex Sans Thai ให้ดูโมเดิร์นขึ้น */
h1, h2, h3, .navbar-brand, .h1, .h2, .h3 {
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    letter-spacing: -.01em;
}

/* ---------- แถบ utility บาง ๆ เหนือ navbar ---------- */
.topbar {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
}
.topbar a { color: rgba(255, 255, 255, .85); text-decoration: none; }

/* ---------- Navbar ---------- */
.site-navbar {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.site-navbar .navbar-brand { font-weight: 700; color: var(--brand) !important; }
.site-navbar .navbar-brand img { border-radius: 50%; box-shadow: 0 2px 8px rgba(164, 31, 45, .25); }
.site-navbar .nav-link { color: #41414b; border-radius: .55rem; margin-inline: .1rem; padding-inline: .85rem; transition: background .15s ease, color .15s ease; }
.site-navbar .nav-link:hover { background: var(--brand-subtle); color: var(--brand); }
.site-navbar .nav-link.active { background: var(--brand-subtle); color: var(--brand) !important; font-weight: 700; }
.site-navbar .navbar-toggler { border-color: rgba(0, 0, 0, .1); }

/* ---------- Hero ---------- */
.hero-search {
    background:
        radial-gradient(900px 400px at 88% -40%, rgba(246, 195, 36, .3), transparent 60%),
        linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 60%, var(--brand-light) 100%);
    color: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.75rem rgba(94, 20, 32, .32);
}
.hero-search .form-control { border: 0; border-radius: .8rem 0 0 .8rem; font-size: 1.05rem; }
.hero-search .btn { border-radius: 0 .8rem .8rem 0; }

/* ---------- แถบสถิติ (ใส่การ์ด .stat-band ในหน้าแรก) ---------- */
.stat-band {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 .6rem 1.75rem rgba(94, 20, 32, .1);
    overflow: hidden;
}
.stat-band .stat { padding: 1.4rem 1rem; text-align: center; border-right: 1px solid #f0e9db; }
.stat-band .stat:last-child { border-right: 0; }
.stat-band .stat .num { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--brand); line-height: 1; }
.stat-band .stat .num::after { content: ""; display: block; width: 2rem; height: 3px; background: var(--gold); border-radius: 2px; margin: .55rem auto; }
.stat-band .stat .lbl { font-size: .87rem; color: var(--ink-soft); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(43, 43, 51, .05);
    overflow: hidden;
}
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; }

.list-group-item-action { transition: background .12s ease; }
.list-group-item-action:hover { background: var(--brand-subtle); }

/* ---------- Table ---------- */
.table { --bs-table-bg: #fff; }
.table thead th {
    white-space: nowrap;
    background: var(--brand-subtle);
    color: var(--brand-dark);
    border-bottom: 0;
    font-weight: 600;
}
.table-hover tbody tr:hover { background: var(--brand-subtle); }
.table > :not(caption) > * > * { padding: .85rem 1rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: .6rem; font-weight: 500; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-primary.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* ปุ่มค้นหา / CTA เหลืองทอง */
.btn-warning { background: var(--gold); border-color: var(--gold); color: var(--brand-dark); font-weight: 700; }
.btn-warning:hover, .btn-warning:focus { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--brand-dark); }
.btn-secondary { background: #8a7f70; border-color: #8a7f70; }
.btn-outline-secondary { color: #6b6b76; border-color: #d8cfbf; }
.btn-outline-secondary:hover { background: #6b6b76; border-color: #6b6b76; }

/* ---------- Badges (ป้ายประเภทเอกสาร/โมดูล) ---------- */
.badge { border-radius: .45rem; font-weight: 500; }
.text-bg-secondary { background: var(--brand) !important; color: #fff !important; }   /* ประเภทเอกสารทั่วไป → แดง */
.text-bg-info { background: #3A6EA5 !important; color: #fff !important; }              /* มติ/วาระ */
.text-bg-success { background: #217a49 !important; color: #fff !important; }           /* เกียรติยศ (คอนทราสต์ AA) */
.badge-cancelled { background: #8f5b64 !important; color: #fff; }                      /* ยกเลิก (คอนทราสต์ AA) */

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--brand); border-radius: .55rem; margin-inline: .12rem; border-color: var(--line); }
.pagination .page-link:hover { background: var(--brand-subtle); color: var(--brand-dark); }
.pagination .active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Module tiles (การ์ดเลือกหมวดในหน้าแรก) ---------- */
.module-card { transition: transform .15s ease, box-shadow .15s ease; border-radius: 1rem; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(94, 20, 32, .12); }
.module-card .ico { width: 3.25rem; height: 3.25rem; border-radius: .85rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

/* การ์ดชุดเรื่อง (หลังบ้าน โหมด "ชุดเรื่อง") */
.min-w-0 { min-width: 0; }
.series-card { cursor: pointer; border: 1px solid var(--line); }
.series-card:hover { border-color: var(--brand); }
.series-icon { width: 3rem; height: 3rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--brand-subtle); color: var(--brand); }
[data-bs-theme='dark'] .series-icon { background: rgba(164,25,44,.2); color: #ff9aa6; }

.breadcrumb-item + .breadcrumb-item::before { color: #c0b39a; }
.breadcrumb-item a { color: var(--ink-soft); text-decoration: none; }

.resolution-cell { max-width: 320px; }

/* ---------- มุมมองการ์ดบนจอมือถือ ---------- */
@media (max-width: 767.98px) {
    .hero-search h1 { font-size: 1.5rem; }
    .table-mobile thead { display: none; }
    .table-mobile tbody tr {
        display: block;
        padding: .75rem 1rem;
        /* ใช้ตัวแปรของ Bootstrap เพื่อให้โหมดมืดไม่ได้การ์ดพื้นขาวตัวหนังสือจาง */
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: .85rem;
        margin-bottom: .7rem;
    }
    .table-mobile tbody td {
        display: flex;
        gap: .6rem;
        border: 0;
        padding: .16rem 0;
        white-space: normal !important;
    }
    .table-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-soft);
        min-width: 6.5rem;
        flex-shrink: 0;
        font-size: .8rem;
    }
    .table-mobile tbody td:not([data-label])::before,
    .table-mobile tbody td[data-label='']::before { display: none; }
    .stat-band { display: grid !important; grid-template-columns: 1fr 1fr; }
    .stat-band .stat:nth-child(even) { border-right: 0; }
    .stat-band .stat { border-bottom: 1px solid #f0e9db; }
}

/* ================================================================
   โหมดมืด — โทนหรูขึ้น (พื้นเทา-ดำ คงแดง-เหลืองเป็นสีเน้น)
   ================================================================ */
[data-bs-theme='dark'] {
    --surface: #14151A;
    --brand-subtle: #241016;
    --line: rgba(255, 255, 255, .08);
    --ink: #E8E8EA;
    --ink-soft: #9a9aa5;
    --bs-body-bg: #14151A;
    --bs-body-color: #E8E8EA;
}
[data-bs-theme='dark'] body { background: var(--surface); color: var(--ink); }
[data-bs-theme='dark'] .site-navbar { background: #1A1B22; border-bottom-color: rgba(255, 255, 255, .07); }
[data-bs-theme='dark'] .site-navbar .navbar-brand { color: #fff !important; }
[data-bs-theme='dark'] .site-navbar .nav-link { color: #c3c3cc; }
[data-bs-theme='dark'] .site-navbar .nav-link:hover,
[data-bs-theme='dark'] .site-navbar .nav-link.active { background: rgba(246, 195, 36, .12); color: var(--gold) !important; }
[data-bs-theme='dark'] .card,
[data-bs-theme='dark'] .stat-band { background: #1C1D25; border-color: var(--line); box-shadow: none; }
[data-bs-theme='dark'] .card-header { background: #20212A; border-bottom-color: var(--line); }
[data-bs-theme='dark'] .table { --bs-table-bg: #1C1D25; color: var(--ink); }
[data-bs-theme='dark'] .table thead th { background: #241016; color: #ff9aa6; }
[data-bs-theme='dark'] .table-hover tbody tr:hover,
[data-bs-theme='dark'] .list-group-item-action:hover { background: rgba(164, 25, 44, .16); }
[data-bs-theme='dark'] .stat-band .stat { border-color: rgba(255, 255, 255, .07); }
[data-bs-theme='dark'] .stat-band .stat .num { color: #ff9aa6; }
[data-bs-theme='dark'] .btn-outline-secondary { color: #c3c3cc; border-color: rgba(255, 255, 255, .18); }
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select { background: #22232C; border-color: rgba(255, 255, 255, .12); color: var(--ink); }
[data-bs-theme='dark'] footer.bg-white { background: #1A1B22 !important; border-color: var(--line) !important; }
[data-bs-theme='dark'] .bg-light { background: #1A1B22 !important; }
[data-bs-theme='dark'] .text-dark { color: var(--ink) !important; }
[data-bs-theme='dark'] .breadcrumb-item a { color: var(--ink-soft); }

/* ================= Tom Select (searchable dropdown) ================= */
/* 1) กัน dropdown โดน card/overflow บัง — การ์ดที่มี Tom Select ให้ overflow มองเห็นได้
      (การ์ดฟอร์ม/ตัวกรอง/แถบ bulk ไม่ต้องตัดขอบ) + ยก dropdown ขึ้นทับ */
/* กัน dropdown (Tom Select + Bootstrap checkbox multi-filter) โดนการ์ด overflow บัง */
.card:has(.ts-wrapper), .card:has(.dropdown-menu),
.table-responsive:has(.ts-wrapper) { overflow: visible; }
form.card { overflow: visible; }   /* ฟอร์ม-การ์ด (ตัวกรอง/ลงทะเบียน) ไม่ต้องตัดขอบ — fallback เผื่อ :has ไม่รองรับ */
.ts-dropdown { z-index: 1080; }
.dropdown-menu { z-index: 1080; }

/* 2) ล้าง background/padding ของ .form-select ที่ Tom Select ก๊อปคลาสมาไว้ที่ wrapper
      (กันลูกศร caret ซ้อน + ช่องเพี้ยน) */
.ts-wrapper.form-select { background-image: none; padding: 0; }
.ts-wrapper.form-select,
.ts-wrapper.form-select-sm { height: auto; }

/* 3) คุมความสูง/ขนาดให้เท่า Bootstrap control */
.ts-control { min-height: calc(1.5em + .75rem + 2px); }
.ts-wrapper.form-select-sm .ts-control,
.form-select-sm.ts-wrapper .ts-control { min-height: calc(1.5em + .5rem + 2px); font-size: .875rem; padding-top: .15rem; padding-bottom: .15rem; }

/* 4) ในแถบ bulk (flex row) ไม่ให้ Tom Select ยืดเต็มแถว — กว้างพอดี ปุ่มอยู่ข้าง ๆ ได้
      (ในตัวกรอง/ฟอร์มที่อยู่ใน grid column ปล่อยให้เต็มคอลัมน์ตามปกติ) */
#bulkBar .ts-wrapper { flex: 0 0 auto; width: 15rem; max-width: 100%; }

/* โหมดมืด */
[data-bs-theme='dark'] .ts-control,
[data-bs-theme='dark'] .ts-wrapper.single .ts-control { background: #22232C; border-color: rgba(255, 255, 255, .12); color: var(--ink); }
[data-bs-theme='dark'] .ts-control input,
[data-bs-theme='dark'] .ts-control .item { color: var(--ink); }
[data-bs-theme='dark'] .ts-dropdown { background: #1C1D25; border-color: rgba(255, 255, 255, .12); color: var(--ink); }
[data-bs-theme='dark'] .ts-dropdown .active { background: rgba(164, 25, 44, .35); color: #fff; }
[data-bs-theme='dark'] .ts-dropdown .option:hover { background: rgba(164, 25, 44, .22); }

/* ================= ตัวกรองแบบติ๊กหลายรายการ (.fdrop) =================
   ใช้ทั้งหน้าเว็บสาธารณะและหลังบ้าน — สร้างจาก multi_filter_dropdown() ใน functions.php
   ประกอบด้วย ปุ่มเปิด · ช่องพิมพ์ค้นในเมนู (เมื่อรายการเยอะ) · รายการติ๊ก · แถวล่างปุ่มล้าง */
.fdrop .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    text-align: left;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
    color: var(--bs-body-color);
    transition: border-color .12s, box-shadow .12s;
}
.fdrop .dropdown-toggle::after { margin-left: auto; flex-shrink: 0; }
.fdrop .dropdown-toggle:hover { border-color: var(--brand-light); }
.fdrop .dropdown-toggle:focus-visible,
.fdrop .dropdown-toggle.show { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(164, 25, 44, .18); outline: 0; }
/* มีค่าที่เลือกอยู่ = ขอบ/ตัวอักษรสีแบรนด์ ให้เห็นชัดว่ากำลังกรองอยู่ */
.fdrop .dropdown-toggle.has-val { border-color: var(--brand); color: var(--brand); font-weight: 600; }

.fdrop .dropdown-menu {
    min-width: 100%;
    max-height: 22rem;
    overflow: hidden;
    padding: 0;
    flex-direction: column;      /* display เปิดตอน .show เท่านั้น ไม่งั้นเมนูจะค้างเปิด */
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
}
.fdrop .dropdown-menu.show { display: flex; }
.fdrop .fdrop-search { padding: .5rem; border-bottom: 1px solid var(--bs-border-color); }
.fdrop .fdrop-list { overflow-y: auto; padding: .35rem .5rem; }
.fdrop .fdrop-foot {
    border-top: 1px solid var(--bs-border-color);
    padding: .4rem .6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.fdrop .form-check { margin-bottom: .1rem; padding-left: 2rem; border-radius: .45rem; }
.fdrop .form-check:hover { background: var(--brand-subtle); }
.fdrop .form-check-label { width: 100%; padding: .28rem 0; cursor: pointer; }
[data-bs-theme='dark'] .fdrop .form-check:hover { background: rgba(164, 25, 44, .22); }
[data-bs-theme='dark'] .fdrop .dropdown-toggle { background: #22232C; border-color: rgba(255, 255, 255, .12); }

/* แถบสรุปตัวกรองที่เลือก (chip) — autofilter.js สร้างให้อัตโนมัติใต้แถวตัวกรอง */
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--bs-border-color); }
.fchip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    background: var(--brand-subtle);
    color: var(--brand-dark);
    border: 1px solid rgba(164, 25, 44, .25);
    border-radius: 2rem;
    padding: .18rem .6rem .18rem .7rem;
}
.fchip button { border: 0; background: none; line-height: 1; color: inherit; opacity: .6; padding: 0; }
.fchip button:hover, .fchip button:focus-visible { opacity: 1; }
[data-bs-theme='dark'] .fchip { background: rgba(164, 25, 44, .28); color: #f6d9dd; border-color: rgba(164, 25, 44, .5); }


/* ================= หน้าแรก (portal) =================
   การ์ดหมวดหลัก · ไทล์หมวดหมู่ · รายการล่าสุด/ดูมากที่สุด
   ใช้เฉพาะตอนเข้าหน้าแรกโดยยังไม่ค้นหา/กรอง (ถ้ากรองแล้วจะสลับไปโหมดตาราง) */
/* ---------- โซนค้นหา ---------- */
  .home-hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, var(--brand-light));
             border-radius: 1.25rem; color: #fff; }
  .home-hero .form-control { border: 0; }
  .home-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem;
             background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
             border-radius: 2rem; padding: .25rem .75rem; text-decoration: none; }
  .home-chip:hover { background: rgba(255,255,255,.26); color: #fff; }
  .home-chip .n { opacity: .7; font-size: .75rem; }

  /* ---------- การ์ดหมวดหลัก 3 ใบ ---------- */
  .home-main-card { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem;
                  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
                  border-radius: 1rem; text-decoration: none; color: inherit; height: 100%;
                  transition: transform .12s, box-shadow .12s, border-color .12s; }
  .home-main-card:hover { transform: translateY(-2px); border-color: var(--brand);
                        box-shadow: 0 .6rem 1.4rem rgba(164,25,44,.13); color: inherit; }
  .home-main-card .ico { flex: 0 0 auto; width: 3.1rem; height: 3.1rem; border-radius: .85rem;
                       display: grid; place-items: center; font-size: 1.4rem; color: #fff; }
  .home-main-card .n { font-size: 1.55rem; font-weight: 700; line-height: 1.1;
                     font-family: 'IBM Plex Sans Thai', sans-serif; }

  /* ---------- ไทล์หมวดหมู่ ---------- */
  .home-tile { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit;
             padding: .55rem; border-radius: .8rem; transition: background .12s; }
  .home-tile:hover { background: var(--brand-subtle); color: inherit; }
  [data-bs-theme='dark'] .home-tile:hover { background: rgba(164,25,44,.22); }
  .home-tile .ico { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: .75rem;
                  display: grid; place-items: center; color: #fff; font-size: 1.15rem; }
  .home-tile .t { font-size: .9rem; line-height: 1.25; }
  .home-tile .n { font-size: .76rem; color: var(--bs-secondary-color); }

  /* ---------- รายการล่าสุด / ดูมากที่สุด ---------- */
  .home-item { display: flex; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color); }
  .home-item:last-child { border-bottom: 0; }
  .home-date { flex: 0 0 auto; width: 3.4rem; text-align: center; border-radius: .6rem;
             padding: .35rem .2rem; color: #fff; line-height: 1.15; }
  .home-date .d { font-size: 1.15rem; font-weight: 700; }
  .home-date .m { font-size: .68rem; opacity: .9; }
  .home-date .y { font-size: .68rem; opacity: .75; }
  .home-item .ttl { font-size: .95rem; line-height: 1.4; text-decoration: none; color: inherit;
                  display: block; font-weight: 500; }
  .home-item .ttl:hover { color: var(--brand); }
  .home-tag { font-size: .72rem; background: var(--brand-subtle); color: var(--brand-dark);
            border-radius: .4rem; padding: .1rem .45rem; }
  [data-bs-theme='dark'] .home-tag { background: rgba(164,25,44,.3); color: #f6d9dd; }
  .home-sec-head { display: flex; align-items: center; justify-content: space-between;
                 border-bottom: 2px solid var(--brand); padding-bottom: .5rem; margin-bottom: .25rem; }

/* ---------- เป้าสัมผัสบนมือถือ (ตามแนวทาง 44px ของ iOS/Android) ---------- */
@media (max-width: 767.98px) {
    /* ปุ่มไอคอนในคอลัมน์จัดการของตาราง — เดิม ~31px ห่างกัน 4px กดพลาดง่าย */
    .table-mobile .d-inline-flex.gap-1 { gap: .5rem !important; }
    .table-mobile .d-inline-flex.gap-1 > *,
    .table-mobile .d-inline-flex.gap-1 > form > .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* รายการติ๊กในเมนูตัวกรอง — เพิ่มความสูงต่อแถวให้กดง่าย */
    .fdrop .form-check-label { padding: .5rem 0; }
    /* ชิปค้นด่วนหน้าแรก */
    .home-chip { padding: .4rem .8rem; }
}

/* ปุ่มสลับธีมบน navbar */
#themeToggle {
    background: #f2efe9;
    border: 0;
    color: #41414b;
    border-radius: .55rem;
    padding: .35rem .65rem;
    line-height: 1;
}
#themeToggle:hover { background: #e7e2d8; }
[data-bs-theme='dark'] #themeToggle { background: rgba(255, 255, 255, .08); color: var(--gold); }
[data-bs-theme='dark'] #themeToggle:hover { background: rgba(255, 255, 255, .16); }

/* กล่องผลค้นหาแบบพิมพ์แล้วเจอเลย (live search) */
.live-search-wrap { position: relative; }
#liveResults {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    text-align: left;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: .85rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .25);
}
#liveResults .list-group-item small { display: block; }

/* ==================================================================
   Backoffice — เลย์เอาต์แถบข้าง (sidebar)  [ผสานจากธีมเดิม ปรับสีตามธีมใหม่]
   ================================================================== */
.admin-body {
    background: var(--surface);
    min-height: 100vh;
}
.admin-sidebar {
    width: 250px;
    flex-direction: column;
    background: linear-gradient(180deg, #1f1d22 0%, var(--brand-dark) 120%);
    color: #e9e6e7;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1035;
    padding: 0;
}
.admin-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    letter-spacing: .01em;
}
.admin-brand .bi { color: var(--accent); }
.admin-nav { flex: 1 1 auto; overflow-y: auto; padding: .75rem .6rem; }
.admin-nav-group {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .38);
    padding: .9rem .65rem .35rem;
}
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    margin-bottom: .12rem;
    border-radius: .55rem;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: .95rem;
    transition: background .13s ease, color .13s ease;
}
.admin-nav-link .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.admin-nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav-link.active {
    background: var(--accent);
    color: #3a2c00;
    font-weight: 600;
    box-shadow: 0 .2rem .5rem rgba(246, 195, 36, .3);
}
.admin-side-foot {
    padding: .6rem .6rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.admin-offcanvas { width: 250px !important; }

.admin-main {
    margin-left: 250px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
@media (max-width: 991.98px) { .admin-main { margin-left: 0; } }
.admin-topbar {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid rgba(43, 43, 51, .09);
    padding: .6rem 1.1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.admin-content { padding: 1.5rem 1.25rem; flex: 1 1 auto; }

[data-bs-theme='dark'] .admin-topbar { background: #1d1e23; border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme='dark'] .admin-topbar .btn-light { background: #2a2b31; border-color: #2a2b31; color: #e8e8ea; }

/* การ์ดสถิติบน dashboard */
.stat-card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    color: #fff;
    box-shadow: 0 .4rem 1rem rgba(40, 38, 43, .12);
}
.stat-card .stat-icon {
    position: absolute;
    right: .5rem; bottom: -.4rem;
    font-size: 3.6rem;
    opacity: .18;
}
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { opacity: .9; font-size: .9rem; }
.stat-card.s-doc   { background: linear-gradient(135deg, #A4192C, #B93341); }
.stat-card.s-meet  { background: linear-gradient(135deg, #1d6a8a, #2f9fc1); }
.stat-card.s-honor { background: linear-gradient(135deg, #1f7a4d, #34b06e); }
.stat-card.s-file  { background: linear-gradient(135deg, #5a4a86, #7a67b0); }
.stat-card.s-view  { background: linear-gradient(135deg, #b5701a, #e0a03f); }
.stat-card.s-disk  { background: linear-gradient(135deg, #555, #888); }
.stat-card a.stretched-link { color: #fff; }

/* หน้าอ่าน PDF ในเว็บ (PDF.js) */
.pdf-viewer-card { overflow: hidden; }
.pdf-pages {
    background: #525659; /* สีพื้นมาตรฐานของ PDF viewer */
    padding: .75rem;
    height: calc(100vh - 260px);
    height: calc(100dvh - 260px); /* dvh กันปัญหา address bar บนมือถือ */
    min-height: 480px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.pdf-page {
    margin: 0 auto .75rem;
    background: #fff;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .4);
    position: relative;      /* ให้ .textLayer ซ้อนทับได้ */
}
.pdf-page canvas { display: block; max-width: 100%; }

/* ชั้นข้อความโปร่งใสซ้อนบน canvas (เลือก/คัดลอก/screen reader อ่านได้) */
.pdf-page .textLayer {
    position: absolute;
    left: 0; top: 0;
    overflow: hidden;
    line-height: 1;
    opacity: 0.2;
}
.pdf-page .textLayer > span {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}
.pdf-page .textLayer ::selection { background: #2a6ed4; }

/* ปุ่มกลับขึ้นด้านบน */
#backToTop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: 0;
    font-size: 1.2rem;
    box-shadow: 0 .4rem 1rem rgba(94, 20, 32, .35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1040;
}
#backToTop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#backToTop:hover { background: var(--brand-dark); }