/* Command Center: ชั้นการแสดงผลร่วมของทั้งสองแผง (โรงงาน /app และผู้ให้บริการ /admin)
   ไฟล์นี้ถูกโหลด "หลัง" theme.blade.php / theme-admin.blade.php เสมอ จึงเป็นที่เดียวที่ควรถือ
   กติกาเรื่อง "ฟอนต์" และ "ขนาดตัวอักษร" ของทั้งระบบ — อย่าประกาศซ้ำในไฟล์อื่น

   ★★★★★ ขนาดตัวอักษร (V.86 · 11 ก.ย. 2026 · ผู้ใช้เลือกฐาน 15px)
   Filament 5 ไม่ได้เขียน font-size เป็นเลขตรง ๆ แต่อ้างโทเคนของ Tailwind 4 ทั้งระบบ:
       --text-xs / --text-sm / --text-base / --text-lg / --text-xl / --text-2xl / --text-3xl
       (+ --text-*--line-height คู่กัน) เมนู ตาราง ฟอร์ม ปุ่ม ป้าย หัวข้อ ล้วนอ่านจากโทเคนพวกนี้
   → เราจึงกำหนดสเกลใหม่ที่ body.fi-body ที่เดียว แล้วทุกส่วนของ Filament ขยับตามพร้อมกัน
     สเกล: xs 13 · sm 15 (เนื้อหา/เมนู/ตาราง/ฟอร์ม/ปุ่ม) · base 16 · lg 18 · xl 20 · 2xl 24 · 3xl 28
   ★ ห้ามเขียน font-size เป็น px ในไฟล์ CSS ของเราอีก ให้ใช้ var(--text-*) เท่านั้น
     รอบก่อนหน้า (10 ก.ย.) ไล่ตั้งเป็น 14/16px ทีละจุด ผลคือเมนูใหญ่กว่าเนื้อหา ป้ายย่อยเท่าตัวเนื้อหา
     และสองไฟล์ตั้งค่าเดียวกันคนละเลขแบบ !important จนขึ้นกับลำดับ <link> (กติกาข้อ 15)
   ★ line-height ตั้งไว้สูงกว่าค่าตั้งต้นของ Tailwind เล็กน้อยเพราะสระบน/วรรณยุกต์ของภาษาไทย

   ★★★★ ฟอนต์: ระบบฝัง Sarabun ไว้เองที่ /fonts/sarabun/ (ดูเหตุผลในไฟล์นั้น) — ทุกเครื่องจึงเห็นเหมือนกัน
     ตัวเลขใช้ฟอนต์เดียวกับตัวหนังสือ (--ce-num-font = --font-family) แล้วอาศัย tabular-nums ให้ตรงคอลัมน์
     Outfit/Inter ที่เคยประกาศไว้ไม่มีไฟล์ในระบบ → เครื่องที่บังเอิญมีจะเห็นตัวเลขคนละฟอนต์กับเครื่องอื่น
   Keep print layouts and native Filament/Livewire interactions intact. */
@media screen {
    html:root body.fi-body {
        --font-family: 'Sarabun', 'IBM Plex Sans Thai Looped', 'IBM Plex Sans', 'Noto Sans Thai', 'Leelawadee UI', sans-serif;
        --th-font: var(--font-family);
        --ce-num-font: var(--font-family);
        --text-xs: 13px;
        --text-xs--line-height: 1.5;
        --text-sm: 15px;
        --text-sm--line-height: 1.6;
        --text-base: 16px;
        --text-base--line-height: 1.6;
        --text-lg: 18px;
        --text-lg--line-height: 1.5;
        --text-xl: 20px;
        --text-xl--line-height: 1.45;
        --text-2xl: 24px;
        --text-2xl--line-height: 1.35;
        --text-3xl: 28px;
        --text-3xl--line-height: 1.3;
        --text-4xl: 32px;
        --text-4xl--line-height: 1.25;
        --cc-canvas: #f2f6fa;
        --cc-surface: #ffffff;
        --cc-ink: #102c46;
        --cc-muted: #52667b;
        --cc-line: #dce5ee;
        --cc-soft: #f5f8fb;
        --cc-accent: #006f7b;
        --cc-accent-hover: #006873;
        --cc-tint: #e8f6f6;
        --cc-sidebar: var(--cc-surface);
        --cc-shadow: 0 2px 12px rgb(23 54 82 / 4%);
        --primary-50: #effcfc;
        --primary-100: #d4f4f3;
        --primary-200: #ace8e8;
        --primary-300: #75d5d8;
        --primary-400: #38b7c0;
        --primary-500: #0795a2;
        --primary-600: #007f8b;
        --primary-700: #006873;
        --primary-800: #09515b;
        --primary-900: #0c414c;
        --primary-950: #042b33;
        --ce-card-bg: var(--cc-surface);
        --ce-card: var(--cc-surface);
        --card-bg: var(--cc-surface);
        --ce-card-fg: var(--cc-ink);
        --ce-text: var(--cc-ink);
        --ce-text-3: var(--cc-muted);
        --ce-muted: var(--cc-muted);
        --ce-muted-2: #66788b;
        --ce-line: var(--cc-line);
        --ce-line-soft: #eaf0f5;
        --ce-card-line: var(--cc-line);
        --ce-surface-2: var(--cc-soft);
        --ce-brand: var(--cc-accent);
        --ce-solid-accent: var(--cc-accent);
        --ce-solid-accent-hover: var(--cc-accent-hover);
        --ce-field: var(--cc-surface);
        --ce-field-bg: var(--cc-surface);
        --ce-field-line: #b7c7d7;
        --ce-field-line-strong: #839bb1;
        --ce-field-focus: var(--cc-accent);
        --ce-field-ring: rgb(0 127 139 / 16%);
        --ce-field-disabled: #edf2f6;
        --ce-r-card: 12px;
        --ce-r-control: 8px;
        --ce-fg: var(--cc-ink);
        --ce-fg-2: var(--cc-muted);
        --ce-fg-3: var(--cc-muted);
        --ce-fg-4: var(--cc-muted);
        --ce-steel-950: var(--cc-canvas);
        --ce-steel-900: var(--cc-soft);
        --ce-steel-850: var(--cc-surface);
        --ce-steel-800: var(--cc-soft);
        --ce-steel-700: var(--cc-line);
        --ce-l-bg: var(--cc-canvas);
        --ce-l-card: var(--cc-surface);
        --ce-l-text: var(--cc-ink);
        --ce-l-text-2: var(--cc-muted);
        --ce-l-text-3: var(--cc-muted);
        --ce-l-line: var(--cc-line);
        --ap-card: var(--cc-surface);
        --ap-text: var(--cc-ink);
        --ap-text-3: var(--cc-muted);
        --ap-field: var(--cc-soft);
        --ap-card-line: var(--cc-line);
        --ce-z-card: var(--cc-surface);
        --ce-z-key: var(--cc-ink);
        --ce-z-cap: var(--cc-muted);
        --ce-z-sub: var(--cc-muted);
        --ce-z-line: var(--cc-line);
        --ce-z-link: var(--cc-accent);
        --ce-z-link-hover: var(--cc-accent-hover);
        --ce-z-in: #2169b7;
        --ce-z-out: #ad4922;
        font-family: var(--font-family) !important;
        font-size: var(--text-sm);
        background: var(--cc-canvas) !important;
        color: var(--cc-ink);
        line-height: var(--text-sm--line-height);
        letter-spacing: 0;
    }
    html.dark body.fi-body {
        --cc-canvas: #0b1826;
        --cc-surface: #122437;
        --cc-ink: #e4edf5;
        --cc-muted: #b0c0cf;
        --cc-line: #2d4358;
        --cc-soft: #172c40;
        --cc-accent: #66d9dc;
        --cc-accent-hover: #9ae9e9;
        --cc-tint: #163a44;
        --ce-muted-2: #b0c0cf;
        --ce-line-soft: #24394c;
        --ce-field-line: #496179;
        --ce-field-disabled: #1b3043;
        --ce-solid-accent: #007f8b;
        --ce-solid-accent-hover: #006873;
        --ce-z-in: #81baff;
        --ce-z-out: #ffb38c;
    }
    html body.fi-body :is(input, select, textarea, button, .fi-btn, .fi-input) {
        font-family: var(--font-family) !important;
    }
    html body.fi-body :is(.fi-layout, .fi-main-ctn) {
        background: radial-gradient(ellipse at top right, rgb(0 127 139 / 4%), transparent 55%), var(--cc-canvas) !important;
        color: var(--cc-ink);
    }
    html body.fi-body .fi-main { max-width: 1600px; }
    html body.fi-body :is(.fi-topbar, .fi-topbar-ctn) {
        background: var(--cc-surface) !important;
        color: var(--cc-ink) !important;
        border-bottom: 1px solid var(--cc-line) !important;
        box-shadow: none !important;
    }
    html body.fi-body .fi-topbar-ctn { border-bottom: 0 !important; }
    html body.fi-body .fi-topbar { min-height: 72px; }
    html body.fi-body :is(.fi-sidebar, .fi-main-sidebar) {
        --ce-card-fg: var(--cc-ink);
        --ce-muted: var(--cc-muted);
        --ce-brand: var(--cc-accent);
        --ce-line: var(--cc-line);
        --ce-surface-2: var(--cc-soft);
        background: var(--cc-surface) !important;
        border-inline-end: 1px solid var(--cc-line) !important;
        color: var(--cc-ink) !important;
    }
    html body.fi-body :is(.fi-sidebar-header, .fi-sidebar-header-ctn, .fi-sidebar-footer) {
        background: transparent !important;
        border-color: var(--cc-line) !important;
        color: var(--cc-ink) !important;
    }
    html body.fi-body .fi-sidebar .fi-logo { color: var(--cc-ink) !important; }
    html body.fi-body .fi-sidebar .ce-brand-name { color: var(--cc-ink) !important; }
    html body.fi-body .fi-sidebar-nav { padding-inline: 12px; }
    /* เมนู = ขนาดเดียวกับเนื้อหา (sm) · ชื่อฝ่ายหนากว่ารายการย่อยหนึ่งขั้น ไม่ใช่ใหญ่กว่า */
    html body.fi-body .fi-sidebar :is(.fi-sidebar-item-label, .ce-navfind input, .ce-navfind-input) {
        font-size: var(--text-sm) !important;
        line-height: var(--text-sm--line-height) !important;
        font-weight: 500;
    }
    html body.fi-body .fi-sidebar-nav-groups { gap: 10px; }
    html body.fi-body .fi-sidebar-group-btn { min-height: 44px; gap: 12px; }
    html body.fi-body .fi-sidebar-group-btn > .fi-icon { width: 22px; height: 22px; color: var(--cc-muted) !important; }
    html body.fi-body .fi-sidebar-item-btn {
        border-radius: 8px !important;
        min-height: 44px;
        padding-block: 8px;
        color: var(--cc-ink) !important;
        background: transparent !important;
        transition: background-color 140ms ease !important;
    }
    html body.fi-body .fi-sidebar-item-btn :is(.fi-sidebar-item-label, .fi-icon) { color: inherit !important; }
    html:root body.fi-body .fi-sidebar .fi-sidebar-item-btn :is(.fi-sidebar-item-label, .fi-icon) { color: var(--cc-ink) !important; }
    html:root body.fi-body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn :is(.fi-sidebar-item-label, .fi-icon) { color: var(--cc-accent) !important; }
    html body.fi-body .fi-sidebar-item-btn:hover { background: var(--cc-soft) !important; }
    html body.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background: var(--cc-tint) !important;
        box-shadow: inset 3px 0 var(--cc-accent) !important;
        color: var(--cc-ink) !important;
    }
    html body.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before { background: var(--cc-accent) !important; }
    html body.fi-body .fi-sidebar-group-label {
        color: var(--cc-ink) !important;
        font-size: var(--text-sm) !important;
        line-height: var(--text-sm--line-height) !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    html body.fi-body .fi-sidebar :is(.ce-navfind-input, .ce-navfind input, .ce-navtoggle) {
        background: var(--cc-soft) !important;
        border: 1px solid var(--cc-line) !important;
        color: var(--cc-ink) !important;
    }
    html body.fi-body .fi-sidebar input::placeholder { color: var(--cc-muted) !important; opacity: 1; }
    html body.fi-body .fi-sidebar .ce-navfind-results {
        background: var(--cc-soft);
        border-color: var(--cc-line);
        box-shadow: none;
    }
    html body.fi-body .fi-sidebar .ce-navfind-text { display: block; min-width: 0; }
    html body.fi-body .fi-sidebar .ce-navfind-group {
        display: block;
        color: var(--cc-muted);
        font-size: var(--text-xs);
        font-weight: 400;
        margin-top: 3px;
    }
    html body.fi-body .fi-sidebar :is(.ce-favorites h2, .ce-favorites p) { font-size: var(--text-xs); }
    html body.fi-body .fi-sidebar .ce-navfind button { color: var(--cc-muted); }
    html body.fi-body .fi-sidebar :is(.ce-favorites h2, .ce-favorites p, .ce-pin-button) { color: var(--cc-muted); }
    html body.fi-body .fi-sidebar .ce-pin-button[aria-pressed="true"] { color: var(--cc-accent); }
    html body.fi-body .fi-sidebar .ce-favorites a { color: var(--cc-ink); }
    html body.fi-body :is(.fi-header-heading, .fi-section-header-heading, .fi-ta-header-heading) {
        color: var(--cc-ink) !important;
        letter-spacing: -.02em;
    }
    html body.fi-body .fi-header-heading { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); font-weight: 700; }
    html body.fi-body .fi-header-subheading { font-size: var(--text-sm); margin-top: 4px; }
    html body.fi-body :is(.fi-section-header-heading, .fi-ta-header-heading, .fi-modal-heading) { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
    html body.fi-body :is(.fi-section-header-description, .fi-ta-header-description, .fi-modal-description, .fi-ta-text-description) { font-size: var(--text-sm); }
    html body.fi-body :is(.fi-badge, .fi-sc-text, .fi-fo-field-wrp-error-message, .fi-breadcrumbs-item-label, .fi-pagination-overview) { font-size: var(--text-xs); line-height: var(--text-xs--line-height); }
    html body.fi-body .fi-ta-header-cell { font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; letter-spacing: .01em; }
    html body.fi-body :is(.fi-header-subheading, .fi-section-header-description, .fi-ta-header-description) {
        color: var(--cc-muted) !important;
        line-height: 1.7;
        opacity: 1 !important;
    }
    html body.fi-body :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .ce-workspace-section) {
        background: var(--cc-surface) !important;
        color: var(--cc-ink);
        border: 1px solid var(--cc-line) !important;
        border-radius: 12px !important;
        box-shadow: var(--cc-shadow) !important;
    }
    html body.fi-body .fi-section-header { border-color: var(--cc-line); }
    html body.fi-body .fi-wi-stats-overview-stat { border-top: 3px solid var(--cc-accent) !important; }
    html body.fi-body .fi-wi-stats-overview-stat-value {
        color: var(--cc-ink) !important;
        font-family: var(--ce-num-font);
        font-size: var(--text-3xl);
        line-height: var(--text-3xl--line-height);
        font-variant-numeric: tabular-nums;
    }
    html body.fi-body .fi-wi-stats-overview-stat-label { color: var(--cc-muted) !important; font-size: var(--text-sm); }
    html body.fi-body .fi-wi-stats-overview-stat-description { font-size: var(--text-xs); }
    html body.fi-body :is(.fi-ta-header-cell, .fi-ta-table thead) {
        background: var(--cc-soft) !important;
        color: var(--cc-muted) !important;
    }
    /* ★ .fi-ta-header-cell-label ไม่มีอยู่จริงใน Filament 5.7 (ตรวจจาก vendor/filament/tables/resources/views แล้ว) */
    html body.fi-body :is(.fi-ta-header-cell, .fi-ta-header-cell-sort-btn) { color: var(--cc-muted) !important; }
    html body.fi-body .fi-ta-cell { border-color: var(--cc-line); }
    html body.fi-body .fi-ta-table tbody tr:hover > .fi-ta-cell { background: var(--cc-tint) !important; }
    html body.fi-body .fi-ta-text:not(.fi-color) { color: var(--cc-ink); }
    html body.fi-body .fi-ta-text-description { color: var(--cc-muted) !important; }
    html body.fi-body .fi-btn {
        border-radius: 8px !important;
        min-height: 40px;
        font-size: var(--text-sm);
        font-weight: 600;
        box-shadow: none !important;
        transition: background-color 140ms ease !important;
    }
    html body.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) {
        background: #007f8b !important;
        color: #fff !important;
        border-color: #007f8b !important;
        --bg: #007f8b;
    }
    html body.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { background: #006873 !important; }
    html body.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-icon { color: #fff !important; }
    html body.fi-body .fi-input-wrp {
        background: var(--cc-surface) !important;
        border-radius: 8px !important;
        box-shadow: 0 0 0 1px var(--ce-field-line) !important;
    }
    html body.fi-body .fi-input-wrp:focus-within {
        box-shadow: 0 0 0 2px var(--cc-accent), 0 0 0 5px var(--ce-field-ring) !important;
    }
    html body.fi-body .fi-input-wrp.fi-invalid { box-shadow: 0 0 0 2px #b91c1c !important; }
    html body.fi-body .fi-input { color: var(--cc-ink) !important; }
    /* ★ .fi-fo-field-wrp-label ไม่มีอยู่จริง — ป้ายช่องกรอกของ Filament 5.7 คือ .fi-fo-field-label-content */
    html body.fi-body .fi-fo-field-label-content { color: var(--cc-ink); font-size: var(--text-sm); }
    html body.fi-body :is(.fi-modal-window, .fi-dropdown-panel) {
        background: var(--cc-surface) !important;
        color: var(--cc-ink);
        border: 1px solid var(--cc-line);
        border-radius: 12px;
    }
    html body.fi-body .fi-tabs { margin-inline: 0; }
    html body.fi-body .fi-tabs-item.fi-active {
        color: var(--cc-accent) !important;
        background: var(--cc-tint) !important;
    }
    html body.fi-body .ce-work-tabs a[aria-current="page"] { color: var(--cc-accent); background: var(--cc-tint); }
    html body.fi-body .ce-todo { box-shadow: none; border-radius: 10px; }
    html body.fi-body .ce-todo:hover { transform: none; box-shadow: 0 0 0 2px var(--cc-line); }
    html body.fi-body .ce-workspace-links a:hover { background: var(--cc-tint); color: var(--cc-accent); }
    html body.fi-body .fi-section-content :is(div, span):is([style*="opacity:.6"], [style*="opacity:.5"]) {
        opacity: 1 !important;
        color: var(--cc-muted);
    }
    html body.fi-body .fi-sc-text:not(.fi-color) { color: var(--cc-muted) !important; opacity: 1 !important; }
    html body.fi-body .fi-simple-main {
        background: var(--cc-surface) !important;
        border: 1px solid var(--cc-line);
        border-radius: 16px;
        box-shadow: 0 20px 70px rgb(12 41 67 / 12%) !important;
    }
    html body.fi-body :is(a, button, input, select, textarea, [tabindex="0"]):focus-visible {
        outline: 3px solid var(--cc-accent);
        outline-offset: 3px;
    }
    /* ★ 17 ก.ย. 2026 — ช่องที่ Filament ห่อ .fi-input-wrp ไว้ (เช่นช่องรหัสผ่านที่มีปุ่มตา)
       กล่องห่อวาดวงแสง :focus-within ให้อยู่แล้ว และตัดของที่ล้นทิ้ง (overflow hidden)
       วงกรอบของ <input> ข้างในจึงโผล่ให้เห็นแค่ "ขีดสีเขียว" ด้านท้ายช่องก่อนถึงปุ่มตา
       → ปิดวงกรอบของลูกใน .fi-input-wrp ทั้งหมด ยังเห็นโฟกัสจากกล่องห่อเหมือนเดิม */
    html body.fi-body .fi-input-wrp :is(input, select, textarea, button):focus-visible { outline: none; }
    html body.fi-body .fi-sidebar :is(a, button, input):focus-visible { outline-color: var(--cc-accent); }
    .cc-context { display: flex; gap: 10px; align-items: center; min-width: 0; max-width: 46vw; margin-inline: 12px auto; }
    .cc-context-mark { color: var(--cc-accent); display: flex; flex-shrink: 0; }
    .cc-context-mark svg { width: 26px; height: 26px; }
    .cc-context-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
    .cc-context-copy strong { color: var(--cc-ink); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cc-context-copy > span { color: var(--cc-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cc-admin-label { border: 1px solid #e6bc7b; background: #fff5e5; color: #844606; padding: 3px 8px; border-radius: 5px; font-size: var(--text-xs); white-space: nowrap; }
    html body.fi-panel-admin .fi-topbar { border-top: 3px solid #c28d42; }
    @media (min-width: 1024px) {
        html body.fi-body .fi-topbar-start {
            min-height: 72px;
            background: transparent;
            color: var(--cc-ink);
            padding-inline: 0;
            margin-inline-start: 0;
            width: auto;
            flex-shrink: 0;
        }
        html body.fi-body .fi-topbar-start :is(.fi-logo, .fi-icon, .ce-brand-name) { color: var(--cc-ink) !important; }
        html body.fi-body .fi-topbar-start .fi-logo { font-size: var(--text-sm); white-space: normal; }
        html body.fi-body .fi-topbar:has(.cc-context) .fi-topbar-end { flex: 1; min-width: 0; }
    }
    @media (max-width: 1023px) {
        html body.fi-body .fi-topbar:has(.cc-context) .fi-topbar-start { display: none; }
        html body.fi-body .fi-topbar:has(.cc-context) .fi-topbar-end { flex: 1; min-width: 0; }
    }
    @media (max-width: 767px) {
        html body.fi-body .fi-topbar { min-height: 64px; }
        .cc-context { max-width: 48vw; gap: 6px; margin-inline: 6px auto; }
        .cc-context-mark, .cc-admin-label { display: none; }
        .cc-context-copy strong { font-size: var(--text-xs); }
        .cc-context-copy > span { font-size: var(--text-xs); }
        html body.fi-body :is(.fi-btn, .fi-tabs-item, .fi-pagination-item-btn) { min-height: 44px; }
        html body.fi-body .fi-header-heading { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); }
    }
    /* แท็บเล็ต/มือถือ: ปุ่มและแท็บต้องสูงอย่างน้อย 44px (กติกาข้อ 22) — กฎเดิมใน theme.blade.php แพ้ความเฉพาะเจาะจงของกฎ 40px ข้างบน จึงต้องอยู่ที่นี่ */
    @media (pointer: coarse) {
        html body.fi-body :is(.fi-btn, .fi-tabs-item, .fi-pagination-item-btn, .fi-sidebar-item-btn, .fi-sidebar-group-btn) { min-height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
        html body.fi-body :is(.fi-btn, .fi-sidebar-item-btn, .ce-todo) { transition: none !important; }
    }
}