/* ============================================================
   IT Smart Service Desk — ระบบดีไซน์กลางของหน้าเว็บฝั่งระบบ
   ชุดโทเคนสี ฟอนต์ และระยะห่างของทั้งระบบอยู่ในไฟล์นี้ไฟล์เดียว
   ทุกหน้าจึงหน้าตาเป็นชุดเดียวกัน แก้ที่นี่ที่เดียวมีผลทั้งระบบ
   ============================================================ */

/* ------------------------------------------------------------
   ฟอนต์ IBM Plex Sans Thai — ชุดเดียวกับพอทอลและทุกระบบในเครือ
   โหลดจาก Google Fonts ใน index.php (ใช้ผ่านตัวแปร --font-sans ด้านล่าง)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   โทเคนดีไซน์ — แหล่งเดียวของสี ฟอนต์ และระยะห่าง
   ------------------------------------------------------------ */
:root {
    /* --------------------------------------------------------
       สีแบรนด์ — ม่วงลาเวนเดอร์ สไตล์ soft UI (2026-11-04 · เข้มขึ้นอีกระดับวันเดียวกัน
       เพราะผู้ใช้บอกว่าอ่อนเกินจนอ่านยาก ตัวหนังสือรองและพื้นการ์ดพาสเทลจึงเข้มขึ้นทั้งชุด
       · เดิมน้ำเงินพาสเทล 2026-10-27 · ม่วงคราม 2026-10-20 · เดิมกว่านั้นเขียว)
       ชื่อโทเคนยังเป็น --green-* เพราะทั้งระบบอ้างชื่อนี้อยู่ เปลี่ยนค่าที่นี่ที่เดียว
       ส่วนสี "สำเร็จ / เรียบร้อย" แยกไปที่ --ok-* (ยังเป็นเขียว)
       -------------------------------------------------------- */
    --green-900: #2a1f6e;
    --green-800: #3b2c9e;
    --green-700: #5443cf;
    --green-600: #6a59e0;
    --green-500: #8576ec;
    --green-200: #c6bef6;
    --green-100: #e0dbfb;
    --green-50:  #eeebfd;

    --ok:      #1a9a6b;
    --ok-soft: #cdeedf;
    --ok-text: #0f6545;
    --ok-50:   #e6f6ee;

    --text:       #1a1d36;
    --text-soft:  #343955;
    --muted:      #5a5f7a;
    --muted-soft: #80859e;

    --panel:     #ffffff;
    --panel-alt: #f3f1fb;
    --bg:        #f7f6fd;
    --line:      #dcd8ee;
    --line-soft: #ebe8f5;

    /* พื้นหลังนอกกรอบแอป (ลาเวนเดอร์อ่อนไล่สี) */
    --frame-bg-1: #e0ddf2;
    --frame-bg-2: #ebe9f7;

    --warn:        #e0941f;
    --warn-soft:   #fbe6bd;
    --warn-text:   #8a4f05;
    --danger:      #d9405f;
    --danger-soft: #fad3dd;
    --danger-text: #9c1d40;
    --info:        #3a78e0;
    --info-soft:   #d3e3fb;
    --info-text:   #2453a8;

    --radius-sm:   12px;
    --radius:      18px;
    --radius-lg:   22px;
    --radius-pill: 999px;

    /* เงานุ่มอมม่วง — ให้การ์ดดูนูนลอยแบบ soft UI ไม่ต้องพึ่งเส้นขอบ */
    --shadow-soft:  0 8px 24px rgba(92, 78, 170, .08), 0 1px 2px rgba(92, 78, 170, .04);
    --shadow:       0 16px 36px rgba(92, 78, 170, .14);
    --shadow-green: 0 10px 22px rgba(109, 92, 232, .32);

    --sidebar-w: 248px;
    --topbar-h:  76px;

    --font-sans: 'IBM Plex Sans Thai', 'Noto Sans Thai', Tahoma, "Segoe UI", sans-serif;

    /* --------------------------------------------------------
       โทเคนของโครงแอป soft UI (บล็อก "โครงแอปแบบ soft UI" ท้ายไฟล์ — บล็อกนั้นเหมือนกันทั้งสองระบบ
       ต่างกันแค่ค่าตรงนี้) เพิ่ม 2026-11-04
       -------------------------------------------------------- */
    --ui-side-1: #4c3cc6;
    --ui-side-2: #2f2380;
    --ui-side-accent: #c4bbfd;
    --ui-accent: var(--green-800);
    --ui-accent-soft: var(--green-100);
    --ui-accent-line: var(--green-200);
    --ui-grad-hi: #7565ee;
    --ui-grad-lo: #5443cf;
    --ui-grad-hi-hover: #6553e0;
    --ui-grad-lo-hover: #4433bd;
    --ui-avatar-hi: #9a8cf5;
    --ui-avatar-lo: #5f4ee0;
    --ui-shadow-rgb: 92, 78, 170;
    --ui-glow-rgb: 84, 67, 207;
    --ui-topbar-bg: rgba(247, 246, 253, .85);
    --ui-nav-active-hi: #e6e2ff;
    --ui-nav-active-lo: #cfc7fb;
    --ui-tone-neutral: #6352e0;
    --ui-tone-neutral-hi: #9a8cf5;
    --ui-tone-neutral-bg: #e4e0fc;
    --ui-table-head: var(--green-50);

    /* ชื่อเดิมที่หน้าเก่าบางหน้ายังอ้างถึง เก็บไว้ให้ค่าตรงกับชุดใหม่ */
    --bg-soft:    #f3f1fb;
    --panel-soft: #f3f1fb;
}

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* บังคับให้ทุกอย่างใช้ฟอนต์เดียวกับหน้า Landing
   เพราะหน้าเก่าหลายหน้าเคยกำหนดฟอนต์ของตัวเองไว้ในบล็อก style */
body, button, input, select, textarea, table,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h3 { font-size: 1.08rem; }
h4 { font-size: .98rem; }
p  { margin: 0; }

a { color: var(--green-700); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--green-600); }

ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
code, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    padding: 12px 20px; background: var(--green-700); color: #fff;
    border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ============================================================
   โครงหน้า
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; width: 100%; }

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

.app-content {
    flex: 1;
    padding: clamp(18px, 2.4vw, 30px);
    max-width: 1560px;
    width: 100%;
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--green-700) 0%, var(--green-900) 100%);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-color: transparent; }

.sidebar-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 6px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.sidebar-brand-mark {
    width: 38px; height: 38px; flex: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    display: grid; place-items: center;
    font-size: 1.1rem;
}
.sidebar-brand-text { min-width: 0; line-height: 1.25; }
.sidebar-brand-text strong { display: block; font-size: .95rem; color: #fff; }
.sidebar-brand-text small { font-size: .72rem; color: rgba(255, 255, 255, .7); }

/* แถบบอกระบบ — ชุดเดียวกับระบบแจ้งซ่อมงานช่าง กันสับสนระหว่างสองระบบที่หน้าตาใกล้เคียงกัน */
.system-tag {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 2px;
    padding: 7px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
}
.system-tag-dot {
    width: 8px; height: 8px; flex: none;
    border-radius: 50%;
    background: var(--green-200);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

.user-profile-card {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    padding: 11px 13px;
    display: flex; align-items: center; gap: 11px;
    margin: 14px 0 6px;
}
.user-avatar {
    width: 40px; height: 40px; flex: none;
    background: rgba(255, 255, 255, .22);
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.05rem;
}
.user-info { min-width: 0; }
.user-info .name {
    font-weight: 700; font-size: .92rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-info .role { font-size: .76rem; color: rgba(255, 255, 255, .72); }

.menu-section-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
    margin: 18px 0 7px 10px;
    text-transform: uppercase;
}

.nav-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }

.nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    color: rgba(255, 255, 255, .86);
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: .89rem;
    transition: background .18s ease, color .18s ease;
    position: relative;
}
.nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-link.active { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; }
.nav-link.active::before {
    content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--green-200);
}
.nav-icon { font-size: 1.02rem; width: 21px; text-align: center; flex: none; }

.sidebar-footer { margin-top: 18px; }
.system-info-card {
    background: rgba(0, 0, 0, .18);
    border-radius: var(--radius);
    padding: 13px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .8);
    display: flex; flex-direction: column; gap: 6px;
}
.system-info-card .time { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.system-info-card .app-title { font-weight: 700; line-height: 1.35; color: #fff; }

.btn-logout {
    display: block; width: 100%; margin-top: 6px; padding: 9px;
    background: #fff; color: var(--green-800);
    border-radius: var(--radius-sm);
    font-weight: 700; font-size: .86rem; text-align: center;
    transition: background .18s ease, transform .18s ease;
}
.btn-logout:hover { background: var(--green-50); color: var(--green-900); transform: translateY(-1px); }

/* ------------------------------------------------------------
   Topbar
   ------------------------------------------------------------ */
.app-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    min-height: var(--topbar-h);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    padding: 10px clamp(18px, 2.4vw, 30px);
    border-bottom: 1px solid var(--line);
}
.app-topbar-title { font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.app-topbar-title strong { color: var(--text); font-weight: 700; }
.app-topbar-sep { color: var(--muted-soft); }
.app-topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-topbar-date {
    font-size: .82rem; font-weight: 600; color: var(--green-800);
    background: var(--green-50); border: 1px solid var(--green-100);
    padding: 6px 13px; border-radius: var(--radius-pill);
}
/* กระดิ่งแจ้งเตือน — เป็นลิงก์ไปหน้า index.php?page=notifications */
.app-topbar-bell {
    position: relative;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: inherit;
    transition: background .18s ease;
}
.app-topbar-bell:hover { background: var(--green-50); }
.app-topbar-bell.is-quiet { opacity: .55; }
.app-topbar-bell.is-quiet:hover { opacity: 1; }
.app-topbar-badge {
    background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700;
    padding: 1px 7px; border-radius: var(--radius-pill); vertical-align: top;
}
.app-topbar-user { display: flex; align-items: center; gap: 9px; }
.app-topbar-avatar {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--green-700); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .92rem;
}
.app-topbar-user-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-topbar-user-text strong { font-size: .85rem; }
.app-topbar-user-text small { font-size: .72rem; color: var(--muted); }

.sidebar-toggle {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--green-800);
    place-items: center; font-size: 1.15rem;
    background: var(--panel);
}

/* ============================================================
   ส่วนหัวของหน้า
   ============================================================ */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: clamp(16px, 2vw, 24px);
}
.page-head-text h1, .page-head-text h2 { margin: 0 0 4px; }
.page-head-text p { color: var(--muted); font-size: .92rem; }
.page-head-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 10px; padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--green-100); color: var(--green-800);
    font-size: .8rem; font-weight: 700;
}

/* ============================================================
   การ์ด / แผง
   ============================================================ */
.panel, .card, .settings-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: clamp(16px, 2vw, 22px);
}

.panel-header, .panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.panel-title { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; margin: 0; }
.panel-head p, .panel-sub { margin-top: 3px; font-size: .85rem; color: var(--muted); }
.panel-note {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: .8rem; color: var(--muted);
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* การ์ดตัวเลข 5 ใบให้อยู่แถวเดียวบนจอคอมพิวเตอร์ (minmax 200px ของ .grid-4 จะดันใบที่ห้าตกแถว) */
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ============================================================
   ปุ่ม
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; padding: 0 18px;
    border-radius: var(--radius-pill);
    font-weight: 700; font-size: .89rem;
    white-space: nowrap; text-align: center;
    border: 1.5px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-sm { min-height: 34px; padding: 0 13px; font-size: .82rem; }
.btn-lg { min-height: 50px; padding: 0 26px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--green-700); color: #fff; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--green-800); color: #fff; box-shadow: 0 14px 30px rgba(36, 31, 111, .34); }

.btn-secondary, .btn-light {
    background: var(--panel); color: var(--green-800); border-color: var(--line);
}
.btn-secondary:hover, .btn-light:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }

.btn-ghost { background: transparent; color: var(--green-800); border-color: var(--green-200); }
.btn-ghost:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }

.btn-soft { background: var(--green-100); color: var(--green-800); }
.btn-soft:hover { background: var(--green-200); color: var(--green-900); }

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

.btn-danger-soft { background: var(--danger-soft); color: var(--danger-text); }
.btn-danger-soft:hover { background: #fecaca; color: var(--danger-text); }

.btn-warning { background: var(--warn); color: #fff; }
.btn-warning:hover { background: var(--warn-text); color: #fff; }

.btn-icon { min-height: 36px; width: 36px; padding: 0; border-radius: var(--radius-sm); }

/* ============================================================
   ป้ายสถานะ
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: .78rem; font-weight: 700; line-height: 1.5;
    white-space: nowrap;
}
.badge-secondary, .badge-normal, .badge-muted, .badge-cancelled { background: var(--line-soft); color: var(--muted); }
.badge-open,     .badge-info    { background: var(--info-soft);  color: var(--info-text); }
.badge-progress, .badge-warning, .badge-waiting, .badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.badge-done,     .badge-success { background: var(--ok-soft); color: var(--ok-text); }
.badge-danger    { background: var(--danger-soft); color: var(--danger-text); }
.badge-hw { background: var(--green-100); color: var(--green-800); }
.badge-sw { background: var(--info-soft);  color: var(--info-text); }
.badge-pw { background: var(--warn-soft);  color: var(--warn-text); }

.chip, .settings-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--radius-pill);
    background: var(--green-50); border: 1px solid var(--green-100);
    color: var(--green-800); font-size: .78rem; font-weight: 600;
}

/* ============================================================
   ตาราง
   ============================================================ */
.table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.table, .data-table, .settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
table.table th, .data-table th, .settings-table th {
    text-align: left; white-space: nowrap;
    padding: 11px 14px;
    font-size: .78rem; font-weight: 700; color: var(--muted);
    background: var(--green-50);
    border-bottom: 1px solid var(--line);
}
table.table th:first-child, .data-table th:first-child, .settings-table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
table.table th:last-child,  .data-table th:last-child,  .settings-table th:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

table.table td, .data-table td, .settings-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
table.table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
table.table tbody tr:hover, .data-table tbody tr:hover, .settings-table tbody tr:hover { background: var(--green-50); }

.cell-no, .cell-code { font-weight: 700; color: var(--green-800); white-space: nowrap; }
.cell-muted { color: var(--muted); }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   ฟอร์ม
   ============================================================ */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-field { display: grid; gap: 6px; }

label { font-size: .85rem; font-weight: 700; color: var(--text-soft); }
.form-hint { font-size: .78rem; color: var(--muted); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
input[type="url"], select, textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px;
    font: inherit; font-size: .9rem;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-100);
}
input::placeholder, textarea::placeholder { color: var(--muted-soft); }
input:disabled, select:disabled, textarea:disabled { background: var(--panel-alt); color: var(--muted); cursor: not-allowed; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 17px;
    padding-right: 36px;
}

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    width: 42px; height: 24px; flex: none;
    background: var(--line); border-radius: var(--radius-pill);
    position: relative; transition: background .2s ease;
}
.switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s ease;
}
.switch input:checked + .switch-track { background: var(--green-500); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--green-100); }

/* ============================================================
   แท็บ
   ============================================================ */
.tabs, .settings-tabs, .filter-chips {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-bottom: 18px;
}
.tab, .settings-tab-btn, .chip-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 700; font-size: .85rem;
    transition: all .18s ease;
}
.tab:hover, .settings-tab-btn:hover, .chip-btn:hover { border-color: var(--green-500); color: var(--green-800); }
.tab.active, .tab.is-active, .settings-tab-btn.active, .chip-btn.active {
    background: var(--green-700); border-color: var(--green-700); color: #fff;
}

/* ============================================================
   การ์ดตัวเลข
   ============================================================ */
.stat-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;

    /* style.css ตัวเก่ากำหนด .stat-card { min-height: 140px } ไว้
       ไฟล์นั้นถูกโหลดก่อน app.css และ app.css ทับแค่ padding ไม่เคยทับ min-height
       ผลคือการ์ดตัวเลขทุกใบทั้งระบบถูกดันให้สูงอย่างน้อย 140px
       ทั้งที่เนื้อหาจริงใช้ราว 100px เหลือที่ว่างเปล่า ๆ ใต้ตัวเลขทุกใบ
       และดันเนื้อหาส่วนที่เหลือของหน้าให้ต้องเลื่อนลงไปดู */
    min-height: auto;

    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--green-200); box-shadow: var(--shadow); }
/* การ์ดที่เป็นลิงก์ไปยังหน้ารายละเอียด (เช่นแท็บภาพรวมของหน้ารายงาน) ต้องไม่รับสีลิงก์สีเขียวมา */
a.stat-card { display: block; color: inherit; }
a.stat-card:hover { color: inherit; }
.stat-card .icon, .stat-icon {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--green-100); color: var(--green-700);
    font-size: 1.15rem;
}
.stat-card .icon { position: absolute; right: 16px; top: 16px; }
.stat-card .title { font-size: .82rem; font-weight: 700; color: var(--muted); }
.stat-card .number { font-size: 1.75rem; font-weight: 700; color: var(--green-800); margin: 3px 0; line-height: 1.15; }
.stat-card .meta { font-size: .78rem; color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------
   สีบอกความหมายของการ์ดตัวเลข
   ใช้ชุดสีเดียวกับป้ายสถานะ (.badge-*) เพื่อให้ "เขียว = เรียบร้อย"
   "เหลือง = รอ" "แดง = ต้องรีบ" สื่อความหมายตรงกันทุกหน้าในระบบ

   เดิมแต่ละหน้าไล่สีเอง บางหน้าใช้สีเขียวอ่อนซ้ำกันสองใบจนแยกไม่ออก
   บางหน้าให้ทุกใบเป็นสีเดียวกันหมดจนสีไม่ได้บอกอะไรเลย

   วิธีใช้: ใส่คลาส .tone-* ที่การ์ด แล้วไอคอน ตัวเลข และแถบข้างจะเปลี่ยนตาม
   ------------------------------------------------------------ */
.stat-card[class*="tone-"] { padding-left: 22px; }
.stat-card[class*="tone-"]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--tone);
}
.stat-card[class*="tone-"] .icon   { background: var(--tone-soft); color: var(--tone-text); }
.stat-card[class*="tone-"] .number { color: var(--tone-text); }

.tone-neutral { --tone: var(--green-500); --tone-soft: var(--green-100);   --tone-text: var(--green-800); }
.tone-success { --tone: var(--ok); --tone-soft: var(--ok-soft); --tone-text: var(--ok-text); }
.tone-info    { --tone: var(--info);      --tone-soft: var(--info-soft);   --tone-text: var(--info-text); }
.tone-warn    { --tone: var(--warn);      --tone-soft: var(--warn-soft);   --tone-text: var(--warn-text); }
.tone-danger  { --tone: var(--danger);    --tone-soft: var(--danger-soft); --tone-text: var(--danger-text); }

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

   วิธีใช้
     <div class="page-tabs">
       <button class="page-tab active" ...>ชื่อ <span class="count">3</span></button>
     </div>
     <section class="page-view" data-view="ชื่อ"> ... </section>
   แล้วสลับคลาส .is-hidden ที่ .page-view ให้เหลือแสดงทีละอัน
   ============================================================ */
.page-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.page-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--radius);
    background: var(--panel); border: 1px solid var(--line);
    color: var(--text-soft); font-weight: 700; font-size: .92rem;
    box-shadow: var(--shadow-soft); transition: all .18s ease; cursor: pointer;
    text-decoration: none;
}
.page-tab:hover { transform: translateY(-1px); border-color: var(--green-500); color: var(--green-800); }
.page-tab.active { background: var(--green-700); border-color: var(--green-700); color: #fff; box-shadow: var(--shadow-green); }
.page-tab .count {
    min-width: 22px; padding: 1px 7px; border-radius: var(--radius-pill);
    background: var(--line-soft); color: var(--muted);
    font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.page-tab.active .count { background: rgba(255, 255, 255, .22); color: #fff; }
/* แท็บที่มีของค้างต้องสะดุดตา ถึงจะยังไม่ได้เปิดดู */
.page-tab .count.is-alert { background: var(--danger-soft); color: var(--danger-text); }
.page-tab.active .count.is-alert { background: rgba(255, 255, 255, .22); color: #fff; }

/* ------------------------------------------------------------
   ข้อมูลสองบรรทัดในช่องตาราง — บรรทัดบนเป็นค่าหลัก บรรทัดล่างเป็นคำขยาย
   ------------------------------------------------------------ */
.cell-stack { display: grid; gap: 2px; line-height: 1.45; }
.cell-stack strong { color: var(--text); font-weight: 700; }
.cell-stack span   { font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------
   ตารางข้อมูลแบบ "ป้ายชื่อ + ค่า" ในหน้ารายละเอียด
     <div class="info-grid">
       <div class="info-item"><label>ผู้ยืม</label><div>สมชาย</div></div>
       <div class="info-item is-wide">...</div>   ← กินเต็มแถว
     </div>
   เดิม loan_view.php กับ loan_return.php ต่างประกาศชุดนี้เอง (.loan-info-item / .loan-return-item)
   ------------------------------------------------------------ */
.info-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.info-item {
    background: var(--panel-alt);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.info-item > label { display: block; margin-bottom: 4px; font-size: .8rem; color: var(--muted); }
.info-item > div   { color: var(--text); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.info-item.is-wide { grid-column: 1 / -1; }

/* ซ่อนองค์ประกอบโดยไม่ต้องยุ่งกับ style.display ในจาวาสคริปต์ */
.is-hidden { display: none !important; }

/* ============================================================
   ข้อความแจ้งเตือน
   ============================================================ */
/* เดิมกล่องนี้เป็น display:flex; gap:10px ซึ่งออกแบบไว้สำหรับ "ไอคอน + ข้อความ"
   แต่พอข้อความเป็นประโยคที่มี <strong> หรือ <code> ปนอยู่ ทุกชิ้นจะกลายเป็น
   flex item แยกกัน เรียงเป็นคอลัมน์พร้อมช่องว่าง 10px คั่นกลางประโยค
   และตัดบรรทัดผิดที่จนอ่านไม่รู้เรื่อง (เห็นชัดที่หน้าตั้งค่า LINE)
   จึงเปลี่ยนเป็น block ให้ข้อความไหลตามปกติ ส่วนไอคอนที่เป็น inline
   ก็ยังอยู่หน้าข้อความได้เหมือนเดิม */
.alert {
    display: block;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: .88rem; font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
}
/* ถ้าต้องการวางไอคอนแยกจากข้อความจริง ๆ ให้ใส่คลาสนี้เพิ่ม */
.alert-flex { display: flex; align-items: flex-start; gap: 10px; }

/* ------------------------------------------------------------
   แถบแจ้งผลลอย — สร้างโดย appNotify() ใน app.js
   ใช้แทน alert() ของเบราว์เซอร์ที่หยุดการทำงานทั้งหน้า
   ------------------------------------------------------------ */
.app-toast-host {
    position: fixed; top: 16px; right: 16px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.app-toast {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: app-toast-in .2s ease;
}
.app-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.app-toast-close {
    flex: none; font-size: 1.1rem; line-height: 1; color: inherit; opacity: .6;
    padding: 0 2px; background: none; border: 0; cursor: pointer;
}
.app-toast-close:hover { opacity: 1; }

@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.alert-success, .alert.success { background: var(--ok-50); border-color: var(--ok-soft); color: var(--ok-text); }
.alert-info,    .alert.info    { background: var(--info-soft); border-color: #bfdbfe;          color: var(--info-text); }
.alert-warning, .alert.warning { background: var(--warn-soft); border-color: #fde68a;          color: var(--warn-text); }
.alert-danger, .alert.danger, .alert.danger-soft { background: var(--danger-soft); border-color: #fecaca; color: var(--danger-text); }

/* ============================================================
   สถานะว่าง
   ============================================================ */
.empty-state, .settings-empty, .no-data {
    text-align: center;
    padding: clamp(28px, 5vw, 52px) 24px;
    color: var(--muted);
}
.empty-state-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: .55; }
.empty-state h3 { color: var(--text-soft); margin-bottom: 6px; }
.empty-state p { font-size: .9rem; }

/* ============================================================
   แบ่งหน้า
   ============================================================ */
.pagination { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; margin-top: 18px; }
.pagination a, .pagination span {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 11px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--panel); color: var(--muted);
    font-size: .85rem; font-weight: 600;
}
.pagination a:hover { border-color: var(--green-500); color: var(--green-800); background: var(--green-50); }
.pagination .active, .pagination .current { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop, .modal-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(3px);
    display: grid; place-items: center;
    padding: 20px;
}
.modal, .modal-box, .modal-content {
    background: var(--panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    width: 100%; max-width: 560px;
    max-height: 88vh; overflow-y: auto;
    padding: clamp(20px, 3vw, 28px);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.modal-foot { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }

/* ============================================================
   Utilities
   ============================================================ */
.text-muted  { color: var(--muted); }
.text-green  { color: var(--green-700); }
.text-danger { color: var(--danger-text); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.fw-bold { font-weight: 700; }
.small   { font-size: .82rem; }
.mt-0 { margin-top: 0; }    .mt-1 { margin-top: 8px; }    .mt-2 { margin-top: 16px; }    .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; }
.align-center { align-items: center; } .justify-between { justify-content: space-between; }
.divider { height: 1px; background: var(--line); border: 0; margin: 18px 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    :root { --sidebar-w: 234px; }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 110;
        width: 280px; max-height: 100vh;
        transform: translateX(-100%);
        transition: transform .26s ease;
        box-shadow: var(--shadow);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: ""; position: fixed; inset: 0; z-index: 100;
        background: rgba(15, 23, 42, .45);
    }
    .sidebar-toggle { display: grid; }
    .app-content { padding: 16px; }
    .app-topbar { padding: 10px 16px; }
    .app-topbar-user-text, .app-topbar-date { display: none; }
    .page-head { flex-direction: column; align-items: stretch; }
    .page-head-actions .btn { flex: 1; }
    table.table, .data-table, .settings-table { min-width: 620px; }
}

@media (max-width: 520px) {
    body { font-size: 14.5px; }
    .btn { padding: 0 15px; }
    .grid { gap: 14px; }
}

@media print {
    .sidebar, .app-topbar, .page-head-actions, .btn, .pagination { display: none !important; }
    .app-content { padding: 0; }
    .panel, .card { box-shadow: none; border-color: #ddd; }
}

/* ============================================================
   สิทธิ์การยืมของครุภัณฑ์ (หน้าคลังครุภัณฑ์)
   ============================================================ */
.col-status {
    display: flex; flex-direction: column;
    gap: 8px; align-items: flex-start;
}

.loanable-switch { font-size: .76rem; font-weight: 700; color: var(--muted); }
.switch-label { white-space: nowrap; transition: color .2s ease; }
.switch input:checked ~ .switch-label { color: var(--green-700); }
.loanable-switch.is-saving { opacity: .5; pointer-events: none; }

.btn-act.is-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }

/* แถบสรุปสิทธิ์การยืม */
.loanable-summary {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-bottom: 16px;
}
/* ป้ายบอกว่าตัวเลขชุดนี้คือเรื่องอะไร ไม่งั้นอ่านแล้วแยกไม่ออกจากการ์ดสถิติด้านบน */
.loanable-summary .item-label {
    font-size: .8rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
    padding-right: 4px;
}
.loanable-summary .item {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.loanable-summary .item b { font-size: 1.1rem; color: var(--green-800); }
.loanable-summary .item span { font-size: .8rem; color: var(--muted); }

/* กล่องข้อความลอยตอนบันทึกสำเร็จ */
.toast {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    max-width: 340px;
    padding: 13px 18px;
    border-radius: var(--radius);
    background: var(--green-900); color: #fff;
    font-size: .87rem; font-weight: 600;
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { background: var(--danger-text); }

/* ------------------------------------------------------------
   เมนูสลับระบบ (☷) บนแถบบน — รายชื่อระบบมาจากพอทอลกลาง
   ใช้เฉพาะตัวแปรที่ระบบแจ้งซ่อมทั้งสองมีเหมือนกัน (--line --text --muted --panel)
   สีของแต่ละระบบกำหนดในนี้เอง ให้ตรงกับการ์ดบนหน้าแรกของพอทอล
   ------------------------------------------------------------ */
.app-switcher { position: relative; }
.app-switcher-btn {
    list-style: none;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.app-switcher-btn::-webkit-details-marker { display: none; }
.app-switcher-btn:hover,
.app-switcher[open] .app-switcher-btn { background: rgba(15, 23, 42, .06); color: var(--text); }
.app-switcher-btn:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

.app-switcher-menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
    width: 320px; max-width: calc(100vw - 24px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
    padding: 14px;
    animation: app-switcher-in .16s ease-out;
}
@keyframes app-switcher-in { from { opacity: 0; transform: translateY(-6px); } }

.app-switcher-title { margin: 2px 4px 10px; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.app-switcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.app-switcher-item {
    --sw: #1f6f43; --sw-soft: #e7f5ec;
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 8px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.app-switcher-item:hover { background: var(--sw-soft); transform: translateY(-1px); }
.app-switcher-item.is-current { border-color: var(--sw); background: var(--sw-soft); }
.app-switcher-icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--sw-soft);
    font-size: 1.45rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.app-switcher-item:hover .app-switcher-icon,
.app-switcher-item.is-current .app-switcher-icon { background: #fff; }
/* รูปไอคอนที่อัปโหลดไว้ที่พอทอล (icon_url) — อยู่ในกรอบเดียวกับอีโมจิ ไม่ยืดโลโก้ */
.app-switcher-icon { overflow: hidden; }
.app-switcher-icon img { width: 72%; height: 72%; object-fit: contain; display: block; }
.app-switcher-name { font-size: .82rem; font-weight: 700; line-height: 1.35; }
.app-switcher-here { font-size: .68rem; font-weight: 700; color: var(--sw); }

/* ชุดสีเดียวกับการ์ดบนหน้าแรกของพอทอล */
.sw-yellow { --sw: #e39a14; --sw-soft: #fef3dc; }
.sw-orange { --sw: #e05a2b; --sw-soft: #fdeadf; }
.sw-brown  { --sw: #6e584a; --sw-soft: #f1ebe7; }
.sw-green  { --sw: #3f9a43; --sw-soft: #e5f4e5; }
.sw-teal   { --sw: #1f9fb4; --sw-soft: #e0f5f8; }
.sw-blue   { --sw: #1f4f85; --sw-soft: #e2ebf5; }
.sw-slate  { --sw: #57667f; --sw-soft: #e9edf3; }
.sw-purple { --sw: #6d40a3; --sw-soft: #efe7f8; }
.sw-pink   { --sw: #d13275; --sw-soft: #fde6f0; }
.sw-red    { --sw: #c4372f; --sw-soft: #fbe5e3; }

.app-switcher-portal {
    display: block;
    margin-top: 10px; padding: 10px 12px;
    border-top: 1px solid var(--line);
    color: var(--text); font-size: .85rem; font-weight: 600;
    text-decoration: none; text-align: center;
    border-radius: 0 0 10px 10px;
}
.app-switcher-portal:hover { background: rgba(15, 23, 42, .04); }

/* เมนู ☷ เมื่อมีระบบเยอะ (header.php ใส่ .is-many เมื่อเกิน 6 ระบบ) — ช่องค้นหา + หัวข้อหมวด + เลื่อนในกรอบ */
.app-switcher-count {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
    border-radius: 999px; background: rgba(15, 23, 42, .06);
    font-size: .7rem; text-align: center;
}
.app-switcher-search {
    width: 100%; margin: 0 0 10px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel); color: var(--text);
    font: inherit; font-size: .86rem;
}
.app-switcher-search:focus { outline: 2px solid var(--muted); outline-offset: 1px; }
.app-switcher-scroll { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.app-switcher-group + .app-switcher-group { margin-top: 10px; }
.app-switcher-group-title { margin: 4px 4px 6px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.app-switcher-empty { margin: 14px 4px; font-size: .85rem; color: var(--muted); text-align: center; }
.app-switcher-menu.is-many { width: 400px; }
.app-switcher-menu.is-many .app-switcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.app-switcher-menu.is-many .app-switcher-item { padding: 10px 6px; gap: 6px; }
.app-switcher-menu.is-many .app-switcher-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 1.2rem; }
.app-switcher-menu.is-many .app-switcher-name { font-size: .76rem; }

/* ท้ายเมนู: ไปหน้าศูนย์รวม + คู่มือการใช้งาน */
.app-switcher-foot {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    margin-top: 10px; padding-top: 6px;
    border-top: 1px solid var(--line);
}
.app-switcher-foot .app-switcher-portal { margin-top: 0; border-top: 0; border-radius: 10px; padding: 9px 8px; font-size: .82rem; }

@media (max-width: 520px) {
    .app-switcher-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}
@media print { .app-switcher { display: none !important; } }

/* ============================================================
   โครงแอปแบบ soft UI (2026-11-04) — บล็อกนี้เหมือนกันทุกตัวอักษรในระบบไอทีและระบบงานช่าง
   สีทั้งหมดอ่านจากโทเคน --ui-* ใน :root ของแต่ละระบบ (ไอที = ม่วงคราม · งานช่าง = ม่วงชมพู)
   แก้บล็อกนี้ที่ระบบหนึ่ง ต้องคัดลอกไปอีกระบบด้วย
   - พื้นหลังอ่อนไล่สี เนื้อหาอยู่ในแผงขาวมุมโค้งใหญ่ เงานุ่มอมสีแบรนด์
   - เมนูซ้ายเป็นการ์ดลอยพื้นสีแบรนด์เข้ม ตัวอักษรขาว (เข้มขึ้นตามที่ผู้ใช้ขอ 2026-11-04 — เดิมพื้นขาวอมม่วงอ่อนเกิน)
     เมนูที่เลือกอยู่เป็นปุ่มขาวนูน ตัวอักษรสีแบรนด์
   จอแคบกว่า 860px เมนูยังเลื่อนออกจากด้านข้างเหมือนเดิม (แค่เปลี่ยนสี)
   ============================================================ */
body.app-body {
    background:
        radial-gradient(900px 520px at 0% 0%, rgba(255, 255, 255, .7), transparent 60%),
        linear-gradient(135deg, var(--frame-bg-1) 0%, var(--frame-bg-2) 100%);
    background-attachment: fixed;
}

.sidebar {
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(255, 255, 255, .14), transparent 70%),
        linear-gradient(180deg, var(--ui-side-1) 0%, var(--ui-side-2) 100%);
    color: #fff;
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }

@media (min-width: 861px) {
    .app-shell {
        width: auto;
        margin: 0;
        gap: 18px;
        padding: 16px;
        min-height: 100vh;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .sidebar {
        min-height: 0;
        top: 16px;
        height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
        padding: 22px 14px 16px;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 18px 40px rgba(var(--ui-shadow-rgb), .30);
    }
    .app-main {
        background: var(--bg);
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, .9);
        box-shadow: 0 18px 44px rgba(var(--ui-shadow-rgb), .10);
        /* clip ไม่ใช่ hidden — hidden ทำให้แถบบน (sticky) เลิกติดขอบจอ */
        overflow: clip;
    }
}

/* ---- แบรนด์: ไอคอนประจำระบบ (frontend/assets/img/favicon.svg ตัวเดียวกับแท็บเบราว์เซอร์) ---- */
.sidebar-brand { padding: 2px 8px 14px; border-bottom: 0; }
.sidebar-brand-mark {
    width: 46px; height: 46px; border-radius: 14px;
    background: transparent;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    font-size: 1.2rem;
    overflow: hidden;
}
.sidebar-brand-mark img { width: 100%; height: 100%; display: block; }
.sidebar-brand-text strong { color: #fff; font-size: 1rem; }
.sidebar-brand-text small { color: rgba(255, 255, 255, .72); }

.system-tag {
    margin: 4px 4px 2px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
}
.system-tag-dot { background: var(--ui-side-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }

.user-profile-card {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: none;
}
.user-avatar {
    background: #fff;
    color: var(--ui-accent);
}
.user-info .name { color: #fff; }
.user-info .role { color: rgba(255, 255, 255, .7); }

.menu-section-title { color: rgba(255, 255, 255, .62); }

/* ---- เมนู: ปุ่มที่เลือกเป็นการ์ดขาวนูน ---- */
.nav-list { gap: 4px; }
.nav-link {
    padding: 10px 12px;
    color: rgba(255, 255, 255, .88);
    border-radius: 14px;
    border: 1px solid transparent;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-link.active {
    background: #fff;
    color: var(--ui-accent);
    border-color: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.nav-link.active::before { display: none; }
.nav-icon {
    width: 30px; height: 30px; border-radius: 10px;
    display: grid; place-items: center;
    font-size: .98rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.nav-link.active .nav-icon {
    background: linear-gradient(145deg, var(--ui-nav-active-hi), var(--ui-nav-active-lo));
    box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(var(--ui-glow-rgb), .18);
}

/* ---- การ์ดท้ายเมนู ---- */
.system-info-card {
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    box-shadow: none;
    text-align: center;
    align-items: center;
    padding: 16px 14px;
}
.system-info-card .time { color: #fff; }
.system-info-card .app-title { color: #fff; }
.btn-logout {
    background: #fff;
    color: var(--ui-accent);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.btn-logout:hover { background: var(--ui-nav-active-hi); color: var(--ui-accent); }

/* ---- แถบบน: ช่องค้นหาลอย กระดิ่งวงกลม ผู้ใช้มีอวาตาร์ไล่สี ---- */
.app-topbar {
    background: var(--ui-topbar-bg);
    border-bottom: 1px solid var(--line-soft);
    padding: 14px clamp(18px, 2.4vw, 30px);
}
.app-topbar-title { flex: 1 1 260px; min-width: 0; }
.app-topbar-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
    display: flex; align-items: center;
}
.app-topbar-search svg {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.app-topbar-search input {
    width: 100%;
    min-height: 46px;
    padding: 0 18px 0 46px;
    border-radius: 16px;
    border: 1px solid #fff;
    background: #fff;
    box-shadow: 0 6px 18px rgba(var(--ui-shadow-rgb), .10);
    font-size: .9rem;
}
.app-topbar-search input:focus { border-color: var(--ui-accent-line); box-shadow: 0 0 0 4px var(--ui-accent-soft); }
.app-topbar-date {
    color: var(--ui-accent);
    background: #fff;
    border: 1px solid #fff;
    box-shadow: var(--shadow-soft);
}
.app-topbar-bell {
    width: 42px; height: 42px; padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-soft);
}
.app-topbar-bell.is-quiet { opacity: .8; }
.app-topbar-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, #f58aa6, #e5577a);
    box-shadow: 0 3px 8px rgba(229, 87, 122, .4);
    font-size: .64rem;
}
.app-topbar-user { padding-left: 14px; border-left: 1px solid var(--line); }
.app-topbar-avatar {
    width: 42px; height: 42px;
    background: linear-gradient(145deg, var(--ui-avatar-hi), var(--ui-avatar-lo));
    box-shadow: 0 6px 14px rgba(var(--ui-glow-rgb), .3), inset 0 0 0 3px rgba(255, 255, 255, .6);
    font-size: 1rem;
}
.app-topbar-user-text strong { font-size: .9rem; }
.sidebar-toggle { border-color: #fff; box-shadow: var(--shadow-soft); }

/* ---- แผง การ์ด ปุ่ม: นุ่ม ลอย ไม่มีเส้นขอบเข้ม ---- */
.panel, .card, .settings-card {
    border-radius: var(--radius-lg);
    border-color: var(--line-soft);
    box-shadow: var(--shadow-soft);
}
.btn { border-radius: 14px; }
.btn-primary {
    background: linear-gradient(145deg, var(--ui-grad-hi) 0%, var(--ui-grad-lo) 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(var(--ui-glow-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover {
    background: linear-gradient(145deg, var(--ui-grad-hi-hover) 0%, var(--ui-grad-lo-hover) 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(var(--ui-glow-rgb), .38);
}
.btn-secondary, .btn-light { box-shadow: var(--shadow-soft); }
.badge { border-radius: 8px; }
.page-tab.active { background: linear-gradient(145deg, var(--ui-grad-hi), var(--ui-grad-lo)); border-color: transparent; }

/* ---- การ์ดตัวเลข .stat-card ทุกหน้า: หน้าตาเดียวกับการ์ดบนหน้าภาพรวม (ปรับ 2026-11-04 ผู้ใช้ขอให้ไอคอนเหมือนกันทั้งระบบ)
   ไอคอนนูน 3 มิติอยู่ซ้าย ข้อความอยู่ขวา พื้นพาสเทลตามสี tone-* (ไม่ใส่ tone = สีแบรนด์)
   markup เดิมของทุกหน้าใช้ได้เลย: <div class="stat-card tone-x"><div class="icon">…</div><div class="title">…</div><div class="number">…</div><div class="meta">…</div></div> ---- */
.stat-card {
    --tone: var(--ui-tone-neutral); --tone-hi: var(--ui-tone-neutral-hi); --tone-glow: rgba(var(--ui-glow-rgb), .35);
    --tone-bg: var(--ui-tone-neutral-bg); --tone-soft: var(--ui-accent-soft); --tone-text: var(--ui-accent);
    display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px;
    align-items: center; align-content: center;
    padding: 18px 20px;
    background: linear-gradient(160deg, #fff 0%, var(--tone-bg) 100%);
    border-color: #fff;
    text-align: left;
}
.stat-card::before, .stat-card[class*="tone-"]::before { display: none; }
/* a / button ถูกกฎเก่าตั้ง display: block ไว้ — ต้องเป็น grid เหมือนการ์ดปกติ */
a.stat-card, button.stat-card { display: grid; }
.stat-card > * { grid-column: 2; min-width: 0; }
.stat-card .icon, .stat-card[class*="tone-"] .icon, .icon-3d {
    background: linear-gradient(145deg, var(--tone-hi), var(--tone));
    color: #fff;
    box-shadow: 0 8px 16px var(--tone-glow), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.stat-card .icon {
    position: static; grid-column: 1; grid-row: 1 / span 4; align-self: center;
    width: 52px; height: 52px; border-radius: 16px; font-size: 1.4rem;
}
.stat-card .title { font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.stat-card .number, .stat-card[class*="tone-"] .number { font-size: 1.7rem; font-weight: 700; color: var(--text); margin: 1px 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-card .meta { font-size: .74rem; font-weight: 600; color: var(--muted); line-height: 1.45; }
.tone-neutral { --tone: var(--ui-tone-neutral); --tone-hi: var(--ui-tone-neutral-hi); --tone-glow: rgba(var(--ui-glow-rgb), .35); --tone-bg: var(--ui-tone-neutral-bg); --tone-soft: var(--ui-accent-soft); --tone-text: var(--ui-accent); }
.tone-success, .tone-return { --tone: #22a575; --tone-hi: #8de3c0; --tone-glow: rgba(60, 192, 142, .32);  --tone-bg: #d6f0e4; }
.tone-info, .tone-borrow    { --tone: #3f7ee6; --tone-hi: #a5c6fb; --tone-glow: rgba(91, 149, 242, .32);  --tone-bg: #dae6fd; }
.tone-warn, .tone-pending   { --tone: #e3961f; --tone-hi: #fbd68a; --tone-glow: rgba(242, 172, 60, .32);  --tone-bg: #fbe8c6; }
.tone-danger  { --tone: #dc4c70; --tone-hi: #f8aebf; --tone-glow: rgba(236, 106, 139, .32); --tone-bg: #fbd9e2; }
.tone-total   { --tone: var(--ui-tone-neutral); --tone-hi: var(--ui-tone-neutral-hi); --tone-glow: rgba(var(--ui-glow-rgb), .35); --tone-bg: var(--ui-tone-neutral-bg); }

/* ---- ตาราง ---- */
table.table th, .data-table th, .settings-table th { background: var(--ui-table-head); color: var(--muted); }

@media (max-width: 860px) {
    .app-topbar-search { display: none; }
    .app-topbar-user { padding-left: 0; border-left: 0; }
}



/* ------------------------------------------------------------
   แถบชวนรับแจ้งเตือนทาง LINE (frontend/includes/line_tip.php) — เพิ่ม 2026-10-27
   สีเขียว LINE ใช้เฉพาะไอคอนและปุ่ม ให้รู้ทันทีว่าเกี่ยวกับ LINE โดยไม่กลืนกับสีความหมาย "สำเร็จ"
   ------------------------------------------------------------ */
.line-tip {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 14px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid #06c755;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.line-tip-icon {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px; background: #e6f9ee; font-size: 1.3rem;
}
.line-tip-text { flex: 1 1 280px; display: grid; gap: 2px; line-height: 1.5; }
.line-tip-text strong { font-size: .95rem; color: var(--text); }
.line-tip-text span { font-size: .84rem; color: var(--muted); }
.line-tip-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-line-tip { background: #06c755; color: #fff; box-shadow: none; }
.btn-line-tip:hover { background: #05b04b; color: #fff; }
.line-tip-later { font-size: .84rem; color: var(--muted); text-decoration: underline; }
.line-tip-later:hover { color: var(--green-800); }
@media print { .line-tip { display: none !important; } }


/* ------------------------------------------------------------
   สไลด์ประชาสัมพันธ์ (frontend/includes/announcement_slider.php) — เพิ่ม 2026-11-04
   หน้าจัดการ ?page=announcements ใช้ .ann-admin-* ด้านล่าง
   สไลด์ที่ไม่มีรูป = ตัวอักษรขาวบนพื้นไล่สีของระบบ (--ann-1 → --ann-2)
   ------------------------------------------------------------ */
.ann-slider {
    --ann-1: var(--green-700);
    --ann-2: var(--green-900);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}
.ann-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ann-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.ann-manage { font-size: .82rem; font-weight: 700; color: var(--green-700); text-decoration: none; }
.ann-manage:hover { color: var(--green-900); text-decoration: underline; }

.ann-viewport { position: relative; overflow: hidden; border-radius: var(--radius); }
.ann-track { display: flex; transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .ann-track { transition: none; } }

.ann-slide {
    flex: 0 0 100%; min-width: 0;
    display: flex; flex-direction: column;
    background: linear-gradient(145deg, var(--ann-1), var(--ann-2));
    color: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}
.ann-slide.has-image { background: var(--panel-alt); color: var(--text); }
.ann-media { aspect-ratio: 16 / 9; background: var(--line-soft); }
.ann-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-caption { padding: 14px 16px 16px; display: grid; gap: 4px; flex: 1; align-content: start; }
.ann-slide:not(.has-image) .ann-caption { min-height: 150px; align-content: center; padding: 22px 46px; }
.ann-caption strong { font-size: 1rem; line-height: 1.45; }
.ann-caption p {
    margin: 0; font-size: .86rem; line-height: 1.6;
    color: inherit; opacity: .92;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ann-slide.has-image .ann-caption p { color: var(--text-soft); opacity: 1; }
.ann-more { justify-self: start; margin-top: 4px; font-size: .84rem; font-weight: 700; color: inherit; text-decoration: underline; }
.ann-slide.has-image .ann-more { color: var(--green-700); }

.ann-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: var(--text);
    font-size: 1.3rem; line-height: 1;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.ann-nav:hover { background: #fff; }
.ann-nav:focus-visible { outline: 3px solid var(--green-200); outline-offset: 2px; }
.ann-prev { left: 8px; }
.ann-next { right: 8px; }

.ann-dots { display: flex; justify-content: center; gap: 6px; }
.ann-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill);
    background: var(--line); cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.ann-dot.active { width: 22px; background: var(--green-700); }

.ann-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 16px; border-radius: var(--radius);
    border: 2px dashed var(--green-200);
    color: var(--green-800); font-weight: 700; font-size: .88rem;
    text-decoration: none;
}
.ann-empty:hover { background: var(--green-50); color: var(--green-900); }

/* เต็มความกว้างบนสุดของหน้าภาพรวม (ทั้งสองระบบ) — แบนเนอร์เต็มแถบ ไม่แบ่งซ้าย-ขวา (ผู้ใช้ขอ 2026-11-04)
   รูปกว้างเต็มกล่อง สูงตามสัดส่วนจริงของรูป (ไม่ crop ไม่มีอะไรทับรูป) สูงสุด 420px
   หัวข้อ/รายละเอียดเป็นแถบบาง ๆ ใต้รูป · สไลด์ไม่มีรูป = ตัวอักษรขาวบนพื้นไล่สีของระบบ */
.ann-slider--wide { margin-bottom: 22px; }
.ann-slider--wide .ann-slide.has-image { background: var(--panel-alt); }
.ann-slider--wide .ann-media { aspect-ratio: auto; background: var(--panel-alt); display: flex; justify-content: center; }
.ann-slider--wide .ann-media img { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.ann-slider--wide .ann-slide.has-image .ann-caption {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    padding: 12px 60px 14px;
}
.ann-slider--wide .ann-slide.has-image .ann-caption p { -webkit-line-clamp: 2; }
.ann-slider--wide .ann-slide.has-image .ann-more { margin-top: 0; }
.ann-slider--wide .ann-caption strong { font-size: 1.1rem; }
.ann-slider--wide .ann-slide:not(.has-image) .ann-caption { min-height: 180px; padding: 26px 60px; }
@media (max-width: 720px) {
    .ann-slider--wide .ann-slide.has-image .ann-caption { padding: 10px 16px 12px; display: grid; }
}

/* ---- หน้าจัดการ ---- */
.ann-admin-list { display: grid; gap: 12px; }
.ann-admin-item {
    display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel);
}
.ann-admin-item.is-off { background: var(--panel-alt); }
.ann-admin-item.is-off .ann-admin-thumb { opacity: .6; }
.ann-admin-thumb {
    width: 128px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden;
    display: grid; place-items: center; font-size: 1.6rem;
    background: linear-gradient(145deg, var(--green-700), var(--green-900));
}
.ann-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-admin-body { display: grid; gap: 4px; min-width: 0; }
.ann-admin-body strong { color: var(--text); }
.ann-admin-body p { margin: 0; font-size: .86rem; color: var(--text-soft); }
.ann-admin-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .8rem; color: var(--muted); }
.ann-admin-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ann-admin-actions form { margin: 0; }
.ann-status-live      { background: var(--ok-soft);     color: var(--ok-text); }
.ann-status-scheduled { background: var(--info-soft);   color: var(--info-text); }
.ann-status-expired   { background: var(--warn-soft);   color: var(--warn-text); }
.ann-status-off       { background: var(--line-soft);   color: var(--muted); }
.ann-form-preview { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ann-form-preview img { width: 220px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
@media (max-width: 720px) {
    .ann-admin-item { grid-template-columns: 1fr; }
    .ann-admin-thumb { width: 100%; }
    .ann-admin-actions { justify-content: flex-start; }
}
@media print { .ann-slider { display: none !important; } }


/* ------------------------------------------------------------
   ปุ่มแชตสอบถาม (frontend/includes/contact_fab.php) — เพิ่ม 2026-11-04
   แบบเดียวกับปุ่มติดต่อของพอทอลกลาง · สีปุ่มเป็นสีแบรนด์ของระบบ (--ui-grad-*) ส่วนรายการ LINE ใช้เขียว LINE
   ------------------------------------------------------------ */
.contact-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; }
.contact-fab-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 999px;
    background: linear-gradient(145deg, var(--ui-grad-hi), var(--ui-grad-lo));
    color: #fff; font-weight: 700; font-size: .92rem;
    box-shadow: 0 12px 28px -8px rgba(var(--ui-glow-rgb), .65);
    cursor: pointer; list-style: none; user-select: none;
}
.contact-fab-btn::-webkit-details-marker { display: none; }
.contact-fab-btn:hover, .contact-fab[open] .contact-fab-btn { background: linear-gradient(145deg, var(--ui-grad-hi-hover), var(--ui-grad-lo-hover)); }
.contact-fab-btn:focus-visible { outline: 3px solid var(--ui-accent-line); outline-offset: 2px; }
.contact-fab-panel {
    position: absolute; right: 0; bottom: calc(100% + 12px);
    width: min(330px, calc(100vw - 32px));
    padding: 16px; border-radius: 18px;
    background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 24px 50px -16px rgba(var(--ui-shadow-rgb), .45);
    animation: contact-in .16s ease-out;
}
@keyframes contact-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.contact-fab-title { margin: 0; font-weight: 700; color: var(--text); }
.contact-fab-sub { margin: 2px 0 12px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.contact-fab-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--panel-alt);
    color: var(--text); text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.contact-fab-item:hover { border-color: #06c755; color: var(--text); transform: translateY(-1px); }
.contact-fab-icon {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border-radius: 12px; background: #e6f9ee;
}
.contact-fab-text { display: grid; line-height: 1.35; min-width: 0; }
.contact-fab-text strong { font-size: .9rem; }
.contact-fab-text small { font-size: .76rem; color: var(--muted); }
.contact-fab-qr {
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
    font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.contact-fab-qr svg { width: 96px; height: 96px; flex: none; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 860px) { .contact-fab-qr { display: none; } }
@media (max-width: 520px) {
    .contact-fab { right: 14px; bottom: 14px; }
    .contact-fab-label { display: none; }
    .contact-fab-btn { padding: 14px; font-size: 1.1rem; }
}
@media print { .contact-fab { display: none !important; } }
/* ยังไม่ได้ตั้งลิงก์ LINE OA — ปุ่มยังแสดง แต่บอกว่ากำลังเตรียม (ผู้ดูแลระบบเห็นทางลัดไปตั้งค่า) */
.contact-fab-pending {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 10px; padding: 12px; border-radius: 12px;
    background: var(--warn-soft); color: var(--warn-text);
    font-size: .84rem; line-height: 1.55;
}
.contact-fab-setup { display: inline-block; margin-top: 10px; font-size: .84rem; font-weight: 700; color: var(--ui-accent); }