:root {
    --kc-bg: #f5f7fa;
    --kc-surface: #ffffff;
    --kc-line: #e5e8ef;
    --kc-text: #1f2329;
    --kc-muted: #5b6475;
    --kc-primary: #2f54eb;
    --kc-primary-soft: #eef2ff;
    --kc-ok: #1f8a4c;
    --kc-ok-soft: #e7f6ec;
    --kc-wait: #a15c00;
    --kc-wait-soft: #fff4e0;
    --kc-warn: #b54708;
    --kc-warn-soft: #fff1e7;
    --kc-bad: #c4320a;
    --kc-bad-soft: #fde9e4;
    --kc-radius: 10px;
}

.mud-theme-dark, .mud-theme-dark body {
    --kc-bg: #0f1115;
    --kc-surface: #1b1f27;
    --kc-line: #2a2f3a;
    --kc-text: #e6e8ee;
    --kc-muted: #9aa3b5;
    --kc-primary: #6f8cff;
    --kc-primary-soft: #1f2846;
    --kc-ok: #4cc584;
    --kc-ok-soft: #14301f;
    --kc-wait: #f0b45b;
    --kc-wait-soft: #34270f;
    --kc-warn: #ff9a5c;
    --kc-warn-soft: #3a2213;
    --kc-bad: #ff7a5c;
    --kc-bad-soft: #3d1a12;
}

html, body {
    font-family: Inter, system-ui, "Segoe UI", sans-serif;
    margin: 0;
    background: var(--mud-palette-background, var(--kc-bg));
    color: var(--mud-palette-text-primary, var(--kc-text));
}

body { --kc-surface: var(--mud-palette-surface, #fff); }

a { color: var(--mud-palette-primary, var(--kc-primary)); }
code, pre, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; }
code { background: var(--mud-palette-background-gray, #f1f3f7); padding: 1px 5px; border-radius: 4px; }
pre { background: #1f2329; color: #e6e8ee; padding: 10px 12px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

.boot { padding: 40px; color: var(--kc-muted); }

/* ---------- Shell ---------- */
.appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.02rem; color: var(--mud-palette-primary); }
.brand span { color: var(--mud-palette-text-primary); }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: #101D35; padding: 2px; box-sizing: border-box; }
.company-chip { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-right: 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.menu-who { padding: 8px 16px 10px; display: flex; flex-direction: column; min-width: 220px; }
.menu-who small { color: var(--mud-palette-text-secondary); }
.menu-form { margin: 0; }
.menu-signout { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 8px 16px; font: inherit; font-size: .875rem; cursor: pointer; color: inherit; text-align: left; }
.menu-signout:hover { background: var(--mud-palette-action-default-hover); }
.nav-drawer { border-right: 1px solid var(--mud-palette-lines-default); }
.nav { padding-top: 10px; }
.nav .mud-nav-link { border-radius: 8px; margin: 2px 10px; width: auto; }
.nav .mud-nav-link.active { background: var(--kc-primary-soft); color: var(--mud-palette-primary); font-weight: 600; }

.page { max-width: 1240px; margin: 0 auto; padding: 24px 28px 48px; }
@media (max-width: 700px) { .page { padding: 16px 16px 40px; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.55rem; font-weight: 700; margin: 2px 0 2px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.page-head .sub { margin: 0; color: var(--mud-palette-text-secondary); font-size: .9rem; max-width: 720px; }
.page-head .grow { flex: 1; min-width: 260px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--mud-palette-text-secondary) !important; }
.sticky-head { position: sticky; top: 56px; z-index: 5; background: var(--mud-palette-background); padding: 12px 0 10px; margin-top: -12px; border-bottom: 1px solid var(--mud-palette-lines-default); }

/* ---------- Cards ---------- */
.card { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--kc-radius); padding: 18px 20px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card.narrow { max-width: 640px; }
.card h2 { font-size: 1rem; font-weight: 650; margin: 0 0 10px; }
.card h3 { font-size: .9rem; font-weight: 600; margin: 0 0 6px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.padded { padding: 14px 18px; }
.card-head.padded { margin: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 + .grid-2 { margin-top: 16px; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }
.team-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 960px) { .team-grid { grid-template-columns: 1fr; } }

.muted { color: var(--mud-palette-text-secondary); }
.small { font-size: .82rem; }
.center { text-align: center; }
.danger-text { color: var(--mud-palette-error); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--kc-radius); text-decoration: none; color: inherit; transition: border-color .15s; }
.stat:hover { border-color: var(--mud-palette-primary); }
.stat-label { font-size: .8rem; color: var(--mud-palette-text-secondary); font-weight: 500; }
.stat-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.stat-foot { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.stat-attn .stat-value { color: var(--kc-wait); }
.stat-warn .stat-value { color: var(--kc-warn); }

.getting-started ol { margin: 0; padding-left: 20px; line-height: 1.7; }
.getting-started li { margin-bottom: 4px; }

/* ---------- Chips and dots ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.chip + .chip { margin-left: 4px; }
.chip-ok { background: var(--kc-ok-soft); color: var(--kc-ok); }
.chip-wait { background: var(--kc-wait-soft); color: var(--kc-wait); }
.chip-warn { background: var(--kc-warn-soft); color: var(--kc-warn); }
.chip-bad { background: var(--kc-bad-soft); color: var(--kc-bad); }
.chip-muted { background: var(--mud-palette-background-gray, #eef0f4); color: var(--mud-palette-text-secondary); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.dot-off { background: #b4bac6; }

/* ---------- Lists ---------- */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--mud-palette-lines-default); }
.mini-list li:first-child { border-top: 0; }
.mini-list a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 2px; text-decoration: none; color: inherit; min-width: 0; }
.mini-main { flex: 1; display: flex; flex-direction: column; min-width: 0; font-weight: 550; }
.mini-main small { font-weight: 400; color: var(--mud-palette-text-secondary); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: .86rem; }
.activity li:first-child { border-top: 0; }
.activity em { font-style: normal; color: var(--mud-palette-text-secondary); }
.activity time { color: var(--mud-palette-text-secondary); white-space: nowrap; font-size: .78rem; }
.pending-enroll { border-style: dashed; }

/* ---------- Tables ---------- */
.search { max-width: 340px; }
.clickable { cursor: pointer; }
.dev-cell { display: flex; align-items: center; gap: 10px; }
.dev-cell div { display: flex; flex-direction: column; }
.dev-cell small { color: var(--mud-palette-text-secondary); font-size: .78rem; }
.empty-inline { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px; color: var(--mud-palette-text-secondary); text-align: center; }
.empty-inline p { margin: 0; max-width: 460px; }
.empty-state { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-state h1 { margin: 0; font-size: 1.4rem; }
.empty-state p { margin: 0 0 8px; color: var(--mud-palette-text-secondary); }

/* ---------- Device page ---------- */
.with-dot .dot { margin-right: 2px; }
.facts { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; font-size: .88rem; }
.facts dt { color: var(--mud-palette-text-secondary); }
.facts dd { margin: 0; word-break: break-word; }
.warn-box { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--kc-warn-soft); color: var(--kc-warn); font-size: .85rem; }
.warn-box ul { margin: 6px 0 0; padding-left: 18px; }
.cmd-list, .app-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.cmd-list li { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .86rem; flex-wrap: wrap; }
.cmd-list li:first-child { border-top: 0; }
.cmd-type { font-weight: 600; min-width: 64px; }
.cmd-meta { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.app-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 18px; border-top: 1px solid var(--mud-palette-lines-default); }
.app-list li.is-hidden .app-name { opacity: .55; }
.app-name { display: flex; flex-direction: column; font-size: .88rem; font-weight: 500; min-width: 0; }
.app-name small { font-weight: 400; color: var(--mud-palette-text-secondary); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Enrollment ---------- */
.enroll-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .enroll-grid { grid-template-columns: 1fr; } }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr { width: 100%; max-width: 320px; background: #fff; border-radius: 8px; padding: 6px; }
.qr svg { width: 100%; height: auto; display: block; }
.qr-missing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px 8px; color: var(--mud-palette-text-secondary); font-size: .88rem; }
.code-box { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--kc-primary-soft); width: 100%; justify-content: center; }
.code-box span { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.code-box strong { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; letter-spacing: .08em; }
.steps ol { padding-left: 20px; line-height: 1.65; font-size: .92rem; margin-top: 4px; }
.steps h2 + ol { margin-bottom: 18px; }
.enrolled { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.enrolled div { flex: 1; }
.enrolled h2 { margin-bottom: 2px; }
.enrolled p { margin: 0; color: var(--mud-palette-text-secondary); }
.wifi-panel { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }

/* ---------- Policies ---------- */
.policy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.policy-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; margin: 0; transition: border-color .15s, box-shadow .15s; }
.policy-card:hover { border-color: var(--mud-palette-primary); box-shadow: 0 4px 18px rgba(47, 84, 235, .08); }
.policy-top { display: flex; align-items: center; gap: 10px; padding-right: 30px; flex-wrap: wrap; }
.policy-top h2 { margin: 0; }
.policy-desc { margin: 0; color: var(--mud-palette-text-secondary); font-size: .86rem; flex: 1; }
.policy-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--mud-palette-text-secondary); border-top: 1px solid var(--mud-palette-lines-default); padding-top: 10px; flex-wrap: wrap; }
.policy-actions { position: absolute; top: 10px; right: 10px; }

.title-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.title-input, .desc-input { border: 1px solid transparent; background: transparent; font: inherit; color: inherit; border-radius: 6px; padding: 2px 6px; margin-left: -7px; outline: none; }
.title-input { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; min-width: 200px; width: min(520px, 100%); }
.desc-input { font-size: .9rem; color: var(--mud-palette-text-secondary); width: min(720px, 100%); }
.title-input:hover, .desc-input:hover { border-color: var(--mud-palette-lines-default); }
.title-input:focus, .desc-input:focus { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }

.policy-tabs .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mode-radios { display: flex; flex-direction: column; gap: 2px; }
.radio-label { font-size: .92rem; }
.narrow-select { max-width: 420px; }
.add-app { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; min-width: 300px; }
.add-app .mud-autocomplete { max-width: 420px; }
.ac-item { display: flex; flex-direction: column; }
.ac-item small { color: var(--mud-palette-text-secondary); font-size: .74rem; }

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule { border-top: 1px solid var(--mud-palette-lines-default); }
.rule:first-child { border-top: 0; }
.rule-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; flex-wrap: wrap; }
.rule-name { flex: 1; display: flex; flex-direction: column; min-width: 200px; }
.rule-name small { color: var(--mud-palette-text-secondary); font-size: .76rem; }
.rule-blocked .rule-name strong { text-decoration: line-through; opacity: .7; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; padding: 4px 18px 16px; background: var(--mud-palette-background); border-top: 1px dashed var(--mud-palette-lines-default); padding-top: 12px; }
.perm { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; font-size: .85rem; }
.perm span { flex: 1; }
.perm-grant { border-color: var(--kc-ok); }
.perm-deny { border-color: var(--kc-bad); }
.perm-note { grid-column: 1 / -1; margin: 4px 0 0; }

.restriction-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.restriction-groups .card { margin: 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.card-head + .switch-row { border-top: 0; }
.switch-row div { display: flex; flex-direction: column; font-size: .9rem; }
.switch-row small { color: var(--mud-palette-text-secondary); font-size: .76rem; }
.switch-row.is-on span { color: var(--mud-palette-error); font-weight: 550; }
.switch-row.big { border-top: 0; }
.switch-row.big span { font-weight: 600; font-size: 1rem; color: inherit; }

/* ---------- Auth pages: Gamliot Nex (server-rendered, no MudBlazor) ----------
   Tokens from Gamliot_Nex_Login_Assets/styles/tokens.css. Compact scale, fits the
   viewport without a page scroll; icons are stroke SVGs painted via a CSS mask. */
:root {
    --nex-navy: #101D35;
    --nex-brand: #134AF5;
    --nex-brand-hover: #0F3FD5;
    --nex-cyan: #19D5F1;
    --nex-bg: #F6F9FF;
    --nex-text: #101D35;
    --nex-muted: #566988;
    --nex-border: #BFCAE1;
    --nex-radius-card: 18px;
    --nex-radius-input: 10px;
    --nex-shadow-card: 0 14px 40px rgba(14,36,90,.10);
    --nex-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.nex-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

.nex-shell { height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); font-family: var(--nex-font); color: var(--nex-text); background: var(--nex-bg); }

/* Brand panel */
.nex-brand { position: relative; overflow: hidden; color: #fff; padding: clamp(24px, 4.5vh, 44px) clamp(30px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; background: #0A2C98 url(nex/backgrounds/login-brand-panel.svg) center / cover no-repeat; }
.nex-logo { width: clamp(220px, 20vw, 300px); max-width: 100%; height: auto; display: block; }
.nex-hero { position: relative; z-index: 1; margin-top: clamp(16px, 4vh, 38px); max-width: min(440px, 60%); }
.nex-hero h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.14; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.nex-rule { display: block; width: 52px; height: 3px; border-radius: 2px; background: var(--nex-cyan); margin-bottom: 16px; }
.nex-hero p { font-size: .95rem; line-height: 1.5; margin: 0 0 20px; color: #DCE7FF; }
.nex-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; }
.nex-features li { display: flex; align-items: center; gap: 13px; }
.nex-tile { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: #E6F4FF; }
.nex-tile .nex-icon { width: 20px; height: 20px; }
/* The illustration has its blue backdrop baked in; a soft mask blends it into the gradient,
   and clip-path drops the crop's left strip that still carries letters from the original. */
.nex-art { position: absolute; right: -2%; bottom: -3%; width: min(42%, 370px); height: auto; pointer-events: none; opacity: .92;
           clip-path: inset(0 0 0 16%);
           -webkit-mask-image: radial-gradient(ellipse 66% 74% at 60% 58%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 66% 74% at 60% 58%, #000 50%, transparent 100%); }

/* Form side */
.nex-main { display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: clamp(16px, 4vh, 36px) 24px; background: var(--nex-bg) url(nex/backgrounds/login-form-soft-bg.svg) center / cover no-repeat; }
.nex-card { box-sizing: border-box; width: 100%; max-width: 420px; background: #fff; border: 1px solid #E3EAF7; border-radius: var(--nex-radius-card); box-shadow: var(--nex-shadow-card); padding: 32px 36px 28px; }
.nex-card h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: var(--nex-navy); }
.nex-sub { color: var(--nex-muted); margin: 0 0 22px; font-size: .92rem; line-height: 1.45; }
.nex-field { display: block; margin-bottom: 15px; }
.nex-field > span:first-child { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.nex-field em { font-style: normal; font-weight: 400; color: var(--nex-muted); font-size: .8rem; margin-left: 6px; }
.nex-input { position: relative; display: flex; align-items: center; height: 46px; border: 1.5px solid var(--nex-border); border-radius: var(--nex-radius-input); background: #fff; transition: border-color .15s, box-shadow .15s; }
.nex-input > .nex-icon { position: absolute; left: 14px; color: var(--nex-muted); width: 20px; height: 20px; pointer-events: none; }
.nex-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: .95rem; color: var(--nex-text); padding: 0 42px 0 44px; border-radius: inherit; }
.nex-input input::placeholder { color: #8D9BB5; }
.nex-input:focus-within { border-color: var(--nex-brand); box-shadow: 0 0 0 3px rgba(19,74,245,.14); }
.nex-eye { position: absolute; right: 6px; width: 34px; height: 34px; border: 0; background: transparent; border-radius: 7px; color: var(--nex-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nex-eye:hover { background: #EEF3FF; color: var(--nex-brand); }
.nex-eye.is-on { color: var(--nex-brand); }
.nex-eye .nex-icon { width: 20px; height: 20px; }
.nex-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 18px; font-size: .9rem; }
.nex-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.nex-check input { width: 18px; height: 18px; accent-color: var(--nex-brand); margin: 0; }
.nex-btn { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--nex-brand); color: #fff; border: 0; border-radius: 11px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .15s, transform .05s; }
.nex-btn:hover { background: var(--nex-brand-hover); }
.nex-btn:active { transform: translateY(1px); }
.nex-btn .nex-icon { width: 20px; height: 20px; }
.nex-error { background: #FDECEC; color: #A12A2A; border: 1px solid #F5C6C6; padding: 9px 12px; border-radius: 9px; font-size: .88rem; margin-bottom: 14px; }
.nex-foot { margin: 18px 0 0; text-align: center; color: var(--nex-muted); font-size: .9rem; }
.nex-foot a { color: var(--nex-brand); font-weight: 600; text-decoration: none; }
.nex-foot a:hover { text-decoration: underline; }

/* Forgot / reset password */
.nex-link { color: var(--nex-brand); font-weight: 600; text-decoration: none; }
.nex-link:hover { text-decoration: underline; }
.nex-success { display: flex; gap: 13px; align-items: flex-start; padding: 15px; border-radius: 12px; background: #EEF4FF; border: 1px solid #CFE0FF; color: var(--nex-navy); margin-bottom: 6px; }
.nex-success > .nex-icon { width: 24px; height: 24px; color: var(--nex-brand); margin-top: 2px; }
.nex-success strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.nex-success p { margin: 0; color: var(--nex-muted); line-height: 1.45; font-size: .9rem; }
a.nex-btn { text-decoration: none; }

@media (max-width: 1100px) {
    .nex-card { padding: 28px 30px 24px; }
}
@media (max-width: 860px) {
    .nex-shell { height: auto; min-height: 100vh; overflow: visible; grid-template-columns: minmax(0, 1fr); }
    .nex-brand { padding: 24px 22px 28px; justify-content: flex-start; }
    .nex-logo { width: 230px; }
    .nex-hero { margin-top: 16px; max-width: 100%; }
    .nex-hero h2 { font-size: 1.5rem; }
    .nex-hero p { display: none; }
    .nex-rule { margin-bottom: 0; }
    .nex-features { display: none; }
    .nex-art { display: none; }
    .nex-main { overflow: visible; padding: 22px 16px 34px; }
    .nex-card { padding: 24px 20px 22px; }
    .nex-card h1 { font-size: 1.45rem; }
}

#blazor-error-ui { background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.qr-json summary { cursor: pointer; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.qr-json pre { font-size: .74rem; margin-top: 8px; }

/* ---------- Offline features ---------- */
.stat-bad .stat-value { color: var(--kc-bad); }
.stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-size: .84rem; cursor: pointer; }
.filter-chip span { font-weight: 650; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.filter-chip:hover { border-color: var(--mud-palette-primary); }
.filter-chip.on { background: var(--kc-primary-soft); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 600; }
.filter-chip.on span { color: var(--mud-palette-primary); }
.filter-chip.attn span { color: var(--kc-bad); }
.cmd-meta { flex: 1; }
.cmd-cancel { margin-left: auto; }
.plain-list { margin: 4px 0 0; padding-left: 18px; font-size: .88rem; line-height: 1.7; color: var(--mud-palette-text-secondary); }

/* ---------- Kiosk launcher ---------- */
.kiosk-add { justify-content: flex-start; min-width: 0; margin-top: 6px; }
.kiosk-apps { list-style: none; margin: 10px 0 6px; padding: 0; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.kiosk-apps li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--mud-palette-lines-default); }
.kiosk-apps li:first-child { border-top: 0; }
.kiosk-apps .app-name { flex: 1; }
.kiosk-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--kc-primary-soft); color: var(--mud-palette-primary); font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pin-set { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.pin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pin-row > .mud-button-root { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 600px) { .pin-row { grid-template-columns: 1fr; } }

.wifi-ssid { flex: 1 1 180px; }
.wifi-sec { flex: 0 1 180px; }
.wifi-pw { flex: 1 1 160px; }

/* ---------- System admin ---------- */
.system-chip { background: var(--kc-primary-soft); color: var(--mud-palette-secondary); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.sys-table .mud-table-cell { vertical-align: top; }
.temp-pw { font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; letter-spacing: .06em; background: var(--kc-primary-soft); padding: 8px 14px; border-radius: 8px; display: inline-block; margin-top: 8px; }
.apk-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ======== Dashboards (Super Admin + Organization) — compact card grid ======== */
.dash { display: flex; flex-direction: column; gap: 8px; }
.page:has(.dash) { padding-top: 14px; padding-bottom: 14px; }
.dash .page-head { margin-bottom: 2px; }
.dash h1 { font-size: 1.35rem; }

/* Stat tiles */
.d-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1024px) { .d-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: 8px 12px; border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); text-decoration: none; color: inherit; transition: border-color .15s, transform .05s; }
.d-stat:hover { border-color: var(--mud-palette-primary); }
.d-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc, var(--mud-palette-primary)); }
.d-stat .d-ico { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc, #2f54eb) 14%, transparent); color: var(--acc, #2f54eb); }
.d-stat .d-ico .mud-icon-root { font-size: 17px; }
.d-label { font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary); letter-spacing: .01em; }
.d-value { font-size: 1.3rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.d-foot { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.d-up { color: var(--kc-ok); font-weight: 650; }
.d-down { color: var(--kc-bad); font-weight: 650; }

/* Panels */
.d-grid { display: grid; gap: 8px; }
.d-grid.cols-3 { grid-template-columns: 1.15fr 1fr 1.15fr; }
.d-grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .d-grid.cols-3, .d-grid.cols-2 { grid-template-columns: 1fr; } }
.d-panel { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 11px 14px; display: flex; flex-direction: column; min-width: 0; }
.d-panel > .card-head { margin: 0 0 8px; }
.d-panel h2 { font-size: .95rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.d-panel h2 .mud-icon-root { font-size: 18px; color: var(--mud-palette-primary); }

/* Donut (conic-gradient) + legend */
.d-donut-wrap { display: flex; align-items: center; gap: 18px; }
.d-donut { --sz: 94px; width: var(--sz); height: var(--sz); border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--donut, conic-gradient(#e5e8ef 0 100%)); }
.d-donut::before { content: ""; width: 64%; height: 64%; border-radius: 50%; background: var(--mud-palette-surface); grid-area: 1/1; }
.d-donut-c { grid-area: 1/1; text-align: center; z-index: 1; }
.d-donut-c b { display: block; font-size: 1.2rem; font-weight: 750; line-height: 1; }
.d-donut-c span { font-size: .68rem; color: var(--mud-palette-text-secondary); }
.d-legend { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-legend li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; font-size: .82rem; }
.d-legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.d-legend .pc { color: var(--mud-palette-text-secondary); font-size: .74rem; min-width: 38px; text-align: right; }
.d-legend b { font-weight: 650; }

/* Mini bar chart */
.d-bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 4px; }
.d-bars .b { flex: 1; min-width: 0; background: linear-gradient(180deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 55%, transparent)); border-radius: 3px 3px 0 0; min-height: 2px; }
.d-bars .b:hover { filter: brightness(1.1); }
.d-bars-x { display: flex; justify-content: space-between; font-size: .66rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }

/* Compact tables / lists inside panels */
.d-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 168px; }
.d-rowline { display: grid; align-items: center; gap: 8px; padding: 7px 2px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .82rem; }
.d-rowline:first-child { border-top: 0; }
.d-top { grid-template-columns: 1fr auto 76px auto; }
.d-top .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-bar-mini { height: 6px; border-radius: 3px; background: var(--mud-palette-background-gray, #eef0f4); overflow: hidden; }
.d-bar-mini > i { display: block; height: 100%; background: var(--kc-ok); }
.d-alert { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 4px 2px; border-top: 1px solid var(--mud-palette-lines-default); }
.d-alert:first-child { border-top: 0; }
.d-alert .ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.d-alert .ico .mud-icon-root { font-size: 16px; }
.d-alert .n { font-weight: 700; font-size: .95rem; }
.d-act { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 168px; }
.d-act li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: .8rem; }
.d-act li:first-child { border-top: 0; }
.d-act em { font-style: normal; color: var(--mud-palette-text-secondary); }
.d-act time { color: var(--mud-palette-text-secondary); white-space: nowrap; font-size: .72rem; }
.d-act .org { color: var(--mud-palette-primary); font-weight: 600; }
.d-emptypanel { color: var(--mud-palette-text-secondary); font-size: .85rem; padding: 10px 0; }

/* ======== Nex app shell (overrides earlier shell styles; later rules win) ======== */
:root { --kc-primary: #134AF5; --kc-primary-soft: #E8EEFF; }

.appbar { border-bottom: 1px solid var(--mud-palette-lines-default); box-shadow: 0 1px 0 rgba(16,29,53,.03); }
.appbar .mud-icon-button { color: var(--mud-palette-text-secondary); }

.nex-search { display: flex; align-items: center; gap: 8px; height: 40px; width: min(440px, 40vw); margin-left: 6px; background: #F3F6FC; border: 1px solid var(--mud-palette-lines-default); border-radius: 11px; padding: 0 12px; color: #8D9BB5; }
.nex-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--mud-palette-text-primary); }
.nex-search input::placeholder { color: #8D9BB5; }
.nex-search:focus-within { border-color: var(--nex-brand); box-shadow: 0 0 0 3px rgba(19,74,245,.12); background: var(--mud-palette-surface); }
.mud-theme-dark .nex-search { background: #1b2336; }
@media (max-width: 760px) { .nex-search { display: none; } }

.env-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 650; padding: 4px 11px; border-radius: 999px; margin-right: 8px; white-space: nowrap; }
.env-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.env-prod { color: #1f8a4c; background: #E7F6EC; } .env-prod .dot { background: #22c55e; }
.env-dev { color: #a15c00; background: #FFF4E0; } .env-dev .dot { background: #f0a500; }
@media (max-width: 760px) { .env-chip { display: none; } }

.bell { color: var(--mud-palette-text-secondary) !important; margin-right: 2px; }
.user-btn { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 3px 8px 3px 3px; border-radius: 999px; cursor: pointer; color: inherit; }
.user-btn:hover { background: var(--mud-palette-action-default-hover); }
.who-min { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.who-min strong { font-size: .82rem; color: var(--mud-palette-text-primary); }
.who-min small { font-size: .7rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 760px) { .who-min { display: none; } }

/* Dark gradient sidebar with logo + faint illustration */
.nav-drawer { width: 250px; border: 0 !important; background: linear-gradient(176deg, #0B1E54 0%, #0E2C8C 55%, #123AC6 125%) !important; color: #fff; overflow: hidden; }
.nav-drawer .mud-drawer-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.nav-brand { padding: 16px 18px 6px; flex: none; }
.nav-brand img { width: 174px; max-width: 100%; height: auto; display: block; }
.nav { padding: 10px 8px; flex: 1; }
.nav .mud-nav-link { color: rgba(255,255,255,.82); border-radius: 10px; margin: 2px 6px; padding: 9px 12px; width: auto; font-weight: 500; gap: 12px; }
.nav .mud-nav-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav .mud-nav-link.active { background: rgba(255,255,255,.15); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 var(--nex-cyan); }
.nav .mud-nav-link .mud-nav-link-icon { color: inherit; min-width: 34px; }
.nav-art { align-self: center; width: 230px; max-width: 100%; margin-top: auto; opacity: .42; pointer-events: none; clip-path: inset(0 0 0 15%); -webkit-mask-image: radial-gradient(ellipse 70% 72% at 56% 60%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 70% 72% at 56% 60%, #000 52%, transparent 100%); }

/* Softer cards everywhere (keep theme border colour so dark mode still works) */
.card { border-radius: 14px; box-shadow: 0 6px 22px rgba(16,29,53,.05); }
.stat { border-radius: 14px; box-shadow: 0 6px 22px rgba(16,29,53,.05); }
.d-panel, .d-stat { box-shadow: 0 6px 22px rgba(16,29,53,.05); }

/* Top-bar quick actions + notifications */
.qa-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin-right: 8px; border: 0; border-radius: 10px; background: var(--nex-brand); color: #fff; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; box-shadow: 0 4px 12px rgba(19,74,245,.28); }
.qa-btn:hover { background: var(--nex-brand-hover); }
.qa-btn .mud-icon-root { font-size: 17px; }
@media (max-width: 760px) { .qa-btn .qa-text { display: none; } .qa-btn { padding: 0 9px; } }
.bell-wrap { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: var(--mud-palette-text-secondary); margin-right: 4px; }
.bell-wrap:hover { background: var(--mud-palette-action-default-hover); }
.notif-head { padding: 8px 16px 6px; font-weight: 700; font-size: .85rem; color: var(--mud-palette-text-primary); }
.notif-empty { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.notif-empty .mud-icon-root { color: var(--kc-ok); }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 240px; }
.notif-row span { display: inline-flex; align-items: center; gap: 8px; }
.notif-row b { font-weight: 700; }

/* ======== Licensing ======== */
/* Seat counter on the Users page head */
.seat-pill { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 7px 14px; border-radius: 11px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); font-size: .85rem; box-shadow: 0 6px 22px rgba(16,29,53,.05); }
.seat-pill:hover { border-color: var(--mud-palette-primary); }
.seat-pill .mud-icon-root { color: var(--mud-palette-primary); font-size: 18px; }
.seat-pill small { color: var(--mud-palette-text-secondary); }
.seat-pill-full { border-color: var(--kc-bad); }
.seat-pill-full .mud-icon-root { color: var(--kc-bad); }

/* Licenses page: three stat tiles, not stretched across six columns */
.lic-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 640px) { .lic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Generate-license dialog */
.gl-org { font-size: .9rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.gl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Licensing usage report */
.d-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .d-stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* revenue table */
.rev-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rev-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); padding: 4px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.rev-table td { padding: 7px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.rev-table td.num, .rev-table th.num { text-align: right; white-space: nowrap; }
.rev-table tr:last-child td { border-bottom: 0; }

/* Org dashboard: license-utilization strip */
.lic-util { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 10px 16px; box-shadow: 0 6px 22px rgba(16,29,53,.05); }
.lic-util:hover { border-color: var(--mud-palette-primary); }
.lic-util-full { border-color: var(--kc-bad); }
.lu-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--kc-primary-soft); color: var(--mud-palette-primary); }
.lic-util-full .lu-ico { background: var(--kc-bad-soft); color: var(--kc-bad); }
.lu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lu-top { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.lu-top strong { color: var(--mud-palette-text-primary); }
.lu-bar { height: 6px; border-radius: 3px; background: var(--mud-palette-background-gray, #eef0f4); overflow: hidden; }
.lu-bar > i { display: block; height: 100%; background: var(--mud-palette-primary); }
.lic-util-full .lu-bar > i { background: var(--kc-bad); }
.lu-free { font-size: .8rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* ======== Invoice document ======== */
.invoice-card { max-width: 760px; margin: 0 auto; }
.invoice-doc { color: #101D35; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--kc-primary); }
.inv-brand { display: flex; flex-direction: column; gap: 2px; }
.inv-brand img { height: 34px; width: auto; align-self: flex-start; }
.inv-brand strong { font-size: 1.05rem; }
.inv-brand small { color: var(--mud-palette-text-secondary); font-size: .72rem; }
.inv-title { text-align: right; }
.inv-title h1 { margin: 0; font-size: 1.5rem; letter-spacing: .02em; }
.inv-no { font-family: ui-monospace, Consolas, monospace; color: var(--mud-palette-text-secondary); margin: 2px 0 6px; }
.inv-parties { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0; flex-wrap: wrap; }
.inv-parties strong { display: block; font-size: 1rem; }
.inv-k { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); font-weight: 600; }
.inv-dates { text-align: right; display: flex; flex-direction: column; gap: 6px; }
.inv-dates .inv-k { display: inline; text-transform: none; letter-spacing: 0; margin-right: 6px; }
.inv-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.inv-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-lines-default); padding: 8px 6px; }
.inv-table td { padding: 12px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-total-k { text-align: right; font-weight: 700; border-bottom: 0 !important; }
.inv-total-v { font-weight: 800; font-size: 1.1rem; border-bottom: 0 !important; }
.inv-notes { margin: 8px 0 16px; font-size: .9rem; }
.inv-foot { margin-top: 20px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.inv-foot p { margin: 2px 0; }

@media print {
    .no-print, .mud-appbar, .mud-drawer, .mud-drawer-overlay, #blazor-error-ui, .mud-snackbar-provider { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
    .page { padding: 0 !important; }
    .invoice-card { max-width: none; box-shadow: none !important; border: 0 !important; }
    body { background: #fff !important; }
}