/* Winelands Dentistry Dashboard - shared stylesheet.
   Every page used to carry its own copy of this (header, nav, card, badge,
   table, form styling - identical almost word-for-word) - about 500 lines
   duplicated 8 times. Consolidated here once, so every page looks and
   behaves consistently and a design change only has to happen in one
   place. Page-specific sections (Mission Control's health banner, the
   turnover-review status cards, etc.) live at the bottom, clearly marked. */

:root {
  /* Core palette - every color used across the dashboard traces back to
     one of these, so "make it feel like one system" is a fact of the
     code, not just a style guide someone has to remember to follow. */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-text-faint: #8a8a8a;
  --color-border: #e5e7eb;
  --color-border-light: #f0f0f0;
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;

  /* Status colors - one pair (background/foreground) per meaning, reused
     everywhere a badge, banner, or flag needs to say "good/warn/danger" -
     this is the one set every status indicator on the site draws from,
     whatever it's individually named in a given template (badge, flag,
     status-badge, alert-pill all resolve to the same four meanings). */
  --status-good-bg: #dcfce7;
  --status-good-fg: #166534;
  --status-good-dot: #16a34a;
  --status-warn-bg: #fef3c7;
  --status-warn-fg: #92400e;
  --status-warn-dot: #d97706;
  --status-danger-bg: #fee2e2;
  --status-danger-fg: #991b1b;
  --status-danger-dot: #dc2626;
  --status-neutral-bg: #f3f4f6;
  --status-neutral-fg: #6b7280;

  /* Spacing/radius scale - consistent rounding and gaps instead of each
     page picking its own 8px/10px/6px at random. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 2px 10px rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
}

/* ---------- Header & navigation (shared across every logged-in page) ---------- */

header.site-header {
  background: var(--color-surface);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site-header h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }
header.site-header nav { display: flex; align-items: center; gap: 1.25rem; }
header.site-header nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
header.site-header nav a:hover { color: var(--color-primary); }
header.site-header nav a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 500;
}
header.site-header nav .user-name { color: var(--color-text-muted); font-size: 0.9rem; }
header.site-header nav form { margin: 0; }
header.site-header button {
  background: none;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
}
header.site-header button:hover { background: #f9fafb; }

@media (max-width: 700px) {
  header.site-header { flex-wrap: wrap; padding: 0.75rem 1rem; gap: 0.5rem; position: static; }
  header.site-header nav { flex-wrap: wrap; gap: 0.6rem; font-size: 0.85rem; }
}

main { padding: 2rem; max-width: 1100px; margin: 0 auto; }
@media (max-width: 700px) { main { padding: 1rem; } }

h1, h2, h3 { color: var(--color-text); }

/* ---------- Cards, the base building block everywhere ---------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.card h2 { font-size: 1rem; margin: 0 0 1rem; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { box-shadow: var(--shadow-card-hover); }

.section-title { font-size: 1.1rem; margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- Text/note callouts ---------- */

.note, .chart-note {
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin: 0 0 1.1rem;
}
div.note {
  background: var(--status-warn-bg);
  border: 1px solid #fde68a;
  color: var(--status-warn-fg);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.empty { color: #888; font-size: 0.9rem; }
.meta { color: #999; font-size: 0.78rem; }

/* ---------- Badges / flags / status pills - one visual language ---------- */

.badge, .flag, .status-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
}
.badge.met, .badge.under, .badge-good { background: var(--status-good-bg); color: var(--status-good-fg); }
.badge.due, .badge-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.badge.over, .badge.overdue, .flag.overdue, .badge-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.badge.not-met, .badge.terminated, .status-badge.terminated, .badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.flag.due { background: var(--status-warn-bg); color: var(--status-warn-fg); }

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
th:last-child, td:last-child { text-align: right; }
th { color: var(--color-text-muted); font-weight: 600; font-size: 0.82rem; }

/* ---------- Forms ---------- */

label { display: block; margin-top: 1rem; font-size: 0.85rem; color: #333; font-weight: 500; }
input, select, textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
textarea { resize: vertical; min-height: 4rem; }
.hint { font-size: 0.78rem; color: var(--color-text-faint); margin-top: 0.25rem; }

/* ---------- Buttons ---------- */

button, .button, button.primary {
  padding: 0.55rem 1.1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease;
}
button:hover, .button:hover, button.primary:hover { background: var(--color-primary-dark); }
.link-btn, button.danger-link {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  text-decoration: underline;
}
.link-btn.danger, button.danger-link { color: var(--status-danger-fg); }
form.inline { display: inline; }

/* ---------- Metric rows (label/value pairs used all over) ---------- */

.metric-row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.35rem; }
.metric-row strong { color: var(--color-text); }

/* ---------- Progress bars ---------- */

.progress-track, .pace-track {
  background: var(--color-border);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin: 0.5rem 0 0.75rem;
}
.progress-fill, .pace-fill { height: 100%; border-radius: 999px; background: var(--color-primary); }
.progress-fill.met { background: var(--status-good-dot); }
.progress-fill.not-met { background: var(--color-primary); }

/* ================================================================
   Page-specific sections below - not reused elsewhere, kept together
   here (rather than back in each view) so there's still exactly one
   stylesheet for the whole app.
   ================================================================ */

/* --- Mission Control (dashboard.ejs) --- */

.health-banner {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem;
  border-radius: var(--radius-lg); margin-bottom: 1.5rem; border: 1px solid transparent;
}
.health-banner.good { background: #f0fdf4; border-color: #bbf7d0; }
.health-banner.watch { background: var(--status-warn-bg); border-color: #fde68a; }
.health-banner.concern { background: #fef2f2; border-color: #fecaca; }
.health-banner .verdict { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.health-banner .verdict .dot { width: 12px; height: 12px; border-radius: 999px; }
.health-banner.good .verdict .dot { background: var(--status-good-dot); }
.health-banner.watch .verdict .dot { background: var(--status-warn-dot); }
.health-banner.concern .verdict .dot { background: var(--status-danger-dot); }
.health-banner .verdict .label { font-size: 1rem; font-weight: 700; }
.health-banner.good .verdict .label { color: var(--status-good-fg); }
.health-banner.watch .verdict .label { color: var(--status-warn-fg); }
.health-banner.concern .verdict .label { color: var(--status-danger-fg); }
.health-items { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.82rem; color: #444; }
.health-items .health-item { display: flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; }
.health-items .health-item .item-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.health-items .health-item.good .item-dot { background: var(--status-good-dot); }
.health-items .health-item.watch .item-dot { background: var(--status-warn-dot); }
.health-items .health-item.concern .item-dot { background: var(--status-danger-dot); }
.health-items .health-item.info .item-dot { background: #9ca3af; }
.health-items .health-item strong { font-weight: 600; }
.health-fine-note { font-size: 0.78rem; color: var(--status-good-fg); margin: -1rem 0 1.5rem; padding-left: 0.25rem; }
@media (max-width: 700px) { .health-banner { flex-direction: column; align-items: flex-start; } }

.alert-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.alert-pill {
  display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-size: 0.85rem; font-weight: 500; padding: 0.55rem 0.9rem; border-radius: var(--radius-md);
  border: 1px solid transparent; max-width: 100%;
}
.alert-pill .dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.alert-pill .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-pill.warn { background: var(--status-warn-bg); border-color: #fde68a; color: var(--status-warn-fg); }
.alert-pill.warn .dot { background: var(--status-warn-dot); }
.alert-pill.ok { background: #f0fdf4; border-color: #bbf7d0; color: var(--status-good-fg); }
.alert-pill.ok .dot { background: var(--status-good-dot); }
.alert-pill .count { font-weight: 700; }

.pulse-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .pulse-row { grid-template-columns: 1fr 1fr; } }
.pulse-tile { padding: 1.1rem 1.25rem; border-top: 3px solid var(--tile-accent, #cbd5e1); }
.pulse-tile .tile-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin-bottom: 0.4rem; }
.pulse-tile .tile-figure { font-size: 1.45rem; font-weight: 700; color: var(--tile-accent, #111); letter-spacing: -0.01em; line-height: 1.2; }
.pulse-tile .tile-sub { font-size: 0.76rem; color: #888; margin-top: 0.35rem; line-height: 1.4; }

.pace-card .chart-note { margin: 0 0 1.1rem; }
.pace-row { margin-bottom: 0.9rem; }
.pace-row:last-child { margin-bottom: 0; }
.pace-row .pace-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.35rem; }
.pace-row .pace-label .name { font-weight: 500; }
.pace-row .pace-label .figure { color: #666; font-size: 0.8rem; }
.pace-empty { font-size: 0.8rem; color: #999; font-style: italic; }

.needs-card .chart-note { margin: 0 0 1.1rem; }
.need-row { display: flex; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-light); }
.need-row:last-child { border-bottom: none; }
.need-who {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--status-warn-fg);
  background: var(--status-warn-bg); border: 1px solid #fde68a; border-radius: 999px;
  padding: 0.15rem 0.55rem; height: fit-content; white-space: nowrap;
}
.need-body .need-label { font-size: 0.88rem; font-weight: 500; }
.need-body .need-detail { font-size: 0.78rem; color: #888; margin-top: 0.15rem; }
.needs-all-clear { font-size: 0.85rem; color: var(--status-good-fg); }

.chart-box { padding: 1.5rem; }
.chart-box .chart-note { margin: 0 0 1rem; }
.last-synced { font-size: 0.78rem; color: #999; margin: -0.75rem 0 1.5rem; }

/* --- KPI page --- */

.branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .branch-grid { grid-template-columns: 1fr; } }
.bonus-pool { font-size: 1.3rem; font-weight: 600; margin-top: 0.5rem; }
.leadership-grid { display: flex; gap: 1rem; margin-top: 0.75rem; }
.leadership-grid .person { flex: 1; background: #f9fafb; border-radius: var(--radius-sm); padding: 0.75rem; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .overview-grid { grid-template-columns: 1fr; } }
.headroom-total { font-size: 1.6rem; font-weight: 600; margin: 0.5rem 0; }

.kpi-jump-nav {
  display: flex; flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto;
  padding: 0.6rem 0 1.5rem; margin-bottom: 0.5rem;
  position: sticky; top: 57px; z-index: 5; background: var(--color-bg);
}
.kpi-jump-nav a {
  flex-shrink: 0; text-decoration: none; font-size: 0.8rem; font-weight: 500;
  color: var(--color-text-muted); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 0.35rem 0.8rem;
  white-space: nowrap;
}
.kpi-jump-nav a:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* Anchors land below the sticky header + jump nav, not hidden under them. */
.section-title[id] { scroll-margin-top: 120px; }

/* --- HR overview (hr.ejs) --- */

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
/* Flex children are always blockified regardless of their own display value,
   so this label sits beside the Add button purely from .toolbar's flex
   layout - `display` here is moot. margin-top:0 is what actually matters:
   it cancels the generic form label rule's 1rem top margin, which would
   otherwise misalign this checkbox label against the button next to it. */
.toolbar label { margin-top: 0; font-size: 0.85rem; color: #555; font-weight: 400; }
.branch-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.branch-tab {
  display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
  font-size: 0.85rem; font-weight: 500; padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--color-surface); color: #444; border: 1px solid var(--color-border);
}
.branch-tab .count { font-size: 0.75rem; color: #999; }
.branch-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.branch-tab.active .count { color: rgba(255, 255, 255, 0.75); }
.overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; }
@media (max-width: 700px) { .overview { grid-template-columns: 1fr; } }
.overview .card h2 { font-size: 0.85rem; color: #666; margin: 0 0 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.overview .figure { font-size: 1.8rem; font-weight: 700; }
.overview .figure-note { font-size: 0.8rem; color: var(--status-warn-fg); margin-top: 0.4rem; }
.overview .attention-item { display: block; text-decoration: none; color: inherit; font-size: 0.82rem; padding: 0.3rem 0; border-bottom: 1px solid var(--color-border-light); }
.overview .attention-item:last-child { border-bottom: none; }
.overview .attention-item strong { display: block; }
.overview .attention-item span { color: var(--status-danger-fg); }
.overview .all-clear { font-size: 0.85rem; color: var(--status-good-dot); }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.staff-grid .card .role { font-size: 0.85rem; color: #666; margin-bottom: 0.9rem; }
.balance-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.35rem; color: #444; }
.balance-row strong { color: var(--color-text); }
.badges { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- HR staff profile (hr-staff.ejs) --- */

.profile-head { display: flex; justify-content: space-between; align-items: flex-start; }
.login-status { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.profile-head h1 { font-size: 1.4rem; margin: 0 0 0.2rem; }
.profile-head .role { color: #666; font-size: 0.95rem; }
.attribution { font-size: 0.78rem; color: #999; margin-top: 0.75rem; }
.balances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .balances-grid { grid-template-columns: 1fr; } }
.balance-card .balance-figure { font-size: 2rem; font-weight: 700; color: var(--color-primary); margin: 0.25rem 0; }
.balance-card .balance-label { font-size: 0.85rem; color: #666; }
.balance-card .breakdown { font-size: 0.8rem; color: #888; margin-top: 0.5rem; }
.balance-card .breakdown div { display: flex; justify-content: space-between; margin-bottom: 0.15rem; }
form.inline-form { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border-light); }
form.inline-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
form.inline-form label { margin-top: 0.6rem; font-size: 0.8rem; }
@media (max-width: 700px) { form.inline-form .field-row { grid-template-columns: 1fr; } }
.contract-entry { border-bottom: 1px solid var(--color-border-light); padding: 0.75rem 0; }
.contract-entry:last-child { border-bottom: none; }
.contract-entry summary { cursor: pointer; font-weight: 500; }
.contract-entry pre { white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; margin: 0.6rem 0 0; color: #333; }
.flags { margin-top: 0.75rem; }
.flag { margin-right: 0.4rem; }
.entitlement-warning { font-size: 0.78rem; color: var(--status-danger-fg); margin-top: 0.35rem; background: var(--status-danger-bg); padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); }

/* --- HR staff form (hr-staff-form.ejs) --- */

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }
.section-divider { margin: 1.75rem 0 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light); font-size: 0.9rem; font-weight: 600; color: #444; }

/* --- Financial documents --- */

.upload-grid, .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .upload-grid, .form-grid { grid-template-columns: 1fr; } }
.full-width { grid-column: 1 / -1; }
.upload-actions, .form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.doc-type-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem;
  border-radius: 999px; background: #eff6ff; color: var(--color-primary-dark); margin-bottom: 0.2rem;
}
.doc-title { font-weight: 500; }
.doc-meta { font-size: 0.78rem; color: #888; }
.doc-notes { font-size: 0.82rem; color: #555; margin-top: 0.2rem; }
.section-group { margin-bottom: 1.75rem; }
.section-group h3 { font-size: 0.85rem; color: #666; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.5rem; }

/* --- Reviewed Turnover page --- */

.intro {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.intro h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.steps { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.88rem; color: #333; }
.steps .step { display: flex; gap: 0.65rem; align-items: baseline; }
.steps .step .num {
  flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #eff6ff; color: var(--color-primary-dark); font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps .note { font-size: 0.8rem; color: #888; margin-top: 0.4rem; padding-left: 2rem; }

.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .status-grid { grid-template-columns: 1fr; } }
.status-card {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 1.25rem; border-top: 3px solid var(--accent, #cbd5e1);
}
.status-card.reviewed { --accent: var(--status-good-dot); }
.status-card.pending { --accent: var(--status-warn-dot); }
.status-card .branch-name { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; }
.status-card .state-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 999px; display: inline-block; margin-bottom: 0.6rem; }
.status-card.reviewed .state-label { background: var(--status-good-bg); color: var(--status-good-fg); }
.status-card.pending .state-label { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.status-card .figure { font-size: 1.4rem; font-weight: 700; }
.status-card .sub { font-size: 0.78rem; color: #888; margin-top: 0.35rem; }
.status-card .goodx-ref { font-size: 0.82rem; color: #555; margin-top: 0.5rem; }
.goodx-hint { font-size: 0.82rem; color: var(--color-primary-dark); background: #eff6ff; border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; margin-top: 0.4rem; }
.review-meta { font-size: 0.78rem; color: #888; }
.review-notes { font-size: 0.82rem; color: #555; margin-top: 0.2rem; }

/* --- Login page (no header/nav - standalone centered layout) --- */

body.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
}
.login-form {
  background: var(--color-surface); padding: 2rem; border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); width: 300px; max-width: 100%;
}
.login-form h1 { font-size: 1.2rem; margin-top: 0; }
.login-form label { font-size: 0.9rem; }
.remember-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.remember-row input { width: auto; margin: 0; }
.remember-row label { display: inline; margin: 0; font-size: 0.85rem; color: #444; }
.login-form button { width: 100%; margin-top: 1.5rem; }
.login-error { color: var(--status-danger-fg); font-size: 0.85rem; margin-top: 1rem; }
.login-message { color: var(--status-good-fg); font-size: 0.85rem; margin-top: 1rem; }