/* ============================================================
   WasteALot Service OS — Dark Brand 2026
   Background:    #08111E  (deep navy)
   Headline:      #F6F7F7  (near white)
   Subheadline:   #BDC3C4  (warm gray)
   Muted text:    #99A3A3  (cool gray)
   Button:        #284E2E  (forest green)
   Button hover:  #3B6240  (lighter forest)
   Accent border: #649074  (sage)
   ============================================================ */
:root {
  /* --- NEW brand tokens (single source of truth) --- */
  --bg:            #08111E;
  --bg-elevated:   #0F1A2A;     /* subtle card surface lift */
  --bg-deeper:     #050B14;     /* hero/modal backdrop */
  --surface:       #131F31;     /* card surface */
  --surface-2:     #1A2740;     /* hover / input surface */
  --headline:      #F6F7F7;
  --subhead:       #BDC3C4;
  --muted:         #99A3A3;
  --faint:         #6B7474;
  --btn:           #284E2E;
  --btn-hover:     #3B6240;
  --btn-text:      #F6F7F7;
  --accent:        #649074;
  --accent-soft:   rgba(100,144,116,0.18);
  --border:        rgba(100,144,116,0.22);
  --border-strong: #649074;
  --border-faint:  rgba(100,144,116,0.10);

  /* --- LEGACY token aliases (kept so the existing 9000+ lines of CSS/JS
         that reference these names keep working with the new palette) --- */
  --charcoal:      var(--headline);
  --charcoal-2:    var(--subhead);
  --charcoal-3:    var(--muted);
  --charcoal-deep: var(--bg-deeper);
  /* --sage / --sage-2 resolve to the LIGHTER accent (#649074) so any place
     that uses them as TEXT on the dark navy bg has enough contrast to read.
     Button backgrounds should reference --btn / --btn-hover explicitly. */
  --sage:          var(--accent);
  --sage-2:        #86B79D;
  --sage-soft:     var(--accent-soft);
  --sage-faint:    var(--bg-elevated);
  --cream:         var(--bg);
  --cream-2:       var(--bg-elevated);
  --cream-3:       var(--surface);
  --paper:         var(--bg);
  --line:          var(--border);
  --line-soft:     var(--border-faint);
  --ink:           var(--headline);
  --ink-soft:      var(--subhead);
  --ink-mute:      var(--muted);
  --ink-faint:     var(--faint);
  --danger:        #C56A60;
  --danger-soft:   rgba(197,106,96,0.16);
  --warn:          #D4A057;
  --warn-soft:     rgba(212,160,87,0.14);
  --ok:            var(--accent);
  --ok-soft:       var(--accent-soft);
  --gold:          #C8A45C;
  --gold-soft:     rgba(200,164,92,0.14);

  /* Heavier shadows for dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow:    0 2px 6px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.50), 0 6px 14px rgba(0,0,0,.35);
  --shadow-xl: 0 36px 88px rgba(0,0,0,.60), 0 14px 36px rgba(0,0,0,.45);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --radius-sm: 8px;
  --radius:    12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --ease:     cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms var(--ease);
  --t:      240ms var(--ease);
  --t-slow: 400ms var(--ease-out);

  --measure: 64ch;
}

/* ============ Logo ============ */
.brand-logo {
  display: inline-block;
  height: 36px;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
}
.brand-logo--sm { height: 32px; }
.brand-logo--md { height: 44px; }
.brand-logo--lg { height: 64px; }
.brand-logo--xl { height: 96px; }
/* Logo on dark: no chip background — the dark-mode wordmark variant
   (logo-on-dark.png / logo-light.png) already reads cleanly on navy. */
.brand-logo-chip {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  box-shadow: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  /* Bright paper background with a subtle sage halo at top, glossy/light feel */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(100,144,116,.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-deeper) 0%, var(--bg) 100%);
  color: var(--headline);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
h1, h2, h3, h4, .serif {
  font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.eyebrow {
  font-family: 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
}
.divider { height: 1px; background: var(--line-soft); margin: 24px 0; border: 0; }

@keyframes welcome-pop {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}
button, input, textarea, select { font-family: inherit; }
a { color: var(--sage); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--sage-2); }

/* ============ Login (Vanguard editorial) ============ */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal-deep);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(91,138,114,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(181,139,63,.10) 0%, transparent 50%),
    linear-gradient(180deg, var(--charcoal-deep) 0%, var(--charcoal) 100%);
  padding: 32px 20px;
  position: relative;
}
.login-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.login-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 44px 40px 36px;
  max-width: 460px; width: 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 40px 80px rgba(0,0,0,.45), 0 16px 32px rgba(0,0,0,.25);
  position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.05);
}
.login-logo {
  text-align: center;
  margin-bottom: 4px;
}
.login-tag {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .32em;
  color: var(--sage);
  text-transform: uppercase;
  font-weight: 700;
  margin: 12px 0 32px;
  position: relative;
  display: block;
}
.login-tag::before, .login-tag::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--sage);
  vertical-align: middle;
  margin: 0 14px;
  opacity: .5;
}
.login-card h1 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.login-card .lede {
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.55;
  font-size: 14.5px;
  max-width: 360px;
  margin-left: auto; margin-right: auto;
}
.field-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 14px 4px 6px;
}
.input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--charcoal);
  transition: border .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(91,138,114,.15); }
.btn {
  appearance: none;
  border: 1.5px solid var(--line);
  background: var(--surface);
  padding: 11px 18px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--charcoal);
  cursor: pointer;
  transition: border var(--t), background var(--t), transform var(--t-fast), box-shadow var(--t);
  box-shadow: var(--shadow-sm);
}
.btn:hover { border-color: var(--sage); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn:active { transform: scale(.98) translateY(0); }
.btn.primary {
  background: linear-gradient(180deg, #3B6240 0%, var(--sage-2) 50%, var(--sage) 100%);
  color: white; border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),                /* top gloss highlight */
    inset 0 -1px 0 rgba(0,0,0,.18),                      /* bottom inner shadow */
    0 1px 2px rgba(91,138,114,.45),
    0 8px 20px rgba(91,138,114,.32);                     /* sage glow */
  position: relative;
  text-shadow: 0 1px 1px rgba(19,26,36,.15);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #649074 0%, #3B6240 50%, var(--sage-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(91,138,114,.45),
    0 12px 28px rgba(91,138,114,.42);
}
.btn.danger { background: var(--surface-2); color: var(--danger); border-color: var(--danger-soft); }
.btn.dark {
  background: linear-gradient(180deg, var(--surface-2), var(--bg-deeper));
  color: white; border-color: transparent;
}
.btn.full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 8px; align-items: center; }
.error-msg {
  background: var(--danger-soft);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
}
.demo-credentials {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.demo-credentials b { color: var(--charcoal); }
.demo-credentials code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
}
.demo-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.demo-quick button {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  color: var(--headline);
}
.demo-quick button:hover { border-color: var(--accent); background: var(--surface-2); }

/* ============ App shell (Vanguard editorial) ============ */
.app-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.app-topbar {
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(8, 17, 30, 0.78);     /* match new --bg with translucency for blur */
  min-height: 76px;     /* taller topbar, gives logo room to breathe */
}
.app-topbar > a {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.app-topbar > a img {
  display: block;
}
/* Topbar wordmark — logo-mark.png is the dark navy wordmark with the
   sage bag on a cream background. The cream is baked into the image, so
   we add rounded corners + a soft shadow so it sits like an intentional
   chip on the dark topbar instead of a raw rectangle. */
.app-topbar img.brand-logo {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(100, 144, 116, 0.18);
}
@media (max-width: 540px) {
  .app-topbar img.brand-logo { height: 34px; border-radius: 8px; }
}
.app-topbar .brand {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--charcoal);
}
.app-topbar .brand .a { color: var(--sage); }
.app-topbar .role-pill,
.role-pill {
  background: #284E2E;
  color: #F6F7F7;
  border: 1px solid #649074;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.5;
}
.app-topbar .live-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: .08em;
  margin-left: auto;
}
.app-topbar .live-dot .d {
  width: 7px; height: 7px;
  background: var(--sage);
  border-radius: 50%;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.4); }
}
.app-topbar .live-dot.disconnected .d { background: var(--danger); animation: none; }
.app-topbar .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sage);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.app-topbar .logout {
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  padding: 6px 8px;
}
.app-topbar .logout:hover { color: var(--charcoal); }

/* User menu (avatar dropdown in topbar) */
.user-menu {
  position: relative;
  margin-left: auto;
}
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.user-menu-trigger:hover {
  background: var(--cream-2);
  border-color: var(--line);
}
.user-menu-trigger .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sage);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.user-menu-trigger .avatar.lg {
  width: 44px; height: 44px; font-size: 16px;
}
.user-menu-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.25;
  text-align: left;
}
.user-menu-meta .user-name {
  font-weight: 600;
  color: var(--charcoal);
  font-size: 14px;
}
.user-menu-meta .user-email {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 2px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-caret {
  font-size: 12px; color: var(--ink-mute); margin-left: 4px;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(31, 41, 55, .14), 0 4px 8px rgba(31, 41, 55, .06);
  padding: 8px;
  z-index: 100;
  animation: menu-pop .14s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.user-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cream-2);
  margin-bottom: 6px;
}
.user-menu-name {
  font-family: Georgia, serif;
  font-weight: 600;
  color: var(--charcoal);
  font-size: 14px;
  letter-spacing: -.01em;
}
.user-menu-email {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 1px;
}
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--charcoal);
  text-align: left;
  transition: background .12s ease;
}
.user-menu-item:hover { background: var(--cream-2); }
.user-menu-item .ic { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.user-menu-item.danger { color: var(--ink-soft); }
.user-menu-item.danger:hover { background: rgba(192, 57, 43, .06); color: var(--danger, #C56A60); }
.user-menu-divider {
  height: 1px; background: var(--line); margin: 6px 4px;
}

@media (max-width: 720px) {
  .user-menu-meta { display: none; }
  .user-menu-trigger { padding: 4px; }
  .user-menu-caret { display: none; }
}

.app-main {
  flex: 1;
  padding: 20px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.app-main > #sales-content,
.app-main > .view-content {
  flex: 1;
  min-height: 0;
}

/* ============ Cards & UI primitives, glossier ============ */
.card {
  /* Subtle top-to-bottom brightening so cards have a sheen */
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 12px;
  /* Layered shadow: tight inset highlight + bigger soft drop */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(19,26,36,.04),
    0 4px 14px rgba(19,26,36,.06);
  transition: box-shadow var(--t), transform var(--t);
}
.card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 3px rgba(19,26,36,.05),
    0 12px 32px rgba(19,26,36,.10);
  transform: translateY(-1px);
}
.card.dark {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg-deeper) 100%);
  color: white;
  border: 0;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.card.dark::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(91,138,114,.25) 0%, transparent 70%);
}
.card.dark h2, .card.dark h3 { color: white; }
.section-head {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin: 18px 4px 8px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sage);
}
.kpi.warn::before { background: var(--warn); }
.kpi.danger::before { background: var(--danger); }
.kpi .l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }
.kpi .v {
  font-family: Georgia, serif;
  font-size: 24px; font-weight: 700;
  margin-top: 4px; line-height: 1;
}
.kpi .d { font-size: 11.5px; color: var(--sage); margin-top: 4px; font-weight: 600; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 600px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.neutral { background: var(--cream-2); color: var(--ink-soft); }

.list-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.list-item:last-child { border-bottom: 0; }
.list-item.fresh {
  background: var(--sage-soft);
  border-radius: 10px;
  padding: 12px;
  border-bottom: 0;
  animation: slide-in .35s ease-out;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.list-item .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
}
.ic.ok { background: var(--ok-soft); color: var(--ok); }
.ic.warn { background: var(--warn-soft); color: var(--warn); }
.ic.danger { background: var(--danger-soft); color: var(--danger); }
.ic.neutral { background: var(--cream-2); color: var(--charcoal); }
.list-item .body { flex: 1; min-width: 0; }
.list-item .body .t1 { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.list-item .body .t2 { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }
.list-item .meta-time { font-size: 10.5px; color: var(--ink-mute); flex-shrink: 0; font-family: monospace; }
.list-item .meta-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ============ Resident hero / progress bar, glossier, brighter ============ */
.hero-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 30%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg-elevated) 55%, var(--bg-deeper) 100%);
  color: white;
  padding: 24px;
  border-radius: 18px;
  margin-bottom: 16px;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 24px rgba(19,26,36,.22),
    0 24px 56px rgba(19,26,36,.18);
}
.hero-card::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(127,176,156,.32) 0%, transparent 65%);
  filter: blur(6px);
}
/* Glossy specular sheen across the top of the hero */
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  pointer-events: none;
}
.hero-card .badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(100,144,116,.32);
  color: #DCEEE2;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  border: 1px solid rgba(134,183,157,.55);
  text-transform: uppercase;
}
.hero-card .badge .d {
  width: 7px; height: 7px;
  background: #86B79D;
  border-radius: 50%;
  animation: pulse 1.6s infinite;
}
.hero-card .label {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #BDC3C4;
  font-weight: 800;
  margin-top: 14px;
}
.hero-card .big {
  font-family: Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1;
}
.hero-card .big small { font-size: 18px; color: #BDC3C4; font-weight: 400; }
.hero-card .when { color: #D5DBDB; font-size: 13px; font-weight: 500; }
.hero-card .progress-row { display: flex; align-items: baseline; justify-content: space-between; }
.hero-card .progress-bar { height: 8px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.hero-card .progress-fill { height: 100%; background: linear-gradient(90deg, var(--sage), var(--sage-2)); border-radius: 99px; transition: width .6s ease-out; }
.hero-card .pct { color: #BFE0CB; font-weight: 800; font-size: 14px; }

/* ============ Forms ============ */
textarea.input { resize: vertical; min-height: 70px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border .12s, transform .12s, background .12s;
  font-family: inherit;
  text-align: left;
  /* Buttons get color: buttontext (often near-black) from the user agent.
     Force the brand cream so titles/subtitles read on dark surfaces. */
  color: var(--headline);
}
.choice:hover { border-color: var(--sage); background: var(--surface-2); }
.choice.selected { border-color: var(--accent); background: rgba(100,144,116,0.18); }
.choice .ic-emoji { font-size: 22px; margin-bottom: 6px; display: block; }
.choice .nm { font-weight: 700; font-size: 14px; color: var(--headline); }
.choice .sub { font-size: 11.5px; color: var(--subhead); margin-top: 3px; line-height: 1.35; }

.photo-uploader {
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border .12s, background .12s;
  color: var(--headline);
}
.photo-uploader:hover { border-color: var(--sage); background: var(--cream-2); }
.photo-uploader.has-photo { border-style: solid; border-color: var(--sage); background: var(--sage-soft); }
.photo-uploader .ic-cam {
  width: 50px; height: 50px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.photo-uploader .nm { font-weight: 700; color: var(--charcoal); font-size: 14px; }
.photo-uploader .sub { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* ============ Toasts ============ */
#toast-portal {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-deeper);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
  animation: toast-in .3s ease-out;
  max-width: 380px;
}
.toast.fade-out { animation: toast-out .3s ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(20px); }
}
.toast .check {
  width: 20px; height: 20px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: white; font-size: 12px;
}
.toast.warn .check { background: var(--warn); }
.toast.danger .check { background: var(--danger); }

/* ============ Empty / loading states ============ */
.empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  background: var(--cream-2);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(0, 0, 0, .08);
  margin-bottom: 12px;
}
.empty .icon {
  font-size: 32px;
  line-height: 1;
  opacity: .55;
  margin-bottom: 8px;
}
.empty .title {
  font-family: Georgia, serif;
  font-size: 19px;
  color: var(--charcoal);
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
}
.empty .desc {
  color: var(--ink-soft);
  font-size: 13.5px;
  max-width: 420px;
  line-height: 1.55;
  margin: 0;
}
.empty .actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Compact variant: in-table cells, modal lists, etc. */
.empty.compact {
  min-height: 0;
  padding: 24px 16px;
  background: transparent;
  border: 0;
  margin-bottom: 0;
}
/* Inside a table cell */
td.empty {
  background: transparent;
  border: 0;
  min-height: 200px;
  display: table-cell;
  vertical-align: middle;
  padding: 48px 16px;
}
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--cream-2);
  border-top-color: var(--sage);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 32px; text-align: center; }

/* ============ Service log table ============ */
.svc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.svc-table th {
  text-align: left;
  padding: 8px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.svc-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.svc-table tr:last-child td { border-bottom: 0; }

/* Building progress rows */
.bldg-row {
  display: grid;
  grid-template-columns: 32px 1fr 90px 80px;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 12.5px;
}
.bldg-row:last-child { border: 0; }
.bldg-row .b-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ok-soft);
  color: var(--ok);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-family: Georgia, serif;
}
.bldg-row .b-ic.live {
  background: var(--warn-soft);
  color: var(--warn);
  position: relative;
}
.bldg-row .b-ic.live::after {
  content: '';
  position: absolute; inset: -2px;
  border: 2px solid var(--warn);
  border-radius: 10px;
  opacity: 0;
  animation: ring 1.5s infinite;
}
@keyframes ring {
  0% { opacity: .8; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.2); }
}
.bldg-row .b-ic.pending { background: var(--cream-2); color: var(--ink-mute); }
.bldg-row .progress-mini {
  height: 6px;
  background: var(--cream-2);
  border-radius: 99px;
  overflow: hidden;
}
.bldg-row .progress-mini .f { height: 100%; background: var(--sage); border-radius: 99px; }

/* ============ Help / FAB buttons ============ */
.fab {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--sage);
  color: white;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(91,138,114,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 30;
  transition: transform .15s;
}
.fab:hover { transform: scale(1.05); }
.fab:active { transform: scale(.95); }

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,22,33,.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade-in .2s;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--cream);
  border-radius: 18px;
  max-width: 460px; width: 100%;
  padding: 26px;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  animation: pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.modal h2 { margin-bottom: 8px; font-size: 22px; }
.modal p { color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.modal .row { display: flex; gap: 8px; margin-top: 12px; }

/* ============ Responsive ============ */
@media (max-width: 700px) {
  .app-main { padding: 14px; }
  .login-card { padding: 24px; }
}

/* ============ Owner dashboard: portfolio table ============ */
.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.portfolio-table th, .portfolio-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.portfolio-table th {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  background: var(--cream);
}

/* Health bar */
.health {
  display: inline-flex; align-items: center; gap: 6px;
}
.health .bar { width: 50px; height: 5px; background: var(--cream-2); border-radius: 99px; overflow: hidden; }
.health .bar .f { height: 100%; background: var(--sage); border-radius: 99px; }
.health .bar.warn .f { background: var(--warn); }
.health .bar.danger .f { background: var(--danger); }

/* ============ CRM Pipeline ============ */
.app-main.wide { max-width: 1400px; }

/* Sales view needs the full window width so the 7-column pipeline does not
   get squashed into 920px. Applied only when the sales view is rendered. */
.app-main.sales-view {
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

.pipeline-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 800px) { .pipeline-summary { grid-template-columns: 1fr 1fr; } }

.pipeline-board {
  display: grid;
  /* All 7 columns have the same minimum, but populated columns can grow.
     Equal weighting on 1fr with a 200px minimum prevents the squish that
     happened when the deal-card title was nowrap + ellipsis. */
  grid-template-columns: repeat(7, minmax(200px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  min-height: calc(100vh - 290px);
  align-items: stretch;
}
/* Tablet / small laptop: allow horizontal scroll with sensibly sized columns */
@media (max-width: 980px) {
  .pipeline-board { grid-template-columns: repeat(7, 220px); width: max-content; }
}

.stage-col {
  background: var(--cream-2);
  border-radius: 12px;
  padding: 8px;
  min-width: 0; /* let grid columns shrink to fit */
  display: flex;
  flex-direction: column;
}
.stage-col .deal-card { flex-shrink: 0; }
.stage-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-mute);
  font-size: 11px;
  padding: 20px 8px;
  border: 1.5px dashed transparent;
  border-radius: 10px;
  margin-top: 4px;
  min-height: 120px;
  transition: border-color .15s ease, color .15s ease;
}
.stage-col:hover .stage-empty {
  border-color: rgba(0, 0, 0, .06);
}
.stage-empty .icon {
  font-size: 18px;
  opacity: .35;
  margin-bottom: 6px;
}
.stage-empty .label {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .65;
}
.stage-col h3 {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 6px;
  font-family: 'Segoe UI', sans-serif;
  display: flex; justify-content: space-between; align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-col h3 .count {
  background: var(--surface);
  color: var(--charcoal);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
}
.stage-col.won h3 { color: var(--sage); }
.stage-col.won { background: var(--sage-soft); }
.stage-col.lost h3 { color: var(--danger); }
.stage-col.lost { background: var(--danger-soft); }
.stage-mrr {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: monospace;
  margin-bottom: 8px;
  padding: 0 4px;
}

.deal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border .12s, transform .12s, box-shadow .12s;
  min-width: 0;
  overflow: hidden;
}
/* Allow names to wrap to 2 lines instead of truncating with ellipsis.
   Subtitle (units, city) stays single-line because it is short. */
.deal-card .dn {
  font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--charcoal);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deal-card .ds {
  font-size: 11px; color: var(--ink-mute); margin-top: 3px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deal-card:hover { border-color: var(--sage); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(31,41,55,.08); }
.deal-card .dr {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--cream-2);
  font-size: 11px;
}
.deal-card .mrr { font-family: Georgia, serif; font-weight: 700; color: var(--charcoal); }
.deal-card .meta { color: var(--ink-mute); }
.deal-card .tier-pill {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px;
}
.tier-pill.platinum { background: var(--surface-2); color: #BFE0CB; border: 1px solid #649074; }
.tier-pill.gold { background: var(--gold); color: white; }
.tier-pill.bronze { background: #C8A45C; color: white; }

/* Deal detail modal */
.deal-modal-body { max-height: 75vh; overflow-y: auto; padding-right: 6px; }
.timeline-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-item:last-child { border: 0; }
.timeline-item .ti-ic {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2);
  font-size: 14px;
}
.timeline-item.call .ti-ic { background: rgba(100,144,116,0.16); color: #649074; }
.timeline-item.email .ti-ic { background: var(--sage-soft); color: var(--sage); }
.timeline-item.meeting .ti-ic { background: rgba(200,164,92,0.12); color: var(--gold); }
.timeline-item.note .ti-ic { background: var(--cream-2); color: var(--charcoal); }
.timeline-item.demo .ti-ic { background: var(--warn-soft); color: var(--warn); }
.timeline-item.proposal_sent .ti-ic { background: var(--ok-soft); color: var(--ok); }
.timeline-item .ti-body { flex: 1; min-width: 0; }
.timeline-item .ti-subject { font-weight: 600; font-size: 13.5px; color: var(--charcoal); }
.timeline-item .ti-meta { font-size: 11px; color: var(--ink-mute); margin: 2px 0; }
.timeline-item .ti-text { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }

.task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.task-row:last-child { border: 0; }
.task-row.done { opacity: .55; }
.task-row.done .task-title { text-decoration: line-through; }
.task-row .task-check {
  width: 22px; height: 22px;
  border: 2px solid var(--line);
  border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  transition: background .12s, border .12s;
}
.task-row .task-check:hover { border-color: var(--sage); }
.task-row.done .task-check { background: var(--sage); border-color: var(--sage); color: white; }
.task-row .task-title { font-size: 13.5px; font-weight: 600; flex: 1; }
.task-row .task-due { font-size: 11px; color: var(--ink-mute); flex-shrink: 0; }
.task-row .task-due.overdue { color: var(--danger); font-weight: 700; }

.tabs-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent; border: 0;
  padding: 10px 14px;
  cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: -.005em;
  transition: color .15s ease;
}
.tab-btn:hover { color: var(--charcoal); }
.tab-btn.active { color: var(--charcoal); border-bottom-color: var(--sage); }

.contact-card {
  background: var(--cream-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12.5px;
  display: flex; gap: 10px; align-items: center;
}
.contact-card .ca {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sage);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.contact-card .cn { font-weight: 700; }
.contact-card .ct { font-size: 11px; color: var(--ink-mute); }

/* ============================================================ */
/* TIER 2 UI POLISH, SVG icons, skeletons, property avatars   */
/* ============================================================ */

/* SVG icon containers replacing the old emoji slots */
.choice .ic-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--sage-faint);
  color: var(--sage);
  margin-bottom: 10px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.choice:hover .ic-svg {
  background: var(--sage);
  color: white;
  transform: translateY(-1px);
}
.choice.selected .ic-svg {
  background: var(--sage);
  color: white;
}

/* User menu icons, make the SVG sit nicely in the .ic slot */
.user-menu-item .ic svg {
  display: block;
  color: var(--ink-soft);
}
.user-menu-item:hover .ic svg { color: var(--charcoal); }
.user-menu-item.danger .ic svg { color: var(--ink-soft); }
.user-menu-item.danger:hover .ic svg { color: var(--danger); }

/* Toast icon, make the SVG fit the existing .check container */
.toast .check svg {
  display: block;
  color: white;
}

/* LIVE-dot label text */
.live-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.live-dot.disconnected .live-label { color: var(--danger); }

/* Muted hero badge for "no service tonight" state */
.hero-card .badge.muted {
  background: var(--cream-3);
  color: var(--ink-mute);
}
.hero-card .badge.muted .d { background: var(--ink-mute); animation: none; }

/* ============================================================ */
/* Skeleton loaders, gray-pulse placeholders for loading states */
/* ============================================================ */
@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.skel {
  background: linear-gradient(90deg, var(--cream-2) 0%, var(--cream-3) 50%, var(--cream-2) 100%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skel-line { height: 12px; margin: 4px 0; }
.skel-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
}
.skel-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.skel-row:last-child { border-bottom: 0; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }

/* ============================================================ */
/* Property avatar, gradient circle with initials              */
/* ============================================================ */
.prop-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sage-2), var(--sage));
  color: white;
  font-weight: 700;
  font-family: Georgia, serif;
  letter-spacing: 0.02em;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(31,41,55,.12);
}
.prop-avatar.tier-platinum {
  background: linear-gradient(135deg, #99A3A3, var(--charcoal));
}
.prop-avatar.tier-gold {
  background: linear-gradient(135deg, var(--gold), #C8A45C);
}
.prop-avatar.tier-bronze {
  background: linear-gradient(135deg, var(--sage-2), var(--sage));
}

/* Improve portfolio-table cell with avatar + name layout */
.portfolio-table .prop-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================ */
/* TIER 3, Topbar context (Property · ROLE) + nav polish      */
/* ============================================================ */
.topbar-context {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.topbar-property {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  background: var(--cream-2);
  border-radius: 999px;
  min-width: 0;
  max-width: 360px;
}
.topbar-property-meta {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.topbar-property-name {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--charcoal);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.topbar-property-sub {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: #BFE0CB;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Tighter spacing, LIVE dot sits right after property chip (left-group),
   user menu sits at the absolute right (right-group). Eliminates the
   awkward floating LIVE indicator in the middle of wide screens. */
.app-topbar .live-dot {
  margin-left: 4px;
}
.user-menu {
  margin-left: auto;
}

/* Mobile, collapse non-essentials below 540px */
@media (max-width: 540px) {
  .app-topbar {
    padding: 12px 16px;
    gap: 10px;
    min-height: 64px;
  }
  .app-topbar img.brand-logo { height: 34px; }
  .topbar-property { max-width: 200px; padding: 4px 12px 4px 4px; gap: 10px; }
  .topbar-property-name { font-size: 14px; }
  .topbar-property-sub { display: none; }
  .live-dot .live-label { display: none; }
  /* On mobile, show only the avatar (no name/email) to save space */
  .user-menu-meta { display: none; }
  .user-menu-caret { display: none; }
  .user-menu-trigger { padding: 2px; }
  .user-menu-trigger .avatar { width: 36px; height: 36px; font-size: 13px; }
}

/* Tablet / narrower desktop, keep email visible but truncate harder */
@media (min-width: 541px) and (max-width: 900px) {
  .user-menu-meta .user-email { max-width: 140px; }
  .topbar-property { max-width: 280px; }
}

/* ============================================================ */
/* Resident unit chip, prominent personal-identity element     */
/* shown on the hero card so residents see "YOUR UNIT 75"       */
/* the moment they log in.                                       */
/* ============================================================ */
/* Unit chip, single-line "Unit 54" with glossy sage gradient + glow */
.unit-chip {
  display: inline-block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 22px;
  color: white;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #3B6240 0%, var(--sage) 100%);
  padding: 12px 22px;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),         /* top highlight (the gloss) */
    inset 0 -1px 0 rgba(0,0,0,.18),               /* bottom subtle inner shadow */
    0 1px 2px rgba(91,138,114,.5),
    0 10px 28px rgba(91,138,114,.42);             /* sage glow */
  position: relative;
  text-shadow: 0 1px 1px rgba(19,26,36,.18);
  align-self: flex-start;
  white-space: nowrap;
}
.unit-chip::before {
  /* Thin specular highlight along the top edge */
  content: '';
  position: absolute; top: 1px; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  border-radius: 2px;
  pointer-events: none;
}

@media (max-width: 540px) {
  .unit-chip { font-size: 18px; padding: 10px 16px; }
}

/* ── Interactive affordances: anything clickable looks & feels clickable ── */
.tappable {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.tappable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.tappable:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
/* Make list rows that carry a click handler show the pointer + a hover tint */
.list-item.tappable:hover { background: rgba(255, 255, 255, .04); }
.tappable:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }