/* ScreenFuture admin — design system from the canvas file (dark, floating panels) */

:root {
  --page: #1B1922;
  --panel: #23212C;
  --card: #2A2836;
  --hover: #373444;
  --t1: #EAE8F0;
  --t2: #C6C2D4;
  --t3: #918CA3;
  --t4: #5C5870;
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.06);
  --line-strong: rgba(255,255,255,.14);
  --acc: #8C97DB;
  --acc2: #9BA6EC;
  --grad: linear-gradient(135deg, #8C97DB, #5568C4);
  --ok: #4CAF7D;
  --warn: #E8B34B;
  --bad: #E05D5D;
  --shadow: 0 14px 36px rgba(16,14,22,.55);
  --shadow-lg: 0 18px 44px rgba(16,14,22,.55);
  --mono: 'IBM Plex Mono', monospace;
  --sans: Archivo, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--page);
  color: var(--t1);
  font: 400 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acc2); text-decoration: none; }
a:hover { color: #BCC5F5; }
::placeholder { color: var(--t4); }

/* ---------- Chrome ---------- */

.shell { max-width: 1420px; margin: 0 auto; padding: 16px 20px 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: 8px; height: 54px; flex: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 0 14px; position: sticky; top: 12px; z-index: 30;
}
/* Editor takeover: the builder always fills the window, chrome out of the way. */
body.sf-focus .topbar { display: none; }
body.sf-focus .footer { display: none; }
body.sf-focus .shell { max-width: none; padding: 10px 16px 0; }
body.sf-focus .content { padding: 6px 2px 12px; }
body.sf-focus .page-head { margin-bottom: 12px; }

.brand { display: flex; align-items: center; gap: 9px; padding-right: 12px; }
.brand img { height: 24px; display: block; filter: brightness(0) invert(.93); }
.brand .admin-tag {
  font: 600 9.5px var(--mono); color: var(--warn); border: 1px solid rgba(232,179,75,.4);
  border-radius: 5px; padding: 2px 5px; letter-spacing: .08em;
}
.vsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.nav { display: flex; gap: 2px; }
.nav a {
  font: 500 13px var(--sans); color: var(--t2); padding: 7px 12px; border-radius: 9px;
}
.nav a:hover { background: var(--hover); color: var(--t1); }
.nav a.active { background: var(--card); color: var(--t1); border: 1px solid var(--line); padding: 6px 11px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad);
  display: grid; place-items: center; font: 600 11px var(--sans); color: #fff;
}
.prop-name { font: 500 13px var(--sans); color: var(--t2); }

.content { flex: 1; padding: 26px 4px 40px; }
.footer {
  flex: none; text-align: center; padding: 18px 0 22px;
  font: 400 12px var(--sans); color: var(--t4);
}

/* ---------- Page headers ---------- */

.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.page-head h1 { font: 600 24px var(--sans); margin: 0; }
.page-head .count { font: 500 12px var(--mono); color: var(--t3); }
.page-head .spacer { flex: 1; }

.tabs { display: flex; gap: 4px; }
.tabs button {
  font: 500 12.5px var(--sans); color: var(--t2); background: none; border: none;
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
}
.tabs button:hover { background: var(--hover); color: var(--t1); }
.tabs button.active { background: var(--card); color: var(--t1); border: 1px solid var(--line); padding: 5px 10px; }

/* ---------- Buttons, inputs ---------- */

.btn {
  font: 500 13px var(--sans); color: var(--t1); background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--grad); border: none; color: #fff; font-weight: 600; padding: 9px 15px; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: rgba(224,93,93,.12); }
.btn.ghost { background: none; border: none; color: var(--t3); }
.btn.ghost:hover { color: var(--t1); background: var(--hover); }
.btn:disabled { opacity: .45; cursor: default; }

.input, select.input, textarea.input {
  font: 400 13.5px var(--sans); color: var(--t1); background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; width: 100%;
  outline: none;
}
.input:focus { border-color: var(--acc); }
select.input { appearance: none; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font: 600 10.5px var(--mono); color: var(--t3); letter-spacing: .1em; text-transform: uppercase; }

.search {
  display: flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; min-width: 240px;
}
.search input { background: none; border: none; outline: none; color: var(--t1); font: 400 13px var(--sans); width: 100%; }

/* ---------- Chips & status ---------- */

.chip {
  font: 500 11px var(--mono); border-radius: 6px; padding: 3px 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.chip.live { color: var(--ok); background: rgba(76,175,125,.12); }
.chip.live .dot { background: var(--ok); }
.chip.draft { color: var(--t3); background: rgba(255,255,255,.06); }
.chip.draft .dot { background: var(--t3); }
.chip.warn { color: var(--warn); background: rgba(232,179,75,.12); }
.chip.warn .dot { background: var(--warn); }
.chip.bad { color: var(--bad); background: rgba(224,93,93,.12); }
.chip.bad .dot { background: var(--bad); }
.chip.neutral { color: var(--t2); background: var(--card); border: 1px solid var(--line); }
.chip.id-badge { color: var(--acc2); background: var(--card); border: 1px solid var(--line); }

.mono { font-family: var(--mono); }
.dim { color: var(--t3); }
.dim2 { color: var(--t4); }

/* ---------- Cards & grids ---------- */

.grid { display: grid; gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px;
  overflow: hidden;
}
.card.hoverable { cursor: pointer; transition: border-color .15s; }
.card.hoverable:hover { border-color: var(--line-strong); }

.sign-card .preview { position: relative; aspect-ratio: 16 / 9; background: #14121B; overflow: hidden; }
.sign-card .preview > .sf-scale { position: absolute; left: 0; top: 0; transform-origin: top left; }
.sign-card .meta { padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-soft); }
.sign-card .meta .name { font: 600 13px var(--sans); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sign-card .sub { padding: 0 12px 10px; font: 400 11px var(--mono); color: var(--t4); }

/* ---------- Table ---------- */

.table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.table-wrap { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th {
  font: 600 10.5px var(--mono); color: var(--t3); letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.table-wrap td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font: 400 13.5px var(--sans); vertical-align: middle; }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover { background: rgba(255,255,255,.02); }

/* Suite editor: dense rows so a 30-suite building fits without scrolling
   the whole modal; the tenant-name column takes whatever is left. */
.suites-table table { table-layout: auto; }
.suites-table th { padding: 10px 8px; white-space: nowrap; }
.suites-table td { padding: 6px 8px; }
.suites-table td:first-child, .suites-table th:first-child { padding-left: 12px; }

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(12,10,17,.62); z-index: 100;
  display: grid; place-items: center;
}
.modal {
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: var(--shadow-lg); width: fit-content; min-width: 440px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px); overflow: auto; padding: 22px;
}
.modal h2 { font: 600 17px var(--sans); margin: 0 0 16px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 11px 18px; font: 500 13px var(--sans);
}
.toast.err { color: var(--bad); }

/* ---------- Login ---------- */

.login-split { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
@media (max-width: 940px) { .login-split { grid-template-columns: 1fr; } .login-hero { display: none; } }

.login-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 700px at -10% -20%, rgba(140,151,219,.16), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(85,104,196,.14), transparent 55%),
    #14121B;
  border-right: 1px solid var(--line-soft);
  padding: 44px 52px 24px;
}
.login-hero-inner { max-width: 560px; margin: auto 0; width: 100%; }
.login-logo {
  height: 52px; display: block;
  /* the SF lockup is dark purple; lift it to near-white for the dark chrome */
  filter: brightness(0) invert(.93);
}
/* the card's logo only appears when the hero (which carries it) is hidden */
.login-logo-card { display: none; height: 44px; margin-bottom: 22px; }
@media (max-width: 940px) { .login-logo-card { display: block; } }
.hero-title { font: 600 40px/1.12 var(--sans); margin: 34px 0 12px; letter-spacing: -.5px; }
.hero-sub { font: 400 15px/1.55 var(--sans); color: var(--t3); margin: 0 0 30px; max-width: 440px; }
.hero-sign {
  width: 100%; position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.hero-caption { font-size: 9.5px; letter-spacing: .14em; color: var(--t4); margin-top: 12px; }
.hero-foot { font: 400 11.5px var(--sans); color: var(--t4); text-align: left; padding-top: 20px; }

.login-side { display: grid; place-items: center; padding: 40px 24px; }
.login-card { width: 340px; }
.login-card h1 { font: 600 24px var(--sans); margin: 0 0 6px; }
.login-card p { font: 400 13.5px var(--sans); color: var(--t3); margin: 0 0 26px; }
.login-card .err { color: var(--bad); font: 500 12.5px var(--sans); margin-top: 12px; text-align: center; min-height: 16px; }

/* ---------- Empty state ---------- */

.empty {
  border: 1px dashed var(--line-strong); border-radius: 14px; padding: 44px;
  text-align: center; color: var(--t3); font: 400 13.5px var(--sans);
}
.empty b { display: block; color: var(--t2); font: 600 15px var(--sans); margin-bottom: 6px; }

/* ---------- KPI row (console) ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; }
.kpi .label { font: 600 10px var(--mono); color: var(--t3); letter-spacing: .12em; text-transform: uppercase; }
.kpi .value { font: 600 26px var(--sans); margin-top: 4px; }
.kpi .sub { font: 400 11.5px var(--mono); color: var(--t4); margin-top: 2px; }
.kpi .sub.up { color: var(--ok); }

/* ---------- Editor floating panels: chip-style controls ----------
   Beveled like a native tool palette: hairline light border, faint top
   inner highlight, soft drop shadow. Selected/pressed states sink in. */
.sf-float {
  --chip: rgba(255,255,255,.055);
  --bevel-line: rgba(255,255,255,.09);
  --bevel-hi: inset 0 1px 0 rgba(255,255,255,.06);
  --bevel-drop: 0 1px 2px rgba(0,0,0,.35);
  border: 1px solid var(--bevel-line);
}
/* Bottom toolbar reads as a pill, the way Figma's canvas toolbar does. */
.sf-float.sf-bar { border-radius: 999px; }
.sf-float.sf-bar .vsep { width: 1px; align-self: stretch; margin: 6px 0; background: var(--bevel-line); flex: none; }

/* Docked chrome: Layers and Inspector are structural columns, flush to the
   window edge, that the canvas is fit between. Each collapses to a rail. */
.sf-float.sf-dock { border: none; border-radius: 0; box-shadow: none; background: var(--panel); display: flex; flex-direction: column; overflow: hidden; transition: width .22s ease; }
.sf-dock.left { border-right: 1px solid var(--line); }
.sf-dock.right { border-left: 1px solid var(--line); }
.sf-dock-open { display: none; flex: 1; min-height: 0; flex-direction: column; }
.sf-dock.open .sf-dock-open { display: flex; }
.sf-dock.open .sf-dock-rail { display: none; }
.sf-dock-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; }
.sf-dock-head .lbl { font: 700 10.5px var(--mono); color: var(--t3); letter-spacing: .12em; text-transform: uppercase; flex: 1; white-space: nowrap; }
.sf-dock-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Resize handle on the Inspector's leading edge; only live while it's open. */
.sf-dock-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; display: none; transition: background .15s; }
.sf-dock.open .sf-dock-resize { display: block; }
.sf-dock-resize:hover, .sf-dock-resize.active { background: rgba(155,166,236,.4); }
.sf-dock.resizing { transition: none; }
.sf-dock-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; }
.sf-dock .rail-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; background: none; border: none; box-shadow: none; color: var(--t3); padding: 0; }
.sf-dock .rail-btn .ric { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.sf-dock .rail-btn:hover .ric { background: rgba(255,255,255,.06); color: var(--t1); }
.sf-dock .rail-btn .rlbl { font: 600 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.sf-float .input {
  background: var(--chip); border: 1px solid var(--bevel-line); border-radius: 8px; color: var(--t1);
  box-shadow: var(--bevel-hi), var(--bevel-drop);
}
.sf-float .input:focus { border-color: var(--acc); outline: none; }
.sf-float .btn {
  background: rgba(255,255,255,.05); border: 1px solid var(--bevel-line);
  box-shadow: var(--bevel-hi), var(--bevel-drop);
}
.sf-float .btn:hover { background: rgba(255,255,255,.09); }
.sf-float .btn:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.sf-float .btn.ghost { background: none; border-color: transparent; box-shadow: none; }
.sf-float .btn.ghost:hover { background: rgba(255,255,255,.07); }
.sf-float .fig-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--chip); border: 1px solid var(--bevel-line); border-radius: 8px;
  padding: 0 8px; min-height: 30px;
  box-shadow: var(--bevel-hi), var(--bevel-drop);
}
.sf-float .fig-chip:focus-within { border-color: var(--acc); }
.sf-float .fig-chip { min-width: 0; }
/* The label keeps its natural width (capped so a long one can't starve the
   field); the input takes whatever is left instead of claiming the chip first. */
.sf-float .fig-chip .pfx {
  color: var(--t3); font: 500 10.5px var(--mono); flex: none;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-float .fig-chip .sfx { color: var(--t4); font: 500 10.5px var(--mono); flex: none; }
.sf-float .fig-chip input, .sf-float .fig-chip select {
  background: transparent; border: none; outline: none; color: var(--t1);
  font: 500 12.5px var(--mono); flex: 1 1 40px; width: auto; min-width: 0; padding: 6px 0;
}
.sf-float .fig-chip select { font-family: var(--sans); cursor: pointer; }
.sf-float .fig-chip select option { background: var(--panel); color: var(--t1); }
.sf-float .fig-chip input[type="number"]::-webkit-outer-spin-button,
.sf-float .fig-chip input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-float .fig-chip input[type="number"] { -moz-appearance: textfield; }
.sf-float .fig-section { border-top: 1px solid var(--line-soft); margin: 0 -16px 14px; padding: 12px 16px 0; }
.sf-float .fig-section > .fig-title {
  font: 600 12.5px var(--sans); color: var(--t1); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
}
.sf-float .fig-section > .fig-title:hover { color: var(--t1); opacity: .85; }
.sf-float .fig-section .fig-section-chevron {
  display: inline-block; font-size: 9px; color: var(--t3); transition: transform .15s; flex: none;
}
.sf-float .fig-section.collapsed > .fig-title { margin-bottom: 0; }
.sf-float .fig-section.collapsed .fig-section-chevron { transform: rotate(-90deg); }
.sf-float .fig-section.collapsed .fig-section-body { display: none; }
.sf-float .fig-seg {
  display: flex; background: rgba(0,0,0,.25); border-radius: 8px; padding: 2px; gap: 2px;
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.sf-float .fig-seg button {
  flex: 1; border: none; background: transparent; color: var(--t3); border-radius: 6px;
  padding: 5px 0; cursor: pointer; font: 500 11.5px var(--sans);
}
.sf-float .fig-seg button:hover { color: var(--t1); }
.sf-float .fig-seg button.on {
  background: rgba(255,255,255,.13); color: var(--t1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.35);
}
.sf-float.sf-menu { box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); }