:root {
    /* Material 3 dark scheme, seeded from the brand blue, plus a couple of
       accent hues for the glass gradient behind everything. Every surface
       role below maps to an M3 concept (surface / surface-container-*,
       on-surface, outline) even though the names stay CSS-friendly rather
       than literal M3 tokens. */
    --bg: #0a0b10;
    --bg-glow-1: rgba(124, 145, 255, 0.16);
    --bg-glow-2: rgba(154, 111, 255, 0.12);
    --bg-glow-3: rgba(79, 141, 253, 0.1);

    --surface-container-low: rgba(22, 24, 32, 0.6);
    --surface-container: rgba(30, 33, 44, 0.58);
    --surface-container-high: rgba(40, 44, 58, 0.62);
    --surface-solid: #14161d;
    --surface-hover: rgba(255, 255, 255, 0.06);

    --outline: rgba(255, 255, 255, 0.09);
    --outline-strong: rgba(255, 255, 255, 0.18);

    --on-surface: #edeef4;
    --on-surface-variant: #a6acbd;
    --on-surface-faint: #767c8f;

    --primary: #9db8ff;
    --on-primary: #072659;
    --primary-container: rgba(157, 184, 255, 0.16);
    --on-primary-container: #d4e0ff;

    --success: #7fdcae;
    --success-container: rgba(60, 200, 138, 0.16);
    --warning: #f3c46e;
    --warning-container: rgba(224, 166, 60, 0.16);
    --danger: #ff9a90;
    --danger-container: rgba(242, 104, 95, 0.16);

    /* legacy aliases still referenced by a couple of inline rgba() picks
       below (kept as vars so the palette stays centralized) */
    --accent: var(--primary);
    --accent-strong: #c1d3ff;
    --accent-soft: var(--primary-container);
    --text: var(--on-surface);
    --text-muted: var(--on-surface-variant);
    --text-faint: var(--on-surface-faint);
    --border: var(--outline);
    --border-strong: var(--outline-strong);
    --surface: var(--surface-container);
    --bg-elevated: var(--surface-container-low);

    --shape-xs: 8px;
    --shape-sm: 12px;
    --shape-md: 16px;
    --shape-lg: 24px;
    --shape-xl: 32px;
    --shape-full: 999px;
    --radius-sm: var(--shape-xs);
    --radius-md: var(--shape-sm);
    --radius-lg: var(--shape-md);

    --glass-blur: blur(24px) saturate(150%);
    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
    --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.28);
    --elevation-3: 0 8px 16px rgba(0, 0, 0, 0.32), 0 20px 40px rgba(0, 0, 0, 0.32);
    --shadow-card: var(--elevation-2);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--bg);
    background-image: radial-gradient(ellipse 900px 560px at 12% -8%, var(--bg-glow-1), transparent 60%),
        radial-gradient(ellipse 760px 520px at 88% 8%, var(--bg-glow-2), transparent 60%),
        radial-gradient(ellipse 1000px 700px at 50% 110%, var(--bg-glow-3), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

p {
    line-height: 1.55;
}

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

::selection {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

/* Thin, unobtrusive scrollbars — fits the glass aesthetic better than the
   default chunky ones. */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--outline-strong);
    border-radius: var(--shape-full);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* App shell — full-height layout: a classic glass drawer pinned to the
   left (logo up top, section nav, logout pinned to the bottom) with the
   page content filling the rest of the viewport. Replaces the old top
   header entirely so the whole screen is usable content, not a bar eating
   space. The drawer only renders once someone's logged in — logged-out
   pages (home/login/register) get the full width to themselves. */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-shell > main {
    flex: 1;
    min-width: 0;
}

.app-drawer {
    flex-shrink: 0;
    width: 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    background: rgba(12, 13, 18, 0.55);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--outline);
}

.app-drawer-logo {
    display: block;
    padding: 0.5rem 0.75rem 1.75rem;
}

.app-drawer-logo img {
    display: block;
    height: 32px;
    width: auto;
}

.app-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.app-drawer-link {
    padding: 0.7rem 0.9rem;
    border-radius: var(--shape-full);
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
}

.app-drawer-link:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.app-drawer-link.active {
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 650;
}

.app-drawer-spacer {
    flex: 1;
}

.app-drawer-logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--shape-full);
    border: 1px solid var(--outline);
    background: var(--surface-container);
    color: var(--on-surface-variant);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.app-drawer-logout svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.app-drawer-logout:hover {
    background: var(--danger-container);
    color: var(--danger);
    border-color: var(--danger-container);
}

/* Layout */

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2.5rem 5rem;
}

/* Hero */

.hero {
    text-align: center;
    padding: 2.5rem 0 3.5rem;
    max-width: 640px;
    margin: 0 auto;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-primary-container);
    background: var(--primary-container);
    border: 1px solid var(--outline);
    border-radius: var(--shape-full);
    padding: 0.4rem 1rem;
    margin-bottom: 1.25rem;
}

.hero h1 {
    font-size: 2.7rem;
    line-height: 1.14;
    margin-bottom: 0.9rem;
}

.accent-text {
    color: var(--accent-strong);
}

.hero p {
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* Profile cards */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.profile-card {
    background: var(--surface-container);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline);
    border-radius: var(--shape-lg);
    padding: 1.85rem;
    box-shadow: var(--elevation-1);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
}

.profile-card:hover {
    border-color: var(--outline-strong);
    transform: translateY(-3px);
    box-shadow: var(--elevation-2);
}

.profile-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--shape-md);
    background: var(--primary-container);
    color: var(--on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}

.profile-icon svg {
    width: 22px;
    height: 22px;
}

.profile-card h2 {
    font-size: 1.15rem;
}

.profile-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    flex-grow: 1;
}

.profile-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

/* Buttons — M3 filled / tonal / outlined / text, all fully rounded */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--shape-full);
    padding: 0.7rem 1.4rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease,
        box-shadow 0.15s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--elevation-1);
}

.btn-primary:hover {
    background: var(--accent-strong);
    box-shadow: var(--elevation-2);
}

.btn-outline {
    background: transparent;
    border-color: var(--outline-strong);
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--accent-strong);
    background: var(--primary-container);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.btn-block {
    width: 100%;
}

.btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Forms / cards — glass panels */

.card {
    background: var(--surface-container);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline);
    border-radius: var(--shape-lg);
    padding: 2rem;
    box-shadow: var(--elevation-2);
}

.card h1 {
    font-size: 1.4rem;
}

.card h2 {
    font-size: 1.05rem;
}

.card-subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: -0.25rem;
    margin-bottom: 1.5rem;
}

.form-page {
    max-width: 420px;
    margin: 0 auto;
}

.back-link {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.back-link:hover {
    color: var(--text);
}

.form-page form,
.card form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    /* Grid/flex items default to a content-based min-width, which lets a
       text input's intrinsic size push it past its column — reset it so
       inputs actually shrink to fit their container. */
    min-width: 0;
}

label small {
    color: var(--text-faint);
    font-weight: 400;
}

input,
button,
textarea,
select {
    font-family: inherit;
}

/* M3 "filled" text field: tonal fill, no visible border until focus, then
   a clean 2px primary outline — applied to every text-like control so
   nothing falls back to an unstyled (light-on-dark) native control. */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='time'],
textarea,
select {
    width: 100%;
    background: var(--surface-container-low);
    border: 1px solid var(--outline);
    border-radius: var(--shape-xs);
    padding: 0.7rem 0.9rem;
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color-scheme: dark;
}

textarea {
    resize: vertical;
    min-height: 5rem;
    font-family: inherit;
    line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-container);
}

input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--primary);
}

.error {
    color: var(--danger);
    font-size: 0.88rem;
    margin: 0;
}

.hint {
    color: var(--text-faint);
    font-size: 0.82rem;
    margin: -0.5rem 0 0;
}

/* Address autocomplete */

.address-field {
    position: relative;
}

.address-suggestions {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface-container-high);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline-strong);
    border-radius: var(--shape-sm);
    box-shadow: var(--elevation-3);
}

.address-suggestions li {
    padding: 0.6rem 0.7rem;
    border-radius: var(--shape-xs);
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
}

.address-suggestions li:hover {
    background: var(--surface-hover);
}

.address-confirmed {
    color: var(--success);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Snackbar */

.snackbar {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: rgba(255, 100, 90, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: #2a0805;
    padding: 0.9rem 1.1rem 0.9rem 1.2rem;
    border-radius: var(--shape-md);
    box-shadow: var(--elevation-3);
    font-size: 0.9rem;
    font-weight: 500;
    max-width: min(90vw, 480px);
    z-index: 100;
}

.snackbar-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.snackbar-close:hover {
    opacity: 1;
}

/* Dashboards */

.dashboard-header {
    margin-bottom: 1.75rem;
}

.dashboard-header-pending {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-header h1 {
    font-size: 1.7rem;
}

.dashboard-header p {
    color: var(--text-muted);
    margin: 0;
}

.dashboard .card {
    margin-bottom: 1.75rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-container);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline);
    border-radius: var(--shape-lg);
    overflow: hidden;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--outline);
    font-size: 0.9rem;
}

.data-table th {
    color: var(--text-faint);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-container-low);
}

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

.empty-state {
    color: var(--text-faint);
    text-align: center;
    padding: 1.5rem;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.inline-form input {
    flex: 1 1 160px;
    min-width: 0;
}

/* Badges — M3 tonal chips */

.badge {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--shape-full);
    background: var(--surface-hover);
    color: var(--text-muted);
}

.badge-VALIDATED,
.badge-ACCEPTED {
    background: var(--success-container);
    color: var(--success);
}

.badge-PENDING {
    background: var(--warning-container);
    color: var(--warning);
}

.badge-REJECTED {
    background: var(--danger-container);
    color: var(--danger);
}

.badge-available {
    background: var(--success-container);
    color: var(--success);
}

/* Mission statuses */

.badge-DRAFT {
    background: var(--surface-hover);
    color: var(--text-faint);
}

.badge-PUBLISHED {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.badge-FILLED,
.badge-COMPLETED {
    background: var(--success-container);
    color: var(--success);
}

.badge-IN_PROGRESS {
    background: var(--warning-container);
    color: var(--warning);
}

.badge-CANCELLED {
    background: var(--danger-container);
    color: var(--danger);
}

/* Mission list */

.mission-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mission-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.mission-card {
    background: var(--surface-container);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline);
    border-radius: var(--shape-md);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--elevation-1);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.mission-card-clickable {
    cursor: pointer;
}

.mission-card-clickable:hover {
    border-color: var(--outline-strong);
    transform: translateY(-1px);
}

.mission-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.mission-card-header h3 {
    margin: 0;
    font-size: 1.02rem;
}

.mission-card-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Guard availability calendar — kept compact: a scrollable list capped at a
   few rows, with the add-form collapsed behind the "+" toggle by default. */

.calendar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.calendar-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--shape-xs);
    background: var(--surface-container-low);
    font-size: 0.85rem;
}

.calendar-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--outline);
}

.badge-unavailable {
    background: var(--danger-container);
    color: var(--danger);
}

/* Client dashboard content — section nav now lives in the global .app-drawer */

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.9rem;
    background: var(--surface-container);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--outline);
    border-radius: var(--shape-lg);
    padding: 1.25rem;
    box-shadow: var(--elevation-1);
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    min-width: 0;
}

.search-field.address-field {
    flex: 2 1 220px;
    position: relative;
}

.search-field input {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-strong);
    border-radius: var(--shape-xs);
    padding: 0.6rem 0.75rem;
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.search-field input:focus {
    border-color: var(--primary);
}

.search-results {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.search-map {
    height: 480px;
    border-radius: var(--shape-lg);
    border: 1px solid var(--outline);
    overflow: hidden;
}

.search-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 480px;
    overflow-y: auto;
}

.guard-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface-container);
    border: 1px solid var(--outline);
    border-radius: var(--shape-md);
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.guard-result:hover {
    border-color: var(--outline-strong);
    transform: translateY(-1px);
}

.guard-result-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.guard-result-city {
    font-size: 0.8rem;
    color: var(--text-faint);
}

/* Side drawer — slides in from the right, used for guard detail and the
   mission create/edit form. */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
}

.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: rgba(20, 22, 29, 0.72);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--outline-strong);
    box-shadow: var(--elevation-3);
    z-index: 201;
    padding: 1.75rem;
    overflow-y: auto;
}

.side-drawer-wide {
    width: min(560px, 100vw);
}

/* Slide-in/fade — ngAnimate hooks these classes onto the ng-if'd backdrop
   and drawer automatically on enter/leave, matching their CSS transition
   duration before actually removing the element on close. */

.side-drawer.ng-enter,
.side-drawer.ng-leave.ng-leave-active {
    transform: translateX(100%);
}

.side-drawer.ng-enter.ng-enter-active,
.side-drawer.ng-leave {
    transform: translateX(0);
}

.side-drawer.ng-enter,
.side-drawer.ng-leave {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.drawer-backdrop {
    opacity: 1;
}

.drawer-backdrop.ng-enter,
.drawer-backdrop.ng-leave.ng-leave-active {
    opacity: 0;
}

.drawer-backdrop.ng-enter.ng-enter-active,
.drawer-backdrop.ng-leave {
    opacity: 1;
}

.drawer-backdrop.ng-enter,
.drawer-backdrop.ng-leave {
    transition: opacity 0.25s ease;
}

/* Consistent vertical rhythm between the cards/header stacked inside the
   drawer — plain sibling divs have no margin of their own otherwise. */
.drawer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Mission-creation form: every card's fields (labels, hints, buttons...)
   are loose direct children — unlike registration/onboarding pages, they
   aren't wrapped in their own nested <form> (one single <form> wraps every
   card here), so .card form's usual gap never reaches them. Give the gap
   directly to these cards instead. Headings get their margin zeroed so the
   gap is the only spacing after them (kept elsewhere in the app where cards
   aren't gapped); .hint keeps its own slightly-negative margin so it still
   hugs the field above it, same "caption" look used everywhere else. */
.mission-form .card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.mission-form .card > h1,
.mission-form .card > h2,
.mission-form .card > h3 {
    margin: 0;
}

/* "Autre adresse" fields, and the AI analysis results — both are plain
   wrapper divs (not their own form/category-list), so they need the same
   gap treatment as their parent card. */
.custom-address-fields {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.analysis-result {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--outline);
}

.drawer-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.drawer-close:hover {
    color: var(--text);
}

.drawer-header {
    padding-right: 2rem;
}

.drawer-header h2 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

.drawer-details {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
}

.drawer-row dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
}

.drawer-row dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text);
}

/* Guard onboarding wizard */

.onboarding-page {
    max-width: 560px;
    margin: 0 auto;
}

.stepper {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}

.stepper-item {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-faint);
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--outline);
}

.stepper-item.is-done {
    color: var(--success);
    border-bottom-color: var(--success);
}

.stepper-item.is-active {
    color: var(--accent-strong);
    border-bottom-color: var(--primary);
}

.page-loading {
    text-align: center;
    color: var(--text-faint);
    padding: 3rem 0;
}

.page-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 0;
    color: var(--text-faint);
}

/* Native CSS loader — the standard rotating-ring pattern, no library. */

.material-spinner {
    display: inline-block;
    border: 3px solid var(--outline);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: material-spin 0.7s linear infinite;
}

.material-spinner-inline {
    width: 40px;
    height: 40px;
}

.material-spinner-hero {
    width: 64px;
    height: 64px;
    border-width: 4px;
}

@keyframes material-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .material-spinner {
        animation-duration: 1.6s;
    }
}

/* "En attente de validation" icon badge — plain inline SVG, no library. */

.material-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-container);
    color: var(--on-primary-container);
    animation: material-pulse 2.2s ease-in-out infinite;
}

.material-icon-badge-hero {
    width: 160px;
    height: 160px;
    margin: 0 auto 1.25rem;
}

.material-icon-badge-hero svg {
    width: 72px;
    height: 72px;
}

.material-icon-badge-inline {
    width: 48px;
    height: 48px;
}

.material-icon-badge-inline svg {
    width: 24px;
    height: 24px;
}

@keyframes material-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .material-icon-badge {
        animation: none;
    }
}

.upload-zone {
    border: 1.5px dashed var(--outline-strong);
    border-radius: var(--shape-md);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--surface-container-low);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-zone:hover {
    border-color: var(--primary);
    background: var(--primary-container);
}

.upload-zone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.upload-zone-row > label {
    flex: 1 1 160px;
}

input[type='file'] {
    width: 100%;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-strong);
    border-radius: var(--shape-xs);
    padding: 0.6rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.doc-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--outline);
}

.doc-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.badge-EXTRACTED,
.badge-CONFIRMED {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.badge-EXTRACTION_FAILED {
    background: var(--warning-container);
    color: var(--warning);
}

.badge-MISSING {
    background: var(--surface-hover);
    color: var(--text-faint);
}

.section-title {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--outline);
}

.section-title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.profession-group {
    margin-bottom: 1.1rem;
}

.profession-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin: 0 0 0.5rem;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.category-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    font-size: 0.92rem;
    cursor: pointer;
    padding: 0.55rem 0.8rem;
    border-radius: var(--shape-full);
    background: var(--surface-container-low);
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    width: fit-content;
}

.category-option:hover {
    border-color: var(--outline-strong);
}

.category-option input[type='checkbox'],
.category-option input[type='radio'] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--primary);
}

.diploma-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Guard dashboard: onboarding timeline */

.onboarding-timeline {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.onboarding-timeline li a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: var(--shape-md);
    border: 1px solid var(--outline);
    background: var(--surface-container-low);
    color: var(--text);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.onboarding-timeline li a:hover {
    background: var(--surface-hover);
}

.onboarding-timeline li.is-current a {
    border-color: var(--primary);
    background: var(--primary-container);
}

.timeline-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.onboarding-timeline li.is-done .timeline-index {
    background: var(--success-container);
    color: var(--success);
}

.onboarding-timeline li.is-current .timeline-index {
    background: var(--primary);
    color: var(--on-primary);
}

.timeline-label {
    flex: 1;
    font-size: 0.92rem;
}

/* Responsive */

@media (max-width: 900px) {
    .search-results {
        grid-template-columns: 1fr;
    }

    .search-map {
        height: 320px;
    }
}

@media (max-width: 640px) {
    .app-drawer {
        width: 210px;
        padding: 1.25rem 0.75rem;
    }

    .app-drawer-logo {
        padding: 0.25rem 0.5rem 1.25rem;
    }

    .app-drawer-link,
    .app-drawer-logout {
        padding: 0.6rem 0.7rem;
        font-size: 0.86rem;
    }

    main {
        padding: 2rem 1.25rem 4rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .search-bar {
        flex-direction: column;
        align-items: stretch;
    }
}