@font-face {
    font-family: 'TH Sarabun Web';
    src: url('fonts/THSarabun.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TH Sarabun Web';
    src: url('fonts/THSarabun Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/*
  ขนาดตัวอักษรและระยะห่างทั้งหมดใช้หน่วย rem อ้างอิงจาก --ui-scale ตัวเดียว
  ปรับตัวเลขบรรทัดเดียวนี้ ทั้งระบบจะย่อ/ขยายตามพร้อมกันโดยสัดส่วนไม่เพี้ยน
      1   = ขนาดเดิม
      1.5 = ใหญ่ขึ้นครึ่งหนึ่ง
      2   = ใหญ่ขึ้นสองเท่า  (ค่าที่ใช้อยู่)
*/
:root {
    --ui-scale: 1.5;

    --brand: #10a8ec;
    --brand-dark: #0b7fc0;
    --brand-deep: #0a6ba3;
    --brand-light: #6ecdf7;
    --brand-pale: #e8f6fe;
    --sky-gradient: linear-gradient(100deg, #74cbf5 0%, #22b0f0 45%, #00a2ea 100%);

    --ink: #22323d;
    --muted: #64748b;
    --line: #dbe3ec;
    --danger: #c0392b;

    /*
       ธีมนูนต่ำ (neumorphism)

       พื้นหลังต้องไม่ใช่สีขาวบริสุทธิ์ มิฉะนั้นเงาด้านสว่างจะมองไม่เห็นเลย
       และรูปนูนจะหายไปทั้งหมด จึงใช้ขาวอมเทาอ่อนมาก ซึ่งสายตายังอ่านว่าขาว
       เงาสองทิศตามตัวอย่าง ขาวจากมุมบนซ้าย เทาน้ำเงินจากมุมล่างขวา
    */
    --page-bg: #eef1f6;
    --surface: #eef1f6;
    --soft-light: #ffffff;
    --soft-dark: #b9c3d1;

    --soft-out: -6px -6px 14px var(--soft-light), 6px 6px 14px var(--soft-dark);
    --soft-out-lg: -10px -10px 22px var(--soft-light), 10px 10px 22px var(--soft-dark);
    --soft-in: inset -5px -5px 11px var(--soft-light), inset 5px 5px 11px var(--soft-dark);
    --soft-in-sm: inset -3px -3px 7px var(--soft-light), inset 3px 3px 7px var(--soft-dark);
}

html { font-size: calc(16px * var(--ui-scale)); }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: 'TH Sarabun Web', 'TH SarabunPSK', 'Sarabun', 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    line-height: 1.55;
}

a { color: var(--brand-dark); }

.container { max-width: 65rem; margin: 0 auto; padding: 0 1.125rem; }

/* ---- แถบบนสุด ---- */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0.875rem 0;
}
.topbar .container { display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap; }
.topbar .brand {
    font-size: 1.25rem; font-weight: bold;
    color: var(--brand-dark); text-decoration: none;
}

/* ---- แถบหัวเรื่องแบบไล่สีฟ้า ---- */
/* ทุกอย่างอยู่บรรทัดเดียว เพื่อไม่ให้แถบสีกินพื้นที่หน้าจอมากเกินไป */
.hero {
    background: var(--sky-gradient);
    color: #fff;
    padding: 0.75rem 0;
    text-align: center;
}
.hero h1 {
    display: flex; align-items: baseline; justify-content: center;
    flex-wrap: wrap; gap: 0.75rem;
    margin: 0; font-size: 1.75rem; font-weight: bold; letter-spacing: .5px;
}
.hero-sub {
    font-size: 1.125rem; font-weight: bold; opacity: .95;
    border-left: 1px solid rgba(255, 255, 255, .5);
    padding-left: 0.75rem;
}
@media (max-width: 42rem) {
    .hero-sub { border-left: none; padding-left: 0; }
}

.page { padding: 1.625rem 0 3.75rem; }

.page-title { font-size: 1.75rem; margin: 0 0 0.375rem; color: var(--brand-deep); }
.lead { color: var(--muted); margin: 0 0 1.375rem; }
.crumb { margin: 0 0 0.875rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    padding: 1.375rem 1.5rem;
    margin-bottom: 1.125rem;
    box-shadow: 0 1px 3px rgba(16, 90, 130, .06);
}

h2 {
    font-size: 1.4375rem; margin: 0 0 0.875rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
    color: var(--brand-deep);
}

/* ---- การ์ดกลุ่มงานหลักในหน้าแรก ---- */
.group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
    margin-bottom: 1.375rem;
}
@media (max-width: 1100px) { .group-grid { grid-template-columns: 1fr; } }

.group-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--accent, var(--brand));
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 90, 130, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}
.group-card:hover { box-shadow: 0 6px 18px rgba(16, 90, 130, .13); transform: translateY(-2px); }

.group-head { padding: 1.125rem 1.25rem 0.75rem; }
.group-head h2 {
    margin: 0; padding: 0; border: none;
    font-size: 1.5rem; color: var(--accent, var(--brand));
}
.group-head p { margin: 0.25rem 0 0; color: var(--muted); font-size: 1.0625rem; }

.sub-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.sub-list li { border-top: 1px solid var(--line); }
.sub-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
    padding: 0.6875rem 1.25rem; text-decoration: none; color: inherit;
}
.sub-list a:hover { background: var(--brand-pale); }
.sub-list a .t { font-weight: bold; color: var(--brand-dark); }
.sub-list li.empty {
    display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
    padding: 0.6875rem 1.25rem; color: #9aa9b3;
}

.badge {
    font-size: 0.9375rem; padding: 0.0625rem 0.625rem; border-radius: 999px;
    background: #eef3f7; color: var(--muted); white-space: nowrap;
}
.badge.count {
    background: var(--accent, var(--brand)); color: #fff; font-weight: bold;
    min-width: 1.875rem; text-align: center;
}



/* ---- แท็บหมวดแบบฟอร์ม ---- */
.tabwrap { margin-bottom: 1.125rem; }

.tabs {
    display: flex; flex-wrap: wrap; gap: 0.375rem;
    border-bottom: 2px solid var(--line);
    margin-bottom: 1.125rem;
}
.tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5625rem 1rem;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    margin-bottom: -2px;
    color: var(--muted); text-decoration: none; white-space: nowrap;
}
.tab:hover { background: var(--brand-pale); color: var(--brand-dark); }
.tab svg { width: 1.25rem; height: 1.25rem; flex: none; }
.tab.active {
    background: #fff;
    border-color: var(--line);
    border-bottom: 2px solid #fff;
    color: var(--accent, var(--brand-dark));
    font-weight: bold;
}
.tab-count {
    font-size: 0.9375rem; padding: 0 0.5rem; border-radius: 999px;
    background: #eef3f7; color: var(--muted);
}
.tab.active .tab-count { background: var(--accent, var(--brand)); color: #fff; }

.tabpanel { min-height: 3.75rem; }

.section-head {
    display: flex; align-items: center; gap: 0.4375rem;
    color: var(--muted); font-size: 1.125rem;
    margin: 0.25rem 0 0.625rem;
}
.section-head svg { width: 1.125rem; height: 1.125rem; flex: none; }

.empty-note {
    background: #fff; border: 1px dashed var(--line); border-radius: 0.625rem;
    padding: 1.625rem; text-align: center; color: var(--muted); margin: 0;
}

/* ---- การ์ดแบบฟอร์ม ---- */
.form-cards { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.25rem; }

.form-card {
    display: flex; align-items: center; gap: 0.875rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    padding: 0.8125rem 1rem;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-card:hover {
    border-color: var(--accent, var(--brand));
    box-shadow: 0 3px 12px rgba(16, 90, 130, .12);
}
.fc-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.625rem; height: 2.625rem; flex: none;
    border-radius: 0.5625rem;
    background: var(--accent, var(--brand)); color: #fff;
}
.fc-icon svg { width: 1.375rem; height: 1.375rem; }
.fc-text { flex: 1; min-width: 0; }
.fc-title { display: block; font-weight: bold; color: var(--brand-dark); font-size: 1.3125rem; }
.fc-desc { display: block; color: var(--muted); font-size: 1.0625rem; }
.fc-go { flex: none; color: var(--muted); font-size: 1.5rem; }
.form-card:hover .fc-go { color: var(--accent, var(--brand)); }

/* ---- รายการแบบฟอร์มแบบเรียบ (ใช้เมื่อไม่ได้กำหนดหมวด) ---- */
.form-list { list-style: none; padding: 0; margin: 0; }
.form-list li { border-bottom: 1px solid var(--line); }
.form-list li:last-child { border-bottom: none; }
.form-list a { display: block; padding: 0.9375rem 0.375rem; text-decoration: none; color: inherit; }
.form-list a:hover { background: var(--brand-pale); }
.form-list .t { display: block; font-weight: bold; color: var(--brand-dark); font-size: 1.375rem; }
.form-list .d { display: block; color: var(--muted); font-size: 1.125rem; }

/* ---- ตารางกริดอย่างง่าย แทน bootstrap เพื่อไม่ต้องพึ่ง CDN ---- */
.row { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; }
[class^="col-md-"] { padding: 0 0.5rem; margin-bottom: 1rem; }
.col-md-3  { width: 25%; }
.col-md-4  { width: 33.3333%; }
.col-md-5  { width: 41.6667%; }
.col-md-6  { width: 50%; }
.col-md-7  { width: 58.3333%; }
.col-md-8  { width: 66.6667%; }
.col-md-12 { width: 100%; }

label { display: block; font-weight: bold; margin-bottom: 0.25rem; }
label .req { color: var(--danger); }

/* ต้องระบุ password กับ number ด้วย ไม่งั้นสองชนิดนี้จะไม่ได้ความกว้างและระยะขอบ
   แล้วช่องรหัสผ่านจะเล็กกว่าช่องอื่นจนดูเหมือนเส้นขีดเส้นเดียว */
input[type=text], input[type=tel], input[type=date], input[type=password],
input[type=number], select, textarea {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    font-family: inherit;
    font-size: 1.1875rem;
    color: var(--ink);
    border: 1px solid #b9cddb;
    border-radius: 0.375rem;
    background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(16, 168, 236, .18);
}
input.invalid, select.invalid { border-color: var(--danger); background: #fff5f5; }

.hint { display: block; color: var(--muted); font-size: 1rem; margin-top: 0.1875rem; }

/* ช่องที่ใช้ร่วมกันทุกแถว วางไว้ใต้รายการและคั่นด้วยเส้นบาง ๆ */
.shared-fields {
    padding-top: 1.125rem;
    margin-top: 1.125rem;
    border-top: 1px dashed var(--line);
}

/* ---- ตารางรายชื่อ ---- */
.repeater-row {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    background: #f7fbfe; border: 1px solid var(--line);
    border-radius: 0.5rem; padding: 0.75rem 0.5rem 0; margin-bottom: 0.75rem;
}
.repeater-row .row-no {
    width: 2.125rem; text-align: center; font-weight: bold;
    color: var(--brand-dark); padding-bottom: 1.5rem;
}
.repeater-row .row-fields { flex: 1; display: flex; flex-wrap: wrap; margin: 0 -0.5rem; }
.repeater-row .row-del { padding: 0 0.5rem 1.5rem; }

.btn {
    display: inline-block; font-family: inherit; font-size: 1.1875rem;
    padding: 0.5rem 1.25rem; border-radius: 0.375rem; border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { background: #fff; color: var(--brand-dark); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-pale); }
.btn-danger-link { background: none; border: none; color: var(--danger); cursor: pointer; font-family: inherit; font-size: 1.125rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }

/* ---- CAPTCHA ---- */
.captcha { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.captcha img { border: 1px solid var(--line); border-radius: 0.375rem; display: block; }
.captcha input { width: 10.625rem; letter-spacing: 3px; text-transform: uppercase; }

/* ---- แจ้งเตือน ---- */
.alert { border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1.125rem; border: 1px solid; }
.alert-error { background: #fdf1f0; border-color: #f0b4ad; color: var(--danger); }
.alert-warn  { background: #fff8e6; border-color: #ffd88a; color: #8a5a00; }
.alert ul { margin: 0.375rem 0 0; padding-left: 1.375rem; }

footer {
    color: var(--muted); font-size: 1.0625rem; text-align: center;
    padding: 1.25rem 0 2.5rem;
    border-top: 1px solid var(--line);
    background: #fff;
}

/*
  จอแคบ: ยุบคอลัมน์เป็นแถวเดียว
  ใช้ em เพื่อให้จุดตัดขยับตาม --ui-scale ด้วย ไม่งั้นพอตัวอักษรใหญ่ขึ้น
  จอเดิมจะกลายเป็นแคบเกินไปแต่ยังถูกจัดเป็นหลายคอลัมน์อยู่
*/
@media (max-width: 60rem) {
    [class^="col-md-"] { width: 100%; }
}
@media (max-width: 42rem) {
    .fc-desc { display: none; }
    /* มือถือ: แท็บหมวดต้องมีชื่อกำกับเสมอ ไอคอนอย่างเดียวผู้ใช้เดาไม่ออก จึงเรียงเป็นรายการทีละแถวเต็มความกว้างแทน */
    .hero h1 { font-size: 2rem; }
}

/* ---- ล็อกอินและแถบผู้ใช้ ---- */
/*
   หน้าเข้าสู่ระบบ

   หัวเรื่อง คำอธิบาย และปุ่ม จัดกึ่งกลาง
   แต่ป้ายชื่อช่องกับข้อความช่วยเหลือยังชิดซ้ายตามเดิม
   เพราะข้อความที่จัดกึ่งกลางทั้งหมดจะทำให้สายตาไล่อ่านฟอร์มยากขึ้น
*/
.login-wrap { max-width: 32rem; margin-left: auto; margin-right: auto; }
.login-wrap .page-title,
.login-wrap .lead { text-align: center; }
.login-wrap .card { padding: 1.75rem 1.5rem; }
.login-wrap .field + .field { margin-top: 1.1rem; }
.login-wrap input[type="text"],
.login-wrap input[type="password"] { width: 100%; }
.login-wrap .actions { display: flex; justify-content: center; }
.login-wrap .actions .btn { padding: 0.55rem 2.25rem; font-size: 1.15rem; }

/*
   แถบบนสุดพื้นขาว ตัวอักษรจึงต้องเป็นสีเข้ม
   เคยตั้งเป็นสีขาวมาก่อน ผลคือปุ่มออกจากระบบอยู่ตรงนั้นจริงแต่มองไม่เห็นเลย
   .topbar .container เป็น flex อยู่แล้ว จึงดันไปทางขวาด้วย margin-left auto
   ไม่ใช่ float ซึ่งใช้กับ flex ไม่ได้
*/
.userbox {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}
.userbox-name {
    color: var(--muted);
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.userbox-out {
    color: var(--brand-dark);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    padding: 0.15rem 0.7rem;
    white-space: nowrap;
}
.userbox-out:hover { background: var(--brand-pale); border-color: var(--brand-light); }

@media (max-width: 45rem) {
    .userbox { margin-left: 0; width: 100%; }
    .userbox-name { max-width: 60%; }
}
.userbox-link {
    color: var(--brand-dark);
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}
.userbox-link:hover { text-decoration: underline; }

/* ---- หน้าประวัติแบบฟอร์ม ---- */
.doc-group + .doc-group { margin-top: 1.25rem; }
.doc-group h2 { margin-top: 0; }

.doc-list { list-style: none; margin: 0; padding: 0; }

.doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 0;
    border-top: 1px solid var(--line);
}
.doc-item:first-child { border-top: 0; }

.doc-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 14rem; flex: 1 1 20rem; }
.doc-section {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.5rem 1.1rem 0.25rem;
}
.doc-section + .doc-section { margin-top: 1rem; }
.doc-section h3 { margin: 0.4rem 0 0.25rem; font-size: 1.1rem; }
.doc-detail { font-size: 0.98rem; }

.doc-title { font-weight: bold; }
.doc-meta { color: var(--muted); font-size: 0.95rem; }

.doc-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.doc-actions .btn { padding: 0.25rem 0.9rem; font-size: 1rem; }
.doc-del { display: inline; margin: 0; }

/* ---- ปุ่มดาวน์โหลดพร้อมแถบสถานะ ---- */
.btn-download {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.btn-download .dl-icon { display: inline-flex; line-height: 0; }
.btn-download .dl-icon svg { width: 1.2em; height: 1.2em; }
.btn-download .dl-icon-done { display: none; }
.btn-download.is-loading { cursor: progress; }
.btn-download.is-loading .dl-icon-idle svg { animation: dl-drop 0.9s ease-in-out infinite; }
.btn-download.is-done .dl-icon-idle { display: none; }
.btn-download.is-done .dl-icon-done { display: inline-flex; animation: dl-pop 0.3s ease-out; }

/* แถบสถานะใช้สีเดียวกับตัวอักษรของปุ่ม จึงมองเห็นได้ทั้งปุ่มพื้นสีและปุ่มพื้นอ่อน */
.btn-download .dl-bar {
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.25rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(16, 168, 236, 0.18);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.btn-download.is-loading .dl-bar,
.btn-download.is-done .dl-bar { opacity: 1; }
.btn-download .dl-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    transition: width 0.2s linear;
}

@keyframes dl-drop {
    0%, 100% { transform: translateY(-2px); opacity: 0.55; }
    50%      { transform: translateY(2px);  opacity: 1; }
}
@keyframes dl-pop {
    from { transform: scale(0.6); }
    to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-download .dl-icon svg { animation: none !important; }
    .btn-download .dl-fill { transition: none; }
}

.btn-danger {
    background: #fff;
    color: var(--danger);
    border: 1px solid var(--danger);
    cursor: pointer;
    font-family: inherit;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.alert-ok {
    background: #e9f8ee;
    border: 1px solid #9dd9b4;
    color: #1d6b3c;
}

@media (max-width: 45rem) {
    .doc-item { align-items: flex-start; }
    .doc-actions { width: 100%; }
}

/* =======================================================================
   ธีมนูนต่ำ พื้นขาว

   ส่วนนี้เขียนทับสไตล์เดิมที่อยู่ด้านบน จงใจวางไว้ท้ายไฟล์
   เพื่อให้ย้อนกลับได้ง่ายด้วยการลบทั้งบล็อกนี้ ไม่ต้องไล่แก้ทีละจุด

   หลักที่ยึด รูปนูนใช้กับพื้นผิวและปุ่มเท่านั้น ไม่ใช้กับตัวอักษร
   เพราะเงาบนตัวอักษรทำให้อ่านยากและคนสายตาไม่ดีจะใช้งานไม่ได้
   ตัวอักษรจึงยังคงสีเข้มตัดกับพื้นชัดเจนเหมือนเดิม
   ======================================================================= */

body { background: var(--page-bg); }

/* ---- ไอคอน ---- */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.18em;
}

/* ---- แถบบนสุด ---- */
.topbar {
    background: var(--surface);
    border-bottom: 0;
    box-shadow: 0 4px 12px rgba(148, 163, 184, .18);
    position: relative;
    z-index: 2;
}

/* ---- แถบหัวเรื่อง เปลี่ยนจากแถบสีฟ้าทึบเป็นพื้นขาวนูน ---- */
.hero {
    background: var(--surface);
    color: var(--brand-deep);
    padding: 1.5rem 0 0.25rem;
}
.hero h1 { font-size: 2rem; }
.hero .hero-sub {
    color: var(--muted);
    border-left: 2px solid var(--soft-dark);
}

/* ---- การ์ด ---- */
.card {
    background: var(--surface);
    border: 0;
    border-radius: 1.125rem;
    box-shadow: var(--soft-out);
}

h2 { border-bottom: 0; padding-bottom: 0.25rem; }

/* ---- การ์ดกลุ่มงาน ---- */
.group-card {
    background: var(--surface);
    border: 0;
    border-top: 0;
    border-radius: 1.25rem;
    box-shadow: var(--soft-out);
    overflow: visible;
    transition: box-shadow .18s ease, transform .18s ease;
}
/* ยกขึ้นเล็กน้อยพร้อมขยายเงา ตามตัวอย่างปุ่มนูนที่ส่งมา */
.group-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--soft-out-lg);
}

/* แถบสีประจำกลุ่มงาน ย้ายจากขอบบนมาเป็นจุดสีข้างหัวเรื่อง */
.group-head { padding: 1.25rem 1.375rem 0.75rem; }
.group-head h2 {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--accent, var(--brand));
}
.group-head h2::before {
    content: "";
    width: 0.7rem; height: 1.5rem;
    border-radius: 1rem;
    background: var(--accent, var(--brand));
    flex: none;
}

/* ---- รายการกลุ่มงานย่อย ---- */
.sub-list { padding: 0 0.75rem 1rem; }
.sub-list li { border-top: 0; }
.sub-list li + li { margin-top: 0.35rem; }

.sub-list a,
.sub-list li.empty {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 0.85rem;
    padding: 0.6rem 0.75rem;
    transition: box-shadow .16s ease, color .16s ease;
}
/* ชื่อกลุ่มงานย่อยต้องอยู่บรรทัดเดียว ถ้าตกบรรทัดการ์ดจะสูงไม่เท่ากันทั้งสามใบ */
.sub-list a .t,
.sub-list li.empty .t {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.sub-list a { box-shadow: none; }
.sub-list a:hover {
    background: transparent;
    box-shadow: var(--soft-in-sm);
}
.sub-list li.empty { color: #9aa9b3; opacity: .8; }

/* ไอคอนประจำกลุ่มงานย่อย วางในวงกลมนูนเล็ก ๆ */
.sub-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; flex: none;
    margin-right: 0.6rem;
    border-radius: 50%;
    color: var(--accent, var(--brand));
    box-shadow: var(--soft-out);
}
.sub-icon .icon { width: 1.05rem; height: 1.05rem; vertical-align: 0; }




/* ---- ป้ายตัวเลข ---- */
.badge {
    box-shadow: var(--soft-in-sm);
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 0.1rem 0.6rem;
}
/*
   ต้องระบุ background ซ้ำตรงนี้ด้วย เพราะ .badge.count ด้านบนของไฟล์
   มีความจำเพาะสูงกว่า .badge เพียงตัวเดียว ถ้าไม่เขียนทับ พื้นสีทึบเดิมจะยังอยู่
   แล้วป้ายตัวเลขจะกลายเป็นวงกลมสีทึบก้อนใหญ่
*/
.badge.count {
    background: transparent;
    color: var(--accent, var(--brand-dark));
    font-weight: bold;
    min-width: 1.6rem;
}

/* ---- ปุ่ม ---- */
.btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border: 0;
    border-radius: 0.8rem;
    background: var(--surface);
    box-shadow: var(--soft-out);
    transition: box-shadow .16s ease, transform .16s ease;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--soft-out-lg); }
/* กดแล้วยุบลงไป ใช้เงาด้านในตามตัวอย่างปุ่มแบบกด */
.btn:active { transform: translateY(0); box-shadow: var(--soft-in); }

.btn-primary { background: var(--surface); color: var(--brand-deep); font-weight: bold; }
.btn-outline { background: var(--surface); color: var(--muted); }
.btn-danger  { background: var(--surface); color: var(--danger); }
.btn-danger:hover { background: var(--surface); color: var(--danger); }

/* ---- ช่องกรอก เงาด้านในให้ดูเป็นร่อง ---- */
input[type="text"], input[type="password"], input[type="date"],
input[type="number"], select, textarea {
    background: var(--surface);
    border: 0;
    border-radius: 0.7rem;
    box-shadow: var(--soft-in-sm);
    color: var(--ink);
    font-family: inherit;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
    outline: 2px solid var(--brand-light);
    outline-offset: 2px;
    box-shadow: var(--soft-in);
}

/* ---- แถบผู้ใช้ ---- */
.userbox-link, .userbox-out {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 0;
    border-radius: 0.7rem;
    padding: 0.3rem 0.75rem;
    box-shadow: var(--soft-out);
    transition: box-shadow .16s ease;
}
.userbox-link:hover, .userbox-out:hover {
    background: transparent;
    box-shadow: var(--soft-in-sm);
    text-decoration: none;
}

/* ---- หน้าประวัติ ---- */
.doc-item { border-top: 0; }
.doc-item + .doc-item { border-top: 1px solid var(--line); }
.doc-actions .btn { padding: 0.35rem 0.85rem; }

/* ---- กล่องแจ้งเตือน ---- */
.alert {
    border: 0;
    border-radius: 0.9rem;
    box-shadow: var(--soft-out);
}

/* ---- แท็บหมวด ---- */
.tabs a, .tabs span {
    border: 0;
    border-radius: 0.8rem 0.8rem 0 0;
    background: transparent;
}
.tabs a { box-shadow: var(--soft-in-sm); }
.tabs .active, .tabs a.active { box-shadow: var(--soft-out); color: var(--accent, var(--brand-dark)); }
.tabs .tab-count { border-radius: 999px; }
/* ---- ท้ายหน้า ---- */
footer {
    background: var(--surface);
    border-top: 0;
    box-shadow: 0 -4px 12px rgba(148, 163, 184, .14);
}

/* ---- แถบสีประจำกลุ่มงานใช้กับหัวเรื่องในหน้ารายการด้วย ---- */
.tabwrap .page-title { color: var(--accent, var(--brand-deep)); }

/* ---- หน้าฟอร์ม ---- */
.field + .field { margin-top: 1rem; }
label { font-weight: bold; }
.req { color: var(--danger); }
.hint { color: var(--muted); font-size: 0.95rem; }

/* ปุ่มรีเฟรชรหัสภาพกับรูปรหัสภาพ ให้เข้าธีมเดียวกัน */
.captcha img {
    border-radius: 0.7rem;
    box-shadow: var(--soft-out);
    background: var(--surface);
    padding: 0.25rem;
}
/* ---- สวิตช์เปิดปิดในหน้าตั้งค่า ---- */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: 0.8rem;
    box-shadow: var(--soft-in-sm);
    cursor: pointer;
    font-weight: bold;
}
.switch input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.switch span { font-weight: bold; }
/* ซ่อนโดยยังกินพื้นที่เท่าเดิม ใช้แทนการเขียน style ลงในแท็กซึ่ง CSP บล็อก */
.is-hidden { visibility: hidden; }
/* ---- แถวปุ่มท้ายฟอร์ม ---- */
/*
   จัดกึ่งกลาง ให้ปุ่มหลักอยู่ตรงกลางสายตาหลังกรอกฟอร์มเสร็จ
   ใช้กับ .actions ทั่วไป ส่วนปุ่มในรายการเอกสารเป็นคนละคลาส (.doc-actions) จึงไม่ได้รับผล
*/
.actions {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/*
   ปุ่มยกเลิกเป็นสีแดงเมื่อชี้ เพื่อเตือนว่ากดแล้วข้อมูลที่กรอกไว้จะหายไป
   ใช้คลาสเฉพาะ ไม่แก้ที่ .btn-outline ทั้งหมด
   มิฉะนั้นปุ่ม "แก้ไข" ในหน้าประวัติซึ่งใช้คลาสเดียวกันจะกลายเป็นสีแดงไปด้วย
*/
.btn-cancel:hover {
    color: var(--danger);
    box-shadow: var(--soft-out-lg);
}
.btn-cancel:active { box-shadow: var(--soft-in); }
/* ---- ป้ายประเภทหนังสือ (หนังสือภายนอก / บันทึกข้อความ) ---- */
.doctype {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.05rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.45;
    white-space: nowrap;
    vertical-align: 0.15em;
    box-shadow: var(--soft-in-sm);
}
.doctype-external { color: #0b7fc0; }
.doctype-internal { color: #b45309; }
.page-title .doctype { font-size: 1rem; vertical-align: 0.25em; }
/* ลิงก์คู่มือใต้ปุ่มเข้าสู่ระบบ ตั้งใจให้เบากว่าปุ่มหลักมาก จะได้ไม่สับสนว่าปุ่มไหนคือเข้าสู่ระบบ */
.login-help {
    margin: 1.5rem auto 0; padding-top: 1rem; max-width: 22rem;
    border-top: 1px solid #dde3ea; text-align: center;
}
.login-help a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--brand); font-size: 1.0625rem; font-weight: bold; text-decoration: none;
}
.login-help a:hover, .login-help a:focus-visible { text-decoration: underline; }
.login-help svg { width: 1.25rem; height: 1.25rem; }

/* มือถือ: การ์ดแบบฟอร์มต้องไม่บีบชื่อจนเหลือคำละบรรทัด
   โดยเฉพาะเครื่องที่ผู้ใช้ตั้งตัวอักษรใหญ่ไว้ จึงลดส่วนประกอบรอบชื่อให้เหลือน้อยที่สุด */
@media (max-width: 42rem) {
    .tabwrap > .card, .tabpanel { padding-left: 0.75rem; padding-right: 0.75rem; }
    .form-card { gap: 0.625rem; padding: 0.75rem; align-items: flex-start; }
    .fc-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; }
    .fc-icon svg { width: 1.125rem; height: 1.125rem; }
    .fc-go { display: none; }
    .fc-title { font-size: 1.125rem; line-height: 1.5; }
    .fc-title .doctype { display: table; margin: 0 0 0.25rem; white-space: normal; }

    /* หน้าแบบฟอร์มของฉัน: ข้อมูลเต็มความกว้าง ปุ่มสามปุ่มเรียงแถวเดียวแบ่งกันเท่า ๆ */
    .card { padding-left: 0.875rem; padding-right: 0.875rem; }
    .doc-item { flex-direction: column; align-items: stretch; gap: 0.625rem; }
    .doc-info { min-width: 0; flex: none; }
    .doc-title .doctype { display: table; margin: 0 0 0.25rem; white-space: normal; }
    /* ดาวน์โหลดเต็มแถวบน แก้ไขกับลบแบ่งครึ่งแถวล่าง ตัวหนังสือในปุ่มจะไม่ถูกบีบแม้ตั้งตัวอักษรใหญ่ */
    .doc-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .doc-actions .btn-download { grid-column: 1 / -1; }
    .doc-actions .btn { justify-content: center; padding: 0.5rem 0.5rem; white-space: nowrap; width: 100%; box-sizing: border-box; }
    .doc-del { display: flex; }
    .doc-section { padding-left: 0.625rem; padding-right: 0.625rem; }
    .tabs { display: grid; grid-template-columns: 1fr; gap: 0.375rem; border-bottom: 0; }
    .tabs a.tab { border-radius: 0.75rem; margin-bottom: 0; padding: 0.5rem 0.875rem; white-space: normal; line-height: 1.3; min-width: 0; }
    .tabs a.tab.active { border: 0; }
    .tab > span:not(.tab-count) { flex: 1; min-width: 0; }
    .tab-count { flex: none; }

    /* แถบบน: ปุ่มเมนูตัดขึ้นบรรทัดใหม่ได้ ห้ามดันหน้าเว็บให้กว้างเกินจอ ชื่อผู้ใช้อยู่บรรทัดแรก ปุ่มแบ่งกันเต็มแถว */
    .topbar .brand { font-size: 1.0625rem; }
    .userbox { flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
    .userbox-name { order: -1; width: 100%; max-width: 100%; }
    .userbox-link, .userbox-out { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}

/* ---- สร้างหลายฉบับจาก Excel ---- */
.batch-link { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin: -0.5rem 0 1.25rem; }
.batch-link .hint { margin: 0; }
.batch-step h2 { display: flex; align-items: center; gap: 0.625rem; }
.step-no {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--brand); color: #fff; font-size: 1.05rem;
}
.batch-rules { margin: 0; padding-left: 1.25rem; }
.batch-rules li { margin: 0.2rem 0; }
.batch-upload input[type="file"] {
    display: block; width: 100%; max-width: 32rem; margin: 0.5rem 0 0.25rem;
    padding: 0.75rem; border: 2px dashed var(--line); border-radius: 0.75rem; background: #fff;
}
.batch-upload .actions { justify-content: flex-start; }
.batch-group h2 { display: flex; align-items: center; gap: 0.5rem; }
.batch-group h2 svg { width: 1.4rem; height: 1.4rem; }
.batch-actions .btn-outline.btn-download { color: var(--brand-dark); }
@media (max-width: 42rem) {
    .batch-actions { grid-template-columns: 1fr 1fr; }
    .batch-actions .btn-download:first-child { grid-column: 1 / -1; }
    .batch-actions .btn-download:not(:first-child) { grid-column: auto; }
    .batch-actions .doc-del { grid-column: 1 / -1; }
}

/* ---- ดึงข้อมูลจากหนังสือฉบับก่อน ---- */
.prefill-card h2 { display: flex; align-items: center; gap: 0.5rem; }
.prefill-card h2 svg { width: 1.3rem; height: 1.3rem; flex: none; }
.prefill-form { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.prefill-form select { flex: 1 1 20rem; min-width: 0; }
.prefill-card .hint { margin-top: 0.5rem; }

/* ---- หน้าตั้งค่า: เพดานการใช้งาน ---- */
.limit-input { display: flex; align-items: center; gap: 0.625rem; }
.limit-input input { max-width: 9rem; }
.limit-input span { color: var(--muted); white-space: nowrap; }
.limit-form .row > div { margin-bottom: 0.75rem; }