:root {
  --primary: #df0a16;
  --brand: #df0a16;
  --brand-dark: #b40711;
  --brand-soft: #fff1f2;
  --brand-line: #f3c7ca;
  --page: #f5f6f8;
  --surface: #ffffff;
  --surface-soft: #fafafa;
  --text: #17191d;
  --muted: #69707d;
  --line: #e4e6ea;
  --sidebar: 276px;
  --topbar: 72px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 32px rgba(26, 28, 33, .07);
  --shadow-hover: 0 16px 40px rgba(26, 28, 33, .11);
}

html, body { background: var(--page); }
body { color: var(--text); font-family: "Inter", sans-serif; font-size: 14px; }
h1, h2, h3, h4, .brand-name { font-family: "Space Grotesk", sans-serif; }
a { color: var(--brand); }

/* Global shell */
.main-sidebar {
  width: var(--sidebar);
  overflow: visible;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: none;
}
.brand-link {
  justify-content: center;
  height: 106px;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand-image { width: 218px; height: 76px; margin: 0; object-fit: contain; object-position: center; }
.sidebar-inner { height: calc(100vh - 106px); padding: 20px 14px 24px; }
.sidebar-nav { gap: 6px; }
.nav-link {
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 10px 14px;
  border-radius: 12px;
  color: #34383f;
  font-weight: 600;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-link:hover { color: var(--brand); background: #fff5f5; transform: translateX(2px); }
.nav-link.active, .nav-parent.section-active { color: #fff; background: linear-gradient(135deg, var(--brand), #f12a35); box-shadow: 0 8px 20px rgba(223, 10, 22, .22); }
.nav-icon { font-size: 16px; }
.nav-submenu { gap: 3px; padding: 6px 0 6px 42px; }
.nav-submenu a { padding: 8px 12px; border-radius: 9px; color: #626975; font-size: 13px; font-weight: 600; }
.nav-submenu a::before { color: #b8bdc5; }
.nav-submenu a:hover, .nav-submenu a.active { color: var(--brand); background: var(--brand-soft); }
.nav-submenu a.active::before { color: var(--brand); }
.main-header {
  min-height: var(--topbar);
  margin-left: var(--sidebar);
  padding: 10px 24px;
  color: var(--text);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(20, 22, 26, .04);
  backdrop-filter: blur(12px);
}
.main-header button, .front-link { color: #4f5662; border-radius: 9px; font-weight: 600; }
.main-header button:hover, .front-link:hover { color: var(--brand); background: var(--brand-soft); }
.nav-button { color: var(--brand) !important; font-size: 21px; }
.current-user { color: #353a42; font-weight: 700; }
.content-wrapper { margin-left: var(--sidebar); background: var(--page); }
.content-header {
  position: relative;
  isolation: isolate;
  min-height: 156px;
  align-items: center;
  margin: 0;
  padding: 30px clamp(24px, 4vw, 62px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(125deg, #d90814 0%, #ed1c27 72%, #f33b45 100%);
}
.content-header::before, .content-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .075);
}
.content-header::before { width: 760px; height: 260px; top: 54px; left: -110px; transform: rotate(-8deg); }
.content-header::after { width: 620px; height: 220px; right: -130px; bottom: 38px; transform: rotate(12deg); }
.content-header h1 { color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.035em; }
.season-range { margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 500; }
.breadcrumb { color: rgba(255, 255, 255, .72); }
.breadcrumb strong, .breadcrumb span { color: #fff; font-weight: 600; }
.content { width: 100%; max-width: none; margin: 0; padding: 26px clamp(16px, 1.8vw, 30px) 48px; }
.content > .card, .content > .toolbar, .content > .users-layout, .content > .payroll-layout { width: 100%; }
.main-footer { margin-left: var(--sidebar); padding: 22px 40px; color: #8b9099; background: #fff; border-top: 1px solid var(--line); }

/* Surfaces and controls */
.card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card-header, .group-filters-heading, .instructor-basket-header {
  padding: 18px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.card-header > *, .group-filters-heading > *, .instructor-basket-header > *,
.trip-overview > *, .group-filter-grid > *, .calendar-filters > *, .calendar-detail-filters > *,
.instructor-schedule-filters > *, .payroll-layout > *, .users-layout > * { min-width: 0; }
.card-header h2, .group-filters-heading h2 { color: var(--text); font-size: 18px; font-weight: 700; }
.card-header p, .group-filters-heading p { color: var(--muted); }
.form-control, textarea, .trip-picker-trigger {
  min-height: 44px;
  padding: 9px 13px;
  color: var(--text);
  background: #fff;
  border: 1px solid #d9dce2;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-control:hover, textarea:hover, .trip-picker-trigger:hover { border-color: #b6bbc4; background: #fff; }
.form-control:focus, textarea:focus, .trip-picker-trigger[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(223, 10, 22, .11); }
.form-control-sm { min-height: 34px; height: 34px; padding: 5px 9px; border-radius: 8px; }
.btn {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: none;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(223, 10, 22, .22); outline-offset: 2px; }
.btn-primary, .btn-info { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 7px 16px rgba(223, 10, 22, .18); }
.btn-primary:hover, .btn-info:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-default { color: #3f454e; background: #fff; border-color: #dcdfe4; }
.btn-default:hover { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.btn-success { background: #198754; border-color: #198754; }
.btn-warning { color: #6b4b00; background: #fff3c4; border-color: #efd98d; }
.btn-danger { background: #be2330; border-color: #be2330; }
.btn-sm { min-height: 34px; padding: 6px 11px; border-radius: 8px; font-size: 12px; }
input[type="checkbox"] { accent-color: var(--brand); }

/* Trips and groups */
.trip-card { margin-bottom: 22px; }
.trip-card-body { gap: 18px; padding: 22px; }
.trip-picker-panel { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(20, 23, 28, .2); }
.trip-picker-week { color: #7b1119; background: #fff4f4; border-color: #f3d3d5; }
.trip-picker-option { border-radius: 9px; }
.trip-picker-option:hover, .trip-picker-option:focus-visible { border-color: var(--brand-line); background: #fff7f7; }
.trip-picker-option[aria-selected="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.trip-picker-all { border-left-color: var(--brand); }
.trip-stat { min-height: 76px; padding: 12px 15px; background: #fafafa; border: 1px solid var(--line); border-left: 0; border-radius: 12px; }
.trip-stat::before { content: ""; width: 34px; height: 4px; margin-bottom: 9px; border-radius: 99px; background: var(--brand); }
.trip-stat.yellow::before { background: #d99b00; }.trip-stat.green::before { background: #198754; }
.trip-stat strong { color: var(--text); font-family: "Space Grotesk", sans-serif; font-size: 25px; }
.toolbar { margin-bottom: 18px; padding: 4px 2px; }
.save-status { border-radius: 999px; }
.group-filters { margin-bottom: 22px; }
.group-filter-grid { padding: 18px 20px 20px; }
.instructor-baskets-grid { gap: 20px; }
.instructor-basket { border-radius: 14px; }
.basket-hours, .group-summary-chip, .participant-count { border-radius: 999px; }
.group-type-0 { background: #eef5ff; }.group-type-1 { background: #f0f8ef; }.group-type-2 { background: #f6f1fb; }.group-type-3 { background: #fff7e7; }
.instructor-slot { border-color: rgba(30, 34, 40, .09); }
.unassigned-section { margin-top: 22px; border-style: dashed; border-color: #d5d8de; box-shadow: none; }

/* Calendars and schedules */
.calendar-card, .calendar-detail-card, .instructor-schedule-card { border-top: 0; }
.calendar-card-header, .calendar-detail-header, .instructor-schedule-header { background: #fff; }
.calendar-roster { background: linear-gradient(180deg, #fffafa, #fff); border-color: var(--brand-line); }
.calendar-roster-row { border-color: var(--line); border-radius: 10px; }
.calendar-roster-row:hover { border-color: var(--brand-line); box-shadow: 0 5px 15px rgba(32, 36, 42, .05); }
.calendar-filters, .calendar-detail-filters, .instructor-schedule-filters, .calendar-detail-trip-picker { background: #fafafa; border-color: var(--line); }
.calendar-legend span, .calendar-visible-count, .instructor-schedule-stats span { border-radius: 999px; }
.calendar-week-nav { background: #fff; border-color: var(--line); }
.calendar-week-chip { border-radius: 999px; color: #535a65; background: #f1f2f4; border: 1px solid transparent; }
.calendar-week-chip:hover { color: var(--brand); background: var(--brand-soft); }
.calendar-week-chip.active { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 6px 15px rgba(223, 10, 22, .2); }
.calendar-week-arrow { color: var(--brand); background: #fff; border-color: var(--brand-line); border-radius: 50%; }
.calendar-week-arrow:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.badge-primary, .instructor-schedule-person b, .calendar-instructor-sport, .calendar-detail-sport { color: #fff; background: var(--brand); }
.calendar-table, .instructor-schedule-table, .calendar-detail-table { border-collapse: separate; border-spacing: 0; }
.calendar-table thead th, .instructor-schedule-table thead th, .calendar-detail-table thead th { color: #3b414a; background: #f7f7f8; border-color: var(--line); }
.calendar-table td, .calendar-table th, .instructor-schedule-table td, .instructor-schedule-table th, .calendar-detail-table td, .calendar-detail-table th { border-color: var(--line); }
.calendar-cell { transition: box-shadow .16s, transform .16s; }
.calendar-cell:hover { z-index: 2; box-shadow: inset 0 0 0 2px rgba(223, 10, 22, .25); }
.calendar-card.calendar-editing .calendar-cell { height: 210px; padding: 8px; border-top: 4px solid transparent; }
.calendar-card.calendar-editing .calendar-table th:not(:first-child),
.calendar-card.calendar-editing .calendar-table td:not(:first-child) { min-width: 190px; width: 190px; }
.calendar-card.calendar-editing .calendar-cell.status-P { background: #eef9f1; border-top-color: #28a745; }
.calendar-card.calendar-editing .calendar-cell.status-N { background: #fff0f1; border-top-color: #dc3545; }
.calendar-card.calendar-editing .calendar-cell.status-Q { background: #fff9e7; border-top-color: #e2a600; }
.calendar-card.calendar-editing .calendar-cell.status-U { background: #f1f2f4; border-top-color: #8a949e; }
.calendar-card.calendar-editing .calendar-cell.status-I { background: #eaf8fa; border-top-color: #17a2b8; }
.calendar-card.calendar-editing .calendar-cell-editor { padding: 2px; }
.calendar-status-label { display: block; margin-bottom: 5px; color: #5d6470; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.calendar-status { min-height: 38px; padding: 7px 9px; border-width: 1px; border-radius: 9px; font-weight: 700; }
.calendar-status.status-P { color: #176b35; background: #dff4e4; border-color: #a9d9b5; }
.calendar-status.status-N { color: #8b2632; background: #f9e1e4; border-color: #e9b7bd; }
.calendar-status.status-Q { color: #765800; background: #fff3cd; border-color: #ecd778; }
.calendar-status.status-U { color: #535b63; background: #e9ecef; border-color: #cbd0d5; }
.calendar-status.status-I { color: #12606c; background: #d9f1f5; border-color: #a9d9e0; }
.calendar-status option { background: #fff; color: #20242a; }
.calendar-field { margin-top: 8px; }
.calendar-field input { min-height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .9); }
.calendar-save { margin-top: 9px; }
.calendar-detail-period, .instructor-schedule-period { margin: 0 0 2px; padding: 13px 16px; color: var(--text); background: linear-gradient(135deg, #fff, #fff8f8); border: 1px solid var(--brand-line); border-left: 5px solid var(--brand); border-radius: 12px; box-shadow: 0 6px 18px rgba(32, 36, 42, .06); }
.calendar-detail-period strong, .instructor-schedule-period strong { color: var(--brand-dark); }
.calendar-detail-period-summary > span { color: #4f555e; background: #fff; border-color: #eadfe0; }
.calendar-detail-period-summary .calendar-detail-period-destination { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }
.calendar-detail-table thead .calendar-detail-instructor { color: #fff; background: linear-gradient(135deg, var(--brand), #f02a35); }
.calendar-detail-table thead .calendar-detail-order { color: #454b54; background: #fff7f7; }
.calendar-detail-group { border-radius: 9px; }
.calendar-detail-assign-toggle { color: var(--brand); background: #fff; border-color: #efc9cc; }
.calendar-detail-assign-toggle:hover, .calendar-detail-group-card.is-assigning .calendar-detail-assign-toggle { color: #fff; background: var(--brand); border-color: var(--brand); }

/* Payroll */
.payroll-trip-card { border-top: 0; }
.payroll-summary { gap: 16px; }
.payroll-kpi { min-height: 112px; padding: 19px; border: 1px solid var(--line); border-top: 0; border-radius: 14px; box-shadow: var(--shadow); }
.payroll-kpi::before { content: ""; width: 38px; height: 5px; border-radius: 99px; background: var(--brand); }
.payroll-kpi.green::before { background: #198754; }.payroll-kpi.amber::before { background: #d99b00; }.payroll-kpi.red::before { background: #be2330; }
.payroll-kpi strong { font-family: "Space Grotesk", sans-serif; font-size: 26px; }
.payroll-person { border-radius: 11px; }
.payroll-person:hover { border-color: var(--brand-line); background: #fff7f7; }
.payroll-person.active { color: #fff; background: linear-gradient(135deg, var(--brand), #ef3540); border-color: var(--brand); box-shadow: 0 8px 20px rgba(223, 10, 22, .2); }
.payroll-person-avatar { color: var(--brand); background: var(--brand-soft); }
.payroll-person.active .payroll-person-avatar { color: var(--brand-dark); background: #fff; }
.payroll-detail-card { border-top: 0; }
.payroll-detail-head { background: #fafafa; border-color: var(--line); }
.payroll-availability { background: #fff6f6; border-color: #f4d7d9; }
.payroll-availability span { color: #6f2930; border-color: #f1d5d7; border-radius: 999px; }
.payroll-breakdown-item { background: #fafafa; border-color: var(--line); border-radius: 12px; }
.payroll-total { background: linear-gradient(135deg, #17191d, #353941); border-radius: 12px; box-shadow: 0 8px 22px rgba(20, 22, 26, .17); }
.payroll-adjustment, .payroll-adjustment-empty { border-radius: 10px; }
.payroll-admin-controls { background: #fafafa; border-color: var(--line); }

/* Users and integrations */
.users-layout { gap: 18px; }
.users-layout .card-header p { color: var(--muted); }
.instructor-account-row { background: #fafafa; border-color: var(--line); border-radius: 11px; }
.instructor-account-row:hover { background: #fff; border-color: #cfd2d8; box-shadow: 0 6px 18px rgba(26, 28, 33, .06); }
.instructor-account-status { color: #198754; }
.user-row { border-color: var(--line); }
.user-row:hover { background: #fafafa; }
.user-role { color: #7b151c; background: var(--brand-soft); }
.user-email-copy-icon { color: var(--brand); }
.user-email-copy:hover > span:first-child, .user-email-copy:focus-visible > span:first-child { color: var(--brand); }
.auth-token { border-color: #edcf83; border-radius: 12px; background: #fff9e7; }

/* Dialogs, login and feedback */
.auth-screen { background: radial-gradient(circle at 12% 10%, #fff 0, #fff 18%, transparent 45%), linear-gradient(145deg, #f5f6f8, #eceef1); }
.auth-screen::before { content: ""; position: fixed; inset: 0 0 auto; height: 11px; background: var(--brand); }
.auth-card { width: min(470px, 100%); padding: 40px; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 28px 80px rgba(20, 23, 28, .14); }
.auth-logo { width: 290px; max-height: 118px; margin-bottom: 26px; }
.auth-card h1 { color: var(--text); font-size: 30px; }
.auth-card > p { color: var(--muted); }
.modal-backdrop { background: rgba(16, 18, 22, .62); backdrop-filter: blur(5px); }
.modal { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 80px rgba(15, 17, 21, .28); }
.modal > header { background: #fff; border-color: var(--line); }
.temporary-password-result { border-color: var(--brand-line); background: var(--brand-soft); }
.temporary-password-result code { border-color: var(--brand-line); color: var(--brand-dark); }
.toast { border-radius: 12px; background: #202329; box-shadow: 0 14px 40px rgba(20, 22, 26, .22); }
.loading-state { color: var(--muted); }

/* Spacing and collision safeguards */
.calendar-card-header, .calendar-detail-header, .instructor-schedule-header,
.unassigned-header, .payroll-detail-head { flex-wrap: wrap; }
.trip-actions, .toolbar-actions, .calendar-actions, .user-actions, .instructor-account-actions,
.unassigned-header-actions, .instructor-schedule-stats { column-gap: 10px; row-gap: 10px; }
.calendar-card-header, .calendar-detail-header, .instructor-schedule-header,
.group-filters-heading, .unassigned-header, .payroll-detail-head { column-gap: 18px; row-gap: 14px; }
.calendar-actions { flex: 0 0 auto; padding-left: 4px; }
.calendar-actions .btn { margin: 0; white-space: nowrap; }
.group-filter-grid label, .calendar-filters label, .calendar-detail-filters label,
.instructor-schedule-filters label, .payroll-trip-controls label, .user-form label { line-height: 1.35; }
.calendar-detail-table, .instructor-schedule-table, .calendar-table { margin: 0; }
.table-responsive, .calendar-table-wrap, .calendar-detail-wrap, .instructor-schedule-wrap { scrollbar-gutter: stable; }
.payroll-breakdown, .payroll-adjustment-form, .payroll-admin-controls { gap: 14px; }
.users-layout .card, .payroll-layout .card { align-self: start; }

/* Refined spacing and alignment for the most frequently used controls. */
.trip-card-body { gap: 22px; padding: 24px; }
.trip-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  width: 100%;
}
.trip-actions .btn { min-height: 46px; padding-inline: 18px; font-size: 14px; white-space: nowrap; }
.trip-actions .btn > span { display: inline-grid; place-items: center; width: 18px; font-size: 16px; line-height: 1; }
.toolbar {
  min-height: 72px;
  margin-bottom: 22px;
  padding: 14px 16px 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 28, 33, .055);
}
.toolbar p { max-width: 720px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.toolbar-actions { flex: 0 0 auto; gap: 10px; }
.toolbar-actions .btn { min-height: 44px; padding-inline: 17px; white-space: nowrap; }
.save-status { min-height: 36px; padding-inline: 12px; }

.instructor-slot { background-clip: padding-box; }
.instructor-slot-main {
  grid-template-columns: minmax(250px, 1fr) 340px 400px;
  gap: 20px;
  min-height: 92px;
  padding: 16px 18px;
}
.instructor-slot-meta { grid-template-columns: 74px 64px 72px 109px; gap: 7px; width: 340px; }
.instructor-slot-meta > .badge-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11px;
}
.group-metric {
  min-height: 46px;
  align-content: center;
  padding: 7px 9px;
  border-radius: 9px;
  line-height: 1.1;
}
.group-metric strong { font-size: 13px; line-height: 1.1; }
.group-metric small { margin-top: 4px; font-size: 8px; font-weight: 700; letter-spacing: .035em; line-height: 1.1; }
.group-status-row { min-height: 27px; margin-top: 1px; }
.group-status-row .occupancy-status { min-height: 26px; padding: 5px 10px; }
.group-status-row .badge-warning { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px; }
.group-actions { grid-template-columns: 1fr .78fr 1.24fr 1fr; gap: 8px; width: 400px; }
.group-actions .btn {
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.group-actions .btn-default { background: rgba(255, 255, 255, .88); border-color: rgba(80, 91, 104, .22); }
.group-actions .btn-default:hover { background: #fff; border-color: var(--brand-line); box-shadow: 0 5px 14px rgba(26, 28, 33, .07); }

.calendar-legend { gap: 9px; padding: 13px 18px; }
.calendar-legend span { min-height: 26px; display: inline-flex; align-items: center; padding: 5px 10px; font-size: 10px; }
.calendar-week-nav { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; padding: 14px 18px; }
.calendar-week-rail { gap: 8px; padding: 1px 0 6px; }
.calendar-week-arrow { width: 44px; min-height: 44px; align-self: center; font-size: 20px; }
.calendar-week-chip {
  flex-basis: 124px;
  min-height: 48px;
  align-content: center;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 12px;
}
.calendar-week-chip strong { font-size: 11px; line-height: 1.2; }
.calendar-week-chip span { font-size: 9px; line-height: 1.2; }
.calendar-table thead th { height: 96px; padding: 8px; }
.instructor-schedule-table thead th, .calendar-detail-table thead th { height: 64px; padding: 10px; }
.calendar-table th:first-child, .calendar-table td:first-child { min-width: 228px; width: 228px; max-width: 228px; }

@media (max-width: 1450px) {
  .instructor-slot-main { grid-template-columns: minmax(230px, 1fr) 340px; }
  .group-actions { grid-column: 1 / -1; justify-self: end; }
  .calendar-detail-filters { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .calendar-detail-check { min-height: 44px; }
  .calendar-filters { grid-template-columns: minmax(220px, 1fr) 200px auto; }
  .calendar-visible-count { grid-column: 1 / -1; padding-top: 0; }
  .instructor-schedule-filters { grid-template-columns: minmax(220px, 1fr) 180px minmax(210px, auto) auto; }
}

@media (max-width: 1180px) {
  .trip-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; justify-content: flex-start; }
  .calendar-detail-filters, .calendar-filters, .instructor-schedule-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-detail-filters .btn, .calendar-filters .btn, .instructor-schedule-filters .btn { width: 100%; }
  .payroll-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-adjustment-form, .payroll-admin-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-adjustment-form > :nth-child(3), .payroll-admin-controls > :nth-child(2) { grid-column: 1 / -1; }
}

/* Collapsed and responsive shell */
body.sidebar-collapsed { --sidebar: 82px; }
body.sidebar-collapsed .brand-link { padding: 12px 8px; }
body.sidebar-collapsed .brand-image { width: 58px; height: 58px; object-fit: cover; object-position: left center; }
body.sidebar-collapsed .sidebar-inner { padding-inline: 10px; }
body.sidebar-collapsed .nav-link { border-radius: 12px; }
body.sidebar-collapsed .nav-icon { font-size: 18px; }

@media (max-width: 1100px) {
  :root { --sidebar: 238px; }
  .brand-image { width: 190px; }
  .content-header { min-height: 140px; }
  .trip-overview { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --topbar: 64px; }
  .main-sidebar { width: min(310px, 88vw); transform: translateX(-105%); box-shadow: 18px 0 48px rgba(20, 22, 26, .18); }
  body.mobile-sidebar-open .main-sidebar { transform: translateX(0); }
  .sidebar-backdrop { background: rgba(16, 18, 22, .56); backdrop-filter: blur(2px); }
  .main-header, .content-wrapper, .main-footer { margin-left: 0; }
  .main-header { padding: 8px 12px; }
  .front-link { display: none; }
  .content-header { min-height: 128px; padding: 24px 18px; }
  .content-header h1 { font-size: 28px; }
  .breadcrumb { display: none; }
  .content { padding: 18px 12px 34px; }
  .card { border-radius: 13px; }
  .card-header { padding: 16px; }
  .trip-card-body, .user-form { padding: 16px; }
  .trip-actions { grid-template-columns: 1fr; }
  .toolbar { min-height: 0; padding: 16px; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr; }
  .calendar-week-nav { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; padding: 11px 12px; }
  .calendar-week-arrow { width: 38px; min-height: 38px; }
  .calendar-week-chip { flex-basis: 112px; min-height: 44px; }
  .btn { width: 100%; }
  .calendar-actions, .header-actions, .user-actions, .instructor-account-actions { width: 100%; align-items: stretch; }
  .calendar-actions { padding-left: 0; }
  .toolbar, .toolbar-actions, .trip-actions { align-items: stretch; flex-direction: column; }
  .payroll-kpi { min-height: 98px; }
  .calendar-detail-filters, .calendar-filters, .instructor-schedule-filters,
  .payroll-breakdown, .payroll-adjustment-form, .payroll-admin-controls { grid-template-columns: 1fr; }
  .payroll-adjustment-form > :nth-child(3), .payroll-admin-controls > :nth-child(2) { grid-column: auto; }
  .calendar-card.calendar-editing .calendar-cell { min-width: 178px; }
  .auth-card { padding: 28px 22px; }
  .auth-logo { width: 250px; }
}

/* Mobile usability layer: every application view must fit and remain operable. */
@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { font-size: 13px; }
  .content-wrapper, .content, .content > *, .card, .card-header > *,
  .instructor-dashboard, .users-layout, .statistics-layout, .individual-training-layout,
  .payroll-layout, .documents-page { min-width: 0; max-width: 100%; }

  .main-header { min-height: var(--topbar); gap: 4px; padding: 8px 10px; }
  .main-header > button, .main-header .header-actions > button { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .header-actions { width: auto; min-width: 0; margin-left: auto; gap: 2px; }
  .content-header { min-height: 112px; padding: 20px 16px; }
  .content-header h1 { max-width: 100%; font-size: clamp(25px, 7.2vw, 31px); line-height: 1.12; overflow-wrap: anywhere; }
  .season-range { font-size: 12px; line-height: 1.45; }
  .content { padding: 14px 10px 30px; }
  .content > .card + .card { margin-top: 14px; }
  .card-header, .group-filters-heading, .instructor-basket-header { padding: 15px 14px; }
  .card-header h2, .group-filters-heading h2 { font-size: 18px; line-height: 1.25; }
  .card-header p, .group-filters-heading p { font-size: 12px; line-height: 1.5; }
  .form-control, textarea, .trip-picker-trigger { width: 100%; max-width: 100%; font-size: 16px; }
  label, form, fieldset { min-width: 0; }

  .trip-card-body { padding: 14px; }
  .trip-picker-panel { left: 12px !important; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 6px; }
  .trip-picker-columns { display: none; }
  .trip-picker-option:not(.trip-picker-instructor-option) { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; gap: 5px; padding: 9px; }
  .trip-picker-option:not(.trip-picker-instructor-option) .trip-picker-name { grid-column: 1 / -1; white-space: normal; }
  .trip-picker-stat { min-width: 0; padding: 5px 2px; font-size: 10px; }
  .trip-picker-week { position: sticky; top: -6px; z-index: 2; }
  .trip-summary { gap: 7px; }
  .trip-stat { min-height: 66px; }

  .toolbar, .group-filter-grid, .calendar-filters, .calendar-detail-filters,
  .instructor-schedule-filters, .weekly-timetable-controls, .statistics-filter-grid { padding: 14px; }
  .toolbar-actions, .calendar-actions, .statistics-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .calendar-card-header, .calendar-detail-header, .instructor-schedule-header,
  .weekly-timetable-header, .statistics-heading, .statistics-filter-head { align-items: stretch; flex-direction: column; }
  .calendar-legend, .instructor-schedule-stats, .weekly-timetable-legend { gap: 7px; padding-right: 14px; padding-left: 14px; }

  .calendar-week-nav { position: relative; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; padding: 10px; }
  .calendar-week-arrow { width: 42px; min-height: 44px; }
  .calendar-week-rail { scroll-snap-type: x proximity; }
  .calendar-week-chip { flex: 0 0 126px; scroll-snap-align: center; }

  .calendar-table-wrap, .instructor-schedule-wrap, .individual-hour-table-wrap,
  .table-responsive, .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .calendar-table-wrap, .instructor-schedule-wrap { max-height: none; min-height: 320px; }
  .calendar-table th:first-child, .calendar-table td:first-child,
  .instructor-schedule-table th:first-child, .instructor-schedule-table td:first-child {
    min-width: 138px; width: 138px; max-width: 138px; padding: 7px; white-space: normal;
  }
  .calendar-table th:not(:first-child), .calendar-table td:not(:first-child) { min-width: 168px; width: 168px; }
  .instructor-schedule-table th:not(:first-child), .instructor-schedule-table td:not(:first-child) { min-width: 188px; width: 188px; }
  .calendar-card.calendar-editing .calendar-table th:not(:first-child),
  .calendar-card.calendar-editing .calendar-table td:not(:first-child) { min-width: 176px; width: 176px; }

  /* The detailed schedule becomes a list of instructor cards on phones. */
  .calendar-detail-wrap { max-height: none; min-height: 260px; overflow: visible; padding: 10px; background: #f1f3f6; }
  .calendar-detail-table, .calendar-detail-table tbody { display: block; width: 100%; min-width: 0; }
  .calendar-detail-table thead { display: none; }
  .calendar-detail-table tbody > tr:not(.calendar-detail-days-row) {
    display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin-bottom: 10px;
    overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 5px 16px rgba(25, 30, 38, .07);
  }
  .calendar-detail-table .calendar-detail-instructor {
    position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-width: 0; width: 100%; max-width: none; min-height: 48px; padding: 10px 12px;
    border: 0; border-bottom: 1px solid var(--line); box-shadow: none; text-align: left;
  }
  .calendar-detail-table .calendar-detail-order { display: none; }
  .calendar-detail-table .calendar-detail-timeline-cell {
    display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; padding: 0 !important;
    overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
  }
  .calendar-detail-timeline-grid { width: 760px; min-width: 760px; min-height: 76px; }
  .calendar-detail-group-card { grid-template-columns: minmax(0, 1fr) 96px; }
  body.role-instructor .calendar-detail-group-card { grid-template-columns: minmax(0, 1fr); }
  .calendar-detail-days-row, .calendar-detail-days-row > td { display: block; width: 100%; min-width: 0; }
  .calendar-detail-days-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .calendar-detail-days-title { grid-column: 1 / -1; }
  .calendar-detail-no-results { display: block; width: 100%; padding: 28px 14px !important; }

  .weekly-timetable-wrap { max-height: none; overflow-x: hidden; }
  .weekly-timetable-head, .weekly-timetable-body { grid-template-columns: 54px minmax(0, 1fr); }
  .weekly-timetable-times span { right: 6px; font-size: 9px; }
  .weekly-timetable-event { padding: 5px; }
  .weekly-timetable-legend span { flex: 1 1 145px; }

  .instructor-dashboard { gap: 14px; }
  .instructor-hero { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .instructor-avatar { width: 56px; height: 56px; border-radius: 16px; }
  .instructor-hero h2 { font-size: 21px; overflow-wrap: anywhere; }
  .instructor-hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instructor-hero-stat { min-width: 0; padding: 10px 8px; }
  .instructor-season-summary, .instructor-season-weeks, .instructor-week-content,
  .instructor-profile-form, .instructor-contract-form, .instructor-documents-list,
  .admin-instructor-documents { padding-right: 12px; padding-left: 12px; }
  .instructor-participant { grid-template-columns: minmax(0, 1fr); }
  .instructor-upload-row, .instructor-profile-card .instructor-upload-row { padding-right: 12px; padding-left: 12px; }
  .instructor-document-row { grid-template-columns: auto minmax(0, 1fr); }
  .instructor-document-row .btn { grid-column: 1 / -1; }
  .admin-instructor-document-group > header { align-items: flex-start; flex-direction: column; }

  .payroll-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.role-instructor .payroll-summary, body.role-instructor .payroll-breakdown { grid-template-columns: minmax(0, 1fr); }
  .payroll-detail-head, .payroll-breakdown, .payroll-section, .payroll-admin-controls { padding-right: 14px; padding-left: 14px; }
  .payroll-total { align-items: flex-start; flex-direction: column; margin-right: 14px; margin-left: 14px; }
  .payroll-adjustment { grid-template-columns: minmax(0, 1fr) auto; }
  .payroll-adjustment-type { grid-column: 1 / -1; justify-self: start; }

  .statistics-kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .statistics-filter-grid { padding-right: 14px; padding-left: 14px; }
  .statistics-tabs { scroll-snap-type: x proximity; }
  .statistics-tabs button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
  .statistics-alert { grid-template-columns: 28px minmax(0, 1fr); }
  .statistics-alert > :last-child { grid-column: 1 / -1; }

  .users-layout { gap: 14px; }
  .instructor-accounts-list { padding: 10px; }
  .instructor-account-row, .user-row { padding: 12px; }
  .api-token-row { grid-template-columns: minmax(0, 1fr); }
  .updates-card-header { padding: 16px 14px; }

  .modal-backdrop { align-items: end; padding: 10px; }
  .modal { width: 100%; max-height: calc(100dvh - 20px); border-radius: 14px; }
  .modal > header, .modal > footer { padding: 12px 14px; }
  .modal > footer, .modal-body > footer { align-items: stretch; flex-direction: column-reverse; }
  .modal-body { padding: 14px; }
  .weekly-event-modal .modal-body { padding-right: 14px; padding-left: 14px; }
  .weekly-event-modal .weekly-event-detail-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .weekly-event-participant-list { grid-template-columns: minmax(0, 1fr); }
  .weekly-event-participant { padding: 0; overflow: hidden; }
  .weekly-event-participant-toggle { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; margin: 0; padding: 13px 14px; pointer-events: auto; cursor: pointer; }
  .weekly-event-participant-number, .weekly-event-participant-name small { display: none; }
  .weekly-event-participant-name strong { font-size: 14px; }
  .weekly-event-participant-more { display: inline-flex; }
  .weekly-event-participant.is-expanded .weekly-event-participant-more i { transform: rotate(180deg); }
  .weekly-event-participant-details { display: none; padding: 0 11px 11px; border-top: 1px solid var(--line); }
  .weekly-event-participant.is-expanded .weekly-event-participant-details { display: block; }
  .weekly-event-participant dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-event-participant .weekly-event-participant-wide { grid-column: 1 / -1; }
  .weekly-event-note-editor, .weekly-event-move-editor { grid-template-columns: minmax(0, 1fr); }
  .toast { right: 10px; bottom: 10px; left: 10px; max-width: none; }
}

@media (max-width: 420px) {
  .content { padding-right: 8px; padding-left: 8px; }
  .content-header { min-height: 104px; padding-right: 14px; padding-left: 14px; }
  .main-header > button, .main-header .header-actions > button { flex-basis: 42px; width: 42px; min-width: 42px; height: 42px; }
  .calendar-week-nav { grid-template-columns: 40px minmax(0, 1fr) 40px; padding-right: 8px; padding-left: 8px; }
  .calendar-week-chip { flex-basis: 116px; }
  .calendar-table th:first-child, .calendar-table td:first-child,
  .instructor-schedule-table th:first-child, .instructor-schedule-table td:first-child { min-width: 124px; width: 124px; max-width: 124px; }
  .calendar-detail-days-panel { grid-template-columns: minmax(0, 1fr); }
  .calendar-detail-days-title { grid-column: auto; }
  .weekly-timetable-head, .weekly-timetable-body { grid-template-columns: 48px minmax(0, 1fr); }
  .instructor-hero-stats { grid-template-columns: minmax(0, 1fr); }
  .help-toc nav, .help-status-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Premium finish and theme controls */
html { color-scheme: light; scroll-behavior: smooth; }
body, .main-sidebar, .main-header, .content-wrapper, .main-footer, .card, .card-header,
.form-control, textarea, .trip-picker-trigger, .modal, table {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(223, 10, 22, .25); outline-offset: 2px; }
::selection { color: #fff; background: rgba(223, 10, 22, .82); }
.theme-toggle { position: relative; font-size: 17px; }
.theme-toggle span { display: inline-grid; place-items: center; width: 20px; height: 20px; line-height: 1; transition: transform .25s ease; }
.theme-toggle:hover span { transform: rotate(12deg); }
.card { box-shadow: 0 12px 34px rgba(26, 28, 33, .075); }
.card:hover { border-color: #daddE3; }
.occupancy-status { line-height: 1.2; }
.group-status-row .occupancy-status { min-height: 22px; padding: 4px 9px; border-radius: 999px; }

/* Dark mode keeps the Rossignol red identity and increases contrast. */
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d1015;
  --surface: #151920;
  --surface-soft: #1a1f27;
  --text: #f2f4f7;
  --muted: #9ba4b1;
  --line: #2a303a;
  --brand-soft: rgba(223, 10, 22, .13);
  --brand-line: rgba(242, 78, 88, .34);
  --shadow: 0 14px 38px rgba(0, 0, 0, .24);
  --shadow-hover: 0 18px 46px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper { color: var(--text); background: var(--page); }
html[data-theme="dark"] .main-sidebar { background: #11151b; border-color: var(--line); }
html[data-theme="dark"] .brand-link { background: #fff; border-color: #e5e7eb; }
html[data-theme="dark"] .nav-link { color: #c4cad3; }
html[data-theme="dark"] .nav-link:hover { color: #fff; background: rgba(223, 10, 22, .13); }
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .nav-parent.section-active { color: #fff; background: linear-gradient(135deg, #c80612, #ed2631); }
html[data-theme="dark"] .nav-submenu a { color: #929ba8; }
html[data-theme="dark"] .nav-submenu a:hover,
html[data-theme="dark"] .nav-submenu a.active { color: #fff; background: rgba(223, 10, 22, .13); }
html[data-theme="dark"] .main-header { color: var(--text); background: rgba(17, 21, 27, .94); border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
html[data-theme="dark"] .main-header button,
html[data-theme="dark"] .front-link,
html[data-theme="dark"] .current-user { color: #c7cdd6; }
html[data-theme="dark"] .main-header button:hover,
html[data-theme="dark"] .front-link:hover { color: #fff; background: rgba(223, 10, 22, .15); }
html[data-theme="dark"] .content-header { background: linear-gradient(125deg, #a8050e 0%, #d20c18 62%, #ef303b 100%); }
html[data-theme="dark"] .main-footer { color: #7f8996; background: #11151b; border-color: var(--line); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .group-filters-heading,
html[data-theme="dark"] .instructor-basket-header,
html[data-theme="dark"] .unassigned-header,
html[data-theme="dark"] .calendar-card-header,
html[data-theme="dark"] .calendar-detail-header,
html[data-theme="dark"] .instructor-schedule-header,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal > header { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .group-filters-heading h2,
html[data-theme="dark"] .unassigned-header h2,
html[data-theme="dark"] .modal h2,
html[data-theme="dark"] .instructor-trip-heading h3,
html[data-theme="dark"] .instructor-group-head h4 { color: var(--text); }
html[data-theme="dark"] .card-header p,
html[data-theme="dark"] .group-filters-heading p,
html[data-theme="dark"] .unassigned-header p { color: var(--muted); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .trip-picker-trigger { color: var(--text); background: #10141a; border-color: #353c48; }
html[data-theme="dark"] .form-control:hover,
html[data-theme="dark"] textarea:hover,
html[data-theme="dark"] .trip-picker-trigger:hover { background: #12171e; border-color: #596271; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] textarea:focus { background: #10141a; border-color: #ef3b46; box-shadow: 0 0 0 4px rgba(223, 10, 22, .18); }
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup { color: var(--text); background: #171c24; }
html[data-theme="dark"] .btn-default { color: #d5dae2; background: #1b2028; border-color: #3a424e; }
html[data-theme="dark"] .btn-default:hover { color: #fff; background: #282f39; border-color: #596271; }
html[data-theme="dark"] .participant-purge-card { border-color: rgba(239, 59, 70, .46); }
html[data-theme="dark"] .participant-purge-card .card-header { background: #21161a; border-color: rgba(239, 59, 70, .35); }
html[data-theme="dark"] .participant-purge-card .card-header h2 { color: #ff9ca3; }
html[data-theme="dark"] .participant-purge-warning { color: #ffc0c5; background: #25171b; border-left-color: #ef3b46; }
html[data-theme="dark"] .participant-purge-warning span { color: #d5a4a9; }
html[data-theme="dark"] .participant-purge-status { color: #ff9ca3; }
html[data-theme="dark"] .weekly-timetable-controls,
html[data-theme="dark"] .weekly-timetable-head,
html[data-theme="dark"] .weekly-timetable-corner,
html[data-theme="dark"] .weekly-timetable-times { color: var(--text); background: #171c23; border-color: var(--line); }
html[data-theme="dark"] .weekly-timetable-identity,
html[data-theme="dark"] .weekly-timetable-legend,
html[data-theme="dark"] .weekly-timetable-day { color: var(--text); background-color: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .weekly-timetable-day { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #2a3039 31px, #2a3039 32px), repeating-linear-gradient(to bottom, transparent 0, transparent 63px, #3a424e 63px, #3a424e 64px); }
html[data-theme="dark"] .weekly-timetable-day:nth-child(even) { background-color: #171b22; }
html[data-theme="dark"] .weekly-timetable-event.is-group-ski { color: #c6e0ff; background: #172a40; border-color: #4c83bd; }
html[data-theme="dark"] .weekly-timetable-event.is-group-snowboard { color: #e0ccfa; background: #2a2037; border-color: #8d68b9; }
html[data-theme="dark"] .weekly-timetable-event.is-individual { color: #ffc6cc; background: #3a1d23; border-color: #d24a58; }
html[data-theme="dark"] .weekly-block-editor,
html[data-theme="dark"] .weekly-block-editor[open] summary,
html[data-theme="dark"] .weekly-event-modal .modal-body { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .weekly-timetable-event.is-block { color: #ffe7a4; background: #392e16; border-color: #bb8927; }
html[data-theme="dark"] .weekly-timetable-event.is-block-unavailable { color: #d7dce4; background: #2c333d; border-color: #7c8794; }
html[data-theme="dark"] .weekly-timetable-event.is-block-briefing { color: #bcecdf; background: #17352f; border-color: #3d9f8a; }
html[data-theme="dark"] .weekly-event-modal .modal-body > div { border-color: var(--line); }
html[data-theme="dark"] .weekly-event-modal .modal-body strong { color: var(--text); }
html[data-theme="dark"] .weekly-event-participants { border-color: var(--line); }
html[data-theme="dark"] .weekly-event-participants > header span { color: var(--text); }
html[data-theme="dark"] .weekly-event-participants > header strong,
html[data-theme="dark"] .weekly-event-participant-name small,
html[data-theme="dark"] .weekly-event-participant dt { color: var(--muted); }
html[data-theme="dark"] .weekly-event-participant { background: #1a1f27; border-color: var(--line); }
html[data-theme="dark"] .weekly-event-participant dl > div { background: #11161d; }
html[data-theme="dark"] .weekly-event-participant dd { color: var(--text); }
html[data-theme="dark"] .weekly-event-participant dd span { color: var(--muted); }
html[data-theme="dark"] .weekly-event-participant dd a { color: #ff8f97; }
html[data-theme="dark"] .weekly-event-participant-actions { border-color: var(--line); }
html[data-theme="dark"] .weekly-event-note-editor label, html[data-theme="dark"] .weekly-event-move-editor label, html[data-theme="dark"] .weekly-event-move-empty { color: var(--muted); }
html[data-theme="dark"] .updates-current,
html[data-theme="dark"] .latest-update-grid article,
html[data-theme="dark"] .latest-update-summary,
html[data-theme="dark"] .help-toc,
html[data-theme="dark"] .help-hero,
html[data-theme="dark"] .help-section,
html[data-theme="dark"] .help-role-grid > div,
html[data-theme="dark"] .help-procedure-grid > div,
html[data-theme="dark"] .help-steps li,
html[data-theme="dark"] .help-checklist li,
html[data-theme="dark"] .help-faq details { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .latest-update-lead { background: linear-gradient(135deg, #2b181d, #171c23 62%); border-color: #523039; }
html[data-theme="dark"] .latest-update-summary span + span { border-color: var(--line); }
html[data-theme="dark"] .latest-update-badge { color: #ffb0b8; background: #442028; }
html[data-theme="dark"] .latest-update-footer { color: #bad1df; background: #172831; }
html[data-theme="dark"] .latest-update-lead h3,
html[data-theme="dark"] .latest-update-grid h4,
html[data-theme="dark"] .updates-current strong,
html[data-theme="dark"] .help-toc-heading strong,
html[data-theme="dark"] .help-hero h2,
html[data-theme="dark"] .help-section h2,
html[data-theme="dark"] .help-role-grid h3,
html[data-theme="dark"] .help-procedure-grid h3,
html[data-theme="dark"] .help-steps strong,
html[data-theme="dark"] .help-feature-list strong,
html[data-theme="dark"] .help-faq summary { color: var(--text); }
html[data-theme="dark"] .help-toc-heading,
html[data-theme="dark"] .help-section > header,
html[data-theme="dark"] .help-feature-list > div,
html[data-theme="dark"] .help-note { background: #171c23; border-color: var(--line); }
html[data-theme="dark"] .help-toc a { color: #bdc5ce; }
html[data-theme="dark"] .help-toc a:hover,
html[data-theme="dark"] .help-toc a:focus-visible { color: #ffabb3; background: #311a20; }
html[data-theme="dark"] .help-role-badge.is-admin { color: #ffabb3; background: #3a1d23; }
html[data-theme="dark"] .help-role-badge.is-instructor { color: #a8e4c5; background: #173126; }
html[data-theme="dark"] .help-checklist li::before { color: #9be0ba; background: #193426; }

html[data-theme="dark"] .trip-picker-panel,
html[data-theme="dark"] .trip-picker-option,
html[data-theme="dark"] .calendar-week-nav,
html[data-theme="dark"] .calendar-week-arrow,
html[data-theme="dark"] .calendar-roster,
html[data-theme="dark"] .calendar-roster-row { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .admin-documents-filters,
html[data-theme="dark"] .admin-instructor-document-group,
html[data-theme="dark"] .admin-instructor-document-group > header,
html[data-theme="dark"] .instructor-document-row { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .trip-picker-option:hover,
html[data-theme="dark"] .trip-picker-option:focus-visible { background: #222831; border-color: var(--brand-line); }
html[data-theme="dark"] .trip-picker-option[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand); }
html[data-theme="dark"] .trip-picker-week { color: #ff9ca3; background: rgba(223, 10, 22, .1); border-color: var(--brand-line); }
html[data-theme="dark"] .trip-stat,
html[data-theme="dark"] .instructor-summary-pill,
html[data-theme="dark"] .instructor-group-badges span { color: #c2c8d1; background: #1b2028; border-color: #303743; }
html[data-theme="dark"] .trip-stat strong,
html[data-theme="dark"] .instructor-summary-pill strong { color: var(--text); }

html[data-theme="dark"] .group-type-0 { background: #172536; }
html[data-theme="dark"] .group-type-1 { background: #192a20; }
html[data-theme="dark"] .group-type-2 { background: #271f32; }
html[data-theme="dark"] .group-type-3 { background: #302817; }
html[data-theme="dark"] .group-category-name,
html[data-theme="dark"] .group-time,
html[data-theme="dark"] .group-metric { color: #edf1f5; }
html[data-theme="dark"] .group-training-note,
html[data-theme="dark"] .group-time small,
html[data-theme="dark"] .group-metric small { color: #a2abb7; }
html[data-theme="dark"] .group-drag-handle,
html[data-theme="dark"] .group-sequence-chip,
html[data-theme="dark"] .group-metric { background: rgba(11, 14, 18, .48); border-color: rgba(255, 255, 255, .13); }
html[data-theme="dark"] .group-sequence-chip { color: #cbd1da; }
html[data-theme="dark"] .instructor-slot { border-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .instructor-slot-participants,
html[data-theme="dark"] .group-linked-reservations,
html[data-theme="dark"] .hours-panel,
html[data-theme="dark"] .schedule-card,
html[data-theme="dark"] .basket-no-results { color: var(--text); background: #12171d; border-color: var(--line); }
html[data-theme="dark"] .schedule-heading { background: #1c222a; }
html[data-theme="dark"] .schedule-card h3 { color: var(--text); }
html[data-theme="dark"] .group-assignment-panel,
html[data-theme="dark"] .move-panel { background: #142334; border-color: #294866; }
html[data-theme="dark"] .group-merge-panel { background: #17271d; border-color: #30533a; }
html[data-theme="dark"] .unassigned-section { border-color: #3a414d; }

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td { color: #dce1e8; background: #151a21; border-color: #303742; }
html[data-theme="dark"] .calendar-table thead th,
html[data-theme="dark"] .instructor-schedule-table thead th,
html[data-theme="dark"] .calendar-detail-table thead th { color: #e9edf2; background: #20262e; border-color: #333b47; }
html[data-theme="dark"] .calendar-filters,
html[data-theme="dark"] .calendar-detail-filters,
html[data-theme="dark"] .instructor-schedule-filters,
html[data-theme="dark"] .calendar-detail-trip-picker,
html[data-theme="dark"] .instructor-week-content,
html[data-theme="dark"] .instructor-schedule-wrap { background: #10141a; border-color: var(--line); }
html[data-theme="dark"] .calendar-detail-period,
html[data-theme="dark"] .instructor-schedule-period { color: #d5dae2; background: linear-gradient(135deg, #191e25, #21181b); border-color: var(--brand-line); }
html[data-theme="dark"] .calendar-detail-period-summary > span { color: #d2d7df; background: #20262e; border-color: #353d48; }
html[data-theme="dark"] .calendar-detail-period-summary .calendar-detail-period-destination { color: #ff9ba2; background: var(--brand-soft); border-color: var(--brand-line); }
html[data-theme="dark"] .calendar-week-chip { color: #b8c0ca; background: #20262e; }
html[data-theme="dark"] .calendar-week-chip:hover { color: #fff; background: var(--brand-soft); }
html[data-theme="dark"] .calendar-week-chip.active { color: #fff; background: var(--brand); }

html[data-theme="dark"] .payroll-kpi,
html[data-theme="dark"] .payroll-detail-head,
html[data-theme="dark"] .payroll-breakdown-item,
html[data-theme="dark"] .payroll-admin-controls,
html[data-theme="dark"] .instructor-account-row,
html[data-theme="dark"] .user-row,
html[data-theme="dark"] .instructor-season-week,
html[data-theme="dark"] .instructor-group-card,
html[data-theme="dark"] .instructor-group-head { color: var(--text); background: #191e25; border-color: var(--line); }
html[data-theme="dark"] .instructor-account-row:hover,
html[data-theme="dark"] .user-row:hover { background: #20262e; border-color: #3d4653; }
html[data-theme="dark"] .instructor-season-week.is-confirmed { color: #9bd7aa; background: #14251a; border-color: #2e6540; }
html[data-theme="dark"] .instructor-season-week.is-individual { color: #efd58a; background: #2b2414; border-color: #6c5925; }
html[data-theme="dark"] .instructor-week-rates > span { color: #b9c1cb; }
html[data-theme="dark"] .instructor-week-rates strong { color: #93d5a3; }
html[data-theme="dark"] .user-role { color: #ff9fa6; background: var(--brand-soft); }

html[data-theme="dark"] .auth-screen { background: radial-gradient(circle at 15% 10%, #242932 0, #14181f 34%, transparent 58%), linear-gradient(145deg, #0d1015, #161b22); }
html[data-theme="dark"] .auth-card { color: var(--text); background: #151a21; border-color: #303742; box-shadow: 0 30px 90px rgba(0, 0, 0, .48); }
html[data-theme="dark"] .auth-card h1 { color: var(--text); }
html[data-theme="dark"] .auth-card > p,
html[data-theme="dark"] .auth-card label { color: #b4bcc7; }
html[data-theme="dark"] .temporary-password-result,
html[data-theme="dark"] .auth-token { color: #f3dda1; background: #2b2414; border-color: #6c5925; }
html[data-theme="dark"] .temporary-password-result code { color: #fff; background: #171b21; border-color: #454e5a; }
html[data-theme="dark"] .statistics-filter-grid label,
html[data-theme="dark"] .statistics-filter-head small,
html[data-theme="dark"] .statistics-panel > header p,
html[data-theme="dark"] .statistics-section-head p,
html[data-theme="dark"] .statistics-kpis span,
html[data-theme="dark"] .statistics-kpis small { color: #aeb6c1; }
html[data-theme="dark"] .statistics-kpis strong,
html[data-theme="dark"] .statistics-section-head h2 { color: var(--text); }
html[data-theme="dark"] .statistics-section-head { border-color: var(--line); }
html[data-theme="dark"] .statistics-kpi-warning { background: #2b2414; border-color: #6c5925; }
html[data-theme="dark"] .statistics-kpi-success { background: #14251a; border-color: #2e6540; }
html[data-theme="dark"] .statistics-bar-row progress,
html[data-theme="dark"] .statistics-bar-row progress::-webkit-progress-bar { background: #2a3039; }
html[data-theme="dark"] .statistics-panel-tools select { border-color: var(--line); background: #171c22; color: #e7ebef; }
html[data-theme="dark"] .statistics-ranking th { color: #dce1e8; background: #20262e; }
html[data-theme="dark"] .statistics-rank { color: #ff9ca3; background: var(--brand-soft); }
html[data-theme="dark"] .statistics-tabs { background: #11161c; border-color: var(--line); }
html[data-theme="dark"] .statistics-tabs button { color: #adb6c1; }
html[data-theme="dark"] .statistics-tabs button.active { color: #ff9ca3; background: #242a32; }
html[data-theme="dark"] .statistics-alert { background: #191e25; border-color: var(--line); }
html[data-theme="dark"] .statistics-alert small,
html[data-theme="dark"] .statistics-alert > span { color: #aeb6c1; }
html[data-theme="dark"] .statistics-note { color: #bdc7d3; background: #17212c; border-color: #31465c; }
html[data-theme="dark"] .toast { background: #262c35; border: 1px solid #3c4551; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #11151b; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3b434f; border: 3px solid #11151b; border-radius: 999px; }

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