/* TenantFabric portal design system — shared by the platform console, customer portal and server-rendered pages */
:root {
  --bg:#f3f5fa; --surface:#ffffff; --surface-2:#f8fafc; --fg:#0f172a; --muted:#64748b; --line:#e3e8f0; --line-strong:#cbd5e1;
  --brand:#4f46e5; --brand-hover:#4338ca; --brand-soft:#eef2ff; --brand-fg:#fff;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#a16207; --warn-soft:#fef3c7; --bad:#b91c1c; --bad-soft:#fee2e2; --info:#1d4ed8; --info-soft:#dbeafe;
  --side:#0f172a; --side-fg:#cbd5e1; --side-active:#1e293b; --shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06); --radius:10px;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#0a0f1e; --surface:#121a2e; --surface-2:#172139; --fg:#e6eaf5; --muted:#8b97b1; --line:#243050; --line-strong:#33425f;
  --brand:#6366f1; --brand-hover:#7c7ff5; --brand-soft:#1c2147; --ok:#4ade80; --ok-soft:#12301f; --warn:#fbbf24; --warn-soft:#3a2d0b; --bad:#f87171; --bad-soft:#3b1417; --info:#60a5fa; --info-soft:#14284a;
  --side:#070b17; --side-active:#141c33; --shadow:0 1px 2px rgba(0,0,0,.4); } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
code,pre { font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
code { background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; }
pre { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; overflow:auto; white-space:pre-wrap; word-break:break-all; margin:10px 0 0; }
h1,h2,h3 { margin:0; letter-spacing:-.01em; }

/* ---- app shell --------------------------------------------------------------------------- */
.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
.sidebar { background:var(--side); color:var(--side-fg); display:flex; flex-direction:column; padding:18px 12px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 10px 18px; color:#fff; font-weight:650; font-size:15px; letter-spacing:-.01em; }
.brand svg { width:28px; height:28px; flex:none; }
.brand small { display:block; font-weight:500; font-size:11px; color:#94a3b8; letter-spacing:.02em; }
.side-nav { display:flex; flex-direction:column; gap:2px; }
.side-nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--side-fg); font-weight:500; text-decoration:none; }
.side-nav a:hover { background:var(--side-active); color:#fff; }
.side-nav a.active { background:var(--side-active); color:#fff; box-shadow:inset 2px 0 0 var(--brand); }
.side-foot { margin-top:auto; padding:12px 10px 4px; border-top:1px solid #1e293b; font-size:12.5px; }
.side-foot .who { color:#e2e8f0; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-foot .sub { color:#94a3b8; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-foot button { width:100%; justify-content:flex-start; background:transparent; color:var(--side-fg); border-color:#334155; }
.side-foot button:hover { background:var(--side-active); color:#fff; }
.content { padding:28px 36px 64px; max-width:1180px; width:100%; min-width:0; }
.ico { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico.sm { width:15px; height:15px; }

/* ---- page header & tabs ------------------------------------------------------------------ */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1 { font-size:22px; line-height:1.25; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.page-head p { margin:4px 0 0; color:var(--muted); }
.crumb { font-size:13px; color:var(--muted); margin-bottom:6px; } .crumb a { color:var(--muted); } .crumb a:hover { color:var(--fg); }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 22px; overflow-x:auto; }
.tabs a { padding:9px 14px; color:var(--muted); font-weight:550; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; text-decoration:none; display:flex; gap:8px; align-items:center; }
.tabs a:hover { color:var(--fg); }
.tabs a.active { color:var(--brand); border-bottom-color:var(--brand); }
.tabs .count { background:var(--surface-2); border:1px solid var(--line); border-radius:99px; font-size:11px; padding:0 7px; color:var(--muted); }

/* ---- cards, stats ------------------------------------------------------------------------ */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.card-head h2 { font-size:14.5px; } .card-head p { margin:2px 0 0; color:var(--muted); font-size:12.5px; }
.card-body { padding:16px 18px; } .card-body > :first-child { margin-top:0; } .card-body > :last-child { margin-bottom:0; }
.card-foot { padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.stat .label { color:var(--muted); font-size:12px; font-weight:550; text-transform:uppercase; letter-spacing:.04em; }
.stat .value { font-size:26px; font-weight:650; letter-spacing:-.02em; margin-top:4px; }
.stat .note { color:var(--muted); font-size:12.5px; margin-top:2px; }

/* ---- tables ------------------------------------------------------------------------------ */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; }
table.data th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:10px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
table.data td { padding:12px 18px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
table.data tr:last-child td { border-bottom:0; }
table.data tbody tr:hover td { background:var(--surface-2); }
table.data td.num { text-align:right; font-variant-numeric:tabular-nums; } table.data td.act { text-align:right; white-space:nowrap; }
.cell-title { font-weight:600; } .cell-sub { color:var(--muted); font-size:12.5px; }
.empty { text-align:center; padding:44px 20px; color:var(--muted); } .empty strong { display:block; color:var(--fg); font-size:15px; margin-bottom:4px; }

/* ---- buttons, badges --------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-weight:550; padding:7px 14px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--fg); cursor:pointer; text-decoration:none; line-height:1.3; transition:background .12s,border-color .12s; }
.btn:hover { background:var(--surface-2); border-color:var(--muted); text-decoration:none; }
.btn:focus-visible,.tabs a:focus-visible,.side-nav a:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--brand-fg); } .btn.primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); }
.btn.danger { color:var(--bad); } .btn.danger:hover { background:var(--bad-soft); border-color:var(--bad); }
.btn.ghost { border-color:transparent; background:transparent; color:var(--muted); } .btn.ghost:hover { background:var(--surface-2); color:var(--fg); }
.btn.sm { padding:4px 10px; font-size:12.5px; border-radius:7px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:99px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.badge.plain::before { display:none; }
.badge.ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; } .badge.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.badge.bad { background:var(--bad-soft); color:var(--bad); border-color:transparent; } .badge.info { background:var(--info-soft); color:var(--info); border-color:transparent; }

/* ---- forms ------------------------------------------------------------------------------- */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 16px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; } .field > span { font-size:12.5px; font-weight:600; }
.field small { color:var(--muted); font-size:12px; }
input:not([type=checkbox]),select,textarea { width:100%; font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:8px 11px; transition:border-color .12s,box-shadow .12s; }
input::placeholder { color:#94a3b8; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); }
input:disabled { background:var(--surface-2); color:var(--muted); }
.check { display:flex; align-items:flex-start; gap:9px; margin:10px 0; cursor:pointer; } .check input { margin-top:3px; accent-color:var(--brand); width:16px; height:16px; }
.check b { display:block; font-weight:600; } .check small { color:var(--muted); }
.inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } .inline-form .field { flex:1; min-width:180px; }
.err { color:var(--bad); font-weight:500; min-height:1.3em; margin:8px 0 0; } .muted { color:var(--muted); } .hint { color:var(--muted); font-size:12.5px; margin:8px 0 0; }

/* ---- banners, toasts, dialogs ------------------------------------------------------------ */
.banner { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:var(--radius); margin-bottom:18px; background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); font-weight:500; }
.banner.bad { background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 30%,transparent); } .banner.info { background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb,var(--info) 30%,transparent); }
.toasts { position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast { background:#0f172a; color:#fff; padding:10px 16px; border-radius:9px; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:380px; animation:pop .18s ease-out; font-weight:500; } .toast.bad { background:#b91c1c; }
@keyframes pop { from { transform:translateY(8px); opacity:0; } }
dialog { border:1px solid var(--line); border-radius:14px; padding:0; width:640px; max-width:94vw; background:var(--surface); color:var(--fg); box-shadow:0 24px 64px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(8,12,24,.55); backdrop-filter:blur(2px); }
dialog .card-head { border-radius:14px 14px 0 0; } dialog .card-foot { justify-content:flex-end; border-radius:0 0 14px 14px; }

/* ---- sign-in / server-rendered pages ----------------------------------------------------- */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(1200px 500px at 50% -10%,var(--brand-soft),transparent 70%),var(--bg); }
.auth { width:100%; max-width:420px; } .auth.wide { max-width:520px; }
.auth .brand { color:var(--fg); justify-content:center; padding-bottom:20px; } .auth .brand small { color:var(--muted); }
.auth .card { padding:26px 26px 22px; } .auth h2 { font-size:19px; margin-bottom:6px; } .auth p { color:var(--muted); margin:0 0 16px; }
.auth .field { margin-bottom:14px; } .auth .btn.primary { width:100%; padding:10px; }
.auth .row-btns { display:flex; gap:8px; } .auth .row-btns .btn { flex:1; }
.qr { background:#fff; display:inline-block; padding:10px; border-radius:10px; border:1px solid var(--line); } .qr svg { width:176px; height:176px; display:block; }
.qr-row { display:flex; gap:18px; align-items:center; margin:6px 0 14px; flex-wrap:wrap; }
.codes { columns:2; font:13px ui-monospace,monospace; user-select:all; margin:0 0 14px; }
.steps { display:flex; gap:6px; margin-bottom:18px; } .steps i { flex:1; height:4px; border-radius:4px; background:var(--line-strong); } .steps i.on { background:var(--brand); }

@media (max-width:860px) {
  .app { grid-template-columns:minmax(0,1fr); } .sidebar { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; padding:10px 12px; gap:8px; }
  .brand { padding:0 6px; } .side-nav { flex-direction:row; flex-wrap:wrap; } .side-foot { margin:0 0 0 auto; border:0; padding:0; } .side-foot .sub { display:none; } .side-foot button { width:auto; }
  .content { padding:20px 16px 48px; }
}
.grow{flex:1}
table.data td.wrap { white-space:normal; overflow-wrap:break-word; min-width:260px; max-width:380px; }