/* =============================================================================
   NebrixAI Design System — enterprise UI (อ้างอิงภาษา design ของ Nebrix suite)
   tokens เดียวกับ NEBRIX_AI_MOCKUP.html / one-pager (IBM Plex Sans Thai)
   ============================================================================= */

:root {
    /* palette */
    --ink: #1B2437;
    --muted: #5B6474;
    --faint: #98A0AE;
    --paper: #F6F7F9;
    --card: #FFFFFF;
    --line: #E3E6EC;
    --line-soft: #F0F1F5;
    --indigo: #3D4FA8;
    --indigo-strong: #33428F;
    --indigo-bg: #EEF0FA;
    --indigo-line: #D6DBF2;
    --teal: #0F7A64;
    --teal-bg: #E7F3EF;
    --amber: #A96F14;
    --amber-bg: #FBF2E0;
    --danger: #d03b3b;
    --danger-bg: #FBEAEA;
    /* shape & depth */
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-1: 0 1px 2px rgba(27, 36, 55, .05), 0 1px 3px rgba(27, 36, 55, .04);
    --shadow-2: 0 4px 14px rgba(27, 36, 55, .08);
    /* type */
    --font: 'IBM Plex Sans Thai', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'IBM Plex Mono', Consolas, monospace;

    /* ---- rc58: token เพิ่มเติมสำหรับ UI kit (nx-ui.css) — หน้าใช้ token เท่านั้น ห้ามใส่สี hex เอง ---- */
    /* สถานะ (สีตัวอักษรบนพื้นอ่อนผ่าน WCAG AA ≥ 4.5:1 — มี test ตรวจ) */
    --success: var(--teal);
    --success-bg: var(--teal-bg);
    --success-line: #BFE0D6;
    --warn: #8F5D0F;
    --warn-bg: var(--amber-bg);
    --warn-line: #EAD9B0;
    --danger-strong: #B32F2F;
    --danger-ink: #B42318;
    --danger-line: #F1C4C0;
    --danger-tint: #FFF7F5;
    --neutral-bg: #EFF1F4;
    --neutral-ink: #57606F;
    --sky: #1F6FA8;
    --sky-bg: #E6F1FA;
    --rose: #A3407F;
    --rose-bg: #F7EAF4;
    --violet: #6A4FB3;
    --violet-bg: #F1EEFA;
    --on-accent: #FFFFFF;
    --code-bg: #1B2437;
    --code-ink: #E8EBF5;
    /* เส้น · พื้น hover */
    --line-strong: #C9CEDA;
    --hover: #FAFBFD;
    /* ระยะห่าง 4 · 8 · 12 · 16 · 24 · 32 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    /* ขนาดตัวอักษร */
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-md: 13.5px;
    --fs-lg: 15px;
    --fs-xl: 17px;
    --fs-h1: 22px;
    /* รูปทรง · ความลึก · ชั้น */
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-3: 0 12px 40px rgba(27, 36, 55, .22);
    --overlay: rgba(27, 36, 55, .40);
    --overlay-soft: rgba(27, 36, 55, .28);
    --focus-ring: 0 0 0 3px rgba(61, 79, 168, .18);
    --t-fast: .12s ease;
    --z-drawer: 1400;
    --z-dialog: 1500;
    --z-toast: 2000;
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6474' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
}

::selection { background: var(--indigo-bg); }

/* recessive scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }
::-webkit-scrollbar-track { background: transparent; }

a { color: var(--indigo); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

button, input, select, textarea { font-family: inherit; }

/* ===== app shell ===== */
.nxs-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
}

.nxs-side {
    background: var(--card);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.nxs-logo { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.nxs-logo .b { font-weight: 600; letter-spacing: .14em; font-size: 16px; display: block; }
.nxs-logo .b em { font-style: normal; color: var(--indigo); }
.nxs-logo .v { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.nxs-grp {
    padding: 16px 20px 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
}

.nxs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease;
}

.nxs-item .ic { width: 18px; text-align: center; font-size: 14px; }
.nxs-item:hover { background: var(--paper); color: var(--ink); }
.nxs-item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: 0; }
.nxs-nav-top { margin-top: 8px; }
/* rc62 — ลิงก์ข้ามไปเนื้อหา: ซ่อนจนกว่าจะได้โฟกัสด้วยคีย์บอร์ด */
.nxs-skip { position: absolute; left: 12px; top: -60px; z-index: 2100; background: var(--indigo); color: var(--on-accent); padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: top .12s ease; }
.nxs-skip:focus { top: 12px; }
#main:focus { outline: none; }
.nxs-item.on { color: var(--indigo); background: var(--indigo-bg); border-left-color: var(--indigo); font-weight: 500; }

.nxs-user { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 20px 16px; }
.nxs-user .nm { font-weight: 600; font-size: 13.5px; }
.nxs-user .rl { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.nxs-credit .bar { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.nxs-credit .bar i { display: block; height: 100%; background: var(--teal); border-radius: 3px; transition: width .3s ease; }
.nxs-credit .bar.is-warn i { background: var(--amber); }
.nxs-credit .bar.is-low i { background: var(--danger); }
.nxs-credit .t { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.nxs-logout {
    width: 100%;
    margin-top: 12px;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.nxs-logout:hover { border-color: var(--danger-line); color: var(--danger-ink); background: var(--danger-bg); }

.nxs-mainarea { min-width: 0; }
.nxs-content { max-width: 1160px; margin: 0 auto; padding: 26px 34px 48px; }

/* ===== password field + strength meter (ใช้ร่วม /register และ /reset-password · Ui/PasswordField) ===== */
.pw-box { position: relative; }
.pw-box input {
    display: block; width: 100%; box-sizing: border-box;
    padding-right: 42px !important;
}
.pw-eye {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 7px; cursor: pointer;
    color: var(--muted); padding: 0; transition: color .12s ease, background .12s ease;
}
.pw-eye:hover { color: var(--indigo); background: var(--indigo-bg); }
.pw-eye:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pw-eye svg { display: block; }
.pw-eye svg[hidden] { display: none; }
.pw-strength { display: none; align-items: center; gap: 12px; margin-top: 8px; }
.pw-strength.show { display: flex; }
.pw-bars { display: flex; gap: 5px; flex: 1; }
.pw-bars span {
    height: 5px; flex: 1; border-radius: 3px; background: var(--line);
    transition: background .18s ease;
}
/* rc61 — ระดับความแข็งแรง: สี + ข้อความเสมอ (ไม่สื่อด้วยสีอย่างเดียว) · ตัวอักษรผ่าน AA */
.pw-lvl-1 .pw-bars span.on { background: var(--danger); }
.pw-lvl-2 .pw-bars span.on { background: var(--amber); }
.pw-lvl-3 .pw-bars span.on { background: var(--sky); }
.pw-lvl-4 .pw-bars span.on { background: var(--success); }
.pw-lvl-1 .pw-label { color: var(--danger-ink); }
.pw-lvl-2 .pw-label { color: var(--warn); }
.pw-lvl-3 .pw-label { color: var(--sky); }
.pw-lvl-4 .pw-label { color: var(--success); }
.pw-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; min-width: 66px; text-align: right; }
.pw-match { display: none; font-size: 12px; font-weight: 500; margin-top: 6px; }
.pw-match.show { display: block; }
.pw-match.pw-ok { color: var(--success); }
.pw-match.pw-bad { color: var(--danger-ink); }

/* ===== verify-email banner (Sprint 5 B2) ===== */
.nxs-verify {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn);
    padding: 9px 34px; font-size: 13px; line-height: 1.6;
}
.nxs-verify b { font-weight: 600; }
.nxs-verify form { margin: 0; }
.nxs-verify button {
    background: transparent; border: 1px solid var(--warn); color: var(--warn); border-radius: var(--radius-sm);
    padding: 4px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
    transition: background .12s ease;
}
.nxs-verify button:hover { background: var(--card); }

/* ===== typography scale ===== */
b, strong { font-weight: 600; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.005em; }

/* ===== base elements (สำหรับหน้าที่ใช้ class กลาง) ===== */
.nx-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

/* responsive shell — rc58: จอแคบ (≤ 900px) เมนูข้างพับเป็นปุ่ม ☰ (เดิมเมนูกองอยู่บนสุด เนื้อหาถูกดันลงล่าง) */
.nxs-menu-toggle { display: none; }
.nxs-topbar, .nxs-scrim { display: none; }
@media (max-width: 900px) {
    .nxs-shell { grid-template-columns: 1fr; }
    .nxs-menu-toggle { display: block; position: absolute; opacity: 0; pointer-events: none; }
    .nxs-topbar {
        display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 1300;
        background: var(--card); border-bottom: 1px solid var(--line); padding: 8px 14px;
    }
    .nxs-topbar .b { font-weight: 600; letter-spacing: .14em; font-size: 15px; }
    .nxs-topbar .b em { font-style: normal; color: var(--indigo); }
    .nxs-burger {
        width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; color: var(--ink);
    }
    .nxs-topbar:has(.nxs-menu-toggle:focus-visible) .nxs-burger { outline: 2px solid var(--indigo); outline-offset: 2px; }
    .nxs-side {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px; height: 100vh; z-index: 1350;
        transform: translateX(-105%); transition: transform .18s ease; box-shadow: none; visibility: hidden;
    }
    body:has(#nxs-menu:checked) .nxs-side { transform: none; box-shadow: var(--shadow-3); visibility: visible; }
    body:has(#nxs-menu:checked) .nxs-scrim { display: block; position: fixed; inset: 0; background: var(--overlay-soft); z-index: 1340; }
    .nxs-content { padding: 18px; }
    .nxs-verify { padding: 9px 18px; }
}

/* ===== blazor error ui ===== */
#blazor-error-ui {
    background: var(--warn-bg);
    color: var(--warn);
    border-top: 1px solid var(--warn-line);
    bottom: 0;
    box-shadow: var(--shadow-2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13.5px;
}
#blazor-error-ui .reload { color: var(--indigo); font-weight: 600; margin-left: 8px; }

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .4rem; background: none; border: none; color: inherit; font-size: 14px; padding: 4px 8px; border-radius: var(--radius-sm); }
#blazor-error-ui .dismiss:hover { background: var(--card); }

/* ===== rc62: หน้าต่างกำลังเชื่อมต่อใหม่ (Blazor Server) — blazor.web.js สลับ class ให้ ===== */
.nxs-reconnect { display: none; }
.nxs-reconnect.components-reconnect-show,
.nxs-reconnect.components-reconnect-failed,
.nxs-reconnect.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 2050; align-items: center; justify-content: center;
    background: var(--overlay); padding: var(--sp-4);
}
.nxs-reconnect__box { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--sp-5) var(--sp-6); width: 420px; max-width: 100%; text-align: center; }
.nxs-reconnect__box h2 { font-size: var(--fs-xl); margin: var(--sp-2) 0 6px; }
.nxs-reconnect__box p { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--sp-4); line-height: 1.7; }
.nxs-reconnect__box p:last-child { margin-bottom: 0; }
.nxs-reconnect__show, .nxs-reconnect__failed, .nxs-reconnect__rejected { display: none; }
.components-reconnect-show .nxs-reconnect__show,
.components-reconnect-failed .nxs-reconnect__failed,
.components-reconnect-rejected .nxs-reconnect__rejected { display: block; }