/* ==========================================================================
   FAMILY SCHEDULER - shared stylesheet
   Used by signup.php, login.php and the dashboards.
   ========================================================================== */

:root {
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-soft: #eef2ff;
    --bg: #f1f5f9;
    --surface: #ffffff;
    --text: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
    --success: #16a34a;
    --success-soft: #ecfdf5;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --radius: 14px;
    --shadow: 0 20px 45px -25px rgba(15, 23, 42, 0.35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 24px;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    display: grid;
    place-items: center;
}

/* ---------- Card layout ---------- */

.card {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}

.card--wide { max-width: 720px; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.brand__badge {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: grid;
    place-items: center;
}

.brand__name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.brand__tagline { margin: 0; color: var(--muted); font-size: 0.85rem; }

h1 { font-size: 1.5rem; margin: 0 0 6px; }
.subtitle { margin: 0 0 24px; color: var(--muted); font-size: 0.92rem; }

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

.field { margin-bottom: 18px; }

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.field input,
.field select {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.field .hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }

.btn {
    display: inline-block;
    padding: 12px 18px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }

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

.btn--block { display: block; width: 100%; }

.form-footer { margin: 22px 0 0; text-align: center; font-size: 0.9rem; color: var(--muted); }
.form-footer a { color: var(--brand); font-weight: 600; text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 0.9rem;
}

.alert ul { margin: 0; padding-left: 18px; }

.alert--success { background: var(--success-soft); border-color: #bbf7d0; color: var(--success); }
.alert--error { background: var(--danger-soft); border-color: #fecaca; color: var(--danger); }

/* ---------- Dashboard ---------- */

.dashboard {
    width: 100%;
    max-width: 720px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.dashboard__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
}

.dashboard__body { padding: 32px 28px; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

@media (max-width: 480px) {
    .card, .dashboard__body { padding: 22px; }
}

/* ==========================================================================
   FAMILY SCHEDULER - dashboard app shell (DARK THEME)
   --------------------------------------------------------------------------
   Used by parent_dashboard.php (body.app).

   Everything here is scoped to `body.app` / `.app`, and the colour variables
   are re-declared on `.app` instead of `:root`. That way the light theme of
   login.php / signup.php / admin_dashboard.php is left completely untouched,
   while the dashboard gets its own dark palette (--surface, --primary, ...).
   ========================================================================== */

.app {
    /* ---------- Core palette ---------- */
    --app-bg: #0b1020;
    --surface: #141a2e;
    --surface-2: #1b2338;
    --surface-3: #232c45;
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-soft: rgba(99, 102, 241, 0.16);
    --text: #e8ecf6;
    --text-strong: #ffffff;
    --muted: #94a3b8;
    --text-muted: var(--muted);          /* alias used by the list-view column headers */
    --text-primary: var(--text);         /* alias used by the inline driver/status selects */
    --bg-surface: var(--surface-2);      /* alias used by the inline driver/status selects */
    --border: #26304a;
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.12);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
    --radius: 14px;

    /* ---------- Category accents (one per events.category ENUM value) ---------- */
    --school: #38bdf8;
    --gymnastics: #f472b6;
    --sports: #34d399;
    --salon: #fbbf24;
    --other: #a78bfa;

    /* Aliases so the shared .btn / .brand rules adopt the dark brand colour. */
    --brand: var(--primary);
    --brand-dark: var(--primary-dark);
    --brand-soft: var(--primary-soft);
}

body.app {
    display: block;
    place-items: initial;
    padding: 0;
    min-height: 100vh;
    background:
        radial-gradient(1100px 620px at 10% -12%, rgba(99, 102, 241, 0.30), transparent 62%),
        radial-gradient(900px 520px at 100% 0%, rgba(56, 189, 248, 0.14), transparent 58%),
        var(--app-bg);
    color: var(--text);
}

body.app.is-modal-open { overflow: hidden; }

/* ---------- Utility ---------- */

.hidden { display: none !important; }

.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;
}

/* ---------- Header ---------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 28px;
    background: rgba(20, 26, 46, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.brand--compact { margin-bottom: 0; }

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.app-header__user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.app-header__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ---------- Calendar / List switch ---------- */

.view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.view-toggle__btn {
    padding: 8px 16px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle__btn:hover { color: var(--text); }

.view-toggle__btn.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px -10px var(--primary);
}

/* ---------- Dark overrides for shared components ---------- */

.app .btn--sm { padding: 8px 14px; font-size: 0.85rem; }

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

.app .badge { background: var(--primary-soft); color: #c7d2fe; }

.app .alert--success { background: var(--success-soft); border-color: rgba(52, 211, 153, 0.4); color: var(--success); }
.app .alert--error   { background: var(--danger-soft);  border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }

/* ---------- Page body ---------- */

.app-main {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 26px 28px 110px;   /* bottom padding keeps content clear of the FAB */
}

.app-main__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.section-title { margin: 0; font-size: 1.15rem; }
.section-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }
/* ---------- Calendar grid (day columns; scrolls horizontally in month view) ---------- */

.calendar-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px;
    padding-bottom: 16px;          /* space for the horizontal scrollbar */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    /* Dark-theme friendly scrollbar (Firefox; WebKit rules below). */
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--surface-2);
}

/* Custom scrollbar for the horizontal scroll (the section #calendar-view
   itself never scrolls - .calendar-grid is the scrolling element). */
.calendar-grid::-webkit-scrollbar { height: 10px; }
.calendar-grid::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 8px; }
.calendar-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.calendar-grid::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.day-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 230px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    /* Fixed height so busy days scroll internally instead of stretching the
       grid; on short viewports the viewport-based cap takes over. */
    height: 400px;                 /* Or max-height: 65vh; */
    max-height: 65vh;

    /* Exactly 7 columns fit by default, but never smaller than 160px: the
       28-31 month columns overflow into the horizontal scroll above. */
    flex: 0 0 calc((100% / 7) - 12px) !important;
    min-width: 160px !important;
    scroll-snap-align: start;
}

.day-column.is-weekend { background: rgba(27, 35, 56, 0.65); }

.day-column.is-today {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 22px 45px -32px var(--primary);
}

.day-column__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

.day-column__name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.day-column__date { font-size: 1rem; font-weight: 700; color: var(--text); }

.day-column.is-today .day-column__date {
    padding: 0 8px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
}

.day-column__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;

    /* The scrollable event list: takes the space left below the day header
       and scrolls when the day holds more cards than fit. min-height: 0 is
       what allows the flex item to shrink below its content size - without
       it overflow-y would never engage. */
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;           /* prevents the scrollbar from overlapping text */
    overscroll-behavior-y: contain;

    /* Dark-theme vertical scrollbar (Firefox; WebKit rules below). */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Slim vertical scrollbar for the day's event list. */
.day-column__body::-webkit-scrollbar { width: 6px; }
.day-column__body::-webkit-scrollbar-track { background: transparent; }
.day-column__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.day-column__body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.day-column__empty {
    margin: auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
    opacity: 0.7;
}

/* ---------- Event card ---------- */

.event-card {
    --accent: var(--other);
    --accent-soft: rgba(167, 139, 250, 0.15);

    position: relative;          /* anchors .card-actions in the top right corner */
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.event-card:hover {
    transform: translateY(-2px);
    background: var(--surface-3);
    border-color: var(--accent);
}

.event-card--school     { --accent: var(--school);     --accent-soft: rgba(56, 189, 248, 0.15); }
.event-card--gymnastics { --accent: var(--gymnastics); --accent-soft: rgba(244, 114, 182, 0.15); }
.event-card--sports     { --accent: var(--sports);     --accent-soft: rgba(52, 211, 153, 0.15); }
.event-card--salon      { --accent: var(--salon);      --accent-soft: rgba(251, 191, 36, 0.15); }
.event-card--other      { --accent: var(--other);      --accent-soft: rgba(167, 139, 250, 0.15); }

.event-card__time {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
}

.event-card__title {
    margin: 2px 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.event-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Shared by the calendar cards and the list rows: both define --accent and
   --accent-soft (card / row modifier class). */
.category-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.event-card__person { font-size: 0.72rem; color: var(--muted); }

.event-card__duration { margin: 6px 0 0; font-size: 0.72rem; color: var(--muted); }

.event-card__notes {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    color: var(--muted);
}

/* ---------- List view: one row per event, as a horizontal grid ---------- */

.list-day { margin-bottom: 1.75rem; }

.list-day__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 2px 10px;
}

.list-day__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
}

.list-day__count { font-size: 0.78rem; color: var(--text-muted); }

/* The six-column horizontal grid: time | main | detail | notes | controls +
   actions | status. The 5th column holds .list-row-controls: the grouped
   driver/status dropdowns plus the pencil/trash icons. */
.list-event-row {
    --accent: var(--other);
    --accent-soft: rgba(167, 139, 250, 0.15);

    display: grid;
    /* max-content on the controls column so the two <select> boxes always keep
       their full width; the 1fr detail / notes columns absorb what is left. */
    grid-template-columns: 80px 250px 1fr 1fr max-content 80px;
    align-items: center;
    gap: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: background 0.12s ease;
}

.list-event-row:hover { background: var(--surface-3); }

/* Category accents: the left border + pill colours (blue school, yellow salon, ...). */
.list-event-row--school     { --accent: var(--school);     --accent-soft: rgba(56, 189, 248, 0.15); }
.list-event-row--gymnastics { --accent: var(--gymnastics); --accent-soft: rgba(244, 114, 182, 0.15); }
.list-event-row--sports     { --accent: var(--sports);     --accent-soft: rgba(52, 211, 153, 0.15); }
.list-event-row--salon      { --accent: var(--salon);      --accent-soft: rgba(251, 191, 36, 0.15); }
.list-event-row--other      { --accent: var(--other);      --accent-soft: rgba(167, 139, 250, 0.15); }

/* 1. Time */
.col-time {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}

/* 2. Main stack: title, category pill, person, duration */
.col-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.col-main__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.col-main__person,
.col-main__duration { font-size: 0.78rem; color: var(--text-muted); }

/* Small column headers inside .col-detail / .col-notes */
.col-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.col-value { display: block; font-size: 0.85rem; color: var(--text); }

/* 3. Detail: the same facts as plain text under small headers */
.col-detail { min-width: 0; }

.col-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

/* 4. Notes */
.col-notes { min-width: 0; }

.col-notes__text { font-size: 0.85rem; color: var(--text); overflow-wrap: anywhere; }
.col-notes__text--empty { color: var(--text-muted); opacity: 0.6; }

/* 5. Actions: white icons at rest; the shared .icon-btn--edit / --delete hover
   rules below turn them primary / red. */
.col-actions {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 6px;
}

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

/* 6. Status pill (Today / Tomorrow) */
.col-status { text-align: right; }

.status-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--primary-soft);
    color: #c7d2fe;
}

.status-pill--tomorrow { background: var(--surface-3); color: var(--text-muted); }

/* ---------- Inline dropdowns (list view): driver + pipeline status ---------- */

/* The two <select> boxes carry a solid #6366f1 face (== --primary) with white
   text. `color` is an inherited property, so the popup list would inherit the
   white text while the browser still paints the list's own background - on
   platforms that keep it white the options would be invisible. Give the
   <option>s the same pair explicitly. */
.inline-driver-select option,
.inline-status-select option {
    background-color: #6366f1;
    color: #ffffff;
}

/* Kept dimmed: the "-- Select Driver --" placeholder and the pipeline-locked
   earlier stages (both rendered with the `disabled` attribute). */
.inline-driver-select option:disabled,
.inline-status-select option:disabled {
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Card actions: pencil (edit) + trash (delete) ---------- */

/* FontAwesome icons, pinned to the top right corner of the event card. */
.card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Hidden by default, revealed on hover / keyboard focus. */
.event-card:hover .card-actions,
.event-card:focus-within .card-actions { opacity: 1; }

/* Touch screens have no hover state, so keep the icons visible there. */
@media (hover: none) {
    .card-actions { opacity: 1; }
}

.card-actions .fa {
    padding: 4px 5px;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}

.card-actions .fa:hover { transform: translateY(-1px); }

/* Pencil turns primary blue ... */
.card-actions .edit-btn:hover { color: var(--primary); }

/* ... and the trash turns red. */
.card-actions .delete-btn:hover { color: var(--danger); }

/* Locked edit icon: rendered instead of the pencil's edit-btn when the event
   starts in less than 10 minutes (or already started / passed). The cursor is
   also forced back from any inherited pointer style. */
.disabled-btn {
    cursor: not-allowed !important;
    transform: none !important;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--muted);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.icon-btn .icon {
    display: block;
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.icon-btn:hover { transform: translateY(-1px); }

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

.icon-btn:disabled {
    opacity: 0.55;
    cursor: progress;
    transform: none;
}

/* Pencil turns primary blue ... */
.icon-btn--edit:hover,
.icon-btn--edit:focus-visible {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary);
}

/* ... and the trash turns red. */
.icon-btn--delete:hover,
.icon-btn--delete:focus-visible {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: rgba(248, 113, 113, 0.5);
}

/* ---------- Empty state ---------- */

.empty-state {
    padding: 42px 24px;
    text-align: center;
    color: var(--muted);
    background: rgba(20, 26, 46, 0.55);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.empty-state__title { margin: 0 0 6px; color: var(--text); font-size: 1rem; font-weight: 700; }
.empty-state p { margin: 0; font-size: 0.88rem; }
.empty-state strong { color: var(--text); }

/* ---------- Floating action button ---------- */

.fab {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    color: #fff;
    font: inherit;
    font-size: 1.9rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 20px 38px -14px rgba(99, 102, 241, 0.85), 0 0 0 6px rgba(99, 102, 241, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fab:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 24px 44px -14px rgba(99, 102, 241, 0.95), 0 0 0 8px rgba(99, 102, 241, 0.16);
}

.fab:active { transform: translateY(0) scale(0.97); }
.fab:focus-visible { outline: 3px solid rgba(199, 210, 254, 0.9); outline-offset: 3px; }

/* ---------- Driver status badge ---------- */

/* Wrapper pairs the "Driver:" label with the status badge; it owns the
   spacing above, so the badge itself carries no margin. */
.driver-status-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.driver-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Shown on every event card and list row. Statuses are pipeline states
   (pending -> assigned -> pickup -> on-the-way -> delivered); unknown values
   simply get no state class and inherit the neutral base style. */
.driver-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Neutral default (unknown status). */
.driver-status-badge.status-pending,
.driver-status-badge:not([class*='status-']) {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Assigned state. */
.driver-status-badge.status-assign {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* Pickup and on-the-way states. */
.driver-status-badge.status-pickup,
.driver-status-badge.status-on-the-way {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Delivered state. */
.driver-status-badge.status-delivered {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

/* ---------- Modal (add event) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(4, 7, 18, 0.72);
    backdrop-filter: blur(6px);
}

.modal {
    width: 100%;
    max-width: 580px;
    margin: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
    animation: modal-in 0.18s ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 0;
}

.modal__title { margin: 0; font-size: 1.2rem; }
.modal__subtitle { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }

.modal__close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.modal__close:hover { color: var(--text); border-color: var(--primary); }

.modal__body { padding: 20px 24px 0; }

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.form-grid .field--full { grid-column: 1 / -1; }

/* Dark form controls: the shared `.field` rules are built for the light theme. */
.app .field input,
.app .field select,
.app .field textarea {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

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

.app .field input::placeholder,
.app .field textarea::placeholder { color: #5b6880; }

.app input[type="date"]::-webkit-calendar-picker-indicator,
.app input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6);
    cursor: pointer;
}

.field__optional { color: var(--muted); font-weight: 400; font-size: 0.8rem; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .app-header { padding: 14px 18px; }
    .app-main { padding: 20px 18px 120px; }
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .modal { border-radius: 16px; }
    .modal-overlay { padding: 14px; }
    .fab { right: 18px; bottom: 18px; }
}

/* The six-column list grid needs width; small screens fall back to a compact
   stack. The detail column repeats .col-main's info, so it is dropped there. */
@media (max-width: 720px) {
    .list-event-row { grid-template-columns: auto minmax(0, 1fr) auto; }

    .col-time    { grid-column: 1; grid-row: 1; }
    .col-main    { grid-column: 2; grid-row: 1; }
    .col-status  { grid-column: 3; grid-row: 1; }
    .col-notes   { grid-column: 1 / -1; grid-row: 2; }
    /* The dropdowns + action icons are ONE grid child now, so the placement
       that used to sit on .col-actions belongs to the wrapper. flex-wrap keeps
       a narrow phone from overflowing; the group is a flex item inside it. */
    .list-row-controls { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; }
    .col-detail  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modal { animation: none; }
    .event-card,
    .list-event-row,
    .card-actions,
    .fab { transition: none; }
    .calendar-grid { scroll-behavior: auto; }
}

/* ==========================================================================
   FAMILY SCHEDULER - event editing / deletion
   ========================================================================== */

/* ---------- Clickable events: a click opens the edit dialog ---------- */

.event-card,
.event-row { cursor: pointer; }

.event-card:focus-visible,
.event-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The list row is also an .event-row now, so keep its layout intact. */

/* ---------- Danger button (Delete inside the modal) ---------- */

.btn--danger {
    background: rgba(248, 113, 113, 0.14);
    color: var(--danger);
    border-color: rgba(248, 113, 113, 0.45);
}

.btn--danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* Delete sits on the left, Cancel/Save stay on the right. */
.modal__footer .btn--danger { margin-right: auto; }

/* ---------- Buttons while a request is in flight ---------- */

.btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* ---------- Message box filled in by app.js ---------- */

#event-form-errors ul {
    margin: 0;
    padding-left: 18px;
}