/* CommUnityIQ design system — shared across all CommUnityIQ screens.
   Brand direction (deep teal + terracotta) is fixed by docs/09-design-system.md; this file is the
   modern execution of it: Plus Jakarta Sans, soft layered depth, pill navigation, focus glows. */

/* Plus Jakarta Sans, self-hosted (variable weight; see wwwroot/fonts/README.txt). The browser downloads only the subset a page needs. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-primary-900: #0b3a3a;
  --color-primary-700: #0f5757;
  --color-primary-600: #146868;
  --color-primary-500: #1a7a7a;
  --color-primary-200: #c5e2e0;
  --color-primary-100: #e3f1f1;
  --color-primary-50:  #f1f8f8;
  --color-accent-700: #a04a1f;
  --color-accent-600: #c8622d;
  --color-accent-500: #d97a45;
  --color-accent-100: #fbe9dd;

  --color-ink-900: #14201e;
  --color-ink-700: #3a4643;
  /* Darkened from #6b7573 for WCAG AA (4.5:1) on the lightest surfaces; .text-muted is used
     across most screens, so this one variable clears the violation everywhere. */
  --color-ink-500: #5d6967;
  --color-ink-300: #a8b0ad;
  --color-ink-100: #e8ecea;
  --color-surface: #ffffff;
  /* Cool, teal-tinted canvas so white cards lift off it (was a warm off-white). */
  --color-surface-muted: #f2f6f5;
  --color-border: #dde5e3;

  --color-success: #1f7a4d;   --color-success-bg: #e5f4ec;
  --color-warning: #8f5c14;   --color-warning-bg: #fbf0dd;
  --color-danger:  #b3392f;   --color-danger-bg:  #fbe8e6;
  --color-info:    #1a6ea8;   --color-info-bg:    #e6f1f9;

  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-3xl: 2.25rem; --text-4xl: 3rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(11,58,58,.05), 0 6px 20px -6px rgba(11,58,58,.10);
  --shadow-raised: 0 2px 4px rgba(11,58,58,.06), 0 14px 32px -10px rgba(11,58,58,.18);
  --shadow-modal: 0 24px 60px -12px rgba(11,58,58,.35);
  --ring: 0 0 0 4px rgba(26,122,122,.18);

  --auth-bg: radial-gradient(900px 500px at 15% -10%, #cfe9e6 0%, transparent 60%),
             radial-gradient(700px 480px at 100% 110%, #fbe9dd 0%, transparent 55%),
             var(--color-primary-50);
}

* { box-sizing: border-box; }
/* Component display rules (e.g. .btn { display: inline-flex }) must not override the hidden attribute. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-ink-900);
  background: var(--color-surface-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--space-3); color: var(--color-ink-900); }
h1 { font-size: var(--text-4xl); letter-spacing: -0.03em; } h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }  h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); color: var(--color-ink-700); }
a { color: var(--color-primary-600); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-primary-900); text-decoration: underline; }
/* Links inline in body text need a non-color cue at rest too (WCAG 1.4.1) — nav/button-style links opt out via .btn/.nav-links/etc. */
p a, li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--color-primary-200); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-5); }
@media (max-width: 640px) { .container, .container-narrow { padding: 0 var(--space-4); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--color-primary-500); color: #fff; box-shadow: 0 1px 2px rgba(11,58,58,.2), 0 6px 14px -6px rgba(26,122,122,.6); }
.btn-primary:hover { background: var(--color-primary-600); color: #fff; }
/* accent-700 (not 600) is the default background so white text clears WCAG AA 4.5:1. */
.btn-accent { background: var(--color-accent-700); color: #fff; box-shadow: 0 1px 2px rgba(120,50,15,.25), 0 6px 14px -6px rgba(160,74,31,.55); }
.btn-accent:hover { background: #8a3f1a; color: #fff; }
.btn-secondary { background: #fff; color: var(--color-primary-700); border-color: var(--color-border); box-shadow: 0 1px 2px rgba(11,58,58,.05); }
.btn-secondary:hover { border-color: var(--color-primary-500); background: var(--color-primary-50); color: var(--color-primary-700); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #962d25; color: #fff; }
.btn-ghost { background: transparent; color: var(--color-ink-700); }
.btn-ghost:hover { background: var(--color-ink-100); color: var(--color-ink-900); }
.btn-sm { padding: 7px 14px; font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5);
}
.card-flush { padding: 0; overflow: hidden; }

/* ---------- Badges / status pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-neutral { background: var(--color-ink-100); color: var(--color-ink-700); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; color: var(--color-ink-900); }
.field .required { color: var(--color-danger); margin-left: 2px; }
.field .help { font-size: var(--text-xs); color: var(--color-ink-500); margin-top: 4px; }
.field .error { font-size: var(--text-xs); color: var(--color-danger); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
/* A form-level error message (e.g. the validation summary above a sign-in form): danger-coloured text, list bullets tucked in. */
.form-error, .form-error ul, .form-error li { color: var(--color-danger); }
.form-error { font-size: var(--text-sm); font-weight: 500; }
.form-error ul { margin: 0; padding-left: var(--space-4); }
/* Modern inputs: soft tinted fill, thin border, gentle inner shadow; they turn white with a teal ring on focus. */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=datetime-local],
input[type=time], input[type=month], input[type=number], input[type=search], input[type=url], select, textarea {
  width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.4;
  padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid #d5dfdc;
  background-color: #f9fbfa; color: var(--color-ink-900);
  box-shadow: inset 0 1px 2px rgba(11,58,58,.04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: #7a8683; opacity: 1; }
input:hover:not(:disabled):not([readonly]), select:hover:not(:disabled), textarea:hover:not(:disabled):not([readonly]) { border-color: var(--color-ink-300); background-color: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary-500); background-color: #fff; box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--color-surface-muted); color: var(--color-ink-500); cursor: not-allowed; }
input[readonly], textarea[readonly] { background-color: var(--color-surface-muted); }
/* Selects: our own chevron instead of the browser's. */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6967' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
select[multiple] { background-image: none; padding-right: 14px; }
/* Search fields get a magnifier. */
input[type=search] {
  padding-left: 38px; background-repeat: no-repeat; background-position: 13px center; background-size: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8683' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
}
/* Checkboxes and radios: larger, themed, with a clear focus ring. */
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary-500); width: 18px; height: 18px; cursor: pointer; flex: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 3px solid rgba(26,122,122,.35); outline-offset: 2px; }
input[type=range] { accent-color: var(--color-primary-500); width: 100%; }
/* Native file buttons (where a file input is used without the drop zone). */
input[type=file] { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-ink-700); max-width: 100%; }
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-primary-200);
  background: var(--color-primary-50); color: var(--color-primary-700); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
input[type=file]::file-selector-button:hover { background: var(--color-primary-100); }
.input-error { border-color: var(--color-danger) !important; background-color: var(--color-danger-bg) !important; }
textarea { resize: vertical; min-height: 100px; }
input[type=color] { width: 44px; height: 38px; padding: 3px; border-radius: var(--radius-md); border: 1px solid #d5dfdc; background: #fff; cursor: pointer; }

/* ---------- Drag-and-drop file area (js/dropzone.js) ---------- */
.dz {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: pointer;
  padding: var(--space-5) var(--space-4); border: 2px dashed #c3d2ce; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fbfdfc, #f3f8f7); color: var(--color-ink-700); font-size: var(--text-sm);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dz:hover, .dz:focus-visible, .dz.over { border-color: var(--color-primary-500); background: var(--color-primary-50); outline: none; }
.dz.over { transform: scale(1.01); box-shadow: var(--ring); }
.dz.has-files { padding: var(--space-3) var(--space-4); }
.dz-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-100); color: var(--color-primary-600); }
.dz.has-files .dz-icon { display: none; }
.dz-link { color: var(--color-primary-600); text-decoration: underline; font-weight: 600; }
.dz-hint { font-size: var(--text-xs); color: var(--color-ink-500); }
.dz-msg { margin-top: 8px; font-size: var(--text-xs); color: var(--color-danger); font-weight: 600; }
.dz-msg[hidden] { display: none; }
.dz-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.dz-list:empty { display: none; }
.dz-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.dz-thumb { flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--color-ink-100); display: grid; place-items: center; }
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-thumb-doc { background: var(--color-primary-100); color: var(--color-primary-700); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.dz-info { min-width: 0; flex: 1; }
.dz-name { font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-size { font-size: 11px; color: var(--color-ink-500); }
.dz-remove { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--color-ink-100); color: var(--color-ink-700); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.dz-remove:hover { background: var(--color-danger); color: #fff; }
.checkbox-row, .radio-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }

/* ---------- Tables ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data-table th {
  text-align: left; font-size: var(--text-xs); font-weight: 600;
  color: var(--color-ink-500); padding: 12px 16px; border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-primary-50);
}
table.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-ink-100); vertical-align: middle; }
table.data-table tbody tr { transition: background .12s ease; }
table.data-table tbody tr:hover td { background: var(--color-primary-50); }
table.data-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
  table.data-table thead { display: none; }
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
  table.data-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: #fff; }
  table.data-table td { border: none; padding: 6px 4px; display: flex; justify-content: space-between; gap: var(--space-3); }
  table.data-table td::before { content: attr(data-label); font-weight: 600; color: var(--color-ink-500); font-size: var(--text-xs); }
}

/* ---------- Top nav (Public / Homeowner) ---------- */
.topnav {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20;
}
.topnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); height: 68px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-primary-900); }
.brand:hover { text-decoration: none; color: var(--color-primary-900); }
.brand .logo { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.brand .mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-900)); }
.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a { color: var(--color-ink-700); font-weight: 600; font-size: var(--text-sm); padding: 8px 14px; border-radius: var(--radius-pill); transition: background .15s ease, color .15s ease; }
.nav-links a:hover { background: var(--color-ink-100); color: var(--color-ink-900); text-decoration: none; }
.nav-links a.active { background: var(--color-primary-100); color: var(--color-primary-700); }
.nav-actions { display: flex; gap: var(--space-2); align-items: center; }
.nav-toggle { display: none; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); background: none; border: none; border-radius: var(--radius-md); font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-ink-700); padding: 4px 8px; }
.nav-toggle:hover { background: var(--color-ink-100); }
/* Below 860px the inline nav would overflow, so it collapses behind a toggle button. */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; order: 1; }
  .nav-actions { order: 2; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: var(--space-3); right: var(--space-3); z-index: 30;
    flex-direction: column; align-items: stretch; gap: 2px; background: var(--color-surface); padding: var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
}

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, var(--color-primary-900) 0%, #072b2b 100%); color: #cfe3e0; padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-8); }
.site-footer a { color: #d9ece9; }
.site-footer a:hover { color: #fff; }
.footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.footer-meta { font-size: var(--text-xs); color: #9fc4c0; }

/* ---------- Icons (img/icons.svg sprite) ---------- */
svg.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: -4px; }
svg.icon-sm { width: 16px; height: 16px; vertical-align: -3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-3); top: -60px; z-index: var(--z-skip); padding: 10px 16px; border-radius: var(--radius-sm); background: var(--color-primary-900); color: #fff; font-weight: 600; }
.skip-link:focus { top: var(--space-3); color: #fff; text-decoration: none; }

/* ---------- Admin shell ---------- */
:root {
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --z-sticky: 20; --z-drawer: 40; --z-menu: 30; --z-skip: 100;
  --sidebar-width: 264px; --topbar-height: 56px; --touch-target: 44px;
}
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: var(--sidebar-width); flex-shrink: 0; color: #d9ece9;
  background: linear-gradient(190deg, #0f4646 0%, var(--color-primary-900) 55%, #072b2b 100%);
  padding: var(--space-5) var(--space-3); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: var(--weight-bold); padding: 0 var(--space-2) var(--space-4); }
.nav-group { margin-bottom: var(--space-3); }
.nav-group-title { margin: 0 0 4px; padding: 0 12px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: #9cc4c0; }
/* A group title is a button: it folds its links away and remembers that (shell.js). Without script every group stays open. */
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 2px; padding: 6px 12px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: #9cc4c0; font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: left; cursor: pointer;
}
.nav-group-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group-toggle .icon { transition: transform .15s ease; }
.nav-group.is-folded .nav-group-toggle .icon { transform: rotate(-90deg); }
.nav-group.is-folded .nav-items { display: none; }
.sidebar-collapse {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; margin-top: var(--space-2); padding: 8px 12px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: #9cc4c0; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-collapse .icon { transform: rotate(180deg); transition: transform .2s ease; }
.sidebar-collapse:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-group-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.12); }
.admin-nav a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 12px; border-radius: var(--radius-md);
  color: #cfe3e0; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 2px;
  transition: background .15s ease, color .15s ease;
}
.admin-nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.admin-nav a.active { background: rgba(255,255,255,.14); color: #fff; font-weight: var(--weight-semibold); }
.admin-nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--color-accent-500); }
.admin-nav a:focus-visible, .admin-sidebar button:focus-visible { outline-color: #fff; }
.admin-portal-link { border: 1px solid rgba(255,255,255,.18); }

.admin-scrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(7,43,43,.55); }
.admin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-main { flex: 1; min-width: 0; padding: var(--space-6) var(--space-6) var(--space-8); }
.admin-main:focus { outline: none; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }

/* Top bar: menu button (small screens), breadcrumb, account menu. */
.shell-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--topbar-height); padding: 0 var(--space-6); background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.shell-menu-btn {
  display: none; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); margin-left: calc(var(--space-2) * -1);
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-ink-900); cursor: pointer;
}
.shell-menu-btn:hover { background: var(--color-ink-100); }
.crumbs { flex: 1; min-width: 0; }
.crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-500); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-ink-300); }
.crumbs li[aria-current="page"] { color: var(--color-ink-900); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.crumbs a { color: var(--color-ink-500); }
.crumbs a:hover { color: var(--color-primary-700); }
.shell-topbar { transition: box-shadow .15s ease; }
.shell-topbar.is-scrolled { box-shadow: 0 6px 16px -10px rgba(11,58,58,.35); }
.topbar-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-ink-700); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; background: #fff;
}
.topbar-link:hover { border-color: var(--color-primary-500); color: var(--color-primary-700); text-decoration: none; background: var(--color-primary-50); }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.user-role { font-size: var(--text-xs); color: var(--color-ink-500); font-weight: var(--weight-regular); }
.user-role-chip { display: inline-block; margin-top: 6px; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--color-primary-100); color: var(--color-primary-700); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

.user-menu { position: relative; }
.user-menu summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 4px 10px 4px 6px; border-radius: var(--radius-pill);
  list-style: none; cursor: pointer; color: var(--color-ink-700); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--color-ink-100); }
.user-menu .avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-600); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-sm); }
.user-menu-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); min-width: 240px; padding: var(--space-2);
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
}
.user-menu-who { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-ink-500); overflow-wrap: anywhere; }
.user-menu-who strong { font-size: var(--text-sm); color: var(--color-ink-900); }
.user-menu-panel a, .user-menu-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink-700); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left; cursor: pointer;
}
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--color-primary-50); color: var(--color-primary-700); text-decoration: none; }
.user-menu-panel form { margin: 0; padding-top: var(--space-1); margin-top: var(--space-1); border-top: 1px solid var(--color-border); }

/* Desktop: the sidebar folds to an icon rail (the choice is kept in this browser). The menu button in the top bar and the one at the foot of the sidebar both do it. */
@media (min-width: 901px) {
  .admin-sidebar { transition: width .2s ease, padding .2s ease; overflow-x: hidden; }
  .shell-menu-btn { display: inline-flex; }
  .nav-collapsed .admin-sidebar { width: 72px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .nav-collapsed .admin-sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-collapsed .brand-name,
  .nav-collapsed .admin-nav a > span,
  .nav-collapsed .sidebar-collapse > span,
  .nav-collapsed .nav-group-toggle { display: none; }
  .nav-collapsed .admin-nav a, .nav-collapsed .sidebar-collapse { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-collapsed .nav-group.is-folded .nav-items { display: block; }      /* folded groups still show their icons in the rail */
  .nav-collapsed .nav-group + .nav-group { padding-top: var(--space-2); border-top: 1px solid rgba(255,255,255,.1); }
  .nav-collapsed .admin-nav a.active::before { left: -8px; }
  .nav-collapsed .sidebar-collapse .icon { transform: none; }
}

/* Below 900px the sidebar is an off-canvas drawer opened from the menu button. */
@media (max-width: 900px) {
  .admin-sidebar {
    position: fixed; z-index: var(--z-drawer); left: 0; top: 0; bottom: 0; width: min(300px, 86vw);
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: var(--shadow-modal);
  }
  .admin-shell.nav-open .admin-sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
  .admin-nav a { min-height: var(--touch-target); }
  .shell-menu-btn { display: inline-flex; }
  .shell-topbar { padding: 0 var(--space-4); }
  .user-meta { display: none; }
  .sidebar-collapse { display: none; }
  .crumbs li:not([aria-current]) { display: none; }
  .crumbs li[aria-current]::before { content: none; }
  .admin-main { padding: var(--space-4) var(--space-4) var(--space-7); }
  body.nav-locked { overflow: hidden; }
}
@media (max-width: 1100px) {
  .topbar-link span { display: none; }
  .topbar-link { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-sidebar, .admin-shell.nav-open .admin-sidebar, .nav-group-toggle .icon, .sidebar-collapse .icon, .shell-topbar { transition: none; }
}

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); }
.kpi-card .label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-500); margin-bottom: 6px; }
.kpi-card .value { font-size: var(--text-3xl); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.kpi-card .delta { font-size: var(--text-xs); color: var(--color-success); margin-top: 4px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8,36,36,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 50; }
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.modal-body { padding: var(--space-5); }
.modal-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ---------- Empty / loading states ---------- */
.empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--color-ink-500); }
.empty-state .icon { font-size: 40px; margin-bottom: var(--space-3); }

/* ---------- Toast ---------- */
.toast { position: fixed; top: var(--space-5); right: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-success); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); z-index: 60; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: var(--space-5); }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-700); }
.pagination .current { background: var(--color-primary-500); color: #fff; font-weight: 600; }
/* Windowed pager (Admin/Shared/_Pager): wraps on narrow screens, shows the "Showing a–b of n" line, gaps and disabled ends. */
.pager-wrap { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); }
.pager-wrap .pagination { margin-top: 0; flex-wrap: wrap; justify-self: center; }
.pager-size { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-500); white-space: nowrap; }
.pager-size select { width: auto; min-width: 72px; padding: 6px 28px 6px 10px; font-size: var(--text-sm); }
@media (max-width: 760px) {
  .pager-wrap { grid-template-columns: 1fr; justify-items: center; }
  .pager-size, .pagination-summary { justify-self: center; }
}
.pagination-summary { font-size: var(--text-sm); color: var(--color-ink-500); }
.pagination a { padding: 0 12px; }
.pagination a:hover { background: var(--color-primary-100); text-decoration: none; }
.pagination .gap { min-width: 20px; color: var(--color-ink-500); }
.pagination .disabled { color: var(--color-ink-500); opacity: .45; padding: 0 10px; cursor: default; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; overflow-y: hidden; }
.tabs a { padding: 10px 2px; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s ease; }
.tabs a:hover { color: var(--color-ink-900); text-decoration: none; }
.tabs a.active { color: var(--color-primary-700); border-color: var(--color-accent-600); }

/* ---------- Grid helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-200)); color: var(--color-primary-900); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-primary-200); transition: box-shadow .15s ease; }
button.avatar:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500); }
.text-muted { color: var(--color-ink-500); }
.mockup-banner { background: var(--color-accent-100); color: #7a3b16; font-size: var(--text-xs); text-align: center; padding: 6px; font-weight: 600; }

/* ---------- Landing hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; text-align: left;
  background: radial-gradient(900px 420px at 85% -10%, rgba(217,122,69,.35), transparent 60%),
              linear-gradient(160deg, #0f5757 0%, var(--color-primary-900) 70%);
}
.hero h1, .hero h2 { color: #fff; }
.hero p, .hero p.sub { color: #d6ebe8; }
.hero .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.hero .btn-secondary:hover { background: rgba(255,255,255,.22); color: #fff; border-color: #fff; }
.hero-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; color: rgba(255,255,255,.07); pointer-events: none; }

/* ---------- Public inner pages (About / FAQ / Guidelines / Terms / Privacy / Contact) ---------- */
.page-hero { background: radial-gradient(700px 260px at 90% -20%, rgba(217,122,69,.16), transparent 60%), linear-gradient(180deg, var(--color-primary-100) 0%, var(--color-surface-muted) 100%); padding: var(--space-7) 0 var(--space-6); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 800; margin-bottom: var(--space-2); }
.page-hero p { font-size: var(--text-lg); color: var(--color-ink-700); max-width: 56ch; margin: 0; }
.page-body { padding-top: var(--space-5); padding-bottom: var(--space-7); }
.faq-item { border-bottom: 1px solid var(--color-ink-100); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-100); color: var(--color-primary-700); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: transform .15s ease; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .answer { padding: 0 0 var(--space-4); color: var(--color-ink-700); font-size: var(--text-sm); max-width: 62ch; }

/* ---------- Sign-in / registration cards ---------- */
.auth-wrap .auth-brand { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; }
.auth-wrap .card { padding: var(--space-6); border-radius: 22px; box-shadow: var(--shadow-raised); }
.auth-wrap .card h2 { font-size: var(--text-2xl); font-weight: 800; }
@media (max-width: 480px) { .auth-wrap .card { padding: var(--space-5); } }

/* ---------- Community feed / post cards ---------- */
.post-card { transition: box-shadow .18s ease, border-color .18s ease; }
.post-card:hover { box-shadow: var(--shadow-raised); border-color: var(--color-primary-200); }
.post-card .post-head .avatar, .post-head .avatar { box-shadow: none; }
.post-card h4 a { color: var(--color-ink-900); }
.post-card h4 a:hover { color: var(--color-primary-600); }
.post-actions { gap: var(--space-2) !important; }
.post-actions button, .post-actions .comment-link, .post-bar button.plain, .post-bar a.plain {
  padding: 7px 14px !important; border-radius: var(--radius-pill); transition: background .15s ease, color .15s ease;
}
.post-actions button:hover, .post-actions .comment-link:hover, .post-bar button.plain:hover, .post-bar a.plain:hover {
  background: var(--color-primary-50); color: var(--color-primary-700); text-decoration: none;
}
.post-media-grid img, .post-media-grid video, .post-gallery img, .post-gallery video { transition: transform .2s ease; }
.post-media-grid a { overflow: hidden; border-radius: var(--radius-sm); }
.post-media-grid a:hover img { transform: scale(1.04); }
.comment .bubble { background: var(--color-primary-50); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.filters-bar select, .filters-bar input { background-color: #fff; }

/* ---------- Signed-in home ---------- */
.hero-banner { position: relative; overflow: hidden; background: radial-gradient(520px 220px at 90% -20%, rgba(217,122,69,.4), transparent 60%), linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900)) !important; box-shadow: var(--shadow-raised); }
.hero-banner h1, .hero-banner h2 { color: #fff; font-weight: 800; }
.stat-row .stat .num { font-size: var(--text-3xl) !important; font-weight: 800 !important; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.event-card { background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.feed-preview .post-row { align-items: center; transition: background .12s ease; }
.thumb { border-radius: var(--radius-md) !important; }

/* ---------- Event calendar ---------- */
.cal { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card); }
.cal .cal-head { background: var(--color-primary-50) !important; color: var(--color-ink-700); padding: var(--space-3) var(--space-2) !important; }
.cal .cal-cell { transition: background .12s ease; }
.cal .cal-cell:hover { background: var(--color-primary-50); }
.cal .cal-cell.today { background: var(--color-primary-50); }

/* ---------- Two-column forms and alerts ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-4); }
.form-grid > .field { margin: 0; min-width: 0; }
.form-grid > .span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.alert { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: 600; border: 1px solid transparent; }
.alert-error { background: var(--color-danger-bg); color: var(--color-danger); border-color: #f1c4c0; }
.alert-info { background: var(--color-info-bg); color: var(--color-info); }
.panel-tint { background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }

/* ---------- Independent-platform notice ---------- */
/* A quiet, always-visible line: muted, small, with a thin info icon. No alarm colours; the disclosure stays, the shouting goes. */
.site-note { display: flex; gap: 8px; align-items: flex-start; justify-content: center; max-width: 60ch; margin: var(--space-4) auto 0; padding: 0; font-size: var(--text-xs); line-height: 1.55; color: var(--color-ink-500); text-align: left; }
.site-note-icon { flex: none; margin-top: 2px; }
.site-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.site-note a:hover { color: var(--color-primary-700); }
.site-note--dark { color: #bcd9d6; }
.site-note--dark a:hover { color: #fff; }
.notice-card { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 auto var(--space-4); max-width: 1040px; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-700); }
.notice-card .site-note-icon { margin-top: 3px; color: var(--color-primary-600); }
.notice-card p { margin: 0; font-size: inherit; color: inherit; }
.notice-card a { color: var(--color-primary-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.notice-card a:hover { color: var(--color-primary-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Search and filter bar (lists such as tickets; js/filters.js) ---------- */
.tf { margin-bottom: var(--space-4); }
.tf-search { display: flex; gap: var(--space-2); align-items: center; padding: 6px 6px 6px 8px; background: #fff; border: 1px solid #d5dfdc; border-radius: var(--radius-pill); box-shadow: var(--shadow-card); transition: border-color .15s ease, box-shadow .15s ease; }
.tf-search:focus-within { border-color: var(--color-primary-500); box-shadow: var(--ring), var(--shadow-card); }
.tf-search input[type=search] { flex: 1; min-width: 0; border: 0; background-color: transparent; box-shadow: none; padding-top: 10px; padding-bottom: 10px; font-size: var(--text-base); -webkit-appearance: none; appearance: none; }
.tf-search input[type=search]:focus, .tf-search input[type=search]:hover { box-shadow: none; background-color: transparent; }
.tf-search input[type=search]::-webkit-search-cancel-button { display: none; }
.tf-clear { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--color-ink-100); color: var(--color-ink-700); font-size: 18px; line-height: 1; cursor: pointer; }
.tf-clear:hover { background: var(--color-ink-300); color: #fff; }
.tf-clear[hidden] { display: none; }
.tf-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.tf-row select { width: auto; max-width: 100%; padding: 8px 34px 8px 14px; border-radius: var(--radius-pill); background-color: #fff; font-weight: 600; font-size: var(--text-xs); }
.tf-row select.is-set { border-color: var(--color-primary-500); background-color: var(--color-primary-50); color: var(--color-primary-700); }
.tf-more { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px dashed #b9c9c5; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-700); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.tf-more:hover { border-color: var(--color-primary-500); color: var(--color-primary-700); }
.tf-more svg { transition: transform .2s ease; }
.tf-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.tf-adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.tf-adv[hidden] { display: none; }
.tf-adv label { display: block; font-size: var(--text-xs); font-weight: 600; margin-bottom: 4px; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--space-3); }
.tf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: var(--radius-pill); background: var(--color-primary-100); color: var(--color-primary-700); font-size: var(--text-xs); font-weight: 600; }
.tf-chip a { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(15,87,87,.15); color: inherit; font-size: 13px; line-height: 1; }
.tf-chip a:hover { background: var(--color-primary-600); color: #fff; text-decoration: none; }
.tf-reset { font-size: var(--text-xs); font-weight: 600; margin-left: 4px; }
.tf-result { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-ink-500); }
@media (max-width: 640px) { .tf-search .btn { padding: 8px 14px; } .tf-row select { flex: 1 1 140px; } }

/* ---------- Alerts (status messages) ---------- */
.alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: #bfe3cf; }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: #f1c4c0; }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: #ecd6a8; }
.alert-info { border-color: #bcd9ee; }

/* ---------- Page header: one h1 per admin page, actions on the right ---------- */
.page-title { margin: 0; font-size: var(--text-2xl); overflow-wrap: anywhere; }

/* ---------- Utilities ----------
   These replace the one-off style="…" attributes that used to be repeated across views. They carry !important so they behave exactly
   like the inline style they replaced (a component rule such as `.card p { margin … }` cannot override them). */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--space-3) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-5 { margin-top: var(--space-5) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; } .mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; } .mb-5 { margin-bottom: var(--space-5) !important; }
.text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-2xl { font-size: var(--text-2xl) !important; }
.fw-600 { font-weight: 600 !important; }
.text-danger { color: var(--color-danger) !important; }
.text-right { text-align: right !important; } .text-center { text-align: center !important; }
.d-inline { display: inline !important; }
.flex-1 { flex: 1 !important; }
.ml-auto { margin-left: auto !important; }
.cluster { display: flex !important; gap: var(--space-2) !important; }
.cluster-end { justify-content: flex-end !important; }
.cluster-bottom { align-items: flex-end !important; }
.maxw-480 { max-width: 480px !important; } .maxw-560 { max-width: 560px !important; } .maxw-640 { max-width: 640px !important; }
.span-all { grid-column: 1 / -1 !important; }

/* ---------- Dashboard: needs-attention list ---------- */
.attention { margin-bottom: var(--space-6); }
.attention-title { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.attention-clear { margin: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-success-bg); color: var(--color-success); font-weight: 600; }
.attention-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.attention-list li + li { border-top: 1px solid var(--color-border); }
.attention-row { text-decoration: none; display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-5); color: inherit; }
.attention-row:hover { background: var(--color-primary-50); text-decoration: none; color: inherit; }
.attention-count { min-width: 3ch; font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-warning); }
.attention-row.is-urgent .attention-count { color: var(--color-danger); }
.attention-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attention-text span { font-size: var(--text-sm); color: var(--color-ink-500); }
.attention-row > .icon { color: var(--color-ink-300); }
.empty-state svg.icon { width: 40px; height: 40px; color: var(--color-ink-300); }
.nowrap { white-space: nowrap; } .break-word { overflow-wrap: anywhere; }

/* ---------- Homeowner portal shell ---------- */
.portal-main { padding-top: var(--space-5); padding-bottom: var(--space-7); }
.portal-main:focus { outline: none; }
.avatar-button { border: none; cursor: pointer; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.fw-700 { font-weight: 700 !important; }

/* ---------- Moderation rows (gallery) ---------- */
.min-w-0 { min-width: 0 !important; }
.mod-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.mod-thumb { width: 64px; height: 64px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary-100); }
.mod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mod-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 640px) {
  .mod-row { flex-wrap: wrap; }
  .mod-row > .flex-1 { flex-basis: calc(100% - 64px - var(--space-3)); }
  .mod-actions { width: 100%; justify-content: flex-start; }
}
/* A long action name (Ai.Command.Execute.dues.reportDelinquencies) must wrap inside its card on small screens instead of widening the page. */
@media (max-width: 768px) { table.data-table td .badge { white-space: normal; overflow-wrap: anywhere; text-align: right; } }

/* Section headings keep heading order (h2 under the page's h1) but look like the smaller headings they replaced. */
.h-md { font-size: var(--text-xl); }
.h-sm { font-size: var(--text-lg); }
.h-title { font-size: var(--text-2xl); letter-spacing: -0.02em; }
button.liked svg.icon, a.liked svg.icon { fill: currentColor; fill-opacity: .25; }

/* ---------- Touch targets on the portal: phones and any coarse pointer get 44px hit areas; desktop mouse layouts are unchanged ---------- */
@media (max-width: 640px), (pointer: coarse) {
  .portal-main .btn-sm, .portal-main .post-actions button, .portal-main .post-actions .comment-link, .portal-main .post-bar .plain, .portal-main .comments-toggle { min-height: 44px; }
  .portal-main details > summary { padding-block: 12px; }
  .portal-main details a { display: inline-block; padding: 10px 6px; }
  .portal-main .post-title a { display: inline-block; padding-block: 8px; }
  .portal-main .cal-cell a { padding-block: 8px; }
  .portal-main .btn.btn-sm.btn-secondary { min-width: 44px; }
}

/* ---------- Shared confirmation dialogs (native <dialog>) ---------- */
dialog.modal-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(20,32,30,.25); color: var(--color-ink-900); }
dialog.modal-dialog::backdrop { background: rgba(20,32,30,.45); backdrop-filter: blur(2px); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
a.avatar-button { text-decoration: none; }
a.avatar-button.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500); }
.inline-error { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-danger); }
@media (max-width: 640px), (pointer: coarse) { .portal-main nav.text-sm a { display: inline-block; padding-block: 8px; } }

/* ---------- Portal account menu: the avatar is the button; Profile and Sign out live in its panel ---------- */
.user-menu--portal summary { padding: 0; min-height: 0; border-radius: 50%; background: none; }
.user-menu--portal summary:hover, .user-menu--portal[open] summary { background: none; }
.user-menu--portal .avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-200)); color: var(--color-primary-900); font-size: var(--text-sm); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-primary-200); transition: box-shadow .15s ease; }
.user-menu--portal summary:hover .avatar, .user-menu--portal[open] .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500); }
.user-menu--portal summary:focus-visible { outline: none; }
.user-menu--portal summary:focus-visible .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--color-primary-500); }
.user-menu--portal .user-menu-panel { z-index: 60; }

/* ================================================================================================================
   Dark theme. <html data-theme="dark"> is set before first paint by the head script (Views/Shared/_Fonts.cshtml)
   from the visitor's saved choice, else the community's default, else the system setting. The tokens below flip the
   neutral scales and surfaces; the brand scale's 900/700 steps are already dark and stay (sidebar, hero, footer), while
   its pale 50/100/200 tints become deep tints. Components that hard-code white are listed explicitly.
   ================================================================================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-ink-900: #e9f0ee;
  --color-ink-700: #c5cfcc;
  --color-ink-500: #a3b0ad;
  --color-ink-300: #6a7774;
  --color-ink-100: #2b3735;
  --color-surface: #182322;
  --color-surface-muted: #0f1716;
  --color-border: #2e3c3a;
  --color-primary-200: #24504f;
  --color-primary-100: #17393a;
  --color-primary-50:  #122a2b;
  --color-accent-100: #3a2519;
  --color-success: #6fd3a1;  --color-success-bg: #12301f;
  --color-warning: #f0c36d;  --color-warning-bg: #35280f;
  --color-danger:  #ff9b92;  --color-danger-bg:  #3b1a17;
  --color-info:    #8cc6f0;  --color-info-bg:    #12283a;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -6px rgba(0,0,0,.5);
  --shadow-raised: 0 2px 4px rgba(0,0,0,.4), 0 14px 32px -10px rgba(0,0,0,.6);
  --shadow-modal: 0 24px 60px -12px rgba(0,0,0,.7);
  --auth-bg: radial-gradient(900px 500px at 15% -10%, #123635 0%, transparent 60%),
             radial-gradient(700px 480px at 100% 110%, #2b1b12 0%, transparent 55%),
             var(--color-surface-muted);
}
html[data-theme="dark"] body { background: var(--color-surface-muted); color: var(--color-ink-900); }
/* Where the brand colour is used as text it must be light enough on a dark surface. */
html[data-theme="dark"] a { color: #8fd0cb; }
html[data-theme="dark"] a:hover, html[data-theme="dark"] .notice-card a:hover { color: #fff; }
html[data-theme="dark"] .brand, html[data-theme="dark"] .brand:hover, html[data-theme="dark"] .kpi-card .value,
html[data-theme="dark"] .avatar, html[data-theme="dark"] .user-menu--portal .avatar { color: var(--color-ink-900); }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-accent, html[data-theme="dark"] .btn-danger { color: #fff; }
html[data-theme="dark"] .btn-secondary { background: var(--color-surface); color: #8fd0cb; border-color: var(--color-border); box-shadow: none; }
html[data-theme="dark"] .btn-secondary:hover { background: var(--color-primary-100); border-color: var(--color-primary-500); color: #fff; }
html[data-theme="dark"] .btn-ghost { color: var(--color-ink-700); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--color-ink-100); color: var(--color-ink-900); }
html[data-theme="dark"] .btn-danger { background: #b3392f; }
html[data-theme="dark"] input:not([type]), html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=datetime-local], html[data-theme="dark"] input[type=time], html[data-theme="dark"] input[type=month],
html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=url],
html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0f1716; border-color: #35443f; color: var(--color-ink-900); box-shadow: none; }
html[data-theme="dark"] input:hover:not(:disabled):not([readonly]), html[data-theme="dark"] select:hover:not(:disabled),
html[data-theme="dark"] textarea:hover:not(:disabled):not([readonly]), html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background-color: #0b1211; border-color: var(--color-primary-500); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #7f8f8b; }
html[data-theme="dark"] input[type=color] { background: var(--color-surface); border-color: #35443f; }
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input[readonly], html[data-theme="dark"] textarea[readonly] { background-color: var(--color-surface-muted); }
html[data-theme="dark"] .dz { background: linear-gradient(180deg, #172221, #121b1a); border-color: #35443f; }
html[data-theme="dark"] .dz-item, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .modal, html[data-theme="dark"] .toast,
html[data-theme="dark"] .event-card, html[data-theme="dark"] .attention-list, html[data-theme="dark"] .tf-search,
html[data-theme="dark"] .filters-bar select, html[data-theme="dark"] .filters-bar input, html[data-theme="dark"] .tf-row select,
html[data-theme="dark"] table.data-table tr { background: var(--color-surface); }
html[data-theme="dark"] .shell-topbar { background: rgba(24,35,34,.92); }
html[data-theme="dark"] .user-menu-panel, html[data-theme="dark"] .topbar-link { background: var(--color-surface); color: var(--color-ink-700); }
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3b0ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
html[data-theme="dark"] img { opacity: .92; }

/* ---------- Pop-up dialog (Terms of Service on the registration page) ---------- */
/* No background scrolling while a pop-up is open. Driven by the dialog's own [open] state, so it can never be left locked. */
html:has(dialog.ciq-modal[open]) { overflow: hidden; }
dialog.ciq-modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: var(--color-ink-900); }
dialog.ciq-modal::backdrop { background: rgba(8, 20, 20, .6); }
dialog.ciq-modal[open] { display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.ciq-modal-panel {
  display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(86vh, 100%);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
}
.ciq-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.ciq-modal-head h2 { margin: 0; font-size: var(--text-lg); }
.ciq-modal-x { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-700); font-size: 28px; line-height: 1; cursor: pointer; }
.ciq-modal-x:hover { background: var(--color-ink-100); color: var(--color-ink-900); }
.ciq-modal-x:focus-visible { outline: none; box-shadow: var(--ring); }
.ciq-modal-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--space-5); overscroll-behavior: contain; }
.ciq-modal-body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary-500); }
.ciq-modal-foot { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); }
@media (max-width: 560px) {
  dialog.ciq-modal[open] { padding: var(--space-2); }
  .ciq-modal-panel { max-height: 100%; }
  .ciq-modal-head, .ciq-modal-body, .ciq-modal-foot { padding-inline: var(--space-4); }
}

/* The light/dark switch (js/theme.js): one small round button in the page header, beside the account menu. A page with no header
   (sign-in, sign-up) gets .theme-toggle--fixed, pinned to the top right corner. */
.theme-toggle {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-700);
}
.theme-toggle--fixed { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 60; width: 40px; height: 40px; box-shadow: var(--shadow-raised); }
/* The platform console's bar is dark in both themes. */
.pf-bar .theme-toggle { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.pf-bar .theme-toggle:hover { border-color: #fff; color: #fff; }
.shell-topbar .theme-toggle, .topnav .theme-toggle { margin-inline: var(--space-1, 4px); }
.theme-toggle:hover { color: var(--color-ink-900); border-color: var(--color-primary-500); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
@media print { .theme-toggle { display: none; } }

/* ---------- Portal navigation polish ---------- */
/* One line per link on a desktop bar ("Book a Rental" and "Management & Staff" used to wrap onto two). */
@media (min-width: 861px) {
  .topnav .brand { white-space: nowrap; }
  .nav-links { gap: 0; }
  .nav-links a { white-space: nowrap; padding: 8px 11px; }
}
/* In the dark theme the generic dark link colour above is teal on every nav item and the active pill reused the light-theme colours
   (dark teal on deep teal). Idle links read as body text; the current page is a clear light-on-teal pill. */
html[data-theme="dark"] .nav-links a { color: var(--color-ink-700); }
html[data-theme="dark"] .nav-links a:hover { background: var(--color-ink-100); color: var(--color-ink-900); }
html[data-theme="dark"] .nav-links a.active { background: var(--color-primary-200); color: #fff; }
html[data-theme="dark"] .topnav { border-bottom: 1px solid var(--color-border); }

/* ---------- Homeowner home: light-mode polish ---------- */
/* Prefixed with .portal-main so these refine the page's own inline rules without editing the view. */
.portal-main .hero-banner {
  position: relative; overflow: hidden; gap: var(--space-5); box-shadow: var(--shadow-raised);
  background: radial-gradient(520px 220px at 88% -20%, rgba(255,255,255,.16), transparent 70%),
              linear-gradient(135deg, var(--color-primary-600), var(--color-primary-900));
}
.portal-main .hero-banner .h-title { font-size: var(--text-3xl); color: #fff; margin-bottom: 6px; }
.portal-main .stat-row { gap: var(--space-3); flex-wrap: wrap; }
.portal-main .stat-row a.stat {
  min-width: 108px; margin: 0; padding: 10px 16px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  transition: background .15s ease, border-color .15s ease;
}
.portal-main .stat-row a.stat:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.portal-main .stat-row a.stat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.portal-main .feed-preview .post-row {
  padding: var(--space-3); margin-inline: calc(var(--space-3) * -1); border-bottom: 0; border-radius: var(--radius-md);
  transition: background .15s ease;
}
.portal-main .feed-preview .post-row:hover { background: var(--color-primary-50); }
.portal-main .event-card { transition: border-color .15s ease, box-shadow .15s ease; }
.portal-main .event-card:hover { box-shadow: var(--shadow-card); }
.portal-main .quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.portal-main .quick-actions .btn { justify-content: flex-start; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .portal-main .hero-banner { padding: var(--space-5); }
  .portal-main .hero-banner .h-title { font-size: var(--text-2xl); }
  .portal-main .stat-row a.stat { flex: 1 1 0; min-width: 0; }
}

/* ---------- Homeowner portal: shared page polish (light and dark) ---------- */
/* A page that scrolls and one that does not used to sit a few pixels apart; reserve the scrollbar's space on every page. */
html { scrollbar-gutter: stable; }
.portal-main { padding-top: var(--space-6); }
/* One rhythm for the page title, whatever the page puts under it. */
.portal-main > h1.h-title, .portal-main h1.h-title { letter-spacing: -0.025em; margin-bottom: var(--space-1); }
.portal-main > h1.h-title + *:not(p):not(.text-muted) { margin-top: var(--space-4); }
/* Cards that are links lift gently; static cards stay still. */
.portal-main .card { transition: box-shadow .2s ease, border-color .2s ease; }
.portal-main a.card:hover { box-shadow: var(--shadow-raised); border-color: var(--color-primary-200); text-decoration: none; }
/* Messages carry a colour edge so they are noticed without shouting. */
.portal-main .alert { border-left-width: 4px; box-shadow: var(--shadow-card); }
/* Tables: a quiet header band and a little more air. */
.portal-main table.data-table th { background: var(--color-surface-muted); }
.portal-main table.data-table td { padding-block: 16px; }
/* Empty and "all caught up" states read as a calm resting place, not an error. */
.portal-main .empty-state { padding: var(--space-7) var(--space-5); font-size: var(--text-sm); }
.portal-main .empty-state h2, .portal-main .empty-state .h-sm { color: var(--color-ink-900); margin-bottom: var(--space-1); }
/* Primary actions respond to the pointer a touch more. */
.btn-primary { transition: background .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn-primary:hover { box-shadow: 0 2px 4px rgba(11,58,58,.2), 0 10px 18px -8px rgba(26,122,122,.7); }
/* Form fields: a clearer, consistent focus state. */
.portal-main .field input:focus, .portal-main .field select:focus, .portal-main .field textarea:focus { box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { .portal-main .card, .btn-primary { transition: none; } }

/* ---------- Admin console: shared page polish ---------- */
/* The sidebar scrolls inside the page; a thin, quiet bar keeps it from reading as a second page scrollbar. */
.admin-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
/* One title size across the console (the dashboard used the page-display size, list pages the smaller one). */
.admin-main h1, .admin-main .page-title { font-size: var(--text-2xl); letter-spacing: -0.025em; margin-bottom: 0; }
.admin-main h2 { letter-spacing: -0.02em; }
/* Data tables: a denser, calmer rhythm and a header that stays readable. */
.admin-main table.data-table th {
  background: var(--color-surface-muted); color: var(--color-ink-500); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .02em; white-space: nowrap; padding: 12px 16px; border-bottom: 1px solid var(--color-border);
}
.admin-main table.data-table td { padding: 12px 16px; }
.admin-main table.data-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface)); }
.admin-main table.data-table tbody tr:hover td { background: var(--color-primary-50); }
/* Row actions stay on one line, side by side. */
.admin-main table.data-table td[data-label="Actions"] { white-space: nowrap; }
.admin-main table.data-table td[data-label="Actions"] > * { vertical-align: middle; margin-right: var(--space-1); }
.admin-main table.data-table td[data-label="Actions"] > :last-child { margin-right: 0; }
/* The filter bar and cards share one surface treatment. */
.admin-main .filters-bar, .admin-main .card { box-shadow: var(--shadow-card); }
.admin-main .alert { border-left-width: 4px; }
/* Form cards in settings and editors: a comfortable reading width and quieter field labels. */
.admin-main .field label { color: var(--color-ink-700); }
.admin-main .field .help, .admin-main .help { color: var(--color-ink-500); font-size: var(--text-xs); }
.admin-main .field input:focus, .admin-main .field select:focus, .admin-main .field textarea:focus { box-shadow: var(--ring); }

/* ---------- Admin forms: use the width ---------- */
/* Settings and editor forms were capped at 480-720px and sat on the left of a wide console. They now run to a comfortable form width and
   lay their fields out in two columns; anything that is not a plain field (headings, summaries, rows, buttons, long inputs) spans the row. */
.admin-main form > .card[class*="maxw-"], .admin-main .card[style*="max-width:720px"] {
  max-width: 920px !important; width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); align-content: start;
}
.admin-main form > .card[class*="maxw-"] > *, .admin-main .card[style*="max-width:720px"] > * { grid-column: 1 / -1; min-width: 0; }
.admin-main form > .card[class*="maxw-"] > .field,
.admin-main .card[style*="max-width:720px"] > .field { grid-column: auto; }
.admin-main form > .card[class*="maxw-"] > .field:has(textarea),
.admin-main form > .card[class*="maxw-"] > .field:has(input[type="file"]),
.admin-main form > .card[class*="maxw-"] > .field:has(input[type="checkbox"]),
.admin-main form > .card[class*="maxw-"] > .field:has(.help:not(:empty)):has(textarea),
.admin-main .card[style*="max-width:720px"] > .field:has(textarea),
.admin-main .card[style*="max-width:720px"] > .field:has(input[type="file"]),
.admin-main .card[style*="max-width:720px"] > .field:has(input[type="checkbox"]) { grid-column: 1 / -1; }
.admin-main form > .card[class*="maxw-"] > .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
@media (max-width: 760px) {
  .admin-main form > .card[class*="maxw-"], .admin-main .card[style*="max-width:720px"] { grid-template-columns: minmax(0, 1fr); }
  .admin-main form > .card[class*="maxw-"] > .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
.admin-main .field .hint { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-500); line-height: 1.5; }

/* ---------- Admin: rental calendar ---------- */
.admin-main .cal-bar { gap: var(--space-2); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.admin-main .cal-bar h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.admin-main .cal-bar > .btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: var(--text-base); }
.admin-main .cal-bar select { width: auto; min-width: 200px; padding-block: 8px; }
.admin-main .cal-bar input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary-500); }
.admin-main .cal-bar label { font-size: var(--text-sm); color: var(--color-ink-700); }
.admin-main .cal { box-shadow: var(--shadow-card); }
.admin-main .cal .dow { padding: 10px 6px; letter-spacing: .06em; }
.admin-main .cal .day { background: var(--color-surface); min-height: 118px; padding: 6px; transition: background .12s ease; }
.admin-main .cal .day:not(.pad):hover { background: var(--color-primary-50); }
.admin-main .cal .day.pad { background: var(--color-surface-muted); }
.admin-main .cal .ev { border-radius: 8px; padding: 4px 8px; box-shadow: 0 1px 0 rgba(11,58,58,.04); }
.admin-main .legend { gap: var(--space-4); margin-top: var(--space-4); color: var(--color-ink-700); }
/* Event chips, per status, on the dark surface. */
html[data-theme="dark"] .admin-main .cal .day { background: var(--color-surface); }
html[data-theme="dark"] .admin-main .cal .day.pad { background: var(--color-surface-muted); }
html[data-theme="dark"] .admin-main .cal .ev { color: var(--color-ink-900); }
html[data-theme="dark"] .admin-main .cal .ev.confirmed { background: #12301f; }
html[data-theme="dark"] .admin-main .cal .ev.pending { background: #35280f; }
html[data-theme="dark"] .admin-main .cal .ev.completed { background: #232d2b; }
html[data-theme="dark"] .admin-main .cal .ev.noshow { background: #3b1a17; }
html[data-theme="dark"] .admin-main .cal .ev.cancelled { background: var(--color-surface); }
html[data-theme="dark"] .admin-main .cal .ev.blocked { background: repeating-linear-gradient(45deg, #1d2826, #1d2826 6px, #26332f 6px, #26332f 12px); }

/* ---------- Admin: metric tiles and campaign pages ---------- */
/* A tile holds a number or a short word; long words ("Not tracked") used to run out of the tile. */
.kpi-card { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.kpi-card .value { font-size: clamp(1.5rem, 1.1rem + 1vw, var(--text-3xl)); overflow-wrap: anywhere; }
.kpi-card .value.text-muted { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; padding-block: 6px; }
.kpi-card .label { line-height: 1.3; }
.admin-main .kpi-grid { gap: var(--space-3); }

/* ---------- Homeowner portal: profile and forms use the width ---------- */
/* Profile: the stack of 560px cards becomes a two-column board; the title and any message span the top. */
.portal-main:has(> .card[style*="max-width:560px"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); align-content: start; max-width: 1040px; }
.portal-main:has(> .card[style*="max-width:560px"]) > h1, .portal-main:has(> .card[style*="max-width:560px"]) > .alert { grid-column: 1 / -1; margin-bottom: 0; }
.portal-main:has(> .card[style*="max-width:560px"]) > .card { max-width: none !important; margin-bottom: 0 !important; height: 100%; }
.portal-main:has(> .card[style*="max-width:560px"]) > .card.maxw-560 { grid-column: 1 / -1; }
/* Add / edit forms: a wider card with the fields in two columns. */
.portal-main form > .card[class*="maxw-"] {
  max-width: 760px !important; width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); align-content: start;
}
.portal-main form > .card[class*="maxw-"] > * { grid-column: 1 / -1; min-width: 0; }
.portal-main form > .card[class*="maxw-"] > .field { grid-column: auto; }
.portal-main form > .card[class*="maxw-"] > .field:has(textarea),
.portal-main form > .card[class*="maxw-"] > .field:has(input[type="file"]) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .portal-main:has(> .card[style*="max-width:560px"]) { grid-template-columns: minmax(0, 1fr); }
  .portal-main form > .card[class*="maxw-"] { grid-template-columns: minmax(0, 1fr); }
}
.portal-main:has(> .card[style*="max-width:560px"]) { align-items: stretch; }
.portal-main:has(> .card[style*="max-width:560px"]) > .card { height: auto; align-self: stretch; }
/* Forms that are themselves the card (Add / Edit family member, new ticket). */
.portal-main form.card[class*="maxw-"], .admin-main form.card[class*="maxw-"] {
  max-width: 760px !important; width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); align-content: start;
}
.portal-main form.card[class*="maxw-"] > *, .admin-main form.card[class*="maxw-"] > * { grid-column: 1 / -1; min-width: 0; }
.portal-main form.card[class*="maxw-"] > .field, .admin-main form.card[class*="maxw-"] > .field { grid-column: auto; }
.portal-main form.card[class*="maxw-"] > .field:has(textarea), .admin-main form.card[class*="maxw-"] > .field:has(textarea),
.portal-main form.card[class*="maxw-"] > .field:has(input[type="file"]), .admin-main form.card[class*="maxw-"] > .field:has(input[type="file"]) { grid-column: 1 / -1; }
.portal-main form.card[class*="maxw-"] > .field:has(.help):has(input[type="email"]) { grid-column: auto; }
@media (max-width: 760px) {
  .portal-main form.card[class*="maxw-"], .admin-main form.card[class*="maxw-"] { grid-template-columns: minmax(0, 1fr); }
}
.help-text { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-500); line-height: 1.5; }

/* ---------- Remaining admin pages ---------- */
/* Editors that set their own narrow width inline (new / edit event, and similar) get a proper form width. */
.admin-main form.card[style*="max-width"], .admin-main .card[style*="max-width:560px"], .admin-main .card[style*="max-width:640px"] {
  max-width: 820px !important; width: 100%;
}
/* Metric tiles: balanced rows instead of one orphan on the last line (6 -> 3x2, 7 and 8 -> 4 across). */
.admin-main .kpi-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.admin-main .kpi-grid:has(> :nth-child(7)):not(:has(> :nth-child(9))) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .admin-main .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Dates and times in a table never break across lines. */
.admin-main table.data-table td[data-label="Created"], .admin-main table.data-table td[data-label="Last processed"],
.admin-main table.data-table td[data-label="When"], .admin-main table.data-table td[data-label="Date"],
.admin-main table.data-table td[data-label="Registered"], .admin-main table.data-table td[data-label="Due"],
.admin-main table.data-table td[data-label="Timestamp"] { white-space: nowrap; }
/* A button that opens an inline form ("+ New Assessment") sits clear of the table above it and the form below it. */
.admin-main details > summary.btn { margin-top: var(--space-3); list-style: none; }
.admin-main details > summary.btn::-webkit-details-marker { display: none; }
.admin-main details[open] > summary.btn { margin-bottom: var(--space-3); }
/* Report tiles (rental reports): 8 across wrapped as 7 + 1; balance them. They also follow the theme surface. */
.admin-main .kpis:has(> :nth-child(7)):not(:has(> :nth-child(9))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-main .kpis:has(> :nth-child(5)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-main .kpi { background: var(--color-surface); }
@media (max-width: 760px) { .admin-main .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* E-mail queue: dates stay on one line at a smaller size so the recipient and subject keep their width. */
.admin-main table.data-table td[data-label="Created"], .admin-main table.data-table td[data-label="Last processed"] { font-size: var(--text-xs); color: var(--color-ink-500); }
.admin-main table.data-table td[data-label="Recipient"] { min-width: 180px; overflow-wrap: anywhere; }
.admin-main table.data-table td[data-label="Subject"] { min-width: 220px; }

/* ---------- Admin: single-card pages (API access, domains, getting started, billing) ---------- */
/* One comfortable reading width for a page that is a stack of cards, so inputs are not stretched across the whole console. */
.admin-main > .card { max-width: 920px; }
.admin-main > .card[class*="maxw-"] { max-width: 820px !important; }
.admin-main > .card .field input[type="text"], .admin-main > .card .field input[type="email"], .admin-main > .card .field select { max-width: 100%; }

/* ---------- Admin: rental locations ---------- */
/* The photo is a fixed frame the picture fills; before, a tall image pushed past its box and sat on top of the text. */
.admin-main .loc { background: var(--color-surface); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.admin-main .loc:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); border-color: var(--color-primary-200); }
.admin-main .loc-photo { position: relative; height: 176px; overflow: hidden; }
.admin-main .loc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-main .loc-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(11,58,58,.18)); pointer-events: none; }
.admin-main .loc-body { padding: var(--space-4) var(--space-5); position: relative; z-index: 1; background: var(--color-surface); }
.admin-main .loc-name { font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.25; color: var(--color-ink-900); }
.admin-main .loc-meta { margin-top: var(--space-2); gap: 4px; color: var(--color-ink-500); }
.admin-main .loc-foot { justify-content: flex-end; padding: var(--space-3) var(--space-5); }
html[data-theme="dark"] .admin-main .loc-photo::after { background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }

/* ---------- Admin: rental location photo — picture on top, controls and text below ---------- */
.admin-main .photo-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.admin-main .photo-row img { width: 100%; max-height: 260px; height: 240px; object-fit: cover; border-radius: var(--radius-lg); }
.admin-main .photo-row > form { align-items: center; }

/* ---------- Admin: staff / management editors (.form-card) ---------- */
.admin-main .form-card { max-width: 1040px; padding: var(--space-5) var(--space-6); }
.admin-main .form-card .form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-5); align-items: start; }
/* Sections read as sections: a title with a rule above it, and the first one flush. */
.admin-main .form-card h3.h-sm { font-size: var(--text-lg); letter-spacing: -0.015em; margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.admin-main .form-card h3.h-sm:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.admin-main .form-card .field .check { margin-top: var(--space-2); color: var(--color-ink-700); }
.admin-main .form-card input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary-500); flex: none; }
/* "Who to contact about": quiet tiles that light up when ticked. */
.admin-main .form-card .areas { gap: var(--space-2) var(--space-3); }
.admin-main .form-card .area { background: var(--color-surface); transition: border-color .15s ease, background-color .15s ease; }
.admin-main .form-card .area:hover { border-color: var(--color-primary-500); }
.admin-main .form-card .area:has(input[name="ResponsibilityIds"]:checked) { background: var(--color-primary-50); border-color: var(--color-primary-200); }
/* The save bar stays in reach while a long form scrolls. */
.admin-main .form-card > .cluster-end {
  position: sticky; bottom: 0; z-index: 5; margin: var(--space-6) calc(var(--space-6) * -1) calc(var(--space-5) * -1);
  padding: var(--space-3) var(--space-6); background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (max-width: 760px) { .admin-main .form-card { padding: var(--space-4); } .admin-main .form-card > .cluster-end { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); } }
.admin-main .form-card .field .help { margin-top: 6px; }
.admin-main .form-card .field.wide + .field.wide { margin-top: var(--space-3); }
.admin-main .form-card .field > label:not(.check) { margin-bottom: 6px; }
/* The standalone note under the Contact fields ("An active staff member needs a work email or an office phone.") carried an inline
   negative margin that pulled it up over the input above; give it its own line with proper spacing. */
.admin-main .form-card .field.wide.help {
  margin: 0 !important; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-info-bg); color: var(--color-info); font-size: var(--text-sm); line-height: 1.5;
}
.admin-main .form-card .field.wide:has(+ .field.wide.help) { margin-bottom: var(--space-3); }

/* ---------- Admin: person / company detail pages (head + alert + stacked cards) ---------- */
/* The banner message ran the full width while the cards stopped short of it, leaving a ragged right edge. Everything shares one width. */
.admin-main:has(.head .photo-lg) > .card, .admin-main:has(.head .photo-lg) > .alert { max-width: none !important; }
.admin-main:has(.head .photo-lg) > .card { margin-bottom: var(--space-4) !important; }
.admin-main:has(.head .photo-lg) .facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-5) var(--space-6); }
.admin-main:has(.head .photo-lg) .facts dt { margin-bottom: 4px; }
.admin-main:has(.head .photo-lg) .facts dd { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-900); }
.admin-main:has(.head .photo-lg) .facts dd a { font-weight: 600; }
.admin-main:has(.head .photo-lg) .card > h3.h-sm { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.admin-main:has(.head .photo-lg) .head { padding: var(--space-4) 0 var(--space-2); }
/* One column grid for every card so labels line up from card to card (Contact has five facts, Assignment four). */
@media (min-width: 1100px) { .admin-main:has(.head .photo-lg) .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Staff editor: contact block alignment ---------- */
/* Four contact fields share one row; working hours and the "show mobile" choice share the next, each two columns wide. */
.admin-main .form-card .form-grid .span-2 { grid-column: span 2; }
.admin-main .form-card .form-grid .option-card { display: flex; flex-direction: column; justify-content: center; align-self: end; min-height: 44px; margin-bottom: var(--space-4); padding: 0; }
.admin-main .form-card .form-grid .option-card .check { margin-top: 0; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.admin-main .form-card .form-grid .option-card .help { margin-top: 6px; }
.admin-main .form-card .field.wide.note {
  margin: 0 !important; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-info-bg); color: var(--color-info); font-size: var(--text-sm); line-height: 1.5;
}
@media (max-width: 760px) { .admin-main .form-card .form-grid .span-2 { grid-column: 1 / -1; } }

/* ---------- Admin: management staff list ---------- */
/* This list uses table.table (not .data-table), which had no rules, so it rendered as bare text. Give it the console's table treatment. */
.admin-main .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow-x: auto; }
.admin-main table.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-main table.table th {
  text-align: left; background: var(--color-surface-muted); color: var(--color-ink-500); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .02em; padding: 12px 18px; border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.admin-main table.table td { padding: 14px 18px; border-bottom: 1px solid var(--color-ink-100); vertical-align: middle; }
.admin-main table.table tbody tr { transition: background .12s ease; }
.admin-main table.table tbody tr:hover td { background: var(--color-primary-50); }
.admin-main table.table tbody tr:last-child td { border-bottom: 0; }
/* People: a bigger avatar, a name that reads as the row's link, a quieter second line. */
.admin-main a.person { color: inherit; text-decoration: none; }
.admin-main a.person:hover { text-decoration: none; }
.admin-main a.person:hover .p-name { color: var(--color-primary-600); }
.admin-main .avatar-sm { flex: 0 0 44px; width: 44px; height: 44px; font-size: var(--text-base); background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-200)); }
.admin-main .p-name { font-size: var(--text-base); font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink-900); }
.admin-main .p-sub { margin-top: 2px; display: block; }
.admin-main table.table td a[href^="mailto:"], .admin-main table.table td a[href^="tel:"] { color: var(--color-ink-700); }
.admin-main table.table td a[href^="mailto:"]:hover, .admin-main table.table td a[href^="tel:"]:hover { color: var(--color-primary-600); }
.admin-main .tag { white-space: nowrap; }
/* Search and filters sit in one tidy panel. */
.admin-main form.filters { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-4); }
.admin-main form.filters .field > label { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-500); letter-spacing: .02em; }
.admin-main form.filters .cluster { align-self: end; }
/* Result count / pager line. */
.admin-main .table-wrap + * { margin-top: var(--space-3); }

/* ---------- Admin: rental management dashboard ---------- */
/* Tile rows are laid out by how many tiles they hold, so a row of five is five across (it was wrapping 3 + 2) and a row of four is four. */
.admin-main .kpis:has(> :nth-child(5)):not(:has(> :nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-main .kpis:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-main .kpis:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-main .kpis:has(> :nth-child(6)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-main .kpis { gap: var(--space-3); margin-bottom: var(--space-3); }
.admin-main .kpi { position: relative; padding: var(--space-4); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.admin-main a.kpi:hover { border-color: var(--color-primary-200); box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.admin-main .kpi .l { font-size: var(--text-sm); }
.admin-main .kpi .v { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); font-variant-numeric: tabular-nums; }
/* A tile that needs action gets a warm edge instead of just a coloured number. */
.admin-main .kpi.hot { border-color: var(--color-danger); box-shadow: inset 4px 0 0 var(--color-danger), var(--shadow-card); }
.admin-main .kpi.hot .l::before { content: ""; }
/* The result tiles (completed / cancelled / revenue) read as a quieter second tier. */
.admin-main .kpis + .kpis { margin-bottom: var(--space-5); }
.admin-main .kpis + .kpis .kpi { background: var(--color-surface-muted); box-shadow: none; }
/* View tabs: one connected segmented control. */
.admin-main nav.views { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); margin-bottom: var(--space-4); }
.admin-main .view-tab { border: 0; background: transparent; padding: 8px 16px; font-weight: 600; }
.admin-main .view-tab:hover { background: var(--color-ink-100); color: var(--color-ink-900); }
.admin-main .view-tab.active, .admin-main .view-tab.active:hover { background: var(--color-primary-500); color: #fff; box-shadow: 0 1px 2px rgba(11,58,58,.2); }
html[data-theme="dark"] .admin-main .kpis + .kpis .kpi { background: var(--color-surface-muted); }
@media (max-width: 900px) { .admin-main .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* A card that holds a table uses the full width (the single-card reading width would squeeze its columns). */
.admin-main > .card.card-flush, .admin-main > .card:has(> table), .admin-main > .card:has(> .table-wrap) { max-width: none !important; }
.admin-main table.data-table td[data-label="Homeowner"] { min-width: 200px; }
.admin-main table.data-table td[data-label="Payment"] { white-space: nowrap; }