*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --tend-green:        #2d6a4f;
  --tend-green-dark:   #1f4e3a;
  --tend-green-light:  #e8f1ec;
  --tend-amber:        #b87333;
  --tend-amber-light:  #f5e6d3;
  --tend-red:          #b23b3b;
  --tend-red-light:    #f5dada;
  --tend-text:         #1a2e25;
  --tend-text-muted:   #6b7a72;
  --tend-border:       #e5e9e6;
  --tend-bg:           #fafbfa;
  --tend-card-bg:      #ffffff;

  /* Legacy aliases used by auth / onboarding */
  --color-bg:            var(--tend-bg);
  --color-surface:       var(--tend-card-bg);
  --color-border:        var(--tend-border);
  --color-text:          var(--tend-text);
  --color-text-muted:    var(--tend-text-muted);
  --color-primary:       var(--tend-green);
  --color-primary-hover: var(--tend-green-dark);
  --color-danger:        var(--tend-red);
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tend-text);
  background: var(--tend-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); text-decoration: none; }
.btn--primary:disabled,
.btn--primary:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--color-primary); }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--ghost:hover { background: var(--color-border); text-decoration: none; }
.btn--full { width: 100%; }
.btn--sm { padding: 6px 14px; font-size: 14px; }

/* Landing */
.landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing__hero {
  text-align: center;
  max-width: 560px;
  padding: 40px 24px;
}
.landing__hero h1 { font-size: 48px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.tagline { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.sub { color: var(--color-text-muted); margin-bottom: 32px; }
.cta-group { display: flex; gap: 12px; justify-content: center; }

/* Auth */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  width: 100%;
  max-width: 420px;
}
.auth__logo { display: block; font-size: 22px; font-weight: 700; color: var(--color-primary); margin-bottom: 24px; }
.auth__card h1 { font-size: 22px; margin-bottom: 24px; }
.auth__card label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.auth__card input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.auth__card input:focus { border-color: var(--color-primary); }
.auth__card .btn { margin-top: 8px; }
.auth__switch { margin-top: 20px; font-size: 14px; color: var(--color-text-muted); text-align: center; }
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.alert--error { background: #fff5f5; border: 1px solid #feb2b2; color: var(--color-danger); }
.alert--success { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }

/* Onboarding (legacy placeholder — kept for compatibility) */
.onboarding { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.onboarding__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  width: 100%;
  max-width: 460px;
}
.hint { font-size: 13px; color: var(--color-text-muted); margin-bottom: 16px; }

/* ── Onboarding flow ─────────────────────────────────────────────────────── */
.wordmark { display: inline-block; font-size: 22px; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.wordmark:hover { text-decoration: none; }

.ob-flow {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 64px;
  background: var(--color-bg);
}
.ob-flow__header {
  width: 100%;
  max-width: 520px;
  margin-bottom: 40px;
}
.ob-flow__body {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sections */
.ob-section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out;
  pointer-events: none;
  margin-bottom: 48px;
}
.ob-section[hidden] { display: none !important; }
.ob-section--visible { opacity: 1; transform: none; pointer-events: auto; }
.ob-section--centered { display: flex; flex-direction: column; align-items: center; text-align: center; }

.ob-section__heading { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.ob-subheading { font-size: 15px; color: var(--color-text-muted); margin-top: -16px; margin-bottom: 28px; }

/* Labels */
.ob-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }

/* Input row */
.ob-field { margin-bottom: 0; }
.ob-input-row { display: flex; gap: 8px; align-items: flex-start; }
.ob-input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
  background: var(--color-surface);
}
.ob-input:focus { border-color: var(--color-primary); }
.ob-input:disabled { background: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; }
.ob-input--number { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.04em; text-transform: uppercase; max-width: 160px; }

/* Company card */
.ob-company-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.ob-company-card__name { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.ob-company-card__detail { font-size: 14px; color: var(--color-text-muted); margin-bottom: 12px; }
.ob-company-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--color-text-muted); align-items: center; }

.ob-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  text-transform: capitalize;
}
.ob-badge--active { background: #f0fff4; border-color: #9ae6b4; color: #276749; }

.ob-button-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 400px) { .ob-button-row { flex-direction: row; } }

/* Questions */
.ob-question {
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}
.ob-question:last-of-type { border-bottom: 1px solid var(--color-border); }
.ob-question__label { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

.ob-radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.ob-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  transition: border-color 0.15s, background 0.15s;
  background: var(--color-surface);
  user-select: none;
}
.ob-radio:has(input:checked) { border-color: var(--color-primary); background: #f0fff4; }
.ob-radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.ob-conditional { margin-top: 16px; }
.ob-conditional[hidden] { display: none; }

.ob-select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 8px;
}
.ob-select:focus { border-color: var(--color-primary); }

.ob-year-end-display {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 8px;
}

/* Setup button */
.ob-setup-btn {
  margin-top: 32px;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(45,106,79,0.25);
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.ob-setup-btn:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
.ob-setup-btn:not(:disabled):hover { box-shadow: 0 4px 16px rgba(45,106,79,0.3); }

/* Setup checklist (Section 4) */
@keyframes ob-spin { to { transform: rotate(360deg); } }
@keyframes ob-tick-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes ob-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-allset-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.ob-setup-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 36px;
  color: var(--color-text);
}

.ob-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.ob-step {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ob-step__indicator {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* all inner elements off by default */
.ob-step__dot, .ob-step__spinner, .ob-step__tick, .ob-step__exclaim { display: none; }

.ob-step__label {
  font-size: 15px;
  transition: color 0.2s ease;
}

/* pending */
.ob-step--pending .ob-step__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.ob-step--pending .ob-step__label { color: var(--color-text-muted); }

/* active */
.ob-step--active .ob-step__spinner {
  display: block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ob-spin 0.75s linear infinite;
}
.ob-step--active .ob-step__label { color: var(--color-text); font-weight: 500; }

/* complete */
.ob-step--complete .ob-step__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #276749;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  animation: ob-tick-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ob-step--complete .ob-step__label { color: var(--color-text-muted); }

/* error */
.ob-step--error .ob-step__exclaim {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ob-step--error .ob-step__label { color: var(--color-danger); }

/* "All set!" message */
.ob-allset {
  margin-top: 32px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-primary);
  animation: ob-allset-in 300ms ease-out forwards;
}

/* Inline error block */
.ob-setup-error {
  margin-top: 24px;
  text-align: center;
}
.ob-setup-error__msg {
  font-size: 14px;
  color: var(--color-danger);
  margin-bottom: 12px;
}

/* ── Onboarding: password toggle ─────────────────────────────────────────── */
.ob-pw-wrap { position: relative; }
.ob-pw-wrap .ob-input { padding-right: 68px; width: 100%; box-sizing: border-box; }
.ob-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px 6px;
}
.ob-pw-toggle:hover { opacity: 0.7; }

/* ── Onboarding: terms checkbox ──────────────────────────────────────────── */
.ob-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin: 20px 0 24px;
  cursor: pointer;
  color: var(--color-text);
}
.ob-terms input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.ob-terms a { color: var(--color-primary); text-decoration: underline; }
.ob-terms a:hover { opacity: 0.8; }
.ob-inline-link { color: var(--tend-green); text-decoration: underline; font-weight: 600; }
.ob-inline-link:hover { color: var(--tend-green-dark); text-decoration: underline; }
.ob-field-error { color: var(--color-danger); font-size: 13px; margin-top: 4px; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */

/* Top bar (switcher-only — wordmark/logout now live in side nav) */
.dash-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  background: var(--tend-card-bg);
  border-bottom: 1px solid var(--tend-border);
  transition: box-shadow 0.25s ease;
}
.dash-topbar--scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
/* Wordmark shown only on mobile (<768px) */
.dash-topbar__wordmark { display: none; font-size: 18px; font-weight: 600; color: var(--tend-green); letter-spacing: -0.02em; text-decoration: none; }
/* Hamburger shown only on mobile */
.dash-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tend-text-muted);
  padding: 4px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.dash-hamburger:hover { color: var(--tend-text); background: var(--tend-bg); }

/* Main layout */
.dash-main--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  gap: 12px;
}

.dash-coming-soon__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tend-text);
  letter-spacing: -0.01em;
}

.dash-coming-soon__body {
  font-size: 15px;
  color: var(--tend-text-muted);
  max-width: 400px;
  line-height: 1.6;
}

.dash-main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Company switcher */
.dash-switcher-wrap { position: relative; display: inline-block; }
.dash-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--tend-card-bg);
  border: 1.5px solid var(--tend-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dash-switcher:hover:not(:disabled) { border-color: var(--tend-green); box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.dash-switcher:disabled { cursor: default; opacity: 0.7; }
.dash-switcher__caret { font-size: 10px; color: var(--tend-text-muted); transition: transform 0.15s; }

.dash-switcher-dropdown {
  position: fixed;
  /* top/left/min-width set by JS on open */
  min-width: 240px;
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 210;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.dash-switcher-dropdown:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; }

.dash-switcher-list { list-style: none; padding: 6px 0; margin: 0; max-height: 220px; overflow-y: auto; }
.dash-switcher-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--tend-text);
  cursor: pointer;
  transition: background 0.1s;
}
.dash-switcher-item:hover { background: var(--tend-bg); }
.dash-switcher-item--active { font-weight: 600; color: var(--tend-green); }
.dash-switcher-add {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tend-green);
  border-top: 1px solid var(--tend-border);
  text-decoration: none;
  transition: background 0.1s;
}
.dash-switcher-add:hover { background: var(--tend-green-light); text-decoration: none; }

/* Summary card */
.dash-summary {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px;
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease;
}
.dash-summary:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); }
.dash-summary--red   { border-color: #deb8b8; background: #fdf7f7; }
.dash-summary--amber { border-color: #d9b98a; background: #fdf8f2; }
.dash-summary--green { border-color: #b0cebb; background: #f6faf7; }
.dash-summary__rag { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; margin-top: 6px; }
.dash-rag--red   { background: var(--tend-red); }
.dash-rag--amber { background: var(--tend-amber); }
.dash-rag--green { background: var(--tend-green); }
.dash-summary__headline {
  font-size: 22px;
  font-weight: 600;
  color: var(--tend-text);
  margin-bottom: 6px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.dash-summary--red   .dash-summary__headline { color: var(--tend-red); }
.dash-summary--amber .dash-summary__headline { color: var(--tend-amber); }
.dash-summary--green .dash-summary__headline { color: var(--tend-green); }
.dash-summary__tracking { font-size: 15px; color: var(--tend-text-muted); }

/* Obligations header */
.dash-obligations-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-obligations-title { font-size: 18px; font-weight: 600; color: var(--tend-text); letter-spacing: -0.01em; }

/* View toggle — segmented control */
.dash-view-toggle {
  display: inline-flex;
  background: var(--tend-bg);
  border: 1px solid var(--tend-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.dash-view-btn {
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--tend-text-muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.dash-view-btn--active {
  background: var(--tend-card-bg);
  color: var(--tend-green);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Obligation groups */
.dash-group { margin-bottom: 48px; }
.dash-group:last-child { margin-bottom: 0; }
.dash-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tend-text-muted);
  border-bottom: 1px solid var(--tend-border);
}
.dash-group--overdue .dash-group__header { color: var(--tend-red); border-color: #deb8b8; }
.dash-group--overdue .dash-group__header::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tend-red);
  flex-shrink: 0;
}
.dash-group__count {
  font-size: 13px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tend-bg);
  border: 1px solid var(--tend-border);
  color: var(--tend-text-muted);
  font-variant-numeric: tabular-nums;
}
.dash-group--overdue .dash-group__count { background: var(--tend-red-light); border-color: #deb8b8; color: var(--tend-red); }

/* Beyond 90 days */
details.dash-beyond { margin-top: 16px; }
details.dash-beyond > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tend-text-muted);
  border-bottom: 1px solid var(--tend-border);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.dash-beyond > summary::-webkit-details-marker { display: none; }
details.dash-beyond > summary::after { content: '▾'; font-size: 10px; transition: transform 0.2s; }
details.dash-beyond[open] > summary::after { transform: rotate(180deg); }

/* Obligation rows */
.dash-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tend-border);
  position: relative;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease,
              border-radius 0.15s ease, border-color 0.15s ease;
}
.dash-row:last-child { border-bottom-color: transparent; }
.dash-row:hover {
  background: var(--tend-card-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transform: translateY(-1px);
  border-radius: 10px;
  border-bottom-color: transparent;
  z-index: 1;
}
.dash-row:hover + .dash-row { border-top-color: transparent; }

.dash-row__rag { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.dash-row__body { flex: 1; min-width: 0; }
.dash-row__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tend-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.dash-row__date { font-size: 13px; color: var(--tend-text-muted); font-variant-numeric: tabular-nums; }
.dash-row__date-rel { color: var(--tend-green); font-weight: 500; }
.dash-row__date-sep { margin: 0 5px; color: var(--tend-border); }

/* Category pills */
.dash-pill {
  flex-shrink: 0;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}
.dash-row:hover .dash-pill { opacity: 0; pointer-events: none; }
.dash-pill--blue   { background: #ebf4ff; color: #2b6cb0; border-color: #bee3f8; }
.dash-pill--sky    { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.dash-pill--purple { background: #faf5ff; color: #6b46c1; border-color: #e9d8fd; }
.dash-pill--amber  { background: var(--tend-amber-light); color: var(--tend-amber); border-color: #d9b98a; }
.dash-pill--orange { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.dash-pill--grey   { background: var(--tend-bg); color: #4a5568; border-color: var(--tend-border); }
.dash-pill--green  { background: var(--tend-green-light); color: var(--tend-green); border-color: #b0cebb; }
.dash-pill--teal   { background: #e6fffa; color: #285e61; border-color: #81e6d9; }
.dash-pill--indigo { background: #ebf4ff; color: #434190; border-color: #c3dafe; }
.dash-pill--pink   { background: #fff5f7; color: #97266d; border-color: #fed7e2; }

/* Row action buttons (revealed on hover) */
.dash-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: absolute;
  right: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.dash-row:hover .dash-row__actions,
.dash-row--open .dash-row__actions { opacity: 1; pointer-events: auto; }

.btn--action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 28px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid;
  background: none;
  white-space: nowrap;
  transition: background 0.12s, transform 0.05s;
}
.btn--action:active { transform: scale(0.97); }
.btn--action-complete { border-color: var(--tend-green); color: var(--tend-green); }
.btn--action-complete:hover { background: var(--tend-green-light); }
.btn--action-snooze { border-color: var(--tend-border); color: var(--tend-text-muted); }
.btn--action-snooze:hover { background: var(--tend-bg); }
.btn--action-dismiss { border-color: #deb8b8; color: var(--tend-red); }
.btn--action-dismiss:hover { background: var(--tend-red-light); }
.btn--action-edit { border-color: var(--tend-border); color: var(--tend-text-muted); }
.btn--action-edit:hover { background: var(--tend-bg); }

/* Row animations */
@keyframes dash-row-out {
  0%   { opacity: 1; transform: translateX(0);   max-height: 80px; }
  50%  { opacity: 0; transform: translateX(20px); }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border: none; }
}
.dash-row--removing { overflow: hidden; pointer-events: none; animation: dash-row-out 0.25s ease forwards; }

@keyframes dash-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dash-row--entering { animation: dash-row-in 0.2s ease forwards; }

/* Skeleton loading */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position: 600px 0; }
}
.dash-skeleton-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tend-border);
}
.dash-skeleton-row:last-child { border-bottom: none; }
.dash-skel {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--tend-border) 25%, #edf0ed 50%, var(--tend-border) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
}
.dash-skel--dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-skel--body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dash-skel--title { height: 14px; width: 58%; }
.dash-skel--date  { height: 11px; width: 36%; }
.dash-skel--pill  { height: 22px; width: 72px; border-radius: 999px; flex-shrink: 0; margin-left: auto; }

/* Setup card */
.dash-setup-card {
  background: #fdf6e3;
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-left: 4px solid #d4a017;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.dash-setup-card__heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--tend-text);
  margin: 0 0 4px 0;
}
.dash-setup-card__subtitle {
  font-size: 13px;
  color: var(--tend-text-muted);
  margin: 0 0 12px 0;
}
.dash-setup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--tend-text);
  transition: background 120ms ease;
}
.dash-setup-item:hover { background: rgba(212, 160, 23, 0.08); text-decoration: none; }
.dash-setup-item--done { opacity: 0.4; pointer-events: none; }
.dash-setup-item__icon { font-size: 13px; color: var(--tend-text-muted); width: 18px; text-align: center; flex-shrink: 0; }
.dash-setup-item--done .dash-setup-item__icon { color: var(--tend-green); }
.dash-setup-item__label { flex: 1; font-size: 14px; }
.dash-setup-item__arrow { font-size: 14px; color: var(--tend-text-muted); }
.dash-setup-card--complete { background: #e8f5e9; border-left: 4px solid #2d6a4f; border-color: rgba(45,106,79,0.25); }
.dash-setup-card--complete .dash-setup-card__heading { color: #2d6a4f; }
.dash-setup-card__tour-link { color: var(--tend-green); text-decoration: underline; cursor: pointer; }
.dash-setup-card__tour-link:hover { text-decoration: none; }

/* ── Quick Start modal ────────────────────────────────────────────────────── */
.qs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.qs-backdrop[hidden] { display: none; }
.qs-modal {
  background: var(--tend-card-bg);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.qs-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--tend-border);
  flex-shrink: 0;
}
.qs-modal__title { font-size: 18px; font-weight: 600; color: var(--tend-text); margin: 0; letter-spacing: -0.01em; }
.qs-modal__close { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--tend-text-muted); line-height: 1; padding: 0 4px; }
.qs-modal__close:hover { color: var(--tend-text); }
.qs-modal__body { padding: 20px 24px; overflow-y: auto; }
.qs-modal__intro { font-size: 14px; color: var(--tend-text-muted); margin-bottom: 20px; line-height: 1.55; }
.qs-module { padding: 14px 0; border-top: 1px solid var(--tend-border); }
.qs-module:first-of-type { border-top: none; padding-top: 0; }
.qs-module__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  margin-bottom: 6px;
}
.qs-module__icon { color: var(--tend-text-muted); flex-shrink: 0; display: flex; }
.qs-module__body { font-size: 13px; color: var(--tend-text-muted); line-height: 1.6; margin: 0; padding-left: 26px; }

/* Empty / error states */
.dash-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px;
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 14px;
  gap: 10px;
}
.dash-empty-card svg { color: var(--tend-text-muted); opacity: 0.35; margin-bottom: 4px; }
.dash-empty-card__title { font-size: 16px; font-weight: 600; color: var(--tend-text); }
.dash-empty-card__title--hero { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.dash-empty-card__sub   { font-size: 14px; color: var(--tend-text-muted); max-width: 400px; }
.dash-empty-card a { font-size: 14px; color: var(--tend-green); font-weight: 500; margin-top: 4px; }
.renewals-area--empty { display: flex; align-items: center; justify-content: center; min-height: 55vh; }
/* Legacy */
.dash-empty { padding: 48px 24px; text-align: center; color: var(--tend-text-muted); font-size: 15px; }
.dash-empty a { color: var(--tend-green); }

/* Archive sections (Completed + Dismissed) */
details.dash-completed,
details.dash-dismissed {
  border-top: 1px solid var(--tend-border);
}
details.dash-completed > summary,
details.dash-dismissed > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tend-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s;
}
details.dash-completed > summary:hover,
details.dash-dismissed > summary:hover { color: var(--tend-text); }
details.dash-completed > summary::-webkit-details-marker,
details.dash-dismissed > summary::-webkit-details-marker { display: none; }
details.dash-completed > summary::after,
details.dash-dismissed > summary::after { content: '▾'; font-size: 22px; line-height: 1; margin-left: auto; transition: transform 0.25s ease; }
details.dash-completed[open] > summary::after,
details.dash-dismissed[open] > summary::after { transform: rotate(180deg); }

.dash-completed-row,
.dash-dismissed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--tend-border);
}
.dash-completed-row:last-child,
.dash-dismissed-row:last-child { border-bottom: none; }
.dash-completed-row__tick {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tend-green);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 700;
}
.dash-dismissed-row__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tend-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--tend-text-muted); font-size: 9px;
}
.dash-completed-row__body,
.dash-dismissed-row__body { flex: 1; min-width: 0; }
.dash-completed-row__title,
.dash-dismissed-row__title { font-size: 14px; color: var(--tend-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-completed-row__date,
.dash-dismissed-row__date { font-size: 12px; color: var(--tend-border); margin-top: 1px; }

/* Dismiss modal */
@keyframes modal-in        { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes modal-out       { from { opacity: 1; transform: scale(1); }    to { opacity: 0; transform: scale(0.95); } }
@keyframes backdrop-in     { from { opacity: 0; }                         to { opacity: 1; } }
@keyframes backdrop-out    { from { opacity: 1; }                         to { opacity: 0; } }

.dash-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: backdrop-in 0.2s ease forwards;
}
.dash-modal-backdrop[hidden] { display: none; }
.dash-modal-backdrop--closing { animation: backdrop-out 0.15s ease forwards; }
.dash-modal-backdrop--closing .dash-modal { animation: modal-out 0.15s ease forwards; }

.dash-modal {
  background: var(--tend-card-bg);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);
  padding: 28px 32px;
  max-width: 480px;
  width: 100%;
  animation: modal-in 0.2s ease forwards;
}
.dash-modal__title { font-size: 20px; font-weight: 600; color: var(--tend-text); letter-spacing: -0.01em; margin-bottom: 12px; }
.dash-modal__body  { font-size: 15px; color: var(--tend-text-muted); line-height: 1.6; margin-bottom: 28px; }
.dash-modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.dash-modal-backdrop--elevated { z-index: 800; }
.btn--danger-ghost { border: 1.5px solid #deb8b8; color: var(--tend-red); background: none; transition: background 0.12s; }
.btn--danger-ghost:hover { background: var(--tend-red-light); text-decoration: none; }
.btn--danger-ghost:disabled,
.btn--danger-ghost:disabled:hover { opacity: 0.4; cursor: not-allowed; background: none; }

.sh-remove-hint {
  font-size: 12px;
  color: var(--tend-text-muted);
  line-height: 1.5;
  margin: 0;
  padding: 0 20px 14px;
  background: var(--tend-bg);
}
/* Delete-account confirm button: fills red when enabled, greyed when disabled */
#delete-account-confirm:disabled { opacity: 0.45; cursor: not-allowed; }
#delete-account-confirm:not(:disabled) { background: var(--tend-red); color: #fff; border-color: var(--tend-red); }
#delete-account-confirm:not(:disabled):hover { background: #952f2f; text-decoration: none; }

/* Collapsible groups (Next 6 months / Later) */
.dash-group--collapsible .dash-group__header { cursor: pointer; user-select: none; }
.dash-group__chevron {
  margin-left: auto;
  font-size: 22px;
  color: var(--tend-text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  line-height: 1;
}
.dash-group--collapsed .dash-group__chevron { transform: rotate(-90deg); }
.dash-group__content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Obligations header controls */
.dash-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Filter button */
.dash-filter-wrap { position: relative; }
.dash-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  height: 34px;
  background: var(--tend-card-bg);
  border: 1.5px solid var(--tend-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tend-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.dash-filter-btn:hover { border-color: var(--tend-green); color: var(--tend-text); }
.dash-filter-btn--active {
  border-color: var(--tend-green);
  color: var(--tend-green);
  background: var(--tend-green-light);
}
.dash-filter-btn--open { box-shadow: 0 0 0 3px var(--tend-green-light); }

/* Filter dropdown panel */
.dash-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 300;
  overflow: hidden;
  animation: dropdown-in 0.15s ease forwards;
}
.dash-filter-dropdown[hidden] { display: none; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.dash-filter-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 8px;
  font-size: 12px;
  color: var(--tend-text-muted);
  border-bottom: 1px solid var(--tend-border);
}
.dash-filter-action-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--tend-green);
  cursor: pointer;
  font-weight: 500;
}
.dash-filter-action-link:hover { text-decoration: underline; }

.dash-filter-list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}
.dash-filter-item { padding: 0; }
.dash-filter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.dash-filter-label:hover { background: var(--tend-bg); }
.dash-filter-checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--tend-green);
  cursor: pointer;
}

/* Mobile filter overlay */
.dash-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 299;
}
.dash-filter-overlay:not([hidden]) { display: block; }

/* Focus ring */
:focus-visible { outline: 2px solid var(--tend-green); outline-offset: 3px; border-radius: 4px; }

/* Mobile */
@media (max-width: 600px) {
  .dash-main { padding: 24px 16px 72px; gap: 24px; }
  .dash-summary { padding: 20px; gap: 16px; }
  .dash-summary__headline { font-size: 18px; }
  .dash-group { margin-bottom: 32px; }

  /* Header controls stack */
  .dash-obligations-header { flex-wrap: wrap; gap: 12px; }
  .dash-header-controls { width: 100%; justify-content: space-between; }

  /* Filter dropdown becomes a bottom sheet */
  .dash-filter-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.15);
    animation: sheet-in 0.25s ease forwards;
  }
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .dash-filter-list { max-height: none; }

  /* Cards: action buttons always visible, no hover lift */
  .dash-card__actions { opacity: 1; pointer-events: auto; }
  .dash-card-wrapper:hover .dash-card-face--front { transform: none; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border-color: var(--tend-border); }
}

/* App shell (legacy — kept for other pages) */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: var(--tend-card-bg); border-right: 1px solid var(--tend-border); padding: 24px 16px; display: flex; flex-direction: column; gap: 8px; }
.sidebar__logo { font-size: 20px; font-weight: 700; color: var(--tend-green); margin-bottom: 24px; display: block; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { padding: 8px 12px; border-radius: var(--radius); font-size: 14px; color: var(--tend-text); transition: background 0.12s; }
.nav-item:hover { background: var(--tend-bg); text-decoration: none; }
.nav-item.active { background: var(--tend-bg); font-weight: 600; color: var(--tend-green); }
.main { flex: 1; display: flex; flex-direction: column; overflow: auto; }
.topbar { height: 56px; border-bottom: 1px solid var(--tend-border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: var(--tend-card-bg); }
.content { padding: 32px 24px; }

/* ── Dashboard layout (side nav + shell) ─────────────────────────────────── */

body.dash-layout {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--tend-bg);
}

/* Side nav */
.dash-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--tend-card-bg);
  border-right: 1px solid var(--tend-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 0.25s ease;
  overflow: hidden;
}
.dash-nav--collapsed { width: 72px; }

.dash-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}
.dash-nav__wordmark {
  font-size: 23px;
  font-weight: 700;
  color: var(--tend-green);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.dash-nav--collapsed .dash-nav__wordmark { opacity: 0; }

.dash-nav__collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tend-text-muted);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.dash-nav__collapse-btn:hover { color: var(--tend-text); background: var(--tend-bg); }

.dash-nav__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.dash-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tend-text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  min-width: 0;
}
.dash-nav__link:hover { background: var(--tend-bg); color: var(--tend-text); }
.dash-nav__link--active { background: var(--tend-green-light); color: var(--tend-green); }
.dash-nav__link--active:hover { background: var(--tend-green-light); }

.dash-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  color: inherit;
}
.dash-nav__label {
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
  min-width: 0;
}
.dash-nav--collapsed .dash-nav__label { opacity: 0; }

.dash-nav__divider { height: 1px; background: var(--tend-border); margin-top: auto; margin-bottom: 12px; }

.dash-nav__footer {
  padding: 12px 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--tend-border);
  overflow: hidden;
  flex-shrink: 0;
}
.dash-nav__email {
  font-size: 12px;
  color: var(--tend-text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.dash-nav--collapsed .dash-nav__email { opacity: 0; }

.dash-nav__logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  color: var(--tend-text-muted);
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.dash-nav__logout-btn:hover { background: var(--tend-bg); color: var(--tend-text); }

/* Nav mobile backdrop */
.dash-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 199; }
.dash-nav-overlay:not([hidden]) { display: block; }

/* Shell */
.dash-shell { flex: 1; margin-left: 280px; display: flex; flex-direction: column; min-width: 0; transition: margin-left 0.25s ease; }
.dash-nav--collapsed ~ .dash-shell { margin-left: 72px; }

/* ── Card grid ───────────────────────────────────────────────────────────── */

.dash-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Card wrapper (3D flip context) */
.dash-card-wrapper { perspective: 1000px; }

.dash-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}
.dash-card-inner--flipped { transform: rotateY(180deg); }

.dash-card-face {
  border-radius: 12px;
  border: 1.5px solid var(--tend-border);
  background: var(--tend-card-bg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face — fills card height and distributes content */
.dash-card-face--front {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px;
  height: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dash-card-wrapper:hover .dash-card-face--front {
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  border-color: #c8d4cc;
  transform: translateY(-2px);
}

/* Back face — absolute so it doesn't affect layout height */
.dash-card-face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border-radius: 12px;
}

@keyframes card-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}
.dash-card-wrapper--removing { pointer-events: none; animation: card-fade-out 0.2s ease forwards; }

/* Card content */
.dash-card__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dash-card__rag  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dash-card__title { font-size: 14px; font-weight: 600; color: var(--tend-text); text-align: center; line-height: 1.4; }
.dash-card__date { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dash-card__date-rel { font-size: 14px; font-weight: 600; color: var(--tend-green); font-variant-numeric: tabular-nums; }
.dash-card__date-abs { font-size: 12px; color: var(--tend-text-muted); font-variant-numeric: tabular-nums; }
.dash-card-wrapper[data-rag="red"]   .dash-card__date-rel { color: var(--tend-red); }
.dash-card-wrapper[data-rag="amber"] .dash-card__date-rel { color: var(--tend-amber); }

/* Action buttons — fade in on hover */
.dash-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dash-card-wrapper:hover .dash-card__actions { opacity: 1; pointer-events: auto; }

/* Back face variants */
.dash-card__back-icon { font-size: 24px; line-height: 1; }
.dash-card__back-msg  { font-size: 13px; font-weight: 600; color: var(--tend-text-muted); text-align: center; padding: 0 12px; }
.dash-card-face--back.dash-card-back--complete { background: var(--tend-green-light); border-color: var(--tend-green); }
.dash-card-face--back.dash-card-back--complete .dash-card__back-msg { color: var(--tend-green); }
.dash-card-face--back.dash-card-back--snooze   { background: #f0f9ff; border-color: #93c5fd; }
.dash-card-face--back.dash-card-back--snooze   .dash-card__back-msg { color: #1d4ed8; }
.dash-card-face--back.dash-card-back--dismiss  { background: var(--tend-red-light); border-color: var(--tend-red); }
.dash-card-face--back.dash-card-back--dismiss  .dash-card__back-msg { color: var(--tend-red); }
.dash-card-face--back.dash-card-back--error    { background: #fef9c3; border-color: #fbbf24; }
.dash-card-face--back.dash-card-back--error    .dash-card__back-msg { color: #92400e; }

/* Skeleton cards */
.dash-skel-card { border-radius: 12px; border: 1.5px solid var(--tend-border); background: var(--tend-card-bg); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.dash-skel-card__meta { display: flex; align-items: center; justify-content: space-between; }

/* Empty section message */
.dash-group-empty { grid-column: 1 / -1; padding: 20px 0 4px; font-size: 14px; color: var(--tend-text-muted); }

/* ── Goodbye page ────────────────────────────────────────────────────────── */
.goodbye-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tend-bg);
}
.goodbye-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  max-width: 480px;
  gap: 16px;
}
.goodbye-wordmark {
  font-size: 22px;
  font-weight: 700;
  color: var(--tend-green);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.goodbye-headline {
  font-size: 32px;
  font-weight: 600;
  color: var(--tend-text);
  letter-spacing: -0.02em;
  margin: 0;
}
.goodbye-body {
  font-size: 15px;
  color: var(--tend-text-muted);
  line-height: 1.6;
  margin: 0;
}
.goodbye-link {
  font-size: 14px;
  color: var(--tend-green);
  font-weight: 500;
  text-decoration: none;
  margin-top: 4px;
}
.goodbye-link:hover { text-decoration: underline; }

/* ── Coming soon ─────────────────────────────────────────────────────────── */
.coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 16px; padding: 32px; text-align: center; background: var(--tend-bg); }
.coming-soon__wordmark { font-size: 24px; font-weight: 700; color: var(--tend-green); letter-spacing: -0.03em; text-decoration: none; margin-bottom: 16px; }
.coming-soon__heading  { font-size: 28px; font-weight: 700; color: var(--tend-text); letter-spacing: -0.02em; }
.coming-soon__sub      { font-size: 16px; color: var(--tend-text-muted); max-width: 360px; }
.coming-soon__btn      { margin-top: 8px; }

/* ── Nav responsive ──────────────────────────────────────────────────────── */

/* Tablet (≤1024px): icon-only by default */
@media (max-width: 1024px) {
  .dash-nav { width: 72px; }
  .dash-nav .dash-nav__wordmark,
  .dash-nav .dash-nav__label,
  .dash-nav .dash-nav__email { opacity: 0; }
  .dash-nav--expanded { width: 280px; }
  .dash-nav--expanded .dash-nav__wordmark,
  .dash-nav--expanded .dash-nav__label,
  .dash-nav--expanded .dash-nav__email { opacity: 1; }
  .dash-shell { margin-left: 72px; }
  .dash-nav--collapsed ~ .dash-shell { margin-left: 72px; }
}

/* Mobile (≤768px): drawer */
@media (max-width: 768px) {
  .dash-nav {
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    border-right: none;
    box-shadow: 4px 0 24px rgba(0,0,0,0.1);
  }
  .dash-nav--open { transform: translateX(0); }
  .dash-nav .dash-nav__wordmark,
  .dash-nav .dash-nav__label,
  .dash-nav .dash-nav__email { opacity: 1; }
  .dash-shell { margin-left: 0 !important; }
  .dash-hamburger { display: flex; }
  .dash-topbar__wordmark { display: block; }
  .dash-card-grid { grid-template-columns: 1fr; }
  .dash-card__actions { opacity: 1; pointer-events: auto; }
  .dash-card-wrapper:hover .dash-card-face--front { transform: none; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border-color: var(--tend-border); }
}
.content h2 { font-size: 22px; margin-bottom: 16px; }

/* ── Card centre wrapper (equal-height rows) ──────────────────────────────── */
.dash-card__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}


/* ── Nav search button ───────────────────────────────────────────────────── */
.dash-nav__search-row {
  padding: 2px 8px 2px;
  flex-shrink: 0;
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease;
}
.dash-nav--collapsed .dash-nav__search-row {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.dash-nav__search-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--tend-text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.dash-nav__search-btn:hover { background: var(--tend-bg); color: var(--tend-text); }

.dash-nav__search-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  color: inherit;
}
.dash-nav__search-btn__label {
  flex: 1;
  text-align: left;
  overflow: hidden;
}
.dash-nav__shortcut-hint {
  font-size: 11px;
  color: var(--tend-text-muted);
  background: var(--tend-bg);
  border: 1px solid var(--tend-border);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* ── Nav switcher section ────────────────────────────────────────────────── */
.dash-nav__switcher-section {
  padding: 6px 12px 8px;
  flex-shrink: 0;
  overflow: hidden;
  max-height: 80px;
  opacity: 1;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease;
}
.dash-nav--collapsed .dash-nav__switcher-section {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.dash-nav__switcher-section .dash-switcher-wrap { width: 100%; }
.dash-nav__switcher-section .dash-switcher { width: 100%; justify-content: space-between; font-size: 13px; }

/* Nav links get a 16px top pad so total gap from switcher is ~24px */
.dash-nav__links { padding-top: 16px; }

/* ── Hide topbar on desktop (≥769px) ─────────────────────────────────────── */
@media (min-width: 769px) {
  .dash-topbar { display: none; }
}

/* ── Renewals — category grouping within time buckets ───────────────────── */
.renewal-cat-group { margin-bottom: 28px; }
.renewal-cat-group:last-child { margin-bottom: 0; }
.renewal-subcat-cluster + .renewal-subcat-cluster { margin-top: 28px; }
.dash-card-grid + .renewal-subcat-cluster { margin-top: 28px; }
.renewal-cat-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--tend-text-muted);
  padding: 6px 0 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--tend-border);
  letter-spacing: 0.02em;
}
.renewal-subcat-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tend-text-muted);
  margin: 16px 0 8px;
}
.renewal-subcat-header:first-of-type { margin-top: 0; }

/* ── Add Renewal Modal ──────────────────────────────────────────────────── */
.renewal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: backdrop-in 0.2s ease forwards;
}
.renewal-modal-backdrop[hidden] { display: none; }
.renewal-modal-backdrop--closing { animation: backdrop-out 0.15s ease forwards; }
.renewal-modal-backdrop--closing .renewal-modal { animation: modal-out 0.15s ease forwards; }

.renewal-modal {
  background: var(--tend-card-bg);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: modal-in 0.2s ease forwards;
  overflow: hidden;
}

.renewal-modal__header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tend-border);
  flex-shrink: 0;
}

.renewal-modal__back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tend-text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.renewal-modal__back[hidden] { display: none; }
.renewal-modal__back:hover { background: var(--tend-bg); color: var(--tend-text); }

.renewal-modal__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--tend-text);
  letter-spacing: -0.01em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tend-text-muted);
  padding: 5px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.renewal-modal__close:hover { background: var(--tend-bg); color: var(--tend-text); }

.renewal-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.renewal-modal__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--tend-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.renewal-modal__footer[hidden] { display: none; }

/* Category picker */
.renewal-picker-subtitle {
  font-size: 14px;
  color: var(--tend-text-muted);
  margin-bottom: 16px;
}
.renewal-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.renewal-picker-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1.5px solid var(--tend-border);
  border-radius: 12px;
  background: var(--tend-card-bg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.renewal-picker-card:hover {
  border-color: var(--tend-green);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  background: var(--tend-green-light);
}
.renewal-picker-card__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--tend-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.renewal-picker-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.renewal-picker-card__count {
  font-size: 12px;
  color: var(--tend-text-muted);
}

/* Template list */
.renewal-template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--tend-border);
  border-radius: 12px;
  overflow: hidden;
}
.renewal-template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--tend-border);
  background: var(--tend-card-bg);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--tend-text);
  text-align: left;
  transition: background 0.1s;
  gap: 8px;
  font-family: inherit;
}
.renewal-template-item:last-child { border-bottom: none; }
.renewal-template-item:hover { background: var(--tend-bg); }
.renewal-template-item__arrow { color: var(--tend-text-muted); flex-shrink: 0; }

/* Form */
.renewal-form { display: flex; flex-direction: column; gap: 20px; }
.renewal-form__field { display: flex; flex-direction: column; gap: 5px; }
.renewal-form__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-text);
}
.renewal-form__label--required::after { content: ' *'; color: var(--tend-red); }
.renewal-form__input,
.renewal-form__textarea {
  padding: 10px 12px;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--tend-text);
  background: var(--tend-card-bg);
  outline: none;
  transition: border-color 0.15s;
}
.renewal-form__input:focus,
.renewal-form__textarea:focus { border-color: var(--tend-green); }
.renewal-form__input:disabled,
.renewal-form__textarea:disabled {
  background: var(--tend-bg);
  color: var(--tend-text-muted);
  cursor: not-allowed;
}
.renewal-form__input--error { border-color: var(--tend-red) !important; }
.renewal-form__textarea { resize: vertical; min-height: 72px; }
.renewal-form__helper {
  font-size: 12px;
  color: var(--tend-text-muted);
  line-height: 1.4;
}
.renewal-form__error {
  font-size: 13px;
  color: var(--tend-red);
  font-weight: 500;
}
.renewal-form__warning {
  font-size: 13px;
  color: var(--tend-amber);
  font-weight: 500;
}

/* Registry lookup status (domain, ICO — shared) */
.renewal-form__lookup-status {
  font-size: 12px;
  line-height: 1.5;
  min-height: 18px;
  margin-top: 4px;
}
.renewal-form__lookup-status--loading { color: var(--tend-text-muted); }
.renewal-form__lookup-status--success { color: var(--tend-green); font-weight: 500; }
.renewal-form__lookup-status--warn    { color: var(--tend-amber); }
.renewal-form__lookup-detail          { color: var(--tend-text-muted); font-weight: 400; }

/* Trademark manual-only notice */
.renewal-form__manual-notice {
  font-size: 13px;
  color: var(--tend-text-muted);
  background: var(--tend-green-light);
  border-radius: 6px;
  padding: 10px 12px;
  line-height: 1.5;
  margin-bottom: 2px;
}
.renewal-form__manual-notice a { color: var(--tend-green-dark); }

/* Reminder offset chips */
.renewal-offset-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.renewal-offset-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--tend-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--tend-text-muted);
  background: var(--tend-card-bg);
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
}
.renewal-offset-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.renewal-offset-label:has(input:checked) {
  border-color: var(--tend-green);
  background: var(--tend-green-light);
  color: var(--tend-green);
}

/* Recurring checkbox */
.renewal-recurring-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}
.renewal-recurring-label input {
  accent-color: var(--tend-green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Edit-mode footer (delete on left, cancel+save on right) */
.renewal-modal__footer--split { justify-content: space-between; }

/* Attachments section */
.renewal-attachments { border-top: 1px solid var(--tend-border); padding-top: 20px; }

.renewal-attachments__list { display: flex; flex-direction: column; }

.renewal-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tend-border);
}
.renewal-attachment-row:last-child { border-bottom: none; }

.renewal-attachment-row__info { flex: 1; min-width: 0; }
.renewal-attachment-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.renewal-attachment-row__meta { display: flex; gap: 10px; }
.renewal-attachment-row__actions { display: flex; gap: 6px; flex-shrink: 0; }
.renewal-attachment-row__remove { color: var(--tend-red) !important; border-color: #deb8b8 !important; }
.renewal-attachment-row__remove:hover { background: var(--tend-red-light) !important; }

.renewal-attachment-row--staged { background: var(--tend-bg); }
.renewal-attachment-row--staged .renewal-attachment-row__name { color: var(--tend-text-muted); }
.renewal-attachment-row__pending-tag {
  font-size: 11px;
  font-style: italic;
  color: var(--tend-text-muted);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
}
.renewal-attachment-row--error .renewal-attachment-row__pending-tag {
  color: var(--tend-red);
  font-style: normal;
  background: var(--tend-red-light);
}

.renewal-attachments__dup-notice { font-size: 12px; color: var(--tend-amber); min-height: 0; }
.renewal-attachments__upload { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.renewal-attachments__upload-row { display: flex; align-items: center; gap: 8px; }
.renewal-attachments__file-input { display: none; }
.renewal-attachments__file-label { cursor: pointer; flex-shrink: 0; }
.renewal-attachments__filename {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--tend-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-attachments__progress { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.renewal-attachments__progress-row { font-size: 13px; color: var(--tend-text-muted); }
.renewal-attachments__progress-row--success { color: var(--tend-green); }
.renewal-attachments__progress-row--error { color: var(--tend-red); }

/* Inline submit error */
.renewal-submit-error {
  font-size: 13px;
  color: var(--tend-red);
  padding: 8px 12px;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: var(--radius);
  flex-basis: 100%;
  order: -1;
}

/* Mobile */
@media (max-width: 600px) {
  .renewal-modal-backdrop { padding: 0; align-items: flex-start; }
  .renewal-modal { max-width: 100%; border-radius: 0; max-height: 100dvh; height: 100dvh; }
  .renewal-picker-grid { grid-template-columns: 1fr; }
}

/* Add-renewal button in header controls */
.renewal-add-btn { white-space: nowrap; }

/* ── Settings page ──────────────────────────────────────────────────────── */

.dash-main--settings { padding: 0; gap: 0; }

.settings-layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

/* Sub-nav (sticky left column) */
.settings-subnav {
  width: 216px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--tend-border);
  padding: 32px 12px;
  overflow-y: auto;
}
.settings-subnav__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tend-text-muted);
  padding: 0 8px;
  margin-bottom: 8px;
}
.settings-subnav__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-text-muted);
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
  margin-bottom: 2px;
}
.settings-subnav__link:hover { color: var(--tend-text); background: var(--tend-bg); text-decoration: none; }
.settings-subnav__link--active { color: var(--tend-green); background: var(--tend-green-light); }
.settings-subnav__icon { flex-shrink: 0; color: inherit; display: flex; }

/* Content (scrollable right column) */
.settings-content {
  flex: 1;
  padding: 48px 48px 96px;
  min-width: 0;
  max-width: 680px;
}

/* Section */
.settings-section { margin-bottom: 64px; scroll-margin-top: 48px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section__heading { font-size: 20px; font-weight: 600; color: var(--tend-text); margin-bottom: 6px; }
.settings-section__desc { font-size: 14px; color: var(--tend-text-muted); margin-bottom: 24px; line-height: 1.55; }

/* Blocks */
.settings-block {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.settings-block:last-child { margin-bottom: 0; }
.settings-block__heading { font-size: 15px; font-weight: 600; color: var(--tend-text); margin-bottom: 4px; }
.settings-block__desc { font-size: 13px; color: var(--tend-text-muted); margin-bottom: 20px; line-height: 1.55; }
.settings-block--danger .settings-block__heading { color: var(--tend-red); }

/* Read-only info grid */
.settings-info-grid {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.settings-info-label { color: var(--tend-text-muted); font-weight: 500; line-height: 1.4; }
.settings-info-value { color: var(--tend-text); line-height: 1.4; }

/* Fields */
.settings-field { margin-bottom: 16px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-label { display: block; font-size: 13px; font-weight: 500; color: var(--tend-text-muted); margin-bottom: 6px; }

.settings-input,
.settings-select {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 9px 12px;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--tend-card-bg);
  color: var(--tend-text);
  outline: none;
  transition: border-color 0.15s;
}
.settings-input:focus,
.settings-select:focus { border-color: var(--tend-green); }

/* Currency prefix wrapper (£ affordance on number inputs) */
.settings-currency-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  background: var(--tend-card-bg);
  overflow: hidden;
  max-width: 120px;
  transition: border-color 0.15s;
}
.settings-currency-wrap:focus-within { border-color: var(--tend-green); }
.settings-currency-wrap__prefix {
  display: flex;
  align-items: center;
  padding: 0 4px 0 10px;
  font-size: 14px;
  color: var(--tend-text-muted);
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
.settings-currency-wrap .settings-input {
  border: none;
  padding-left: 2px;
  max-width: none;
  width: 60px;
  flex: 1;
  min-width: 0;
  background: transparent;
}
.settings-currency-wrap .settings-input:focus { border-color: transparent; }
.settings-share-class-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Radio group */
.settings-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.12s, background 0.12s;
  background: var(--tend-card-bg);
  user-select: none;
}
.settings-radio:has(input:checked) { border-color: var(--tend-green); background: var(--tend-green-light); }
.settings-radio input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Checkbox group (reminder offsets) */
.settings-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1.5px solid var(--tend-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--tend-text-muted);
  background: var(--tend-card-bg);
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
}
.settings-checkbox-label:has(input:checked) { border-color: var(--tend-green); background: var(--tend-green-light); color: var(--tend-green); }
.settings-checkbox-label input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Toggle */
.settings-toggle-row { display: flex; align-items: center; gap: 12px; }
.settings-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.settings-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-toggle__track {
  position: absolute; inset: 0;
  background: var(--tend-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-toggle__track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: left 0.2s;
}
.settings-toggle input:checked + .settings-toggle__track { background: var(--tend-green); }
.settings-toggle input:checked + .settings-toggle__track::after { left: 21px; }
.settings-toggle-text { font-size: 14px; font-weight: 500; }

/* iCal URL row */
.settings-ical-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 4px; }
.settings-ical-input { flex: 1; max-width: none; font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }

/* Calendar instruction cards */
.settings-cal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.settings-cal-card { background: var(--tend-bg); border: 1px solid var(--tend-border); border-radius: var(--radius); padding: 16px; }
.settings-cal-card__name { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--tend-text); }
.settings-cal-card__steps { font-size: 13px; color: var(--tend-text-muted); line-height: 1.7; }

/* Billing placeholder */
.settings-billing-card { background: var(--tend-bg); border: 1px solid var(--tend-border); border-radius: var(--radius); overflow: hidden; }
.settings-billing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tend-border);
  font-size: 14px;
}
.settings-billing-row:last-child { border-bottom: none; }
.settings-billing-label { color: var(--tend-text-muted); }
.settings-billing-value { color: var(--tend-text); font-weight: 500; }

/* Companies list */
.settings-companies-list { display: flex; flex-direction: column; gap: 8px; }
.settings-company-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
}
.settings-company-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.settings-company-meta { font-size: 13px; color: var(--tend-text-muted); }
.settings-company-status { font-size: 12px; flex-shrink: 0; }

/* Button row */
.settings-btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Delete confirm row */
.settings-confirm-row { margin: 4px 0 20px; }

/* Inline messages */
.settings-error { font-size: 13px; color: var(--tend-red); margin-top: 8px; }
.settings-hint  { font-size: 13px; color: var(--tend-text-muted); margin-top: 6px; line-height: 1.5; }

/* Auto-save indicator */
.settings-autosave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--tend-green);
  opacity: 0;
  transition: opacity 0.3s;
}
.settings-autosave--visible { opacity: 1; }

/* Toast */
.settings-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--tend-text);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9000;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.settings-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Responsive */
@media (max-width: 900px) {
  .settings-content { padding: 32px 24px 80px; }
}
@media (max-width: 768px) {
  .settings-layout { flex-direction: column; }
  .settings-subnav {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--tend-border);
    padding: 12px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .settings-subnav__title { display: none; }
  .settings-subnav__link { white-space: nowrap; flex-shrink: 0; }
  .settings-content { padding: 24px 16px 72px; max-width: none; }
  .settings-info-grid { grid-template-columns: 1fr; gap: 4px; }
  .settings-info-label { margin-bottom: 0; }
  .settings-input, .settings-select { max-width: none; }
}

/* ── Sync indicator ─────────────────────────────────────────────────────────── */
.sync-indicator-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--tend-text-muted);
  cursor: default;
  user-select: none;
}

/* ── Snapshot view ──────────────────────────────────────────────────────────── */

.snap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

/* Stat cards */
.snap-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.snap-stat-card {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: snap-card-in 180ms ease both;
}

@keyframes snap-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.snap-stat-icon { line-height: 1; }

.snap-stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tend-text);
}
.snap-stat-number--red   { color: var(--tend-red); }
.snap-stat-number--amber { color: var(--tend-amber); }
.snap-stat-number--green { color: var(--tend-green); }
.snap-stat-number--muted { color: var(--tend-text-muted); }

.snap-stat-label {
  font-size: 0.75rem;
  color: var(--tend-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline */
.snap-timeline {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 28px 16px 14px;
}

.snap-tl-inner {
  position: relative;
  height: 40px;
  background: var(--tend-bg);
  border-radius: 4px;
  overflow: visible;
}

.snap-tl-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tend-border);
}

.snap-tl-today {
  background: var(--tend-green);
  opacity: 0.7;
  width: 2px;
}

.snap-tl-glabel {
  position: absolute;
  top: -20px;
  left: 4px;
  font-size: 0.65rem;
  color: var(--tend-text-muted);
  white-space: nowrap;
  pointer-events: none;
}

.snap-tl-glabel--today {
  color: var(--tend-green);
  font-weight: 600;
}

.snap-tl-glabel--right {
  left: auto;
  right: 0;
}

.snap-timeline__empty {
  font-size: 0.8rem;
  color: var(--tend-text-muted);
  text-align: center;
  padding: 4px 0;
  margin: 0;
}

.snap-timeline:has(.snap-timeline__empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
}

/* Timeline dots */
.snap-dot-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: default;
  z-index: 1;
}

.snap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tend-green);
  opacity: 0;
  animation: snap-dot-in 180ms ease forwards;
}

@keyframes snap-dot-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

.snap-dot-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--tend-green);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 3px;
  line-height: 1;
  pointer-events: none;
}

.snap-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tend-text);
  color: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 10;
}

.snap-dot-wrap:hover .snap-tip { opacity: 1; }

/* Highlight card */
.snap-highlight {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.snap-highlight--red   { border-color: #deb8b8; background: #fdf7f7; }
.snap-highlight--amber { border-color: #d9b98a; background: #fdf8f2; }
.snap-highlight--green { border-color: #b0cebb; background: #f6faf7; }

.snap-highlight__rag {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.snap-highlight__headline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tend-text);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snap-highlight--red   .snap-highlight__headline { color: var(--tend-red); }
.snap-highlight--amber .snap-highlight__headline { color: var(--tend-amber); }
.snap-highlight--green .snap-highlight__headline { color: var(--tend-green); }

.snap-highlight__sub {
  font-size: 0.8rem;
  color: var(--tend-text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .snap-stats { grid-template-columns: repeat(2, 1fr); }
  .snap-stat-number { font-size: 1.4rem; }
  .snap-tl-inner { height: 36px; }
}

/* ── Dividends page ──────────────────────────────────────────────────────── */

.div-page-header { margin-bottom: 8px; }
.div-page-header--with-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.div-page-header--with-meta .sync-indicator-wrap {
  flex-shrink: 0;
  margin-bottom: 0;
  justify-content: flex-end;
}
.div-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--tend-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.div-page-subtitle { font-size: 15px; color: var(--tend-text-muted); }

.div-section { }
.div-section + .div-section { margin-top: 16px; }

.div-section__header { margin-bottom: 16px; }
.div-section__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tend-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.div-section__sub { font-size: 14px; color: var(--tend-text-muted); line-height: 1.5; }

/* CH suggestions */
.div-suggestions {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 24px;
}
.div-suggestions__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-text);
  margin-bottom: 6px;
}
.div-suggestions__sub {
  font-size: 13px;
  color: var(--tend-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}
.div-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.div-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.div-suggestion-item__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--tend-text);
}

/* Shareholders table */
.div-sh-table {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.div-sh-head,
.div-sh-row {
  display: grid;
  grid-template-columns: 2fr 80px 80px 130px;
  gap: 8px;
  padding: 12px 20px;
  align-items: center;
}
.div-sh-head {
  background: var(--tend-bg);
  border-bottom: 1px solid var(--tend-border);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tend-text-muted);
}
.div-sh-row { border-bottom: 1px solid var(--tend-border); }
.div-sh-row:last-of-type { border-bottom: none; }
.div-sh-row__name { font-size: 15px; font-weight: 500; color: var(--tend-text); display: flex; flex-direction: column; gap: 2px; }
.div-sh-row__name-addr { font-size: 12px; color: var(--tend-text-muted); font-weight: 400; white-space: normal; line-height: 1.35; }
.div-sh-row__shares { font-size: 14px; color: var(--tend-text); }
.div-sh-row__class  { font-size: 14px; color: var(--tend-text-muted); }
.div-sh-row__actions { display: flex; gap: 6px; justify-content: flex-end; }

.div-sh-footer {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--tend-border);
  background: var(--tend-bg);
}

/* Declarations placeholder */
.div-placeholder-card {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
}
.div-placeholder-card__text { font-size: 15px; color: var(--tend-text-muted); }

/* Mobile */
@media (max-width: 640px) {
  .div-sh-head { display: none; }
  .div-sh-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .div-sh-row__shares,
  .div-sh-row__class { font-size: 13px; grid-column: 1; }
}

/* ── Declarations section header ────────────────────────────────────────── */
#declare-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.div-declare-hint {
  font-size: 13px;
  color: var(--tend-text-muted);
  line-height: 1.4;
  text-align: right;
}

/* ── Compact shareholders block ─────────────────────────────────────────── */
.div-compact-block {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.div-compact-summary {
  font-size: 14px;
  color: var(--tend-text);
  line-height: 1.5;
}

.div-compact-empty {
  font-size: 14px;
  color: var(--tend-text-muted);
}

.div-compact-manage {
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;
  font-size: 13px;
  color: var(--tend-green);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: block;
}
.div-compact-manage:hover { color: var(--tend-green-dark); }

.div-compact-done-row {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--tend-border);
}

.div-compact-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  margin: 0 0 4px;
}

.div-compact-subtitle {
  font-size: 13px;
  color: var(--tend-text-muted);
  margin: 0 0 12px;
}

.div-compact-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border: 1px solid var(--tend-border);
  border-radius: 6px;
}

.div-compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.div-compact-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tend-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--tend-border);
  background: var(--tend-bg);
}

.div-compact-table td {
  padding: 9px 12px;
  color: var(--tend-text);
  font-size: 13px;
  border-bottom: 1px solid var(--tend-border);
}

.div-compact-table tbody tr:last-child td { border-bottom: none; }

.div-compact-footer {
  font-size: 13px;
  color: var(--tend-text-muted);
  margin: 0;
}

.div-compact-footer a {
  color: var(--tend-green);
  text-decoration: none;
}

.div-compact-footer a:hover { text-decoration: underline; }

#shareholders-inline-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tend-border);
}

.div-section__header--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* Dividend pills */
.div-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.div-pill--interim { background: #e8f1ec; color: var(--tend-green); }
.div-pill--final   { background: #eef2ff; color: #3730a3; }
.div-pill--pending { background: var(--tend-amber-light); color: var(--tend-amber); }
.div-pill--paid    { background: var(--tend-green-light); color: var(--tend-green); }

/* Dividend card list */
.div-decl-list { display: flex; flex-direction: column; gap: 10px; }

.div-decl-card {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.div-decl-card__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.div-decl-card__left { flex: 1; min-width: 0; }

.div-decl-card__pills { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }

.div-decl-card__period {
  font-size: 15px;
  font-weight: 600;
  color: var(--tend-text);
  margin-bottom: 4px;
}

.div-decl-card__meta {
  font-size: 13px;
  color: var(--tend-text-muted);
}

.div-decl-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.div-decl-card__amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--tend-text);
  letter-spacing: -0.02em;
}

.div-decl-card__actions { display: flex; gap: 6px; }

/* Card details expansion */
.div-decl-details {
  border-top: 1px solid var(--tend-border);
  background: var(--tend-bg);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.div-decl-details__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}

.div-decl-details__name  { color: var(--tend-text); font-weight: 500; }
.div-decl-details__shares { color: var(--tend-text-muted); }
.div-decl-details__amount { color: var(--tend-text); font-weight: 600; }

/* Empty state */
.div-decl-empty {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
}
.div-decl-empty__title { font-size: 15px; font-weight: 500; color: var(--tend-text); margin-bottom: 6px; }
.div-decl-empty__sub { font-size: 14px; color: var(--tend-text-muted); }

/* ── Declaration modal ───────────────────────────────────────────────────── */
.renewal-modal--wide { max-width: 660px; }

.div-declare-form { gap: 0; }

.div-form-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--tend-border);
}
.div-form-section:first-child { padding-top: 0; }
.div-form-section:last-child  { border-bottom: none; padding-bottom: 0; }
.div-form-section .renewal-form__field + .renewal-form__field { margin-top: 16px; }
.div-form-section .renewal-form__helper { margin-top: 6px; }

.div-form-section__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tend-text-muted);
  margin-bottom: 14px;
}

/* Type radio */
.div-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.div-radio-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  background: var(--tend-card-bg);
  color: var(--tend-text-muted);
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
}
.div-radio-label:has(input:checked) {
  border-color: var(--tend-green);
  background: var(--tend-green-light);
  color: var(--tend-green);
}
.div-radio-label input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Amount input with £ prefix */
.div-amount-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
  background: var(--tend-card-bg);
}
.div-amount-wrap:focus-within { border-color: var(--tend-green); }
.div-amount-wrap--error { border-color: var(--tend-red) !important; }

.div-amount-prefix {
  padding: 0 10px;
  font-size: 15px;
  color: var(--tend-text-muted);
  font-weight: 500;
  background: var(--tend-bg);
  border-right: 1.5px solid var(--tend-border);
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.div-amount-input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 12px;
  min-width: 0;
}
.div-amount-input:disabled { background: var(--tend-bg); color: var(--tend-text-muted); }

/* Allocation table */
.div-alloc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.div-alloc-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tend-text-muted);
}
.div-alloc-edit-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--tend-green);
  padding: 2px 4px;
  font-family: inherit;
}
.div-alloc-edit-link:hover { text-decoration: underline; }

.div-alloc-table {
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.div-alloc-head,
.div-alloc-row {
  display: grid;
  grid-template-columns: 1fr 100px 130px;
  gap: 8px;
  padding: 10px 14px;
  align-items: center;
}
.div-alloc-head {
  background: var(--tend-bg);
  border-bottom: 1px solid var(--tend-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tend-text-muted);
}
.div-alloc-row { border-bottom: 1px solid var(--tend-border); }
.div-alloc-row:last-child { border-bottom: none; }
.div-alloc-row__name   { font-size: 14px; font-weight: 500; color: var(--tend-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-alloc-row__shares { font-size: 13px; color: var(--tend-text-muted); }
.div-alloc-row__amount .div-amount-wrap { width: 100%; }
.div-alloc-row__amount .div-amount-input { font-size: 14px; padding: 7px 10px; }
.div-alloc-row__amount .div-amount-prefix { font-size: 14px; padding: 0 8px; }

/* Allocation summary */
.div-alloc-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 0;
}
.div-alloc-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--tend-text-muted);
}
.div-alloc-summary__row span:last-child { color: var(--tend-text); }

/* Manual mode banner */
.div-manual-banner {
  background: #fff8ed;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--tend-amber);
  margin-bottom: 10px;
}

/* Info notice */
.div-notice {
  background: #f0f7f3;
  border: 1px solid #b8d9c4;
  border-radius: var(--radius);
  padding: 16px 18px;
}
.div-notice__heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-green);
  margin-bottom: 8px;
}
.div-notice__body {
  font-size: 13px;
  color: var(--tend-text-muted);
  line-height: 1.6;
  white-space: pre-line;
}

/* Linked-fields helper and formatted display */
.div-linked-helper {
  font-size: 13px;
  color: var(--tend-text-muted);
  margin-bottom: 14px;
}

.div-rounding-note {
  font-size: 12px;
  color: var(--tend-text-muted);
  font-style: italic;
  margin-top: 6px;
}

.div-amount-fmt {
  font-size: 12px;
  color: var(--tend-green);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* ── Advanced minute details section ─────────────────────────────────────── */
.div-adv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  text-align: left;
}
.div-adv-header:hover { color: var(--tend-green); }

.div-adv-chevron {
  display: flex;
  align-items: center;
  color: var(--tend-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.div-adv-header--open .div-adv-chevron { transform: rotate(90deg); }

.div-adv-summary {
  font-size: 12px;
  color: var(--tend-text-muted);
  margin-top: 5px;
  line-height: 1.4;
}

.div-adv-body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.div-adv-body[hidden] { display: none; }

.div-adv-intro {
  font-size: 13px;
  color: var(--tend-text-muted);
  line-height: 1.5;
}

.div-adv-field { display: flex; flex-direction: column; gap: 4px; }

.div-adv-label { font-size: 14px; font-weight: 500; color: var(--tend-text); }

.div-adv-helper { font-size: 13px; color: var(--tend-text-muted); line-height: 1.4; }

.div-adv-examples { font-size: 12px; color: var(--tend-text-muted); font-style: italic; margin-top: 2px; }

.div-adv-dir-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.div-adv-dir-cb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.div-adv-radio-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.div-adv-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.div-adv-radio-sub {
  font-size: 12px;
  color: var(--tend-text-muted);
  margin-left: 24px;
  margin-top: 2px;
}

.div-adv-location-field { margin-top: 6px; }
.div-adv-location-field[hidden] { display: none; }

.div-adv-static-text { font-size: 14px; color: var(--tend-text); margin-top: 4px; }

/* btn--danger (solid red) */
.btn--danger { background: var(--tend-red); color: #fff; border-color: var(--tend-red); }
.btn--danger:hover { background: #952f2f; border-color: #952f2f; text-decoration: none; }
.btn--danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Delete dividend modal */
.dash-modal__subtitle {
  font-size: 13px;
  color: var(--tend-text-muted);
  line-height: 1.55;
  margin-bottom: 24px;
  font-style: italic;
}
.div-delete-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.div-delete-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--tend-text-muted);
  line-height: 1.45;
}
.div-delete-list li::before {
  content: '–';
  flex-shrink: 0;
  color: var(--tend-text-muted);
}

@media (max-width: 640px) {
  .div-decl-card__main { flex-direction: column; gap: 12px; }
  .div-decl-card__right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .div-alloc-head,
  .div-alloc-row { grid-template-columns: 1fr 130px; }
  .div-alloc-head span:nth-child(2),
  .div-alloc-row__shares { display: none; }
  .renewal-modal--wide { max-width: 100%; }
}

/* ── Register of Members ─────────────────────────────────────────────────── */

.reg-info-note {
  border-left: 3px solid var(--tend-green);
  background: var(--tend-green-light);
  color: var(--tend-text);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 40px;
}

.reg-tip-note {
  color: var(--tend-text-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.reg-warn-note {
  border-left: 3px solid #d97706;
  background: #fffbeb;
  color: var(--tend-text);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 16px;
}
.reg-warn-note a { color: #b45309; font-weight: 500; }
.reg-warn-note a:hover { text-decoration: underline; }

.reg-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 20px;
}

.reg-section { margin-bottom: 40px; }

.reg-section__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tend-text);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.reg-empty {
  font-size: 14px;
  color: var(--tend-text-muted);
  font-style: italic;
}

.reg-muted {
  color: var(--tend-text-muted);
  font-style: italic;
}

/* Table */
.reg-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  background: var(--tend-card-bg);
}

.reg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.reg-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tend-text-muted);
  background: var(--tend-bg);
  border-bottom: 1px solid var(--tend-border);
  white-space: nowrap;
}

.reg-table td {
  padding: 12px 14px;
  color: var(--tend-text);
  border-bottom: 1px solid var(--tend-border);
  vertical-align: top;
  line-height: 1.45;
}

.reg-table tbody tr:last-child td { border-bottom: none; }
.reg-table tbody tr.reg-member-clickable { cursor: pointer; }
.reg-table tbody tr.reg-member-clickable:hover td { background: var(--tend-bg); }

.reg-table__name { font-weight: 600; }
.reg-table__num  { text-align: right; }
.reg-table th.reg-table__num { text-align: right; }
.reg-table__action { text-align: right; width: 1%; white-space: nowrap; }

/* Event list */
.reg-event-list { }

.reg-event-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--tend-border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.reg-event-row:first-child { padding-top: 0; }
.reg-event-row:last-child  { border-bottom: none; }
.reg-event-row__content { flex: 1; min-width: 0; }
.reg-event-row__actions { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; }

.reg-event-row__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.reg-event-row__date {
  font-size: 13px;
  color: var(--tend-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.reg-event-row__type {
  font-size: 13px;
  font-weight: 600;
  color: var(--tend-green);
  white-space: nowrap;
}

.reg-event-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-text);
}

.reg-event-row__detail {
  font-size: 13px;
  color: var(--tend-text-muted);
  margin: 2px 0 0;
}

.reg-event-row__notes {
  font-size: 13px;
  color: var(--tend-text-muted);
  font-style: italic;
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .reg-table th,
  .reg-table td { padding: 10px 10px; }
}

/* Transfer modal radio group */
.sh-tr-radio-group { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.sh-tr-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tend-text); cursor: pointer; }

/* When-did-they-join button group (add shareholder modal) */
.sh-when-btn-group { display: flex; gap: 8px; margin-top: 8px; }
.sh-when-btn-group .sh-when-btn { flex: 1; }

/* ── Meeting Minutes page ────────────────────────────────────────────────── */

/* List view */
.min-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.min-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tend-card-bg);
}

.min-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--tend-border);
}
.min-list-row:last-child { border-bottom: none; }
.min-list-row:hover { background: var(--tend-bg); }
.min-list-row--clickable { cursor: pointer; }

.min-type-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--tend-bg);
  color: var(--tend-text-muted);
  border: 1px solid var(--tend-border);
  margin-bottom: 4px;
}
.min-type-tag--written {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}

.min-list-row__date {
  font-size: 15px;
  font-weight: 500;
  color: var(--tend-text);
}

.min-empty {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
}
.min-empty__title { font-size: 15px; font-weight: 500; color: var(--tend-text); margin-bottom: 6px; }
.min-empty__sub   { font-size: 14px; color: var(--tend-text-muted); }

/* Form view */
.min-form-wrap { max-width: 640px; }

.min-form-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--tend-border);
}
.min-form-section:last-of-type { border-bottom: none; }
.min-form-section .renewal-form__field + .renewal-form__field { margin-top: 14px; }

.min-form-section__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--tend-text-muted);
  margin-bottom: 14px;
}

.min-label-opt {
  font-weight: 400;
  color: var(--tend-text-muted);
  font-size: 13px;
}

.min-input--date  { max-width: 200px; }
.min-input--narrow { max-width: 160px; }

.min-section-helper { margin-top: -6px; margin-bottom: 14px; }

/* Attendees */
.min-attendees-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.min-attendee-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.min-attendee-row__chair {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--tend-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 62px;
  white-space: nowrap;
}
.min-attendee-row__chair input[type="radio"] { accent-color: var(--tend-green); }

.min-attendee-row__name   { flex: 1; min-width: 160px; }
.min-attendee-row__status { width: 130px; flex-shrink: 0; }

/* Quorum */
.min-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  color: var(--tend-text);
}
.min-checkbox-label input[type="checkbox"] {
  accent-color: var(--tend-green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Repeatable rows (resolutions, actions) */
.min-repeatable-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.min-form-section .renewal-form__textarea {
  width: 100%;
  box-sizing: border-box;
}

.min-resolution-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.min-resolution-ta { flex: 1; min-width: 0; box-sizing: border-box; resize: vertical; }

.min-action-item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.min-action-desc  { flex: 2; min-width: 0; box-sizing: border-box; }
.min-action-owner { flex: 1; min-width: 100px; box-sizing: border-box; }
.min-action-due   { width: 155px; flex-shrink: 0; box-sizing: border-box; }

/* Shared remove button used in all repeatable rows */
.min-row-remove { flex-shrink: 0; padding: 6px 10px; font-size: 16px; line-height: 1; }

.min-add-btn { margin-top: 2px; }

/* Scope disclosure */
.min-disclosure {
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--tend-bg);
  margin: 28px 0 8px;
  font-size: 14px;
  color: var(--tend-text-muted);
  line-height: 1.6;
}

/* Form footer */
.min-form-footer { padding-bottom: 48px; }
.min-form-footer__btns {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 600px) {
  .min-attendee-row__status { width: 110px; }
  .min-action-due { width: 130px; }
}

/* ── Document Vault page ─────────────────────────────────────────────────── */

.docs-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
}

.docs-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--tend-text-muted);
  white-space: nowrap;
}

.docs-filter-select {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--tend-border);
  border-radius: 6px;
  background: var(--tend-bg);
  color: var(--tend-text);
  cursor: pointer;
  font-family: inherit;
}

.docs-filter-date {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--tend-border);
  border-radius: 6px;
  background: var(--tend-bg);
  color: var(--tend-text);
  font-family: inherit;
}

.docs-source-toggle {
  display: flex;
  border: 1px solid var(--tend-border);
  border-radius: 6px;
  overflow: hidden;
}

.docs-source-btn {
  border: none;
  border-radius: 0;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  background: transparent;
  color: var(--tend-text-muted);
  cursor: pointer;
  transition: background 0.12s;
}

.docs-source-btn + .docs-source-btn {
  border-left: 1px solid var(--tend-border);
}

.docs-source-btn--active {
  background: var(--tend-green-light);
  color: var(--tend-green);
  font-weight: 600;
}

.docs-filter-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tend-text);
  cursor: pointer;
  white-space: nowrap;
}

.docs-clear-link {
  font-size: 13px;
  color: var(--tend-text-muted);
  white-space: nowrap;
  margin-left: auto;
}

.docs-clear-link:hover { color: var(--tend-text); }

/* Sortable column headers */
.docs-th--sortable {
  cursor: pointer;
  user-select: none;
}

.docs-th--sortable:hover { color: var(--tend-text); }

.docs-sort-arrow {
  display: inline-block;
  font-size: 11px;
  color: var(--tend-text-muted);
  width: 14px;
}

/* Source badges */
.docs-source-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
}

.docs-source-badge--generated {
  background: var(--tend-green-light);
  color: var(--tend-green);
}

.docs-source-badge--uploaded {
  background: var(--tend-amber-light);
  color: var(--tend-amber);
}

.docs-superseded-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 20px;
  background: #f3f4f6;
  color: var(--tend-text-muted);
  vertical-align: middle;
}

/* Linked-to column states */
.docs-linked-standalone {
  color: var(--tend-text-muted);
  font-style: italic;
}

.docs-linked-unlinked {
  color: var(--tend-amber);
  font-size: 12px;
  font-weight: 500;
}

/* Empty state */
.dash-empty-state {
  padding: 40px 0;
  text-align: center;
  color: var(--tend-text-muted);
  font-size: 15px;
}

@media (max-width: 900px) {
  .docs-filter-bar { gap: 10px; }
  .docs-clear-link { margin-left: 0; }
}

@media (max-width: 600px) {
  .docs-filter-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Contacts page ───────────────────────────────────────────────────────── */

.page-header-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Contacts grid — two columns at desktop and tablet, one at mobile */
.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Grid overlay: both faces in the same grid cell so the card's height is
   determined by whichever face is taller. Eliminates all back-face clipping
   and the overflow:auto scrollbar that resulted from it. */
.contact-card-inner {
  display: grid;
  min-height: 160px; /* sparse cards (name + one field) don't look stranded */
}

.contact-card-inner .dash-card-face--front {
  grid-area: 1 / 1;
  height: auto;    /* let grid stretching set the height, not percentage fill */
  padding: 24px;
  cursor: pointer;
}

/* Back face — placed in the same grid cell as the front face.
   Overrides .dash-card-face--back's position:absolute/inset:0 so the
   back participates in layout and the card grows to fit it. */
.contact-card-face--back {
  grid-area: 1 / 1;
  position: static; /* override position: absolute */
  inset: auto;      /* reset top/right/bottom/left */
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  overflow-y: visible; /* no scrolling — card height grows instead */
  gap: 0;
  padding: 20px;
}

/* Category label on card front */
.contact-card__category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tend-text-muted);
  margin-bottom: 4px;
}

/* Name on card front */
.contact-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--tend-text);
  line-height: 1.3;
  text-align: center;
}

/* Organisation on card front */
.contact-card__org {
  font-size: 13px;
  color: var(--tend-text-muted);
  text-align: center;
  margin-top: 2px;
}

/* Hint chevron on card front */
.contact-card__hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}
.contact-card__hint-icon {
  color: var(--tend-text-muted);
  opacity: 0.5;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}
.dash-card-wrapper:hover .contact-card__hint-icon { opacity: 0.9; }

/* System reference badge */
.contact-system-badge {
  font-size: 10px;
  font-weight: 500;
  color: var(--tend-text-muted);
  background: var(--tend-bg);
  border: 1px solid var(--tend-border);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
}

/* System cards get a muted background to distinguish them */
.contact-card--system .dash-card-face {
  background: var(--tend-bg);
}
.contact-card--system.dash-card-wrapper:hover .dash-card-face--front {
  border-color: #c8d4cc;
}

/* Back face header */
.contact-back__header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tend-border);
  width: 100%;
}
.contact-back__category {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tend-text-muted);
  margin-bottom: 2px;
}
.contact-back__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  line-height: 1.3;
}

/* Detail rows */
.contact-back__details { width: 100%; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.contact-back__detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--tend-text);
  line-height: 1.4;
}
.contact-back__detail-icon {
  flex-shrink: 0;
  color: var(--tend-text-muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
}
.contact-back__detail-value { flex: 1; word-break: break-word; }
.contact-back__detail-value a {
  color: var(--tend-text);
  text-decoration: none;
}
.contact-back__detail-value a:hover { color: var(--tend-green); text-decoration: underline; }

/* Footer section at bottom of back face */
.contact-back__footer {
  width: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--tend-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.contact-back__system-note {
  font-size: 11px;
  color: var(--tend-text-muted);
  font-style: italic;
  flex: 1;
  text-align: right;
}

/* Back face: prevent the lift transform from showing through when flipped */
.dash-card-inner--flipped .dash-card-face--front { pointer-events: none; }
.dash-card-inner--flipped .contact-card-face--back { pointer-events: auto; }

@media (max-width: 768px) {
  .contact-card-grid { grid-template-columns: 1fr; }
}

/* ── Notes module ──────────────────────────────────────────────────────────── */

.dash-main--notes { padding-bottom: 40px; }

.notes-layout {
  display: flex;
  min-height: 600px;
  border: 1px solid var(--tend-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tend-card-bg);
  box-shadow: var(--shadow);
}

/* List pane */
.notes-list-pane {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--tend-border);
  display: flex;
  flex-direction: column;
  background: var(--tend-bg);
}

.notes-list-toolbar {
  padding: 12px;
  border-bottom: 1px solid var(--tend-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.notes-search-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--tend-text);
  background: var(--tend-card-bg);
  outline: none;
  transition: border-color 0.15s;
}
.notes-search-input:focus { border-color: var(--tend-green); }

.notes-list { flex: 1; overflow-y: auto; }

.note-list-item {
  padding: 11px 14px;
  border-bottom: 1px solid var(--tend-border);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
  user-select: none;
}
.note-list-item:hover { background: var(--tend-green-light); }
.note-list-item--active {
  background: var(--tend-green-light);
  border-left-color: var(--tend-green);
}

.note-list-item__title-row { display: flex; align-items: center; gap: 5px; }

.note-list-item__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--tend-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.note-list-item__pin {
  color: var(--tend-green);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.note-list-item__meta { font-size: 11px; color: var(--tend-text-muted); margin-top: 3px; }
.note-list-empty { padding: 20px 14px; font-size: 13px; color: var(--tend-text-muted); }

/* Detail outer */
.notes-detail-outer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.notes-mobile-topbar {
  display: none;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tend-border);
  background: var(--tend-bg);
  flex-shrink: 0;
}

.notes-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-green);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}
.notes-back-btn:hover { text-decoration: underline; }

/* Detail pane */
.notes-detail-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 20px;
  overflow-y: auto;
  gap: 14px;
}

.note-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.note-detail-title {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  color: var(--tend-text);
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 2px 0 4px;
  background: transparent;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.3;
  font-family: inherit;
}
.note-detail-title:focus { border-bottom-color: var(--tend-green); }
.note-detail-title::placeholder { color: var(--tend-text-muted); font-weight: 400; }

.note-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.note-pin-btn {
  background: none;
  border: 1.5px solid var(--tend-border);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: var(--tend-text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.note-pin-btn:hover,
.note-pin-btn--active {
  background: var(--tend-green-light);
  border-color: var(--tend-green);
  color: var(--tend-green);
}

/* Mode toggle */
.note-mode-toggle {
  display: inline-flex;
  border: 1.5px solid var(--tend-border);
  border-radius: 6px;
  overflow: hidden;
}
.note-mode-btn {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: none;
  border: none;
  color: var(--tend-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}
.note-mode-btn + .note-mode-btn { border-left: 1.5px solid var(--tend-border); }
.note-mode-btn--active { background: var(--tend-green-light); color: var(--tend-green); font-weight: 600; }
.note-mode-btn:hover:not(.note-mode-btn--active) { background: var(--tend-bg); color: var(--tend-text); }

/* Body — single content area */
.note-content-wrap { flex: 1; display: flex; flex-direction: column; }

/* Edit mode wrapper (textarea + counter row) */
.note-edit-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.note-detail-body {
  width: 100%;
  min-height: 200px;
  padding: 11px 13px;
  border: 1.5px solid var(--tend-border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.65;
  font-family: inherit;
  color: var(--tend-text);
  background: var(--tend-bg);
  resize: none;
  overflow: hidden;
  outline: none;
  transition: border-color 0.15s;
  flex: 1;
}
.note-detail-body:focus { border-color: var(--tend-green); }
.note-detail-body::placeholder { color: var(--tend-text-muted); }

/* Counter + paste message row */
.note-body-meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}

.note-body-counter {
  font-size: 12px;
  color: transparent;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.2s;
}
.note-body-counter:not(:empty) { color: var(--tend-text-muted); }
.note-body-counter--amber { color: var(--tend-amber); }
.note-body-counter--red   { color: var(--tend-red); font-weight: 500; }

.note-paste-msg {
  font-size: 12px;
  color: var(--tend-amber);
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.3s ease;
  flex: 1;
}
.note-paste-msg--visible { opacity: 1; }

/* View mode — rendered Markdown */
.note-body-view {
  flex: 1;
  min-height: 200px;
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tend-text);
  word-break: break-word;
}
.note-body-view__empty { color: var(--tend-text-muted); font-style: italic; }
.note-body-view h1,
.note-body-view h2,
.note-body-view h3 { margin: 12px 0 6px; }
.note-body-view h1 { font-size: 17px; }
.note-body-view h2 { font-size: 15px; }
.note-body-view h3 { font-size: 14px; }
.note-body-view p  { margin-bottom: 8px; }
.note-body-view p:last-child { margin-bottom: 0; }
.note-body-view ul,
.note-body-view ol  { padding-left: 20px; margin-bottom: 8px; }
.note-body-view li  { margin-bottom: 3px; }
.note-body-view code {
  background: var(--tend-green-light);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}
.note-body-view pre {
  background: var(--tend-green-light);
  padding: 10px 12px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 8px;
}
.note-body-view pre code { background: none; padding: 0; }
.note-body-view blockquote {
  border-left: 3px solid var(--tend-green);
  padding-left: 12px;
  color: var(--tend-text-muted);
  margin-bottom: 8px;
}
.note-body-view a { color: var(--tend-green); }
.note-body-view a:hover { text-decoration: underline; }
.note-body-view strong { font-weight: 600; }
.note-body-view hr { border: none; border-top: 1px solid var(--tend-border); margin: 12px 0; }

/* Footer */
.note-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--tend-border);
  flex-shrink: 0;
  margin-top: auto;
}

.note-save-indicator { font-size: 12px; color: var(--tend-text-muted); transition: color 0.2s; }
.note-save-indicator--saving { color: var(--tend-amber); }
.note-save-indicator--error  { color: var(--tend-red); }

.note-delete-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--tend-text-muted);
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  transition: color 0.15s;
}
.note-delete-btn:hover { color: var(--tend-red); text-decoration: underline; }

/* Empty state */
.note-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 48px 24px;
}
.note-empty-state__icon { color: var(--tend-border); }
.note-empty-state__title { font-size: 16px; font-weight: 600; color: var(--tend-text); }
.note-empty-state__sub {
  font-size: 14px;
  color: var(--tend-text-muted);
  max-width: 280px;
  line-height: 1.5;
}

/* Notes mobile */
@media (max-width: 768px) {
  .notes-layout { flex-direction: column; min-height: unset; }
  .notes-list-pane {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--tend-border);
    max-height: 55vh;
  }
  .notes-detail-outer { display: none; }
  .notes-layout--detail-open .notes-list-pane { display: none; }
  .notes-layout--detail-open .notes-detail-outer {
    display: flex;
    flex-direction: column;
    min-height: 65vh;
  }
  .notes-mobile-topbar { display: flex; }
  .notes-detail-pane { padding: 16px; }
}

/* ── Share Allotment Modal ─────────────────────────────────────────────────── */

.allot-section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tend-text);
  margin-top: 4px;
  margin-bottom: 6px;
}

.allot-row {
  border: 1px solid var(--tend-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--tend-bg);
}
.allot-row__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.allot-row__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tend-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.allot-row__remove {
  font-size: 12px;
  padding: 3px 8px;
  height: auto;
  line-height: 1.4;
}
.allot-row__numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.allot-member-info {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.allot-member-info__name    { font-weight: 600; color: var(--tend-text); margin: 0 0 2px; }
.allot-member-info__address { margin: 0; color: var(--tend-text-muted); white-space: pre-wrap; }
.allot-new-fields { margin-bottom: 4px; }

.allot-add-btn { margin-top: 2px; }

.allot-totals {
  border: 1px solid var(--tend-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  background: var(--tend-bg);
}
.allot-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  color: var(--tend-text-muted);
}
.allot-totals__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--tend-text); }
.allot-totals__row--premium span:last-child { color: var(--tend-green); }

.allot-scope-note {
  border-left: 3px solid var(--tend-border);
  background: var(--tend-bg);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--tend-text-muted);
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
}

.allot-share-class-info {
  background: var(--tend-card-bg);
  border: 1px solid var(--tend-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 4px;
}
.allot-share-class-info__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.allot-share-class-info__key {
  color: var(--tend-text-muted);
  white-space: nowrap;
}
.allot-share-class-info__val {
  color: var(--tend-text);
  font-weight: 500;
  text-align: right;
}
.allot-share-class-info__edit {
  display: block;
  text-align: right;
  font-size: 11px;
  font-weight: 400;
  color: var(--tend-text-muted);
  margin-top: 5px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.allot-share-class-info__edit:hover { text-decoration: underline; }

.allot-empty-state {
  padding: 20px 0 8px;
  font-size: 14px;
  color: var(--tend-text-muted);
  line-height: 1.6;
}
.allot-empty-state p { margin: 0 0 10px; }
.allot-empty-state__link { font-size: 13px; }

.allot-next-steps {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--tend-green-light);
  border-left: 3px solid var(--tend-green);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--tend-text);
}
.allot-next-steps ol { margin: 6px 0 0 16px; padding: 0; }
.allot-next-steps li { margin-bottom: 3px; line-height: 1.5; }

.reg-cert-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cert-num-text {
  font-size: 13px;
  color: var(--tend-text-muted);
  font-weight: 500;
}
.cert-regen-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--tend-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.cert-regen-btn:hover { color: var(--tend-text); }

.shares-doc-guidance {
  border-left: 3px solid var(--tend-border);
  background: #f8faf9;
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 8px;
}
.shares-doc-guidance__title {
  font-weight: 600;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--tend-text);
}
.shares-doc-guidance__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shares-doc-guidance__items li {
  margin-bottom: 5px;
  color: var(--tend-text-muted);
}
.shares-doc-guidance__items li strong { color: var(--tend-text); }

@media (max-width: 480px) {
  .allot-row__numbers { grid-template-columns: 1fr; }
}

/* ── Shares page restructure ────────────────────────────────────────────── */

/* Inline regulatory note — subtle, not a banner */
.reg-reg-note {
  font-size: 13px;
  font-style: italic;
  color: var(--tend-text-muted);
  border-left: 2px solid var(--tend-border);
  padding: 2px 0 2px 12px;
  margin-bottom: 20px;
  line-height: 1.55;
}

/* Collapsible past-members section */
.reg-past-details {
  margin-top: 20px;
  border-top: 1px solid var(--tend-border);
}
.reg-past-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--tend-text);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.reg-past-details > summary::-webkit-details-marker { display: none; }
.reg-past-details > summary::marker { display: none; }
.reg-past-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--tend-text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.reg-past-details[open] .reg-past-chevron { transform: rotate(90deg); }
.reg-past-body { padding-bottom: 4px; }

/* Actions row — two peer buttons */
.reg-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Calendar page ──────────────────────────────────────────────────────────── */

.dash-page-subtitle {
  font-size: 14px;
  color: var(--tend-text-muted);
  margin-top: 4px;
}

.cal-sync-panel {
  background: var(--tend-green-light);
  border-left: 3px solid var(--tend-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 20px 10px;
}

.cal-sync-panel__heading {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: var(--tend-text);
}

.cal-sync-panel__subtitle {
  font-size: 12px;
  color: var(--tend-text-muted);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.cal-ical-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 0;
}

/* Buttons inside the green sync panel — white fill so they're legible */
.cal-sync-panel .btn--ghost {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.cal-sync-panel .btn--ghost:hover {
  background: #f5f7f5;
}

/* Instruction blocks scoped to the sync panel */
.cal-sync-panel .settings-cal-cards {
  margin-top: 10px;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.cal-sync-panel .settings-cal-card {
  padding: 7px 10px;
}

.cal-sync-panel .settings-cal-card__name {
  font-size: 12px;
  margin-bottom: 3px;
}

.cal-sync-panel .settings-cal-card__steps {
  font-size: 12px;
  line-height: 1.4;
}

/* Compact calendar cards (type + date + title per row) */
.cal-card-list { margin-top: 4px; }

.cal-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

.cal-card:hover {
  background: var(--tend-card-bg);
  border-color: var(--tend-border);
}

.cal-card__type {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--tend-text-muted);
}

.cal-card__date {
  font-size: 13px;
  color: var(--tend-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 48px;
}

.cal-card__title {
  font-size: 14px;
  color: var(--tend-text);
  flex: 1;
}

.cal-card__overdue {
  font-size: 12px;
  color: var(--tend-red);
  white-space: nowrap;
  margin-left: auto;
}

/* Empty state */
.cal-empty {
  text-align: center;
  padding: 48px 24px;
}

.cal-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tend-text);
  margin-bottom: 8px;
}

.cal-empty__sub {
  font-size: 14px;
  color: var(--tend-text-muted);
}

@media (max-width: 600px) {
  .cal-sync-panel { padding: 8px 12px 10px; }
}

/* ── Contact page ─────────────────────────────────────────────────────────── */
.contact-wrap { max-width: 560px; }

.contact-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--tend-red-light, #fef2f2);
  border-left: 3px solid var(--tend-red);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
  border: 0;
  padding: 0;
}

.contact-message-textarea { min-height: 160px; }

.contact-form__actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .contact-form__actions .btn { width: 100%; }
}

.contact-confirmation { max-width: 560px; padding-top: 8px; }

.contact-confirmation__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--tend-text);
  margin-bottom: 8px;
}

.contact-confirmation__body { font-size: 14px; color: var(--tend-text-muted); margin-bottom: 16px; }

.contact-confirmation__again { font-size: 14px; }

/* ── Info-icon subtitle treatment (shared across 7 module pages) ────────── */
.page-subtitle--with-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-subtitle--with-info > svg {
  flex-shrink: 0;
}

.page-subtitle--with-info > span {
  flex: 1;
}