/* ============================================================
   Realtor Pipeline & Commission OS
   Visual redesign — "Broker's Book" design system.
   Class names preserved to keep all JS-rendered markup working.
   ============================================================ */

/* ---------- SELF-HOSTED FONTS ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}
/* Auth-screen-only pairing — self-hosted, no runtime Google Fonts/CDN request. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Neutrals — warm off-white base is the differentiator vs. cold slate */
  --bg:              #F6F5F0;
  --bg-subtle:       #F1F0EA;
  --card:            #FFFFFF;
  --surface-sunk:    #FAFAF6;

  /* Ink & type */
  --text:            #0B1F33;
  --text-strong:     #061424;
  --text-muted:      #5B6472;
  --text-soft:       #8A93A2;

  /* Hairlines */
  --border:          #E6E4DC;
  --border-strong:   #D3D0C6;
  --border-inset:    #EFEDE5;

  /* Sidebar — deep midnight ink */
  --sidebar-bg:      #0B1F33;
  --sidebar-fg:      #B7C0CD;
  --sidebar-fg-dim:  #6C7789;
  --sidebar-hover:   #132B44;
  --sidebar-active-bg: #142E4A;
  --sidebar-active-fg: #FFFFFF;
  --sidebar-accent:  #34D399;
  --sidebar-border:  #14304C;

  /* Accent — refined emerald (the "money" color, used sparingly) */
  --accent:          #0F766E;
  --accent-hover:    #0B5F58;
  --accent-soft:     #E6F4F1;
  --accent-softer:   #F0F8F6;
  --accent-text:     #FFFFFF;
  --accent-ink:      #0F766E;

  /* Semantics — restrained, not saturated */
  --success:         #0F766E;
  --success-soft:    #E6F4F1;
  --warning:         #B45309;
  --warning-soft:    #FDF3E1;
  --danger:          #B42318;
  --danger-soft:     #FDECEA;
  --info:            #1D4E89;
  --info-soft:       #E7EEF6;

  /* Chart and calendar are named semantic roles, not page-local colours. */
  --chart-grid:       var(--border);
  --chart-axis:       var(--text-muted);
  --chart-series:     var(--accent);
  --chart-series-muted: #4C837C;
  --event-showing:    #818CF8;
  --event-task-high:  var(--danger);
  --event-task-medium: var(--warning);
  --event-task-low:   var(--text-muted);
  --event-closing:    var(--success);
  --event-milestone:  var(--warning);

  /* Sizing */
  --sidebar-w:       240px;   /* U1b: one level, icon + label */
  --topbar-h:        58px;
  --radius-xs:       4px;
  --radius-sm:       6px;
  --radius:          8px;
  --radius-lg:       10px;
  --radius-xl:       12px;
  --radius-2xl:      16px;
  --radius-pill:     999px;

  /* Limited, documented type and spacing scale. */
  --font-size-2xs:   10px;
  --font-size-xs:    12px;
  --font-size-sm:    14px;
  --font-size-md:    16px;
  --font-size-lg:    18px;
  --font-size-xl:    20px;
  --font-size-2xl:   24px;
  --font-size-3xl:   28px;
  --empty-padding:   32px 20px;

  /* Effects — hairlines over shadows */
  --shadow-sm:       0 1px 0 rgba(11, 31, 51, 0.04);
  --shadow-md:       0 8px 24px -12px rgba(11, 31, 51, 0.16);
  --shadow-lg:       0 24px 60px -12px rgba(11, 31, 51, 0.30);
  --shadow-focus:    0 0 0 3px rgba(15, 118, 110, 0.18);
  --shadow-inset:    inset 0 -1px 0 rgba(11, 31, 51, 0.04);

  /* Typography — serif display, sans body. System stacks so offline works. */
  --font-primary: "Inter", sans-serif;
  --font-display: "Source Serif 4", serif;
  --font:      var(--font-primary);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Auth-screen-only pairing (Sign in / Create account). Rest of the app
     keeps --font-primary / --font-display untouched. */
  --font-auth-display: "DM Serif Display", var(--font-display);
  --font-auth-ui:      "Manrope", var(--font-primary);

  /* Feature settings */
  --nums:      "tnum" 1, "cv01" 1, "ss01" 1;
}

/* ---------- DARK THEME TOKENS ---------- */
/* Deep-navy environment; not an inversion. Accent brightens for contrast. */
:root[data-theme="dark"] {
  --bg:              #0A1523;
  --bg-subtle:       #0D1A2B;
  --card:            #111E30;
  --surface-sunk:    #0D1A2B;

  --text:            #E8ECF2;
  --text-strong:     #FFFFFF;
  --text-muted:      #94A0B2;
  --text-soft:       #667488;

  --border:          #1D2C42;
  --border-strong:   #2A3B54;
  --border-inset:    #17253A;

  --sidebar-bg:      #071120;
  --sidebar-fg:      #A9B4C4;
  --sidebar-fg-dim:  #5A6779;
  --sidebar-hover:   #10203A;
  --sidebar-active-bg: #142744;
  --sidebar-active-fg: #FFFFFF;
  --sidebar-accent:  #34D399;
  --sidebar-border:  #0F1E33;

  --accent:          #34D399;
  --accent-hover:    #6EE7B7;
  --accent-soft:     #0E2F2A;
  --accent-softer:   #0A241F;
  --accent-text:     #041E19;
  --accent-ink:      #6EE7B7;

  --success:         #34D399;
  --success-soft:    #0E2F2A;
  --warning:         #F59E0B;
  --warning-soft:    #3A2A0A;
  --danger:          #F87171;
  --danger-soft:     #3B1414;
  --info:            #60A5FA;
  --info-soft:       #0F2A44;

  --chart-grid:       var(--border-strong);
  --chart-axis:       var(--text-muted);
  --chart-series:     var(--accent);
  --chart-series-muted: #5A9A91;
  --event-showing:    #A5B4FC;
  --event-task-high:  var(--danger);
  --event-task-medium: var(--warning);
  --event-task-low:   var(--text-muted);
  --event-closing:    var(--success);
  --event-milestone:  var(--warning);

  --shadow-sm:       0 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-md:       0 10px 28px -14px rgba(0, 0, 0, 0.60);
  --shadow-lg:       0 24px 60px -12px rgba(0, 0, 0, 0.70);
  --shadow-focus:    0 0 0 3px rgba(52, 211, 153, 0.30);
  --shadow-inset:    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

/* Dark-theme overrides for spots the original CSS inlined light hex values. */
:root[data-theme="dark"] .btn:hover                  { background: var(--surface-sunk); border-color: var(--border-strong); }
:root[data-theme="dark"] .btn-ghost:hover            { background: var(--surface-sunk); }
:root[data-theme="dark"] .tbl thead th               { background: var(--surface-sunk); }
:root[data-theme="dark"] .tbl tbody tr:hover        { background: var(--bg-subtle); }
:root[data-theme="dark"] .cal-cell-empty            { background: var(--surface-sunk); }
:root[data-theme="dark"] .settings-nav-item:hover   { background: rgba(52, 211, 153, 0.08); color: var(--text); }
:root[data-theme="dark"] .settings-nav              { background: var(--bg-subtle); }
:root[data-theme="dark"] .modal-footer               { background: var(--surface-sunk); }
:root[data-theme="dark"] .kanban-col                 { background: var(--surface-sunk); }
:root[data-theme="dark"] .kanban-col-count           { background: var(--card); }
:root[data-theme="dark"] .item-row.clickable:hover  { background: var(--bg-subtle); }
:root[data-theme="dark"] .release-attention-row:hover { background: var(--surface-sunk); }
:root[data-theme="dark"] .modal-close:hover          { background: var(--surface-sunk); }
:root[data-theme="dark"] .agenda-date                { background: var(--surface-sunk); }
:root[data-theme="dark"] .cal-header                 { background: var(--surface-sunk); }
:root[data-theme="dark"] .release-callout            { background: var(--surface-sunk); color: var(--text-muted); border-color: var(--border-strong); }
:root[data-theme="dark"] .release-callout-danger    { border-color: color-mix(in srgb, var(--danger) 45%, var(--danger-soft)); background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .release-callout-warning   { border-color: color-mix(in srgb, var(--warning) 45%, var(--warning-soft)); background: var(--warning-soft); color: var(--warning); }
:root[data-theme="dark"] .storage-warning            { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--warning-soft)); }
:root[data-theme="dark"] .storage-warning strong    { color: var(--text-strong); }
:root[data-theme="dark"] .badge-neutral              { background: var(--surface-sunk); color: var(--text-muted); }
:root[data-theme="dark"] .badge-warm                 { background: var(--warning-soft); color: var(--warning); }
:root[data-theme="dark"] .badge-cold                 { background: var(--info-soft); color: var(--info); }
:root[data-theme="dark"] .calc-sum > div            { background: var(--surface-sunk); }
:root[data-theme="dark"] .calc-total > div          { background: var(--accent-soft); }
:root[data-theme="dark"] .calc-preview               { background: var(--surface-sunk); }
:root[data-theme="dark"] .calc-disclaimer            { background: var(--surface-sunk); }
:root[data-theme="dark"] .confirm .modal-body .impact { background: var(--surface-sunk); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--card); color: var(--text); border-color: var(--border-strong); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-soft); }
:root[data-theme="dark"] .progress-bar-wrap         { background: var(--border); }
:root[data-theme="dark"] .cal-event                  { background: rgba(255,255,255,0.04); }
:root[data-theme="dark"] .cal-event:hover           { background: rgba(255,255,255,0.08); }

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Keep scroll targets clear of the sticky topbar (see #topbar, position:
   sticky; top: 0). Without this an in-page anchor lands underneath it. */
html { scroll-padding-top: calc(var(--topbar-h) + 8px); }
body {
  font-family: var(--font);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01", "ss01";
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: var(--font-size-sm); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.011em; color: var(--text-strong); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Numerals — tabular everywhere numbers matter */
.num, .tbl .num, .kanban-card-price, .kanban-card-gci,
.calc-value, .stat-card .v, .rv, .cal-day,
.calc-preview-inner .v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--nums);
}

/* Focus (accessible) */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- APP SHELL ---------- */
#app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
}

/* ---------- SIDEBAR ----------
   Colors/font are scoped as custom properties on #sidebar itself (--sb-*)
   rather than changed on the shared root tokens (--sidebar-bg/--sidebar-accent
   etc. are also used by a couple of unrelated decorative effects elsewhere
   in the app — see lines using --sidebar-accent outside this block — so
   redefining them here keeps this navy/brass treatment fully contained to
   the sidebar and leaves everything else untouched). */
#sidebar {
  --sb-bg:        #0f1f2e;
  --sb-fg:        #ffffff;
  --sb-fg-dim:    #8296a8;
  --sb-hover:     #16293c;
  --sb-active-bg: #1c3247;
  --sb-accent:    #cda86a;
  --sb-border:    #1c3247;
  --sb-font:      var(--font-auth-ui); /* Manrope, self-hosted — see note below */
  background: var(--sb-bg);
  color: var(--sb-fg);
  padding: 28px 0 12px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  border-right: 1px solid var(--sb-border);
}
#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

/* ---------- SIDEBAR NAVIGATION (U1b) ----------
   One level: seven destinations at most, each a link. #sidebarNav is a
   plain column now - the rail/panel split, and the overflow juggling it
   needed, went with it. min-height:0 stays: it is what lets the list
   scroll inside the sidebar instead of growing it. */
#sidebarNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  padding: 0 12px;
  overflow-y: auto;
}
#sidebarNav::-webkit-scrollbar { width: 6px; }
#sidebarNav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

/* The sidebar brand text/divider was removed (the upper header is now the
   single place the product name appears). This mount point stays only for
   the optional custom-logo swap in updateSidebarAgent() — :empty collapses
   it to nothing when no logo is set, so no empty container is left behind. */
.brand { padding: 0 20px 12px; }
.brand:empty { display: none; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px 9px 9px;
  color: var(--sb-fg);
  font-family: var(--sb-font);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
  user-select: none;
  position: relative;
}
.nav-item:hover {
  background: var(--sb-hover);
  color: var(--sb-fg);
  text-decoration: none;
}
.nav-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-fg);
  border-left-color: var(--sb-accent);
  font-weight: 600;
}
.nav-item .nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.12s;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }
/* Keyboard users get the same ring every other control in the app has.
   Inset, because the item sits against the sidebar's own edge. */
.nav-item:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: -2px;
}

/* Keep labeled navigation at laptop widths as well as in the drawer. */
.sidebar-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--sb-border);
  color: var(--sb-fg-dim);
  font-family: var(--sb-font);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
}
.sidebar-footer .agent-name {
  color: var(--sb-fg);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: -0.005em;
}
.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.sync-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--sb-fg-dim);
}
.sync-status[data-status="saving"] .dot { background: var(--warning, #d97706); }
.sync-status[data-status="synced"] .dot { background: var(--success, #16a34a); }
.sync-status[data-status="error"] .dot,
.sync-status[data-status="offline"] .dot { background: var(--danger, #dc2626); }
.sync-status button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

/* ---------- MAIN AREA ---------- */
#main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}
#topbar {
  height: var(--topbar-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Topbar identity row: a compact product name, a dot, then the live
   breadcrumb trail for the current page. The generic `.topbar-brand span`
   rule that used to style the old two-line title was removed because it
   would now also blockify and serif-ify the separator and the crumbs; each
   element below is styled explicitly instead. The two -line1/-line2 classes
   are kept defined (unused by the shell markup as of this change) so any
   other consumer of them keeps working. */
.topbar-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.topbar-brand-name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-brand-sep {
  color: var(--border-strong);
  font-size: var(--font-size-md);
  flex-shrink: 0;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.breadcrumbs .crumb-sep {
  color: var(--text-soft);
  font-size: var(--font-size-xs);
}
.breadcrumbs .crumb-current {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A non-final crumb with no route renders as a plain span. */
.breadcrumbs .crumb {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A clickable crumb must be distinct from BOTH neighbours: .crumb (a plain
   non-clickable span, --text-muted) and .crumb-current (--text). Using --text
   here made it identical to .crumb-current, so the accent colour is what
   actually marks it as a link. Hover moves to --accent-hover because hover
   feedback would otherwise be invisible against the new resting colour. */
.breadcrumbs .link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.breadcrumbs .link:hover,
.breadcrumbs .link:focus-visible {
  color: var(--accent-hover);
  text-decoration: underline;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }
/* An empty per-page action slot shouldn't still eat two #topbar gaps. */
.topbar-actions:empty { display: none; }

/* ---------- PROFILE CONTROL (topbar, far right) ----------
   Closed state shows the avatar only, at every width — name/email/phone
   live in the dropdown, never permanently in the header. */
.profile-control { position: relative; flex-shrink: 0; }
.profile-trigger {
  display: flex; align-items: center; justify-content: center;
  padding: 2px;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.profile-trigger:hover { background: var(--surface-sunk); }
.profile-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.profile-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text);
  font-family: var(--font-primary); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.02em;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 240px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 6px; font-family: var(--font-primary);
}
.profile-menu-header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.profile-avatar-lg { width: 48px; height: 48px; font-size: var(--font-size-md); }
.profile-menu-id { min-width: 0; }
.profile-menu-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-email { font-size: var(--font-size-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.profile-menu-phone { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.profile-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px; border: 0; background: transparent;
  border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: 500; color: var(--text);
  cursor: pointer;
}
.profile-menu-item:hover { background: var(--surface-sunk); }
.profile-menu-item-danger { color: var(--danger); }

/* ---------- NOTIFICATIONS (Phase 4H): bell, panel, page ---------- */
.notif-control { position: relative; flex-shrink: 0; }
.notif-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.notif-bell svg { width: 20px; height: 20px; }
.notif-bell:hover { background: var(--surface-sunk); color: var(--text); }
.notif-bell:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.notif-bell[aria-expanded="true"] { background: var(--surface-sunk); color: var(--text); }
.notif-badge {
  position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-pill); background: var(--danger); color: #fff;
  font-family: var(--font-primary); font-size: var(--font-size-2xs); font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}
.notif-badge[hidden] { display: none; }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 380px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 96px));
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); font-family: var(--font-primary);
}
.notif-panel[hidden] { display: none; }
.notif-panel-head, .notif-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.notif-panel-head { border-bottom: 1px solid var(--border); }
.notif-panel-foot { border-top: 1px solid var(--border); justify-content: center; }
.notif-panel-title { margin: 0; font-size: var(--font-size-sm); font-weight: 700; color: var(--text); }
.notif-panel-title:focus { outline: none; }
.notif-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 6px; border-radius: var(--radius-sm); }
.notif-item + .notif-item { margin-top: 2px; }
.notif-unread { background: var(--accent-softer); }
.notif-open {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 8px; border: 0; background: transparent; border-radius: var(--radius-sm);
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
}
.notif-open:hover { background: var(--surface-sunk); }
.notif-open:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.notif-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.notif-tone-accent  { background: var(--accent-soft);  color: var(--accent); }
.notif-tone-hot     { background: var(--danger-soft);  color: var(--danger); }
.notif-tone-warning { background: var(--warning-soft); color: var(--warning); }
.notif-tone-danger  { background: var(--danger-soft);  color: var(--danger); }
.notif-tone-neutral { background: var(--surface-sunk); color: var(--text-muted); }
.notif-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-size: var(--font-size-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.notif-unread .notif-title { font-weight: 700; }
.notif-body { font-size: var(--font-size-xs); color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere; }
.notif-time { font-size: var(--font-size-xs); color: var(--text-soft); }
.notif-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.notif-hot-btn { flex-shrink: 0; margin: 8px 6px 0 0; white-space: nowrap; }
.notif-empty { padding: 18px 12px; font-size: var(--font-size-sm); color: var(--text-muted); text-align: center; }
.notif-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.notif-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.notif-list-page { padding: 6px; }
.notif-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 12px; }
.notif-pager:empty { display: none; }
@media (max-width: 640px) {
  .notif-panel { position: fixed; top: 60px; left: 16px; right: 16px; width: auto; max-width: none; }
  .notif-item { flex-wrap: wrap; }
  .notif-hot-btn { margin: 0 0 8px 48px; }
}
/* ---------- EDIT PROFILE MODAL ---------- */
.profile-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-avatar-xl { width: 72px; height: 72px; font-size: var(--font-size-xl); }
.profile-photo-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.profile-photo-row .hint { font-size: var(--font-size-xs); color: var(--text-soft); margin: 2px 0 0; }
.profile-photo-row .err { font-size: var(--font-size-xs); color: var(--danger); font-weight: 500; margin: 4px 0 0; }
.profile-edit-message { min-height: 18px; margin: 10px 0 0; font-family: var(--font-primary); font-size: var(--font-size-sm); }
.profile-edit-message.success { color: var(--success); }
.profile-edit-message.error { color: var(--danger); }
#profileEmailInput[readonly] { background: var(--surface-sunk); color: var(--text-muted); cursor: not-allowed; }

/* The glyph was replaced by an inline SVG, so font-size no longer sizes it:
   a fixed box plus flex centring does. align-items/justify-content only take
   effect once the mobile media query flips display to inline-flex. */
#mobileMenuToggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 36px;
  height: 36px;
}
#page {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 28px 32px;
  min-width: 0;
  scroll-padding-top: var(--topbar-h);
}

/* ---------- PAGE HEADER ----------
   Title sits far left, the page's primary action (if any) sits far right,
   both pinned to the same row; the description flows below, full width. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: nowrap;
}
.page-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.page-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
  color: var(--text-strong);
}
.page-desc {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  max-width: 640px;
  line-height: 1.55;
}
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
  line-height: 1.35;
}
.btn:hover {
  background: var(--surface-sunk);
  border-color: var(--text-soft);
}
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

.btn-danger {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--surface-sunk);
  color: var(--text);
}

.btn-sm { padding: 4px 9px; font-size: var(--font-size-xs); }
.btn-icon {
  padding: 6px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- CARDS ---------- */
.card {
  min-width: 0;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Card titles sit one step above body text (16px vs the 14px --font-size-sm
   body) so a section label reads as a label rather than as more prose. */
.card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}
.card-body { padding: 16px; }
.card-body.zero { padding: 0; }

/* Attention card — a warm accent only while there is actually something to
   act on. Amber rather than red: an overdue follow-up is a prompt, not an
   error. The class is applied by the dashboard's needsAttention widget and
   only when at least one row will actually be rendered. --warning has a
   dark-theme override, so this stays legible in both themes. */
.card-attention {
  border-color: var(--warning);
  border-left: 3px solid var(--warning);
}
.card-attention .card-title { color: var(--warning); }

/* Destructive area (Data & Safety workspace reset). Same shape as
   .card-attention but in the danger color, so an irreversible action is
   visually separated from ordinary settings cards. --danger has a
   dark-theme override, so this stays legible in both themes. */
.card-danger-zone {
  border-color: var(--danger);
  border-left: 3px solid var(--danger);
}
.card-danger-zone .card-title { color: var(--danger); }

/* ---------- FILTER BAR ----------
   Controls sit at a shared 36px height and WRAP to a second row when the
   viewport can't fit them. Wrapping rather than horizontal scrolling is
   deliberate: a scrollbar hides the last filter(s) entirely, so a control
   the user never sees is a control they never use. Every child therefore
   has a bounded width — nothing may grow to consume the row. */
.filter-bar {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
/* The search box is capped rather than flex-grown. Left to expand it took
   roughly half the row and pushed the dropdowns off-screen. */
.filter-bar .search-wrap {
  flex: 0 1 280px;
  min-width: 200px;
  max-width: 280px;
  height: 36px;
  position: relative;
}
.filter-bar .search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="search"] {
  height: 36px;
  box-sizing: border-box;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: var(--font-size-sm);
  /* Content-sized between bounds. The upper bound matters: selects listing
     contact or deal names would otherwise size to their widest option and
     blow out the row on their own. */
  min-width: 110px;
  max-width: 190px;
  flex: 0 1 auto;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.filter-bar .search-wrap > input[type="search"],
.filter-bar .search-wrap > input[type="text"] {
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding-left: 34px;
}
.filter-bar .btn {
  height: 36px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.filter-bar .view-tabs {
  height: 36px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.filter-bar .view-tabs .btn { height: 100%; }

/* "More filters" popover — the overflow home for a page's lowest-priority
   filters once the row would otherwise carry more than about five controls.
   Anchored to its own button rather than the row, so it stays correctly
   placed after the row wraps to a second line. */
.filter-more { position: relative; display: inline-flex; flex: 0 0 auto; }
.filter-more-toggle.has-active { border-color: var(--accent); color: var(--accent); }
.filter-more-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-text);
  font-size: var(--font-size-2xs); font-weight: 700; line-height: 1;
}
.filter-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 240px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.filter-more-panel[hidden] { display: none; }
.filter-more-field { display: flex; flex-direction: column; gap: 4px; }
.filter-more-field > span {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Inside the panel the bounded row sizing above does not apply — each select
   takes the panel's full width. */
.filter-bar .filter-more-panel select { width: 100%; max-width: none; min-width: 0; }
.filter-bar select:focus,
.filter-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* ---------- TABLES ---------- */
.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

/* Compact fixed-layout table. For wide tables (7+ columns) sitting inside a
   narrow grid column, where the default content-driven layout lets one long
   cell wrap to three lines and shoulder the rest of the row off-screen.
   Requires a <colgroup> on the table to declare the column widths.
   Deliberately NOT applied to .tbl globally — most tables have few enough
   columns that content-driven sizing reads better. */
.tbl-compact { table-layout: fixed; font-size: var(--font-size-xs); }
/* .tbl-prefixed so this beats `.tbl thead th` / `.tbl tbody td` further down
   the file — those have equal specificity and would otherwise win on order,
   restoring 16px side padding and clipping Rate / Sale Price / the stage pill. */
.tbl.tbl-compact thead th,
.tbl.tbl-compact tbody td { padding: 8px 6px; }
/* Below about 1100px the commission table sits in a ~423px grid column, where
   seven financial columns cannot both fit and stay readable. A floor keeps the
   columns at their desktop widths and lets .table-wrap (already overflow-x:auto)
   scroll instead — scrolling to read a value beats not being able to read it.
   720px is the smallest floor that also keeps the stage pill intact, and stays
   under the 735px the table occupies at 1440px, so desktop never scrolls.
   Guarded above 900px so the mobile card-stacking path is untouched. */
@media (min-width: 901px) {
  .tbl.tbl-compact { min-width: 720px; }
}
/* Every cell stays on one line; the primary cell shows an ellipsis and keeps
   its full text in a title attribute so nothing becomes unreadable. */
.tbl-compact tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbl-compact .stage-pill {
  max-width: 100%;
  padding: 2px 8px;
  font-size: var(--font-size-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The stacked-card treatment below 900px overrides table-layout entirely
   (rows become blocks), so restore normal wrapping there. */
@media (max-width: 900px) {
  .tbl-compact tbody td { white-space: normal; overflow: visible; }
}
.tbl thead th {
  text-align: left;
  padding: 11px 16px;
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-inset);
  vertical-align: middle;
  color: var(--text);
}
.tbl tbody tr { transition: background 0.08s; }
.tbl tbody tr:hover { background: var(--surface-sunk); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .primary-cell { font-weight: 600; color: var(--text-strong); letter-spacing: -0.005em; }
.tbl .num { text-align: right; }
.tbl .actions { text-align: right; white-space: nowrap; }

/* ---------- BADGES / PILLS ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.4;
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.badge-neutral { background: var(--border-inset); color: var(--text-muted); }
.badge-hot     { background: var(--danger-soft); color: var(--danger); }
.badge-warm    { background: var(--warning-soft); color: var(--warning); }
.badge-cold    { background: var(--info-soft); color: var(--info); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-info    { background: var(--info-soft); color: var(--info); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
/* Compact-size modifier for an inline badge (pair with .badge-danger,
   .badge-warning, etc., or an inline color override) — not tied to any
   particular badge's meaning. */
.badge-compact { font-size: var(--font-size-2xs); padding: 2px 7px; }
.badge-overdue { background: var(--danger-soft); color: var(--danger); }
.badge-today   { background: var(--warning-soft); color: var(--warning); }
.badge-upcoming{ background: var(--info-soft); color: var(--info); }

.stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--border-inset);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
:root[data-theme="dark"] .stage-pill { background: var(--surface-sunk); color: var(--text); }

/* ---------- FORMS ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-field,
.field {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  gap: 5px;
}
.form-field label,
.field > span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-field label .req { color: var(--danger); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea,
.field input,
.field select,
.field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--card);
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.form-field textarea,
.field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.form-field .hint { font-size: var(--font-size-xs); color: var(--text-soft); margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-field .err {
  font-size: var(--font-size-xs);
  color: var(--danger);
  margin-top: 2px;
  display: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--danger); }
.form-field.has-error .err { display: block; }
.form-field.has-error label { color: var(--danger); }

/* ---------- MODALS ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 51, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 100;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.modal.wide { max-width: 720px; }
@keyframes modalIn {
  from { transform: translateY(-6px) scale(0.995); opacity: 0; }
  to   { transform: translateY(0) scale(1);        opacity: 1; }
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.modal-body { padding: 20px; }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--surface-sunk);
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-lg);
  line-height: 1;
}
.modal-close:hover { background: var(--surface-sunk); color: var(--text); }

/* ---------- TOAST ---------- */
#toastRoot {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: #FFFFFF;
  padding: 11px 15px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  pointer-events: auto;
  animation: toastIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.005em;
}
.toast.success { background: var(--success); }
.toast.danger  { background: var(--danger); }
.toast.warning { background: var(--warning); }
@keyframes toastIn {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* A toast that offers what to do next (Phase 2F: "Added Sarah Khan." /
   Open / Log a call). The buttons sit on a coloured background, so they
   borrow its contrast rather than the page's. */
.toast.toast-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.toast .toast-text { flex: 1 1 auto; }
.toast .toast-action {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  padding: 4px 10px;
}
.toast .toast-action:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- HUB TAB BAR (U1b) ----------
   Sits between the header and the page, on hub list pages only. Links,
   so they behave like links; styled as tabs, because that is the job
   they do. The underline is the active marker rather than a filled pill
   - it reads the same in both themes and does not compete with the
   page's own headings. */
#hubTabs {
  border-bottom: 1px solid var(--border);
  background: var(--card);
  padding: 0 var(--page-pad, 24px);
}
#hubTabs[hidden] { display: none; }

.hub-tabs {
  display: flex;
  gap: 2px;
  /* One line, always. Six tabs at 1000px do not fit, and a wrapped tab
     row reads as two rows of unrelated links. */
  overflow-x: auto;
  scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { height: 0; }

.hub-tab {
  flex: 0 0 auto;
  padding: 12px 14px 10px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.hub-tab:hover { color: var(--text); text-decoration: none; }
.hub-tab.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.hub-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Below 640px the row becomes a select. Both are in the DOM; this is
   the only thing that decides which one a person sees. */
.hub-tabs-select { display: none; }
@media (max-width: 640px) {
  .hub-tabs { display: none; }
  .hub-tabs-select { display: block; padding: 10px 0; }
  .hub-tabs-select select { width: 100%; }
}

/* ---------- SETTINGS IN THE RAIL ----------
   Pinned to the bottom of the sidebar, above the agency name, so it is
   in the same place on the desktop rail and in the drawer the mobile
   "More" tab opens. Styled as a sidebar row rather than a button,
   because that is what it is. */
.sidebar-settings {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 0; border-radius: var(--radius);
  background: none;
  color: var(--sidebar-fg);
  font: inherit; font-size: var(--font-size-sm); font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.sidebar-settings:hover { background: var(--sidebar-hover); color: var(--sidebar-active-fg); }
.sidebar-settings.active { background: var(--sb-active-bg); color: var(--sb-accent); }
.sidebar-settings:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: -2px; }
.sidebar-settings svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- QUICK ADD (Phase 2F) ----------
   One button, in two places, so it is reachable at every width: in the
   header where there is room for it, and floating above the content
   where there is not. Both are always in the DOM — only CSS decides
   which one is on screen, which is also why neither needs a resize
   handler. 900px is the app's own desktop/mobile line. */
.quick-add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
/* --primary is undefined; give the white plus a contrasting light-mode
   background without changing the existing dark-mode or floating control. */
:root:not([data-theme="dark"]) .quick-add-btn { background: var(--accent); }
.quick-add-btn:hover { filter: brightness(1.06); }
.quick-add-fab { display: none; }
@media (max-width: 900px) {
  .quick-add-btn { display: none; }
  .quick-add-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 18px; bottom: 18px; z-index: 150;
    width: 56px; height: 56px;
    border: 0; border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 30px; line-height: 1;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }
}

/* ---------- EMPTY STATE ---------- */
.empty {
  text-align: center;
  padding: var(--empty-padding);
  color: var(--text-muted);
}
.empty h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 6px;
}
.empty p {
  max-width: 360px;
  margin: 6px auto 18px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.empty h3 + p { margin-top: 6px; }
.empty p:first-child:last-child { color: var(--text); margin-top: 0; }
.empty-state {
  padding: 22px 18px;
  text-align: center;
}
.empty-title {
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.45;
}
.empty-desc {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.empty-state .btn,
.empty-state button { margin-top: 14px; }

/* Loading spinner — a small rotating ring shown before "Loading…" text.
   The global prefers-reduced-motion block already halts the animation with
   !important; the rule below additionally neutralises the accent-coloured
   arc so a stopped spinner reads as a plain static ring rather than a
   half-drawn element frozen mid-spin. */
.loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation: none; border-top-color: var(--border-strong); }
}
.empty .empty-icon {
  width: 44px; height: 44px;
  margin: 0 auto 18px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xl);
}

/* ---------- DETAIL PAGE LAYOUT ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: flex-start;
}
.detail-grid > .card { min-width: 0; }
.detail-grid > .col { display: flex; flex-direction: column; gap: 20px; }

/* Shared back link for detail pages. Breadcrumbs are hidden below 900px, so
   on a phone this is the ONLY way back to the list short of the browser
   button — which is why it lives in the page body rather than the topbar. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s, background-color 0.12s;
}
.back-link:hover,
.back-link:focus-visible { color: var(--accent); background: var(--accent-softer); }
.back-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* The aside column carries far fewer sections than the main column (Quick
   Actions and a Summary against six related-record cards), so pinning it
   keeps those actions reachable instead of stranding them above a long
   scroll. max-height + overflow-y matter: without them an aside taller than
   the viewport would stick with its lower half permanently unreachable. */
@media (min-width: 901px) {
  .detail-grid > .col:last-child {
    position: sticky;
    top: calc(var(--topbar-h) + 12px);
    max-height: calc(100vh - var(--topbar-h) - 24px);
    overflow-y: auto;
  }
}

.profile-hero {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}
.profile-hero .avatar {
  width: 52px; height: 52px;
  border-radius: var(--radius-xl);
  background: var(--text-strong);
  color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-xl); font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
:root[data-theme="dark"] .profile-hero .avatar { background: var(--accent); color: var(--accent-text); }
.profile-hero .name {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-strong);
}
.profile-hero .subline {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: 4px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}

.address {
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.005em;
}
.address .mls { color: var(--text-soft); font-size: var(--font-size-xs); font-weight: 500; margin-left: 6px; }

.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.meta > div { min-width: 0; }
.meta .k {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 3px;
}
.meta .v {
  font-size: var(--font-size-sm);
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}


/* KPI stat cards */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  min-width: 0;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  transition: border-color 0.15s;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card .k {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  margin-bottom: 10px;
}
.stat-card .v {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.stat-card .sub {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Compact list item */
.item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-inset);
  transition: background 0.08s;
}
.item-row:last-child { border-bottom: none; }
.item-row.clickable { cursor: pointer; }
.item-row.clickable:hover { background: var(--surface-sunk); }
.item-row .icon-slot {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: 600;
}
.item-row .body { flex: 1; min-width: 0; }
.item-row .body .title { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-strong); letter-spacing: -0.005em; }
.item-row .body .sub { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 2px; }
.item-row .meta-right {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Coming soon page */
.coming-soon-hero {
  text-align: center;
  padding: 72px 20px;
}
.coming-soon-hero .icon {
  width: 64px; height: 64px;
  background: var(--text-strong);
  border-radius: var(--radius-2xl);
  color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-size-3xl);
  margin-bottom: 22px;
}
:root[data-theme="dark"] .coming-soon-hero .icon { background: var(--accent); color: var(--accent-text); }
.coming-soon-hero h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.coming-soon-hero p { color: var(--text-muted); max-width: 480px; margin: 0 auto; font-size: var(--font-size-sm); line-height: 1.55; }

/* ---------- CONFIRM DIALOG ---------- */
.confirm .modal-body {
  padding: 20px;
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: 1.55;
}
.confirm .modal-body .impact {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
}
.confirm .modal-body .impact ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- LINK TEXT ---------- */
.link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.link:hover { text-decoration: underline; text-underline-offset: 2px; }

.sidebar-scrim { display: none; }

/* Desktop containment */
#pipelineBody,
.release-grid,
.release-grid > *,
.detail-grid,
.detail-grid > *,
.card-header,
.card-body {
  min-width: 0;
  max-width: 100%;
}
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="search"] { max-width: 100%; }

.form-help {
  margin: 12px 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

/* Theme toggle */
#themeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#themeToggle:hover { color: var(--text); border-color: var(--text-soft); background: var(--surface-sunk); }
#themeToggle:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
#themeToggle svg { width: 18px; height: 18px; }

/* Laptop-width containment */
@media (min-width: 901px) and (max-width: 1150px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page { padding: 24px; }
}

/* ---------- RESPONSIVE ---------- */
/* Sidebar-specific mobile behavior gets its own breakpoint (860px) per the
   sidebar spec, kept separate from the app's general 900px content
   breakpoint below so this change stays scoped to the sidebar/nav only. */
@media (max-width: 860px) {
  #app-shell { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-lg);
  }
  #sidebar.open { transform: translateX(0); }
  #mobileMenuToggle { display: inline-flex; }
  /* The drawer is the same one-level list as the desktop sidebar, at
     full width with labels - the place with the least context is not
     the place to drop words. */
  .sidebar-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(11, 31, 51, 0.45);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
  }
  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 900px) {
  /* Room is tight once the mobile menu button appears alongside the brand
     title, theme toggle, and any per-page top actions — keep the two-line
     title from crowding those controls. */
  #topbar { padding: 0 16px; gap: 10px; }
  /* Breadcrumbs hide on mobile — the drawer is the navigation affordance
     there, and the row has to fit the menu button, theme toggle, page
     actions and avatar. The compact product name stays. */
  .topbar-brand-name { font-size: var(--font-size-md); }
  .topbar-brand-sep { display: none; }
  .breadcrumbs { display: none; }
  #page { padding: 18px; }
  /* The filter row wraps at every width, so there is no longer a horizontal
     overflow to hint at — the right-edge scroll fade that used to live here
     was removed along with the nowrap/overflow-x behaviour it described. On
     narrow screens the search box takes the full first row and the dropdowns
     wrap beneath it. */
  .filter-bar .search-wrap { flex-basis: 100%; max-width: 100%; }
  .filter-bar select { max-width: none; flex: 1 1 140px; }
  .detail-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 16px; }
  .stat-card .v { font-size: var(--font-size-2xl); }
  .form-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-title { font-size: var(--font-size-2xl); }
  .page-actions { flex-direction: column; align-items: stretch; }
  .page-actions .btn { justify-content: center; }
  /* Stacked-cards table treatment */
  .tbl-responsive thead { display: none; }
  .tbl-responsive tbody tr {
    display: block;
    padding: 14px;
    border-bottom: 1px solid var(--border);
  }
  .tbl-responsive tbody td {
    display: flex;
    padding: 4px 0;
    border: none;
    justify-content: space-between;
    align-items: center;
  }
  .tbl-responsive tbody td::before {
    content: attr(data-label);
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 600;
    margin-right: 12px;
  }
  .tbl-responsive tbody td.actions {
    justify-content: flex-end;
    margin-top: 8px;
  }
  .tbl-responsive tbody td.actions::before { display: none; }
}

@media (max-width: 480px) {
  /* One stat per row on a phone, with tighter padding and a value size that
     steps down again from the 900px breakpoint's --font-size-2xl.
     .stat-card .k is already --font-size-2xs at base, so it needs no override
     here. */
  .stat-row { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { padding: 10px 12px; }
  .stat-card .v { font-size: var(--font-size-xl); }
  .modal { border-radius: var(--radius); }
  .modal-overlay { padding: 12px; align-items: flex-start; }
  #page { padding: 14px; }
  .page-title { font-size: var(--font-size-xl); }
}

/* ============================================================
   KANBAN PIPELINE + COMMISSION BREAKDOWN
   ============================================================ */

.view-tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.view-tabs .btn {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 5px 12px;
  font-weight: 500;
}
.view-tabs .btn:hover { background: transparent; color: var(--text); border-color: transparent; }
.view-tabs .btn.btn-primary {
  background: var(--card);
  color: var(--text-strong);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.view-tabs .btn.btn-primary:hover {
  background: var(--card);
  color: var(--text-strong);
  border-color: var(--border);
}

.stage-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.kanban-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.kanban-scroll::-webkit-scrollbar { height: 8px; }
.kanban-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }
.kanban {
  display: grid;
  width: max-content;
  grid-auto-flow: column;
  grid-auto-columns: minmax(288px, 1fr);
  gap: 14px;
  min-width: 100%;
  align-items: stretch;
}
.kanban-col {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 400px;
  transition: background 0.12s, border-color 0.12s;
  overflow: hidden;
}
.kanban-col.drop-target {
  background: var(--accent-softer);
  border-color: var(--accent);
}
.kanban-col-header {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.kanban-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kanban-col-count {
  margin-left: auto;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  min-width: 22px;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
.kanban-col-sub {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-transform: none;
}
.kanban-col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 60px;
}
.kanban-empty {
  padding: 32px 10px;
  text-align: center;
  color: var(--text-soft);
  font-size: var(--font-size-xs);
  border: 1.5px dashed transparent;
  border-radius: var(--radius);
  transition: border-color 0.12s, color 0.12s;
}
.kanban-col.drop-target .kanban-empty {
  border-color: var(--accent);
  color: var(--accent);
}

/* Kanban card */
.kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.12s;
  outline: none;
  user-select: none;
}
.kanban-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.kanban-card:focus-visible {
  box-shadow: var(--shadow-focus);
  border-color: var(--accent);
}
.kanban-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(1deg);
}
.kanban-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.kanban-card-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-strong);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.kanban-card-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.kanban-card-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-card-money {
  padding: 8px 0;
  border-top: 1px solid var(--border-inset);
  border-bottom: 1px solid var(--border-inset);
  margin-bottom: 8px;
}
.kanban-card-price {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.kanban-card-gci {
  font-size: var(--font-size-xs);
  color: var(--accent);
  margin-top: 3px;
  font-weight: 600;
}
.kanban-card-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.kanban-card-date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- COMMISSION CALC TABLE ---------- */
.calc-table {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 20px;
  align-items: center;
}
.calc-row { display: contents; }
.calc-row > div { padding: 7px 0; }
.calc-label { color: var(--text); font-size: var(--font-size-sm); }
.calc-op { color: var(--text-soft); font-size: var(--font-size-sm); text-align: center; width: 20px; font-weight: 600; }
.calc-value {
  text-align: right;
  font-weight: 600;
  color: var(--text-strong);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.calc-input .calc-label { color: var(--text-muted); }
.calc-deduct .calc-label { color: var(--text-muted); }
.calc-deduct .calc-value { color: var(--danger); }
.calc-sum > div {
  padding: 11px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunk);
  margin: 6px 0;
}
.calc-sum .calc-label { font-weight: 700; }
.calc-sum .calc-value { font-weight: 700; font-size: var(--font-size-md); }
.calc-total > div {
  padding: 14px 0;
  border-top: 1px solid var(--text-strong);
  background: var(--accent-soft);
  margin-top: 6px;
}
.calc-total .calc-label {
  font-weight: 700;
  color: var(--text-strong);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}
.calc-total .calc-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-2xl);
  color: var(--accent);
  letter-spacing: -0.015em;
}
.calc-weighted > div {
  padding: 10px 0;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  margin-top: 8px;
}
.calc-weighted .calc-value { color: var(--info); font-weight: 600; }
.calc-disclaimer {
  margin: 16px 0 0;
  padding: 11px 14px;
  background: var(--surface-sunk);
  border-left: 2px solid var(--text-soft);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.55;
  border-radius: var(--radius-xs);
}

/* Live commission preview in modal */
.calc-preview {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.calc-preview-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.calc-preview-inner > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calc-preview-inner .k {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--text-muted);
}
.calc-preview-inner .v {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .kanban { grid-auto-columns: 260px; }
  .calc-preview-inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .calc-preview-inner > div {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
  .calc-table {
    grid-template-columns: 1fr auto 90px;
    gap: 6px 8px;
  }
}
@media (max-width: 480px) {
  .kanban { grid-auto-columns: 240px; }
}

/* ============================================================
   CALENDAR + TASKS
   ============================================================ */

.task-check {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: transparent;
  font-size: var(--font-size-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.task-check:hover { border-color: var(--accent); }
.task-check.checked {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-header {
  padding: 10px 8px;
  text-align: center;
  font-size: var(--font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
}
.cal-cell {
  min-height: 100px;
  padding: 6px;
  border-bottom: 1px solid var(--border-inset);
  border-right: 1px solid var(--border-inset);
  font-size: var(--font-size-xs);
  position: relative;
  overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell-empty { background: var(--surface-sunk); }
.cal-cell-today { background: var(--accent-softer); }
.cal-day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--text-strong);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cal-cell-today .cal-day { color: var(--accent); }
.cal-event {
  padding: 2px 6px;
  margin-bottom: 2px;
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--font-size-xs);
}
.cal-event:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cal-event-time { font-weight: 600; flex-shrink: 0; color: var(--text-muted); }
.cal-event-label { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cal-more { font-size: var(--font-size-2xs); color: var(--accent); font-weight: 600; padding: 2px 5px; }

.agenda-day { border-bottom: 1px solid var(--border-inset); }
.agenda-today { background: var(--accent-softer); }
.agenda-date {
  padding: 11px 16px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-strong);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.agenda-today .agenda-date { background: transparent; color: var(--accent); }

@media (max-width: 900px) {
  .cal-cell { min-height: 72px; padding: 4px; }
  .cal-event { font-size: var(--font-size-2xs); }
  .cal-event-time { display: none; }
}
@media (max-width: 480px) {
  .cal-cell { min-height: 54px; }
  .cal-event-label { font-size: var(--font-size-2xs); }
}

/* ============================================================
   GOALS + REPORTS
   ============================================================ */

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.goal-card { min-width: 0; }

.progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 2px;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}
.report-card { min-width: 0; }
.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.report-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rk {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}
.rv {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.015em;
}

@media (max-width: 900px) {
  .goals-grid { grid-template-columns: 1fr; }
  .reports-grid { grid-template-columns: 1fr; }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RELEASE / DASHBOARD POLISH
   ============================================================ */

.storage-warning {
  margin: 12px 24px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--warning-soft));
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: var(--radius);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
}
.storage-warning strong { color: var(--text-strong); }
.release-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.release-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.release-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.release-attention-row {
  width: 100%; border: 0; border-bottom: 1px solid var(--border-inset); background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; color: var(--text); text-align: left;
  font-family: inherit; font-size: var(--font-size-sm);
  transition: background 0.08s;
}
.release-attention-row:hover { background: var(--surface-sunk); }
.release-attention-row:last-child { border-bottom: 0; }
.release-attention-row strong {
  color: var(--warning);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.release-goal-row { margin-bottom: 18px; }
.release-goal-row:last-child { margin-bottom: 0; }
.release-goal-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: var(--font-size-sm); font-weight: 500; }
.release-goal-sub { margin-top: 7px; color: var(--text-muted); font-size: var(--font-size-xs); }
.release-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.release-library-card h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.release-library-card p { white-space: pre-wrap; color: var(--text-muted); font-size: var(--font-size-sm); max-height: 180px; overflow: auto; line-height: 1.55; }
.release-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- INLINE "MORE" MENU ----------
   Secondary card actions, kept off the main row. The wrapper is the
   positioning context; the menu is right-aligned so it stays inside the card
   on the right-hand column of the grid. */
.action-more { position: relative; display: inline-flex; }
.action-more-toggle { padding-left: 9px; padding-right: 9px; }
.action-more-toggle svg { display: block; }
.action-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 150px;
  padding: 4px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
/* The UA sheet already hides [hidden], but this rule is explicit so the
   absolute positioning above can never be read as overriding it. */
.action-more-menu[hidden] { display: none; }
.dropdown-action {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-action:hover { background: var(--surface-sunk); }
.dropdown-action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.release-library-preview { padding: 10px 0; border-bottom: 1px solid var(--border-inset); font-size: var(--font-size-sm); color: var(--text-muted); }
.release-library-preview:last-child { border-bottom: 0; }
.release-library-preview strong { display: block; color: var(--text-strong); margin: 5px 0 2px; }
.release-callout {
  padding: 13px 16px;
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.release-callout strong { color: var(--text-strong); }
.release-callout-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--danger-soft)); background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .release-callout-danger { color: var(--danger); }
/* Informational/cautionary callouts (e.g. "back up before major changes")
   that are not error states — danger-red is reserved for destructive
   actions like Reset All Data. */
.release-callout-warning { border-color: color-mix(in srgb, var(--warning) 35%, var(--warning-soft)); background: var(--warning-soft); color: var(--warning); }
:root[data-theme="dark"] .release-callout-warning { color: var(--warning); }
.release-maintenance { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-inset); }
.release-maintenance:last-child { border-bottom: 0; }
/* These rows normally sit inside a padded .card-body (Settings > Modules,
   Dashboard, Workspace Maintenance, Working As, Custom Fields, Automation),
   which supplies their horizontal inset — adding it to the row itself would
   double the indent in all of those places. Only when the container zeroes
   its own padding, as the Scheduler's Upcoming/Past cards do so the rows can
   run edge to edge vertically, does the row need to supply its own. */
.card-body.zero .release-maintenance { padding-left: 16px; padding-right: 16px; }
/* A compact stand-in for a row when a zero-padding card has nothing to list,
   so the empty message is not left flush against the card edge. */
.card-body.zero .empty-row { padding: 12px 16px; }
.release-maintenance > div > div { color: var(--text-muted); font-size: var(--font-size-sm); margin-top: 3px; }
/* Cap the label/description block's width so it can't stretch into
   excessively long lines once the settings shell fills a wide viewport —
   the action button stays pinned to the right via justify-content. */
.release-maintenance > div:first-child { max-width: 560px; }
@media (max-width: 1050px) {
  .release-grid-2 { grid-template-columns: 1fr; }
  .release-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .release-grid-2 { grid-template-columns: 1fr; }
  .release-maintenance { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .release-stat-grid { grid-template-columns: 1fr; }
  .storage-warning { margin: 8px 12px 0; }
  .release-library-grid { grid-template-columns: 1fr; }
}

/* ---------- SETTINGS CENTER ---------- */
/* ===================================================================
   SETTINGS — unified workspace container
   The shell IS the card. Nav sits inside as a sidebar panel separated
   by a vertical hairline. Content sits right. One shared visual grid.
   =================================================================== */

/* The shell itself is the visual container. No max-width here: #page itself
   is already max-width:100% (see above) and every other page fills that
   full available width, so Settings matches that same convention instead
   of capping itself narrower and leaving unused space on wide viewports. */
.settings-shell {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;             /* border-radius clips children */
}

/* Nav: embedded sidebar panel, no standalone card appearance */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 16px 10px;
  border-right: 1px solid var(--border);
  background: var(--surface-sunk);
  position: sticky;
  top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  align-self: stretch;
}
.settings-nav-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit; font-size: var(--font-size-sm); font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}
.settings-nav-item:hover {
  background: rgba(15, 118, 110, 0.06);
  color: var(--text);
}
.settings-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Content: right panel inside the shared container */
.settings-content {
  min-width: 0;
  padding: 24px 28px 28px;
}

/* Section heading */
.settings-category-head { margin-bottom: 18px; }
.settings-category-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.settings-category-head .form-help {
  margin: 4px 0 0;
}

/* Two-card grid inside settings (currently only Data & Safety's Export /
   Restore pair): match the default .release-grid-2 stretch behavior used
   everywhere else in the app, so a matched pair of cards reads as one set
   instead of visibly mismatched heights. */
.settings-content .release-grid-2 {
  align-items: stretch;
}
/* .card is a plain block everywhere else in the app; stretching the grid
   item alone would leave dead space at the bottom of the shorter card
   instead of an evenly filled pair. Scoped to this one grid (not the
   global .card) so no other page's cards are affected. */
.settings-content .release-grid-2 > .card {
  display: flex;
  flex-direction: column;
}
.settings-content .release-grid-2 > .card > .card-body {
  flex: 1;
}

/* Cards inside settings sit flush — they're already inside the shell card */
.settings-content .card {
  box-shadow: none;
}
.settings-content .card-header { padding: 12px 16px; }
.settings-content .card-body   { padding: 16px; }
.settings-content .card-body .form-grid { gap: 14px; }

/* --- Responsive --- */

@media (min-width: 901px) and (max-width: 1150px) {
  .settings-shell {
    grid-template-columns: 164px minmax(0, 1fr);
  }
  .settings-content { padding: 20px 24px 24px; }
}

@media (max-width: 900px) {
  /* Shell stops being a card container; nav becomes horizontal pills */
  .settings-shell {
    display: block;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    max-height: none;
    border-right: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    gap: 5px;
    padding: 8px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    align-self: auto;
  }
  .settings-nav-item {
    width: auto;
    padding: 6px 11px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .settings-nav-item.active { border-color: var(--accent); }
  .settings-content {
    padding: 0;
  }
  .settings-content .card {
    box-shadow: var(--shadow-sm);
  }
  .settings-content .card-header { padding: 12px 14px; }
  .settings-content .card-body   { padding: 14px; }
}


/* ===== SETTINGS REDESIGN — cleaner setup workspace ===== */
.settings-nav-section { padding: 10px 0 4px; }
.settings-nav-section:first-child { padding-top: 0; }
.settings-nav-section-title { padding: 8px 10px 6px; color: var(--text-soft); font-size: var(--font-size-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.settings-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.settings-overview-card { text-align: left; padding: 18px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.settings-overview-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.settings-overview-card .icon-slot { width: 34px; height: 34px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.settings-overview-card h3 { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 500; margin-bottom: 5px; }
.settings-overview-card p { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.settings-form-section { padding: 18px 0; border-top: 1px solid var(--border); }
.settings-form-section:first-child { border-top: none; padding-top: 0; }
.settings-section-title { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 12px; }
.settings-save-bar { position: sticky; bottom: 0; z-index: 20; display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.settings-save-bar strong { color: var(--warning); }
.stage-compact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-inset); background: transparent; }
.stage-compact-row:last-child { border-bottom: 0; }
.stage-compact-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.stage-compact-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-compact-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.settings-status-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); padding: 16px; }
.settings-status-card .k { font-size: var(--font-size-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; margin-bottom: 6px; }
/* Plain sans-serif utility text, not a serif display headline — these are
   short status readouts ("Your data is saved to your account", a
   timestamp), not KPI numbers, so the large display-font treatment used
   elsewhere for stat values was oversized here. */
.settings-status-card .v { font-family: var(--font-primary); font-size: var(--font-size-md); color: var(--text-strong); font-weight: 600; line-height: 1.4; }
.settings-help-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--surface-sunk); color:var(--text-muted); border:1px solid var(--border); font-size: var(--font-size-xs); margin-left:5px; cursor:help; }
@media (max-width: 900px) { .settings-nav-section-title { width: 100%; padding: 4px 6px; } .settings-save-bar { position: sticky; bottom: 8px; flex-direction: column; align-items: stretch; } .stage-compact-row { align-items: flex-start; } }

/* ===== GOOGLE SHEETS SETTINGS (Phase 3B) ===== */
.gs-explainer-list { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.65; }
.gs-explainer-list li + li { margin-top: 4px; }
.gs-install-steps { margin: 0; padding-left: 22px; color: var(--text); font-size: var(--font-size-sm); line-height: 1.7; }
.gs-install-steps li + li { margin-top: 6px; }
.gs-install-steps code { background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; font-size: var(--font-size-xs); }

.gs-connection-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.gs-connection-card + .gs-connection-card { margin-top: 14px; }
.gs-connection-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.gs-connection-name { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.gs-connection-card .settings-status-grid { margin-bottom: 0; }
.gs-connection-card .settings-status-card .v { overflow-wrap: anywhere; word-break: break-word; }
.gs-connection-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* --- One-time credential modal --- */
.gs-cred-input {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  cursor: text;
}
.gs-cred-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.gs-cred-mono { font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); font-size: var(--font-size-sm); overflow-wrap: anywhere; color: var(--text-strong); }
.gs-cred-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gs-cred-warning { margin-top: 14px; }
.gs-cred-warning-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (max-width: 900px) {
  .gs-connection-head { flex-direction: column; align-items: flex-start; }
  .gs-connection-actions { justify-content: stretch; }
  .gs-connection-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .gs-cred-actions .btn { flex: 1 1 100%; }
}

/* ===== GOOGLE SHEETS IMPORT HISTORY (Phase 3C) ===== */
.gsih-disclosure { margin-bottom: 16px; }

.gsih-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.gsih-filter-bar .field { flex: 1 1 220px; min-width: 180px; }
.gsih-filter-bar .btn { flex-shrink: 0; }

.gsih-batch-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.gsih-batch-card + .gsih-batch-card { margin-top: 14px; }
.gsih-batch-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.gsih-batch-conn { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.gsih-batch-card .settings-status-grid { margin-bottom: 0; }
.gsih-batch-card .settings-status-card .v { overflow-wrap: anywhere; word-break: break-word; }
.gsih-batch-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.gsih-row-panel:not([hidden]) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.gsih-row-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 10px; }
.gsih-row-toolbar .field { flex: 0 1 220px; min-width: 160px; }

.gsih-row-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  padding: 12px 14px;
}
.gsih-row-item + .gsih-row-item { margin-top: 10px; }
.gsih-row-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gsih-row-num { font-weight: 600; color: var(--text-strong); }
.gsih-row-key {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.gsih-row-error { margin-top: 10px; }
.gsih-row-guidance { margin: 0; overflow-wrap: anywhere; }
.gsih-row-guidance + .gsih-row-guidance { margin-top: 6px; }

.gsih-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
}
.gsih-pagination:empty { padding: 0; }
.card > .gsih-pagination { border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .gsih-batch-head { flex-direction: column; align-items: flex-start; }
  .gsih-batch-actions { justify-content: stretch; }
  .gsih-batch-actions .btn { flex: 1; }
  .gsih-pagination { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .gsih-row-item-head { flex-direction: column; align-items: flex-start; }
}

/* ===== SETTINGS UX ENHANCEMENTS ===== */

/* --- Toggle switch (Modules + Dashboard) --- */
.toggle-switch {
  position: relative; display: inline-block;
  width: 36px; height: 20px; flex-shrink: 0; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .toggle-track {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background 0.18s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch .toggle-track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--card);
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.toggle-switch input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-track { box-shadow: var(--shadow-focus); }
:root[data-theme="dark"] .toggle-switch .toggle-track { background: var(--border); }
:root[data-theme="dark"] .toggle-switch input:checked + .toggle-track { background: var(--accent); }

/* --- Color swatch grid (Pipeline) --- */
.color-swatch-grid { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.color-swatch {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.12s, transform 0.12s;
  display: inline-block; flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text-muted); }

/* --- Commission preview card --- */
.commission-preview-card {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--text);
}
.commission-preview-card .preview-amount {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.015em;
}
:root[data-theme="dark"] .commission-preview-card { background: var(--accent-soft); }

/* --- Unsaved changes banner --- */
.unsaved-banner {
  padding: 10px 16px;
  background: var(--warning-soft);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.unsaved-banner .btn { flex-shrink: 0; }

/* --- Validation error on fields --- */
.field-error-hint {
  font-size: var(--font-size-xs); color: var(--danger); margin-top: 2px;
  font-weight: 500; display: none;
}
.field-error-hint.visible { display: block; }
.field.has-field-error input { border-color: var(--danger); }

/* --- Warning banner for total > 100 --- */
.settings-warning-banner {
  padding: 10px 14px;
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 14px;
}

/* --- Settings nav icons --- */
.settings-nav-item .nav-icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; opacity: 0.6; }
.settings-nav-item.active .nav-icon { opacity: 1; }

/* --- Last saved line --- */
.settings-last-saved {
  padding: 8px 10px;
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* --- Module filter input --- */
.module-filter-input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.module-filter-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* --- Drag handle --- */
.drag-handle {
  /* --text-soft was too faint to advertise that rows are reorderable at all;
     --text-muted is the minimum that reads as an affordance. */
  cursor: grab; color: var(--text-muted); font-size: var(--font-size-md);
  user-select: none; padding: 0 4px;
  transition: color 0.12s;
}
.drag-handle:hover { color: var(--text); }
[draggable="true"].dragging { opacity: 0.4; }

/* ---------- VISIBLE / HIDDEN TWO-COLUMN PICKER ----------
   Used by Settings > Dashboard. Two cards side by side, each owning one
   state, so a widget's state is its position rather than something you read
   off a switch. Visibility moves items between the cards; dragging only ever
   reorders within one. */
.split-columns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Bounded so the rows stay compact: full-viewport width strands the toggle
     far from the label it belongs to. */
  max-width: 760px;
}
.split-col { flex: 1 1 280px; min-width: 280px; margin-bottom: 0; }
.split-col .card-header { justify-content: flex-start; }

/* Header count pills. Green carries "these are live on your dashboard";
   hidden takes a neutral grey so it reads as inert rather than as an error. */
.group-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.group-pill-on { background: var(--success-soft); color: var(--success); }
.group-pill-off { background: var(--border-inset); color: var(--text-muted); }

.split-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  /* Zebra striping rather than hairline dividers: with a dozen near-identical
     rows the eye needs a band to track along, not just a separator. */
  transition: opacity 180ms ease, transform 180ms ease, background-color 0.12s;
}
.split-list .split-row:nth-child(even) { background: var(--surface-sunk); }
.split-row:hover { background: var(--bg-subtle); }
.split-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.split-row-label { min-width: 0; }
.split-row-label strong { font-size: var(--font-size-sm); font-weight: 600; }
.split-row-label .form-help { margin: 2px 0 0; }
/* Hidden widgets read as dimmed but stay legible enough to pick back out. */
.split-col[data-col="hidden"] .split-row-label { opacity: 0.6; }
.split-list { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.split-empty { padding: 14px 12px; color: var(--text-muted); font-size: var(--font-size-sm); }

/* Relocation animation for 6.7. The row fades and slides out of one card
   before being re-parented into the other, so the move is legible instead of
   a silent jump. Respects reduced-motion. */
.split-row.is-leaving { opacity: 0; transform: translateY(-6px); }
.split-row.is-entering { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .split-row { transition: none; }
  .split-row.is-leaving, .split-row.is-entering { opacity: 1; transform: none; }
}

/* --- Module rows (Settings > Modules) build on .split-row --- */
/* Tinted icon tile. Carries the module's own sidebar icon, so the row in
   Settings and the entry in the sidebar are recognisably the same thing. */
.split-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-softer);
  color: var(--accent);
}
.split-row-icon .nav-icon { width: 18px; height: 18px; }
.split-col[data-col="hidden"] .split-row-icon {
  background: var(--border-inset);
  color: var(--text-muted);
}
/* Required modules are locked rather than switchable. A disabled toggle still
   reads as "a switch I might be able to flip"; a padlock does not, which is
   the whole point of 7.2. */
.split-row-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; flex-shrink: 0;
  color: var(--text-soft);
}
.split-row-lock svg { width: 15px; height: 15px; }
/* Eyebrow over the account name in the profile dropdown. Names which of the
   two identities this one is, so a dropdown name differing from the Business
   Profile agent name reads as by-design rather than as drift. */
/* Per-card export button, pushed to the right of the card header. */
.report-card-export { margin-left: auto; }

/* ---------- PRINT ----------
   "Export as PDF" is the browser's own print-to-PDF: a real PDF writer would
   mean shipping a library, and this app has no build step and no dependencies.
   These rules strip the app chrome so what prints is the content, not the
   navigation around it. */
@media print {
  #sidebar,
  #topbar,
  .sidebar-scrim,
  #storageWarning,
  .page-actions,
  .action-more,
  .report-card-export,
  .back-link,
  .filter-bar { display: none !important; }
  html, body { background: #fff; }
  #app-shell, #main { display: block; }
  #page { padding: 0; }
  .reports-grid, .detail-grid, .split-columns { display: block; }
  /* Keep a card whole on one sheet rather than splitting its numbers across
     a page boundary. */
  .card, .report-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
    margin-bottom: 12px;
  }
  a[href]::after { content: ""; }
}

.profile-menu-eyebrow {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.module-group-tag {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* --- Inline edit field (Custom Fields / Team) --- */
.inline-edit-form {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.inline-edit-form .form-grid { margin-bottom: 10px; }

/* --- Stage deal-count link --- */
.stage-deal-link { color: var(--accent); cursor: pointer; font-weight: 500; }
.stage-deal-link:hover { text-decoration: underline; }

/* Authentication is a blocking gate only: the application shell and all
   existing workflows remain unchanged after sign-in. */
.cloud-auth { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); overflow-y:auto; }
/* Faint page-level decoration behind the card: two soft off-screen glows plus
   an extremely faint grid evoking property lines. Existing tokens only, very
   low opacity (color-mix keeps each layer around 4-7%), purely CSS, no image. */
.cloud-auth::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(620px circle at 6% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
    radial-gradient(560px circle at 96% 92%, color-mix(in srgb, var(--sidebar-accent) 6%, transparent), transparent 72%),
    radial-gradient(900px circle at 50% 45%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 75%);
}
.cloud-auth::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 72px);
}
/* Premium split card: form panel + illustration panel. Desktop/tablet swap
   sides between Sign in and Create account via the .is-create mode class,
   toggled only by the existing tab/switch handlers — no duplicated markup.
   position/z-index keeps the card above the page-level decoration above. */
.cloud-auth-card { position:relative; z-index:1; width:min(100%,960px); max-width:100%; display:flex; align-items:stretch; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; font-family:var(--font-auth-ui); }
.cloud-auth-form-panel { flex:1 1 54%; min-width:0; max-width:480px; padding:30px 44px 22px; display:flex; flex-direction:column; justify-content:center; order:1; }
.cloud-auth-form-panel h1 { font-family:var(--font-auth-display); font-size:40px; line-height:1.1; margin:0 0 8px; }
.cloud-auth-intro { color:var(--text-muted); margin:0 0 14px; font-size:var(--font-size-md); }
.cloud-auth-subheading { margin:0 0 6px; font-family:var(--font-auth-ui); font-size:var(--font-size-lg); font-weight:700; color:var(--text); }
.cloud-auth-tabs { display:flex; gap:3px; padding:3px; margin:0 0 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-sunk); }
.cloud-auth-tab { flex:1; border:0; border-radius:calc(var(--radius-sm) - 2px); padding:9px 10px; background:transparent; color:var(--text-muted); font-family:var(--font-auth-ui); font-size:var(--font-size-md); font-weight:600; cursor:pointer; }
.cloud-auth-tab[aria-selected="true"] { background:var(--card); color:var(--accent); box-shadow:var(--shadow-sm); }
.cloud-auth-field { margin:0 0 10px; }
.cloud-auth-form-panel label { display:block; color:var(--text-muted); font-family:var(--font-auth-ui); font-size: var(--font-size-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 7px; }
.cloud-auth-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cloud-auth-label-row label { margin:0 0 7px; }
.cloud-auth-inline-link { appearance:none; border:0; padding:0; background:transparent; color:var(--accent); font-family:var(--font-auth-ui); font-size:var(--font-size-xs); font-weight:700; letter-spacing:.02em; cursor:pointer; }
.cloud-auth-inline-link:hover { text-decoration:underline; }
.cloud-auth-inline-link:focus-visible { outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); border-radius:2px; }
.cloud-auth-input-wrap { position:relative; }
.cloud-auth-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); display:flex; color:var(--text-soft); pointer-events:none; }
.cloud-auth-form-panel input { width:100%; min-height:52px; padding:12px 14px 12px 42px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-sunk); color:var(--text); font-family:var(--font-auth-ui); font-size:var(--font-size-md); font-weight:500; line-height:1.4; transition:border-color .15s, box-shadow .15s, background-color .15s; }
.cloud-auth-form-panel input:focus { outline:none; border-color:var(--accent); background:var(--card); box-shadow:var(--shadow-focus); }
.cloud-auth-form-panel input::placeholder { color:var(--text-soft); font-family:var(--font-auth-ui); font-size:var(--font-size-md); font-weight:500; opacity:1; }
.cloud-auth-submit { width:100%; margin-top:14px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-auth-ui); font-size:var(--font-size-md); font-weight:700; }
.cloud-auth-message { min-height:0; margin:8px 0 0!important; font-family:var(--font-auth-ui); font-size: var(--font-size-md); }
.cloud-auth-message.error { color:var(--danger)!important; }
.cloud-auth-message.success { color:var(--success)!important; }
.cloud-auth-switch { margin:10px 0 0; color:var(--text-muted); font-family:var(--font-auth-ui); font-size:var(--font-size-sm); text-align:center; }
.cloud-auth-switch button { appearance:none; border:0; padding:0; background:transparent; color:var(--accent); font-family:var(--font-auth-ui); font-size:var(--font-size-sm); font-weight:600; cursor:pointer; }
/* "or continue with" divider + Google/Facebook secondary buttons. Sign in
   mode only — applySignMode() hides #cloudOAuthBlock while creating. */
.cloud-auth-divider { display:flex; align-items:center; gap:10px; margin:14px 0 12px; color:var(--text-soft); font-family:var(--font-auth-ui); font-size:var(--font-size-xs); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cloud-auth-divider::before, .cloud-auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
/* flex-wrap (not a width breakpoint) is what makes the two buttons stack:
   each button's default flex min-width is its own content size (no
   min-width:0 override here), so if both can't fit at their full label
   width the second one wraps to its own full-width row instead of clipping. */
.cloud-auth-oauth-row { display:flex; flex-wrap:wrap; gap:10px; }
.cloud-auth-oauth-btn { flex:1 1 200px; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; white-space:nowrap; min-height:48px; padding:10px 14px; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--card); color:var(--text); font-family:var(--font-auth-ui); font-size:var(--font-size-sm); font-weight:700; cursor:pointer; transition:background-color .15s, border-color .15s, box-shadow .15s; }
.cloud-auth-oauth-btn svg { flex-shrink:0; }
.cloud-auth-oauth-btn:hover { background:var(--surface-sunk); border-color:var(--text-soft); }
.cloud-auth-oauth-btn:focus-visible { outline:none; border-color:var(--accent); box-shadow:var(--shadow-focus); }
.cloud-auth-oauth-btn:disabled { opacity:.6; cursor:default; }
/* Illustration side — visual only, light teal panel using existing tokens. */
.cloud-auth-illustration { flex:1 1 46%; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:40px 36px; background:var(--accent-softer); border-left:1px solid var(--border); order:2; }
.cloud-auth-illustration-art { position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
/* Subtle decoration behind the SVG only — a soft teal glow, a faint grid
   evoking property lines, and a small green accent ring. Existing tokens
   only, low opacity, no second illustration or photo. */
.cloud-auth-illustration-art::before {
  content:""; position:absolute; inset:-14%; z-index:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 26px);
}
.cloud-auth-illustration-art::after {
  content:""; position:absolute; z-index:0; left:6%; bottom:2%; width:56px; height:56px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--sidebar-accent) 35%, transparent); pointer-events:none;
}
.cloud-auth-illustration-img { position:relative; z-index:1; width:100%; max-width:248px; height:auto; }
.cloud-auth-illustration-label { margin:0; font-family:var(--font-auth-ui); font-size:var(--font-size-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.cloud-auth-illustration-heading { margin:0; font-family:var(--font-auth-display); font-size:30px; line-height:1.2; color:var(--text); }
.cloud-auth-illustration-desc { margin:0; max-width:280px; font-family:var(--font-auth-ui); font-size:var(--font-size-md); color:var(--text-muted); }
/* Desktop/tablet only: Create account swaps illustration to the left and the
   form to the right; a brief fade + translate carries the swap. */
@media (min-width: 780px) {
  .cloud-auth-form-panel, .cloud-auth-illustration { transition: opacity 190ms ease-in-out, transform 190ms ease-in-out; }
  .cloud-auth-card.is-create .cloud-auth-form-panel { order:2; border-left:1px solid var(--border); }
  .cloud-auth-card.is-create .cloud-auth-illustration { order:1; border-left:0; }
  .cloud-auth-card.cloud-auth-switching .cloud-auth-form-panel,
  .cloud-auth-card.cloud-auth-switching .cloud-auth-illustration { opacity:0; transform:translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-auth-form-panel, .cloud-auth-illustration { transition:none !important; }
  .cloud-auth-card.cloud-auth-switching .cloud-auth-form-panel,
  .cloud-auth-card.cloud-auth-switching .cloud-auth-illustration { opacity:1 !important; transform:none !important; }
}
@media (max-width: 779px) {
  .cloud-auth { padding:16px; }
  .cloud-auth::before, .cloud-auth::after { display:none; }
  .cloud-auth-card { flex-direction:column; width:100%; }
  .cloud-auth-form-panel { padding:28px 24px; max-width:none; }
  .cloud-auth-illustration { border-left:0; border-top:1px solid var(--border); padding:24px 20px; gap:8px; }
  .cloud-auth-illustration-img { max-width:130px; }
  .cloud-auth-illustration-heading { font-size:var(--font-size-lg); }
}
/* Short viewports (small windows / short phones in landscape): no internal
   scrollbar anywhere in the card — instead the whole overlay scrolls like a
   normal page (.cloud-auth already has overflow-y:auto), anchored to the
   top so the full card, including the footer, is reachable by scrolling. */
@media (max-height: 700px) {
  .cloud-auth { padding:16px; align-items:flex-start; }
  .cloud-auth-form-panel { padding-top:24px; padding-bottom:18px; }
  .cloud-auth-illustration { padding-top:24px; padding-bottom:24px; gap:8px; }
  .cloud-auth-illustration-img { max-width:190px; }
}


/* ============================================================
   TODAY SCREEN + ONE-TAP FOLLOW-UP (Phase 2B)

   Mobile first. The row is a column on a phone, so the name and the
   buttons each get the full width and nothing is ever cut off or needs a
   sideways scroll; from 640px up it becomes a row with the buttons on the
   right. Tap targets are 44px, which is the smallest a thumb reliably
   hits.
   ============================================================ */
.today-section { margin-bottom: 16px; }

.today-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.today-count-late { background: var(--danger-soft); color: var(--danger); }

.today-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.today-row:last-child { border-bottom: 0; }

.today-row-main { min-width: 0; }

.today-row-name {
  display: block;
  font-weight: 600;
  /* A long name wraps rather than widening the row past the viewport. */
  overflow-wrap: anywhere;
}

.today-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.today-due { color: var(--muted); }
.today-due-late { color: var(--danger); font-weight: 600; }
.today-row-last { color: var(--muted); }

.today-more { padding: 12px 16px; }

/* ---- the one-tap bar ---- */
.fu-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fu-bar .fu-btn {
  /* Equal share of the row on a phone, natural width once there is space. */
  flex: 1 1 auto;
  min-width: 84px;
  min-height: 44px;
}
.fu-btn-log { font-weight: 600; }

/* ---- quick-log chips ---- */
.fu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.fu-chips .fu-chip { min-height: 44px; }
.fu-chip-on {
  background: var(--text);
  color: var(--surface, #fff);
  border-color: var(--text);
}
.fu-next-date { min-height: 44px; }

@media (min-width: 640px) {
  .today-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .today-row-main { flex: 1 1 auto; }
  .fu-bar { flex: 0 0 auto; flex-wrap: nowrap; }
  .fu-bar .fu-btn { flex: 0 0 auto; }
}


.tbl-sort {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.tbl-sort:hover { text-decoration: underline; }

.tbl-total-row { font-weight: 600; background: var(--border); }
.tbl-total-row td { border-top: 2px solid var(--text); }

/* ============================================================
   PHASE 3A — INSTALLABLE APP SHELL AND MOBILE NAVIGATION

   768px is the line between "a phone" and "something with room".
   Everything below is additive: above 768px the bottom bar is display:
   none and the rest of the app is exactly as it was.
   ============================================================ */

/* ---------- INSTALL BANNER (one line, once) ---------- */
.pwa-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--accent-soft);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
.pwa-banner-text { flex: 1 1 auto; }
.pwa-banner-close {
  border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 20px; line-height: 1;
  padding: 0 4px;
}
.pwa-banner-close:hover { color: var(--text); }

/* The install instructions for Safari, which has no install button. */
.pwa-steps { margin: 8px 0 0; padding-left: 20px; color: var(--text-muted); }
.pwa-steps li { margin-bottom: 6px; line-height: 1.5; }

/* ---------- OFFLINE ----------
   Above the bottom bar on a phone, so it never covers the tabs, and
   out of the way of the content either way. */
.offline-banner {
  position: fixed; left: 0; right: 0;
  bottom: 0;
  z-index: 180;
  padding: 9px 14px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  background: var(--warning, #B45309);
  color: #FFFFFF;
  font-size: var(--font-size-sm);
  text-align: center;
}
.offline-banner[hidden] { display: none; }

/* ---------- BOTTOM TAB BAR ---------- */
.mobile-tabs { display: none; }

@media (max-width: 767px) {
  .mobile-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 160;
    background: var(--card);
    border-top: 1px solid var(--border);
    /* The home indicator on an iPhone sits over the bottom ~34px. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 0 rgba(11, 31, 51, 0.04);
  }
  .mobile-tab {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    /* 56px of target, which is above the 44px everybody agrees on. */
    min-height: 56px;
    padding: 7px 2px;
    border: 0; background: none; cursor: pointer;
    color: var(--text-muted);
    font-family: inherit; font-size: 11px; font-weight: 500;
    letter-spacing: -0.005em;
  }
  .mobile-tab .mobile-tab-icon svg { width: 22px; height: 22px; display: block; }
  .mobile-tab.active { color: var(--accent-ink); }
  .mobile-tab:active { background: var(--bg-subtle); }
  .mobile-tab-primary .mobile-tab-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-top: -2px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
  }
  .mobile-tab-primary .mobile-tab-icon svg { width: 20px; height: 20px; }
  .mobile-tab-primary { color: var(--text-muted); }

  /* Room for the bar, so the last row of any list is reachable. */
  #main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* The Phase 2F floating "+" is the same action as the middle tab, and
     two of them in the same corner is one too many. It keeps its job
     between 768 and 900px, where there is no bottom bar. */
  .quick-add-fab { display: none; }

  /* The offline line sits above the bar rather than under it. */
  .offline-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 9px;
  }
}

/* An installed app has no browser chrome to scroll away, so the shell
   should fill the window exactly rather than leaving a gap. */
@media (display-mode: standalone) {
  .pwa-banner { display: none; }
}

/* ---------- PHASE 3B — NOTIFICATION SETTINGS ---------- */
.push-device-list { list-style: none; margin: 0; padding: 0; }
.push-device {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-inset);
}
.push-device:last-child { border-bottom: 0; }
.push-device-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }

.push-type-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.push-type { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.push-type input { margin-top: 3px; flex-shrink: 0; }
.push-type span { display: flex; flex-direction: column; gap: 1px; }


/* U1c: header-only actions, using the existing theme tokens. */
.header-actions { position: relative; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.header-search kbd { margin-left: 8px; color: var(--text-muted); font: inherit; font-size: var(--font-size-xs); }
.header-new { white-space: nowrap; }
.header-new[hidden] { display: none; }
#globalNewMenu { position: fixed; overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; }
#globalNewMenu[hidden] { display: none; }
#globalNewMenu button { display: block; width: 100%; padding: 10px 12px; text-align: left; background: none; color: var(--text); border: 0; border-radius: var(--radius-sm); }
#globalNewMenu button:hover, #globalNewMenu button:focus-visible { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
#globalSearchInput { width: 100%; margin-top: 8px; }
#globalSearchStatus { color: var(--text-muted); margin: 12px 0; }
#globalSearchResults { max-height: 50vh; overflow-y: auto; }
#globalSearchResults h3 { font-size: var(--font-size-sm); margin: 12px 0 4px; color: var(--text-muted); }
#globalSearchResults [role="option"] { padding: 10px; border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
#globalSearchResults [role="option"] span { display: block; color: var(--text-muted); font-size: var(--font-size-xs); }
#globalSearchResults [aria-selected="true"] { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 1150px) { .header-search kbd { display: none; } }
@media (max-width: 640px) {
  #topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .header-actions { max-width: 100%; }
  #topActions { max-width: 100%; flex-wrap: wrap; }
}