/* CRM visual refinement. Loaded after the legacy stylesheet. */
:root {
  --canvas:var(--quiet-dark-canvas); --panel:var(--quiet-dark-canvas); --surface-1:var(--quiet-dark-canvas);
  --surface-2:var(--quiet-dark-surface-2); --surface-3:var(--quiet-dark-surface-3); --surface-4:var(--quiet-dark-surface-4);
  --ink:var(--quiet-dark-ink); --ink-soft:var(--quiet-dark-ink-soft); --ink-muted:var(--quiet-dark-ink-muted); --ink-faint:var(--quiet-dark-ink-muted);
  --hairline:var(--quiet-dark-hairline); --hairline-strong:var(--quiet-dark-hairline-strong);
  --accent:var(--quiet-dark-accent); --accent-hover:var(--quiet-dark-accent-hover); --accent-dim:var(--quiet-dark-accent-dim);
  --accent-bright:var(--quiet-dark-accent-hover); --on-accent:var(--quiet-dark-on-accent);
  --accent-tint:transparent; --accent-ring:transparent;
  --accent-gradient:var(--accent); --accent-glow:none; --glow-soft:none;
  --shadow-float:none; --shadow-sm:none; --shadow-md:none; --shadow-glow:none;
  --focus-ring:none;
  --ok:var(--quiet-dark-ok); --ready:var(--quiet-dark-ok); --acc-ready:var(--quiet-dark-ok);
  --kpi-money:var(--quiet-dark-ok); --warn:var(--quiet-dark-warn); --err:var(--quiet-dark-err);
  --pos:var(--ok); --neg:var(--err);
  --r-xs:4px; --r-sm:4px; --r-md:8px; --r-lg:8px;
  --fs-md:14px; --fs-btn:14px; --row-h-sm:36px;
  --fs-xl:18px; --fs-2xl:22px; --fs-3xl:21px;
}

/* One calm surface and one border hierarchy. */
html { color-scheme:dark; }
body { background:var(--canvas); color:var(--ink); font-variant-numeric:tabular-nums; }
:root[data-theme="light"], :root[data-theme="light"] body {
  background-color:var(--canvas) !important;
}
*, *::before, *::after { box-shadow:none !important; text-shadow:none !important; }
body * { background-image:none !important; }
a { color:var(--ink-soft); }
a:hover { color:var(--ink); }
.reddit-link, .tab-add-device, .bn-item.active, .bn-sheet-item.active,
.lib-card:hover > .map-num { color:var(--ink-soft); }
.shift-hero[data-open="true"] .shift-state { color:var(--ok); }

/* Page groups are separated by space and rules, not stacked outlines. */
.card, .card--kpi, .card--data, .card--module, .card--panel,
.tile, .panel, .intro-panel, .task-card, .score-card,
.cat-col, .tr-row, .member-editor, .roster {
  border:0 !important; background:transparent; border-radius:0;
}
.panel, .card--panel, .card--data, .card--module, .intro-panel {
  border-top:1px solid var(--hairline) !important;
  padding:20px 0 14px;
}
.wrap { max-width:720px; }
.wrap-accounts { max-width:720px; }
.tiles, .tiles-row-2, .tiles-row-3, .tiles-row-4, .tiles-2x2 { gap:0; }
.tiles { grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); }
.tile { padding:10px 14px; border-right:1px solid var(--hairline) !important; }
.tile:last-child { border-right:0 !important; }
.tile:hover, .tile.active, .tile.is-active { transform:none; background:var(--surface-2); }
.tile .n, .tile.kpi-money .n, .tile.kpi-info .n,
.tile.kpi-wages .n, .tile.kpi-consumables .n,
.tile.farming .n, .tile.ready .n, .tile.sold .n { color:var(--ink); }
.tile .n { font-variant-numeric:tabular-nums; }
.tile .n, .task-summary-item b, .score-card strong, .kpi-value,
.stat-value, .metric-value, .money-value {
  font-family:ui-monospace,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}
.tile.banned .n, .tile.neg .n { color:var(--err); }
.roster-row { border-top:1px solid var(--hairline); }
.bot-banner { border:0; border-left:2px solid var(--hairline-strong); border-radius:0; }
.bot-banner-close { width:40px; height:40px; top:2px; right:2px; }
.task-empty { border:0; border-top:1px solid var(--hairline); border-radius:0; padding:20px 0; }
.panel > p.muted[id$="Empty"]:not(.hidden) {
  border:0; border-top:1px solid var(--hairline); border-radius:0;
  padding:14px 0; margin:10px 0; text-align:left;
}
.task-hero { overflow:visible; }
.feature-list li.locked::before { content:"-"; width:auto; height:auto; top:0; left:3px;
  border:0; transform:none; color:var(--ink-muted); }
.feature-list li.unlocked::before { border-color:var(--ok); }
.lib-new-module:not(.hidden) { position:static; display:inline-flex; margin:0 0 20px; }
.vibe-card { border:0 !important; border-top:1px solid var(--hairline) !important; border-radius:0 !important; }


/* Navigation uses one quiet active mark. */
.topbar { background:var(--canvas); backdrop-filter:none; }
.nav-link, .nav-tool, .tab, .page-tabs > .tab, .page-tabs > button { font-size:var(--fs-md); }
.nav-link.is-active, .nav-link.active, .tab.active, .tab.is-active,
.seg-btn.is-active { background:transparent; color:var(--ink); }
.tabs, .seg { border:0; border-bottom:1px solid var(--hairline); border-radius:0; padding:0; background:transparent; }
.tab, .seg-btn { border-radius:0; }
.tab.active, .tab.is-active { border-bottom:2px solid var(--accent); }
.who .badge { background:transparent !important; border:0; color:var(--ink-muted); padding:0; }
.role-owner, .role-tl, .role-operator, .role-trainee, .role-client {
  color:var(--ink-muted) !important; background:transparent !important; border-color:transparent !important;
}

/* Controls share one height, weight and soft 4px corner. */
button, .btn, .btn-sm, .btn-line, .ghost, .btn-primary, .btn-secondary,
.btn-ghost, .btn-icon, .row-action-btn, .seg-btn {
  border:0 !important; border-radius:4px; box-shadow:none !important;
  font-size:var(--fs-btn); font-weight:500; min-height:36px;
  transition:background-color .12s ease,color .12s ease;
}
button:not(.tab):not(.seg-btn):not(.nav-link):not(.bn-item),
.btn, .btn-sm, .btn-line, .btn-secondary { background:var(--surface-3); color:var(--ink); }
button:hover:not(:disabled), .btn:hover:not(:disabled), .btn-sm:hover:not(:disabled) {
  background:var(--surface-4); color:var(--ink); transform:none; filter:none;
}
.btn-primary, button.btn-primary, .btn-approve, .login-card button[type="submit"] {
  background:var(--accent) !important; color:var(--on-accent) !important;
}
.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled),
.btn-approve:hover:not(:disabled), .login-card button[type="submit"]:hover:not(:disabled) {
  background:var(--accent-hover) !important; color:var(--on-accent) !important;
}
.btn-danger { color:var(--err) !important; }
.btn-warn { color:var(--warn) !important; }
.btn-ghost, .ghost, .btn-line, .btn-secondary, .btn-icon, .row-action-btn,
.account-menu-btn { background:transparent !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline:2px solid var(--accent-hover); outline-offset:2px; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border:1px solid var(--hairline) !important; border-radius:4px !important;
  background:var(--surface-2); color:var(--ink); min-height:36px;
}
input:focus, select:focus, textarea:focus { border-color:var(--hairline-strong) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset !important;
  caret-color:var(--ink);
}

/* Login: a single form, no frame around controls. */
.center { padding:20px; }
.login-card { max-width:376px; padding:28px 20px; background:transparent !important;
  border:0 !important; text-align:left; }
.login-card h1 { font-size:21px; font-weight:600; margin-bottom:28px; }
.login-card label { font-size:12px; margin-top:14px; margin-bottom:6px; }
.login-card input { padding:0 12px; height:40px; }
.login-card button[type="submit"] { width:100%; height:40px; margin-top:20px;
  padding:0 14px; justify-content:center; font-size:14px; font-weight:600;
  letter-spacing:0; transform:none !important; }
.login-card .err:empty { display:none; }

.hermes-fab, .hermes-fab:hover {
  background:var(--surface-3); color:var(--ink-soft);
  border:0; border-radius:4px; min-height:40px;
  padding:8px 12px; font-size:var(--fs-sm); font-weight:500;
  transform:none; animation:none;
}
.hermes-fab:hover { background:var(--surface-4); color:var(--ink); }
.hermes-fab::before { width:14px; height:14px; }
.seg-btn.is-active { color:var(--ink); border-bottom:2px solid var(--accent) !important; }
.account-menu-panel, .bn-sheet { background:var(--surface-2); border:1px solid var(--hairline); }
#auroraBg, .garden-host { display:none !important; }
html.has-aurora .topbar { background:var(--canvas); }

/* Light preview is explicit; dark remains the default. */
:root[data-theme="light"] { color-scheme:light;
  --canvas:var(--quiet-light-canvas); --panel:var(--quiet-light-canvas); --surface-1:var(--quiet-light-canvas);
  --surface-2:var(--quiet-light-surface-2); --surface-3:var(--quiet-light-surface-3); --surface-4:var(--quiet-light-surface-4);
  --ink:var(--quiet-light-ink); --ink-soft:var(--quiet-light-ink-soft); --ink-muted:var(--quiet-light-ink-muted); --ink-faint:var(--quiet-light-ink-muted);
  --hairline:var(--quiet-light-hairline); --hairline-strong:var(--quiet-light-hairline-strong);
  --accent:var(--quiet-light-accent); --accent-hover:var(--quiet-light-accent-hover); --on-accent:var(--quiet-light-on-accent);
  --ok:var(--quiet-light-ok); --warn:var(--quiet-light-warn); --err:var(--quiet-light-err);
}
@media(max-width:767px){
  .wrap { padding-left:16px; padding-right:16px; }
  .bottom-nav { background:var(--canvas); backdrop-filter:none; }
  .bn-item { min-height:60px; }
  .bn-item span { white-space:normal; overflow:visible; text-overflow:clip; }
  button, .btn, .btn-sm, .btn-line, .btn-primary, .btn-secondary { min-height:40px !important; }
  .seg-btn, .chip, .page-tabs > .tab, .page-tabs > button,
  #createTaskBtn, .colpick-move { min-height:40px; }
  #createTaskBtn, .colpick-move { min-width:40px; width:40px; height:40px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height:40px; }
  .tile { border-right:0 !important; border-top:1px solid var(--hairline) !important; }
  .hermes-fab { display:none !important; }
}

/* Team members remain readable and compact on narrow screens. */
#peopleList .tr-row { background:transparent; border-top:1px solid var(--hairline) !important; border-radius:0; margin:0; padding:12px 0; }
@media(max-width:767px) {
  #peopleList .tr-row { grid-template-columns:minmax(0,1fr); gap:8px; }
  #peopleList .tr-actions { justify-content:flex-start; gap:4px; }
  #peopleList .tr-actions > .btn-sm { min-width:0; }
  #peopleList .tr-actions .row { flex-direction:row; flex-wrap:nowrap; align-items:center; }
  #peopleList .member-editor { grid-column:1 / -1; }
}