/* RRMS v2 - shared styles */
:root {
    --bg: #f5f7fa; --card: #ffffff; --ink: #0f172a; --muted: #5b6475; --line: #e3e8ef; --line-soft: #eef1f5;
    --field: #cbd5e1; --soft: #f8fafc; --chip: #f1f5f9;
    --primary: #15803d; --primary-ink: #ffffff; --primary-soft: #e8f5ec; --primary-soft-ink: #14532d;
    --danger: #b91c1c; --danger-soft: #fef2f2; --danger-line: #fecaca;
    --warn-soft: #fffbeb; --warn-ink: #78350f; --warn-line: #fde68a;
    --agent-soft: #ede9fe; --agent-ink: #4c1d95;
    --r1: #2563eb; --r1-soft: #dbeafe; --r1-ink: #1e3a8a;
    --r2: #c2410c; --r2-soft: #ffedd5; --r2-ink: #7c2d12;
    --r3: #0d9488; --r3-soft: #ccfbf1; --r3-ink: #134e4a;
    --now: #dc2626;
    --shadow: 0 20px 50px rgba(15, 23, 42, .18);
    --radius: 12px;
}
[data-theme="dark"] {
    --bg: #0b1120; --card: #111a2e; --ink: #e8edf5; --muted: #9aa5b8; --line: #23304a; --line-soft: #1b2740;
    --field: #33425f; --soft: #16213a; --chip: #1c2943;
    --primary: #22a35a; --primary-ink: #04150b; --primary-soft: #133222; --primary-soft-ink: #a7e8bf;
    --danger: #f87171; --danger-soft: #3a1414; --danger-line: #6b2222;
    --warn-soft: #33270b; --warn-ink: #fcd98a; --warn-line: #6b5212;
    --agent-soft: #2a2150; --agent-ink: #d6ccff;
    --r1: #5b8def; --r1-soft: #1c2c52; --r1-ink: #c9d9ff;
    --r2: #e0763a; --r2-soft: #3d2312; --r2-ink: #ffd5bb;
    --r3: #2bb3a5; --r3-soft: #0f3532; --r3-ink: #b9f3ec;
    --now: #f87171;
    --shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--bg); color: var(--ink);
    font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; font-size: 14px; line-height: 1.5;
}
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- Header ---------- */
.topbar {
    display: flex; flex-direction: column; gap: 0;
    padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
}
.topbar-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.brand-logo { width: 36px; height: 36px; display: block; flex: none; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 700; font-size: 16px; line-height: 1.2; }
.brand-sub { font-size: 12px; color: var(--muted); line-height: 1.25; display: block; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-desktop { margin-left: 8px; margin-right: auto; }
.nav-mobile { display: none; }
.nav a { height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.nav a:hover { background: var(--chip); }
.nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.login-short { display: none; }
.user-menu-btn { border-radius: 999px; padding: 0 12px 0 4px; height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.user-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.user-info { text-align: left; line-height: 1.15; }
.user-name { display: block; font-weight: 600; font-size: 13px; }
.user-uid { display: block; font-size: 11px; }
.user-down { display: flex; align-items: center; opacity: .7; }

/* ---------- Controls ---------- */
.btn {
    height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--soft); }
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 600; }
.btn-primary:hover { background: var(--primary); filter: brightness(1.06); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 600; }
.btn-lg { height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-icon { width: 40px; padding: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; background: var(--chip); border-radius: 10px; padding: 4px; gap: 2px; }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; }
.seg button[aria-pressed="true"] { background: var(--card); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .15); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea, .input {
    height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; background: var(--card); font-size: 14px; color: var(--ink);
}
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; height: 40px; background: var(--soft); min-width: 200px; }
.search input { border: 0; background: transparent; outline: none; width: 100%; }
.chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.pill-agent { background: var(--agent-soft); color: var(--agent-ink); }
.pill-web { background: var(--chip); color: var(--ink); }
.pill-mine { background: var(--chip); color: var(--ink); }
.pill-ok { background: var(--primary-soft); color: var(--primary-soft-ink); }
.pill-cancel { background: var(--danger-soft); color: var(--danger); }
.room-1 { --rc: var(--r1); --rs: var(--r1-soft); --ri: var(--r1-ink); }
.room-2 { --rc: var(--r2); --rs: var(--r2-soft); --ri: var(--r2-ink); }
.room-3 { --rc: var(--r3); --rs: var(--r3-soft); --ri: var(--r3-ink); }
.room-pill { background: var(--rs); color: var(--ri); }
.room-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--rc); flex: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.banner-warn { display: flex; gap: 10px; align-items: center; background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: 12px; padding: 10px 14px; font-size: 13px; }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(2, 6, 23, .55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal-bg.open { display: flex; }
.modal { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); width: 100%; max-width: 640px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.modal-sm { max-width: 480px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-body { padding: 18px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); }
.modal-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: var(--chip); display: flex; align-items: center; justify-content: center; }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); }
.toast.error { background: var(--danger); color: #fff; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { background: var(--soft); text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; padding: 10px 12px; white-space: nowrap; }
table.data td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.page { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.page-head h1 { margin: 0; font-size: 24px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 700; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); white-space: nowrap; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--ink); font-weight: 600; }

@media (max-width: 768px) {
    .topbar { padding: 8px 12px; }
    .topbar-bar { gap: 8px; }
    .brand { gap: 8px; flex: 1 1 auto; min-width: 0; }
    .brand-logo { width: 30px; height: 30px; }
    .brand-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 175px; }
    .brand-sub { display: none !important; }
    
    .nav-desktop { display: none !important; }
    .nav-mobile {
        display: flex;
        width: 100%;
        overflow-x: auto;
        gap: 6px;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px solid var(--line-soft);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-mobile::-webkit-scrollbar { display: none; }
    .nav-mobile a { height: 32px; font-size: 12.5px; padding: 0 10px; border-radius: 8px; white-space: nowrap; flex: none; }

    .top-actions { gap: 6px; }
    .top-actions .btn { height: 34px; font-size: 12px; padding: 0 9px; border-radius: 8px; }
    .top-actions .btn-icon { width: 34px; padding: 0; }
    .login-full { display: none; }
    .login-short { display: inline; }
    
    .user-menu-btn { height: 34px; padding: 0 6px 0 3px; gap: 4px; }
    .user-avatar { width: 28px; height: 28px; font-size: 12px; }
    .user-uid { display: none; }
    .user-name { font-size: 12px; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-down svg { width: 12px; height: 12px; }

    .page { padding: 12px 10px; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .modal-bg { padding: 0; align-items: flex-end; }
    .modal { max-height: 92vh; border-radius: 18px 18px 0 0; }
    .search { min-width: 0; flex: 1 1 100%; }
}