/* ===== GOOGLE FONTS (loaded in base.html) ===== */
/* Display face: Playfair Display (serif — headings, brand wordmark, big numbers). */
/* Body/UI face: Inter (everything else — nav, buttons, paragraphs, labels, footer). */

/* ===== THEME VARIABLES =====
   Reference design system: a confident blue primary (#1E40AF) for buttons, links,
   the logo and label-headings; a teal (#006A61) for support/"help" actions; pale
   blue grounds for alternating sections, CTA blocks and soft cards; an amber wash
   for status badges. Light is authoritative; the dark theme derives the same roles. */
:root, [data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #eef2fb;
    --text: #0b1220;
    --text-2: #33404f;
    --muted: #6b7280;
    --primary: #1e40af;
    --primary-hover: #17337f;
    --primary-2: #006a61;
    --primary-2-hover: #00544d;
    --primary-glow: rgba(30,64,175,0.10);
    --accent: #92610e;
    --accent-glow: #fef3c5;
    --danger: #b8432f;
    --danger-glow: rgba(184,67,47,0.10);
    --ok: #006a61;
    --info: #1e6fa8;
    --info-glow: rgba(30,111,168,0.12);
    --line: #e3e7f4;
    --shadow: 0 1px 2px rgba(15,23,42,0.05), 0 10px 28px rgba(30,64,175,0.07);
    --shadow-hover: 0 4px 10px rgba(30,64,175,0.08), 0 22px 44px rgba(30,64,175,0.13);
    --card-bg: #ffffff;
    --card-border: #e4e9f6;
    --nav-bg: rgba(255,255,255,0.92);
    --input-bg: #ffffff;
    --bubble-bg: #eef2fb;
    /* Reference-system section grounds */
    --section-alt: #f8f9ff;   /* alternating sections */
    --cta-bg: #dce9ff;        /* CTA blocks + footer */
    --card-soft: #e5eeff;     /* testimonial / soft plates */
    --stats-gradient: linear-gradient(135deg, #1e40af, #204ac0);
    --hero-from: #17337f;
    --hero-via: #1e40af;
    --hero-to: #204ac0;
    --hero-ink: rgba(255,255,255,0.92);
    --hero-ink-muted: rgba(255,255,255,0.74);
    --peak-1: #1e40af;
    --peak-2: #2456c6;
    --peak-3: #1e6fa8;
    --peak-4: #0a7e73;
    --peak-5: #006a61;
    --hero-scrim: linear-gradient(155deg, rgba(23,51,127,0.92) 0%, rgba(30,64,175,0.82) 45%, rgba(32,74,192,0.52) 100%);
    --ok-glow: rgba(0,106,97,0.13);
}

[data-theme="dark"] {
    --bg: #0e131d;
    --surface: #151b28;
    --surface-2: #1c2436;
    --text: #eef1f8;
    --text-2: #c7cede;
    --muted: #8b93a7;
    --primary: #7da2f0;
    --primary-hover: #6b90de;
    --primary-2: #3fb0a3;
    --primary-2-hover: #57bcb0;
    --primary-glow: rgba(125,162,240,0.15);
    --accent: #e8c877;
    --accent-glow: rgba(232,200,119,0.15);
    --danger: #e08871;
    --danger-glow: rgba(224,136,113,0.12);
    --ok: #3fb0a3;
    --info: #6fb0d8;
    --info-glow: rgba(111,176,216,0.16);
    --line: rgba(255,255,255,0.09);
    --shadow: 0 1px 2px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.34);
    --shadow-hover: 0 4px 10px rgba(0,0,0,0.34), 0 24px 48px rgba(0,0,0,0.44);
    --card-bg: #151b28;
    --card-border: rgba(255,255,255,0.08);
    --nav-bg: rgba(14,19,29,0.92);
    --input-bg: #1c2436;
    --bubble-bg: rgba(125,162,240,0.10);
    --section-alt: #141b2b;
    --cta-bg: #16233b;
    --card-soft: #1c2b48;
    --stats-gradient: linear-gradient(135deg, #1c3a8a, #24499f);
    --hero-from: #0a1220;
    --hero-via: #13224a;
    --hero-to: #17325e;
    --hero-ink: rgba(255,255,255,0.94);
    --hero-ink-muted: rgba(255,255,255,0.68);
    --peak-1: #7da2f0;
    --peak-2: #6f97e6;
    --peak-3: #5aa6d0;
    --peak-4: #3fb0a3;
    --peak-5: #57bcb0;
    --hero-scrim: linear-gradient(155deg, rgba(10,18,32,0.94) 0%, rgba(19,34,74,0.88) 45%, rgba(23,50,94,0.55) 100%);
    --ok-glow: rgba(63,176,163,0.16);
}

/* ===== LAYOUT TOKENS =====
   A small spacing scale and a named set of content widths. Nothing in the
   codebase is required to use these, but new/touched CSS should pull from
   here instead of inventing one-off values. */
:root {
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-9: 5rem;     /* 80px */

    /* Height of the sticky topbar row — used as the `top` offset for anything
       else that sticks (the dashboard side rail). Keep in sync with .topbar. */
    --nav-h: 3.85rem;

    /* Content widths: xl = wide dashboards, lg = default page content,
       md = long-form reading, sm = multi-field forms, xs = auth cards. */
    --container-xl: 1400px;
    --container-lg: 1200px;
    --container-md: 860px;
    --container-sm: 680px;
    --container-xs: 480px;
}

/* ===== LAYOUT / CONTAINERS =====
   Reusable width primitives. On very large screens content stops growing
   at its max-width instead of stretching edge to edge. */
.container, .container-lg { width: min(100% - 2rem, var(--container-lg)); margin-inline: auto; }
.container-xl { width: min(100% - 2rem, var(--container-xl)); margin-inline: auto; }
.container-md { width: min(100% - 2rem, var(--container-md)); margin-inline: auto; }
.container-sm { width: min(100% - 2rem, var(--container-sm)); margin-inline: auto; }
.container-xs { width: min(100% - 2rem, var(--container-xs)); margin-inline: auto; }

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    transition: background 0.4s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
main { min-height: 72vh; }
img { max-width: 100%; display: block; }

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

.skip-link {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 300;
    padding: 0.7rem 1.1rem;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-weight: 700;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== TYPOGRAPHY =====
   Playfair Display (serif) carries headings, the brand wordmark and big numbers
   (the display voice); Inter carries everything read at length — nav, buttons,
   paragraphs, labels, the footer (the working voice). */
h1, h2, h3, .display, .metric {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    letter-spacing: -0.005em;
    color: var(--text);
}
h1 { margin: 0.4rem 0 1rem; font-size: clamp(2.1rem, 5.6vw, 4.1rem); line-height: 1.06; font-weight: 700; }
h2 { margin: 0 0 0.9rem; font-size: clamp(1.6rem, 3.4vw, 2.35rem); font-weight: 700; }
h3 { margin: 0 0 0.6rem; font-size: 1.14rem; font-weight: 600; }
p { color: var(--muted); line-height: 1.65; transition: color 0.3s ease; }
.lede { font-size: 1.08rem; color: var(--text-2); max-width: 42rem; }

/* Accent word inside a heading — the product/keyword: primary colour + a thin
   teal underline. Kept as a sibling span so [data-i18n] textContent swaps still
   work on the surrounding text nodes. */
.h-accent {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--primary-2);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.16em;
}

/* Eyebrow label above a section heading — uppercase, widely tracked, ~12px,
   primary blue, semibold. */
.eyebrow {
    display: inline-block;
    color: var(--primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    margin-bottom: 0.35rem;
}

/* ===== TOPBAR =====
   Three zones on one line: brand (fixed) · nav links (flexible) · toolbar (fixed).
   The link row never wraps and never squeezes its items below their natural
   size — when there isn't room it scrolls horizontally inside its own zone
   (scrollbar hidden, an edge fades in to signal there's more, swipe / trackpad
   / wheel all work). This keeps the bar a single clean row at every width from
   the widest desktop down to the mobile-menu breakpoint. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) clamp(var(--space-4), 4vw, 3.5rem);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.08rem;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--primary);
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
    color: white;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    transition: transform 0.3s ease;
}
.brand:hover .brand-mark { transform: rotate(-6deg); }

.nav-links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;               /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.nav-links::-webkit-scrollbar { display: none; }  /* WebKit / Blink */
/* Items keep their natural width and scroll past the edge — they never shrink. */
.nav-links > *,
.nav-links > .nav-logout-form > * { flex: 0 0 auto; }
/* Edge fade, only on the side that still has links hidden past it
   (.is-overflowing / .at-start / .at-end are maintained by base.html JS). */
.nav-links.is-overflowing {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--nav-fade-l, 0px), #000 calc(100% - var(--nav-fade-r, 0px)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--nav-fade-l, 0px), #000 calc(100% - var(--nav-fade-r, 0px)), transparent 100%);
}
.nav-links.is-overflowing:not(.at-start) { --nav-fade-l: 2.5rem; }
.nav-links.is-overflowing:not(.at-end)   { --nav-fade-r: 2.5rem; }

.nav-links a {
    position: relative;
    color: var(--text-2);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover { color: var(--primary); background: var(--surface-2); }
/* Current page — a filled primary pill with white text (set via aria-current
   in base.html from the resolved url name). */
.nav-links a[aria-current="page"] { color: #fff; background: var(--primary); }
.nav-links a.nav-cta { color: white; background: var(--primary); }
.nav-links a.nav-cta:hover { color: white; background: var(--primary-hover); }
.nav-links a.nav-cta[aria-current="page"] { color: white; background: var(--primary-hover); }
/* Logout sits among text links — keep it quiet, not a filled button. */
.nav-links .nav-logout-form { display: flex; align-items: center; }
.nav-links .nav-logout {
    min-height: unset;
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
}
.nav-links .nav-logout:hover { color: var(--danger); background: var(--surface-2); transform: none; box-shadow: none; }
.menu-button { display: none; flex: 0 0 auto; }

/* ===== TOOLBAR (lang · settings icon · profile) ===== */
.toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
.theme-toggle {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 1.05rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}
.theme-toggle:hover { border-color: var(--primary); }
/* Round profile chip in the corner (authenticated) — links to the dashboard. */
.nav-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-avatar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--primary-glow); }
.lang-group {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px;
}
.lang-btn {
    padding: 0.3rem 0.5rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: unset;
}
.lang-btn:hover { color: var(--primary); }
.lang-btn.active { background: var(--primary); color: white; }

/* ===== BUTTONS =====
   Fully rounded (pill), generous padding, flat fills — no gradient shimmer.
   primary = blue, secondary = teal (support / "help" actions). */
.button, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.7rem;
    padding: 0.8rem 1.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* Class selectors already outrank the bare `a { color: inherit }` tag rule,
   so these don't need !important — kept free of it on purpose. */
.primary { color: white; background: var(--primary); }
.primary:hover { transform: translateY(-1px); background: var(--primary-hover); box-shadow: 0 6px 18px var(--primary-glow); }
.secondary { color: white; background: var(--primary-2); }
.secondary:hover { transform: translateY(-1px); background: var(--primary-2-hover); box-shadow: 0 6px 18px var(--ok-glow); }
.ghost { color: var(--primary); background: transparent; border-color: var(--line); }
.ghost:hover { border-color: var(--primary); background: var(--surface-2); }
.danger { color: white; background: var(--danger); }
.danger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--danger-glow); }
.button:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.section-head .button-row { margin-top: 0; }
form.inline-form { display: inline-block; }

/* Five-peaks signature mark — used as a small brand accent (footer, regions panel) */
.peaks-mark { display: block; width: 100%; height: auto; }
.peaks-mark .peak { transition: transform 0.4s ease; transform-origin: bottom center; }

/* ===== SECTIONS & GRID =====
   .section is the default page-content container (--container-lg, 1200px).
   Add .section-md/.section-sm alongside it where a page needs a narrower
   reading/form measure instead — see AI Assistant and the auth/form pages. */
.section {
    padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1rem, 5vw, 3.5rem);
    max-width: var(--container-lg);
    margin: 0 auto;
}
.section.alt {
    max-width: none;
    background: var(--section-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.section.alt > * { max-width: var(--container-lg); margin-left: auto; margin-right: auto; }
.section.section-md { max-width: var(--container-md); }
.section.section-xl { max-width: var(--container-xl); }
.section.alt.section-xl > * { max-width: var(--container-xl); }
.section.alt.section-md > * { max-width: var(--container-md); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.section-head h2 { margin: 0; }

/* ===== PAGE HEADER =====
   The standard top-of-page block: title + optional lede on the left, an
   optional primary action on the right. Replaces the hand-rolled
   `.section-head > div > h1 + p.lede` pattern repeated across CRM/list pages.
   The inner-page h1 is a notch smaller than the hero h1 (which scales to 4.1rem). */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.page-header__text { min-width: 0; }
.page-header h1 { margin: 0 0 0.3rem; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.15; }
.page-header .lede { margin: 0; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
}
.grid.grid-narrow { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Wider columns for grids of *content* panels (a card with a list or a feed
   inside), which read badly when squeezed to card width — e.g. the admin
   panel's activity/emergency/applications row. The min() keeps the column from
   ever exceeding the container, so it can't force horizontal scroll on a phone.
   Higher specificity than the bare `.grid` tablet override below, so it isn't
   clawed back to a narrow column at 768px. */
.grid.grid-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
/* Panels that size to their own content instead of stretching to the tallest sibling. */
.grid.grid-top { align-items: start; }
.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: var(--space-6);
    align-items: start;
}
/* Both columns are grid items whose default `min-width: auto` lets a long
   unbreakable token (an email, a URL) push the track — and the page — wider
   than the viewport once the grid has collapsed to one column on a phone.
   Same guard the `.grid` / `.metric-row` / `.kpi-row` rows already carry. */
.two-col > * { min-width: 0; }
/* Vertical rhythm for a column of cards, replacing one-off margin-bottoms. */
.stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* ===== CARDS =====
   Flat, quiet, one clean shadow that deepens on hover. No blur, no shimmer. */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: var(--space-5);
    box-shadow: var(--shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card h3 { margin-top: 0.15rem; }

/* Soft plate — a pale-blue card on a white/CTA ground (icon + heading + text),
   the reference system's testimonial / action-card shape. */
.card--soft { background: var(--card-soft); border-color: transparent; box-shadow: none; }

/* Icon tile — a pastel rounded square holding an icon at the top of a card. */
.icon-tile {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 12px;
    background: var(--primary-glow);
    color: var(--primary);
    margin-bottom: var(--space-3);
}
.icon-tile svg { width: 1.4rem; height: 1.4rem; }
.icon-tile--teal { background: var(--ok-glow); color: var(--primary-2); }
.icon-tile--amber { background: var(--accent-glow); color: var(--accent); }

/* Equal-height cards in a shared group.
   A CSS grid already stretches every card in a row to the tallest one
   (align-items: stretch by default); making the card itself a column lets a
   trailing action row / "view full" link sit flush at the bottom so the whole
   row reads as one consistent shape. Content panels whose length genuinely
   differs opt out with `.grid.grid-top` (align-items: start) — see below. */
.grid > .card,
.grid > .opportunity-card,
.grid > .pet-card { display: flex; flex-direction: column; }
.grid > .card > .button-row:last-child,
.grid > .card > .card__foot,
.card__foot { margin-top: auto; }

/* Clamp overflowing copy to a fixed number of lines instead of letting the
   card grow; pair with a `.card__more` link to the full view. */
.clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp, 3);
    line-clamp: var(--clamp, 3);
    overflow: hidden;
}
.card__more {
    display: inline-block;
    margin-top: var(--space-2);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
}
.card__more:hover { text-decoration: underline; }

/* Lost & Found board card — a plain .card link with a tag row on top. */
.pet-card { color: inherit; gap: var(--space-2); }
.pet-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pet-card h3 { margin: 0; }

.stat-card { text-align: left; }
.metric { display: block; font-size: 2.1rem; font-weight: 700; color: var(--primary); line-height: 1.15; }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.metric-row > * { min-width: 0; }
.metric-row .stat-card .metric { color: var(--text); }
/* A small circular icon badge above a stat-card's number — used when the
   card is a link to a filtered/list page, so it reads as clickable without
   relying on colour or an arrow glyph. */
.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-glow);
    color: var(--primary);
    margin-bottom: var(--space-3);
}
.stat-icon svg { width: 20px; height: 20px; }

/* Compact divider list for dashboard "recent activity" panels — no card
   background of its own since it lives inside a .card already. */
.mini-list { display: grid; }
.mini-list-item { padding: var(--space-3) 0.1rem; border-bottom: 1px solid var(--line); }
.mini-list-item:last-child { border-bottom: none; }
.mini-list-item h4 { margin: 0 0 0.2rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mini-list-item p { margin: 0; font-size: 0.8rem; color: var(--muted); }
.meta-label { display: block; margin-bottom: 0.25rem; color: var(--muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.meta-label + p { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: break-word; }
/* A grid of label/value pairs — same rhythm as .metric-row, named for its use.
   min-width: 0 lets a long unbroken value (an email, a username) wrap inside
   its own column instead of overflowing into the next one — grid items
   default to a content-based minimum width, which ignores the track size. */
.detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.detail-meta > div { min-width: 0; }

/* A single centered content card for a status/confirmation message or a
   focused detail view — narrower than the page container on purpose. The
   default h1 scale (up to 4.1rem) is sized for full-width page headers and
   would overwhelm a 680px card, so it's toned down here. */
.detail-card { max-width: var(--container-sm); margin-inline: auto; }
.detail-card h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0.4rem 0 0.6rem; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--primary-2);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* Status-tag semantics — used consistently via myapp/_task_status_tag.html:
     (plain) .tag  → pending / free / neutral        (valley-teal)
     .tag.info     → active / in progress            (highland-blue)
     .tag.success  → completed / approved / available (valley-teal, filled tint)
     .tag.urgent   → overdue / cancelled / rejected / urgent (clay-red)
     .tag.muted    → offline / busy / archived / past (grey)
     .tag.accent   → highlight only (rank #1, "new") — never a status */
.tag.info { background: var(--info-glow); color: var(--info); }
.tag.urgent { background: var(--danger-glow); color: var(--danger); }
.tag.accent { background: var(--accent-glow); color: var(--accent); }
.tag.success { background: var(--ok-glow); color: var(--ok); }
.tag.muted { background: var(--surface-2); color: var(--muted); }
.tag.rank-1 { background: var(--accent-glow); color: var(--accent); }
.tag.rank-2, .tag.rank-3 { background: var(--surface-2); color: var(--text-2); }

/* ===== FORMS ===== */
.form-shell { max-width: var(--container-sm); margin: 3rem auto; padding: 0 1rem; }
.form-shell .card { padding: clamp(1.5rem, 4vw, 2.25rem); }
.form-shell h1, .form-shell h3 { font-size: clamp(1.6rem, 3.4vw, 2rem); }
.form-shell .button-row { justify-content: center; }

/* ===== FORM FIELDS (shared design system) =====
   Field wrappers, hints and errors rendered by templates/partials/_field.html
   and _form.html for every form in the app. Auth-page chrome (.auth-card,
   .auth-submit, .password-toggle, the role picker) lives in auth.css. */
.field-group { margin-bottom: var(--space-4); }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.field-hint-link { font-size: 0.82rem; font-weight: 600; color: var(--primary); }
.field-hint-link:hover { text-decoration: underline; }
.field-hint { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.82rem; }
.field-error { display: block; margin-top: 0.35rem; color: var(--danger); font-size: 0.82rem; font-weight: 600; }
.field-error:empty { margin-top: 0; }

.auth-alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
    background: var(--danger-glow);
    border: 1px solid var(--danger);
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
}

.checkbox-row { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.88rem; color: var(--text-2); cursor: pointer; }
.checkbox-input { margin-right: 0; }

form p { margin: 0 0 1rem; }
label { display: block; margin-bottom: 0.35rem; color: var(--text-2); font-weight: 600; font-size: 0.88rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .control {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="checkbox"], input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    min-height: unset;
    margin-right: 0.4rem;
    vertical-align: middle;
    accent-color: var(--primary);
    cursor: pointer;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
textarea { resize: vertical; }
.helptext { display: none; }
.errorlist { color: var(--danger); font-weight: 700; font-size: 0.9rem; list-style: none; }

/* Django's {{ form.as_p }} puts a checkbox's <label> before the <input> inside
   one <p>; the global `label { display: block }` would stack them on separate
   lines. Lay that specific pairing out as a row instead. */
p:has(> input[type="checkbox"]), p:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
p:has(> input[type="checkbox"]) label, p:has(> input[type="radio"]) label {
    display: inline;
    margin-bottom: 0;
}

/* File inputs (avatar/photo uploads) ignore most box styling on their native
   button, so give them a lighter treatment instead of the full input box. */
input[type="file"] {
    min-height: unset;
    padding: 0.5rem 0.6rem;
    font-size: 0.86rem;
    color: var(--muted);
}
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
input[type="file"]::file-selector-button:hover { border-color: var(--primary); background: var(--surface); }

/* ===== FILTER BAR =====
   One horizontal, wrapping row for a filter/search form — whether its fields
   are hand-written <div>s or Django's {{ form.as_p }} (each field lands in
   its own <p>; treat those exactly like the hand-written field groups). */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}
.filter-bar > p,
.filter-bar .field-group {
    flex: 1 1 180px;
    min-width: 160px;
    margin: 0;
}
/* A checkbox field is one short row, not a stacked label+control, so it can't
   just bottom-align with the selects. Seat it against the middle of the select
   inputs instead: sit at the row's baseline, then lift it by ~half an input
   height so the box lines up with the text in the neighbouring controls. */
.filter-bar > p:has(> input[type="checkbox"]),
.filter-bar > p:has(> input[type="radio"]),
.filter-bar .field-group:has(input[type="checkbox"]),
.filter-bar .field-group:has(input[type="radio"]) {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: var(--space-2);
}
.filter-bar .field-group:has(input[type="checkbox"]) { min-width: 0; }
.filter-bar button, .filter-bar .button { flex: 0 0 auto; align-self: flex-end; }

/* An applicant/person row: avatar + details + actions, wrapping on narrow
   screens instead of overflowing. Reuses .avatar-fallback for the initial. */
.applicant-row { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.applicant-row .applicant-body { flex: 1 1 220px; min-width: 220px; }
.applicant-row .applicant-body h3 { margin-top: 0.4rem; }
.applicant-row .applicant-quote { font-style: italic; }
.applicant-row .button-row { align-items: center; }

/* ===== TABLE LIST & ROWS ===== */
.table-list { display: grid; gap: var(--space-3); }
.request-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.request-row:hover { border-color: var(--primary); box-shadow: var(--shadow); }
/* Subtle emphasis for the #1 spot on the leaderboard — a tinted border, not a badge. */
.request-row--first { border-color: var(--accent); background: var(--accent-glow); }
.request-row .row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.row-rank { display: flex; align-items: center; gap: var(--space-4); }
.row-rank .rank-num { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.1rem; color: var(--muted); min-width: 1.6rem; }

/* ===== DATA TABLE (CRM lists) =====
   One scannable table on desktop; on narrow screens each row folds into a
   labelled card (thead hidden, each td shows its column name from
   data-label). The table scrolls inside .table-scroll — the page never does. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
}
.data-table thead th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--text-2);
    font-size: 0.9rem;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table td .cell-title { font-weight: 700; color: var(--text); }
.data-table td .cell-sub { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }
.data-table .col-actions { text-align: right; white-space: nowrap; }
.data-table .col-actions .button,
.data-table .col-actions button {
    min-height: 2.15rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
}
.data-table .col-actions form { display: inline-block; }
.data-table .col-actions--stack { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.data-table .col-num { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    /* Break the table box model entirely so rows can be full-width cards. */
    .table-scroll { overflow-x: visible; }
    .data-table, .data-table tbody { display: block; width: 100%; border: none; background: transparent; }
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .data-table tbody tr {
        display: block;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: var(--space-2) var(--space-4);
        margin-bottom: var(--space-3);
    }
    .data-table tbody tr:hover { background: var(--card-bg); }
    .data-table tbody td {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
        overflow-wrap: anywhere;
    }
    .data-table tbody tr td:last-child { border-bottom: none; }
    .data-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
    }
    .data-table td[data-label=""]::before { content: none; }
    .data-table td[data-label=""] { padding-top: 0.75rem; }
    .data-table .col-actions { text-align: left; white-space: normal; }
    .data-table .col-actions.col-actions--stack {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-2);
    }
}

/* ===== TAB BAR =====
   Segmented filter tabs (role / status filters). Replaces rows of .button
   used as tabs. Scrolls horizontally on narrow screens rather than wrapping
   into an uneven block. */
.tab-bar {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    margin-bottom: var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-bar a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-2);
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}
.tab-bar a .tab-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.tab-bar a:hover { color: var(--primary); background: var(--surface); }
.tab-bar a.is-active,
.tab-bar a[aria-current="page"] { background: var(--primary); color: #fff; }
.tab-bar a.is-active .tab-count,
.tab-bar a[aria-current="page"] .tab-count { color: rgba(255,255,255,0.75); }

/* ===== CODE BLOCK (one-time codes, tokens) ===== */
.code-block {
    display: block;
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--text);
    overflow-x: auto;
    white-space: pre;
}
.code-block code { user-select: all; }

/* ===== STATUS SCREEN =====
   A single centered card for a confirmation / error / not-found screen.
   Built on the auth shell so it matches the login/register treatment
   instead of the old glass-card look. */
.status-screen { display: grid; place-items: center; min-height: 68vh; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.status-screen .status-card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: clamp(1.75rem, 4vw, 2.5rem);
}
.status-screen .status-card h1 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin: 0.6rem 0 0.5rem; }
.status-screen .status-card p { margin: 0 auto 0.4rem; max-width: 34rem; }
.status-screen .status-code {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.status-screen .button-row { justify-content: center; margin-top: var(--space-5); }

/* ===== FORM ACTIONS ===== */
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.form-actions .button, .form-actions button { min-width: 8rem; }
.form-actions--full .button, .form-actions--full button { width: 100%; }

.text-center { text-align: center; }

/* ===== OPPORTUNITY CARDS (help-request marketplace listings) =====
   A colour-coded band + icon stands in for a photo per category, since the
   product has no request photography. Distinct on purpose from a plain .card. */
.opportunity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-4); align-items: stretch; }
.opportunity-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.opportunity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.opportunity-media {
    position: relative;
    height: 108px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.92);
}
.opportunity-media svg { width: 34px; height: 34px; }
.opportunity-media .tag.urgent { position: absolute; top: 0.65rem; right: 0.65rem; background: rgba(255,255,255,0.92); }
/* Larger media band + bigger icon for a single-item detail view. */
.opportunity-media--lg { height: 180px; }
.opportunity-media--lg svg { width: 44px; height: 44px; }
.media-medical { background: linear-gradient(135deg, #1e40af, #006a61); }
.media-grocery { background: linear-gradient(135deg, #006a61, #0a7e73); }
.media-transport { background: linear-gradient(135deg, #17337f, #1e6fa8); }
.media-household { background: linear-gradient(135deg, #92610e, #b8432f); }
.media-emotional { background: linear-gradient(135deg, #b8432f, #92610e); }
.media-documents { background: linear-gradient(135deg, #33404f, #1e40af); }
.media-other { background: linear-gradient(135deg, #6b7280, #33404f); }
.opportunity-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.opportunity-body h3 { margin: 0.1rem 0 0; }
/* Detail view reuses the same card with an <h1> in place of the listing <h3>. */
.opportunity-body h1 { margin: 0.1rem 0 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.opportunity-body .detail-meta { margin-top: 0.4rem; }
.opportunity-location { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.opportunity-location svg { flex-shrink: 0; color: var(--primary-2); }
.opportunity-desc { font-size: 0.9rem; margin: 0; flex: 1; }
.opportunity-cta { margin-top: 0.35rem; align-self: flex-start; }

/* ===== PROFILE HEADER & AVATAR (shared) =====
   Used by the dashboard, the CRM volunteer detail page, the rating board, task
   detail and the AI page. Dashboard-only chrome (greeting, sticky rail,
   quick-actions) lives in dashboard.css. */
.profile-head { display: flex; gap: var(--space-4); align-items: center; }
/* Let the text column shrink and wrap a long email instead of forcing the
   card (and, on a phone, the page) wider than the viewport. */
.profile-head > :not(.avatar) { min-width: 0; }
.profile-head p { overflow-wrap: anywhere; }
.detail-card > .profile-head { margin-bottom: var(--space-5); }
.avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 3px solid var(--surface-2);
    flex-shrink: 0;
}
/* No-avatar fallback: initials on a flat brand tint, never a fake person image. */
.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--primary);
    background: var(--primary-glow);
}
.avatar-sm { width: 44px; height: 44px; border-width: 2px; }
.avatar-fallback.avatar-sm { font-size: 1.05rem; }

/* Hidden visually, still read by screen readers and search engines. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== IMAGES ===== */
/* height:auto: see .volunteers-photo in home.css (width/height attributes). */
.report-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; }

/* ===== AI FLOATING BUTTON =====
   Persistent entry point to the AI assistant, shown on authenticated pages
   instead of a navbar link — see base.html for which pages exclude it. */
.ai-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-hover);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ai-fab svg { width: 24px; height: 24px; }
.ai-fab:hover, .ai-fab:focus-visible { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px var(--primary-glow); }
.ai-fab::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text);
    color: var(--surface);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.ai-fab:hover::after, .ai-fab:focus-visible::after { opacity: 1; }
@media (max-width: 640px) {
    .ai-fab { width: 48px; height: 48px; right: 16px; bottom: 16px; }
    .ai-fab svg { width: 21px; height: 21px; }
    .ai-fab::after { display: none; }
}

/* ===== TOASTS ===== */
.toast-stack { position: fixed; right: 1rem; top: 5rem; z-index: 200; display: grid; gap: var(--space-2); }
.toast { padding: 0.8rem 1.2rem; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); animation: toastIn 0.3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

/* ===== EMPTY STATES ===== */
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) var(--space-5); border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.empty-state svg { color: var(--muted); }
.empty-state strong { color: var(--text); font-size: 1rem; }

/* ===== STATUS PANEL (volunteer application status) ===== */
.status-panel { text-align: center; padding: clamp(2rem, 5vw, 3rem); }
.status-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; }
.status-icon.is-pending { background: var(--accent-glow); color: var(--accent); }
.status-icon.is-approved { background: var(--ok-glow); color: var(--ok); }
.status-icon.is-rejected { background: var(--danger-glow); color: var(--danger); }
.status-panel h1 { margin-bottom: 0.4rem; }
.status-panel .status-badge { margin: 0.6rem auto 1.2rem; }
.status-panel .button-row { justify-content: center; }
.status-message { margin-top: var(--space-3); }
.status-meta { color: var(--muted); font-size: 0.86rem; margin-top: var(--space-5); }
.status-meta + .status-meta { margin-top: 0.2rem; }

/* ===== FOOTER =====
   Pale-blue ground (--cta-bg), three columns: brand + blurb + pill link ·
   column heading + text + pill badges · contacts (icon + line each). A divider,
   then copyright left / legal links right in small muted text. */
.footer {
    background: var(--cta-bg);
    color: var(--text-2);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3.5rem) var(--space-6);
    border-top: 1px solid var(--line);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    max-width: var(--container-lg);
    margin: 0 auto;
}
.footer-col h3 { margin-bottom: var(--space-3); font-size: 1.05rem; }
.footer-col p { margin-bottom: var(--space-4); font-size: 0.9rem; }
.footer-col .brand { margin-bottom: var(--space-4); }
.footer-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-contacts { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-contacts a, .footer-contacts span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--text-2);
}
.footer-contacts a:hover { color: var(--primary); }
.footer-contacts svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--primary-2); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: var(--container-lg);
    margin: var(--space-6) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom a:hover { color: var(--primary); }
.footer-mark { display: flex; align-items: center; gap: var(--space-2); }
.footer-mark .peaks-mark { width: 60px; }
@media (max-width: 820px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }

/* ===== RESPONSIVE =====
   Desktop 1440px+, tablet 768px+, mobile 320px+.
   Page-scoped responsive rules live with their component: hero in home.css,
   auth card in auth.css, map/ops in map.css, stepper in task-detail.css. */
/* Below this width the link row folds into a tap-to-open dropdown instead of a
   horizontal scroller — on a phone a full-height menu is easier to use than a
   one-line strip you have to swipe through. The brand stays left; the language
   switcher, theme toggle and menu button group on the right. */
@media (max-width: 960px) {
    .topbar > .toolbar { margin-left: auto; }
    .menu-button {
        display: inline-flex;
        order: 3;
        background: var(--surface-2);
        color: var(--text);
        border-radius: 8px;
    }
    .nav-links {
        flex: none;
        display: none;
        position: absolute;
        left: var(--space-4); right: var(--space-4);
        top: 4.2rem;
        max-height: calc(100vh - 5.5rem);
        padding: var(--space-3);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
        z-index: 99;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .nav-links.open { display: flex; gap: var(--space-1); }
    .nav-links a.nav-cta { text-align: center; }
    .nav-links .nav-logout-form { display: flex; }
    .nav-links .nav-logout { width: 100%; justify-content: flex-start; }
    /* The dropdown already carries the Dashboard/profile link, so the corner
       profile chip is redundant here and only costs horizontal room. */
    .nav-avatar { display: none; }
}
@media (max-width: 820px) {
    .two-col { grid-template-columns: 1fr; }
    .request-row { grid-template-columns: 1fr; }
    .footer { flex-direction: column; align-items: flex-start; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .metric-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .page-header { align-items: flex-start; }
    .page-header__actions { width: 100%; }
}
@media (max-width: 560px) {
    /* Filter fields and their action button each take a full row rather than
       squeezing into an uneven wrap. */
    .filter-bar > p, .filter-bar .field-group { flex-basis: 100%; }
    .filter-bar button, .filter-bar .button { width: 100%; }
}
@media (max-width: 480px) {
    .grid, .opportunity-grid { grid-template-columns: 1fr; }
    .toolbar { gap: 0.3rem; }
    .lang-btn { padding: 0.25rem 0.4rem; font-size: 0.72rem; }
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    /* The 220px content-based floor on .applicant-body (plus an avatar and,
       in the people directory, a trailing rating figure) no longer fits
       beside its siblings at this width — let it take the full row instead
       of forcing the row wider than the viewport. */
    .applicant-row .applicant-body { flex-basis: 100%; min-width: 0; }
}
@media (max-width: 600px) {
    /* Below the mobile-menu breakpoint the serif wordmark plus the hamburger and
       the toolbar (segmented language switcher + settings toggle) no longer fit
       one unwrapped row — drop the wordmark, keep the mark (same link, still
       recognizable) and tighten the row. */
    .brand span:not(.brand-mark) { display: none; }
    .topbar { gap: var(--space-2); padding-inline: var(--space-4); }
}

/* Skills checkbox group on the edit-profile form — a wrapping row, not a
   bare bullet list (Django's CheckboxSelectMultiple default). */
.checkbox-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.35rem 0 0; padding: 0; }
.checkbox-group li { margin: 0; }
.checkbox-group label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 500; color: var(--text-2); cursor: pointer; }

/* ===== CRM: PAGINATION & KPI TILES =====
   Pagination reuses .button/.button-ghost for its controls — only the
   wrapping layout is new. KPI tiles reuse .card/.stat-card; the .kpi-row grid
   itself is defined just below. */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.pagination-info { color: var(--muted); font-size: 0.85rem; }
/* KPI tiles: a fixed, compact size that wraps and left-aligns. The tile never
   stretches past ~11.5rem, so a row of two or three tiles on a full-width page
   stays a row of small tiles instead of becoming two or three huge cards; a
   row that fills leaves its slack at the trailing edge, the way a dashboard
   strip should. grid-auto-rows keeps every wrapped row the same height even
   when one label runs to two lines. */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 11.5rem));
    grid-auto-rows: 1fr;
    justify-content: start;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.kpi-row > * { min-width: 0; }
.kpi-row .stat-card { padding: var(--space-4); }
.kpi-row .metric { font-size: 1.6rem; }
.kpi-group-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: var(--space-6) 0 var(--space-2); }
.activity-feed { display: flex; flex-direction: column; gap: var(--space-3); }
.activity-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 0.4rem; flex-shrink: 0; }
.activity-dot.is-urgent { background: var(--danger); }
.activity-dot.is-success { background: var(--ok); }
.activity-body p { margin: 0; }
.activity-time { color: var(--muted); font-size: 0.78rem; }

/* ===== EMERGENCY / SOS =====
   The one area allowed a strong danger treatment. Still flat — a solid danger
   fill and a danger left-border, no glow, no pulsing UI. Reuses .button.danger. */
.emergency-sos { margin-top: var(--space-4); }
.emergency-sos__summary {
    list-style: none;
    width: 100%;
    max-width: 22rem;
}
.emergency-sos__summary::-webkit-details-marker { display: none; }
.emergency-sos[open] .emergency-sos__summary { border-radius: 10px 10px 0 0; }
.emergency-confirm {
    border: 1px solid var(--danger);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--danger-glow);
    padding: var(--space-4);
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.emergency-confirm p { margin: 0; font-size: 0.88rem; color: var(--text-2, var(--text)); }
.emergency-confirm__field { margin: 0; }
.emergency-confirm textarea { width: 100%; }

.emergency-card { border-left: 3px solid var(--danger); }
.emergency-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--danger);
    border-radius: 12px;
    background: var(--danger-glow);
}
.emergency-notice p { margin: 0.15rem 0 0; font-size: 0.86rem; }

.emergency-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--danger);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--danger-glow);
    color: var(--text);
}
.emergency-banner svg { color: var(--danger); flex: 0 0 auto; margin-top: 0.1rem; }
.emergency-banner p { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--muted); }
.emergency-banner strong { font-size: 1rem; }
a.emergency-banner--link { text-decoration: none; transition: background 0.18s ease; }
a.emergency-banner--link:hover { background: var(--surface-2); }

.emergency-closed { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); margin-bottom: var(--space-4); }
.emergency-actions { display: flex; flex-direction: column; gap: var(--space-4); }
.emergency-close-form .field-group { margin: 0 0 0.6rem; }
.detail-reason { margin-top: var(--space-4); }
.detail-reason p { margin: 0.25rem 0 0; }

.stat-card--alert { border-color: var(--danger); }
.stat-card--alert .metric { color: var(--danger); }
.card--alert { border-color: var(--danger); }
.data-table tr.row-alert td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.mini-list-item--link { display: block; text-decoration: none; color: inherit; }
.mini-list-item--link:hover { background: var(--surface-2); }