/* ═══════════════════════════════════════════════════════════════════════════
   nx-theme.css — Batch 9a (ADQ-52) · โหลด "หลัง" app.css และ svc.css
   โครงจาก FlowIQ (flowiq-design.css) + สีหลักของ tenant ผ่าน --brand
   ไฟล์นี้ทำสองอย่าง:
     1) remap ตัวแปรเดิม (--blue-*, --gray-*, --red-* …) ไปหา token ใหม่
        → ทุกหน้า (รวม 21 หน้าที่ยังไม่ปรับใน 9b) ได้สีและจังหวะใหม่โดยไม่ต้องแก้ markup
     2) คอมโพเนนต์กลาง nx-* (modal · confirm · toast · field · empty · skeleton · auth)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --brand: #185FA5;                                            /* MainLayout ทับด้วย PrimaryColor ของ tenant */
    --brand-hover: color-mix(in srgb, var(--brand) 86%, #000);
    --brand-ink:   color-mix(in srgb, var(--brand) 55%, #000);
    --brand-wash:  color-mix(in srgb, var(--brand) 9%, #fff);
    --brand-line:  color-mix(in srgb, var(--brand) 25%, #fff);
    --brand-soft:  color-mix(in srgb, var(--brand) 70%, #fff);

    --ink: #15202B; --ink-2: #4F5B67; --ink-3: #8A94A0;
    --paper: #F2F4F7; --card: #fff; --line: #E3E7EC; --line-2: #EEF1F4; --line-3: #D5DBE2;

    --pos: #18936A;     --pos-wash: #E3F2EB;
    --caution: #B6760F; --caution-wash: #FAF0DC;
    --crit: #C8463C;    --crit-wash: #FBE9E7;
    --info: #3F6FB5;    --info-wash: #E9F0F8;

    --sb: #0F1B2A; --sb-tx: #C6D0DC; --sb-tx-2: #7F8C9B; --sb-line: rgba(255,255,255,.07);

    --sans: "IBM Plex Sans Thai", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --fig:  "Fraunces", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --r-sm: 8px; --r: 12px; --r-lg: 16px;
    --sh-1: 0 1px 2px rgba(21,32,43,.05), 0 2px 8px rgba(21,32,43,.05);
    --sh-2: 0 8px 24px rgba(21,32,43,.10), 0 24px 60px rgba(21,32,43,.12);
    --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
    --focus-crit: 0 0 0 3px rgba(200,70,60,.18);

    /* ── remap ตัวแปรเดิมของ app.css/svc.css ── */
    --blue-50:  var(--brand-wash);
    --blue-100: var(--brand-line);
    --blue-400: var(--brand-soft);
    --blue-600: var(--brand);
    --blue-800: var(--brand-ink);
    --blue-900: var(--sb);
    --gray-50:  #FAFBFC;
    --gray-100: var(--paper);
    --gray-200: var(--line);
    --gray-300: #C9D1DA;
    --gray-400: var(--ink-3);
    --gray-600: var(--ink-2);
    --gray-700: #35414D;              /* เดิมถูกอ้างแต่ไม่เคยประกาศ */
    --gray-800: var(--ink);
    --red-100: var(--crit-wash);      --red-600: var(--crit);
    --amber-100: var(--caution-wash); --amber-600: var(--caution);
    --green-100: var(--pos-wash);     --green-600: var(--pos);
    --purple-600: #6B4FB8;
    --radius: 9px; --radius-lg: var(--r);
    --shadow-sm: var(--sh-1); --shadow: var(--sh-2);
    --sidebar-w: 248px; --topbar-h: 56px;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--sans); font-size: 14px; line-height: 1.55;
    color: var(--ink); background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.fig  { font-family: var(--fig); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-3); font-size: 12.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); }

svg.nx-i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
           stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
svg.nx-i.lg { width: 20px; height: 20px; }
svg.nx-i.xl { width: 28px; height: 28px; stroke-width: 1.6; }

/* ── sidebar (FlowIQ: พื้นเข้มคงที่ · สี tenant อยู่ที่รายการที่เลือกและโลโก้) ── */
.sidebar { background: var(--sb); }
.sidebar-brand { border-bottom-color: var(--sb-line); }
.brand-logo { background: var(--brand); border-radius: 9px; font-size: 14px; }
.brand-tagline { color: var(--sb-tx-2); font-size: 11px; }
.nav-section { color: var(--sb-tx-2); font-size: 11px; letter-spacing: .06em; padding: 14px 18px 6px; cursor: default; }
.nav-section:hover { color: var(--sb-tx-2); }
.nav-item {
    margin: 1px 10px; padding: 8px 10px; border-left: 0; border-radius: 8px;
    color: var(--sb-tx); gap: 10px;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: color-mix(in srgb, var(--brand) 34%, transparent); color: #fff; }
.nav-icon { width: 18px; height: 18px; opacity: .85; }
.nav-icon svg.nx-i { width: 17px; height: 17px; }
.grc-collapsed .nav-item { margin: 1px 8px; }
.sidebar-footer { border-top-color: var(--sb-line); }
.sidebar-user-avatar { background: color-mix(in srgb, var(--brand) 70%, #000); }
.sidebar-user-role { color: var(--sb-tx-2); }
.sidebar-version { color: rgba(255,255,255,.28); }
.sidebar-logout { display: flex; align-items: center; gap: 10px; }

/* ── topbar ── */
.grc-topbar { height: var(--topbar-h); padding: 0 24px; gap: 12px; border-bottom-color: var(--line); }
.nx-icon-btn {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
    display: inline-grid; place-items: center; color: var(--ink-2); cursor: pointer; position: relative;
    text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.nx-icon-btn:hover { background: #FAFBFC; border-color: var(--line-3); color: var(--ink); }
.nx-icon-btn .nx-dot {
    position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--crit); color: #fff; border: 2px solid #fff;
    font: 700 10px/14px var(--sans); text-align: center;
}
.grc-topbar-collapse { color: var(--ink-3); }
.topbar-logout { display: inline-flex; align-items: center; gap: 6px; }

/* ── page ── */
/* 12c-2: ใช้ความกว้างจอทั้งหมด — เดิมตัดที่ 1440px จอใหญ่เหลือพื้นที่ว่างด้านขวา
   ตาราง/ฟอร์มใช้ grid/table-layout อยู่แล้วจึงขยายตามได้ · จอกว้างมาก (≥ 2200px) เพิ่ม padding ข้างให้ไม่ติดขอบเกินไป */
.content-wrap { padding: 24px 28px 64px; max-width: none; }
@media (min-width: 2200px) { .content-wrap { padding-left: 40px; padding-right: 40px; } }
.page-header { margin-bottom: 18px; }
.page-header h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.page-header p { color: var(--ink-2); font-size: 13.5px; }
.nx-ph { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.nx-ph h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.nx-ph .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.nx-ph .act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── card ── */
.card { border-color: var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.card-title { font-size: 15px; }

/* ── KPI → tile ── */
.kpi-grid { gap: 14px; margin-bottom: 18px; }
.kpi-card { border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-1); border-color: var(--line); }
.kpi-label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; margin-bottom: 2px; }
.kpi-value { font-family: var(--fig); font-weight: 500; font-size: 30px; line-height: 1.15; font-feature-settings: "tnum" 1; }
.kpi-card.danger, .kpi-card.warning, .kpi-card.success, .kpi-card.info { border-left-width: 1px; }
.kpi-card.danger .kpi-value { color: var(--crit); }
.kpi-card.warning .kpi-value { color: var(--caution); }
.kpi-card.success .kpi-value { color: var(--pos); }

/* ── buttons ── */
.btn {
    height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
    border: 1px solid transparent; justify-content: center; gap: 7px; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn:hover { opacity: 1; }
.btn:focus-visible { box-shadow: var(--focus); border-radius: 9px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not([disabled]) { background: var(--brand-hover); }
.btn-secondary, .btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-secondary:hover:not([disabled]), .btn-ghost:hover:not([disabled]) { background: #FAFBFC; border-color: var(--line-3); }
.btn-danger { background: var(--crit); color: #fff; }
.btn-danger:hover:not([disabled]) { background: #B03B32; }
.btn-danger-ghost { background: #fff; border-color: #F1C9C4; color: var(--crit); }
.btn-danger-ghost:hover:not([disabled]) { background: var(--crit-wash); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover:not([disabled]) { background: var(--line-2); color: var(--ink); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .nx-spin, .nx-spin {
    width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
.btn-ghost .nx-spin, .btn-secondary .nx-spin, .nx-spin.dark { border-color: var(--line); border-top-color: var(--brand); }
.btn-icon { background: #fff; border-color: var(--line); border-radius: 8px; color: var(--ink-2); }
.btn-icon:hover { background: var(--brand-wash); color: var(--brand); }
.btn-icon-danger:hover { background: var(--crit-wash); color: var(--crit); }

/* ── forms ── */
.form-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-control {
    min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-3); border-radius: 9px;
    font-size: 14px; color: var(--ink); background: #fff;
}
.form-control:focus { border-color: var(--brand); box-shadow: var(--focus); }
.form-control:disabled { background: var(--paper); color: var(--ink-3); cursor: not-allowed; }
.form-control::placeholder { color: #A7B0BA; }
select.form-control { padding-right: 32px; }
.form-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ── alerts → banners ── */
.alert { display: flex; gap: 10px; align-items: flex-start; border: 1px solid; border-radius: var(--r); padding: 12px 14px; font-size: 13.5px; }
.alert-danger  { background: var(--crit-wash);    border-color: #F1C9C4; color: #7E2A23; }
.alert-success { background: var(--pos-wash);     border-color: #BFE0D1; color: #0F5E43; }
.alert-warning { background: var(--caution-wash); border-color: #EDD7A6; color: #7A4E07; }
.alert-info    { background: var(--info-wash);    border-color: #C9D8EE; color: #28497A; }
.notice-strip { border-radius: var(--r); }

/* ── badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; }
.badge-danger { background: var(--crit-wash); color: var(--crit); }
.badge-warning { background: var(--caution-wash); color: var(--caution); }
.badge-success { background: var(--pos-wash); color: var(--pos); }
.badge-info { background: var(--info-wash); color: var(--info); }
.badge-gray { background: var(--line-2); color: var(--ink-2); }

/* ── tables ── */
table { font-size: 13.5px; }
thead th { font-size: 12px; color: var(--ink-3); background: #FAFBFC; border-bottom-color: var(--line); white-space: nowrap; }
tbody td { border-bottom-color: var(--line-2); color: var(--ink); vertical-align: middle; }
tbody tr:hover { background: #FAFBFD; }
.ticket-no { font-family: var(--mono); color: var(--brand-ink); font-weight: 500; text-decoration: none; }
a.ticket-no:hover { text-decoration: underline; }
.tab-btn.active { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* ── skeleton (เดิม app.css ประกาศ keyframes ผิดเป็น @@ — แอนิเมชันไม่เคยทำงาน) ── */
@keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
.nx-sk {
    display: block; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #EEF1F4 25%, #F6F8FA 37%, #EEF1F4 63%);
    background-size: 400% 100%; animation: nx-sk 1.3s ease infinite;
}
@keyframes nx-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .nx-sk, .skeleton { animation: none; } }

/* ── empty state ── */
.nx-empty { text-align: center; padding: 48px 24px; }
.nx-empty .ico { width: 56px; height: 56px; border-radius: 16px; background: var(--brand-wash); color: var(--brand);
                 display: grid; place-items: center; margin: 0 auto 14px; }
.nx-empty.crit .ico { background: var(--crit-wash); color: var(--crit); }
.nx-empty.cau .ico { background: var(--caution-wash); color: var(--caution); }
.nx-empty h3 { font-size: 16px; font-weight: 600; }
.nx-empty p { color: var(--ink-2); font-size: 13.5px; margin: 4px auto 16px; max-width: 420px; }
.nx-empty .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nx-empty .ref { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ── banner (ใช้ใน page/form) ── */
.nx-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r);
             border: 1px solid; margin-bottom: 14px; font-size: 13.5px; }
.nx-banner .t { font-weight: 600; }
.nx-banner .x { margin-left: auto; cursor: pointer; opacity: .6; background: none; border: 0; padding: 2px; line-height: 0; }
.nx-banner.info { background: var(--info-wash); border-color: #C9D8EE; color: #28497A; }
.nx-banner.cau  { background: var(--caution-wash); border-color: #EDD7A6; color: #7A4E07; }
.nx-banner.crit { background: var(--crit-wash); border-color: #F1C9C4; color: #7E2A23; }
.nx-banner.pos  { background: var(--pos-wash); border-color: #BFE0D1; color: #0F5E43; }

/* ── field + validation (ADQ-56) ── */
.nx-field { margin-bottom: 16px; }
.nx-field > label, .nx-field .nx-lbl { display: flex; align-items: baseline; gap: 4px; font-size: 13px; font-weight: 600;
                                        margin-bottom: 6px; color: var(--ink); }
.nx-field .nx-req { color: var(--crit); }
.nx-field .nx-opt { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.nx-field .nx-cnt { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.nx-field .nx-cnt.over { color: var(--crit); }
.nx-field .nx-msg { display: flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--crit); margin-top: 6px; }
.nx-field .nx-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.nx-field.err .form-control { border-color: var(--crit); background: #FFFBFB; }
.nx-field.err .form-control:focus { box-shadow: var(--focus-crit); }
.nx-field.err .level-btn, .nx-field.err .cat-card { border-color: #E9A8A1; }
.nx-field.err .catalog { outline: 1px dashed #E9A8A1; outline-offset: 6px; border-radius: 6px; }
.nx-summary { display: flex; gap: 12px; border: 1px solid #F1C9C4; background: var(--crit-wash); border-radius: var(--r);
              padding: 12px 14px; margin-bottom: 16px; color: #7E2A23; }
.nx-summary .t { font-weight: 600; }
.nx-summary ul { margin: 4px 0 0 18px; font-size: 13px; }
.nx-summary button { background: none; border: 0; padding: 0; color: var(--crit); text-decoration: underline; cursor: pointer; font-size: 13px; text-align: left; }
.nx-caps { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--caution); margin-top: 6px; }
.nx-pw { position: relative; }
.nx-pw .form-control { padding-right: 42px; }
.nx-pw .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
              width: 30px; height: 30px; border-radius: 7px; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.nx-pw .eye:hover { background: var(--line-2); color: var(--ink); }

.nx-stickybar { position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
                border: 1px solid var(--line); border-radius: var(--r); padding: 12px 18px; margin-top: 16px;
                display: flex; align-items: center; gap: 10px; box-shadow: 0 -4px 16px rgba(21,32,43,.05); }
.nx-stickybar .dirty { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--caution); }
.nx-stickybar .sp { flex: 1; }

/* ── modal (NxModal) ── */
.nx-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(15,27,42,.42); backdrop-filter: blur(2px);
            display: grid; place-items: center; padding: 24px; animation: nx-fade .15s ease; overflow-y: auto; }
.nx-scrim.top { z-index: 1100; }
@keyframes nx-fade { from { opacity: 0; } }
.nx-dlg { width: 100%; max-width: 560px; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
          background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; animation: nx-pop .18s ease; }
.nx-dlg:focus { outline: none; }
.nx-dlg.sm { max-width: 440px; } .nx-dlg.lg { max-width: 720px; } .nx-dlg.xl { max-width: 880px; }
@keyframes nx-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.nx-dlg-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.nx-dlg-h h3 { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.nx-dlg-h p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.nx-dlg-h .tt { flex: 1; min-width: 0; }
.nx-dlg-x { margin-left: auto; color: var(--ink-3); cursor: pointer; padding: 5px; border-radius: 7px; background: none; border: 0; line-height: 0; }
.nx-dlg-x:hover { background: var(--line-2); color: var(--ink); }
.nx-dlg-b { padding: 16px 22px 20px; color: var(--ink-2); font-size: 14px; overflow-y: auto; }
.nx-dlg-f { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 22px;
            background: #FAFBFC; border-top: 1px solid var(--line-2); }
.nx-dlg-f .l { margin-right: auto; font-size: 12.5px; color: var(--ink-3); }
.nx-dlg-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.nx-dlg-ico.crit { background: var(--crit-wash); color: var(--crit); }
.nx-dlg-ico.cau  { background: var(--caution-wash); color: var(--caution); }
.nx-dlg-ico.info { background: var(--info-wash); color: var(--info); }
.nx-dlg-ico.pos  { background: var(--pos-wash); color: var(--pos); }
.nx-kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; background: var(--paper);
         border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.nx-kv .k { color: var(--ink-3); }
.nx-kv .v { color: var(--ink); word-break: break-word; }
.nx-typed { margin-top: 14px; }
.nx-typed label { font-size: 13px; color: var(--ink); display: block; margin-bottom: 6px; }
.nx-typed code { font-family: var(--mono); background: var(--crit-wash); color: var(--crit); padding: 1px 6px; border-radius: 5px; }

/* modal เดิม (.modal-*) ของหน้าที่ยังไม่ย้ายใน 9b — ให้หน้าตาเดียวกันไปก่อน */
.modal-overlay { background: rgba(15,27,42,.42); backdrop-filter: blur(2px); animation: nx-fade .15s ease; }
.modal-box { border-radius: var(--r-lg); box-shadow: var(--sh-2); animation: nx-pop .18s ease; }
.modal-header { border-bottom-color: var(--line-2); padding: 18px 22px 14px; }
.modal-header h3 { font-size: 17px; }
.modal-body { padding: 18px 22px; }
.modal-footer { background: #FAFBFC; border-top-color: var(--line-2); padding: 14px 22px; }

/* ── toast (ADQ-55) ── */
.nx-toasts { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px;
             width: 380px; max-width: calc(100vw - 32px); pointer-events: none; }
.nx-toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
            border-left: 4px solid; border-radius: 12px; padding: 12px 14px; box-shadow: var(--sh-2); font-size: 13.5px;
            animation: nx-slide .2s ease; position: relative; overflow: hidden; }
@keyframes nx-slide { from { transform: translateX(16px); opacity: 0; } }
.nx-toast .ic { line-height: 0; margin-top: 1px; }
.nx-toast .bd { flex: 1; min-width: 0; }
.nx-toast .t { font-weight: 600; color: var(--ink); }
.nx-toast .m { color: var(--ink-2); font-size: 13px; word-break: break-word; }
.nx-toast .t + .m { margin-top: 1px; }
.nx-toast .ref { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.nx-toast .a { color: var(--brand); font-weight: 600; font-size: 13px; margin-top: 6px; display: inline-block; text-decoration: none; }
.nx-toast .x { margin-left: auto; color: var(--ink-3); cursor: pointer; background: none; border: 0; padding: 2px; line-height: 0; border-radius: 6px; }
.nx-toast .x:hover { background: var(--line-2); color: var(--ink); }
.nx-toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: currentColor; opacity: .35;
                 animation: nx-bar linear forwards; }
.nx-toast:hover .bar { animation-play-state: paused; }
@keyframes nx-bar { from { width: 100%; } to { width: 0; } }
.nx-toast.pos  { border-left-color: var(--pos); }     .nx-toast.pos .ic,  .nx-toast.pos .bar  { color: var(--pos); }
.nx-toast.crit { border-left-color: var(--crit); }    .nx-toast.crit .ic, .nx-toast.crit .bar { color: var(--crit); }
.nx-toast.cau  { border-left-color: var(--caution); } .nx-toast.cau .ic,  .nx-toast.cau .bar  { color: var(--caution); }
.nx-toast.info { border-left-color: var(--info); }    .nx-toast.info .ic, .nx-toast.info .bar { color: var(--info); }

/* ── filters (TicketList) ── */
.nx-fbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.nx-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.nx-search .form-control { padding-left: 34px; }
.nx-search > svg.nx-i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.nx-search .clr { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
                  color: var(--ink-3); cursor: pointer; padding: 4px; line-height: 0; border-radius: 6px; }
.nx-fbar select.form-control { width: auto; min-width: 128px; max-width: 200px; height: 34px; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.nx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px;
           border: 1px solid var(--brand-line); background: var(--brand-wash); color: var(--brand-ink);
           font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nx-chip svg.nx-i { width: 13px; height: 13px; }
.nx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.nx-tbl-card { padding: 0; overflow: hidden; }
.nx-tbl-card .table-wrap { overflow-x: auto; }
.nx-pager { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-2);
            font-size: 12.5px; color: var(--ink-3); }
.nx-pager .sp { flex: 1; }

/* ── auth (Login / Forgot / Reset) ── */
.nx-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; }
.nx-auth-l { background: linear-gradient(155deg, var(--sb) 0%, color-mix(in srgb, var(--brand) 55%, var(--sb)) 100%);
             color: #fff; padding: 48px 56px; display: flex; flex-direction: column; }
.nx-auth-l .logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.nx-auth-l .logo i { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.14); display: grid;
                     place-items: center; font-style: normal; font-weight: 700; }
.nx-auth-l h2 { font-size: 30px; line-height: 1.3; font-weight: 600; margin-top: auto; max-width: 440px; letter-spacing: -.01em; }
.nx-auth-l p { color: rgba(255,255,255,.72); font-size: 14.5px; margin-top: 12px; max-width: 440px; }
.nx-auth-l ul { list-style: none; margin: 28px 0 auto; display: grid; gap: 12px; }
.nx-auth-l li { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.85); font-size: 14px; }
.nx-auth-l li svg.nx-i { color: #9FD3BD; }
.nx-auth-l .foot { font-size: 12px; color: rgba(255,255,255,.45); }
.nx-auth-r { display: grid; place-items: center; padding: 40px 24px; }
.nx-auth-box { width: 100%; max-width: 380px; }
.nx-auth-box h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.nx-auth-box .lead { color: var(--ink-2); margin: 4px 0 24px; }
.nx-auth-box .btn-block { width: 100%; height: 42px; font-size: 14.5px; }
.nx-auth-box .row { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 18px; font-size: 13px; }
.nx-auth-box .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); text-decoration: none; margin-top: 18px; }
.nx-auth-box .back:hover { color: var(--brand); }
.nx-auth-box .done { text-align: center; }
.nx-auth-box .done .ico { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; }
@media (max-width: 900px) { .nx-auth { grid-template-columns: 1fr; } .nx-auth-l { display: none; } }
/* Batch 16a — ปุ่มเข้าใช้งานผ่าน Nebrix Hub ใต้ฟอร์ม login */
.nx-auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-3); font-size: 12.5px; }
.nx-auth-or::before, .nx-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.nx-hub-btn { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 600; }
.nx-hub-mark { width: 22px; height: 22px; border-radius: 6px; background: #534AB7; color: #fff; display: grid; place-items: center;
               font-size: 12px; font-weight: 700; }
.pw-meter i.on { background: var(--pos); }

/* ── app shell: error / reconnect / 404 ── */
#blazor-error-ui { display: none; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3000;
                   background: #fff; border: 1px solid #F1C9C4; border-left: 4px solid var(--crit); border-radius: 12px;
                   box-shadow: var(--sh-2); padding: 12px 16px; font-size: 13.5px; align-items: center; gap: 12px;
                   max-width: calc(100vw - 32px); }
#blazor-error-ui .reload { color: var(--brand); font-weight: 600; }
#blazor-error-ui .dismiss { cursor: pointer; color: var(--ink-3); margin-left: 6px; }
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: grid; position: fixed; inset: 0; z-index: 3000; place-items: center; padding: 24px;
    background: rgba(15,27,42,.42); backdrop-filter: blur(2px);
}
#components-reconnect-modal .box { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 24px;
                                    max-width: 400px; text-align: center; font-family: var(--sans); }
#components-reconnect-modal h3 { font-size: 17px; font-weight: 600; margin-top: 12px; color: var(--ink); }
#components-reconnect-modal p { color: var(--ink-2); font-size: 13.5px; margin: 6px 0 16px; }
#components-reconnect-modal .st { display: none; }
#components-reconnect-modal.components-reconnect-show .st-show,
#components-reconnect-modal.components-reconnect-failed .st-failed,
#components-reconnect-modal.components-reconnect-rejected .st-rejected { display: block; }
#components-reconnect-modal .spin-lg { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--brand);
                                       border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto; }

@media (max-width: 768px) {
    .content-wrap { padding: 16px; }
    .nx-ph .act { margin-left: 0; }
}

/* ── แจ้งงานใหม่: การ์ดบริการเป็น <button> แล้ว (กด Tab/Space ได้) ── */
button.cat-card { text-align: left; font: inherit; color: inherit; width: 100%; }
.cat-card .cat-i { color: var(--brand); line-height: 0; }
.cat-card.on { box-shadow: 0 0 0 2px var(--brand-line); }
.level-btn:focus-visible, .cat-card:focus-visible, .cust-chip:focus-visible { box-shadow: var(--focus); }
.auto-hint { display: flex; align-items: center; gap: 4px; }
.auto-hint svg.nx-i { width: 13px; height: 13px; }
.suggest { background: var(--brand-wash); border-color: var(--brand-line); color: var(--brand-ink); border-radius: 10px; }
.suggest b { color: inherit; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; }
.upload-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-3); }
.pipe .step.cur { background: var(--brand); border-color: var(--brand); }
.pipe .step.done { background: var(--pos-wash); color: var(--pos); border-color: #BFE0D1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Batch 9b-1 · ADQ-59 — ระบบ popup: dialog / drawer / เต็มจอบนมือถือ / bottom sheet
   กติกาเดียวทุกแบบ: หัวและแถบปุ่มติดอยู่ เลื่อนเฉพาะเนื้อหา · สูงไม่เกินจอ (dvh = ไม่โดนแถบ URL/คีย์บอร์ดมือถือกิน)
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-scrim { overflow: hidden; }
.nx-dlg { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.nx-dlg-h { padding: 16px 20px; border-bottom: 1px solid var(--line-2); flex: none; }
.nx-dlg-h h3 { font-size: 16px; }
.nx-dlg-h .nx-dlg-ico { width: 36px; height: 36px; border-radius: 10px; }
.nx-dlg-b { padding: 16px 20px; flex: 1; min-height: 0; overscroll-behavior: contain; }
.nx-dlg-f { flex: none; padding: 12px 20px; }
.nx-dlg-f .l { display: flex; align-items: center; gap: 6px; }
.nx-dlg-f .l.dirty { color: var(--caution); }
/* กล่องยืนยัน/ฟอร์มเล็ก — ไม่ต้องมีเส้นใต้หัว ให้ข้อความกับหัวอ่านเป็นก้อนเดียว */
.nx-dlg.sm .nx-dlg-h { border-bottom: 0; padding-bottom: 0; }

/* ── ความหนาแน่นในกล่อง: ช่อง 36px · ระยะ 12px ── */
.nx-dlg .nx-field { margin-bottom: 12px; }
.nx-dlg .nx-field > label { font-size: 12.5px; margin-bottom: 5px; }
.nx-dlg .form-control { min-height: 36px; padding: 6px 11px; font-size: 13.5px; }
.nx-dlg textarea.form-control { min-height: 60px; }
.nx-dlg .nx-field .nx-hint, .nx-dlg .nx-field .nx-msg { margin-top: 4px; }

/* ── กริดในฟอร์ม ── */
.nx-grid { display: grid; gap: 12px 14px; margin-bottom: 12px; }
.nx-grid > .nx-field { margin-bottom: 0; }
.nx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-span-2 { grid-column: span 2; }
.nx-span-full { grid-column: 1 / -1; }
.nx-sec { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 11.5px; font-weight: 600;
          letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.nx-sec::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.nx-sec .n { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ── ส่วนพับ (NxMore) ── */
.nx-more { border: 1px solid var(--line); border-radius: 10px; margin: 4px 0 12px; }
.nx-more-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0;
             cursor: pointer; font: inherit; font-size: 13px; text-align: left; color: var(--ink-2); border-radius: 10px; }
.nx-more-h:hover { background: #FAFBFC; }
.nx-more-h .t { font-weight: 600; white-space: nowrap; }
.nx-more-h .n { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-more-h svg.nx-i { transition: transform .15s; }
.nx-more.open .nx-more-h svg.nx-i { transform: rotate(90deg); }
.nx-more-b { padding: 4px 14px 2px; }

/* ── ปุ่มสลับ (NxSegment) ── */
.nx-seg { display: inline-flex; border: 1px solid var(--line-3); border-radius: 9px; overflow: hidden; height: 36px; max-width: 100%; background: #fff; }
.nx-seg button { border: 0; background: none; padding: 0 12px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.nx-seg button + button { border-left: 1px solid var(--line); }
.nx-seg button.on { background: var(--brand-wash); color: var(--brand-ink); font-weight: 600; }
.nx-seg button:focus-visible { box-shadow: inset var(--focus); }
.nx-seg.disabled { opacity: .6; }
.nx-seg button:disabled { cursor: not-allowed; }

/* ── Drawer ── */
.nx-scrim.drawer { padding: 0; place-items: stretch; justify-items: end; background: rgba(15,27,42,.28); backdrop-filter: none; }
.nx-dlg.drawer { width: 100%; max-width: 620px; height: 100vh; height: 100dvh; max-height: none; border-radius: 0;
                 box-shadow: -12px 0 40px rgba(21,32,43,.18); animation: nx-drawer .22s ease; }
.nx-dlg.drawer.lg { max-width: 720px; }
.nx-dlg.drawer.xl { max-width: 880px; }
@keyframes nx-drawer { from { transform: translateX(48px); opacity: 0; } }

/* ── modal แบบเดิม (.modal-*) ของหน้าที่ยังไม่ย้าย — หัวและปุ่มติดอยู่ในกล่องที่เลื่อน ──
   ใช้ sticky แทนการแยกส่วนเลื่อน เพราะบางหน้า (Org · Users) มีหัวส่วนที่สองอยู่กลางกล่อง */
.modal-box { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overscroll-behavior: contain; }
.modal-box > .modal-header:first-child { position: sticky; top: 0; z-index: 3; background: #fff; }
.modal-box > .modal-footer { position: sticky; bottom: 0; z-index: 3; }
.modal-box .form-group { margin-bottom: 12px; }
.modal-box .form-label { font-size: 12.5px; margin-bottom: 5px; }
.modal-box .form-control { min-height: 36px; padding: 6px 11px; font-size: 13.5px; }
.grc-modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ── แท็บเล็ต: 3–4 คอลัมน์เหลือ 2 ── */
@media (max-width: 1024px) {
    .nx-grid-3, .nx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── มือถือ: ทุกแบบเต็มจอ · sm เป็น bottom sheet · ปุ่มเต็มความกว้างอยู่ล่าง ── */
@media (max-width: 640px) {
    .nx-scrim, .nx-scrim.drawer { padding: 0; place-items: stretch; justify-items: stretch; }
    .nx-dlg, .nx-dlg.lg, .nx-dlg.xl, .nx-dlg.drawer {
        max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; animation: nx-up .2s ease;
    }
    .nx-dlg.sm { align-self: end; height: auto; max-height: 92dvh; border-radius: 18px 18px 0 0; }
    .nx-dlg.sm::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-3); margin: 8px auto 0; flex: none; }
    .nx-dlg-h { padding-top: max(16px, env(safe-area-inset-top)); }
    .nx-dlg-f { flex-direction: column-reverse; align-items: stretch; gap: 8px;
                padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .nx-dlg-f .btn { height: 44px; justify-content: center; }
    .nx-dlg-f .l { margin: 0; justify-content: center; }
    .nx-dlg.sm .nx-dlg-f { background: #fff; border-top: 0; }
    .nx-grid-2, .nx-grid-3, .nx-grid-4 { grid-template-columns: 1fr; }
    .nx-span-2 { grid-column: auto; }
    .nx-dlg .form-row { grid-template-columns: 1fr; }
    .nx-dlg .form-control, .nx-dlg select.form-control { min-height: 42px; font-size: 16px; } /* 16px = iOS ไม่ซูมเข้าเองตอนแตะช่อง */
    .nx-seg { width: 100%; }
    .nx-seg button { flex: 1; }

    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-box, .modal-box.modal-sm, .modal-box.modal-wide { max-width: none; max-height: none; height: 100dvh; border-radius: 0; }
    .modal-box > .modal-footer { flex-direction: column-reverse; align-items: stretch; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .modal-box > .modal-footer .btn { height: 44px; justify-content: center; }
    .modal-box .form-control { font-size: 16px; }
}
@keyframes nx-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nx-dlg, .nx-dlg.drawer, .nx-scrim { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Batch 9b-2a · ADQ-61 — โครงการ์ด: หัว / เนื้อ / ท้าย ขอบซ้าย 20px ตรงกัน
   ทุกหน้าเขียนการ์ดแบบ "ส่วนย่อยมี padding ของตัวเอง" แต่ app.css ใส่ padding 24px ให้การ์ดอีกชั้น
   → เนื้อหาเยื้องจากหัวและเส้นคั่นไม่ชนขอบ · แก้ด้วย :has() จุดเดียว ไม่ต้องไล่แก้ markup
   ═══════════════════════════════════════════════════════════════════════════ */
.card { padding: 20px; }
.card:has(> .card-header) { padding: 0; }
.card:has(> .card-header) > .card-header {
    margin: 0; padding: 13px 20px; min-height: 52px; gap: 12px; border-bottom: 1px solid var(--line-2);
}
.card-header .card-title { font-size: 15px; }
.card-header .hdr-meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.card-body { padding: 16px 20px; }
/* บล็อกที่บางหน้าวางต่อจากหัวตรง ๆ โดยไม่มีตัวครอบ — ให้เข้าแนวเดียวกับหัว (9b-2 จะย้ายเข้า .card-body ทีละหน้า) */
.card:has(> .card-header) > :is(.form-group, .form-row, .filter-bar, p, .alert, .notice-strip, .kv-grid, .info-grid, .check-list, .form-hint) {
    margin-left: 20px; margin-right: 20px;
}
.card:has(> .card-header) > .table-foot,
.card-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 20px; border-top: 1px solid var(--line-2); background: #FAFBFC;
    border-radius: 0 0 var(--r) var(--r); font-size: 12.5px; color: var(--ink-3);
}
.card-foot .btn { margin-left: auto; }
.card-foot .muted { display: inline-flex; align-items: center; gap: 6px; }
.card > .timeline { padding: 8px 20px 4px; }

/* หัว–ค่า: คอลัมน์หัวกว้างตามข้อความ · ค่ายาว (อีเมล ชื่อบริษัท) ตัดบรรทัด ไม่ล้นขอบการ์ด */
.kv-grid { grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; }
.kv-grid > .k { white-space: nowrap; color: var(--ink-3); }
.kv-grid > * { min-width: 0; overflow-wrap: anywhere; }
.prop-grid dd { min-width: 0; overflow-wrap: anywhere; }

/* เนื้อหาหลัก + แผงขวา (บัญชีของฉัน · 9b-2 ใช้ต่อ) */
.nx-side-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.grid2 { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
@media (max-width: 1100px) { .nx-side-layout, .grid2 { grid-template-columns: minmax(0, 1fr); } }
.nx-grid-gap { min-height: 0; }
@media (max-width: 640px) { .nx-grid-gap { display: none; } }

/* ผู้ใช้บนหัวการ์ด (บัญชีของฉัน) */
.nx-who { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.nx-who .av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
              background: color-mix(in srgb, var(--brand) 70%, #000); color: #fff; font-weight: 600; font-size: 16px; }
.nx-who .bd { min-width: 0; }
.nx-who .n { font-weight: 600; overflow-wrap: anywhere; }
.nx-who .e { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Sidebar: เมนูใช้ .sidebar-nav (scrollbar บางสีเข้ม · ส่วนผู้ใช้/ออกจากระบบค้างล่างเสมอ) */
.sidebar-nav { padding: 6px 0 10px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

/* ═══ ADQ-60 — ช่องวันที่ dd/MM/yyyy ═══ */
.nx-date { position: relative; width: 100%; }
.nx-date > .form-control { padding-right: 40px; font-family: var(--mono); font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nx-date > .form-control::placeholder { font-family: var(--sans); letter-spacing: 0; }
.nx-date.err > .form-control { border-color: var(--crit); background: #FFFBFB; }
.nx-date.err > .form-control:focus { box-shadow: var(--focus-crit); }
.nx-date-btn { position: absolute; right: 5px; top: 5px; width: 28px; height: 28px; border: 0; background: none; border-radius: 7px;
               color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.nx-date-btn:hover:not(:disabled) { background: var(--brand-wash); color: var(--brand); }
.nx-date-btn:disabled { cursor: not-allowed; opacity: .5; }
/* input[type=date] ตัวจริงซ่อนไว้ใต้ช่อง — ต้องไม่ใช่ display:none เพราะ showPicker() ใช้กับ element ที่ถูกซ่อนแบบนั้นไม่ได้
   วางที่มุมซ้ายล่างให้ปฏิทินเด้งลงใต้ช่องพอดี */
.nx-date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.nx-date-msg { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 5px; }
.nx-date-msg svg.nx-i { width: 13px; height: 13px; }
.nx-date-msg.th { color: var(--ink-3); }
.nx-date-msg.cau { color: var(--caution); }
.nx-date-msg.crit { color: var(--crit); }
.nx-date.range-in { max-width: 172px; }
.nx-date.range-in .nx-date-msg.th { display: none; }      /* แถบช่วงวันที่ของรายงานไม่มีที่ให้บรรทัดยืนยัน */
.nx-dlg .nx-date > .form-control { font-size: 13.5px; }
@media (max-width: 640px) { .nx-date > .form-control { font-size: 16px; } }
.card.nx-tbl-card { padding: 0; }   /* กล่องงาน: ตารางชนขอบ — ต้องชนะ .card { padding } ที่ประกาศด้านบน */

/* ── Batch 10b-1: รายการติ๊กในฟอร์ม · ตัวเลือกแบบชิป · แถวที่กำลังแก้ ── */
.nx-checks { display: grid; gap: 6px; margin-bottom: 12px; }
.nx-checks .check-line { margin: 0; }
/* ผลิตภัณฑ์ที่คุ้มครองในสัญญา — ติ๊กได้หลายตัว ชิปเปลี่ยนสีให้เห็นว่าเลือกอะไรไปแล้วโดยไม่ต้องไล่อ่าน checkbox */
.nx-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 12px; }
.nx-pick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: border-color .12s, background .12s; }
.nx-pick:hover { border-color: var(--line-3); }
.nx-pick.on { border-color: var(--brand); background: var(--brand-wash); color: var(--ink); }
.nx-pick input { flex-shrink: 0; margin: 0; }
.nx-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* แถวที่เปิด drawer แก้อยู่ — drawer บังตารางครึ่งหนึ่ง ต้องบอกว่ากำลังแก้แถวไหน */
tr.row-selected td { background: var(--brand-wash); }

/* ── Batch 10b-2 ── */
/* footer ซ้าย: ติ๊กสถานะ + ป้ายยังไม่ได้บันทึกอยู่คู่กัน (ห้ามสลับกัน — ติ๊กจะหายตอนกด) */
.nx-foot-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nx-foot-state .check-line { margin: 0; color: var(--ink); }
.nx-foot-state .dirty { display: inline-flex; align-items: center; gap: 6px; color: var(--caution); }
.form-control.is-invalid { border-color: var(--crit); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 18%, transparent); }
/* ปฏิทินทำการ: เว้นระยะระหว่างช่วงเช้ากับช่วงบ่ายให้อ่านเป็นสองคู่ */
.week-gap { width: 10px; }
@media (max-width: 640px) { .week-gap { flex-basis: 100%; width: auto; height: 0; } .time-in { font-size: 16px; } }
.nx-empty.pos .ico { background: var(--pos-wash); color: var(--pos); }
/* การแจ้งเตือน: คลิก/กด Enter ได้ทั้งแถว — ต้องเห็นว่าโฟกัสอยู่ไหนเมื่อใช้คีย์บอร์ด */
.notif-row { cursor: pointer; }
.notif-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.notif-row > svg.nx-i { align-self: center; color: var(--ink-3); flex-shrink: 0; }
.notif-meta { align-items: center; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
/* ตารางบนมือถือ: เลื่อนแนวนอนแล้วคอลัมน์แรก (เลขงาน/ชื่อ) ต้องค้างไว้ ไม่งั้นเลื่อนไปดูสถานะแล้วไม่รู้ว่าเป็นแถวของอะไร
   ใช้กับทุกตารางใน .table-wrap อัตโนมัติ — ไม่ต้องใส่ .stickcol ทีละหน้า */
@media (max-width: 640px) {
    .table-wrap > table { min-width: 560px; }
    .table-wrap > table thead th:first-child,
    .table-wrap > table tbody td:first-child { position: sticky; left: 0; max-width: 46vw; }
    .table-wrap > table tbody td:first-child { z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
    .table-wrap > table thead th:first-child { z-index: 2; background: #FAFBFC; box-shadow: 1px 0 0 var(--line); }
    .table-wrap > table tbody tr.row-selected td:first-child { background: var(--brand-wash); }
    .table-wrap > table tbody tr.row-click:active td:first-child { background: var(--paper); }
}

/* ── Batch 10c: Dashboard ── */
.nx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.nx-kpis .kpi-card { display: block; text-decoration: none; color: inherit; transition: border-color .12s; }
.nx-kpis .kpi-card:hover { border-color: var(--brand-line); }
.nx-dash { display: grid; gap: 14px; margin-bottom: 14px; }
.nx-dash > .card { margin-bottom: 0; min-width: 0; }
.nx-dash-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.nx-dash-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-dash-11 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .nx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-dash-21, .nx-dash-3, .nx-dash-11 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .nx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-kpis .kpi-card:last-child { grid-column: span 2; }
}
.nx-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: none; }
.nx-link:hover { text-decoration: underline; }
.nx-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.nx-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.nx-legend .sw-bar { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); }
.nx-legend .sw-line { width: 16px; border-top: 2px solid var(--ink); }
.nx-chart { display: block; width: 100%; height: auto; overflow: visible; }
.nx-chart .grid { stroke: var(--line-2); }
.nx-chart .ax { font-size: 10px; fill: var(--ink-3); }
.nx-chart .val { font-size: 10.5px; fill: var(--ink); }
.nx-chart .bar { fill: var(--brand); }
.nx-chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.nx-chart .ref { stroke: var(--pos); stroke-dasharray: 4 3; }
.nx-chart .ref-t { fill: #0F5E43; }
.nx-chart .hit { fill: transparent; }
.nx-chart .hit:hover { fill: color-mix(in srgb, var(--brand) 7%, transparent); }
.nx-callout { font-size: 12.5px; color: var(--ink-2); background: var(--paper); border-left: 3px solid var(--brand-line); padding: 5px 10px; margin-top: 8px; border-radius: 0 6px 6px 0; }
.nx-sla2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: center; margin-bottom: 12px; }
.nx-sla2 .k { font-size: 12.5px; color: var(--ink-2); }
.nx-sla2 .p { font-family: var(--fig); font-size: 28px; line-height: 1.2; margin: 2px 0 4px; }
.nx-sub-h { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 2px; }
.nx-hbar { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 56px; gap: 10px; align-items: center;
    padding: 6px 4px; margin: 0 -4px; border-radius: 6px; font-size: 13px; color: inherit; text-decoration: none; }
a.nx-hbar:hover { background: #FAFBFC; }
.nx-hbar .lb { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-hbar .t { display: block; height: 10px; background: var(--line-2); border-radius: 5px; overflow: hidden; }
.nx-hbar .f { display: block; height: 100%; border-radius: 0 5px 5px 0; background: var(--brand); }
.nx-hbar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.nx-hbar .od { color: var(--crit); margin-left: 4px; font-size: 11.5px; }
.nx-sys { padding: 0; }
.nx-sys-h { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 18px; background: none; border: 0;
    font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-align: left; flex-wrap: wrap; }
.nx-sys-h:hover { background: #FAFBFC; }
.nx-sys .card-body { border-top: 1px solid var(--line-2); }
.nx-dash .card-header .hdr-meta { margin-left: 8px; }

/* ── Batch 11a: กล่องงาน — แถว "ใคร" · ชิปตัวกรอง · ชื่อที่กดกรองได้ · หัวข้อสำรอง ── */
.nx-fbar-who { padding-top: 0; }
.nx-fbar:has(+ .nx-fbar-who) { border-bottom: 0; }
.nx-who-toggle { display: none; }
.nx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line-2); }
.nx-chip-clear { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 12.5px; color: var(--ink-2);
                 text-decoration: underline; cursor: pointer; }
.nx-who { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
          border-bottom: 1px dotted var(--ink-3); line-height: 1.35; }
.nx-who:hover, .nx-who:focus-visible { color: var(--brand); border-bottom-color: var(--brand); outline: none; }
.subject-hint { color: var(--ink-2); font-weight: 400; }
@media (max-width: 640px) {
    .nx-who-toggle { display: inline-flex; }
    .nx-fbar-who:not(.open) { display: none; }
}

/* ── Batch 11b: จัดระเบียบตาราง ── */
/* ป้ายทั้งระบบไม่หักบรรทัด — เดิมสูงตายตัว 22px แต่ข้อความหักได้ จึงล้นพื้นสี ("กำลัง/ดำเนิน/การ") */
.badge { white-space: nowrap; flex-shrink: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.one-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 15f: หัวข้องานในกล่องงาน — 3 บรรทัดที่ ~330–360px (เนื้อที่จริงหลังหักขอบ) รับหัวข้อไทยได้ราว 150 ตัวอักษร (เกินนั้นยังมี title) */
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* กล่องงาน: 9 คอลัมน์ กว้างคงที่ — ต่ำกว่า 1320px เลื่อนแนวนอน (คอลัมน์แรกตรึงบนมือถือจาก 10b-2) */
table.nx-inbox { table-layout: fixed; width: 100%; min-width: 1320px; }
/* 15f (ADQ-79): ความกว้าง = เนื้อหาที่ยาวที่สุดจริง (วัดจากจอ Prod) + ขอบซ้ายขวา 10px — รวม 974px (เดิม 1,218px)
   หัวข้อจึงได้ ~346px แม้จอแคบสุดก่อนเลื่อนแนวนอน · ~381px ที่จอ 1,355px
   ("INC 2569-00263" ~112 · ป้าย "กำลังดำเนินการ" ~110 · "ตอบ ทันเวลา (22 ชม. 39 น.)" ~143 · "16 ก.ย. 2569" ~72) */
table.nx-inbox th, table.nx-inbox td { padding-left: 10px; padding-right: 10px; }
table.nx-inbox col.c-no   { width: 132px; }
table.nx-inbox col.c-acc  { width: 200px; }
table.nx-inbox col.c-st   { width: 134px; }
table.nx-inbox col.c-due  { width: 116px; }
table.nx-inbox col.c-sla  { width: 166px; }
table.nx-inbox col.c-asg  { width: 134px; }
table.nx-inbox col.c-upd  { width: 92px; }
table.nx-inbox td { overflow: hidden; }
table.nx-inbox tbody tr.row-click:hover td { background: #FAFBFC; }
table.nx-inbox .item-name { font-size: 13.5px; line-height: 1.45; }
table.nx-inbox .item-desc { margin-top: 3px; }
.nx-inbox .no-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nx-inbox .ticket-no { font-size: 12.5px; }
.tt-mini { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px;
           font-size: 10.5px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.nx-inbox .acc-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.nx-inbox .sla2 { min-width: 0; }
.nx-inbox .sla-line { white-space: nowrap; }
.nx-inbox .sla-line .val { overflow: hidden; text-overflow: ellipsis; }
/* สถานะ: จุดสีนำหน้า — แยกสถานะออกจากป้ายประเภท/ความสำคัญได้ด้วยตา */
.badge.st-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* ยังไม่มอบหมาย = ช่องที่ต้องจัดการ ไม่ใช่ข้อความจางธรรมดา */
.nx-unassigned { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px dashed #C9D0D8;
                 border-radius: 12px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.nx-inbox .asg-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nx-inbox .asg-av { width: 22px; height: 22px; font-size: 11px; display: inline-flex; flex-shrink: 0; margin: 0; }

/* ── Batch 11c: ระยะห่างระหว่าง panel + ปุ่มไอคอน ── */
/* การ์ดที่วางซ้อนกันห่าง 16px เสมอ — เดิมบางหน้าใส่ style="margin-bottom:16px" เองทีละใบ หน้าที่ไม่ได้ใส่จึงชนกัน
   (margin แนวตั้งยุบรวมกับของ element ถัดไป จึงไม่ซ้อนเป็น 32px) */
.card:not(:last-child) { margin-bottom: 16px; }
/* ตัวจัดวางที่มี gap อยู่แล้ว — ห้ามเพิ่ม margin ไม่งั้นแถวใน grid สูงไม่เท่ากัน */
:is(.nx-dash, .nx-side-layout, .grid2, .nx-grid, .report-grid, .kpi-grid, .nx-kpis) > .card { margin-bottom: 0; }

/* ปุ่มไอคอน: app.css ตั้ง display:flex (กินทั้งบรรทัด) → สองปุ่มในช่องเดียวขึ้นบรรทัดใหม่ แถวสูงเท่าตัว */
.btn-icon { display: inline-flex; vertical-align: middle; flex-shrink: 0; }
.btn-icon + .btn-icon { margin-left: 4px; }
:is(.action-btns, .d-flex) > .btn-icon + .btn-icon { margin-left: 0; }   /* flex ที่มี gap อยู่แล้ว */
.btn-icon.btn-icon-sm { width: 28px; height: 28px; }
td:has(> .btn-icon) { white-space: nowrap; }

/* ── Batch 12c: เมนู/หน้าตามสิทธิ์ ── */
.nav-ro { margin-left: auto; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 4px;
          border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.62); }
.grc-collapsed .nav-ro { display: none; }
.nx-viewonly { margin-bottom: 14px; }
.nx-role-hint { background: #FAFBFC; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); }
.nx-role-hint .t { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.nx-role-hint .w { margin-top: 8px; color: var(--caution); display: flex; gap: 6px; align-items: flex-start; }
.nx-role-hint .n { margin-top: 6px; color: var(--ink-3); }
.nx-cap { display: inline-block; font-size: 11.5px; border-radius: 10px; padding: 1px 8px; margin: 2px 4px 2px 0;
          background: var(--pos-wash); color: var(--pos); white-space: nowrap; }
.nx-cap.no { background: var(--line-2); color: var(--ink-3); text-decoration: line-through; }
table.nx-matrix th.c, table.nx-matrix td.c { text-align: center; white-space: nowrap; }
table.nx-matrix td.yes { color: var(--pos); font-weight: 700; }
table.nx-matrix td.no { color: #C3CAD2; }

/* ══ Batch 13a — ปฏิทินงาน ═══════════════════════════════════════════════
   สีตรงกับป้าย SLA ในกล่องงาน (ok/warn/breach/paused) · วันหยุดเป็นลายทาง (ไม่ใช้สีอย่างเดียว — อ่านออกเมื่อพิมพ์ขาวดำ) */
.nx-tbl-card.nx-cal-card { overflow: visible; }                 /* กล่องรายการของวันต้องล้นขอบการ์ดได้ */
.nx-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.nx-cal-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nx-cal-title { min-width: 150px; text-align: center; font-size: 15px; }
.nx-cal-note { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 8px 16px; font-size: 13px;
    background: var(--gray-50); border-top: 1px solid var(--line-2); color: var(--ink-2); }
.nx-cal-note.crit { background: var(--crit-wash); color: var(--crit); }
.nx-cal-note .nx-i { vertical-align: -3px; }
.nx-cal-note .muted { color: var(--ink-2); }
.nx-cal-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.nx-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.nx-cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.nx-cal-legend .lg-ok { background: var(--brand); } .nx-cal-legend .lg-warn { background: var(--caution); }
.nx-cal-legend .lg-over { background: var(--crit); } .nx-cal-legend .lg-pause { background: var(--ink-3); }
.nx-cal-legend .lg-fu { background: #6B4FBB; } .nx-cal-legend .lg-done { background: var(--line-3); }
.nx-cal-legend .lg-hol { background: repeating-linear-gradient(135deg, #F3F4F6 0 3px, #D5DBE2 3px 6px); }
.nx-cal-body { position: relative; }
.nx-cal-body[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.nx-cal-empty { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* รายการหนึ่งงาน */
.nx-ev { display: block; font-size: 12px; line-height: 1.45; border-radius: 5px; padding: 2px 6px; border-left: 3px solid;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); text-decoration: none; min-width: 0; }
.nx-ev:hover { filter: brightness(.96); text-decoration: none; color: var(--ink); }
.nx-ev b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); }
.nx-ev.wide { white-space: normal; }
.nx-ev.t-ok    { background: var(--brand-wash); border-color: var(--brand); }
.nx-ev.t-warn  { background: var(--caution-wash); border-color: var(--caution); }
.nx-ev.t-over  { background: var(--crit-wash); border-color: var(--crit); }
.nx-ev.t-pause { background: var(--gray-50); border-color: var(--ink-3); border-left-style: dotted; }
.nx-ev.t-done  { background: #F3F4F6; border-color: var(--line-3); color: var(--ink-3); text-decoration: line-through; }
.nx-ev.fu { border-left-style: dashed; }
.nx-ev.fu:not(.t-over):not(.t-done) { background: #F0ECFA; border-color: #6B4FBB; }
.nx-ev .fu-i { color: #6B4FBB; font-weight: 600; margin-right: 3px; }
.tag-sla { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; padding: 0 4px; margin-left: 3px;
    border-radius: 4px; background: #fff; border: 1px solid var(--line-3); color: var(--ink-2); vertical-align: 1px; }

/* เดือน */
.nx-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nx-cal-wh { padding: 6px 8px; font-size: 12px; color: var(--ink-3); font-weight: 500; background: var(--gray-50); border-bottom: 1px solid var(--line); }
.nx-cal-day { position: relative; min-height: 116px; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
    border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.nx-cal-day:nth-child(7n) { border-right: 0; }
.nx-cal-day.wkend, .nx-cal-wcol.wkend, .nx-cal-lanes td.wkend { background: #FBFCFD; }
.nx-cal-day.hol, .nx-cal-wcol.hol, .nx-cal-lanes td.hol { background: repeating-linear-gradient(135deg, #F5F6F8 0 6px, #EDEFF2 6px 12px); }
.nx-cal-day.out .dn { color: #C3C9D0; }
.nx-cal-day .dh { display: flex; align-items: center; justify-content: space-between; }
.nx-cal-day .dn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12.5px; color: var(--ink-2); }
.nx-cal-day.today .dn { background: var(--brand); color: #fff; font-weight: 600; }
.nx-cal-day .dc { font-size: 11px; font-weight: 600; background: var(--caution-wash); color: var(--caution); border-radius: 9px; padding: 0 7px; }
.nx-cal-day .hl, .nx-cal-wcol .hl { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-cal-more { border: 0; background: none; padding: 0 6px; font: inherit; font-size: 12px; color: var(--brand); text-align: left; cursor: pointer; }
.nx-cal-more:hover { text-decoration: underline; }
.nx-cal-pop { position: absolute; z-index: 31; top: 30px; left: 4px; width: 300px; max-height: 360px; overflow-y: auto;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.nx-cal-pop.right { left: auto; right: 4px; }
.nx-cal-pop .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.nx-cal-scrim { position: fixed; inset: 0; z-index: 30; }

/* สัปดาห์ */
.nx-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nx-cal-wcol { min-height: 260px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-right: 1px solid var(--line-2); }
.nx-cal-wcol:last-child { border-right: 0; }
.nx-cal-wcol .wh { font-size: 12px; color: var(--ink-3); font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 2px; }
.nx-cal-wcol.today .wh { color: var(--brand); font-weight: 600; }
.nx-cal-wcol.today { background: color-mix(in srgb, var(--brand) 3%, #fff); }
table.nx-cal-lanes { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 880px; }
.nx-cal-lanes th, .nx-cal-lanes td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); vertical-align: top; padding: 6px; }
.nx-cal-lanes thead th { font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--gray-50); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-cal-lanes thead th.today { color: var(--brand); font-weight: 600; }
.nx-cal-lanes th.who { width: 160px; text-align: left; font-size: 13px; font-weight: 500; }
.nx-cal-lanes tbody th.un { color: var(--crit); }
.nx-cal-lanes td .nx-ev { margin-bottom: 3px; }
.nx-cal-lanes td.today { background: color-mix(in srgb, var(--brand) 3%, #fff); }
.nx-cal-lanes .load { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.nx-cal-lanes .load.hi { color: var(--caution); font-weight: 600; }

/* จอแคบ: รายการตามวัน */
.nx-cal-agenda { display: none; }
.nx-cal-agenda .ag { padding: 8px 12px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; }
.nx-cal-agenda .ad { font-size: 12px; color: var(--ink-3); }
.nx-cal-agenda .ad.today { color: var(--brand); font-weight: 600; }
@media (max-width: 720px) {
    .nx-cal-month, .nx-cal-week, .nx-cal-body .table-wrap, .nx-cal-scrim { display: none; }
    .nx-cal-agenda { display: block; }
    .nx-cal-nav { margin-left: 0; width: 100%; justify-content: space-between; }
    .nx-cal-title { min-width: 0; }
}

/* ── Batch 14c · บันทึกการใช้งาน (ADQ-71) ─────────────────────────────── */
/* KPI กดได้ = กรองตามตัวเลขนั้น — เป็นปุ่มจริงเพื่อให้ใช้คีย์บอร์ดได้ */
.nx-kpi-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--card);
              border: 1px solid var(--line); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.nx-kpi-btn:hover { border-color: var(--brand-line); box-shadow: var(--sh-1), 0 0 0 1px var(--brand-line); }
.nx-kpi-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nx-kpi-btn .kpi-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.nx-audit-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-audit-verify { margin-bottom: 14px; }

table.nx-audit-tbl td { vertical-align: top; }
table.nx-audit-tbl tbody tr.row-click { cursor: pointer; }
table.nx-audit-tbl tbody tr.row-click:hover td { background: #FAFBFC; }
table.nx-audit-tbl tbody tr.row-click:focus-visible td { outline: none; background: var(--brand-wash); }
.nx-audit-tbl .au-who { font-weight: 500; }
.nx-audit-tbl .au-act { font-weight: 600; margin-right: 6px; }
.nx-audit-tbl .au-ent { color: var(--ink-2); }
.nx-audit-tbl .au-sum { margin-top: 2px; overflow-wrap: anywhere; }

/* ป้ายหมวด — สีต่างกันพอให้กวาดตาเจอ "ความปลอดภัย" ในหน้ายาว ๆ */
.au-cat { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; margin-right: 6px; white-space: nowrap; }
.au-cat.sec  { background: var(--crit-wash); color: var(--crit); }
.au-cat.data { background: var(--info-wash); color: var(--info); }
.au-cat.out  { background: var(--caution-wash); color: var(--caution); }
.au-cat.sys  { background: var(--line-2); color: var(--ink-2); }

/* กล่องรายละเอียด */
.au-kv { margin-bottom: 14px; }
.au-kv code { font-family: var(--mono); font-size: 12.5px; }
table.au-diff { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.au-diff th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.au-diff td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; overflow-wrap: anywhere; }
.au-diff td:first-child { color: var(--ink-2); width: 34%; }
.au-diff td.old { background: var(--crit-wash); color: #7E2A23; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.au-diff td.new { background: var(--pos-wash); color: #0F5E43; }
.au-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }

/* แท็บ/ส่วน "ประวัติการแก้ไข" ในหน้าข้อมูล */
.nx-hist.card { margin-top: 16px; }
.nx-hist-body { display: flex; flex-direction: column; }
.nx-hist.card .nx-hist-body { padding: 4px 16px 12px; }
.nx-hist-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.nx-hist-item .w { color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.nx-hist-item .t { min-width: 0; overflow-wrap: anywhere; }
.nx-hist-item .a { font-weight: 600; margin-right: 4px; }
.nx-hist-item .a.bad { color: var(--crit); }
.nx-hist-item .c { color: var(--ink-2); margin-right: 6px; }
.nx-hist-item .old { color: var(--crit); text-decoration: line-through; }
.nx-hist-item .new { color: var(--pos); font-weight: 500; }
.nx-hist-note { padding: 12px 0; color: var(--ink-3); font-size: 13px; }
.nx-hist-note.crit { color: var(--crit); }
.nx-hist-link { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--brand-ink); text-decoration: none; }
.nx-hist-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .nx-audit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .nx-hist-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ── Batch 15a · วันที่ต้องเสร็จเส้นเดียว (ADQ-73) ─────────────────────── */
.nx-due .d { font-size: 13px; white-space: nowrap; }
.nx-due .s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.nx-due .s.bad { color: var(--crit); font-weight: 600; }
.nx-due .lg { display: inline-block; margin-top: 3px; font-size: 10.5px; border-radius: 4px; padding: 0 5px;
              background: var(--line-2); color: var(--ink-3); }
/* ป้ายบอกว่ายึดเส้นไหน — สีต่างกันพอให้กวาดตาเห็นว่างานไหนถูกกำหนดพิเศษคุม */
.due-src, .nx-due .src { display: inline-block; margin-left: 5px; font-size: 10.5px; font-weight: 600;
                         border-radius: 4px; padding: 0 5px; vertical-align: 1px; white-space: nowrap; }
.due-src.sla, .nx-due .src.sla   { background: var(--info-wash); color: var(--info); }
.due-src.plan, .nx-due .src.plan { background: var(--brand-wash); color: var(--brand-ink); }

/* การ์ด "วันที่ต้องเสร็จ" ในหน้างาน */
.nx-duecard { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.nx-duecard .cap { font-size: 12px; color: var(--ink-3); }
.nx-duecard .big { font-size: 19px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.nx-duecard .big.bad { color: var(--crit); }
.nx-duecard .left { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.nx-duecard .alt { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.nx-duecard .alt .lg { font-size: 10.5px; border-radius: 4px; padding: 0 5px; background: var(--line-2); color: var(--ink-2); margin-left: 4px; }

/* ── Batch 14d · สถานะระบบ (ADQ-74) ────────────────────────────────────── */
/* แถบสรุปบนสุด — คำตอบของคำถาม "ตอนนี้ระบบปกติไหม" ต้องอ่านได้จากระยะไกล */
.nx-hbanner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r);
              border: 1px solid var(--line-2); margin-bottom: 16px; }
.nx-hbanner b { font-size: 15.5px; }
.nx-hbanner .n { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.nx-hbanner.ok   { background: var(--pos-wash);  border-color: color-mix(in srgb, var(--pos) 35%, #fff);  color: var(--pos); }
.nx-hbanner.warn { background: var(--caution-wash); border-color: color-mix(in srgb, var(--caution) 35%, #fff); color: var(--caution); }
.nx-hbanner.bad  { background: var(--crit-wash); border-color: color-mix(in srgb, var(--crit) 35%, #fff); color: var(--crit); }
.nx-hbanner .n { color: var(--ink-2); }

.nx-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.nx-job { padding: 14px 16px; border-left: 3px solid var(--line-2); }
.nx-job.ok   { border-left-color: var(--pos); }
.nx-job.warn { border-left-color: var(--caution); }
.nx-job.bad  { border-left-color: var(--crit); }
.nx-job .h { display: flex; align-items: center; gap: 8px; }
.nx-job .t { font-weight: 600; font-size: 14.5px; }
.nx-job .h .badge { margin-left: auto; }
.nx-job .m { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.nx-job .s { font-size: 13px; margin-top: 6px; overflow-wrap: anywhere; }
.nx-job .e { font-size: 12.5px; color: var(--crit); margin-top: 4px; overflow-wrap: anywhere; }
.nx-job .f { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
/* แถบรอบล่าสุด — เห็น "ล้มติดกัน" กับ "ล้มครั้งเดียวแล้วกลับมา" ต่างกันทันทีโดยไม่ต้องอ่านตัวเลข */
.nx-job .spark { display: flex; gap: 2px; margin-top: 10px; }
.nx-job .spark .d { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--line-2); }
.nx-job .spark .d.ok  { background: color-mix(in srgb, var(--pos) 60%, #fff); }
.nx-job .spark .d.bad { background: var(--crit); }

.nx-hchecks { width: 100%; }
.nx-hchecks th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 500; padding: 10px 20px; }
.nx-hchecks td { padding: 11px 20px; border-top: 1px solid var(--line-2); font-size: 13.5px; vertical-align: top; }
.nx-hchecks .lb { font-weight: 500; white-space: nowrap; }
.nx-hchecks .nt { color: var(--ink-3); font-size: 12.5px; }
.nx-hchecks .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px;
                   vertical-align: 1px; background: var(--line-2); }
.nx-hchecks .dot.ok   { background: var(--pos); }
.nx-hchecks .dot.warn { background: var(--caution); }
.nx-hchecks .dot.bad  { background: var(--crit); }

@media (max-width: 560px) {
    .nx-hchecks .lb { white-space: normal; }
}

/* ── Batch 15b · SLA Policy ที่ตั้งง่ายขึ้น (ADQ-75) ───────────────────── */
/* ช่องเวลา: ตัวเลข + หน่วย — เดิมกรอกเป็นนาทีล้วน ไม่มีใครนึกออกว่า 2880 คือเท่าไร */
.nx-dur { display: flex; gap: 6px; align-items: center; }
.nx-dur .form-control:first-child { max-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.nx-dur select.form-control { max-width: 150px; }
.nx-dur-eq { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.nx-dur-err { font-size: 12px; color: var(--crit); margin-top: 3px; }

/* ปุ่มลัดเวลาที่ตั้งกันบ่อย */
.nx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.nx-chips .btn { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; }

/* ตารางเวลาตั้งต้น */
.nx-defaults td { vertical-align: top; }
.nx-defaults .pri { font-weight: 600; }
.nx-defaults tr.row-dirty { background: var(--caution-wash); }

/* ต่างจากค่าตั้งต้นเท่าไร — เห็นทันทีว่า policy ใบนี้เข้มขึ้นหรือหย่อนลง */
.delta-up   { color: var(--pos); font-weight: 500; }
.delta-down { color: var(--caution); font-weight: 500; }

/* ประโยคสรุปขอบเขตใต้ช่องเลือกในฟอร์ม */
.nx-scope { background: #FAFBFC; border: 1px solid var(--line-2); border-radius: 8px;
            padding: 9px 12px; font-size: 13px; margin-bottom: 4px; }
/* ขอบเขตซ้ำกับ policy เดิม — เตือน ไม่ขวาง */
.nx-dup { background: var(--caution-wash); border: 1px solid #EDD7A6; border-radius: 8px;
          padding: 10px 12px; font-size: 12.5px; color: #7A4A00; margin-top: 8px; }
.nx-dup .acts { margin-top: 7px; }
/* รหัส/ชื่อที่ระบบสร้างให้ */
.nx-auto { display: flex; align-items: center; gap: 12px; background: var(--brand-wash);
           border: 1px solid color-mix(in srgb, var(--brand) 22%, #fff); border-radius: 8px;
           padding: 10px 12px; font-size: 12.5px; color: var(--brand-ink); margin-bottom: 12px; }
.nx-auto > div { min-width: 0; overflow-wrap: anywhere; }
.nx-auto .btn { margin-left: auto; flex: none; }
/* เทียบกับค่าตั้งต้นของระดับที่เลือก */
.nx-cmp { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.nx-cmp > div { margin-top: 2px; }

@media (max-width: 720px) {
    .nx-dur { flex-wrap: wrap; }
    .nx-dur select.form-control { max-width: 100%; }
}

/* ── Batch 15d · หน้าแจ้งงาน: หมวดย่อยอยู่กับบริการ · ผลิตภัณฑ์อยู่กับลูกค้า (ADQ-77) ──── */
/* หมวดย่อยวางใต้การ์ดบริการทันที — เห็นชัดว่าเป็นลูกของการ์ดที่เลือก ไม่ใช่ของประเภทงาน */
.tc-subs { margin-top: 14px; padding: 10px 12px; background: #FAFBFC; border: 1px solid var(--line-2); border-radius: 9px; }
.tc-subs .l { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; }
.tc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-chips .cust-chip { font: inherit; font-size: 13px; cursor: pointer; }

/* ประเภทงานเป็นปุ่มเลือก — ประเภทที่ยังสร้างไม่ได้ปิดไว้แทนการปล่อยให้โดนปฏิเสธตอนบันทึก */
.tc-type { margin-top: 14px; margin-bottom: 0; }
.tc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.tc-seg button { font: inherit; font-size: 13px; padding: 7px 14px; border: 0; border-right: 1px solid var(--line);
                 background: #fff; color: var(--ink-2); cursor: pointer; }
.tc-seg button:last-child { border-right: 0; }
.tc-seg button.on { background: var(--brand); color: #fff; font-weight: 600; }
.tc-seg button:disabled { color: var(--ink-3); background: #FAFBFC; cursor: not-allowed; }
.tc-seg button:focus-visible { position: relative; z-index: 1; box-shadow: var(--focus); }

/* ผลิตภัณฑ์นอกทะเบียนติดตั้ง — เตือน ไม่ขวาง */
.tc-outside { background: var(--caution-wash); border: 1px solid #EDD7A6; border-radius: 8px; padding: 8px 12px;
              font-size: 12.5px; color: #7A4A00; margin-top: 8px; }
.tc-outside a { color: inherit; text-decoration: underline; }

@media (max-width: 560px) {
    .tc-seg { display: flex; }
    .tc-seg button { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
}

/* ══════════════════════════════════════════════════════════════════════
   Batch 15e · ADQ-78 — ไฟล์แนบ: เปิดดูในหน้า (รูป · PDF)
   ══════════════════════════════════════════════════════════════════════ */
.file-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--gray-100); font-size: 13px; }
.file-row .file-name { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font: inherit;
    color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; word-break: break-all; }
.file-row .file-name:hover { color: var(--brand-hover); }
.file-row .file-name:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.file-row .file-name.dl { color: var(--gray-800, #1f2937); }
.file-row.missing .file-name { color: var(--gray-400, #9ca3af); text-decoration: none; cursor: default; }
.file-row .file-dl { margin-left: auto; width: 30px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--gray-200, #e5e7eb);
    background: #fff; border-radius: 7px; color: var(--gray-600, #4b5563); cursor: pointer; flex: none; }
.file-row .file-dl:hover:not(:disabled) { background: var(--gray-50, #f9fafb); color: var(--brand); }
.file-row .file-dl:disabled { opacity: .4; cursor: not-allowed; }

/* ตัวดูเต็มจอ — ทับทุกอย่างรวม modal ปกติ แต่อยู่ใต้ toast */
.fv { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: rgba(12, 18, 26, .96); color: #fff; outline: none; }
.fv-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.fv-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fv-meta, .fv-count { font-size: 12.5px; color: #a8b3bf; white-space: nowrap; }
.fv-sp { flex: 1; }
.fv-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06);
    color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.fv-btn:hover { background: rgba(255, 255, 255, .14); }
.fv-btn:focus-visible, .fv-nav:focus-visible, .fv-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fv-body { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; padding: 16px 64px; overflow: hidden; }
.fv-body.actual { overflow: auto; place-items: start center; }
.fv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); background: #fff; cursor: zoom-in; }
.fv-body.actual .fv-img { max-width: none; max-height: none; cursor: zoom-out; }
.fv-pdf { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 4px; background: #525659; }
.fv-msg { text-align: center; font-size: 14px; color: #d5dce3; display: grid; gap: 12px; justify-items: center; max-width: 420px; }
.fv-spin { width: 30px; height: 30px; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; border-radius: 50%; animation: fv-rot .8s linear infinite; }
@keyframes fv-rot { to { transform: rotate(360deg); } }
.fv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.fv-nav:hover { background: rgba(255, 255, 255, .18); }
.fv-nav.l { left: 12px; } .fv-nav.r { right: 12px; }
.fv-body.actual .fv-nav { position: fixed; }
.fv-foot { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 8px 16px 12px; font-size: 12px; color: #a8b3bf; }
.fv-pill { border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 2px 10px; background: none; color: #d5dce3; font: inherit; font-size: 12px;
    cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-pill.on { background: #fff; color: #15202b; border-color: #fff; }
.fv-keys kbd { font-family: inherit; font-size: 11px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; padding: 0 5px; }
@media (max-width: 640px) {
    .fv-body { padding: 8px; }
    .fv-meta, .fv-btn .lb, .fv-keys, .fv-pill { display: none; }
    .fv-nav { width: 38px; height: 38px; background: rgba(12, 18, 26, .6); }
    .fv-nav.l { left: 6px; } .fv-nav.r { right: 6px; }
    .fv-foot::before { content: "ปัดซ้าย/ขวาเพื่อเปลี่ยนไฟล์"; }
}

/* ══════════════════════════════════════════════════════════════════════
   Batch 15f · ADQ-79 — กล่องงาน: หัวข้ออ่านได้ครบ
   ══════════════════════════════════════════════════════════════════════ */
/* สถานะ + ความสำคัญในช่องเดียว — ป้ายสถานะบน ความสำคัญ (จุดสี + ชื่อ) ล่าง */
.nx-inbox .st-cell .pri { display: block; margin-top: 5px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
/* ป้ายแหล่งที่มาของวันที่ต้องเสร็จอยู่บรรทัดของตัวเอง (เดิมต่อท้ายวันที่แล้วโดนตัด) */
.nx-inbox .nx-due .src { display: table; margin: 3px 0 0; }
.nx-inbox .nx-due .d { overflow: hidden; text-overflow: ellipsis; }