:root {
  color-scheme: dark;
  --bg: #111827;
  --panel: #1f2937;
  --panel-deep: #111827;
  --panel-soft: #172033;
  --line: #374151;
  --line-soft: rgba(55, 65, 81, 0.72);
  --ink: #e5e7eb;
  --ink-strong: #f9fafb;
  --muted: #9ca3af;
  --blue: #066fd1;
  --blue-hover: #0a7fe8;
  --blue-soft: rgba(32, 107, 196, 0.14);
  --danger: #f87171;
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.12);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  --section-gap: 18px;
}

/* Monitoring actions use one stable control system across Daily Insights and follow-up modals. */
.monitoring-page .monitoring-daily-toolbar-actions > :is(button, a) {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  line-height: 1.2;
}

.monitoring-page .monitoring-daily-date-control input {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
}

.monitoring-page .monitoring-daily-upload-form > button,
.monitoring-page .monitoring-daily-confirm-options > button {
  box-sizing: border-box;
  height: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0 16px;
  line-height: 1.2;
}

#monitoringDailyExceptionModal .monitoring-modal-close,
#monitoringDailyTrendModal .monitoring-modal-close,
#monitoringCallModal .monitoring-modal-close,
#monitoringNotesModal .monitoring-modal-close {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
}

#monitoringDailyExceptionModal .monitoring-daily-exception-heading {
  grid-template-columns: minmax(180px, 0.8fr) minmax(500px, 1.4fr);
}

#monitoringDailyExceptionModal .monitoring-daily-exception-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch;
  justify-self: end;
  width: min(100%, 620px);
  gap: 10px;
}

#monitoringDailyExceptionModal .monitoring-daily-exception-action {
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  margin: 0;
  padding: 0 12px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

#monitoringDailyExceptionModal .monitoring-issue-warning-button {
  border-color: rgba(251, 191, 36, 0.48);
  color: #fcd34d;
}

#monitoringDailyExceptionModal .monitoring-daily-pagination > .monitoring-pagination-action {
  box-sizing: border-box;
  width: 120px;
  min-width: 120px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
}

#monitoringDailyTrendModal .monitoring-daily-history-ranges > .monitoring-range-action {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
}

#monitoringCallModal .monitoring-call-footer {
  align-items: center;
}

#monitoringCallModal .monitoring-call-footer > .monitoring-modal-action {
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  margin: 0;
  padding: 0 16px;
  line-height: 1.2;
}

#monitoringNotesModal .monitoring-notes-form > .monitoring-modal-action {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
}

@media (max-width: 900px) {
  #monitoringDailyExceptionModal .monitoring-daily-exception-heading {
    grid-template-columns: 1fr;
  }

  #monitoringDailyExceptionModal .monitoring-daily-exception-actions {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .monitoring-page .monitoring-daily-toolbar-actions > :is(button, a),
  .monitoring-page .monitoring-daily-date-control input,
  .monitoring-page .monitoring-daily-upload-form > button,
  .monitoring-page .monitoring-daily-confirm-options > button {
    height: 52px;
    min-height: 52px;
  }

  #monitoringDailyExceptionModal .monitoring-daily-exception-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Bike History: one permanent vehicle profile and a complete operational timeline. */
.bike-history-header-actions,
.warehouse-panel-topline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
}

.bike-history-header-actions .secondary-button,
.warehouse-panel-topline-actions .secondary-button {
  width: auto;
  min-width: 104px;
  margin: 0;
  white-space: nowrap;
}

.warehouse-panel-topline-actions {
  flex-wrap: wrap;
}

.warehouse-vehicle-row-actions .bike-history-action {
  flex: 0 0 auto;
  width: auto;
  min-width: 82px;
  min-height: 38px;
  margin: 0;
}

.bike-issue-action .bike-history-action {
  min-height: 46px;
}

.bike-history-page {
  width: min(1180px, calc(100vw - 28px));
}

.bike-history-search-panel,
.bike-history-profile-panel,
.bike-history-timeline-panel {
  grid-column: 1 / -1;
  overflow: hidden;
}

.bike-history-search {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.bike-history-search label {
  min-width: 0;
  margin: 0;
}

.bike-history-search input {
  width: 100%;
  min-height: 48px;
}

.bike-history-search .primary-button,
.bike-history-search .secondary-button {
  width: auto;
  min-width: 104px;
  min-height: 48px;
  margin: 0;
}

.bike-history-search-results {
  display: none;
}

.bike-history-search-results.has-results {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.bike-history-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.bike-history-results-heading strong {
  color: var(--ink-strong);
  font-size: 0.98rem;
}

.bike-history-results-heading span {
  color: var(--muted);
  font-size: 0.8rem;
}

.bike-history-match-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.bike-history-match {
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.bike-history-match:hover,
.bike-history-match:focus-visible {
  border-color: var(--blue);
  background: var(--blue-soft);
  outline: 0;
}

.bike-history-match:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.bike-history-match > span:first-child {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.bike-history-match strong,
.bike-history-match small {
  overflow-wrap: anywhere;
}

.bike-history-match strong {
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.bike-history-match small {
  color: var(--muted);
  font-size: 0.72rem;
}

.bike-history-match small.bike-history-match-driver {
  color: #fde68a;
  font-weight: 750;
}

.bike-history-match-open {
  flex: 0 0 auto;
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 800;
}

.bike-history-message {
  min-height: 0;
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  text-align: left;
}

.bike-history-message:empty {
  display: none;
}

.bike-history-message.is-error {
  color: var(--danger);
}

.bike-history-profile-heading {
  align-items: center;
}

.bike-history-profile-heading > div {
  min-width: 0;
}

.bike-history-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #93c5fd !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bike-history-profile-heading h2 {
  overflow-wrap: anywhere;
}

.bike-history-id {
  max-width: min(100%, 430px);
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 999px;
  background: var(--blue-soft);
  padding: 7px 12px;
  color: #bfdbfe !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem !important;
  font-weight: 750 !important;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.bike-history-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.bike-history-profile-field {
  min-width: 0;
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  padding: 13px 14px;
}

.bike-history-profile-field.is-wide {
  grid-column: 1 / -1;
}

.bike-history-profile-field.is-alert {
  border-color: rgba(251, 191, 36, 0.38);
  background: rgba(251, 191, 36, 0.07);
}

.bike-history-profile-field.has-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.bike-history-profile-field.is-charge-driver {
  border-color: rgba(251, 191, 36, 0.52);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.2), rgba(15, 23, 42, 0.46));
}

.bike-history-profile-field.has-action > span,
.bike-history-profile-field.has-action > strong {
  grid-column: 1;
}

.bike-history-profile-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: normal;
  text-align: center;
}

.bike-history-profile-field > span,
.bike-history-event-detail > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bike-history-profile-field > strong {
  color: var(--ink-strong);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.bike-history-timeline {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px 18px 22px 48px;
  list-style: none;
}

.bike-history-timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 22px;
  left: 27px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.78), rgba(96, 165, 250, 0.08));
}

.bike-history-event {
  position: relative;
  min-width: 0;
}

.bike-history-event-marker {
  position: absolute;
  top: 22px;
  left: -28px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 3px solid #0f172a;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.28);
}

.bike-history-event article {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.42);
  padding: 16px;
}

.bike-history-event article > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bike-history-event article > header > div {
  min-width: 0;
}

.bike-history-event time {
  display: block;
  margin-bottom: 5px;
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 750;
}

.bike-history-event h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.bike-history-event-type {
  flex: 0 0 auto;
  max-width: 210px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.11);
  padding: 5px 9px;
  color: #bfdbfe;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
}

.bike-history-event-message {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bike-history-event-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--line-soft);
}

.bike-history-event-detail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  background: rgba(15, 23, 42, 0.84);
  padding: 10px 11px;
}

.bike-history-event-detail.is-wide {
  grid-column: 1 / -1;
}

.bike-history-event-detail.is-driver {
  border-left: 3px solid rgba(251, 191, 36, 0.78);
  background: rgba(120, 53, 15, 0.2);
}

.bike-history-event-detail > strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.bike-history-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 32px 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .bike-history-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bike-history-event-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bike-history-page,
  .bike-issues-page {
    width: min(100% - 20px, 1180px);
  }

  .bike-history-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bike-history-header-actions .secondary-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .warehouse-panel-topline-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-panel-topline-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .bike-history-search {
    grid-template-columns: 1fr 1fr;
  }

  .bike-history-search label {
    grid-column: 1 / -1;
  }

  .bike-history-search .primary-button,
  .bike-history-search .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .bike-history-results-heading {
    display: grid;
    gap: 4px;
  }

  .bike-history-profile-heading {
    align-items: stretch;
  }

  .bike-history-id {
    max-width: 100%;
    border-radius: 7px;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .warehouse-vehicle-row-actions .bike-history-action {
    width: 100%;
    min-width: 0;
  }

  .bike-history-profile-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .bike-history-profile-field.is-wide {
    grid-column: auto;
  }

  .bike-history-profile-field.has-action {
    grid-template-columns: 1fr;
  }

  .bike-history-profile-action {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .bike-history-timeline {
    padding: 12px 12px 16px 38px;
  }

  .bike-history-timeline::before {
    top: 12px;
    bottom: 16px;
    left: 22px;
  }

  .bike-history-event-marker {
    left: -22px;
  }

  .bike-history-event article {
    padding: 13px;
  }

  .bike-history-event article > header {
    display: grid;
    gap: 9px;
  }

  .bike-history-event-type {
    justify-self: start;
    max-width: 100%;
  }

  .bike-history-event-details {
    grid-template-columns: 1fr;
  }

  .bike-history-event-detail.is-wide {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .bike-history-header-actions,
  .warehouse-panel-topline-actions {
    grid-template-columns: 1fr;
  }

  .bike-history-match {
    display: grid;
  }

  .bike-history-match-open {
    justify-self: start;
  }
}

@media (max-width: 420px) {
  #monitoringDailyExceptionModal .monitoring-daily-exception-actions {
    grid-template-columns: 1fr;
  }

  #monitoringDailyExceptionModal .monitoring-daily-pagination {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
  }

  #monitoringDailyExceptionModal .monitoring-daily-pagination > .monitoring-pagination-action {
    width: 100%;
    min-width: 0;
  }
}

/* Guided Monitoring cycle: one reporting date, four source files, then results. */
.monitoring-cycle {
  overflow: visible;
  border-color: rgba(96, 165, 250, 0.34);
  background:
    radial-gradient(circle at 88% 14%, rgba(37, 99, 235, 0.2), transparent 30%),
    linear-gradient(145deg, rgba(30, 58, 138, 0.2), rgba(15, 23, 42, 0.56));
}

.monitoring-cycle-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  align-items: end;
  gap: 28px;
  padding: 24px 26px 18px;
}

.monitoring-cycle-hero h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.monitoring-cycle-hero p:not(.section-eyebrow) {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.5;
}

.monitoring-cycle-date {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.68);
  padding: 14px;
}

.monitoring-cycle-date input {
  width: 100%;
  min-height: 48px;
}

.monitoring-cycle-date small,
.monitoring-bolt-upload-form small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.4;
}

.monitoring-cycle-progress {
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(180px, 1fr);
  align-items: center;
  gap: 22px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding: 14px 26px;
}

.monitoring-cycle-progress-copy {
  display: grid;
  gap: 3px;
}

.monitoring-cycle-progress-copy strong {
  color: #dbeafe;
  font-size: 0.9rem;
}

.monitoring-cycle-progress-copy span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.monitoring-cycle-progress-track {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.62);
}

.monitoring-cycle-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #34d399);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.5);
  transition: width 280ms ease;
}

.monitoring-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 16px 18px 20px;
  scrollbar-width: thin;
}

.monitoring-stepper button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 72px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.46);
  color: var(--ink);
  padding: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.monitoring-stepper button:hover,
.monitoring-stepper button:focus-visible {
  border-color: rgba(96, 165, 250, 0.65);
  background: rgba(30, 64, 175, 0.18);
}

.monitoring-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.monitoring-stepper button > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.monitoring-stepper button strong {
  color: var(--ink-strong);
  font-size: 0.78rem;
  line-height: 1.25;
}

.monitoring-stepper button small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.monitoring-stepper button[data-step-state="complete"] {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(6, 78, 59, 0.18);
}

.monitoring-stepper button[data-step-state="complete"] .monitoring-step-number {
  border-color: rgba(52, 211, 153, 0.54);
  background: rgba(16, 185, 129, 0.17);
  color: #6ee7b7;
}

.monitoring-stepper button[data-step-state="complete"] .monitoring-step-number::before {
  content: "✓";
}

.monitoring-stepper button[data-step-state="complete"] .monitoring-step-number {
  font-size: 0;
}

.monitoring-stepper button[data-step-state="complete"] .monitoring-step-number::before {
  font-size: 0.9rem;
}

.monitoring-stepper button[data-step-state="current"] {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(30, 64, 175, 0.24);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
}

.monitoring-stepper button[data-step-state="current"] .monitoring-step-number {
  border-color: #60a5fa;
  background: #1d4ed8;
  color: white;
}

.monitoring-step-panel {
  scroll-margin-top: 92px;
}

.monitoring-bolt-panel,
.monitoring-mapping-panel,
.monitoring-publish-panel {
  border-color: rgba(56, 189, 248, 0.28);
}

.monitoring-bolt-panel > .section-heading,
.monitoring-mapping-panel > .section-heading,
.monitoring-publish-panel > .section-heading {
  align-items: flex-end;
  padding: 20px 22px;
}

.monitoring-bolt-start-note {
  margin: 0 22px;
  border: 1px solid rgba(251, 191, 36, 0.24);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.1);
  color: #fde68a;
  padding: 11px 13px;
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.4;
}

.monitoring-bolt-upload-form {
  --monitoring-bolt-upload-control-height: 50px;
  display: grid;
  grid-template-areas: "date file action";
  grid-template-columns: minmax(180px, 0.55fr) minmax(280px, 1.45fr) minmax(180px, 0.55fr);
  align-items: start;
  gap: 16px;
  padding: 18px 22px 10px;
}

.monitoring-bolt-upload-form label,
.monitoring-bolt-upload-action,
.monitoring-mapping-controls label,
.monitoring-bolt-map-form label,
.monitoring-mapping-correction label {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.monitoring-bolt-upload-date {
  grid-area: date;
}

.monitoring-bolt-upload-file {
  grid-area: file;
}

.monitoring-bolt-upload-action {
  grid-area: action;
}

.monitoring-bolt-upload-label {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.monitoring-bolt-upload-form input,
.monitoring-bolt-upload-form button,
.monitoring-bolt-map-form input,
.monitoring-bolt-map-form select,
.monitoring-bolt-map-form button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
}

.monitoring-page .monitoring-bolt-upload-form input,
.monitoring-page .monitoring-bolt-upload-form .monitoring-bolt-upload-action > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--monitoring-bolt-upload-control-height);
  min-height: var(--monitoring-bolt-upload-control-height);
  max-height: var(--monitoring-bolt-upload-control-height);
  margin: 0;
}

.monitoring-bolt-upload-form input[type="file"] {
  overflow: hidden;
  padding: 7px 10px;
}

.monitoring-bolt-upload-form input[type="file"]::file-selector-button {
  height: 34px;
  margin: 0 10px 0 0;
  border: 0;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--ink-strong);
  padding: 0 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.monitoring-bolt-upload-form input[type="file"]::-webkit-file-upload-button {
  height: 34px;
  margin: 0 10px 0 0;
  border: 0;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--ink-strong);
  padding: 0 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.monitoring-bolt-summary,
.monitoring-bolt-preview-metrics,
.monitoring-combined-totals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 22px 20px;
}

.monitoring-bolt-summary article,
.monitoring-bolt-preview-metrics article,
.monitoring-combined-totals article,
.monitoring-bolt-row-amounts article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.46);
  padding: 13px;
}

.monitoring-bolt-summary article span,
.monitoring-bolt-preview-metrics article span,
.monitoring-combined-totals article span,
.monitoring-bolt-row-amounts article span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.3;
}

.monitoring-bolt-summary article strong,
.monitoring-bolt-preview-metrics article strong,
.monitoring-combined-totals article strong,
.monitoring-bolt-row-amounts article strong {
  color: var(--ink-strong);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.monitoring-bolt-summary article.is-included strong,
.monitoring-bolt-preview-metrics article.is-included strong,
.monitoring-combined-totals article.is-included strong,
.monitoring-bolt-summary article.is-earnings strong,
.monitoring-bolt-preview-metrics article.is-earnings strong,
.monitoring-combined-totals article.is-earnings strong {
  color: #6ee7b7;
}

.monitoring-bolt-summary article.is-excluded strong,
.monitoring-bolt-preview-metrics article.is-excluded strong {
  color: #cbd5e1;
}

.monitoring-bolt-summary article.is-blocking,
.monitoring-bolt-preview-metrics article.is-blocking {
  border-color: rgba(248, 113, 113, 0.44);
}

.monitoring-bolt-summary article.is-blocking strong,
.monitoring-bolt-preview-metrics article.is-blocking strong {
  color: #fca5a5;
}

.monitoring-bolt-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed rgba(148, 163, 184, 0.26);
  border-radius: 9px;
  color: var(--muted);
  padding: 16px;
  font-weight: 680;
  line-height: 1.5;
}

.monitoring-bolt-empty.is-complete {
  border-color: rgba(52, 211, 153, 0.3);
  color: #a7f3d0;
}

.monitoring-bolt-preview {
  margin: 4px 22px 22px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.34);
  overflow: hidden;
}

.monitoring-bolt-preview-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px;
}

.monitoring-bolt-preview-heading h3 {
  margin: 0;
  color: var(--ink-strong);
}

.monitoring-bolt-preview-heading > span {
  max-width: 520px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.monitoring-bolt-preview > .monitoring-daily-check {
  margin: 0 18px 14px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.1);
  padding: 13px;
}

.monitoring-bolt-coverage-check span,
.monitoring-bolt-replacement .monitoring-daily-check span {
  display: grid;
  gap: 4px;
}

.monitoring-bolt-coverage-check strong {
  color: #fde68a;
}

.monitoring-bolt-coverage-check small,
.monitoring-bolt-replacement-reason small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.monitoring-bolt-replacement {
  display: grid;
  gap: 14px;
  margin: 0 18px 14px;
  border: 1px solid rgba(248, 113, 113, 0.32);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.1);
  padding: 14px;
}

.monitoring-bolt-replacement.hidden {
  display: none;
}

.monitoring-bolt-replacement-reason {
  display: grid;
  gap: 7px;
}

.monitoring-bolt-replacement-reason textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
}

.monitoring-bolt-preview > .primary-button {
  width: calc(100% - 36px);
  min-height: 52px;
  margin: 0 18px 18px;
}

.monitoring-bolt-row-list {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.monitoring-bolt-row {
  display: grid;
  gap: 13px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 4px solid #34d399;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.24);
  padding: 15px;
}

.monitoring-bolt-row.is-unresolved {
  border-color: rgba(248, 113, 113, 0.38);
  border-left-color: #fb7185;
  background: rgba(127, 29, 29, 0.08);
}

.monitoring-bolt-row-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.monitoring-bolt-row-heading > div {
  display: grid;
  gap: 4px;
}

.monitoring-bolt-row-heading span,
.monitoring-bolt-row-heading small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.monitoring-bolt-row-heading strong {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.monitoring-bolt-row-heading b {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  padding: 6px 9px;
  font-size: 0.68rem;
  white-space: nowrap;
}

.monitoring-bolt-row.is-unresolved .monitoring-bolt-row-heading b {
  background: rgba(190, 24, 93, 0.16);
  color: #fda4af;
}

.monitoring-bolt-row-amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.monitoring-bolt-map-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1fr) minmax(190px, auto);
  align-items: end;
  gap: 12px;
  border-top: 1px solid rgba(248, 113, 113, 0.2);
  padding-top: 13px;
}

.monitoring-bolt-mapped-copy {
  margin: 0;
  color: #a7f3d0;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.monitoring-mapping-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px);
  gap: 14px;
  padding: 18px 22px;
}

.monitoring-mapping-list {
  display: grid;
  gap: 10px;
  padding: 0 22px 20px;
}

.monitoring-mapping-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.38);
  padding: 14px;
}

.monitoring-mapping-card > div:first-child {
  display: grid;
  gap: 4px;
}

.monitoring-mapping-card span,
.monitoring-mapping-card small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.4;
}

.monitoring-mapping-card strong {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.monitoring-mapping-correction {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
  border-top: 1px solid rgba(96, 165, 250, 0.24);
  padding-top: 14px;
}

.monitoring-mapping-correction label:nth-of-type(4) {
  grid-column: 1 / -1;
}

.monitoring-mapping-impact {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.12);
  color: #fde68a;
  padding: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.monitoring-mapping-correction-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 220px));
  justify-content: end;
  gap: 10px;
}

.monitoring-package-checks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 22px 6px;
}

.monitoring-package-checks article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  padding: 12px;
}

.monitoring-package-checks article > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  font-weight: 900;
}

.monitoring-package-checks article.is-ready > span:first-child {
  background: rgba(52, 211, 153, 0.13);
  color: #6ee7b7;
}

.monitoring-package-checks article > span:last-child {
  display: grid;
  gap: 3px;
}

.monitoring-package-checks strong {
  color: var(--ink-strong);
  font-size: 0.76rem;
}

.monitoring-package-checks small {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
}

.monitoring-combined-totals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.monitoring-package-replace {
  margin: 12px 22px 6px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.12);
  padding: 14px;
}

.monitoring-package-replace > label:not(.monitoring-check-row) {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--ink-strong);
  font-weight: 800;
}

.monitoring-package-replace textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

#monitoringPackageMessage {
  margin: 8px 22px 12px;
}

.monitoring-publish-panel > .primary-button {
  width: calc(100% - 44px);
  min-height: 52px;
  margin: 0 22px 22px;
}

.monitoring-result-tabs {
  position: sticky;
  z-index: 12;
  top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
  padding: 8px;
  backdrop-filter: blur(14px);
}

.monitoring-result-tabs button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 9px 13px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 820;
  white-space: nowrap;
  cursor: pointer;
}

.monitoring-result-tabs button.is-active {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(37, 99, 235, 0.2);
  color: #dbeafe;
}

.monitoring-view-hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .monitoring-cycle-hero,
  .monitoring-cycle-progress {
    grid-template-columns: 1fr;
  }

  .monitoring-stepper {
    grid-template-columns: repeat(6, minmax(180px, 1fr));
  }

  .monitoring-bolt-upload-form,
  .monitoring-bolt-map-form {
    grid-template-columns: 1fr 1fr;
  }

  .monitoring-bolt-upload-form {
    grid-template-areas:
      "date file"
      "action action";
  }

  .monitoring-bolt-upload-action,
  .monitoring-bolt-map-form button {
    grid-column: 1 / -1;
  }

  .monitoring-bolt-summary,
  .monitoring-bolt-preview-metrics,
  .monitoring-package-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .monitoring-cycle-hero {
    gap: 18px;
    padding: 20px 16px 14px;
  }

  .monitoring-cycle-progress {
    gap: 12px;
    padding: 13px 16px;
  }

  .monitoring-stepper {
    position: sticky;
    z-index: 15;
    top: 0;
    grid-template-columns: repeat(6, minmax(152px, 1fr));
    margin: 0 -1px;
    background: rgba(15, 23, 42, 0.96);
    padding: 10px;
    backdrop-filter: blur(14px);
  }

  .monitoring-stepper button {
    min-height: 64px;
  }

  .monitoring-bolt-panel > .section-heading,
  .monitoring-mapping-panel > .section-heading,
  .monitoring-publish-panel > .section-heading {
    align-items: stretch;
    padding: 18px 16px;
  }

  .monitoring-bolt-start-note {
    margin: 0 16px;
  }

  .monitoring-bolt-upload-form,
  .monitoring-bolt-map-form,
  .monitoring-mapping-controls,
  .monitoring-mapping-correction,
  .monitoring-mapping-correction-actions,
  .monitoring-bolt-row-amounts,
  .monitoring-combined-totals {
    grid-template-columns: 1fr;
  }

  .monitoring-bolt-upload-form {
    --monitoring-bolt-upload-control-height: 52px;
    grid-template-areas:
      "date"
      "file"
      "action";
    padding: 16px;
  }

  .monitoring-bolt-summary,
  .monitoring-bolt-preview-metrics,
  .monitoring-package-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 16px;
    padding-left: 16px;
  }

  .monitoring-bolt-preview {
    margin-right: 16px;
    margin-left: 16px;
  }

  .monitoring-bolt-preview-heading {
    display: grid;
  }

  .monitoring-bolt-row-heading,
  .monitoring-mapping-card {
    grid-template-columns: 1fr;
  }

  .monitoring-mapping-controls,
  .monitoring-mapping-list {
    padding-right: 16px;
    padding-left: 16px;
  }

  .monitoring-mapping-correction label,
  .monitoring-mapping-correction label:nth-of-type(4),
  .monitoring-mapping-impact,
  .monitoring-mapping-correction-actions {
    grid-column: 1;
  }

  .monitoring-publish-panel > .primary-button {
    width: calc(100% - 32px);
    margin-right: 16px;
    margin-left: 16px;
  }

  .monitoring-result-tabs {
    top: 4px;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }
}

/* Monitoring Daily Insights is intentionally scoped so monthly Monitoring stays unchanged. */
.monitoring-page .monitoring-daily-toolbar > .section-heading,
.monitoring-page .monitoring-daily-upload > .section-heading,
.monitoring-page .monitoring-daily-preview > .section-heading,
.monitoring-page .monitoring-daily-overview > .section-heading,
.monitoring-page .monitoring-daily-city > .section-heading,
.monitoring-page .monitoring-daily-insights > .section-heading,
.monitoring-page .monitoring-daily-trends > .section-heading {
  align-items: flex-end;
  padding: 20px 22px;
}

.monitoring-page .section-eyebrow {
  margin: 0 0 4px;
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.monitoring-daily-toolbar-actions {
  display: grid;
  grid-template-columns: minmax(180px, 220px) repeat(3, minmax(132px, auto));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.monitoring-daily-toolbar-actions > * {
  min-width: 0;
  min-height: 46px;
}

.monitoring-daily-date-control {
  display: grid;
  gap: 7px;
  margin: 0;
}

.monitoring-daily-date-control input {
  width: 100%;
  min-width: 0;
  height: 46px;
}

.monitoring-daily-loading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 180px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 12px 22px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.monitoring-daily-loading-bar {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.monitoring-daily-loading-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: #60a5fa;
  animation: monitoring-daily-loading 1.1s ease-in-out infinite alternate;
}

@keyframes monitoring-daily-loading {
  from { transform: translateX(-15%); }
  to { transform: translateX(155%); }
}

.monitoring-daily-upload-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr)) minmax(170px, 220px);
  align-items: end;
  gap: 16px;
  padding: 20px 22px 14px;
}

.monitoring-daily-upload-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.monitoring-daily-upload-form input,
.monitoring-daily-upload-form button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
}

.monitoring-daily-upload-form input[type="file"] {
  padding: 10px 12px;
}

.monitoring-daily-helper,
.monitoring-daily-quality-clear {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

.monitoring-daily-preview-counts,
.monitoring-daily-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 22px;
}

.monitoring-daily-preview-counts article,
.monitoring-daily-metric {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 92px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  color: var(--ink);
  padding: 14px;
  text-align: left;
}

.monitoring-daily-preview-counts span,
.monitoring-daily-metric span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
}

.monitoring-daily-preview-counts strong,
.monitoring-daily-metric strong {
  color: var(--ink-strong);
  font-size: 1.12rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

button.monitoring-daily-metric {
  width: 100%;
  font: inherit;
}

.monitoring-daily-metric.is-actionable {
  cursor: pointer;
}

.monitoring-daily-metric.is-actionable:hover,
.monitoring-daily-metric.is-actionable:focus-visible {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(30, 58, 138, 0.18);
}

.monitoring-daily-top-drivers-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 22px;
  border-top: 1px solid var(--line-soft);
  padding: 20px 0 14px;
}

.monitoring-daily-top-drivers-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
}

.monitoring-daily-top-drivers-heading span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.monitoring-daily-top-drivers {
  min-width: 0;
  overflow-x: auto;
  padding: 0 22px 22px;
  -webkit-overflow-scrolling: touch;
}

.monitoring-daily-top-drivers-table {
  width: 100%;
  min-width: 880px;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.monitoring-daily-top-drivers-table th,
.monitoring-daily-top-drivers-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

.monitoring-daily-top-drivers-table th {
  background: rgba(15, 23, 42, 0.55);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monitoring-daily-top-drivers-table td {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 760;
}

.monitoring-daily-top-drivers-table tbody tr:last-child td {
  border-bottom: 0;
}

.monitoring-daily-top-driver-rank {
  width: 56px;
  color: #93c5fd !important;
  font-weight: 900 !important;
}

.monitoring-daily-top-driver-identity {
  min-width: 180px;
}

.monitoring-daily-top-driver-identity strong {
  display: block;
  color: var(--ink-strong);
}

.monitoring-daily-top-driver-identity small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.monitoring-daily-top-driver-earnings {
  color: #86efac !important;
  font-weight: 900 !important;
}

.monitoring-daily-top-driver-tips {
  color: #fde68a !important;
  font-weight: 900 !important;
}

.monitoring-daily-top-drivers-empty {
  margin: 0;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  color: var(--muted);
  padding: 16px;
  line-height: 1.5;
}

.monitoring-daily-quality-list {
  display: grid;
  gap: 10px;
  padding: 0 22px 18px;
}

.monitoring-daily-quality-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.12);
  padding: 14px 16px;
}

.monitoring-daily-preview-details {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.monitoring-daily-preview-details > summary {
  padding: 13px 15px;
  color: #bfdbfe;
  font-weight: 800;
  cursor: pointer;
}

.monitoring-daily-preview-details > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding: 12px;
}

.monitoring-daily-preview-details article {
  display: grid;
  gap: 4px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.42);
  padding: 11px 12px;
}

.monitoring-daily-preview-details article span {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.monitoring-daily-quality-row.is-blocking {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.14);
}

.monitoring-daily-quality-row.is-deduction {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(30, 64, 175, 0.12);
}

.monitoring-daily-quality-row.is-deduction b {
  color: #93c5fd;
}

.monitoring-daily-quality-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.monitoring-daily-quality-row small {
  color: var(--muted);
  line-height: 1.4;
}

.monitoring-daily-quality-row b {
  color: #fcd34d;
  font-size: 1.15rem;
}

.monitoring-daily-quality-clear {
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
  background: rgba(20, 83, 45, 0.12);
  color: #86efac;
  padding: 14px 16px;
}

.monitoring-daily-confirm-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 20px;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding: 18px 22px 22px;
}

.monitoring-daily-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
  line-height: 1.45;
}

.monitoring-daily-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.monitoring-daily-confirm-options .primary-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 220px;
}

.monitoring-daily-city-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 22px 22px;
}

.monitoring-daily-city-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  overflow: hidden;
}

.monitoring-daily-city-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.monitoring-daily-city-heading::-webkit-details-marker {
  display: none;
}

.monitoring-daily-city-heading::after {
  content: "Open";
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.monitoring-daily-city-card[open] .monitoring-daily-city-heading::after {
  content: "Close";
}

.monitoring-daily-city-heading strong {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.02rem;
}

.monitoring-daily-city-heading span {
  color: #bfdbfe;
  font-size: 0.78rem;
  font-weight: 850;
}

.monitoring-daily-city-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0 16px 16px;
}

.monitoring-daily-city-metrics > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 9px;
}

.monitoring-daily-city-metrics dt,
.monitoring-daily-city-metrics dd {
  margin: 0;
}

.monitoring-daily-city-metrics dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.monitoring-daily-city-metrics dd {
  color: var(--ink-strong);
  font-size: 0.88rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.monitoring-daily-insight-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 22px 22px;
}

.monitoring-daily-insight-group {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.monitoring-daily-insight-group h3 {
  margin: 0 0 2px;
  color: var(--ink-strong);
  font-size: 0.94rem;
}

.monitoring-daily-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 4px solid rgba(96, 165, 250, 0.56);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  color: var(--ink);
  padding: 13px 14px;
  text-align: left;
}

button.monitoring-daily-insight-row {
  cursor: pointer;
  font: inherit;
}

button.monitoring-daily-insight-row:hover,
button.monitoring-daily-insight-row:focus-visible {
  border-color: rgba(147, 197, 253, 0.62);
}

.monitoring-daily-insight-row.is-warning { border-left-color: #fbbf24; }
.monitoring-daily-insight-row.is-danger { border-left-color: #f87171; }
.monitoring-daily-insight-row.is-positive { border-left-color: #4ade80; }

.monitoring-daily-insight-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.monitoring-daily-insight-row small,
.monitoring-daily-insight-empty {
  color: var(--muted);
  line-height: 1.42;
}

.monitoring-daily-insight-row b {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  color: var(--ink-strong);
}

.monitoring-daily-insight-empty {
  margin: 0;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 14px;
}

.monitoring-daily-city-trends {
  display: grid;
  gap: 14px;
  padding: 20px 22px 22px;
}

.monitoring-daily-city-trend-group {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.monitoring-daily-city-trend-group.has-no-selected-data {
  border-style: dashed;
}

.monitoring-daily-city-trend-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.monitoring-daily-city-trend-heading::-webkit-details-marker {
  display: none;
}

.monitoring-daily-city-trend-heading::after {
  content: "Open";
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 850;
}

.monitoring-daily-city-trend-group[open] .monitoring-daily-city-trend-heading::after {
  content: "Close";
}

.monitoring-daily-city-trend-heading strong {
  color: var(--ink-strong);
  font-size: 1rem;
}

.monitoring-daily-city-trend-heading span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.monitoring-daily-city-trend-body {
  border-top: 1px solid var(--line-soft);
  padding: 16px;
}

.monitoring-daily-city-trend-empty {
  margin: 0 0 14px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  color: var(--muted);
  padding: 12px 13px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.monitoring-daily-trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 22px 22px;
}

.monitoring-daily-city-trend-body > .monitoring-daily-trend-grid,
.monitoring-daily-city-trends > .monitoring-daily-trend-grid-aggregate {
  padding: 0;
}

.monitoring-daily-trend-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 132px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 14px;
}

button.monitoring-daily-trend-card {
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

button.monitoring-daily-trend-card:hover,
button.monitoring-daily-trend-card:focus-visible {
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(30, 41, 59, 0.72);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18);
}

.monitoring-daily-trend-card > span,
.monitoring-daily-trend-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.4;
}

.monitoring-daily-trend-card strong {
  color: var(--ink-strong);
  font-size: 1.08rem;
}

.monitoring-daily-trend-card .monitoring-daily-trend-action {
  margin-top: auto;
  color: #93c5fd;
  font-weight: 850;
}

.monitoring-daily-empty {
  padding: 22px;
}

.monitoring-daily-empty h2,
.monitoring-daily-empty p {
  margin: 0;
}

.monitoring-daily-empty p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.5;
}

.monitoring-monthly-details {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.monitoring-monthly-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 16px 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.monitoring-monthly-details > .monitoring-monthly-section {
  margin-top: 18px;
}

.monitoring-monthly-details > summary > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.monitoring-monthly-details > summary small,
.monitoring-monthly-open-label {
  color: var(--muted);
}

.monitoring-monthly-open-label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 800;
}

#monitoringDailyExceptionModal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#monitoringDailyTrendModal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#monitoringDailyTrendModal .monitoring-daily-history-modal {
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  max-height: min(calc(100dvh - 48px), 900px);
  min-height: 0;
  overflow: hidden;
}

#monitoringDailyTrendModal .monitoring-daily-history-modal > .section-heading {
  flex: 0 0 auto;
}

.monitoring-daily-history-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.monitoring-daily-history-ranges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.monitoring-daily-history-ranges button {
  width: 100%;
  min-width: 0;
}

.monitoring-daily-history-ranges button.is-active {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(6, 111, 209, 0.3);
  color: var(--ink-strong);
}

.monitoring-daily-history-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.monitoring-daily-history-summary article {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 12px;
}

.monitoring-daily-history-summary span,
.monitoring-daily-history-summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.monitoring-daily-history-summary strong {
  color: var(--ink-strong);
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.monitoring-daily-history-chart {
  min-height: 240px;
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  padding: 12px;
}

.monitoring-daily-history-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 216px;
}

.monitoring-daily-history-grid-line {
  stroke: rgba(148, 163, 184, 0.18);
  stroke-width: 1;
}

.monitoring-daily-history-line {
  fill: none;
  stroke: #60a5fa;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.monitoring-daily-history-point {
  fill: #93c5fd;
  stroke: #172033;
  stroke-width: 2;
}

.monitoring-daily-history-axis-label,
.monitoring-daily-history-date-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.monitoring-daily-history-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.5;
}

.monitoring-daily-history-values {
  margin-top: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.monitoring-daily-history-values > summary {
  padding: 14px 16px;
  color: var(--ink-strong);
  font-weight: 850;
  cursor: pointer;
}

.monitoring-daily-history-values > div {
  display: grid;
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.monitoring-daily-history-value-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(120px, 0.7fr) minmax(220px, 1.5fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 14px;
}

.monitoring-daily-history-value-row + .monitoring-daily-history-value-row {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.monitoring-daily-history-value-row time,
.monitoring-daily-history-value-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.monitoring-daily-history-value-row strong {
  color: var(--ink-strong);
}

#monitoringDailyExceptionModal .monitoring-daily-exception-modal {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(calc(100dvh - 48px), 880px);
  min-height: 0;
  overflow: hidden;
}

#monitoringDailyExceptionModal .monitoring-daily-exception-modal > .section-heading,
#monitoringDailyExceptionModal .monitoring-daily-pagination,
#monitoringDailyExceptionModal .warehouse-category-message {
  flex: 0 0 auto;
}

.monitoring-daily-exception-list {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.monitoring-daily-exception-row {
  display: grid;
  gap: 13px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  padding: 16px;
}

.monitoring-daily-exception-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.monitoring-daily-exception-heading h3,
.monitoring-daily-exception-heading p,
.monitoring-daily-exception-reason {
  margin: 0;
}

.monitoring-daily-exception-heading p,
.monitoring-daily-exception-reason {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.monitoring-daily-exception-actions {
  display: flex;
  gap: 10px;
}

.monitoring-daily-exception-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.monitoring-daily-exception-metrics > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 8px;
}

.monitoring-daily-exception-metrics span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.monitoring-daily-exception-metrics strong {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.monitoring-daily-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding: 16px 22px;
}

@media (max-width: 1000px) {
  .monitoring-daily-toolbar-actions {
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, 1fr));
    width: 100%;
  }

  .monitoring-page .monitoring-daily-toolbar > .section-heading {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .monitoring-daily-preview-counts,
  .monitoring-daily-metrics,
  .monitoring-daily-exception-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-daily-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .monitoring-page .monitoring-daily-toolbar > .section-heading,
  .monitoring-page .monitoring-daily-upload > .section-heading,
  .monitoring-page .monitoring-daily-preview > .section-heading,
  .monitoring-page .monitoring-daily-overview > .section-heading,
  .monitoring-page .monitoring-daily-city > .section-heading,
  .monitoring-page .monitoring-daily-insights > .section-heading,
  .monitoring-page .monitoring-daily-trends > .section-heading {
    display: grid;
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }

  .monitoring-daily-toolbar-actions,
  .monitoring-daily-upload-form,
  .monitoring-daily-city-grid,
  .monitoring-daily-insight-groups,
  .monitoring-daily-trend-grid,
  .monitoring-daily-confirm-options {
    grid-template-columns: 1fr;
  }

  .monitoring-daily-toolbar-actions > *,
  .monitoring-daily-toolbar-actions .download-button,
  .monitoring-daily-toolbar-actions .secondary-button {
    width: 100%;
    min-height: 52px;
  }

  .monitoring-daily-loading {
    grid-template-columns: 1fr;
    padding: 13px 16px;
  }

  .monitoring-daily-upload-form,
  .monitoring-daily-preview-counts,
  .monitoring-daily-metrics,
  .monitoring-daily-city-grid,
  .monitoring-daily-insight-groups,
  .monitoring-daily-trend-grid,
  .monitoring-daily-exception-list {
    padding-right: 16px;
    padding-left: 16px;
  }

  .monitoring-daily-upload-form {
    padding-top: 18px;
  }

  .monitoring-daily-helper,
  .monitoring-daily-quality-list {
    padding-right: 16px;
    padding-left: 16px;
  }

  .monitoring-daily-confirm-options {
    padding: 18px 16px;
  }

  .monitoring-daily-confirm-options .primary-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }

  .monitoring-daily-top-drivers-heading {
    margin-right: 16px;
    margin-left: 16px;
  }

  .monitoring-daily-top-drivers {
    overflow: visible;
    padding-right: 16px;
    padding-left: 16px;
  }

  .monitoring-daily-top-drivers-table,
  .monitoring-daily-top-drivers-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .monitoring-daily-top-drivers-table {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .monitoring-daily-top-drivers-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .monitoring-daily-top-drivers-table tbody {
    display: grid;
    gap: 10px;
  }

  .monitoring-daily-top-drivers-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.34);
    padding: 10px 12px;
  }

  .monitoring-daily-top-drivers-table td,
  .monitoring-daily-top-drivers-table tbody tr:last-child td {
    display: grid;
    grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 9px;
    width: auto;
    min-width: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    padding: 9px 0;
  }

  .monitoring-daily-top-drivers-table td:last-child {
    border-bottom: 0;
  }

  .monitoring-daily-top-driver-tips {
    grid-column: 1 / -1;
  }

  .monitoring-daily-top-drivers-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .monitoring-daily-top-driver-identity strong,
  .monitoring-daily-top-driver-identity small {
    grid-column: 2;
  }

  .monitoring-daily-top-driver-identity::before {
    grid-row: 1 / span 2;
  }

  .monitoring-daily-city-trends {
    padding: 18px 16px 20px;
  }

  .monitoring-daily-city-trend-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .monitoring-daily-city-trend-heading span {
    grid-column: 1;
    grid-row: 2;
  }

  .monitoring-daily-city-trend-heading::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .monitoring-daily-city-trend-body {
    padding: 14px;
  }

  .monitoring-daily-city-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-monthly-details > summary {
    align-items: flex-start;
    padding: 16px;
  }

  #monitoringDailyExceptionModal .monitoring-daily-exception-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  #monitoringDailyTrendModal .monitoring-daily-history-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .monitoring-daily-history-body {
    padding: 16px;
  }

  .monitoring-daily-history-ranges,
  .monitoring-daily-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-daily-history-value-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .monitoring-daily-exception-heading {
    grid-template-columns: 1fr;
  }

  .monitoring-daily-exception-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-daily-exception-actions > * {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .monitoring-daily-preview-counts,
  .monitoring-daily-exception-metrics,
  .monitoring-daily-exception-actions {
    grid-template-columns: 1fr;
  }

  .monitoring-daily-top-drivers-table tr {
    grid-template-columns: 1fr;
  }

  .monitoring-daily-top-drivers-table td,
  .monitoring-daily-top-drivers-table tbody tr:last-child td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .monitoring-daily-top-drivers-table td:last-child {
    border-bottom: 0;
  }

  .monitoring-monthly-details > summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .monitoring-monthly-open-label {
    justify-self: start;
  }

  .monitoring-daily-pagination {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Monitoring call queue and warning workflow. */
.monitoring-call-queue > .section-heading {
  align-items: center;
  padding: 20px 22px;
}

.monitoring-call-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 22px 0;
}

.monitoring-call-guide > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 8px;
  background: rgba(30, 58, 138, 0.11);
  padding: 13px 14px;
}

.monitoring-call-guide strong {
  color: #bfdbfe;
  font-size: 0.82rem;
}

.monitoring-call-guide span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 690;
  line-height: 1.45;
}

.monitoring-call-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  padding: 14px 22px 18px;
}

.monitoring-call-summary article {
  display: grid;
  align-content: space-between;
  gap: 7px;
  min-width: 0;
  min-height: 76px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
  padding: 12px 13px;
}

.monitoring-call-summary article.is-attention {
  border-color: rgba(251, 191, 36, 0.45);
}

.monitoring-call-summary article.is-complete {
  border-color: rgba(74, 222, 128, 0.34);
}

.monitoring-call-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.3;
}

.monitoring-call-summary strong {
  color: var(--ink-strong);
  font-size: 1.18rem;
}

.monitoring-call-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 280px);
  align-items: end;
  gap: 14px;
  border-top: 1px solid var(--line-soft);
  padding: 18px 22px;
}

.monitoring-call-controls label,
.monitoring-call-form label,
.monitoring-warning-preview label {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.monitoring-call-controls input,
.monitoring-call-controls select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
}

.monitoring-call-list {
  display: grid;
  gap: 12px;
  padding: 0 22px 20px;
}

.monitoring-call-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.05fr) minmax(280px, 1.35fr) auto minmax(420px, 480px);
  align-items: center;
  gap: 16px;
  min-width: 0;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.4);
  padding: 15px 16px;
}

.monitoring-call-row.is-completed {
  border-color: rgba(74, 222, 128, 0.3);
}

.monitoring-call-row-identity,
.monitoring-call-row-reason {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.monitoring-call-row h3,
.monitoring-call-row p {
  margin: 0;
}

.monitoring-call-row h3 {
  color: var(--ink-strong);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.monitoring-call-row p,
.monitoring-call-row-reason span,
.monitoring-call-row-reason small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.monitoring-call-row-reason strong {
  color: #fca5a5;
  font-size: 0.84rem;
  line-height: 1.35;
}

.monitoring-call-reason-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.monitoring-call-reason-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-left: 2px solid rgba(248, 113, 113, 0.58);
  padding-left: 9px;
}

.monitoring-call-reason-item + .monitoring-call-reason-item {
  border-left-color: rgba(96, 165, 250, 0.56);
}

.monitoring-call-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 999px;
  color: #fcd34d;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.monitoring-call-status.is-completed {
  border-color: rgba(74, 222, 128, 0.38);
  color: #86efac;
}

.monitoring-call-row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  align-self: center;
  justify-self: end;
  width: 100%;
  gap: 10px;
  min-width: 0;
}

.monitoring-call-row-actions.is-read-only {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-call-row-actions .monitoring-call-row-action {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 8px 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  margin: 0;
  align-self: stretch;
}

.monitoring-page .monitoring-call-row-actions .monitoring-issue-warning-button {
  border-color: rgba(251, 191, 36, 0.48);
  color: #fcd34d;
}

.monitoring-call-driver-details {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 10px;
}

.monitoring-call-driver-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 8px;
  color: #bfdbfe;
  background: rgba(30, 64, 175, 0.12);
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.monitoring-call-driver-details > summary::-webkit-details-marker {
  display: none;
}

.monitoring-call-driver-details > summary:focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.42);
  outline-offset: 3px;
}

.monitoring-call-driver-details[open] > summary {
  border-color: rgba(96, 165, 250, 0.62);
  background: rgba(30, 64, 175, 0.22);
}

.monitoring-call-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(147, 197, 253, 0.64);
  border-radius: 999px;
  color: #dbeafe;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.monitoring-call-driver-details > summary > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.monitoring-call-driver-details > summary strong {
  color: #dbeafe;
  font-size: 0.8rem;
  line-height: 1.2;
}

.monitoring-call-driver-details > summary small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.monitoring-call-performance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
}

.monitoring-call-performance-group {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.52);
  padding: 13px;
}

.monitoring-call-performance-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.monitoring-call-performance-heading h4 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.84rem;
}

.monitoring-call-performance-heading span {
  color: var(--muted);
  font-size: 0.68rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.monitoring-call-performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.monitoring-call-performance-metric {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.58);
  padding: 10px;
}

.monitoring-call-performance-metric span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.monitoring-call-performance-metric strong {
  color: #f8fafc;
  font-size: 0.9rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.monitoring-call-performance-metric strong.is-unavailable,
.monitoring-call-performance-unavailable {
  color: #fcd34d;
}

.monitoring-call-performance-unavailable {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.monitoring-driver-actions {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch;
  justify-self: end;
  width: min(100%, 760px);
  gap: 10px;
  min-width: 0;
}

.monitoring-page .monitoring-driver-actions > * {
  width: 100%;
  min-height: 42px;
  min-width: 0;
  padding-inline: 10px;
  line-height: 1.2;
  white-space: normal;
  margin-top: 0;
}

.monitoring-page .monitoring-driver-actions > .monitoring-whatsapp {
  min-width: 0;
}

.monitoring-call-pagination button:disabled {
  cursor: not-allowed;
}

.monitoring-call-pagination[aria-busy="true"] button:disabled {
  cursor: wait;
}

.monitoring-page .monitoring-daily-exception-actions > * {
  margin-top: 0;
}

.monitoring-call-empty {
  display: grid;
  gap: 5px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  color: var(--muted);
  padding: 18px;
  line-height: 1.45;
}

.monitoring-call-empty.is-error {
  border-color: rgba(248, 113, 113, 0.4);
  color: #fca5a5;
}

.monitoring-warning-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.monitoring-warning-summary strong {
  color: #bfdbfe;
  font-size: 0.76rem;
}

.monitoring-warning-summary span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.monitoring-warning-summary.is-compact {
  margin-top: 5px;
}

.monitoring-page .monitoring-driver-summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.monitoring-driver-actions .monitoring-notes-button,
.monitoring-driver-actions .monitoring-call-button {
  min-width: auto;
}

#monitoringCallModal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#monitoringCallModal .monitoring-call-modal {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: min(calc(100dvh - 48px), 940px);
  min-height: 0;
  overflow: hidden;
}

#monitoringCallModal .monitoring-call-modal > .section-heading {
  flex: 0 0 auto;
  padding: 18px 22px;
}

.monitoring-call-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.monitoring-call-context,
.monitoring-call-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.monitoring-call-contact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.monitoring-call-context article {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monitoring-call-context article > div,
.monitoring-call-contact > div,
.monitoring-warning-preview > div,
.monitoring-warning-deliveries > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 12px 13px;
}

.monitoring-call-context span,
.monitoring-call-contact span,
.monitoring-warning-preview > div span,
.monitoring-warning-deliveries span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 820;
}

.monitoring-call-context strong,
.monitoring-call-contact strong,
.monitoring-warning-preview > div strong,
.monitoring-warning-deliveries strong {
  color: var(--ink-strong);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.monitoring-call-contact .is-missing,
.monitoring-warning-deliveries .is-missing {
  border-color: rgba(251, 191, 36, 0.38);
}

.monitoring-call-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  padding: 18px;
}

.monitoring-call-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding-top: 4px;
}

.monitoring-call-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(6, 111, 209, 0.28);
  color: #bfdbfe;
  font-weight: 900;
}

.monitoring-call-step > div {
  display: grid;
  gap: 3px;
}

.monitoring-call-step small,
.monitoring-call-note-field small,
.monitoring-warning-toggle small {
  color: var(--muted);
  line-height: 1.42;
}

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

.monitoring-call-form input,
.monitoring-call-form select,
.monitoring-call-form textarea {
  width: 100%;
  min-width: 0;
}

.monitoring-call-form input,
.monitoring-call-form select {
  min-height: 48px;
}

.monitoring-call-form textarea {
  resize: vertical;
}

.monitoring-warning-toggle {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(30, 58, 138, 0.12);
  padding: 14px;
}

.monitoring-warning-toggle input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.monitoring-warning-toggle > span {
  display: grid;
  gap: 4px;
}

.monitoring-warning-fields {
  display: grid;
  gap: 14px;
  border-left: 3px solid rgba(251, 191, 36, 0.7);
  padding-left: 16px;
}

.monitoring-warning-explanation,
.monitoring-warning-eligibility > div {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: var(--muted);
  padding: 12px 13px;
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.5;
}

.monitoring-warning-eligibility > div.is-allowed {
  border-color: rgba(74, 222, 128, 0.38);
  color: #86efac;
}

.monitoring-warning-eligibility > div.is-blocked {
  border-color: rgba(251, 191, 36, 0.42);
  color: #fcd34d;
}

.monitoring-warning-override {
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.12);
  padding: 13px;
}

.monitoring-warning-override > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.monitoring-warning-override input {
  width: 18px;
  height: 18px;
}

.monitoring-warning-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.monitoring-warning-preview label {
  grid-column: 1 / -1;
}

.monitoring-warning-preview textarea,
.monitoring-warning-preview input {
  background: rgba(2, 6, 23, 0.38);
  color: var(--muted);
}

.monitoring-call-footer {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(230px, 1fr);
  gap: 12px;
  padding-top: 4px;
}

.monitoring-call-footer > * {
  width: 100%;
  min-height: 50px;
}

.monitoring-warning-history {
  margin-top: 22px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}

.monitoring-warning-history-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.monitoring-warning-history-heading h3 {
  margin: 0;
}

.monitoring-warning-history-heading > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.monitoring-warning-history-list {
  display: grid;
  gap: 11px;
  margin-top: 14px;
}

.monitoring-warning-history-card,
.monitoring-call-history-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
  padding: 14px;
}

.monitoring-warning-history-card.is-active {
  border-left: 4px solid #fbbf24;
}

.monitoring-warning-history-card.is-closed {
  border-left: 4px solid #64748b;
}

.monitoring-warning-history-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.monitoring-warning-history-status {
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 999px;
  color: #fcd34d;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 900;
}

.monitoring-warning-history-status.is-closed {
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--muted);
}

.monitoring-warning-history-card > p,
.monitoring-call-history-card p,
.monitoring-call-history-card > span {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.monitoring-warning-history-note {
  color: var(--ink) !important;
  white-space: pre-wrap;
}

.monitoring-warning-deliveries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.monitoring-warning-history-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.monitoring-warning-close-control {
  min-width: min(100%, 360px);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  overflow: hidden;
}

.monitoring-warning-close-control summary {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.monitoring-warning-close-control textarea,
.monitoring-warning-close-control button {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
}

.monitoring-call-history-card summary {
  color: var(--ink-strong);
  font-weight: 820;
  cursor: pointer;
}

.monitoring-call-history-card > span,
.monitoring-call-history-card > p {
  display: block;
  margin: 9px 0 0;
}

@media (max-width: 1100px) {
  .monitoring-call-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .monitoring-call-row {
    grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.2fr) auto;
  }

  .monitoring-call-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
    width: 100%;
  }

  .monitoring-page .monitoring-driver-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .monitoring-driver-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    width: 100%;
  }

  .monitoring-driver-actions > * {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .monitoring-call-queue > .section-heading,
  #monitoringCallModal .monitoring-call-modal > .section-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }

  .monitoring-call-queue > .section-heading button,
  #monitoringCallModal .monitoring-call-modal > .section-heading button {
    width: 100%;
  }

  .monitoring-call-guide,
  .monitoring-call-summary,
  .monitoring-call-controls,
  .monitoring-call-list {
    grid-template-columns: 1fr;
    padding-right: 16px;
    padding-left: 16px;
  }

  .monitoring-call-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-call-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 13px;
  }

  .monitoring-call-driver-details {
    grid-column: auto;
  }

  .monitoring-call-driver-details > summary {
    width: 100%;
    box-sizing: border-box;
  }

  .monitoring-call-performance {
    grid-template-columns: 1fr;
  }

  .monitoring-page .monitoring-driver-summary {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .monitoring-call-status {
    justify-self: start;
  }

  .monitoring-call-row-actions,
  .monitoring-driver-actions {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
  }

  .monitoring-call-row-actions {
    justify-self: stretch;
    width: 100%;
  }

  .monitoring-call-row-actions.is-read-only {
    grid-template-columns: 1fr;
  }

  #monitoringCallModal {
    align-items: end;
    padding: 12px;
  }

  #monitoringCallModal .monitoring-call-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .monitoring-call-modal-body {
    padding: 16px;
  }

  .monitoring-call-context article,
  .monitoring-call-contact,
  .monitoring-call-form-grid,
  .monitoring-warning-preview,
  .monitoring-warning-deliveries,
  .monitoring-call-footer {
    grid-template-columns: 1fr;
  }

  .monitoring-call-form {
    padding: 16px;
  }

  .monitoring-warning-preview label {
    grid-column: 1;
  }

  .monitoring-call-footer .primary-button {
    grid-row: 1;
  }

  .monitoring-call-footer .secondary-button {
    grid-row: 2;
  }

  .monitoring-warning-history-heading,
  .monitoring-warning-history-card > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  .monitoring-call-summary {
    grid-template-columns: 1fr;
  }

  .monitoring-call-step {
    grid-template-columns: 1fr;
  }
}

/* All Fleet Vehicles: one operational control for assignments, exchanges and custody moves. */
.warehouse-manage-modal.confirmation-modal {
  z-index: 100;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top) + 22px) 16px calc(env(safe-area-inset-bottom) + 18px);
}

.warehouse-manage-card.confirmation-card {
  width: min(100%, 720px);
  max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.warehouse-manage-header.confirmation-alert {
  position: sticky;
  top: 0;
  z-index: 3;
  isolation: isolate;
  background: linear-gradient(180deg, #173a61 0%, #172033 100%);
  box-shadow: 0 10px 20px rgba(7, 12, 24, 0.22);
}

.warehouse-manage-body,
#warehouseVehicleManageControls {
  display: grid;
  gap: 16px;
}

.warehouse-manage-body {
  padding: 18px;
}

.warehouse-manage-current {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  overflow: hidden;
}

.warehouse-manage-current .profile-row {
  min-height: 66px;
  padding: 12px 14px;
}

.warehouse-manage-current .profile-row strong {
  font-size: 0.94rem;
}

.warehouse-manage-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.warehouse-manage-fieldset > legend {
  margin-bottom: 10px;
  color: var(--ink-strong);
  font-size: 0.88rem;
  font-weight: 800;
}

.warehouse-manage-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.warehouse-manage-condition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.warehouse-manage-choice {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.warehouse-manage-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.warehouse-manage-choice > span {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 94px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px;
  color: var(--ink);
}

.warehouse-manage-choice > span strong {
  color: var(--ink-strong);
  font-size: 0.9rem;
}

.warehouse-manage-choice > span small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 650;
  line-height: 1.35;
}

.warehouse-manage-choice > input:checked + span {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 2px rgba(6, 111, 209, 0.18);
}

.warehouse-manage-choice > input:checked + span strong,
.warehouse-manage-choice > input:checked + span small {
  color: #bfdbfe;
}

.warehouse-manage-choice > input:focus-visible + span {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.warehouse-manage-choice > input:disabled + span {
  cursor: not-allowed;
  opacity: 0.42;
}

.warehouse-manage-mode-fields,
.warehouse-manage-issue-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.3);
  padding: 14px;
}

.warehouse-manage-mode-fields > label,
.warehouse-manage-issue-fields > label {
  min-width: 0;
  margin: 0;
}

.warehouse-manage-mode-fields input,
.warehouse-manage-mode-fields select,
.warehouse-manage-mode-fields textarea,
.warehouse-manage-issue-fields input,
.warehouse-manage-issue-fields select,
.warehouse-manage-issue-fields textarea {
  width: 100%;
  box-sizing: border-box;
}

.warehouse-manage-mode-fields textarea,
.warehouse-manage-issue-fields textarea {
  min-height: 92px;
  resize: vertical;
}

.warehouse-manage-selection-preview,
.warehouse-manage-field-help {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0;
  color: #bfdbfe;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
}

.warehouse-manage-condition-fieldset,
.warehouse-manage-issue-fields,
#warehouseVehicleManageMovementReasonLabel {
  grid-column: 1 / -1;
}

.warehouse-manage-condition-fieldset {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  padding-top: 13px;
}

.warehouse-manage-issue-fields {
  padding: 0;
  border: 0;
  background: transparent;
}

.warehouse-manage-warning {
  margin: 0;
  border: 1px solid rgba(251, 191, 36, 0.36);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.22);
  padding: 12px 14px;
  color: #fde68a;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.warehouse-manage-warning[hidden] {
  display: none;
}

.warehouse-manage-reservation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.18);
  padding: 12px 14px;
  color: #fde68a;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.warehouse-manage-reservation input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
}

.warehouse-manage-impact,
.warehouse-manage-review {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 9px;
  background: rgba(30, 64, 175, 0.1);
  padding: 14px;
}

.warehouse-manage-impact h3,
.warehouse-manage-review h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.98rem;
}

.warehouse-manage-review > span {
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.warehouse-manage-review > p {
  margin: 0;
  color: #fde68a;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

#warehouseVehicleManageImpact,
.warehouse-manage-review-summary {
  display: grid;
  gap: 8px;
}

.warehouse-manage-change {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.42);
  padding: 10px 11px;
}

.warehouse-manage-change > strong {
  color: var(--ink-strong);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.warehouse-manage-change > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.warehouse-manage-change span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.warehouse-manage-change span:last-child {
  color: #bfdbfe;
  font-weight: 750;
  text-align: right;
}

.warehouse-manage-change b {
  color: #60a5fa;
}

.warehouse-manage-review-summary > p {
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.45;
}

.warehouse-manage-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 2px;
}

.warehouse-manage-actions .primary-button,
.warehouse-manage-actions .secondary-button {
  min-height: 50px;
  margin: 0;
}

.warehouse-manage-actions .secondary-button {
  min-width: 100px;
}

.warehouse-manage-actions .primary-button {
  flex: 1;
}

.warehouse-manage-message {
  min-height: 20px;
  margin: 0;
  text-align: left;
}

body.warehouse-manage-modal-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  .warehouse-manage-modal.confirmation-modal {
    align-items: flex-start;
    padding: calc(env(safe-area-inset-top) + 18px) 10px calc(env(safe-area-inset-bottom) + 14px);
  }

  .warehouse-manage-card.confirmation-card {
    width: 100%;
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
    border-radius: 12px;
  }

  .warehouse-manage-header.confirmation-alert {
    padding: 18px 16px 15px;
    isolation: isolate;
    background: linear-gradient(180deg, #173a61 0%, #172033 100%);
  }

  .warehouse-manage-header.confirmation-alert h2 {
    font-size: 1.28rem;
  }

  .warehouse-manage-body {
    padding: 16px;
  }

  .warehouse-manage-action-grid,
  .warehouse-manage-mode-fields,
  .warehouse-manage-issue-fields {
    grid-template-columns: 1fr;
  }

  .warehouse-manage-choice > span {
    min-height: 76px;
  }

  .warehouse-manage-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 14px;
  }

  .warehouse-manage-actions .primary-button,
  .warehouse-manage-actions .secondary-button {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    border-radius: 8px;
  }

  .warehouse-manage-actions .primary-button {
    order: -2;
  }

  #warehouseVehicleManageBack {
    order: -1;
  }
}

@media (max-width: 560px) {
  .warehouse-vehicle-row-actions .warehouse-manage-open-button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .warehouse-manage-condition-grid,
  .warehouse-manage-actions {
    grid-template-columns: 1fr;
  }

  .warehouse-manage-actions .primary-button,
  .warehouse-manage-actions .secondary-button {
    grid-column: 1;
  }
}

@media (max-width: 1199px) {
  .tasks-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .tasks-page {
    width: min(100% - 24px, 680px);
  }

  .global-search-form {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .global-search-form .secondary-button {
    width: 100%;
  }

  .search-page-form,
  .search-result-card,
  .driver-360-grid {
    grid-template-columns: 1fr;
  }

  .search-result-status {
    justify-self: start;
  }

  .driver-360-summary {
    padding: 16px;
  }

  .tasks-summary,
  .tasks-control-grid,
  .task-card-main,
  .driver-target-main {
    grid-template-columns: 1fr;
  }

  .task-card-badges,
  .driver-target-value {
    justify-content: center;
    justify-items: center;
  }

  .driver-history-heading,
  .driver-history-item-top {
    display: grid;
    justify-content: stretch;
  }

  .driver-history-heading p {
    text-align: left;
  }

  .driver-history-details {
    grid-template-columns: 1fr;
  }

  .driver-history-detail:nth-last-child(-n + 2) {
    grid-column: auto;
  }

  .tasks-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasks-detail-grid .profile-row:nth-last-child(-n + 2) {
    grid-column: 1 / -1;
  }

  .task-alert {
    grid-template-columns: 1fr;
  }

  .task-alert > strong {
    width: 100%;
  }

  .transfer-info-grid,
  .transfer-review-grid,
  .transfer-card-details {
    grid-template-columns: 1fr;
  }

  .city-transfer-request-card {
    grid-template-columns: 1fr;
  }

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

  .transfer-comparison-row em {
    display: none;
  }
}

@media (max-width: 560px) {
  .task-card-grid,
  .tasks-detail-grid {
    grid-template-columns: 1fr;
  }

  .task-card {
    padding: 15px;
  }

  .driver-target-main {
    min-height: 220px;
    padding: 22px 16px;
  }

  .driver-history-heading,
  .driver-history-list {
    padding: 14px;
  }

}

html.flee7-phone-layout .motorbike-layout {
  width: min(100% - 24px, 640px);
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

html.flee7-phone-layout .intake-header {
  min-height: 58px;
}

html.flee7-phone-layout .company-dashboard-grid,
html.flee7-phone-layout .driver-target-main,
html.flee7-phone-layout .submission-fields,
html.flee7-phone-layout .saved-details,
html.flee7-phone-layout .driver-information-current-panel,
html.flee7-phone-layout .driver-information-choice-grid,
html.flee7-phone-layout .driver-information-form-grid,
html.flee7-phone-layout .atokes-card-details,
html.flee7-phone-layout .atokes-detail-grid {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .button-row {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .company-dashboard-section-heading {
  display: grid;
  justify-content: stretch;
  align-items: start;
  gap: 4px;
}

html.flee7-phone-layout .company-dashboard-card {
  min-height: 146px;
}

html.flee7-phone-layout .driver-target-main {
  min-height: 220px;
  padding: 22px 16px;
}

html.flee7-phone-layout .driver-updates-log-list {
  padding: 16px;
}

.special-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 18px 0;
}

.special-step {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #94a3b8;
  font-weight: 800;
  padding: 12px 10px;
}

.special-step.active {
  border-color: rgba(96, 165, 250, 0.66);
  background: rgba(30, 64, 175, 0.34);
  color: #f8fafc;
}

.special-step-panel {
  padding: 18px;
}

.special-compose-grid,
.special-question-grid,
.special-filter-grid {
  margin-bottom: 14px;
}

.special-filter-grid {
  grid-template-columns: minmax(220px, 1.15fr) repeat(4, minmax(140px, 1fr)) minmax(220px, auto);
  align-items: end;
}

.special-filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.special-filter-actions .primary-button,
.special-filter-actions .secondary-button {
  min-height: 48px;
  width: 100%;
}

.special-question-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.special-question-card {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  overflow: hidden;
}

.special-selection-actions {
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 0 14px;
}

#specialSelectionCount {
  color: #cbd5e1;
  font-weight: 800;
}

.special-driver-list,
.special-existing-list {
  gap: 10px;
}

.document-item.special-driver-item {
  display: grid;
  grid-template-columns: 24px minmax(180px, 1fr) minmax(360px, 1.8fr);
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 16px 18px;
}

.special-driver-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
}

.special-driver-meta {
  min-width: 0;
}

.special-driver-meta strong {
  display: block;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.special-driver-meta p {
  margin: 5px 0 0;
  color: #aebbd0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.special-driver-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.special-driver-tags span {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  color: #dbe6f6;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 10px;
}

.document-item.special-driver-test-item {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 64, 175, 0.18);
}

.special-review-grid {
  display: grid;
  gap: 16px;
}

.special-sms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  padding: 14px;
  color: #e2e8f0;
  font-weight: 800;
}

.special-sms-option input {
  width: 20px;
  height: 20px;
}

.button-row.special-step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px 18px;
}

.button-row.special-step-actions .primary-button,
.button-row.special-step-actions .secondary-button {
  width: auto;
  min-width: 132px;
  margin-top: 0;
}

.document-item.special-request-result {
  display: block;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.special-request-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta actions"
    "toggle actions";
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
  cursor: pointer;
  list-style: none;
  min-height: 78px;
  padding: 16px 18px;
}

.special-request-summary::-webkit-details-marker {
  display: none;
}

.special-request-summary .document-meta {
  grid-area: meta;
  min-width: 0;
}

.special-request-summary .document-meta strong {
  display: block;
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.special-request-summary .document-meta p {
  margin-top: 6px;
  line-height: 1.35;
}

.special-request-toggle {
  grid-area: toggle;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  min-width: 86px;
  padding: 5px 10px;
  text-transform: uppercase;
  width: fit-content;
}

.special-request-export-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.special-request-export-link {
  min-height: 38px;
  min-width: 82px;
}

.special-request-response-list {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.18);
  padding: 14px 18px 18px;
}

.special-request-section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.special-request-section-heading strong {
  color: var(--ink-strong);
  font-size: 0.92rem;
  font-weight: 850;
}

.special-request-section-heading span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 780;
}

.special-request-section-heading.pending {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  margin-top: 8px;
  padding-top: 14px;
}

.special-pending-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.special-pending-card {
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.08);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.special-pending-card strong {
  color: #fef3c7;
  font-weight: 850;
  min-width: 0;
  overflow-wrap: anywhere;
}

.special-pending-card span {
  color: #d6deeb;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.mass-sms-message-field {
  display: grid;
  gap: 10px;
}

.mass-sms-message-field textarea {
  min-height: 180px;
  resize: vertical;
}

.mass-sms-preview-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 146px;
  padding: 16px;
}

.mass-sms-preview-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mass-sms-preview-card p,
.mass-sms-campaign-preview {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mass-sms-preview-card p {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.5;
}

.mass-sms-preview-card p.empty {
  color: var(--muted);
}

.mass-sms-campaign-item {
  align-items: start;
  gap: 12px;
}

.mass-sms-campaign-preview {
  margin: 0;
}

.special-response-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.special-response-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.special-response-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.special-response-heading span {
  color: #aebbd0;
  font-size: 0.9rem;
}

.special-answer-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: stretch;
}

.special-answer-question,
.special-answer-value {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  color: #dbeafe;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px;
}

.special-answer-question {
  color: #aebbd0;
  text-transform: none;
}

.special-answer-value {
  color: #f8fafc;
}

.document-item.special-loading-state {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #cbd5e1;
  font-weight: 900;
}

.document-item.special-loading-state::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(248, 250, 252, 0.88);
  border-right-color: transparent;
  border-radius: 999px;
  animation: flee7-spin 0.8s linear infinite;
}

.driver-special-requests-card {
  max-width: 720px;
}

@media (max-width: 1240px) {
  .special-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .special-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .special-request-summary {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "toggle"
      "actions";
    gap: 12px;
  }

  .special-request-toggle {
    justify-self: start;
  }

  .special-request-export-actions {
    justify-content: stretch;
  }

  .special-request-export-link {
    flex: 1;
  }

  .special-response-heading,
  .special-answer-row {
    grid-template-columns: 1fr;
  }

  .button-row.special-step-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button-row.special-step-actions .primary-button,
  .button-row.special-step-actions .secondary-button {
    width: 100%;
  }
}

.driver-special-request-list {
  gap: 12px;
}

.driver-special-request-item {
  display: grid;
  gap: 14px;
}

.driver-special-fields {
  grid-template-columns: 1fr;
}

.driver-special-question {
  display: grid;
  gap: 8px;
}

.driver-special-question > span {
  color: #f8fafc;
  font-weight: 900;
}

.driver-special-choice-group {
  display: grid;
  gap: 8px;
}

.driver-special-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  padding: 12px;
  color: #e2e8f0;
}

.driver-special-choice input {
  width: 20px;
  height: 20px;
}

@media (max-width: 760px) {
  .special-stepper {
    grid-template-columns: 1fr;
    padding: 14px 14px 0;
  }

  .special-step-panel,
  .special-step-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .special-filter-grid,
  .special-filter-actions {
    grid-template-columns: 1fr;
  }

  .document-item.special-driver-item {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: flex-start;
  }

  .special-driver-tags {
    grid-column: 2;
    justify-content: flex-start;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

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

.hidden {
  display: none !important;
}

.session-bootstrap {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(32, 107, 196, 0.16), transparent 42%),
    var(--bg);
}

.session-bootstrap-card {
  width: min(100%, 420px);
  border: 1px solid rgba(98, 160, 232, 0.24);
  border-radius: 18px;
  background: rgba(22, 32, 48, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 34px;
  text-align: center;
}

.session-bootstrap-card .auth-brand {
  justify-self: center;
}

.session-bootstrap-card h1 {
  margin-bottom: 8px;
  font-size: clamp(1.5rem, 5vw, 2rem);
}

.session-bootstrap-card p {
  margin: 0;
}

.session-bootstrap-card .secondary-button {
  width: 100%;
}

.session-bootstrap-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(98, 160, 232, 0.2);
  border-top-color: var(--blue-hover);
  border-radius: 999px;
  animation: flee7-spin 0.8s linear infinite;
}

.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.brand-panel {
  min-height: 100vh;
  border-right: 1px solid rgba(32, 107, 196, 0.15);
  background: radial-gradient(ellipse at 50% 45%, rgba(32, 107, 196, 0.08) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.brand-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pulse-container {
  width: 160px;
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-ring {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(32, 107, 196, 0.25);
  border-radius: 50%;
  animation: pulse-expand 4s ease-out infinite;
}

.pulse-ring-2 {
  animation-delay: 1.3s;
}

.pulse-ring-3 {
  animation-delay: 2.6s;
}

@keyframes pulse-expand {
  0% {
    transform: scale(1);
    opacity: 0.5;
    border-color: rgba(32, 107, 196, 0.35);
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
    border-color: rgba(32, 107, 196, 0);
  }
}

.brand-mark {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-hover);
  background: rgba(6, 111, 209, 0.08);
  border: 1px solid rgba(32, 107, 196, 0.16);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0;
  filter: drop-shadow(0 0 20px rgba(32, 107, 196, 0.3));
}

.brand-mark.small {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 0.9rem;
  filter: none;
}

.brand-title {
  margin: 22px 0 0;
  color: var(--ink-strong);
  font-size: clamp(3rem, 5vw, 4.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.brand-title span,
.auth-brand span {
  color: var(--blue-hover);
}

.brand-tagline {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.auth-column {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-column > .auth-brand {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 28px);
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
}

.auth-brand {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-strong);
}

.auth-brand strong {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
}

.auth-brand.inline {
  justify-content: flex-start;
  margin-bottom: 0;
}

.login-card {
  width: min(100%, 368px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 22px;
  box-shadow: var(--shadow);
}

.login-card h2 {
  margin-bottom: 20px;
  color: var(--ink-strong);
  font-size: 1.25rem;
  font-weight: 650;
  text-align: center;
  letter-spacing: 0;
}

.driver-portal-boot {
  width: min(100%, 520px);
  min-height: 190px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
}

.driver-portal-boot h2 {
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-size: 1.2rem;
}

.driver-portal-boot p {
  margin: 0;
}

.driver-portal-boot-indicator {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.1);
}

.driver-portal-boot-indicator span {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(147, 197, 253, 0.28);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: driver-portal-spin 0.8s linear infinite;
}

.driver-portal-boot-error .driver-portal-boot-indicator span {
  animation: none;
  border-color: #fbbf24;
}

.driver-portal-boot .secondary-button {
  width: min(100%, 220px);
}

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

@media (prefers-reduced-motion: reduce) {
  .driver-portal-boot-indicator span {
    animation: none;
  }
}

.bounded-list-more {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--muted, #94a3b8);
  text-align: center;
}

.bounded-list-more > span {
  font-size: 0.88rem;
  font-weight: 700;
}

.bounded-list-more > button {
  width: min(100%, 360px);
  min-height: 44px;
}

@media (max-width: 560px) {
  .bounded-list-more {
    padding: 14px 12px;
  }

  .bounded-list-more > button {
    width: 100%;
  }
}

.auth-recovery-link {
  display: flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin: 8px auto -4px;
  border: 0;
  background: transparent;
  padding: 4px 8px;
  color: #93c5fd;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.auth-recovery-link:hover,
.auth-recovery-link:focus-visible {
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-recovery-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--blue-hover);
  outline-offset: 2px;
}

.auth-recovery-card {
  width: min(100%, 404px);
}

.auth-username-context {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}

.auth-step-badge {
  display: table;
  margin: 0 auto 10px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 999px;
  background: rgba(6, 111, 209, 0.12);
  padding: 5px 10px;
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-recovery-note {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.52);
  padding: 14px;
}

.auth-recovery-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 111, 209, 0.2);
  color: #bfdbfe;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.auth-recovery-note strong {
  display: block;
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.auth-recovery-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.auth-password-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.auth-recovery-actions {
  grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.4fr);
}

.auth-recovery-actions .primary-button,
.auth-recovery-actions .secondary-button {
  min-height: 46px;
}

.auth-resend-link {
  margin-top: 9px;
  margin-bottom: -8px;
}

.muted {
  margin: -12px 0 0;
  color: var(--muted);
  text-align: center;
}

label {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-deep);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  padding: 0 13px;
  outline: none;
}

input,
select {
  height: 40px;
}

input[type="date"],
input[type="month"] {
  display: block;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  height: 40px;
  min-height: 40px;
  border-radius: 6px;
  padding: 0 13px;
  color-scheme: dark;
  text-align: left;
  text-align-last: left;
  line-height: 40px;
  appearance: none;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
  min-height: 40px;
  line-height: 40px;
  margin: 0;
  text-align: left;
}

input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit {
  padding: 0;
}

textarea {
  min-height: 104px;
  padding: 12px 13px;
  line-height: 1.35;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #8b93a3;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(6, 111, 209, 0.25);
}

.primary-button,
.secondary-button,
.download-button {
  min-height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.primary-button {
  width: 100%;
  margin-top: 18px;
  background: var(--blue);
  color: var(--ink-strong);
}

.primary-button:hover {
  background: var(--blue-hover);
}

.primary-button:disabled,
.secondary-button:disabled,
.download-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.primary-button:disabled:hover {
  background: var(--blue);
}

.secondary-button:disabled:hover {
  color: var(--muted);
  border-color: var(--line);
}

.secondary-button {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.secondary-button:hover {
  color: var(--ink-strong);
  border-color: var(--blue);
}

.warning-button {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.55);
}

.warning-button:hover {
  color: var(--ink-strong);
  border-color: rgba(245, 158, 11, 0.85);
  background: rgba(245, 158, 11, 0.14);
}

.danger-button {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.55);
}

.danger-button:hover {
  color: var(--ink-strong);
  border-color: var(--danger);
  background: rgba(248, 113, 113, 0.14);
}

.danger-primary-button {
  background: #b91c1c;
}

.danger-primary-button:hover {
  background: #dc2626;
}

.danger-primary-button:disabled:hover {
  background: #b91c1c;
}

.button-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
  margin-top: 18px;
}

.button-row .primary-button {
  margin-top: 0;
}

.form-message {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.dev-otp {
  margin: 14px 0 0;
  border: 1px solid rgba(6, 111, 209, 0.25);
  border-radius: 6px;
  background: var(--blue-soft);
  padding: 10px 12px;
  color: #93c5fd;
  font-size: 0.88rem;
  font-weight: 650;
  text-align: center;
}

.dashboard {
  width: min(1120px, calc(100vw - 32px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 24px 0 40px;
  display: grid;
  align-content: start;
  align-items: start;
  gap: var(--section-gap);
}

.dashboard-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 20px;
}

.dashboard-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-title h1 {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
  margin-bottom: 0;
  color: var(--ink-strong);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 650;
  letter-spacing: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.dashboard-logout-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 76px;
  min-height: 34px;
  margin-left: auto;
  padding: 0 12px;
  font-size: 0.78rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.module-option {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  padding: 16px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  text-align: left;
  box-shadow: var(--shadow);
}

.module-option span {
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 700;
}

.module-option strong {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.module-option.active {
  border-color: rgba(6, 111, 209, 0.62);
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.18), rgba(31, 41, 55, 0.96));
}

.module-option.active strong {
  color: #93c5fd;
}

.module-option.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
  filter: grayscale(0.35);
}

.module-panel {
  display: grid;
  gap: var(--section-gap);
}

.warehouse-dashboard {
  width: min(1280px, calc(100vw - 32px));
  gap: var(--section-gap);
}

.warehouse-dashboard .dashboard-header {
  min-height: 64px;
}

.warehouse-dashboard .dashboard-title {
  justify-content: flex-start;
  gap: 18px;
  padding: 0 8px;
}

.warehouse-dashboard .dashboard-title h1 {
  flex: 0 1 auto;
  padding-right: 0;
  text-align: left;
}

.warehouse-dashboard .module-grid,
.warehouse-dashboard #compliancePanel {
  display: none !important;
}

.company-dashboard-panel {
  display: grid;
  gap: var(--section-gap);
}

.warehouse-dashboard #companyDashboardPanel {
  grid-template-columns: 1fr;
}

.company-dashboard-heading {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.18), rgba(31, 41, 55, 0.96));
  box-shadow: var(--shadow);
}

.company-dashboard-sections {
  display: grid;
  gap: 28px;
}

.company-dashboard-section {
  display: grid;
  gap: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 18px;
}

.company-dashboard-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.company-dashboard-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.company-dashboard-section-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-dashboard-section-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.attention-section .company-dashboard-section-heading h3 {
  color: #bfdbfe;
}

.company-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.company-dashboard-card {
  min-height: 184px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  align-content: space-between;
  gap: 14px;
  font: inherit;
  padding: 18px;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.company-dashboard-card:hover {
  border-color: rgba(6, 111, 209, 0.58);
  transform: translateY(-1px);
}

.company-dashboard-card span {
  color: var(--ink-strong);
  font-size: 1.18rem;
  font-weight: 760;
  line-height: 1.2;
}

.company-dashboard-card strong {
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-dashboard-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.company-dashboard-card-progress {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.company-dashboard-card-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #38bdf8;
}

.company-dashboard-card-progress.is-loading i {
  width: 42%;
  animation: flee7-dashboard-progress 1.1s ease-in-out infinite;
}

.company-dashboard-card-progress.is-ready i {
  width: 100%;
  background: #34d399;
}

.company-dashboard-card-progress.is-failed i {
  width: 100%;
  background: #f87171;
}

@keyframes flee7-dashboard-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(240%); }
}

.company-dashboard-card.active {
  border-color: rgba(6, 111, 209, 0.72);
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.22), rgba(31, 41, 55, 0.96));
}

.company-dashboard-card.request-pending {
  border-color: rgba(251, 191, 36, 0.86);
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.34), rgba(31, 41, 55, 0.98));
}

.company-dashboard-card.request-open {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.32), var(--shadow);
}

.company-dashboard-card.request-pending strong {
  color: #fde68a;
}

.company-dashboard-card.request-approved {
  border-color: rgba(34, 197, 94, 0.82);
  background: linear-gradient(180deg, rgba(21, 128, 61, 0.32), rgba(31, 41, 55, 0.98));
}

.company-dashboard-card.request-approved strong {
  color: #bbf7d0;
}

.company-dashboard-card.action-required {
  border-color: rgba(248, 113, 113, 0.86);
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.36), rgba(31, 41, 55, 0.98));
}

.company-dashboard-card.action-required strong {
  color: #fecaca;
}

.company-dashboard-card.disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
  filter: grayscale(0.5);
}

.company-dashboard-card.disabled:hover {
  border-color: var(--line);
  transform: none;
}

.company-dashboard-card:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9);
  outline-offset: 3px;
}

.driver-request-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.driver-request-options .company-dashboard-card {
  position: relative;
  min-height: 142px;
  align-content: start;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  overflow: hidden;
}

.driver-request-options .company-dashboard-card.request-open {
  border-color: rgba(147, 197, 253, 0.9);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.28), rgba(31, 41, 55, 0.98));
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24), var(--shadow);
}

.driver-request-options .company-dashboard-card.request-open::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 10px;
  width: 3px;
  border-radius: 999px;
  background: #93c5fd;
}

.driver-request-options .company-dashboard-card.request-open > * {
  margin-left: 8px;
}

.driver-salary-choice-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.driver-request-panel {
  scroll-margin-top: 18px;
}

.driver-salary-option {
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  font: inherit;
  padding: 14px 16px;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.driver-salary-option:hover {
  border-color: rgba(147, 197, 253, 0.62);
  transform: translateY(-1px);
}

.driver-salary-option:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9);
  outline-offset: 3px;
}

.driver-salary-option-copy {
  display: grid;
  gap: 4px;
}

.driver-salary-option-copy > span {
  color: var(--ink-strong);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.25;
}

.driver-salary-option strong {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.driver-salary-option-arrow {
  color: #93c5fd;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.driver-salary-option.selected {
  border-color: rgba(147, 197, 253, 0.94);
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24);
}

.driver-salary-option.selected .driver-salary-option-arrow {
  transform: translateX(2px);
}

.driver-salary-form-heading {
  padding: 18px 18px 0;
}

.company-dashboard-message {
  margin: 0;
  color: var(--muted);
  text-align: left;
}

.payout-upload-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(240px, 1fr) minmax(160px, 220px);
  align-items: end;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  padding: 18px;
}

.payout-upload-form label {
  min-width: 0;
  margin-top: 0;
}

.payout-upload-form input,
.payout-upload-form select {
  max-width: 100%;
  min-width: 0;
}

.payout-month-select {
  height: 52px;
  min-height: 52px;
  background-position: calc(100% - 18px) 23px, calc(100% - 13px) 23px;
  text-align: center;
  text-align-last: center;
}

.payout-upload-form input[type="file"] {
  height: 52px;
  min-height: 52px;
  padding: 10px 12px;
  line-height: 30px;
}

.payout-upload-form input[type="file"]::file-selector-button {
  min-height: 30px;
  margin: 0 12px 0 0;
}

.payout-upload-form input[type="file"]::-webkit-file-upload-button {
  min-height: 30px;
  margin: 0 12px 0 0;
}

.payout-upload-form .primary-button {
  align-self: end;
  margin-top: 0;
}

@media (min-width: 761px) {
  .payout-upload-form .primary-button {
    margin-bottom: 6px;
  }
}

.payout-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  padding: 18px;
}

.payout-card-button {
  width: 100%;
  min-height: 148px;
}

.payout-card-button.payout-scenario-target {
  border-color: rgba(34, 197, 94, 0.7);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.24), rgba(31, 41, 55, 0.96));
}

.payout-card-button.payout-scenario-target strong {
  color: #86efac;
}

.payout-card-button.payout-scenario-hours {
  border-color: rgba(249, 115, 22, 0.72);
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.24), rgba(31, 41, 55, 0.96));
}

.payout-card-button.payout-scenario-hours strong {
  color: #fdba74;
}

.payout-card-button.payout-scenario-proportional {
  border-color: rgba(239, 68, 68, 0.74);
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.22), rgba(31, 41, 55, 0.96));
}

.payout-card-button.payout-scenario-proportional strong {
  color: #fca5a5;
}

.payout-summary strong {
  max-width: 100%;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  overflow-wrap: anywhere;
}

.payout-summary,
.payout-summary div {
  min-width: 0;
}

.payout-detail {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payout-detail-metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.payout-explanation {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.42);
  display: grid;
  gap: 12px;
  padding: 18px;
}

.payout-explanation p {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.55;
}

.payout-empty-state {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.34);
  color: var(--muted);
  display: grid;
  align-items: center;
  padding: 18px;
}

.housing-page {
  width: min(1280px, calc(100vw - 32px));
}

.housing-mobile-tabs {
  display: none;
}

.housing-summary strong {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.housing-summary .housing-summary-card[role="button"] {
  cursor: pointer;
  outline: none;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.housing-summary .housing-summary-card[role="button"]:hover,
.housing-summary .housing-summary-card[role="button"]:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.housing-summary .housing-summary-card[role="button"]:active {
  transform: translateY(1px);
}

.housing-summary .housing-missing-summary small {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.72rem;
  font-weight: 850;
}

.housing-summary .housing-missing-summary.is-alert {
  background: rgba(127, 29, 29, 0.36);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.44);
}

.housing-summary .housing-missing-summary.is-alert strong,
.housing-summary .housing-missing-summary.is-alert small {
  color: #fca5a5;
}

.housing-summary .housing-missing-summary.is-ok {
  background: rgba(20, 83, 45, 0.34);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.42);
}

.housing-summary .housing-missing-summary.is-ok strong,
.housing-summary .housing-missing-summary.is-ok small {
  color: #86efac;
}

.housing-missing-panel {
  margin: 14px;
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(15, 23, 42, 0.42);
}

.housing-missing-list {
  max-height: min(56vh, 560px);
  overflow: auto;
}

.housing-missing-driver-actions {
  min-width: 340px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.housing-missing-driver-actions .whatsapp-button,
.housing-missing-driver-actions .secondary-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
}

.housing-missing-export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.housing-missing-export-actions .download-button,
.housing-missing-export-actions .secondary-button {
  min-width: 86px;
}

.housing-summary .housing-profit-positive {
  color: #86efac;
}

.housing-summary .housing-profit-negative {
  color: #fca5a5;
}

.housing-summary .housing-capacity-full {
  color: #fca5a5;
}

.housing-capacity-panel {
  border-top: 1px solid var(--line-soft);
}

.housing-capacity-panel .section-heading.tight {
  padding: 24px 18px 8px;
}

.housing-capacity-panel .section-heading.tight h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.housing-capacity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  padding: 24px 18px 30px;
}

.housing-capacity-item {
  align-items: start;
  border-left-width: 3px;
}

.housing-capacity-item.housing-capacity-open {
  border-left-color: rgba(34, 197, 94, 0.82);
}

.housing-capacity-item.housing-capacity-tight {
  border-left-color: rgba(249, 115, 22, 0.9);
}

.housing-capacity-item.housing-capacity-full {
  border-left-color: rgba(239, 68, 68, 0.9);
}

.housing-capacity-space {
  color: var(--ink);
  font-size: 0.95rem;
}

.housing-capacity-bar {
  width: 100%;
  height: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  display: block;
  margin: 10px 0;
  overflow: hidden;
}

.housing-capacity-bar span {
  height: 100%;
  border-radius: inherit;
  display: block;
}

.housing-capacity-bar.housing-capacity-open span {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.housing-capacity-bar.housing-capacity-tight span {
  background: linear-gradient(90deg, #f97316, #fdba74);
}

.housing-capacity-bar.housing-capacity-full span {
  background: linear-gradient(90deg, #ef4444, #fca5a5);
}

.housing-profit-layout {
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.housing-profit-panel {
  min-width: 0;
}

.housing-profit-panel + .housing-profit-panel {
  border-left: 1px solid var(--line-soft);
}

.housing-profit-panel .section-heading.tight {
  padding: 24px 18px 8px;
}

.housing-profit-panel .section-heading.tight h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.housing-profit-list {
  display: grid;
  gap: 14px;
  padding: 24px 18px 30px;
}

.housing-profit-item {
  align-items: start;
}

.housing-profit-item p {
  overflow-wrap: anywhere;
}

.housing-profit-metrics,
.housing-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.housing-profit-metric,
.housing-finance-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
  display: grid;
  gap: 5px;
  padding: 10px;
}

.housing-profit-metric small,
.housing-finance-card span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.housing-profit-metric strong,
.housing-finance-card strong {
  color: var(--ink);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.housing-profit-positive strong,
.housing-profit-positive {
  color: #86efac;
}

.housing-profit-negative strong,
.housing-profit-negative {
  color: #fca5a5;
}

.document-item.housing-loading-state {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #cbd5e1;
  font-weight: 900;
  text-align: center;
}

.document-item.housing-loading-state::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(148, 163, 184, 0.34);
  border-top-color: var(--blue-hover);
  border-radius: 999px;
  animation: flee7-spin 0.8s linear infinite;
}

.housing-month-breakdown {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.housing-form-grid,
.housing-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: 18px;
}

.housing-filter-grid {
  border-bottom: 1px solid var(--line-soft);
}

.housing-form-grid label,
.housing-filter-grid label {
  min-width: 0;
  margin-top: 0;
}

.housing-wide-field {
  grid-column: span 2;
}

.housing-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.housing-form-actions .primary-button,
.housing-form-actions .secondary-button {
  margin-top: 0;
}

.housing-swap-form {
  border-bottom: 1px solid var(--line-soft);
}

.housing-swap-review {
  display: grid;
  gap: 14px;
  margin: 18px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
}

.housing-swap-review.hidden {
  display: none;
}

.housing-swap-question {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 750;
  line-height: 1.4;
}

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

.housing-swap-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.housing-swap-card h3,
.housing-swap-card p {
  margin: 0;
}

.housing-swap-card h3 {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.housing-swap-card strong {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.housing-swap-card p {
  display: grid;
  gap: 4px;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.housing-swap-card p span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.housing-house-list {
  border-bottom: 1px solid var(--line-soft);
}

.document-item.housing-house-item {
  grid-template-columns: minmax(180px, 0.7fr) minmax(420px, 1.45fr) minmax(260px, auto);
  grid-template-areas:
    "summary metrics actions"
    "message message message";
  align-items: center;
  gap: 14px 18px;
  min-height: 0;
  padding: 16px 18px;
}

.housing-house-summary,
.housing-house-metrics,
.housing-house-actions,
.housing-record-item > div:first-child {
  min-width: 0;
}

.housing-house-summary {
  grid-area: summary;
  display: grid;
  gap: 7px;
  align-content: center;
}

.housing-house-summary h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.housing-house-summary p {
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.housing-house-status {
  justify-self: start;
  max-width: 100%;
  white-space: nowrap;
}

.housing-house-metrics {
  grid-area: metrics;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.housing-house-metric {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 56px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.housing-house-metric span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.housing-house-metric strong {
  color: var(--ink-strong);
  font-size: 0.92rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.housing-house-occupancy {
  min-width: min(100%, 132px);
}

.housing-house-occupancy .housing-capacity-bar {
  margin-top: 2px;
}

.housing-house-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
  align-items: stretch;
  justify-self: end;
  width: min(100%, 260px);
}

.housing-house-action-button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  white-space: normal;
  text-align: center;
}

.housing-house-export-button {
  min-height: 38px;
}

.housing-house-export-message {
  grid-area: message;
  margin: -2px 0 0;
  min-height: 18px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .document-item.housing-house-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "metrics"
      "actions"
      "message";
    align-items: stretch;
  }

  .housing-house-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .housing-house-actions {
    justify-self: stretch;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dashboard.housing-page {
    width: min(100% - 24px, 640px);
  }

  .housing-house-list {
    padding: 10px;
  }

  .document-item.housing-house-item {
    padding: 15px;
  }

  .housing-house-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .housing-house-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .dashboard.housing-page {
    width: min(100% - 20px, 640px);
  }

  .housing-house-list {
    padding: 9px;
  }

  .housing-house-actions {
    grid-template-columns: 1fr;
  }
}

.housing-detail-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.housing-detail-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.document-item.housing-house-item.selected {
  background: rgba(6, 111, 209, 0.14);
}

.housing-record-item {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 18px;
}

.housing-record-item .warehouse-actions {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.housing-record-item .warehouse-actions .missing-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

.housing-record-item .warehouse-actions .secondary-button,
.housing-record-item .warehouse-actions .danger-button {
  min-width: 78px;
  white-space: nowrap;
}

.housing-resident-section {
  display: grid;
  gap: 10px;
}

.housing-resident-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.housing-finance-section {
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.26);
  padding: 14px;
}

.housing-detail-actions,
.housing-action-list .warehouse-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.housing-reminder-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.housing-reminder-controls span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.housing-reminder-controls p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.housing-reminder-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.housing-reminder-actions .primary-button,
.housing-reminder-actions .secondary-button {
  width: auto;
  min-width: 118px;
  margin-top: 0;
  white-space: nowrap;
}

.housing-reminder-actions .primary-button {
  min-width: 136px;
}

.housing-reminder-list {
  padding-bottom: 18px;
}

.housing-reminder-item {
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: stretch;
}

.housing-reminder-item > div:first-child {
  min-width: 0;
}

.housing-reminder-select {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.housing-reminder-select label {
  width: 100%;
  min-width: 118px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  color: var(--ink);
  font-weight: 800;
}

.housing-reminder-select input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.housing-detail-actions .secondary-button,
.housing-detail-actions .danger-button {
  width: auto;
  min-width: 160px;
}

.housing-external-editor {
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.26);
  padding: 14px;
}

.housing-external-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 220px);
  align-items: end;
  gap: 12px;
}

.housing-external-form label {
  min-width: 0;
  margin-top: 0;
}

.housing-external-form .form-message {
  grid-column: 1 / -1;
  margin-top: 0;
}

.housing-external-item {
  border-left: 3px solid rgba(147, 197, 253, 0.5);
}

.housing-checkbox-field {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.housing-checkbox-field input,
.housing-choice-field input {
  width: auto;
  height: auto;
}

.housing-choice-field {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
}

.housing-choice-field legend {
  padding: 0 6px;
  color: var(--ink-strong);
  font-weight: 760;
}

.housing-choice-field label {
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.driver-housing-page {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.driver-housing-form {
  display: block;
}

.driver-housing-form .submission-fields {
  padding-top: 0;
}

.driver-housing-choice-field {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: inset 0 1px var(--line-soft), inset 0 -1px var(--line-soft);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.housing-choice-question {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.35;
}

.housing-choice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.driver-housing-choice-field label {
  min-width: 0;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-deep);
  padding: 0 14px;
}

.driver-housing-choice-field label:has(input:checked) {
  border-color: rgba(59, 130, 246, 0.9);
  background: rgba(6, 111, 209, 0.18);
  color: var(--ink-strong);
}

.driver-housing-choice-field input {
  flex: 0 0 auto;
  accent-color: var(--blue-hover);
}

.driver-housing-form-note {
  margin: 0;
  padding: 16px 18px 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.45;
}

.driver-housing-notice {
  position: fixed;
  left: 50%;
  top: calc(18px + env(safe-area-inset-top));
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 160ms ease, transform 160ms ease;
  padding: 14px 16px;
}

.driver-housing-notice.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.driver-housing-notice p {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.94rem;
  font-weight: 720;
  line-height: 1.35;
}

.driver-housing-notice button {
  min-width: 58px;
  min-height: 38px;
  border: 1px solid rgba(34, 197, 94, 0.48);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.targets-page {
  width: min(1280px, calc(100vw - 32px));
}

.targets-summary strong {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.targets-review-queue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 18px;
  border: 1px solid rgba(251, 191, 36, 0.46);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.26), rgba(15, 23, 42, 0.5));
  padding: 14px;
}

.targets-review-queue.is-clear {
  border-color: rgba(34, 197, 94, 0.42);
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.24), rgba(15, 23, 42, 0.5));
}

.targets-review-queue-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
  font-size: 1.15rem;
  font-weight: 950;
}

.targets-review-queue.is-clear .targets-review-queue-icon {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 0;
}

.targets-review-queue.is-clear .targets-review-queue-icon::before {
  content: "✓";
  font-size: 1.05rem;
}

.targets-review-queue strong,
.targets-review-queue span {
  display: block;
}

.targets-review-queue strong {
  color: var(--ink-strong);
  font-size: 0.98rem;
  line-height: 1.35;
}

.targets-review-queue span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.targets-review-queue .primary-button {
  min-height: 46px;
  margin: 0;
  white-space: nowrap;
}

.targets-export-actions {
  align-items: center;
}

.targets-month-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.targets-month-card {
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--ink);
  padding: 16px;
  text-align: left;
  cursor: pointer;
}

.targets-month-card:hover,
.targets-month-card.active {
  border-color: rgba(147, 197, 253, 0.58);
  background: rgba(30, 64, 175, 0.2);
}

.targets-month-card.current {
  border-left: 4px solid rgba(34, 197, 94, 0.88);
}

.targets-month-card.archived {
  border-left: 4px solid rgba(251, 191, 36, 0.86);
}

.targets-month-card strong,
.targets-month-card span,
.targets-month-card small {
  display: block;
}

.targets-month-card strong {
  color: var(--ink-strong);
  font-size: 1.08rem;
  line-height: 1.2;
}

.targets-month-card span {
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.targets-month-card.archived span {
  color: #fcd34d;
}

.targets-month-card small {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.35;
}

.targets-control-grid {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(220px, 1fr) minmax(170px, 220px) minmax(220px, auto);
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px;
}

.targets-control-grid label,
.targets-edit-form label {
  min-width: 0;
  margin-top: 0;
}

.targets-month-select {
  height: 52px;
  min-height: 52px;
  background-position: calc(100% - 18px) 23px, calc(100% - 13px) 23px;
  text-align: center;
  text-align-last: center;
}

.targets-filter-buttons,
.targets-bulk-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.targets-filter-buttons .secondary-button {
  width: 100%;
  min-height: 52px;
}

.targets-filter-panel {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(15, 23, 42, 0.3);
  padding: 18px;
}

.targets-filter-heading,
.targets-bulk-toolbar,
.targets-bulk-review-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.targets-filter-heading strong,
.targets-filter-heading span,
.targets-bulk-toolbar strong,
.targets-bulk-toolbar span,
.targets-bulk-review-summary strong,
.targets-bulk-review-summary span {
  display: block;
}

.targets-filter-heading span,
.targets-bulk-toolbar span,
.targets-bulk-review-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.targets-filter-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.targets-filter-group {
  min-width: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
  padding: 10px;
}

.targets-filter-group legend {
  padding: 0 5px;
  color: #bfdbfe;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.targets-filter-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  cursor: pointer;
}

.targets-filter-group input,
.targets-driver-select input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #3b82f6;
}

.targets-filter-unavailable {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.targets-active-filter-bar {
  min-height: 0;
  padding: 0 18px;
}

.targets-active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.targets-active-filter-chips:not(:empty) {
  padding: 12px 0;
}

.targets-filter-chip {
  border: 1px solid rgba(96, 165, 250, 0.48);
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.2);
  color: #dbeafe;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 780;
  cursor: pointer;
}

.targets-bulk-toolbar {
  margin: 0 18px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 8px;
  background: rgba(30, 64, 175, 0.14);
  padding: 12px;
}

.targets-bulk-toolbar-actions {
  grid-template-columns: repeat(3, minmax(120px, auto));
}

.targets-driver-select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  color: #bfdbfe;
  font-size: 0.76rem;
  font-weight: 800;
}

.targets-driver-select:has(input:disabled) {
  color: var(--muted);
}

.targets-driver-item.is-selected {
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 12px 28px rgba(0, 0, 0, 0.12);
}

.targets-bulk-form,
.targets-bulk-confirm-form {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) minmax(240px, auto);
  align-items: end;
  gap: 14px;
  padding: 18px;
}

.targets-bulk-form label,
.targets-bulk-confirm-form label {
  min-width: 0;
  margin-top: 0;
}

.targets-bulk-review {
  padding: 18px;
}

.targets-bulk-review-list {
  display: grid;
  gap: 8px;
  max-height: min(50vh, 520px);
  margin-top: 14px;
  overflow: auto;
}

.targets-bulk-review-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(260px, auto);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px;
}

.targets-bulk-review-row strong,
.targets-bulk-review-row span {
  display: block;
}

.targets-bulk-review-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.targets-bulk-review-change {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.targets-bulk-review-change strong {
  color: #86efac;
}

.monitoring-page {
  width: min(1280px, calc(100vw - 32px));
}

.monitoring-page .warehouse-category-panel > .section-heading.compact {
  align-items: flex-start;
  gap: 18px;
}

.monitoring-page .monitoring-export-actions {
  flex: 0 0 auto;
}

.monitoring-upload-form {
  --monitoring-upload-control-height: 52px;
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(150px, 210px) minmax(260px, 1fr) minmax(180px, 220px);
  align-items: end;
  gap: 14px;
  padding: 18px;
}

.monitoring-upload-form label,
.monitoring-control-grid label {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
}

.monitoring-upload-form input,
.monitoring-upload-form select,
.monitoring-upload-form button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--monitoring-upload-control-height);
  min-height: var(--monitoring-upload-control-height);
}

.monitoring-upload-form select {
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  text-align: center;
  text-align-last: center;
}

.monitoring-upload-form input[type="date"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  line-height: var(--monitoring-upload-control-height);
  padding: 0 44px 0 16px;
}

.monitoring-upload-form input[type="date"]::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--monitoring-upload-control-height);
  min-height: var(--monitoring-upload-control-height);
  margin: 0;
  text-align: left;
  line-height: var(--monitoring-upload-control-height);
}

.monitoring-upload-form input[type="date"]::-webkit-datetime-edit,
.monitoring-upload-form input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--monitoring-upload-control-height);
  min-height: var(--monitoring-upload-control-height);
  padding: 0;
  line-height: var(--monitoring-upload-control-height);
}

.monitoring-upload-form input[type="date"]::-webkit-datetime-edit-text,
.monitoring-upload-form input[type="date"]::-webkit-datetime-edit-month-field,
.monitoring-upload-form input[type="date"]::-webkit-datetime-edit-day-field,
.monitoring-upload-form input[type="date"]::-webkit-datetime-edit-year-field {
  line-height: var(--monitoring-upload-control-height);
}

.monitoring-upload-form input[type="date"]::-webkit-calendar-picker-indicator {
  width: 24px;
  height: 24px;
  margin: 0;
}

.monitoring-upload-form input[type="file"] {
  padding: 10px 12px;
  line-height: 1.2;
}

.monitoring-upload-form input[type="file"]::file-selector-button {
  min-height: 30px;
  margin: 0 12px 0 0;
}

.monitoring-upload-form input[type="file"]::-webkit-file-upload-button {
  min-height: 30px;
  margin: 0 12px 0 0;
}

.monitoring-summary strong {
  font-size: clamp(1.38rem, 2.7vw, 1.95rem);
}

.monitoring-totals-note {
  margin: 0 18px 18px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 10px;
  background: rgba(120, 53, 15, 0.16);
  color: #fde68a;
  font-size: 0.86rem;
  line-height: 1.45;
}

.monitoring-good strong,
.monitoring-positive {
  color: #86efac;
}

.monitoring-watch strong {
  color: #fbbf24;
}

.monitoring-bad strong,
.monitoring-negative {
  color: #fca5a5;
}

.monitoring-trend-heading {
  align-items: center;
}

.monitoring-trend-matrix {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.monitoring-trend-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.26);
  padding: 12px;
}

.monitoring-trend-row-label {
  display: grid;
  align-content: center;
  gap: 6px;
  border-left: 4px solid rgba(59, 130, 246, 0.64);
  padding: 12px 14px;
}

.monitoring-trend-row-label strong {
  color: var(--ink-strong);
  font-size: 1rem;
}

.monitoring-trend-row-label span {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 750;
  line-height: 1.3;
}

.trend-row-watch .monitoring-trend-row-label {
  border-left-color: rgba(251, 191, 36, 0.74);
}

.trend-row-behind .monitoring-trend-row-label {
  border-left-color: rgba(248, 113, 113, 0.78);
}

.monitoring-trend-row-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.monitoring-trend-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 124px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--ink);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.monitoring-trend-card:hover,
.monitoring-trend-card:focus-visible,
.monitoring-trend-card.is-active {
  border-color: rgba(147, 197, 253, 0.68);
  background: rgba(30, 41, 59, 0.76);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.22);
}

.monitoring-trend-card:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.monitoring-trend-card span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.monitoring-trend-card strong {
  color: var(--ink-strong);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1;
}

.monitoring-trend-card small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.monitoring-trend-card.is-on-track {
  border-color: rgba(96, 165, 250, 0.42);
}

.monitoring-trend-card.is-watch {
  border-color: rgba(251, 191, 36, 0.42);
}

.monitoring-trend-card.is-behind {
  border-color: rgba(248, 113, 113, 0.5);
}

.monitoring-trend-card.is-worse strong {
  color: #fdba74;
}

.monitoring-trend-card.is-behind.is-worse strong {
  color: #fca5a5;
}

.monitoring-trend-card.is-improving strong {
  color: #86efac;
}

.monitoring-control-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 260px) minmax(190px, 260px);
}

.monitoring-driver-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.monitoring-driver-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  overflow: hidden;
}

.monitoring-driver-item.monitoring-on_track {
  border-color: rgba(34, 197, 94, 0.48);
}

.monitoring-driver-item.monitoring-watch {
  border-color: rgba(251, 191, 36, 0.48);
}

.monitoring-driver-item.monitoring-behind {
  border-color: rgba(248, 113, 113, 0.58);
}

.monitoring-driver-item.monitoring-review {
  border-color: rgba(251, 191, 36, 0.58);
}

.monitoring-target-review-note {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(120, 53, 15, 0.16);
  padding: 12px 18px;
}

.monitoring-target-review-note strong {
  color: #fcd34d;
  font-size: 0.82rem;
}

.monitoring-target-review-note span {
  color: #fde68a;
  font-size: 0.8rem;
  line-height: 1.45;
}

.monitoring-driver-item.monitoring-critical-worse {
  box-shadow: inset 4px 0 0 rgba(248, 113, 113, 0.8);
}

.monitoring-driver-item.monitoring-trend-worse {
  box-shadow: inset 4px 0 0 rgba(251, 146, 60, 0.78);
}

.monitoring-driver-item.monitoring-trend-improving {
  box-shadow: inset 4px 0 0 rgba(34, 197, 94, 0.72);
}

.monitoring-driver-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.monitoring-rank {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 42px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
  font-weight: 900;
}

.monitoring-driver-summary h3,
.monitoring-driver-summary p {
  margin: 0;
}

.monitoring-driver-summary h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.25;
}

.monitoring-driver-summary p {
  margin-top: 4px;
  color: var(--muted);
}

.monitoring-driver-summary .monitoring-work-account-audit {
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 760;
}

.monitoring-driver-item.monitoring-on_track .status-pill {
  border-color: rgba(34, 197, 94, 0.52);
  color: #86efac;
}

.monitoring-driver-item.monitoring-watch .status-pill {
  border-color: rgba(251, 191, 36, 0.52);
  color: #fcd34d;
}

.monitoring-driver-item.monitoring-behind .status-pill {
  border-color: rgba(248, 113, 113, 0.6);
  color: #fca5a5;
}

.monitoring-notes-button {
  min-height: 40px;
  min-width: 92px;
  padding-inline: 16px;
}

.monitoring-notes-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(10px);
}

.monitoring-notes-overlay.hidden {
  display: none;
}

.monitoring-notes-modal {
  width: min(720px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.46);
}

.monitoring-notes-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.monitoring-notes-form label {
  display: grid;
  gap: 8px;
  margin: 0;
}

.monitoring-notes-form textarea {
  min-height: 128px;
  resize: vertical;
}

.monitoring-notes-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.monitoring-note-item {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  padding: 14px;
}

.monitoring-note-meta {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.monitoring-note-text {
  margin: 0;
  color: var(--ink-strong);
  line-height: 1.45;
  white-space: pre-wrap;
}

.monitoring-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 18px;
}

.driver-target-progress {
  width: min(100%, 430px);
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 12px;
}

.driver-target-progress[hidden] {
  display: none;
}

.driver-target-progress strong,
.driver-target-progress span {
  display: block;
  text-align: center;
}

.driver-target-progress strong {
  color: var(--ink-strong);
  font-size: 0.98rem;
}

.driver-target-progress span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}

.driver-target-progress .driver-target-rank {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
  padding: 5px 12px;
  font-weight: 900;
}

.driver-target-progress.is-on-track {
  border-color: rgba(34, 197, 94, 0.48);
  background: rgba(5, 46, 22, 0.24);
}

.driver-target-progress.is-watch {
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(113, 63, 18, 0.22);
}

.driver-target-progress.is-behind {
  border-color: rgba(248, 113, 113, 0.52);
  background: rgba(127, 29, 29, 0.22);
}

.driver-target-progress.is-unavailable {
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(113, 63, 18, 0.2);
}

.driver-target-progress.is-on-track strong {
  color: #86efac;
}

.driver-target-progress.is-watch strong {
  color: #fcd34d;
}

.driver-target-progress.is-behind strong {
  color: #fca5a5;
}

.driver-target-progress.is-unavailable strong {
  color: #fcd34d;
}

@media (max-width: 860px) {
  .monitoring-page {
    width: min(100% - 24px, 640px);
    gap: 24px;
  }

  .monitoring-page .dashboard-header {
    gap: 14px;
  }

  .monitoring-page .dashboard-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 12px;
  }

  .monitoring-page .dashboard-title h1 {
    flex: 0 1 auto;
    padding-right: 0;
    font-size: clamp(1.28rem, 6vw, 1.7rem);
    text-align: left;
  }

  .monitoring-page .warehouse-back-button {
    min-height: 54px;
  }

  .monitoring-page .warehouse-category-panel > .section-heading.compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 24px;
  }

  .monitoring-upload-form,
  .monitoring-control-grid,
  .monitoring-metrics-grid,
  .monitoring-trend-row,
  .monitoring-trend-row-cards {
    grid-template-columns: 1fr;
  }

  .monitoring-trend-matrix {
    padding: 20px 24px 24px;
  }

  .monitoring-trend-row {
    gap: 10px;
    padding: 10px;
  }

  .monitoring-trend-row-label {
    padding: 10px 12px;
  }

  .monitoring-trend-card {
    min-height: 108px;
  }

  .monitoring-upload-form {
    --monitoring-upload-control-height: 58px;
    gap: 16px;
    padding: 20px 24px 24px;
  }

  .monitoring-upload-form label {
    display: grid;
    gap: 8px;
  }

  .monitoring-upload-form input,
  .monitoring-upload-form select,
  .monitoring-upload-form button,
  .monitoring-page .monitoring-export-actions .secondary-button,
  .monitoring-page .monitoring-export-actions .compact-button,
  .monitoring-page .monitoring-export-actions .download-button {
    min-height: 58px;
    font-size: 0.98rem;
  }

  .monitoring-upload-form input[type="file"] {
    padding: 13px 14px;
  }

  .monitoring-upload-form input[type="date"] {
    height: var(--monitoring-upload-control-height);
    padding: 0 44px 0 16px;
  }

  .monitoring-upload-form input[type="date"]::-webkit-date-and-time-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--monitoring-upload-control-height);
    line-height: var(--monitoring-upload-control-height);
  }

  .monitoring-upload-form input[type="file"]::file-selector-button,
  .monitoring-upload-form input[type="file"]::-webkit-file-upload-button {
    min-height: 34px;
    margin-right: 12px;
  }

  .monitoring-upload-form .primary-button {
    margin-top: 4px;
  }

  .monitoring-driver-summary {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .monitoring-driver-summary .status-pill,
  .monitoring-notes-button {
    width: 100%;
    justify-content: center;
  }

  .monitoring-notes-overlay {
    align-items: end;
    padding: 12px;
  }

  .monitoring-notes-modal {
    width: 100%;
    max-height: 92vh;
  }

  .monitoring-notes-form,
  .monitoring-notes-list {
    padding: 20px 24px;
  }

  .monitoring-page .monitoring-export-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .monitoring-page .monitoring-export-actions .secondary-button,
  .monitoring-page .monitoring-export-actions .compact-button,
  .monitoring-page .monitoring-export-actions .download-button {
    flex: initial;
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .monitoring-page .monitoring-export-actions {
    grid-template-columns: 1fr;
  }
}

.targets-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.targets-rule-card {
  min-height: 138px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
}

.targets-rule-card h3,
.targets-rule-card p {
  margin: 0;
}

.targets-rule-card h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.25;
}

.targets-rule-card strong {
  color: #93c5fd;
  font-size: 1.08rem;
}

.targets-rule-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.charges-page .targets-rules-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.charges-page .targets-edit-form {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(240px, auto);
}

.targets-driver-list,
.targets-audit-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.targets-driver-item {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(112px, auto);
  grid-template-areas: "summary metrics actions";
  align-items: stretch;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 4px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.targets-driver-main {
  grid-area: summary;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.targets-driver-main h3,
.targets-driver-main p {
  margin: 0;
}

.targets-driver-main h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.targets-driver-main p {
  color: var(--muted);
  font-size: 0.9rem;
}

.targets-target-badge {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: var(--ink-strong);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding: 8px 12px;
  text-transform: uppercase;
}

.targets-target-fixed,
.targets-target-fixed-override {
  border-left-color: rgba(34, 197, 94, 0.88);
}

.targets-target-fixed .targets-target-badge,
.targets-target-fixed-override .targets-target-badge {
  border-color: rgba(34, 197, 94, 0.48);
  color: #86efac;
}

.targets-target-share,
.targets-target-share-override {
  border-left-color: rgba(249, 115, 22, 0.86);
}

.targets-target-share .targets-target-badge,
.targets-target-share-override .targets-target-badge {
  border-color: rgba(249, 115, 22, 0.48);
  color: #fdba74;
}

.targets-target-review,
.targets-target-review-override {
  border-left-color: rgba(239, 68, 68, 0.82);
}

.targets-target-review .targets-target-badge,
.targets-target-review-override .targets-target-badge {
  border-color: rgba(239, 68, 68, 0.48);
  color: #fca5a5;
}

.targets-target-none,
.targets-target-none-override {
  border-left-color: rgba(96, 165, 250, 0.62);
}

.targets-target-none .targets-target-badge,
.targets-target-none-override .targets-target-badge {
  border-color: rgba(96, 165, 250, 0.42);
  color: #bfdbfe;
}

.targets-review-reason {
  color: #fde68a !important;
  font-size: 0.8rem !important;
  line-height: 1.45;
}

.targets-driver-item.has-override {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(31, 41, 55, 0.96));
}

.targets-driver-metrics {
  grid-area: metrics;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.targets-driver-metrics .profile-row {
  min-width: 0;
}

.targets-driver-actions {
  grid-area: actions;
  align-content: center;
  align-items: center;
  display: grid;
  gap: 10px;
  justify-items: end;
}

.targets-driver-actions .secondary-button {
  width: auto;
  min-width: 112px;
}

.targets-override-note {
  max-width: 220px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.targets-edit-panel {
  scroll-margin-top: 18px;
}

.targets-edit-form {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(160px, 220px) minmax(0, 1fr) minmax(220px, auto);
  align-items: end;
  gap: 14px;
  padding: 18px;
}

.driver-information-page {
  width: min(1280px, calc(100vw - 32px));
}

.onboarding-summary.driver-information-summary {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.driver-information-summary .driver-information-summary-card {
  min-height: 88px;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.34);
  color: inherit;
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 8px;
  font: inherit;
  padding: 18px;
  text-align: left;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.driver-information-summary .driver-information-summary-card:hover,
.driver-information-summary .driver-information-summary-card:focus-visible {
  background: rgba(6, 111, 209, 0.16);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.32);
}

.driver-information-summary .driver-information-summary-card:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.72);
  outline-offset: -2px;
}

.driver-information-summary .driver-information-summary-card.active {
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.28), rgba(15, 23, 42, 0.44));
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.48);
}

.driver-information-summary .driver-information-summary-card.active strong {
  color: #93c5fd;
}

.driver-information-summary-legend {
  margin: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-soft);
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.55;
}

.driver-information-summary-legend strong {
  color: #f8fafc;
}

.driver-information-export-reason {
  margin: 0;
  padding: 0 18px 14px;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.45;
}

.driver-information-export-reason.is-blocked {
  color: #fbbf24;
}

.driver-information-page .warehouse-export-actions .is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.driver-information-filter-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 230px) minmax(180px, 220px);
  align-items: end;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.driver-information-filter-grid label,
.driver-information-form-grid label,
.driver-information-driver-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.driver-information-field-hint {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 620;
  line-height: 1.4;
}

.driver-information-arc-field.arc-ready .driver-information-field-hint {
  color: #86efac;
}

.driver-information-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.driver-information-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.driver-information-pagination-top {
  padding: 14px 18px 0;
}

.driver-information-pagination.hidden {
  display: none;
}

.driver-information-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(150px, 170px);
  grid-template-areas: "summary details actions";
  align-items: stretch;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 4px solid rgba(239, 68, 68, 0.82);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.driver-information-card.compact-view {
  min-height: 0;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 340px);
  grid-template-areas: "summary actions";
  align-items: center;
}

.driver-information-card.compact-view .driver-information-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-information-card.complete {
  border-left-color: rgba(34, 197, 94, 0.88);
}

.driver-information-card.inactive {
  border-left-color: rgba(148, 163, 184, 0.72);
  background: rgba(15, 23, 42, 0.28);
}

.driver-information-card.pink-expiring {
  border-top-color: rgba(251, 191, 36, 0.46);
}

.driver-information-pending-panel {
  border-color: rgba(251, 191, 36, 0.28);
}

.driver-information-pending-card {
  border-left-color: rgba(251, 191, 36, 0.9);
  background: rgba(30, 41, 59, 0.44);
}

.driver-information-document-links {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.driver-information-document-links a,
.driver-information-document-links span {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.driver-information-document-links a {
  color: #93c5fd;
  text-decoration: none;
}

.driver-information-document-links a:hover {
  color: #bfdbfe;
}

.driver-information-card.empty {
  grid-template-columns: 1fr;
  grid-template-areas: "summary";
}

.driver-information-main {
  grid-area: summary;
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
}

.driver-information-main h3,
.driver-information-main p {
  margin: 0;
}

.driver-information-main h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.driver-information-quick-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.driver-information-quick-facts > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.42);
}

.driver-information-quick-facts small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.driver-information-quick-facts strong {
  color: var(--ink-strong);
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.driver-information-main p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.driver-information-details {
  grid-area: details;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.driver-information-details .profile-row {
  min-height: 72px;
  min-width: 0;
  padding: 12px 14px;
}

.driver-information-details .profile-row span {
  font-size: 0.68rem;
}

.driver-information-details .profile-row strong {
  font-size: 0.94rem;
  line-height: 1.25;
}

.driver-information-actions {
  grid-area: actions;
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: stretch;
  min-width: 0;
}

.driver-information-actions .secondary-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding-inline: 12px;
  white-space: normal;
  line-height: 1.2;
}

.missing-badge {
  width: fit-content;
  border: 1px solid rgba(248, 113, 113, 0.52);
  border-radius: 999px;
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  padding: 7px 11px;
  text-transform: uppercase;
}

.missing-badge.ok-badge {
  border-color: rgba(34, 197, 94, 0.52);
  color: #86efac;
}

.missing-badge.city-missing-badge {
  border-color: rgba(251, 191, 36, 0.58);
  color: #fde68a;
}

.missing-badge.inactive-badge {
  border-color: rgba(148, 163, 184, 0.58);
  color: #cbd5e1;
}

.missing-badge.mechanic-badge {
  border-color: rgba(56, 189, 248, 0.58);
  color: #bae6fd;
}

.driver-information-edit-panel {
  scroll-margin-top: 18px;
}

.driver-information-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: 18px;
}

.driver-information-checkbox-field {
  min-height: 52px;
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.32);
  color: var(--ink) !important;
  padding: 12px 14px;
}

.driver-information-checkbox-field input {
  width: auto;
}

.driver-information-wide-field,
.driver-information-form-actions {
  grid-column: 1 / -1;
}

.driver-information-wide-field textarea {
  min-height: 118px;
}

.driver-information-form-actions {
  display: flex;
  justify-content: flex-end;
}

.driver-information-form-actions .primary-button {
  min-width: 220px;
}

.driver-information-visa-modal {
  z-index: 80;
  width: auto;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(3px);
}

.driver-information-visa-dialog {
  width: min(100%, 460px);
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.driver-information-visa-dialog .confirmation-hero {
  display: grid;
  gap: 12px;
  padding: 28px 26px 24px;
  border-bottom: 1px solid rgba(147, 197, 253, 0.24);
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.32), rgba(23, 32, 51, 0.98));
  text-align: center;
}

.driver-information-visa-dialog .confirmation-hero span {
  color: #bfdbfe;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.driver-information-visa-dialog .confirmation-hero h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.45rem;
  line-height: 1.18;
}

.driver-information-visa-dialog .confirmation-hero p {
  width: min(100%, 340px);
  margin: 0 auto;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.5;
}

.driver-information-visa-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
}

.driver-information-visa-actions button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  justify-content: center;
  white-space: nowrap;
}

.driver-information-driver-page .company-dashboard-panel {
  width: min(100%, 760px);
  margin: 0 auto;
}

.driver-information-current-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
  margin-bottom: 18px;
}

.driver-information-current-panel > div {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 9px;
  background: rgba(15, 23, 42, 0.48);
  padding: 16px;
}

.driver-information-current-panel span,
.driver-information-choice-field legend {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.driver-information-current-panel strong {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.driver-information-current-panel .status-complete {
  color: #86efac;
}

.driver-information-driver-form {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 18px;
  box-shadow: var(--shadow);
}

.driver-information-choice-field {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  padding: 15px;
}

.driver-information-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.driver-information-choice-grid label {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.28);
  color: var(--ink);
  padding: 12px 14px;
}

.driver-information-choice-grid input {
  width: auto;
}

.driver-information-driver-checkbox {
  min-height: 58px;
}

.tasks-page {
  width: min(1280px, calc(100vw - 32px));
}

.tasks-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tasks-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px;
}

.tasks-view-switch .secondary-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding-inline: 18px;
}

.tasks-view-switch .secondary-button.active {
  border-color: rgba(96, 165, 250, 0.68);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.34), rgba(37, 99, 235, 0.22));
  color: var(--ink-strong);
}

.salary-issue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 270px;
}

.salary-issue-actions .secondary-button {
  min-height: 40px;
}

.salary-issue-whatsapp {
  min-width: 176px;
  padding-inline: 16px;
  white-space: nowrap;
}

.salary-issue-whatsapp-disabled {
  cursor: not-allowed;
  min-width: 176px;
  opacity: 0.62;
  padding-inline: 16px;
  pointer-events: none;
  white-space: nowrap;
}

.salary-issue-actions .compact-button:not(.salary-issue-whatsapp):not(.salary-issue-whatsapp-disabled) {
  min-width: 82px;
}

.salary-issue-comments-action {
  min-width: 128px;
}

.bonus-actions {
  align-items: center;
  gap: 10px;
}

.bonus-card {
  border-left: 4px solid rgba(96, 165, 250, 0.55);
}

.bonus-card-paid {
  border-left-color: rgba(34, 197, 94, 0.78);
}

.bonus-card-cancelled {
  border-left-color: rgba(248, 113, 113, 0.78);
}

.bonus-page .status-pill {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bonus-status-pending {
  border-color: rgba(251, 191, 36, 0.64);
  color: #fbbf24;
}

.bonus-status-paid {
  border-color: rgba(34, 197, 94, 0.64);
  color: #86efac;
}

.bonus-status-cancelled {
  border-color: rgba(248, 113, 113, 0.64);
  color: #fca5a5;
}

.bonus-edit-fields {
  display: grid;
  gap: 16px;
}

.bonus-page .confirmation-modal {
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);
  overscroll-behavior: contain;
}

.bonus-page .confirmation-card {
  width: min(100%, 620px);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.bonus-page .confirmation-card label {
  margin: 16px 18px 0;
  min-width: 0;
}

.bonus-page .confirmation-card input,
.bonus-page .confirmation-card select,
.bonus-page .confirmation-card textarea {
  box-sizing: border-box;
}

.bonus-page .confirmation-card textarea {
  min-height: 104px;
  resize: vertical;
}

.bonus-page #bonusCreateSmsText,
.bonus-page #bonusDetailSmsText,
.bonus-page #bonusPaidSmsText {
  min-height: 132px;
}

.bonus-page #bonusPaidSmsText,
.bonus-page #bonusPaidNote {
  margin-bottom: 4px;
}

.bonus-page .confirmation-card .button-row {
  gap: 12px;
  margin-top: 22px;
}

.bonus-page .confirmation-card .primary-button,
.bonus-page .confirmation-card .secondary-button,
.bonus-page .confirmation-card .danger-button {
  min-height: 48px;
  padding: 0 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.bonus-detail-actions {
  align-items: stretch;
  grid-template-columns: minmax(92px, 0.75fr) minmax(126px, 1fr) minmax(132px, 1fr) minmax(124px, 1fr);
}

.bonus-detail-actions #bonusPaidOpen {
  min-width: 132px;
}

@media (max-width: 640px) {
  .salary-issue-actions {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .salary-issue-actions .secondary-button {
    width: 100%;
    flex: 1 1 100%;
  }

  .bonus-page .confirmation-modal {
    align-items: flex-start;
    padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);
  }

  .bonus-page .confirmation-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .bonus-page .confirmation-card label {
    margin-right: 14px;
    margin-left: 14px;
  }

  .bonus-page .confirmation-card .button-row {
    display: grid;
    grid-template-columns: 1fr;
    margin-right: 14px;
    margin-left: 14px;
  }

  .bonus-actions,
  .bonus-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .bonus-actions .secondary-button,
  .bonus-actions .primary-button,
  .bonus-detail-actions .secondary-button,
  .bonus-detail-actions .primary-button,
  .bonus-detail-actions .danger-button {
    width: 100%;
  }
}

.tasks-control-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 190px) minmax(130px, 170px);
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px;
}

.tasks-control-grid label {
  min-width: 0;
  margin-top: 0;
}

.tasks-list {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.task-card {
  display: grid;
  gap: 16px;
  width: 100%;
  min-height: 138px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 4px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  color: inherit;
  cursor: pointer;
  padding: 18px;
  text-align: left;
}

.task-card-open {
  display: grid;
  gap: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.task-card:hover {
  border-color: rgba(147, 197, 253, 0.42);
  background: rgba(30, 41, 59, 0.58);
}

.task-card.priority-high {
  border-left-color: rgba(248, 113, 113, 0.95);
}

.task-card.status-completed {
  border-color: rgba(34, 197, 94, 0.28);
  border-left-color: rgba(34, 197, 94, 0.92);
  background: linear-gradient(135deg, rgba(5, 46, 22, 0.2), rgba(15, 23, 42, 0.42));
}

.task-card.status-rejected {
  border-left-color: rgba(248, 113, 113, 0.86);
  background: linear-gradient(135deg, rgba(69, 10, 10, 0.16), rgba(15, 23, 42, 0.4));
}

.task-card.status-completed .task-card-badges em {
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}

.task-card.status-rejected .task-card-badges em {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.task-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.task-card-main span,
.task-card-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.task-card-main h3,
.task-card-main p {
  margin: 0;
}

.task-card-main h3 {
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 1.02rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.task-card-main p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.42;
}

.task-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.task-card-badges strong,
.task-card-badges em {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.48);
  color: var(--ink-strong);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  padding: 7px 11px;
}

.task-card.priority-high .task-card-badges strong {
  border-color: rgba(248, 113, 113, 0.58);
  color: #fecaca;
}

.task-card-grid,
.tasks-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.task-card-grid > div,
.tasks-detail-grid .profile-row {
  min-width: 0;
  min-height: 66px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.55);
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 11px 12px;
}

.task-card-grid strong,
.tasks-detail-grid strong {
  color: var(--ink-strong);
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.tasks-detail-panel {
  scroll-margin-top: 18px;
}

.tasks-detail-panel.task-detail-resolved {
  border-color: rgba(34, 197, 94, 0.24);
}

.tasks-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px;
}

.tasks-detail-grid .profile-row:nth-last-child(-n + 2) {
  grid-column: span 3;
  min-height: 92px;
  align-content: start;
}

.driver-target-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 760px);
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(6, 111, 209, 0.18), rgba(15, 23, 42, 0.46));
  color: var(--ink);
  margin: 0 auto 18px;
  overflow: hidden;
  text-decoration: none;
}

.driver-target-home-card {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.driver-target-home-card:hover {
  border-color: rgba(147, 197, 253, 0.52);
}

.driver-target-card.driver-target-pending {
  border-color: rgba(251, 191, 36, 0.74);
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.28), rgba(15, 23, 42, 0.62));
}

.driver-target-card.driver-target-approved {
  border-color: rgba(34, 197, 94, 0.7);
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.28), rgba(15, 23, 42, 0.62));
}

.driver-target-detail-card {
  margin-bottom: 18px;
}

.driver-target-main {
  min-height: 228px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px 18px;
  text-align: center;
}

.driver-target-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-target-card h2,
.driver-target-card p {
  margin: 0;
}

.driver-target-card h2 {
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 1.2rem;
  line-height: 1.24;
}

.driver-target-card p {
  margin-top: 5px;
  color: var(--muted);
}

.driver-target-value {
  display: grid;
  gap: 10px;
  justify-content: center;
  justify-items: center;
}

.driver-target-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.driver-target-actions .compact-action {
  min-width: 138px;
}

.driver-target-value strong {
  border: 1px solid rgba(34, 197, 94, 0.42);
  border-radius: 999px;
  background: rgba(5, 46, 22, 0.28);
  color: #86efac;
  font-size: 1rem;
  font-weight: 900;
  padding: 8px 13px;
}

.driver-target-card.driver-target-pending .driver-target-value strong {
  border-color: rgba(251, 191, 36, 0.44);
  background: rgba(113, 63, 18, 0.3);
  color: #fde68a;
}

.driver-target-card.driver-target-approved .driver-target-value strong {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(5, 46, 22, 0.36);
  color: #bbf7d0;
}

.driver-target-card .form-message {
  min-height: 0;
  margin: 0;
  text-align: center;
}

.driver-manager-card {
  width: min(100%, 760px);
  margin: 0 auto 18px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.16), rgba(15, 23, 42, 0.52));
  overflow: hidden;
}

.driver-manager-home-card {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.18), rgba(15, 23, 42, 0.56));
  cursor: pointer;
}

.driver-manager-detail-card {
  width: 100%;
  margin-bottom: 0;
}

.driver-manager-heading {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.driver-manager-heading span {
  display: block;
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-manager-heading h2 {
  margin: 5px 0 0;
}

.driver-manager-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.driver-manager-heading > strong {
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 999px;
  padding: 7px 12px;
  color: #fecaca;
  font-size: 0.82rem;
  white-space: nowrap;
}

.driver-manager-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.driver-manager-actions {
  justify-content: flex-end;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.driver-manager-actions .compact-action {
  min-width: min(100%, 210px);
}

.driver-manager-badge {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 900;
}

.driver-manager-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.driver-manager-item {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.48);
  padding: 14px;
}

.driver-manager-item.trend-worse {
  border-color: rgba(248, 113, 113, 0.52);
  background: rgba(127, 29, 29, 0.2);
}

.driver-manager-item.trend-improving {
  border-color: rgba(34, 197, 94, 0.44);
  background: rgba(5, 46, 22, 0.2);
}

.driver-manager-item.trend-flat,
.driver-manager-item.trend-new {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(113, 63, 18, 0.16);
}

.driver-manager-item.empty.ok {
  border-color: rgba(34, 197, 94, 0.44);
  background: rgba(5, 46, 22, 0.2);
}

.driver-manager-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.driver-manager-item-header strong,
.driver-manager-item.empty strong {
  color: var(--ink-strong);
  line-height: 1.25;
}

.driver-manager-item-header span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: none;
}

.driver-manager-item-header .driver-manager-work-account-audit {
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 760;
}

.driver-manager-gap {
  flex: 0 0 auto;
  border: 1px solid rgba(248, 113, 113, 0.44);
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
  padding: 7px 11px;
  white-space: nowrap;
}

.driver-manager-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.driver-manager-fields > span {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  padding: 10px;
  min-width: 0;
}

.driver-manager-fields small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 880;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-manager-fields strong,
.driver-manager-fields a {
  color: var(--ink-strong);
  font-weight: 900;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.driver-manager-trend,
.driver-manager-item.empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.driver-manager-badge.trend-worse,
.driver-manager-item.trend-worse .driver-manager-trend {
  color: #fca5a5;
}

.driver-manager-badge.trend-improving,
.driver-manager-item.trend-improving .driver-manager-trend {
  color: #86efac;
}

.driver-manager-badge.trend-new,
.driver-manager-item.trend-new .driver-manager-trend,
.driver-manager-item.trend-flat .driver-manager-trend {
  color: #fde68a;
}

@media (max-width: 640px) {
  .driver-manager-heading,
  .driver-manager-item-header {
    align-items: stretch;
  }

  .driver-manager-heading > strong,
  .driver-manager-gap {
    width: fit-content;
  }

  .driver-manager-item-header {
    flex-direction: column;
  }

  .driver-manager-fields {
    grid-template-columns: 1fr;
  }

  .driver-manager-actions {
    justify-content: stretch;
  }

  .driver-manager-actions .compact-action {
    width: 100%;
  }
}

.driver-updates-card {
  width: min(100%, 760px);
  margin: 0 auto 18px;
  border: 1px solid rgba(147, 197, 253, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  overflow: hidden;
}

.driver-updates-card.has-updates {
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.08);
}

.driver-updates-heading {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.driver-updates-heading span,
.driver-update-item span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-updates-heading h2 {
  margin: 5px 0 0;
}

.driver-updates-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
  max-width: 58ch;
  overflow-wrap: anywhere;
}

.driver-updates-heading > strong {
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 999px;
  padding: 7px 12px;
  color: #bfdbfe;
  font-size: 0.82rem;
  white-space: nowrap;
}

.driver-updates-actions {
  justify-content: center;
  padding: 0 16px 16px;
}

.driver-updates-actions .compact-action {
  min-width: 138px;
}

.driver-updates-list {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding: 14px;
}

.driver-update-item {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.48);
  padding: 14px;
}

.driver-update-item strong {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.25;
}

.driver-update-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.driver-update-item .compact-action {
  width: fit-content;
  min-width: 96px;
  margin-top: 2px;
}

.driver-update-item.empty {
  background: rgba(15, 23, 42, 0.28);
}

.driver-updates-log-page {
  padding-bottom: 36px;
}

.driver-updates-log-page .company-dashboard-panel {
  gap: 26px;
}

.driver-updates-log-card {
  margin-bottom: 0;
}

.driver-updates-log-card .driver-updates-heading {
  padding: 22px 24px 24px;
}

.driver-updates-log-list {
  gap: 14px;
  max-height: none;
  padding: 20px;
}

.driver-updates-log-list .driver-update-item {
  padding: 18px 20px;
}

.driver-target-challenge-card textarea {
  min-height: 150px;
}

.driver-history-card {
  width: min(100%, 760px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  margin: 0 auto 18px;
  overflow: hidden;
}

.driver-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 18px;
}

.driver-history-heading span,
.driver-history-item-top span,
.driver-history-detail span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-history-heading h2,
.driver-history-heading p,
.driver-history-item-top h3 {
  margin: 0;
}

.driver-history-heading h2 {
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 1.05rem;
}

.driver-history-heading p {
  color: var(--muted);
  text-align: right;
}

.driver-history-list {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.driver-history-empty {
  min-height: 54px;
  display: grid;
  align-items: center;
  margin: 0;
  color: var(--muted);
}

.driver-history-item {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-left: 4px solid rgba(147, 197, 253, 0.56);
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.48);
  padding: 14px;
}

.driver-history-item.status-completed {
  border-left-color: rgba(34, 197, 94, 0.9);
}

.driver-history-item.status-rejected {
  border-left-color: rgba(248, 113, 113, 0.9);
}

.driver-history-item-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.driver-history-item-top h3 {
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 1rem;
}

.driver-history-item-top > strong {
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  color: var(--ink-strong);
  font-size: 0.75rem;
  padding: 6px 10px;
  white-space: nowrap;
}

.driver-history-item.status-completed .driver-history-item-top > strong {
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}

.driver-history-item.status-rejected .driver-history-item-top > strong {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.driver-history-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.driver-history-detail {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.34);
  display: grid;
  gap: 5px;
  padding: 10px 11px;
}

.driver-history-detail:nth-last-child(-n + 2) {
  grid-column: span 3;
}

.driver-history-detail strong {
  color: var(--ink-strong);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.targets-reason-field textarea {
  min-height: 52px;
}

.targets-form-actions {
  display: grid;
  gap: 10px;
}

.targets-form-actions .primary-button,
.targets-form-actions .secondary-button {
  margin-top: 0;
}

.targets-audit-item {
  grid-template-columns: minmax(220px, 0.75fr) minmax(300px, 1.25fr);
  gap: 14px;
}

.atokes-page {
  width: min(1280px, calc(100vw - 32px));
}

.atokes-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.atokes-filter-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(190px, 240px) minmax(160px, 220px) minmax(130px, 170px) minmax(130px, 170px);
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px;
}

.atokes-filter-grid label,
.driver-atokes-form label {
  min-width: 0;
  margin-top: 0;
}

.atokes-admin-list,
.atokes-order-list {
  gap: 12px;
  padding: 18px;
}

.atokes-order-card {
  min-height: 128px;
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) minmax(112px, auto);
  grid-template-areas: "summary metrics actions";
  align-items: stretch;
  gap: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 4px solid rgba(59, 130, 246, 0.68);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 18px;
}

.atokes-order-card:hover,
.atokes-order-card.active {
  border-color: rgba(147, 197, 253, 0.42);
  background: rgba(30, 41, 59, 0.58);
}

.atokes-order-card.status-delivered {
  border-left-color: rgba(34, 197, 94, 0.85);
}

.atokes-order-card.status-order-sent {
  border-left-color: rgba(251, 146, 60, 0.9);
}

.new-vehicle-request-card.status-pending {
  border-left-color: rgba(248, 113, 113, 0.86);
}

.new-vehicle-request-card.status-approved {
  border-left-color: rgba(251, 191, 36, 0.86);
}

.new-vehicle-request-card.status-completed {
  border-left-color: rgba(34, 197, 94, 0.85);
}

.new-vehicle-request-card.status-rejected {
  border-left-color: rgba(148, 163, 184, 0.7);
}

.new-vehicle-request-card.status-cancelled {
  border-left-color: rgba(248, 113, 113, 0.82);
  background: rgba(127, 29, 29, 0.16);
}

.atokes-order-card.status-cancelled-by-driver,
.atokes-order-card.status-cancelled-by-admin {
  border-left-color: rgba(248, 113, 113, 0.82);
}

.atokes-order-main {
  grid-area: summary;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.atokes-order-main h3,
.atokes-order-main p {
  margin: 0;
}

.atokes-order-main h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.atokes-order-main p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.atokes-card-details {
  grid-area: metrics;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.atokes-card-details .profile-row {
  min-height: 58px;
  padding: 10px 12px;
}

.atokes-card-details .profile-row span {
  font-size: 0.68rem;
}

.atokes-card-details .profile-row strong,
.atokes-card-details .profile-row a {
  color: var(--ink-strong);
  font-size: 0.86rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.atokes-order-actions {
  grid-area: actions;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 10px;
}

.atokes-order-actions .secondary-button {
  min-width: 112px;
  width: 112px;
  margin-top: 0;
}

.atokes-status-badge {
  width: fit-content;
  border: 1px solid rgba(59, 130, 246, 0.46);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 830;
  letter-spacing: 0.07em;
  line-height: 1.2;
  padding: 8px 11px;
  text-transform: uppercase;
}

.atokes-status-badge.status-delivered {
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}

.atokes-status-badge.status-order-sent {
  border-color: rgba(251, 146, 60, 0.58);
  background: rgba(124, 45, 18, 0.28);
  color: #fed7aa;
}

.atokes-status-badge.status-cancelled-by-driver,
.atokes-status-badge.status-cancelled-by-admin,
.atokes-status-badge.status-cancelled {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.atokes-detail-panel {
  scroll-margin-top: 18px;
}

.atokes-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.atokes-detail-grid .profile-row:nth-last-child(-n + 3) {
  grid-column: span 4;
  min-height: 86px;
  align-content: start;
}

.atokes-history-panel {
  grid-column: 1 / -1;
  margin: 18px;
}

.atokes-history-item {
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
}

.new-vehicle-page {
  width: min(1280px, calc(100vw - 32px));
}

.new-vehicle-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.new-vehicle-access-form {
  grid-template-columns: minmax(190px, 240px) minmax(140px, 170px) minmax(240px, 1fr);
}

.new-vehicle-access-list {
  gap: 12px;
  padding: 18px;
}

.new-vehicle-access-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.new-vehicle-access-card h3,
.new-vehicle-access-card p {
  overflow-wrap: anywhere;
}

.driver-new-vehicle-card select {
  min-height: 54px;
}

.driver-atokes-page {
  width: min(100% - 32px, 760px);
}

.driver-atokes-form {
  display: grid;
  gap: 14px;
}

.driver-atokes-page .atokes-current-panel .section-heading {
  justify-content: center;
  text-align: center;
}

.driver-atokes-page .atokes-current-panel .section-heading > div {
  width: 100%;
}

.driver-atokes-page .atokes-current-panel .saved-details {
  text-align: center;
}

.driver-atokes-page .atokes-current-panel .profile-row {
  align-content: center;
  justify-items: center;
  text-align: center;
}

.driver-atokes-page .atokes-current-panel .profile-row strong,
.driver-atokes-page .atokes-current-panel .profile-row a {
  text-align: center;
}

.driver-atokes-form .submission-card {
  display: grid;
  gap: 14px;
}

.driver-atokes-form .submission-fields {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 18px;
}

.driver-atokes-form textarea {
  min-height: 122px;
}

.driver-atokes-form .button-row.form-actions {
  align-items: stretch;
  margin-top: 0;
}

.driver-atokes-form .form-message {
  margin: -4px 18px 16px;
}

.atokes-instructions {
  display: grid;
  gap: 8px;
  margin: 0 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  padding: 14px;
}

.atokes-instructions p,
.atokes-cancel-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.atokes-terms-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  color: var(--ink);
  padding: 14px;
}

.atokes-terms-field input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--blue-hover);
}

.atokes-terms-field span {
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.45;
}

.atokes-cancel-note {
  margin: 0 18px;
  border: 1px solid rgba(249, 115, 22, 0.24);
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.08);
  color: #fed7aa;
  padding: 13px 14px;
}

@media (max-width: 1199px) {
  .atokes-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atokes-summary,
  .new-vehicle-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .new-vehicle-access-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atokes-order-card {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    grid-template-areas:
      "summary metrics"
      "actions metrics";
  }

  .atokes-card-details,
  .atokes-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atokes-detail-grid .profile-row:nth-last-child(-n + 3) {
    grid-column: 1 / -1;
  }

  .atokes-order-actions {
    align-content: end;
    justify-items: stretch;
  }

  .atokes-order-actions .secondary-button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .advance-request-card .atokes-order-actions {
    justify-content: stretch;
  }

  .advance-request-card .atokes-order-actions .primary-button,
  .advance-request-card .atokes-order-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .atokes-page,
  .new-vehicle-page,
  .driver-atokes-page {
    width: min(100% - 24px, 640px);
  }

  .atokes-summary,
  .new-vehicle-summary,
  .atokes-filter-grid,
  .new-vehicle-access-form,
  .atokes-card-details,
  .atokes-detail-grid {
    grid-template-columns: 1fr;
  }

  .atokes-filter-grid,
  .atokes-admin-list,
  .new-vehicle-access-list,
  .atokes-order-list,
  .atokes-detail-grid {
    padding: 14px;
  }

  .atokes-order-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "metrics"
      "actions";
    gap: 14px;
    padding: 16px;
  }

  .atokes-history-panel {
    margin: 14px;
  }

  .atokes-history-item {
    grid-template-columns: 1fr;
  }

  .new-vehicle-access-card {
    grid-template-columns: 1fr;
  }

  .driver-atokes-form .submission-card {
    gap: 12px;
  }

  .driver-atokes-form .submission-fields {
    gap: 12px;
    padding: 0 14px;
  }

  .driver-atokes-form textarea {
    min-height: 116px;
  }

  .driver-atokes-form .button-row.form-actions {
    margin: 0 14px 14px;
  }

  .driver-atokes-form .form-message {
    margin: -2px 14px 14px;
  }

  .atokes-instructions {
    gap: 6px;
    margin: 0 14px;
    padding: 12px;
  }

  .atokes-instructions p,
  .atokes-cancel-note {
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .atokes-terms-field {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .atokes-terms-field input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }

  .atokes-terms-field span {
    font-size: 0.88rem;
    line-height: 1.38;
  }

  .atokes-cancel-note {
    margin: 0 14px;
    padding: 11px 12px;
  }
}

.ok-badge {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}

.suppliers-page,
.supplier-portal-page {
  width: min(1280px, calc(100vw - 32px));
}

.supplier-portal-shell {
  min-height: 100vh;
}

.suppliers-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.compact-supplier-summary {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.suppliers-month-grid {
  grid-template-columns: minmax(180px, 240px);
}

.supplier-month-select-field {
  display: none;
}

.supplier-month-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
  padding: 0 18px 18px;
}

.supplier-month-card {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  color: var(--ink-strong);
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
}

.supplier-month-card strong {
  font-size: 1.05rem;
  line-height: 1.15;
}

.supplier-month-card span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.supplier-month-card.active {
  border-color: rgba(59, 130, 246, 0.68);
  background: linear-gradient(135deg, rgba(6, 111, 209, 0.28), rgba(15, 23, 42, 0.62));
}

.supplier-month-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.55);
}

.suppliers-list,
.suppliers-bike-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.suppliers-supplier-card {
  min-height: 146px;
  grid-template-columns: minmax(170px, 0.6fr) minmax(0, 1.4fr);
  grid-template-areas:
    "name stats"
    "meta stats";
  align-items: stretch;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.suppliers-supplier-card > h3 {
  grid-area: name;
}

.suppliers-supplier-card > p {
  grid-area: meta;
}

.suppliers-supplier-card > .supplier-card-stats {
  grid-area: stats;
}

.suppliers-supplier-card.active {
  border-color: rgba(59, 130, 246, 0.7);
  background: linear-gradient(90deg, rgba(6, 111, 209, 0.16), rgba(31, 41, 55, 0.96));
}

.suppliers-supplier-card h3,
.suppliers-supplier-card p,
.suppliers-history-item h3,
.suppliers-history-item p,
.suppliers-bike-card h3,
.suppliers-bike-card p {
  margin: 0;
}

.suppliers-supplier-card h3,
.suppliers-bike-card h3,
.suppliers-history-item h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.suppliers-supplier-card p,
.suppliers-history-item p,
.supplier-bike-identity p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.supplier-card-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.supplier-card-stats .profile-row {
  min-height: 64px;
  padding: 11px 12px;
}

.supplier-info-card {
  margin: 18px;
  box-shadow: none;
}

.supplier-temp-password {
  margin: 0 18px 18px;
  border: 1px solid rgba(34, 197, 94, 0.42);
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  padding: 13px 14px;
  overflow-wrap: anywhere;
}

.supplier-filter-grid {
  grid-template-columns: minmax(240px, 1fr) minmax(140px, 190px) minmax(140px, 190px) minmax(110px, 160px);
}

.supplier-portal-filter-grid {
  grid-template-columns: minmax(180px, 220px) minmax(240px, 1fr) minmax(140px, 190px) minmax(140px, 190px) minmax(110px, 150px);
  align-items: end;
}

.supplier-portal-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
}

.supplier-portal-tab {
  min-height: 46px;
  min-width: 156px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  padding: 0 18px;
}

.supplier-portal-tab.active {
  border-color: rgba(59, 130, 246, 0.78);
  background: linear-gradient(135deg, rgba(6, 111, 209, 0.34), rgba(15, 23, 42, 0.68));
  color: var(--ink-strong);
}

.supplier-portal-tab:focus-visible {
  outline: 2px solid var(--blue-hover);
  outline-offset: 2px;
}

.supplier-portal-panel.hidden {
  display: none;
}

.supplier-portal-payments-list {
  padding: 18px;
}

.supplier-portal-payment-card {
  gap: 16px;
}

.supplier-portal-payment-card .supplier-payment-card-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding-bottom: 14px;
}

.supplier-portal-payment-card .supplier-payment-card-badge.status-paid {
  border-color: rgba(34, 197, 94, 0.48);
  background: rgba(22, 163, 74, 0.16);
  color: #bbf7d0;
}

.supplier-portal-payment-metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.supplier-portal-proof-section .supplier-payment-proof-actions .secondary-button {
  min-width: 148px;
}

.supplier-portal-payment-note .profile-row {
  min-height: auto;
}

.supplier-search-submit {
  margin-top: 0;
  min-height: 48px;
  width: 100%;
}

.supplier-loading-state {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.supplier-loading-state::before {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--blue-hover);
  border-radius: 999px;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  animation: loading-spin 800ms linear infinite;
}

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

.supplier-bulk-actions {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(160px, 210px) minmax(260px, 1fr);
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 18px 18px;
}

.supplier-bulk-actions label {
  margin-top: 0;
}

.supplier-bulk-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 10px;
}

.supplier-bulk-buttons .primary-button,
.supplier-bulk-buttons .secondary-button {
  margin-top: 0;
}

.supplier-payment-workflow,
.supplier-payment-cards-section {
  border-top: 1px solid var(--line-soft);
  padding: 18px;
}

.supplier-payment-workflow-heading,
.supplier-payment-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.supplier-payment-workflow-heading h3,
.supplier-payment-section-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
}

.supplier-payment-workflow-heading span,
.supplier-payment-section-heading span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.supplier-payment-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.supplier-payment-card-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.supplier-payment-card-form label {
  margin-top: 0;
}

.supplier-payment-note-field,
.supplier-payment-preview {
  grid-column: 1 / -1;
}

.supplier-payment-note-field textarea {
  min-height: 92px;
}

.supplier-payment-preview {
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 8px;
  background: rgba(6, 111, 209, 0.12);
  color: var(--ink-strong);
  font-weight: 750;
  line-height: 1.45;
  padding: 13px 14px;
}

.supplier-payment-submit {
  grid-column: 1 / -1;
  margin-top: 0;
}

.supplier-payment-cards-list {
  padding: 0;
}

.supplier-payment-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-left: 4px solid rgba(34, 197, 94, 0.82);
  border-radius: 8px;
  background: rgba(15, 42, 30, 0.34);
  padding: 18px;
}

.supplier-payment-card-cancelled {
  border-color: rgba(239, 68, 68, 0.34);
  border-left-color: rgba(239, 68, 68, 0.82);
  background: rgba(69, 26, 26, 0.24);
}

.supplier-payment-card-voided {
  border-color: rgba(148, 163, 184, 0.3);
  border-left-color: rgba(148, 163, 184, 0.72);
  background: rgba(30, 41, 59, 0.32);
  opacity: 0.82;
}

.supplier-payment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.supplier-payment-card-title {
  min-width: 0;
}

.supplier-payment-card-head h3,
.supplier-payment-card-head p {
  margin: 0;
}

.supplier-payment-card-head h3 {
  color: var(--ink-strong);
  font-size: 1rem;
}

.supplier-payment-card-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.supplier-payment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.supplier-payment-card-meta span,
.supplier-payment-show-bikes {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.32);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  padding: 7px 10px;
}

.supplier-payment-card-badge {
  border: 1px solid rgba(34, 197, 94, 0.46);
  border-radius: 999px;
  color: #86efac;
  background: rgba(22, 163, 74, 0.16);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  padding: 8px 11px;
  text-transform: uppercase;
  white-space: nowrap;
}

.supplier-payment-card-badge.status-cancelled {
  border-color: rgba(239, 68, 68, 0.48);
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.18);
}

.supplier-payment-card-badge.status-voided {
  border-color: rgba(148, 163, 184, 0.42);
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.14);
}

.supplier-payment-card-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.supplier-payment-card-section {
  display: grid;
  gap: 10px;
}

.supplier-payment-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-strong);
}

.supplier-payment-subheading strong {
  font-size: 0.9rem;
}

.supplier-payment-subheading span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.supplier-payment-card-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.supplier-payment-card-lines span {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
  color: var(--ink-strong);
  font-size: 0.78rem;
  font-weight: 760;
  padding: 7px 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-payment-card-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 0.95fr) minmax(150px, 0.45fr);
  gap: 14px;
  align-items: stretch;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 14px;
}

.supplier-payment-action-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: start;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
  padding: 12px;
}

.supplier-payment-note-group {
  grid-template-columns: minmax(0, 1fr) minmax(116px, auto);
  align-items: end;
}

.supplier-payment-note-control {
  display: grid;
  gap: 7px;
  margin: 0;
  min-width: 0;
}

.supplier-payment-note-control span,
.supplier-payment-upload-group > strong {
  color: var(--ink-strong);
  font-weight: 760;
}

.supplier-payment-note-control textarea {
  height: 92px;
  min-height: 92px;
  resize: vertical;
}

.supplier-payment-action-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.supplier-payment-final-actions {
  align-content: end;
  justify-items: stretch;
}

.supplier-payment-final-actions .supplier-payment-action-button {
  width: 100%;
}

.supplier-payment-proof-section {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
  padding: 12px;
}

.supplier-payment-proof-list {
  display: grid;
  gap: 8px;
}

.supplier-payment-proof-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  padding: 10px;
}

.supplier-payment-proof-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.supplier-payment-proof-info strong {
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-payment-proof-info span,
.supplier-payment-proof-empty {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.supplier-payment-proof-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.supplier-payment-proof-actions .secondary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.supplier-payment-proof-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  align-items: end;
  gap: 10px;
}

.supplier-payment-proof-upload input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-deep);
  color: var(--muted);
  padding: 9px 10px;
}

.supplier-payment-proof-upload input[type="file"]::file-selector-button {
  min-height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.92);
  color: var(--ink-strong);
  font-weight: 760;
  margin-right: 10px;
}

.supplier-unpaid-heading {
  border-top: 1px solid var(--line-soft);
  margin: 0;
  padding: 18px 18px 0;
}

.suppliers-bike-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  grid-template-areas: "summary metrics";
  align-items: stretch;
  gap: 22px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 4px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.suppliers-bike-card.supplier-bike-editable {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(160px, 190px);
  grid-template-areas: "summary metrics controls";
}

.suppliers-bike-card.supplier-payment-selectable-bike {
  border-left-color: rgba(239, 68, 68, 0.78);
  background: rgba(69, 26, 26, 0.16);
}

.suppliers-bike-card:hover {
  background: rgba(30, 41, 59, 0.58);
  border-color: rgba(148, 163, 184, 0.38);
  transform: translateY(-1px);
}

.suppliers-bike-card.supplier-status-assigned {
  border-left-color: rgba(34, 197, 94, 0.82);
}

.suppliers-bike-card.supplier-status-available {
  border-left-color: rgba(59, 130, 246, 0.82);
}

.suppliers-bike-card.supplier-status-maintenance,
.suppliers-bike-card.supplier-status-not_ok {
  border-left-color: rgba(249, 115, 22, 0.82);
}

.supplier-bike-top {
  grid-area: summary;
  min-width: 0;
  display: grid;
  align-content: center;
  align-items: start;
  gap: 10px;
  padding: 4px 0;
}

.supplier-bike-top.with-select {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
}

.supplier-bike-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.supplier-bike-top input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue-hover);
}

.supplier-bike-top.with-select .supplier-status-badge {
  grid-column: 2;
}

.supplier-bike-top.with-select .supplier-card-actions {
  grid-column: 2;
}

.supplier-status-badge {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  color: var(--ink-strong);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  line-height: 1.2;
  padding: 8px 11px;
  text-transform: uppercase;
}

.supplier-status-badge.supplier-status-assigned {
  border-color: rgba(34, 197, 94, 0.46);
  color: #86efac;
}

.supplier-status-badge.supplier-status-available {
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}

.supplier-status-badge.supplier-status-maintenance,
.supplier-status-badge.supplier-status-not_ok {
  border-color: rgba(249, 115, 22, 0.5);
  color: #fdba74;
}

.supplier-bike-metrics {
  grid-area: metrics;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.supplier-bike-metrics .profile-row {
  min-height: 58px;
  padding: 10px 12px;
  gap: 6px;
}

.supplier-bike-metrics .profile-row span {
  font-size: 0.68rem;
}

.supplier-bike-metrics .profile-row strong,
.supplier-bike-metrics .profile-row a {
  color: var(--ink-strong);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.supplier-bike-group {
  display: grid;
  gap: 12px;
}

.supplier-bike-group + .supplier-bike-group {
  margin-top: 8px;
}

.supplier-bike-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  padding: 12px 14px;
}

.supplier-bike-group-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.supplier-bike-group-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.supplier-payment-controls {
  grid-area: controls;
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.supplier-payment-switch {
  position: relative;
  min-height: 44px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
  color: var(--ink-strong);
  padding: 8px 10px;
  cursor: pointer;
}

.supplier-payment-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.supplier-payment-track {
  position: relative;
  width: 44px;
  height: 26px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.54);
}

.supplier-payment-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #e2e8f0;
  transition: transform 160ms ease;
}

.supplier-payment-switch input:checked + .supplier-payment-track {
  border-color: rgba(34, 197, 94, 0.56);
  background: rgba(22, 163, 74, 0.34);
}

.supplier-payment-switch input:checked + .supplier-payment-track::after {
  transform: translateX(18px);
}

.supplier-payment-switch input:disabled + .supplier-payment-track {
  opacity: 0.44;
}

.supplier-payment-text {
  color: var(--ink-strong);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.18;
}

.supplier-card-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

.supplier-card-actions .secondary-button {
  width: 112px;
  min-width: 112px;
  white-space: nowrap;
}

.suppliers-motorbike-panel {
  scroll-margin-top: 18px;
}

.supplier-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 18px 18px;
}

.supplier-history-grid section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.supplier-history-grid h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
}

.suppliers-history-item {
  grid-template-columns: minmax(160px, 0.62fr) minmax(0, 1.38fr);
  gap: 12px;
}

.onboarding-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(6, 111, 209, 0.08), transparent 280px),
    var(--bg);
}

.onboarding-shell {
  width: min(100% - 32px, 1040px);
  margin: 0 auto;
  padding: 34px 0 48px;
  display: grid;
  gap: var(--section-gap);
}

.onboarding-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.onboarding-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.onboarding-header-actions > span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: right;
}

.onboarding-staff-back {
  min-height: 44px;
  min-width: 164px;
  padding: 0 18px;
}

.onboarding-hero {
  min-height: 232px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(6, 111, 209, 0.32), rgba(31, 41, 55, 0.94)),
    var(--panel);
  display: flex;
  align-items: end;
  padding: 28px;
  box-shadow: var(--shadow);
}

.onboarding-hero > div {
  max-width: 660px;
}

.onboarding-kicker {
  margin-bottom: 12px;
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.onboarding-hero h1 {
  margin-bottom: 12px;
  color: var(--ink-strong);
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 0.95;
}

.onboarding-hero p:last-child {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.onboarding-form {
  overflow: visible;
}

.onboarding-share-panel {
  overflow: visible;
}

.onboarding-share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 14px;
  align-items: end;
  padding: 18px;
}

.onboarding-sms-share {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  gap: 14px;
  align-items: end;
}

.onboarding-sms-share button,
.onboarding-share-grid > button {
  width: 100%;
  margin-top: 0;
  min-height: 52px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onboarding-share-preview,
.onboarding-share-grid .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.onboarding-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.onboarding-wide-field {
  grid-column: span 2;
}

.onboarding-subsection-heading {
  border-top: 1px solid var(--line);
}

.onboarding-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.onboarding-upload {
  min-height: 132px;
  margin-top: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.34);
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 14px;
}

.onboarding-upload span {
  color: var(--ink-strong);
  font-size: 0.96rem;
  font-weight: 760;
}

.onboarding-upload input {
  min-height: 42px;
  padding: 8px;
  font-size: 0.8rem;
}

.onboarding-actions {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 18px 18px;
}

.onboarding-actions .primary-button {
  margin-top: 0;
}

.form-message.success {
  color: #86efac;
}

.onboarding-success {
  min-height: 280px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 22px;
  padding: 28px;
}

.onboarding-success h2 {
  margin-bottom: 12px;
  color: var(--ink-strong);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

.onboarding-success p:not(.onboarding-kicker) {
  max-width: 620px;
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.onboarding-success strong {
  color: #93c5fd;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.compact-button {
  min-height: 40px;
  padding: 0 16px;
}

.onboarding-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--line-soft);
}

.onboarding-summary div {
  min-height: 88px;
  background: rgba(15, 23, 42, 0.34);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
}

.onboarding-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-summary strong {
  color: var(--ink-strong);
  font-size: 2rem;
  line-height: 1;
}

.onboarded-export-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) repeat(2, minmax(104px, auto));
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 18px;
}

.onboarded-export-filter-grid label {
  min-width: 0;
  margin-top: 0;
}

.onboarded-export-filter-grid .secondary-button {
  margin-top: 0;
  width: 100%;
}

.onboarding-application-list {
  display: grid;
  gap: 12px;
  overflow-x: visible;
  padding: 14px;
  background: rgba(2, 6, 23, 0.16);
}

.onboarding-table-header,
.onboarding-application-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.76fr) minmax(0, 0.82fr) minmax(0, 0.74fr) minmax(0, 1.08fr) minmax(0, 0.82fr) minmax(0, 0.98fr) minmax(0, 1.35fr) 156px;
  align-items: stretch;
}

.onboarding-table-header {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.58);
}

.onboarding-table-header span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.onboarding-table-header span:last-child {
  border-right: 0;
}

.onboarding-application-item {
  min-height: 86px;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.76fr) minmax(0, 0.82fr) minmax(0, 0.74fr) minmax(0, 1.08fr) minmax(0, 0.82fr) minmax(0, 0.98fr) minmax(0, 1.35fr) 156px;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.48);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  padding: 0;
}

.onboarding-application-item:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(15, 23, 42, 0.6);
}

.onboarding-driver-info-link-status {
  margin: 8px 0 0;
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.onboarding-driver-info-review-names {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
}

.onboarding-driver-info-reconcile {
  margin-top: 0.45rem;
  width: 100%;
}

.onboarding-review-dialog-backdrop {
  align-items: center;
  background: rgba(2, 6, 23, 0.82);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 1200;
}

.onboarding-review-dialog {
  background: #1e293b;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.7);
  color: var(--ink);
  max-height: calc(100vh - 32px);
  max-width: 560px;
  overflow-y: auto;
  padding: 22px;
  width: 100%;
}

.onboarding-review-dialog h2,
.onboarding-review-dialog p {
  margin-top: 0;
}

.onboarding-review-dialog p {
  color: var(--muted);
  line-height: 1.55;
}

.onboarding-review-comparison {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  margin: 18px 0;
  overflow: hidden;
}

.onboarding-review-comparison dt,
.onboarding-review-comparison dd {
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  overflow-wrap: anywhere;
  padding: 11px 12px;
}

.onboarding-review-comparison dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.onboarding-review-comparison dd {
  font-weight: 800;
}

.onboarding-review-comparison > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

.onboarding-review-confirmation {
  align-items: flex-start;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  line-height: 1.45;
  padding: 14px;
}

.onboarding-review-confirmation input {
  flex: 0 0 auto;
  height: 22px;
  margin: 0;
  width: 22px;
}

.onboarding-review-dialog-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

@media (max-width: 520px) {
  .onboarding-review-comparison,
  .onboarding-review-dialog-actions {
    grid-template-columns: 1fr;
  }

  .onboarding-review-comparison dt,
  .onboarding-review-comparison dd {
    border-bottom: 1px solid var(--line-soft);
  }

  .onboarding-review-comparison > :last-child {
    border-bottom: 0;
  }
}

.onboarding-table-header.rejected-onboarding-header,
.onboarding-application-item.rejected-onboarding-item {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

.onboarding-table-cell {
  min-width: 0;
  min-height: 86px;
  display: flex;
  align-items: flex-start;
  padding: 14px;
  border-right: 1px solid var(--line-soft);
  background: rgba(15, 23, 42, 0.18);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.onboarding-table-cell:last-child {
  border-right: 0;
}

.onboarding-primary-cell,
.onboarding-email-cell,
.onboarding-action-cell {
  color: var(--ink-strong);
}

.onboarding-status-cell {
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  overflow-wrap: normal;
  word-break: normal;
}

.onboarding-review-cell {
  display: grid;
  align-content: center;
  gap: 10px;
}

.onboarding-status-cell .onboarding-status-toggle {
  min-width: 0;
  width: 100%;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 0.68rem;
}

.onboarding-status-cell .onboarding-status-toggle strong {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.onboarding-status-cell .onboarding-status-track {
  width: 52px;
  height: 32px;
  flex-basis: 52px;
}

.onboarding-status-cell .onboarding-status-track::after {
  width: 22px;
  height: 22px;
}

.onboarding-status-cell .onboarding-status-toggle input:checked + .onboarding-status-track::after {
  transform: translateX(20px);
}

.onboarding-document-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.onboarding-document-link {
  min-height: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.32);
  color: var(--ink);
  display: flex;
  align-items: center;
  padding: 9px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.onboarding-document-link:hover {
  border-color: rgba(6, 111, 209, 0.58);
  color: var(--ink-strong);
}

.onboarding-status-toggle {
  position: relative;
  min-width: 132px;
  height: 40px;
  min-height: 40px;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #fed7aa;
  font-size: 0.74rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.onboarding-status-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.onboarding-status-track {
  position: relative;
  width: 62px;
  height: 36px;
  flex: 0 0 62px;
  border: 1px solid rgba(251, 146, 60, 0.5);
  border-radius: 999px;
  background: rgba(234, 88, 12, 0.28);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.36);
}

.onboarding-status-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
}

.onboarding-status-toggle input:checked + .onboarding-status-track {
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(22, 163, 74, 0.34);
}

.onboarding-status-toggle input:checked + .onboarding-status-track::after {
  transform: translateX(26px);
}

.onboarding-status-toggle.approved {
  color: #bbf7d0;
}

.onboarding-status-toggle input:disabled + .onboarding-status-track {
  opacity: 0.58;
}

.onboarding-reject-button {
  width: 100%;
  min-height: 36px;
  justify-content: center;
  border-color: rgba(248, 113, 113, 0.46);
  color: #fecaca;
}

.onboarding-reject-button:hover {
  border-color: rgba(248, 113, 113, 0.72);
  color: #fee2e2;
}

.onboarding-approval-flash {
  position: fixed;
  left: 50%;
  top: 28px;
  z-index: 120;
  max-width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, -12px);
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(147, 197, 253, 0.5);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(6, 111, 209, 0.94), rgba(14, 165, 233, 0.72)),
    #0f172a;
  color: #eff6ff;
  padding: 12px 18px;
  box-shadow: 0 18px 46px rgba(6, 111, 209, 0.28);
  font-size: 0.92rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-align: center;
  transition: opacity 120ms ease, transform 120ms ease;
}

.onboarding-approval-flash.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.warehouse-dashboard #motorbikePanel {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  align-items: start;
  gap: var(--section-gap);
}

.warehouse-dashboard #motorbikePanel > .section-heading {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.warehouse-dashboard #fleetLoadingProgress {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.section-heading-copy {
  display: grid;
  gap: 4px;
}

.warehouse-panel-topline .secondary-button {
  width: auto;
  min-width: 104px;
  margin-top: 0;
}

.warehouse-dashboard #motorbikeStatusLabel {
  align-self: center;
  line-height: 1.2;
  white-space: nowrap;
}

.warehouse-section-heading {
  min-height: 30px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}

.warehouse-section-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.2;
}

.warehouse-section-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.warehouse-dashboard #warehouseOverviewHeading,
.warehouse-dashboard #warehouseCategoriesHeading,
.warehouse-dashboard #warehouseSuppliersHeading,
.warehouse-dashboard #warehouseLocationsHeading {
  grid-column: 1 / -1;
}

.warehouse-dashboard #warehouseActionsHeading {
  grid-column: 1;
}

.warehouse-dashboard .warehouse-overview-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 42px;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}

.warehouse-metric {
  margin: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  color: var(--ink-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.warehouse-metric.muted {
  border-color: var(--line);
  background: rgba(31, 41, 55, 0.48);
  color: var(--muted);
}

.warehouse-dashboard .warehouse-overview-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
  box-shadow: var(--shadow);
}

.warehouse-dashboard .warehouse-supplier-summary,
.warehouse-dashboard .warehouse-location-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
  box-shadow: var(--shadow);
}

.warehouse-dashboard .warehouse-supplier-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.warehouse-dashboard .warehouse-location-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.warehouse-dashboard #fleetTodayMovementsPanel {
  grid-column: 1 / -1;
  min-width: 0;
}

.fleet-today-movements-panel > .section-heading.compact {
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

.warehouse-supplier-item,
.warehouse-location-item {
  min-height: 82px;
  background: var(--panel);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
}

.warehouse-supplier-item span,
.warehouse-location-item span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warehouse-supplier-item strong,
.warehouse-location-item strong {
  color: var(--ink-strong);
  font-size: 1.18rem;
  font-weight: 750;
}

.warehouse-supplier-item .warehouse-category-button,
.warehouse-location-item .warehouse-category-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.warehouse-summary-item {
  min-height: 74px;
  background: var(--panel);
  padding: 15px 18px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.warehouse-summary-item.has-breakdown {
  align-content: start;
}

.warehouse-summary-total {
  grid-column: 1 / -1;
}

.warehouse-summary-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.warehouse-summary-total .warehouse-summary-item-header {
  gap: 20px;
  padding-bottom: 4px;
}

.warehouse-summary-item-title {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.warehouse-summary-item-title span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warehouse-summary-item-title strong {
  color: var(--ink-strong);
  font-size: 1.18rem;
  font-weight: 750;
}

.warehouse-summary-item-header .warehouse-category-button {
  flex: 0 0 auto;
  min-height: 34px;
}

.warehouse-summary-total .warehouse-summary-item-header .warehouse-category-button {
  margin-top: 2px;
}

.warehouse-summary-breakdown {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  margin-top: 4px;
  padding-top: 8px;
}

.warehouse-summary-total .warehouse-summary-breakdown {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.warehouse-summary-breakdown-row {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 28px;
  padding: 4px 0;
}

.warehouse-summary-total .warehouse-summary-breakdown-row {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.24);
  padding: 6px 8px;
}

.warehouse-summary-breakdown-row.no-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.warehouse-summary-breakdown-row + .warehouse-summary-breakdown-row {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.warehouse-summary-total .warehouse-summary-breakdown-row + .warehouse-summary-breakdown-row {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.warehouse-summary-breakdown-row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.warehouse-summary-breakdown-row strong {
  color: var(--ink-strong);
  font-size: 0.92rem;
  font-weight: 750;
}

.warehouse-driver-gap-row {
  grid-template-areas:
    "label action"
    "value action";
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  row-gap: 8px;
}

.warehouse-driver-gap-row span {
  grid-area: label;
}

.warehouse-driver-gap-row strong {
  grid-area: value;
  font-size: 1.18rem;
}

.warehouse-driver-gap-row .warehouse-category-button {
  grid-area: action;
  min-height: 32px;
  min-width: 58px;
  padding: 0 10px;
}

.fleet-movement-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px 6px;
}

.fleet-movement-metric {
  min-width: 0;
  min-height: 92px;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 16px;
}

.fleet-movement-metric.needs-review {
  border-color: rgba(251, 146, 60, 0.54);
  background: rgba(124, 45, 18, 0.18);
}

.fleet-movement-metric span,
.fleet-movement-metric small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.fleet-movement-metric strong {
  color: var(--ink-strong);
  font-size: 1.42rem;
  line-height: 1.05;
}

.fleet-movement-metric-expected {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  padding: 4px 8px;
}

.fleet-movement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  padding: 16px 18px 18px;
}

.fleet-movement-section {
  min-width: 0;
  min-height: 100%;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.fleet-movement-section.warning {
  border-color: rgba(251, 113, 133, 0.34);
}

.fleet-movement-section.ok {
  border-color: rgba(34, 197, 94, 0.24);
}

.fleet-movement-section-heading {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.fleet-movement-section-heading strong {
  color: var(--ink-strong);
  font-size: 0.94rem;
  line-height: 1.2;
}

.fleet-movement-section-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.fleet-movement-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.fleet-movement-row:first-of-type {
  border-top: 0;
}

.fleet-movement-row strong {
  color: var(--ink-strong);
  font-size: 0.9rem;
  line-height: 1.25;
}

.fleet-movement-row p,
.fleet-movement-empty,
.fleet-movement-more {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fleet-movement-empty,
.fleet-movement-more {
  padding: 12px 14px;
}

.fleet-integrity-section {
  grid-column: 1 / -1;
}

.fleet-integrity-section .fleet-movement-section-heading {
  background: rgba(15, 23, 42, 0.3);
}

.fleet-integrity-count {
  border-radius: 999px;
  padding: 5px 10px;
}

.fleet-integrity-count.warning {
  background: rgba(127, 29, 29, 0.28);
  color: #fecdd3;
}

.fleet-integrity-count.ok {
  background: rgba(20, 83, 45, 0.28);
  color: #bbf7d0;
}

.fleet-integrity-warning-row {
  grid-template-columns: minmax(0, 1fr);
  background: rgba(15, 23, 42, 0.18);
}

.fleet-integrity-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.fleet-integrity-review-button {
  min-width: 128px;
}

@media (max-width: 1100px) {
  .fleet-movement-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .fleet-movement-grid {
    grid-template-columns: 1fr;
  }
}

.fleet-integrity-review-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(8px);
}

.fleet-integrity-review-card {
  width: min(100%, 980px);
  max-height: min(86vh, 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.56);
}

.fleet-integrity-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(96, 165, 250, 0.24);
  background: linear-gradient(180deg, rgba(21, 58, 92, 0.86), rgba(15, 23, 42, 0.68));
}

.fleet-integrity-review-header h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.28rem;
  line-height: 1.15;
}

.fleet-integrity-review-header span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.fleet-integrity-review-body {
  min-height: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.fleet-integrity-issue {
  min-width: 0;
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
}

.fleet-integrity-issue.severity-high {
  border-left-color: rgba(248, 113, 113, 0.9);
}

.fleet-integrity-issue.severity-medium {
  border-left-color: rgba(251, 191, 36, 0.9);
}

.fleet-integrity-issue.severity-low {
  border-left-color: rgba(96, 165, 250, 0.9);
}

.fleet-integrity-issue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fleet-integrity-issue-header span:first-child {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fleet-integrity-issue-header h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.04rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fleet-integrity-severity {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fleet-integrity-severity.severity-high {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.26);
}

.fleet-integrity-severity.severity-medium {
  border-color: rgba(251, 191, 36, 0.48);
  color: #fde68a;
  background: rgba(120, 53, 15, 0.24);
}

.fleet-integrity-severity.severity-low {
  border-color: rgba(96, 165, 250, 0.46);
  color: #bfdbfe;
  background: rgba(30, 64, 175, 0.18);
}

.fleet-integrity-message,
.fleet-integrity-explanation p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fleet-integrity-explanation {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.fleet-integrity-explanation strong {
  color: var(--ink-strong);
}

.fleet-integrity-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fleet-integrity-fact {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  padding: 10px 11px;
}

.fleet-integrity-fact span,
.fleet-integrity-subsection h4 {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fleet-integrity-fact strong {
  color: var(--ink-strong);
  font-size: 0.9rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fleet-integrity-subsection {
  display: grid;
  gap: 8px;
}

.fleet-integrity-subsection h4 {
  margin: 0;
}

.fleet-integrity-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-integrity-list li {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.18);
  padding: 10px 11px;
}

.fleet-integrity-list strong {
  color: var(--ink-strong);
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fleet-integrity-list span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fleet-integrity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warehouse-category-button {
  min-height: 30px;
  min-width: 62px;
  padding: 0 12px;
}

.warehouse-category-button[aria-disabled="true"] {
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
  opacity: 0.56;
  pointer-events: none;
}

.warehouse-category-page {
  max-width: 1180px;
}

.warehouse-category-page .dashboard-header {
  align-items: center;
}

.mechanic-audit-page .dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.mechanic-audit-page .dashboard-title {
  min-width: 0;
  justify-content: flex-start;
}

.mechanic-audit-page .dashboard-title h1 {
  flex: 0 1 auto;
  padding-right: 0;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
}

.mechanic-audit-page .dashboard-title h1 span {
  display: inline;
}

.mechanic-audit-page .warehouse-back-button {
  justify-self: end;
}

.warehouse-back-button {
  white-space: nowrap;
}

.warehouse-category-panel {
  grid-column: 1 / -1;
}

.warehouse-export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.warehouse-export-actions .download-button {
  min-width: 76px;
}

.warehouse-category-group-heading {
  min-height: 54px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(15, 23, 42, 0.46);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.warehouse-category-group-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.94rem;
  font-weight: 750;
}

.warehouse-category-group-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.document-item.warehouse-category-item:not(.mechanic-audit-item) {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  grid-template-areas:
    "meta details"
    "actions details"
    "edit edit";
  align-items: start;
  gap: 14px 18px;
  padding: 18px;
}

.warehouse-stock-item {
  background: rgba(6, 111, 209, 0.08);
}

.warehouse-category-meta {
  min-width: 0;
}

.document-item.warehouse-category-item:not(.mechanic-audit-item) .warehouse-category-meta {
  grid-area: meta;
}

.warehouse-category-meta h3 {
  margin-bottom: 7px;
  line-height: 1.15;
}

.warehouse-category-meta p {
  line-height: 1.35;
}

.warehouse-category-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--line-soft);
}

.document-item.warehouse-category-item:not(.mechanic-audit-item) .warehouse-category-details {
  grid-area: details;
}

.warehouse-category-detail {
  background: rgba(15, 23, 42, 0.34);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.warehouse-category-detail span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warehouse-category-detail strong {
  color: var(--ink-strong);
  font-size: 0.86rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.warehouse-category-edit {
  grid-area: edit;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(136px, 170px) minmax(140px, 180px) minmax(170px, 1fr) minmax(120px, auto) auto;
  align-items: end;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.warehouse-category-edit.hidden {
  display: none;
}

.warehouse-category-edit label {
  margin-top: 0;
}

.warehouse-availability-edit {
  display: grid;
  gap: 7px;
}

.warehouse-availability-edit > span:first-child {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.warehouse-availability-note {
  grid-column: span 2;
}

.warehouse-availability-note textarea {
  min-height: 72px;
  resize: vertical;
}

.warehouse-category-edit .secondary-button {
  min-width: 72px;
}

.warehouse-vehicle-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.warehouse-edit-open-button {
  min-width: 68px;
}

.warehouse-edit-open-button.hidden {
  display: none;
}

.warehouse-category-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warehouse-category-edit-message {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0;
  font-size: 0.78rem;
}

.warehouse-category-message {
  padding: 0 18px 16px;
}

.warehouse-driver-item {
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 18px;
}

.warehouse-driver-item .warehouse-category-meta {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}

.warehouse-driver-item .warehouse-category-meta h3 {
  margin-bottom: 7px;
  font-size: 1rem;
  line-height: 1.18;
}

.warehouse-driver-item .warehouse-category-details {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 8px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.warehouse-driver-item .warehouse-category-detail {
  min-height: 58px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.38);
}

.warehouse-missing-vehicles-page .warehouse-category-panel {
  overflow: hidden;
}

.document-item.warehouse-missing-driver-item {
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  grid-template-areas:
    "meta details"
    "actions details";
  align-items: start;
}

.warehouse-missing-driver-item .warehouse-category-meta {
  grid-area: meta;
  align-self: start;
  min-height: auto;
  justify-content: flex-start;
  padding-top: 4px;
}

.warehouse-missing-driver-item .warehouse-category-meta h3 {
  font-size: 1.05rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.warehouse-missing-driver-item .warehouse-category-meta p {
  color: var(--muted);
  font-size: 0.88rem;
}

.warehouse-missing-driver-item .warehouse-category-details {
  grid-area: details;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-self: stretch;
  gap: 10px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.warehouse-missing-driver-item .warehouse-category-detail {
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.warehouse-missing-driver-actions {
  grid-area: actions;
  align-self: end;
  width: 100%;
}

.warehouse-missing-driver-actions .whatsapp-button {
  min-height: 42px;
  justify-content: center;
}

.warehouse-vehicle-search {
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.34fr) auto auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
}

.warehouse-vehicle-search label {
  margin: 0;
}

.warehouse-vehicle-search .secondary-button {
  min-height: 40px;
}

.warehouse-vehicle-item {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.warehouse-vehicle-row-main {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  grid-template-areas:
    "vehicle-meta vehicle-facts"
    "vehicle-meta vehicle-actions";
  align-items: stretch;
  gap: 14px;
}

.warehouse-vehicle-meta {
  grid-area: vehicle-meta;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0;
}

.warehouse-vehicle-meta h3 {
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

.warehouse-vehicle-facts {
  grid-area: vehicle-facts;
  display: grid;
  grid-template-columns: minmax(120px, 1.35fr) repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.warehouse-vehicle-fact {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 7px 9px;
}

.warehouse-vehicle-fact span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.warehouse-vehicle-fact strong {
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-vehicle-row-actions {
  grid-area: vehicle-actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
  align-self: end;
  padding-top: 2px;
}

.warehouse-vehicle-row-actions .secondary-button {
  flex: 0 0 auto;
  min-height: 38px;
  min-width: 70px;
}

.warehouse-vehicle-row-actions .whatsapp-button {
  flex: 0 0 auto;
  width: auto;
}

.warehouse-vehicle-row-actions .warehouse-manage-open-button {
  flex: 0 0 auto;
  width: auto;
  min-height: 38px;
  min-width: 112px;
  margin: 0;
  padding: 0 14px;
}

@media (max-width: 1100px) {
  .warehouse-vehicle-row-main {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    grid-template-areas:
      "vehicle-meta vehicle-facts"
      "vehicle-meta vehicle-actions";
    align-items: stretch;
  }

  .warehouse-vehicle-meta {
    grid-area: vehicle-meta;
  }

  .warehouse-vehicle-facts {
    grid-area: vehicle-facts;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .warehouse-vehicle-row-actions {
    grid-area: vehicle-actions;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  .warehouse-vehicle-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .warehouse-vehicle-row-actions .warehouse-manage-open-button,
  .warehouse-vehicle-row-actions .whatsapp-button,
  .warehouse-vehicle-row-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

.warehouse-vehicle-edit {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding-top: 12px;
}

.warehouse-vehicle-edit label {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.warehouse-vehicle-edit input,
.warehouse-vehicle-edit select {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}

.warehouse-vehicle-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(70px, auto));
  gap: 8px;
}

.warehouse-vehicle-edit-actions .primary-button,
.warehouse-vehicle-edit-actions .secondary-button {
  min-height: 40px;
  margin-top: 0;
  padding: 0 12px;
}

.warehouse-vehicle-edit .form-message {
  grid-column: 1 / -1;
  margin: 0;
  text-align: left;
}

.mechanic-page {
  max-width: 1280px;
}

.mechanic-login-panel {
  width: min(100%, 460px);
  max-width: 460px;
  margin: 0 auto;
  align-self: start;
}

.mechanic-login-panel .submission-form {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.mechanic-login-panel .submission-form label {
  margin-top: 0;
}

.mechanic-login-panel .primary-button {
  margin-top: 2px;
}

.mechanic-login-panel .form-message {
  margin-top: 0;
}

.mechanic-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: var(--section-gap);
}

.mechanic-sidebar,
.mechanic-workspace {
  display: grid;
  gap: var(--section-gap);
}

.mechanic-sidebar {
  position: sticky;
  top: 18px;
}

.mechanic-audit-card {
  min-height: 118px;
  border: 1px solid rgba(6, 111, 209, 0.55);
  border-radius: 6px;
  background: rgba(6, 111, 209, 0.14);
  color: var(--ink);
  display: grid;
  align-content: space-between;
  padding: 18px;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.mechanic-audit-card span {
  color: var(--ink-strong);
  font-size: 1.12rem;
  font-weight: 760;
}

.mechanic-audit-card strong {
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mechanic-stepper {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  list-style: none;
  overflow: hidden;
}

.mechanic-stepper li {
  min-height: 54px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mechanic-stepper li:last-child {
  border-bottom: 0;
}

.mechanic-stepper li::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.mechanic-stepper li.active {
  color: var(--ink-strong);
  background: rgba(6, 111, 209, 0.11);
}

.mechanic-stepper li.active::after {
  background: var(--blue-hover);
}

.mechanic-stepper li.done {
  color: #93c5fd;
}

.mechanic-stepper li.done::after {
  background: #93c5fd;
}

.mechanic-logout-button {
  margin-top: 0;
}

.mechanic-driver-form,
.mechanic-mileage-form,
.mechanic-audit-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
}

.mechanic-driver-form label,
.mechanic-mileage-form label,
.mechanic-audit-filters label {
  margin-top: 0;
}

.mechanic-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line-soft);
  background: var(--line-soft);
}

.mechanic-detail-item {
  min-height: 86px;
  background: rgba(15, 23, 42, 0.34);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px 18px;
}

.mechanic-detail-item span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mechanic-detail-item strong {
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.mechanic-confirm-check {
  margin: 0;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mechanic-confirm-check input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.mechanic-confirm-check span {
  color: var(--ink);
  line-height: 1.45;
}

.mechanic-service-panel form {
  padding: 18px;
}

.mechanic-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mechanic-service-card {
  min-height: 118px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.34);
  cursor: pointer;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 14px;
}

.mechanic-service-card input {
  width: 18px;
  height: 18px;
}

.mechanic-service-card span {
  color: var(--ink-strong);
  font-weight: 760;
  line-height: 1.25;
}

.mechanic-service-card strong {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mechanic-service-card:has(input:checked) {
  border-color: rgba(6, 111, 209, 0.75);
  background: rgba(6, 111, 209, 0.16);
}

.mechanic-service-card.completed {
  cursor: default;
  opacity: 0.48;
}

.mechanic-service-card.completed input {
  cursor: not-allowed;
}

.mechanic-other-service {
  margin-top: 16px;
}

.mechanic-other-service textarea {
  min-height: 92px;
}

.mechanic-thank-you {
  border: 1px solid rgba(147, 197, 253, 0.46);
  border-radius: 6px;
  background: rgba(6, 111, 209, 0.14);
  color: var(--ink-strong);
  padding: 18px;
  font-weight: 760;
  text-align: center;
}

.mechanic-done-list {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line-soft);
  background: var(--line-soft);
}

.mechanic-done-item {
  min-height: 72px;
  background: rgba(15, 23, 42, 0.34);
  display: grid;
  gap: 6px;
  padding: 14px 18px;
}

.mechanic-done-item.history,
.mechanic-done-item.muted {
  opacity: 0.56;
}

.mechanic-done-item h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.96rem;
  font-weight: 740;
}

.mechanic-done-item p,
.mechanic-done-item.muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.mechanic-audit-filters {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  border-bottom: 1px solid var(--line-soft);
}

.mechanic-audit-filters button {
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin-top: 0;
}

.fleet-audit-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.fleet-audit-filters label {
  margin-top: 0;
}

.fleet-audit-filters button {
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin-top: 0;
}

.fleet-audit-item {
  grid-template-columns: minmax(240px, 0.8fr) minmax(620px, 1.2fr);
}

.fleet-audit-details {
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(100px, 1fr));
}

.advance-audit-preview-panel {
  margin-top: var(--section-gap);
}

.advance-audit-item {
  grid-template-columns: minmax(230px, 0.72fr) minmax(560px, 1.28fr);
}

.advance-audit-details {
  grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(110px, 1fr));
}

.advance-audit-filters {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.advance-audit-pagination {
  min-height: 56px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
}

.advance-audit-pagination + .warehouse-category-list {
  border-top: 0;
}

.advance-audit-pagination span {
  min-width: 116px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}

.advance-audit-page .warehouse-export-actions {
  flex-wrap: wrap;
}

.general-audit-page .section-heading.compact {
  align-items: center;
  gap: 14px;
}

.general-audit-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.general-audit-filters label {
  gap: 9px;
  color: var(--ink);
  font-weight: 650;
}

.general-audit-filters input,
.general-audit-filters select {
  min-height: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  line-height: 1.25;
  padding: 0 16px;
}

.general-audit-filters input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  min-width: 0;
  line-height: 52px;
}

.general-audit-filters input[type="date"]::-webkit-date-and-time-value {
  min-height: 52px;
  text-align: left;
}

.general-audit-filters button {
  min-height: 52px;
  height: 52px;
  border-radius: 8px;
}

.general-audit-list {
  transition: opacity 0.16s ease;
}

.general-audit-list.is-refreshing {
  opacity: 0.55;
  pointer-events: none;
}

.document-item.general-audit-loading-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink);
  text-align: center;
}

.document-item.general-audit-loading-card::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(248, 250, 252, 0.88);
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: flee7-spin 0.8s linear infinite;
}

.onboarding-audit-list {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(2, 6, 23, 0.16);
}

.document-item.warehouse-category-item.onboarding-audit-item {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  align-items: stretch;
}

.onboarding-audit-details {
  grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.55fr) minmax(260px, 1.65fr);
}

.document-item.mechanic-audit-item {
  min-height: 0;
  display: block;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 16px;
  overflow: hidden;
}

.mechanic-audit-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 8px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.mechanic-audit-details .warehouse-category-detail {
  min-width: 0;
  min-height: 68px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.5);
  align-content: center;
}

.mechanic-audit-details .mechanic-audit-driver,
.mechanic-audit-details .mechanic-audit-work {
  grid-column: span 2;
  align-content: start;
}

.mechanic-audit-details .mechanic-audit-driver strong {
  font-size: 1rem;
}

.mechanic-audit-details .warehouse-category-detail strong {
  line-height: 1.32;
}

.warehouse-dashboard .motorbike-summary,
.warehouse-dashboard #motorbikeActionPanel {
  grid-column: 1;
}

.warehouse-dashboard .motorbike-summary {
  display: none;
}

.warehouse-dashboard #motorbikeActionPanel {
  align-items: stretch;
  flex-direction: column;
  min-height: 142px;
}

.warehouse-dashboard #motorbikeActionPanel .action-buttons {
  justify-content: stretch;
}

.warehouse-dashboard #motorbikeActionPanel .primary-button {
  width: 100%;
}

.return-warehouse-field {
  color: var(--muted);
  display: grid;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.return-warehouse-field.hidden {
  display: none;
}

.warehouse-dashboard #companyInventoryPanel,
.warehouse-dashboard #appMotorbikeExchangeRequestPanel,
.warehouse-dashboard #motorbikeAuditPanel {
  grid-column: 2;
}

.warehouse-dashboard #companyInventoryPanel {
  align-self: start;
}

.warehouse-dashboard .audit-panel {
  margin-top: 0;
}

.warehouse-dashboard #appMotorbikeSubmissionForm,
.warehouse-dashboard #appMotorbikeConfirmPanel,
.warehouse-dashboard #appMotorbikeExchangePanel,
.warehouse-dashboard #appMotorbikeExchangeConfirmPanel {
  grid-column: 1 / -1;
}

@media (min-width: 861px) {
  .warehouse-dashboard #warehouseOverviewHeading {
    grid-row: 3;
  }

  .warehouse-dashboard .warehouse-overview-summary {
    grid-row: 4;
  }

  .warehouse-dashboard #warehouseCategoriesHeading {
    grid-row: 5;
  }

  .warehouse-dashboard .warehouse-overview-metrics {
    grid-row: 6;
  }

  .warehouse-dashboard #warehouseSuppliersHeading {
    grid-row: 7;
  }

  .warehouse-dashboard .warehouse-supplier-summary {
    grid-row: 8;
  }

  .warehouse-dashboard #warehouseLocationsHeading {
    grid-row: 9;
  }

  .warehouse-dashboard .warehouse-location-summary {
    grid-row: 10;
  }

  .warehouse-dashboard #fleetTodayMovementsPanel {
    grid-row: 11;
  }

  .warehouse-dashboard #warehouseActionsHeading {
    grid-row: 12;
  }

  .warehouse-dashboard #motorbikeActionPanel {
    grid-row: 13;
  }

  .warehouse-dashboard #companyInventoryPanel {
    grid-row: 12 / span 3;
  }

  .warehouse-dashboard #appMotorbikeExchangeRequestPanel {
    grid-column: 1;
    grid-row: 14;
  }

  .warehouse-dashboard #motorbikeAuditPanel {
    grid-column: 1 / -1;
    grid-row: 15;
  }
}

.profile-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
  box-shadow: var(--shadow);
}

.profile-row {
  min-height: 78px;
  background: var(--panel);
  padding: 15px 18px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.profile-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-row strong {
  color: var(--ink-strong);
  font-size: 1.08rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.documents-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.section-heading {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.section-heading h2 {
  margin-bottom: 0;
  color: var(--ink-strong);
  font-size: 1.2rem;
  font-weight: 650;
}

.section-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.section-heading.compact {
  min-height: 58px;
}

.documents-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.document-item {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.document-item:last-child {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.document-item h3 {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.document-item p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.document-action {
  min-width: 104px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.onboarding-application-list {
  gap: 12px;
  padding: 14px;
}

.onboarding-application-list .onboarding-application-item {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.76fr) minmax(0, 0.82fr) minmax(0, 0.74fr) minmax(0, 1.08fr) minmax(0, 0.82fr) minmax(0, 0.98fr) minmax(0, 1.35fr) 156px;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  padding: 0;
}

.onboarding-application-list .onboarding-application-item.rejected-onboarding-item {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

.onboarding-application-list .onboarding-empty-item {
  width: 100%;
  grid-template-columns: 1fr;
  margin-top: 0;
}

.company-inventory-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(145px, 1fr));
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.company-inventory-filter label {
  min-width: 0;
  margin: 0;
}

.company-inventory-filter input,
.company-inventory-filter select {
  width: 100%;
  min-width: 0;
}

.company-inventory-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.company-inventory-pagination.hidden {
  display: none;
}

.company-vehicle-row {
  min-height: 116px;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 520px);
  align-items: center;
  column-gap: 28px;
  padding: 20px 22px;
}

.company-vehicle-row .warehouse-actions {
  display: grid;
  grid-template-columns: 120px 126px 96px 126px;
  grid-template-areas:
    "stamp availability reserve assign"
    ". . . delete";
  align-items: center;
  justify-content: end;
  gap: 10px 12px;
  width: 100%;
  min-width: 0;
}

.company-vehicle-row .warehouse-actions > * {
  align-self: center;
  justify-self: stretch;
}

.company-vehicle-row .warehouse-actions > :nth-child(1) {
  grid-area: stamp;
}

.company-vehicle-row .warehouse-actions > :nth-child(2) {
  grid-area: availability;
}

.company-vehicle-row .warehouse-actions > :nth-child(3) {
  grid-area: reserve;
}

.company-vehicle-row .warehouse-actions > :nth-child(4) {
  grid-area: assign;
}

.company-vehicle-row .warehouse-actions > :nth-child(5) {
  grid-area: delete;
}

.company-vehicle-row .warehouse-actions > :only-child {
  grid-column: 4;
  grid-area: auto;
}

.company-vehicle-row .warehouse-actions .danger-button {
  justify-self: stretch;
}

.warehouse-actions {
  min-width: 278px;
  flex-wrap: wrap;
}

.warehouse-actions .secondary-button {
  min-width: 78px;
}

.company-vehicle-row .warehouse-actions .secondary-button {
  width: 100%;
  min-width: 0;
}

.warehouse-not-ok-reason {
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 6px;
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
  padding: 7px 10px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.fleet-notification-item {
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  align-items: center;
}

.fleet-notification-meta {
  min-width: 0;
}

.fleet-notification-meta h3 {
  margin-bottom: 7px;
}

.fleet-notification-meta p {
  margin-bottom: 8px;
  color: var(--muted);
  line-height: 1.42;
}

.fleet-notification-time {
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 750;
}

.fleet-notification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.fleet-notification-actions .primary-button,
.fleet-notification-actions .secondary-button {
  min-width: 86px;
  min-height: 38px;
  margin-top: 0;
}

.fleet-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.84), rgba(69, 10, 10, 0.64)),
    var(--panel);
  box-shadow: 0 20px 48px rgba(127, 29, 29, 0.24);
  padding: 18px 22px;
}

.fleet-alert span {
  display: block;
  color: #fecaca;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fleet-alert h2 {
  margin: 5px 0 4px;
  color: #fff7ed;
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  line-height: 1.18;
}

.fleet-alert p {
  margin: 0;
  color: #fee2e2;
  line-height: 1.42;
}

.fleet-alert .secondary-button {
  border-color: rgba(254, 202, 202, 0.55);
  color: #fff7ed;
  background: rgba(15, 23, 42, 0.28);
  min-width: 108px;
  margin-top: 0;
}

.task-alert {
  color: inherit;
  text-decoration: none;
}

.task-alert > strong {
  border: 1px solid rgba(254, 202, 202, 0.55);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.28);
  color: #fff7ed;
  display: inline-grid;
  min-height: 44px;
  min-width: 108px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  white-space: nowrap;
}

.vehicle-availability-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 34px;
  min-height: 34px;
  margin-top: 0;
  color: var(--ink-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.vehicle-availability-switch input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.vehicle-availability-track {
  position: relative;
  width: 54px;
  height: 34px;
  flex: 0 0 54px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.2);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.38);
  transition: background 160ms ease, border-color 160ms ease;
}

.vehicle-availability-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
}

.vehicle-availability-switch input:checked + .vehicle-availability-track {
  border-color: rgba(14, 165, 233, 0.62);
  background: linear-gradient(135deg, rgba(6, 111, 209, 0.94), rgba(14, 165, 233, 0.72));
}

.vehicle-availability-switch input:checked + .vehicle-availability-track .vehicle-availability-thumb {
  transform: translateX(22px);
}

.vehicle-availability-switch input:disabled + .vehicle-availability-track {
  opacity: 0.58;
}

.vehicle-availability-text {
  min-width: 54px;
  color: var(--muted);
  line-height: 1;
}

.vehicle-availability-switch input:checked ~ .vehicle-availability-text {
  color: #bfdbfe;
}

.availability-note-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(10px);
}

.availability-note-card {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 20px;
}

.availability-note-card h3 {
  margin: 0 0 8px;
  color: var(--ink-strong);
  font-size: 1.05rem;
}

.availability-note-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.availability-note-card textarea {
  min-height: 108px;
  resize: vertical;
}

.availability-note-card input {
  margin-top: 0;
}

.reservation-note-card {
  display: grid;
  gap: 12px;
}

.availability-note-message {
  min-height: 18px;
  margin: 8px 0 0 !important;
}

.availability-note-actions {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}

.availability-note-actions .primary-button,
.availability-note-actions .secondary-button {
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin-top: 0;
  padding: 0 16px;
}

.reservation-note-actions {
  grid-template-columns: 76px 76px minmax(0, 1fr);
}

.audit-panel {
  margin-top: 24px;
}

.audit-more-button {
  width: auto;
  min-width: 112px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
}

.audit-item {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.audit-meta {
  display: grid;
  gap: 7px;
}

.audit-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.audit-title-row h3 {
  margin-bottom: 0;
}

.audit-status {
  flex: 0 0 auto;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: #bfdbfe;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audit-time,
.audit-message {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.download-button {
  background: var(--blue);
  color: var(--ink-strong);
}

.download-button:hover {
  background: var(--blue-hover);
}

.flee7-loading-indicator {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  max-width: min(92vw, 360px);
  transform: translate(-50%, -16px);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
  color: #f8fafc;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  padding: 9px 15px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.flee7-loading-indicator[hidden] {
  display: none !important;
}

.flee7-loading-indicator.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.flee7-loading-indicator::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(248, 250, 252, 0.92);
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: flee7-spin 0.8s linear infinite;
}

.flee7-loading-indicator::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -5px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
}

.flee7-loading-bar {
  position: absolute;
  left: 14px;
  bottom: -5px;
  height: 2px;
  width: 42%;
  border-radius: 999px;
  background: #38bdf8;
  animation: flee7-loading-slide 1s ease-in-out infinite;
}

.flee7-stage-progress {
  display: grid;
  gap: 8px;
  margin: 0 18px 18px;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.44);
  padding: 12px 14px;
}

.housing-page #housingLoadingProgress.flee7-stage-progress {
  margin-top: 18px;
}

.driver-information-page #driverInformationLoadingProgress.flee7-stage-progress {
  margin-top: 18px;
}

.flee7-stage-progress[hidden] {
  display: none;
}

.flee7-stage-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.flee7-stage-progress-copy strong {
  color: var(--ink-strong);
  font-size: 0.9rem;
}

.flee7-stage-progress-copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: right;
}

.flee7-stage-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.flee7-stage-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #38bdf8;
  transition: width 0.2s ease;
}

.flee7-stage-progress.is-ready {
  border-color: rgba(52, 211, 153, 0.3);
}

.flee7-stage-progress.is-ready .flee7-stage-progress-track span {
  background: #34d399;
}

.flee7-stage-progress.is-failed {
  border-color: rgba(248, 113, 113, 0.42);
}

.flee7-stage-progress.is-failed .flee7-stage-progress-track span {
  background: #f87171;
}

.primary-button.is-loading,
.secondary-button.is-loading,
.download-button.is-loading,
.danger-primary-button.is-loading {
  cursor: wait;
  opacity: 0.76;
  pointer-events: none;
}

.primary-button.is-loading,
.secondary-button.is-loading,
.download-button.is-loading,
.danger-primary-button.is-loading {
  gap: 8px;
}

.primary-button.is-loading::before,
.secondary-button.is-loading::before,
.download-button.is-loading::before,
.danger-primary-button.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: flee7-spin 0.8s linear infinite;
}

@keyframes flee7-loading-slide {
  0% {
    transform: translateX(-24%);
  }

  50% {
    transform: translateX(136%);
  }

  100% {
    transform: translateX(-24%);
  }
}

@media (max-width: 640px) {
  .flee7-loading-indicator {
    top: max(10px, env(safe-area-inset-top));
    width: calc(100vw - 32px);
    justify-content: center;
  }

  .flee7-stage-progress {
    margin: 0 14px 14px;
    padding: 11px 12px;
  }

  .housing-page #housingLoadingProgress.flee7-stage-progress {
    margin-top: 14px;
  }

  .driver-information-page #driverInformationLoadingProgress.flee7-stage-progress {
    margin-top: 14px;
  }

  .flee7-stage-progress-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .flee7-stage-progress-copy span {
    text-align: left;
  }
}

.download-button.is-loading,
.download-button.is-disabled {
  cursor: wait;
  opacity: 0.72;
  pointer-events: none;
}

.download-button.is-loading {
  gap: 8px;
}

.download-button.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: flee7-spin 0.8s linear infinite;
}

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

.whatsapp-button {
  width: auto;
  min-width: 128px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 8px;
  background: rgba(22, 163, 74, 0.14);
  color: #bbf7d0;
  font-size: 0.9rem;
  font-weight: 780;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.whatsapp-button:hover,
.whatsapp-button:focus-visible {
  border-color: rgba(34, 197, 94, 0.7);
  background: rgba(22, 163, 74, 0.22);
  color: #dcfce7;
  outline: none;
}

.whatsapp-button.is-disabled,
.whatsapp-button:disabled {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.34);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.compact-button.whatsapp-button,
.whatsapp-button.compact-button {
  min-height: 40px;
  min-width: 112px;
}

@media (max-width: 640px) {
  .whatsapp-button {
    width: 100%;
    min-width: 0;
  }

  .task-card-actions,
  .seven-days-contact-actions {
    justify-content: stretch;
  }
}

.action-link {
  width: auto;
  min-width: 180px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 0;
}

.action-buttons .primary-button,
.action-buttons .secondary-button {
  width: auto;
  min-width: 132px;
  margin-top: 0;
}

.missing-badge {
  height: 34px;
  min-height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber-soft);
  color: var(--amber);
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.dashboard-footer {
  display: flex;
  justify-content: flex-end;
  padding-bottom: env(safe-area-inset-bottom);
}

.admin-dashboard {
  gap: 16px;
}

.admin-dashboard .dashboard-title h1 {
  text-align: center;
}

.admin-dashboard .dashboard-title .secondary-button {
  width: auto;
  min-width: 96px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-stat,
.analytics-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.admin-stat {
  min-height: 104px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 16px;
}

.admin-stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-stat strong {
  color: var(--ink-strong);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 750;
  line-height: 1;
}

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

.analytics-panel {
  overflow: hidden;
}

.analytics-list {
  display: grid;
}

.analytics-row,
.analytics-empty {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
}

.fleet-inventory-error {
  flex-wrap: wrap;
}

.fleet-inventory-error .secondary-button {
  min-width: 96px;
}

.analytics-list .analytics-row:first-child,
.analytics-list .analytics-empty:first-child {
  border-top: 0;
}

.analytics-row strong {
  color: var(--ink-strong);
  font-size: 0.98rem;
  font-weight: 650;
}

.analytics-row p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.analytics-row > span {
  min-width: 64px;
  color: #93c5fd;
  font-weight: 750;
  text-align: right;
}

.analytics-empty {
  justify-content: center;
  color: var(--muted);
  font-weight: 650;
}

.compact-list .analytics-row {
  min-height: 52px;
}

.action-panel,
.submission-panel,
.confirmation-panel,
.saved-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.action-panel p {
  margin-bottom: 0;
  color: var(--muted);
}

.motorbike-layout {
  width: min(860px, calc(100vw - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 40px;
}

.intake-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-link {
  color: var(--ink-strong);
  text-decoration: none;
}

.intake-card {
  min-height: calc(100vh - 128px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.intake-card .login-card h1 {
  margin-bottom: 20px;
  color: var(--ink-strong);
  font-size: 1.25rem;
  font-weight: 650;
  text-align: center;
}

.intake-dashboard {
  width: 100%;
  min-height: 0;
  padding-top: 0;
}

.intake-dashboard .dashboard-title h1 {
  text-align: left;
}

.submission-panel {
  overflow: hidden;
}

.submission-card {
  overflow: hidden;
}

.confirmation-panel,
.saved-panel {
  overflow: hidden;
}

.submission-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: rgba(7, 12, 24, 0.82);
  box-shadow: none;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px);
}

.submission-modal .submission-card {
  width: min(100%, 520px);
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.submission-modal .section-heading {
  border-bottom: 1px solid rgba(147, 197, 253, 0.24);
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.2), rgba(23, 32, 51, 0.98));
}

.confirmation-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: rgba(7, 12, 24, 0.82);
  box-shadow: none;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px);
}

.confirmation-card {
  width: min(100%, 520px);
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.confirmation-alert {
  border-bottom: 1px solid rgba(147, 197, 253, 0.24);
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.26), rgba(23, 32, 51, 0.98));
  padding: 22px 20px 18px;
  text-align: center;
}

.confirmation-alert span {
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confirmation-alert h2 {
  margin: 10px 0 10px;
  color: var(--ink-strong);
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: 0;
}

.confirmation-alert p {
  margin: 0 auto;
  max-width: 390px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.danger-alert {
  border-bottom-color: rgba(248, 113, 113, 0.28);
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.32), rgba(23, 32, 51, 0.98));
}

.danger-alert span {
  color: #fecaca;
}

.confirmation-details {
  border-top: 0;
}

.confirmation-warning {
  margin: 16px 18px 18px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 6px;
  background: var(--amber-soft);
  color: #fde68a;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
}

.danger-warning {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

.submission-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
}

.advance-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.advance-tab {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.advance-tab.active {
  border-color: rgba(59, 130, 246, 0.95);
  background: linear-gradient(135deg, rgba(14, 116, 210, 0.82), rgba(37, 99, 235, 0.72));
  color: var(--ink-strong);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset;
}

.advance-tab-panel.hidden {
  display: none;
}

.advance-page .compact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.advance-request-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 18px 6px;
}

.advance-request-view-toggle .secondary-button {
  min-height: 36px;
}

.advance-request-view-toggle .secondary-button.active {
  border-color: rgba(59, 130, 246, 0.76);
  background: rgba(59, 130, 246, 0.16);
  color: var(--ink-strong);
}

.advance-request-card.status-approved-paid {
  border-left-color: rgba(34, 197, 94, 0.82);
  background: linear-gradient(90deg, rgba(22, 101, 52, 0.15), rgba(15, 23, 42, 0.34) 42%);
}

.advance-request-card.status-declined {
  border-left-color: rgba(248, 113, 113, 0.86);
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.16), rgba(15, 23, 42, 0.34) 42%);
}

.advance-request-status-badge {
  justify-self: start;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.44);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.advance-request-status-badge.status-approved-paid {
  border-color: rgba(34, 197, 94, 0.42);
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.22);
}

.advance-request-status-badge.status-declined {
  border-color: rgba(248, 113, 113, 0.44);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.22);
}

.advance-request-card.status-cancelled {
  border-left-color: rgba(148, 163, 184, 0.62);
  background: linear-gradient(90deg, rgba(71, 85, 105, 0.14), rgba(15, 23, 42, 0.34) 42%);
}

.advance-request-status-badge.status-cancelled {
  border-color: rgba(148, 163, 184, 0.38);
  color: #cbd5e1;
  background: rgba(71, 85, 105, 0.2);
}

.advance-request-card .atokes-order-actions {
  align-content: end;
  align-self: end;
  justify-items: stretch;
}

.advance-request-card .atokes-order-actions .primary-button,
.advance-request-card .atokes-order-actions .secondary-button {
  width: 100%;
  min-width: 0;
  white-space: normal;
}

.advance-request-actions {
  width: min(100%, 300px);
  min-width: 220px;
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 2px 0;
}

.advance-request-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.advance-request-contact-row {
  grid-template-columns: 1fr;
}

.advance-request-action-row > .advance-request-action:only-child {
  grid-column: 1 / -1;
}

.advance-request-action {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 0;
  padding-left: 12px;
  padding-right: 12px;
  line-height: 1.15;
  white-space: normal;
}

.advance-request-action.whatsapp-button {
  min-width: 0;
  min-height: 44px;
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(22, 163, 74, 0.16);
}

.advance-request-primary-action {
  box-shadow: 0 10px 22px rgba(15, 118, 210, 0.2);
}

.advance-ledger-actions {
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.advance-ledger-actions > .compact-button {
  min-width: 92px;
}

.advance-ledger-filter-panel {
  margin: 20px 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.advance-ledger-filter-heading {
  border-top: 0;
  padding: 18px 18px 14px;
  align-items: center;
  gap: 12px;
}

.advance-ledger-filter-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
}

.advance-ledger-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.advance-ledger-view-toggle .secondary-button {
  min-height: 38px;
  min-width: 112px;
}

.advance-ledger-view-toggle .secondary-button.active {
  border-color: rgba(59, 130, 246, 0.76);
  background: rgba(59, 130, 246, 0.16);
  color: var(--ink-strong);
}

.advance-ledger-filters {
  padding: 18px;
  border-top: 1px solid var(--line-soft);
}

.advance-ledger-filter-panel .warehouse-category-message {
  margin: 0;
  padding: 0 16px 14px;
}

.advance-page #advanceLedgerActiveList {
  padding-top: 0;
}

.advance-ledger-warning {
  grid-column: 1 / -1;
  min-height: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
  text-align: left;
}

.advance-ledger-actions {
  flex-wrap: wrap;
}

.advance-ledger-driver-card {
  display: grid;
  gap: 18px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(15, 23, 42, 0.44);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.14);
}

.advance-ledger-driver-top {
  display: grid;
  gap: 14px;
}

.advance-ledger-driver-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.advance-ledger-driver-header h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
}

.advance-ledger-driver-header p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.advance-ledger-driver-header .advance-ledger-driver-work-account {
  color: #67e8f9;
  font-size: 0.78rem;
  font-weight: 800;
}

.advance-ledger-driver-total {
  border-color: rgba(59, 130, 246, 0.36);
  background: rgba(15, 118, 210, 0.1);
}

.advance-ledger-driver-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: 12px;
  width: min(100%, 280px);
  min-width: 240px;
}

.advance-ledger-driver-actions .secondary-button,
.advance-ledger-driver-actions .whatsapp-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 0;
  padding-left: 12px;
  padding-right: 12px;
  line-height: 1.15;
  white-space: normal;
}

.advance-ledger-driver-action.whatsapp-button {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(22, 163, 74, 0.16);
}

.advance-ledger-driver-action.is-share-ready {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(37, 99, 235, 0.2);
}

.advance-ledger-driver-total span,
.advance-ledger-driver-breakdown > span,
.advance-ledger-compact-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.advance-ledger-driver-total strong {
  display: block;
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 1.08rem;
  font-weight: 900;
  white-space: nowrap;
}

.advance-ledger-driver-stats {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) repeat(2, minmax(140px, 0.85fr));
  gap: 12px;
}

.advance-ledger-compact-stat {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.38);
}

.advance-ledger-compact-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 0.95rem;
}

.advance-ledger-driver-breakdown {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.advance-ledger-month-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.advance-ledger-month-list span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--ink);
  background: rgba(15, 23, 42, 0.42);
  font-size: 0.82rem;
  font-weight: 700;
}

.advance-ledger-driver-items {
  display: grid;
  gap: 8px;
}

.advance-ledger-driver-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) minmax(88px, auto);
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.advance-ledger-driver-item strong {
  color: var(--ink-strong);
}

.advance-ledger-driver-item span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.3;
}

.advance-ledger-driver-item-description {
  color: var(--ink) !important;
  font-weight: 800;
}

.advance-ledger-driver-item-amount {
  text-align: right;
  white-space: nowrap;
}

.advance-ledger-driver-item-open {
  width: 100%;
  min-width: 88px;
  min-height: 40px;
  margin-top: 0;
}

.advance-page #advanceLedgerActiveList .atokes-order-card {
  align-items: start;
}

.advance-page #advanceLedgerActiveList .atokes-order-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.advance-ledger-table-wrap {
  margin: 14px 18px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: rgba(15, 23, 42, 0.34);
}

.advance-ledger-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
}

.advance-ledger-matrix th,
.advance-ledger-matrix td {
  min-width: 135px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.78);
}

.advance-ledger-matrix th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--muted);
  background: #111827;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.advance-ledger-matrix .numeric {
  text-align: right;
}

.advance-ledger-matrix .strong-cell {
  color: var(--ink-strong);
  font-weight: 900;
}

.advance-ledger-matrix .sticky-col {
  position: sticky;
  z-index: 2;
  background: #111827;
}

.advance-ledger-matrix th.sticky-col {
  z-index: 4;
}

.advance-ledger-matrix .sticky-col-first {
  left: 0;
  min-width: 130px;
}

.advance-ledger-matrix .sticky-col-second {
  left: 130px;
  min-width: 190px;
}

.advance-ledger-matrix-total td {
  background: rgba(30, 41, 59, 0.94);
  color: var(--ink-strong);
  font-weight: 900;
}

.section-note {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.45;
}

.advance-import-box {
  margin: 0 18px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.advance-import-box > .section-heading {
  border-top: 0;
}

.advance-import-preview {
  border-top: 1px solid var(--line);
  padding-bottom: 16px;
}

.advance-import-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.advance-import-stat {
  min-height: 82px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.68);
}

.advance-import-stat span,
.advance-import-block h4 {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.advance-import-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink-strong);
  font-size: 1.05rem;
  font-weight: 900;
}

.advance-import-block {
  padding: 16px 18px 0;
}

.advance-import-block h4 {
  margin: 0 0 10px;
}

.advance-import-list {
  display: grid;
  gap: 8px;
}

.advance-import-list p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(15, 23, 42, 0.38);
  line-height: 1.35;
}

.advance-import-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.advance-import-groups .atokes-order-card {
  margin: 0;
}

.advance-page #advanceCreateStartMonth,
.advance-page #advanceApproveStartMonth,
.advance-page #advanceReceivableRevisionStartMonth {
  display: block;
  width: 100%;
  min-width: 0;
  height: 40px;
  border-radius: 6px;
  padding: 0 13px;
  text-align: left;
  text-align-last: left;
  appearance: none;
  -webkit-appearance: none;
}

.advance-page #advanceCreateStartMonth::-webkit-date-and-time-value,
.advance-page #advanceApproveStartMonth::-webkit-date-and-time-value,
.advance-page #advanceReceivableRevisionStartMonth::-webkit-date-and-time-value {
  min-height: 40px;
  line-height: 40px;
  margin: 0;
  text-align: left;
}

.advance-page #advanceCreateStartMonth::-webkit-datetime-edit,
.advance-page #advanceApproveStartMonth::-webkit-datetime-edit,
.advance-page #advanceReceivableRevisionStartMonth::-webkit-datetime-edit {
  padding: 0;
}

.advance-page .submission-fields.single-column {
  grid-template-columns: 1fr;
}

.advance-schedule-table {
  grid-column: 1 / -1;
  margin: 12px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  background: rgba(15, 23, 42, 0.28);
}

.advance-schedule-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, auto) minmax(90px, auto);
  gap: 16px;
  align-items: center;
  min-width: 390px;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
}

.advance-schedule-row:first-child {
  border-top: 0;
}

.advance-schedule-header {
  background: rgba(148, 163, 184, 0.07);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.advance-schedule-cell {
  min-width: 0;
  color: var(--ink-strong);
  font-weight: 700;
  white-space: nowrap;
}

.advance-schedule-header .advance-schedule-cell {
  color: var(--muted);
  font-weight: 800;
}

#advanceLedgerScheduleTable .advance-schedule-row {
  grid-template-columns: minmax(150px, 1fr) minmax(120px, auto) minmax(90px, auto) minmax(150px, auto);
}

.advance-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 560px) {
  .advance-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .advance-request-view-toggle {
    padding: 14px 12px 4px;
  }

  .advance-request-view-toggle .secondary-button {
    flex: 1 1 150px;
  }

  .advance-request-actions {
    width: 100%;
    min-width: 0;
    gap: 12px;
    margin-top: 2px;
    padding: 4px 0 0;
  }

  .advance-request-action-row {
    gap: 10px;
  }

  .advance-request-action {
    min-height: 46px;
  }

  .advance-ledger-filter-panel {
    margin: 16px 14px 18px;
  }

  .advance-ledger-actions {
    justify-content: stretch;
    width: 100%;
  }

  .advance-ledger-actions .compact-button {
    flex: 1 1 130px;
  }

  .advance-ledger-filters {
    padding: 14px;
    gap: 14px;
  }

  .advance-page #advanceLedgerActiveList {
    padding: 14px;
  }

  .advance-page #advanceLedgerActiveList .atokes-order-meta {
    grid-template-columns: 1fr;
  }

  .advance-ledger-filter-heading {
    padding: 16px 14px 14px;
    align-items: flex-start;
  }

  .advance-ledger-view-toggle {
    justify-content: stretch;
    width: 100%;
  }

  .advance-ledger-view-toggle .secondary-button {
    flex: 1 1 120px;
  }

  .advance-ledger-driver-card {
    margin: 0 0 14px;
    padding: 15px;
    gap: 18px;
  }

  .advance-ledger-driver-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 14px;
  }

  .advance-ledger-driver-total {
    min-width: 0;
    text-align: left;
    grid-column: 1 / -1;
  }

  .advance-ledger-driver-actions {
    justify-items: stretch;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }

  .advance-ledger-driver-actions .secondary-button,
  .advance-ledger-driver-actions .whatsapp-button {
    min-height: 46px;
  }

  .advance-ledger-driver-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .advance-ledger-driver-breakdown {
    padding-top: 4px;
  }

  .advance-ledger-month-list span {
    max-width: 100%;
  }

  .advance-ledger-driver-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .advance-ledger-driver-item-amount {
    text-align: left;
  }

  .advance-ledger-driver-item .secondary-button {
    width: 100%;
  }

  .advance-ledger-table-wrap {
    margin: 12px;
  }

  .advance-ledger-matrix .sticky-col {
    position: static;
  }

  .advance-import-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advance-import-groups {
    grid-template-columns: 1fr;
  }

  .advance-schedule-table {
    margin: 12px 18px 18px;
    overflow-x: visible;
  }

  .advance-schedule-header {
    display: none;
  }

  .advance-schedule-row {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 6px;
  }

  .advance-schedule-cell {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    white-space: normal;
  }

  .advance-schedule-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  #advanceLedgerScheduleTable .advance-schedule-row {
    grid-template-columns: 1fr;
  }

  .advance-schedule-actions {
    justify-content: stretch;
  }

  .advance-schedule-actions > button {
    flex: 1 1 110px;
  }
}

@media (max-width: 360px) {
  .advance-request-action-row {
    grid-template-columns: 1fr;
  }

  .advance-ledger-driver-actions,
  .advance-ledger-driver-stats {
    grid-template-columns: 1fr;
  }

  .advance-ledger-driver-total {
    grid-column: auto;
  }
}

.warehouse-delete-fields {
  grid-template-columns: 1fr;
  padding-bottom: 0;
}

.submission-panel .primary-button {
  width: calc(100% - 36px);
  margin: 0 18px 18px;
}

.submission-panel .form-actions {
  margin: 0 18px 18px;
}

.submission-panel .form-actions .primary-button {
  width: 100%;
  margin: 0;
}

.form-note {
  margin: -4px 18px 16px;
  color: var(--muted);
  font-size: 0.84rem;
}

.confirmation-panel .form-note {
  margin-top: 0;
}

.confirmation-panel .saved-details + .form-note {
  margin-top: 18px;
}

.confirmation-panel .button-row {
  margin: 0 18px 18px;
}

.confirmation-panel .saved-details + .confirmation-actions {
  margin-top: 14px;
}

.confirmation-actions {
  grid-template-columns: 132px 1fr;
}

.confirmation-actions .primary-button,
.confirmation-actions .secondary-button {
  min-height: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.25;
  text-align: center;
}

.exchange-form label {
  display: block;
  padding: 18px 18px 0;
}

.exchange-form .button-row {
  margin: 18px;
}

.exchange-request-actions {
  margin: 18px;
}

.exchange-request-actions .primary-button,
.exchange-request-actions .secondary-button {
  width: 100%;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.saved-panel {
  border-color: rgba(6, 111, 209, 0.42);
  background: var(--blue-soft);
}

.saved-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.saved-details .profile-row {
  border-top: 0;
}

.saved-panel .profile-row strong,
.confirmation-panel .profile-row strong {
  color: var(--ink-strong);
  font-weight: 650;
}

.saved-panel .saved-actions {
  margin: 18px;
}

.saved-panel .saved-actions .secondary-button {
  width: 100%;
}

.landing-body {
  background: #08111f;
}

.landing-body .primary-button,
.landing-body .secondary-button {
  width: auto;
  margin-top: 0;
  min-width: 136px;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px max(18px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 17, 31, 0.88);
  backdrop-filter: blur(18px);
}

.landing-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-strong);
  text-decoration: none;
}

.landing-brand strong {
  display: block;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
}

.landing-brand strong span {
  color: var(--blue-hover);
}

.landing-brand em {
  display: block;
  margin-top: 4px;
  color: #f7c873;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.landing-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.landing-links a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.landing-links a:hover {
  color: var(--ink-strong);
}

.landing-login-link {
  min-width: 118px;
}

.landing-hero {
  position: relative;
  min-height: min(760px, calc(100svh - 42px));
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.landing-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.landing-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 17, 31, 0.96) 0%, rgba(8, 17, 31, 0.84) 30%, rgba(8, 17, 31, 0.38) 64%, rgba(8, 17, 31, 0.18) 100%),
    linear-gradient(180deg, rgba(8, 17, 31, 0.16) 0%, rgba(8, 17, 31, 0.72) 100%);
}

.landing-hero-content {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 64px 0 44px;
}

.landing-kicker,
.landing-section-heading > span,
.landing-panel-copy > span,
.landing-apply-copy > span {
  display: block;
  margin-bottom: 12px;
  color: #f7c873;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.landing-hero h1 {
  width: min(760px, 100%);
  margin-bottom: 18px;
  color: var(--ink-strong);
  font-size: clamp(3.2rem, 7vw, 6.7rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 0.94;
}

.landing-hero-copy {
  width: min(620px, 100%);
  margin-bottom: 26px;
  color: #d7dee9;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.55;
}

.landing-hero-actions,
.landing-apply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.landing-signal-grid {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 46px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.18);
}

.landing-signal-grid div {
  min-height: 104px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  background: rgba(10, 23, 42, 0.78);
}

.landing-signal-grid strong,
.landing-feature-grid h3,
.landing-step-grid h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 780;
  line-height: 1.25;
}

.landing-signal-grid span,
.landing-feature-grid p,
.landing-step-grid p,
.landing-panel-copy p,
.landing-apply-copy p {
  margin: 0;
  color: #aeb8c8;
  font-size: 0.94rem;
  line-height: 1.55;
}

.landing-section {
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 72px 0;
}

.landing-section-heading {
  width: min(760px, 100%);
  margin-bottom: 28px;
}

.landing-section-heading h2,
.landing-panel-copy h2,
.landing-apply-copy h2 {
  margin-bottom: 0;
  color: var(--ink-strong);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.04;
}

.landing-feature-grid,
.landing-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-feature-grid article,
.landing-step-grid article {
  min-height: 212px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.96), rgba(15, 23, 42, 0.96));
  padding: 22px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

.landing-feature-grid h3,
.landing-step-grid h3 {
  margin-bottom: 12px;
  font-size: 1.15rem;
}

.landing-operations {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 42px;
  padding: 76px max(18px, calc((100vw - 1180px) / 2));
  background: #e8edf4;
  color: #0b1220;
}

.landing-panel-copy {
  align-self: center;
}

.landing-panel-copy > span {
  color: #066fd1;
}

.landing-panel-copy h2 {
  color: #0b1220;
}

.landing-panel-copy p {
  margin-top: 18px;
  color: #415063;
  font-size: 1.03rem;
}

.landing-ops-list {
  display: grid;
  gap: 10px;
}

.landing-ops-list div {
  min-height: 78px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #f9fbfd;
  padding: 16px 18px;
}

.landing-ops-list strong {
  color: #066fd1;
  font-size: 1rem;
  font-weight: 850;
}

.landing-ops-list span {
  color: #172033;
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.35;
}

.landing-process {
  padding-top: 82px;
}

.landing-step-grid article {
  position: relative;
  min-height: 230px;
}

.landing-step-grid article > span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  border-radius: 50%;
  background: rgba(6, 111, 209, 0.2);
  color: #93c5fd;
  font-size: 1rem;
  font-weight: 850;
}

.landing-apply {
  width: min(1180px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 48px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 111, 209, 0.18), rgba(15, 23, 42, 0.98)),
    #111827;
  padding: 34px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.26);
}

.landing-apply-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.landing-apply-copy p {
  width: min(680px, 100%);
  margin-top: 14px;
}

.seven-days-page {
  max-width: 1280px;
}

.seven-days-upload-panel,
.seven-days-section,
.seven-days-guidelines {
  grid-column: 1 / -1;
}

.seven-days-upload-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, auto);
  align-items: end;
  gap: 14px;
  padding: 18px;
}

.seven-days-upload-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  align-items: center;
  gap: 10px;
}

.seven-days-upload-actions .primary-button,
.seven-days-upload-actions .secondary-button {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
  padding: 0 18px;
  white-space: nowrap;
}

.danger-outline {
  border-color: rgba(248, 113, 113, 0.54);
  color: #fecaca;
}

.danger-outline:hover {
  border-color: rgba(248, 113, 113, 0.82);
}

.seven-days-upload-form label,
.seven-days-edit-grid label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.seven-days-upload-form input[type="file"] {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-deep);
  color: var(--ink);
  padding: 10px;
}

.seven-days-warning-list {
  display: grid;
  gap: 8px;
  padding: 0 18px 18px;
}

.seven-days-warning-list:empty {
  display: none;
}

.seven-days-warning-list p {
  margin: 0;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 6px;
  background: var(--amber-soft);
  color: #fde68a;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 650;
}

.seven-days-summary-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.seven-days-filter-card {
  width: 100%;
  appearance: none;
  border-color: var(--line);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.seven-days-filter-card:hover {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(30, 41, 59, 0.96);
}

.seven-days-filter-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 111, 209, 0.3);
}

.seven-days-filter-card.active {
  border-color: rgba(6, 111, 209, 0.9);
  background: linear-gradient(180deg, rgba(6, 111, 209, 0.2), rgba(30, 41, 59, 0.98));
}

.seven-days-filter-card.active span {
  color: #bfdbfe;
}

.seven-days-visa-summary-card {
  border-color: rgba(34, 197, 94, 0.46);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.16), rgba(30, 41, 59, 0.98)),
    var(--panel);
}

.seven-days-visa-summary-card.active {
  border-color: rgba(34, 197, 94, 0.82);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.22), rgba(30, 41, 59, 0.98)),
    var(--panel);
}

.seven-days-card-breakdown {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.seven-days-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.seven-days-section-search {
  width: min(100%, 320px);
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seven-days-section-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-deep);
  color: var(--ink-strong);
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.seven-days-section-search input::placeholder {
  color: var(--muted);
}

.seven-days-empty {
  min-height: 72px;
  align-items: center;
  padding: 18px;
}

.seven-days-empty h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
}

.seven-days-row {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  padding: 18px;
}

.seven-days-row.visa-driver,
.seven-days-audit-row.visa-driver {
  border-color: rgba(34, 197, 94, 0.46);
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.14), rgba(15, 23, 42, 0.36) 34%),
    rgba(15, 23, 42, 0.5);
}

.seven-days-audit-row:last-child {
  border-bottom: 0;
}

.seven-days-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.seven-days-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.seven-days-row-head h3 {
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 760;
}

.seven-days-title-line h3 {
  margin-bottom: 0;
}

.seven-days-visa-badge {
  border: 1px solid rgba(34, 197, 94, 0.56);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  padding: 5px 9px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.seven-days-row-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.45;
}

.seven-days-priority {
  min-width: 156px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 999px;
  background: rgba(6, 111, 209, 0.14);
  color: #bfdbfe;
  padding: 9px 12px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.seven-days-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.seven-days-contact-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.seven-days-detail {
  min-height: 72px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.28);
  padding: 12px;
}

.seven-days-detail span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.seven-days-detail strong {
  color: var(--ink-strong);
  font-size: 0.84rem;
  font-weight: 740;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.seven-days-activity-trail {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 6px;
  background: rgba(6, 111, 209, 0.1);
  padding: 12px 14px;
}

.seven-days-activity-trail span {
  color: #bfdbfe;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.seven-days-activity-trail p {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.45;
}

.seven-days-edit-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.5fr) auto;
  align-items: end;
  gap: 12px;
}

.seven-days-edit-grid.has-corrected-phone {
  grid-template-columns: minmax(170px, 0.8fr) minmax(180px, 0.8fr) minmax(240px, 1.2fr) auto;
}

.seven-days-edit-grid.wrong-phone-only {
  grid-template-columns: minmax(220px, 320px) minmax(280px, 1fr) minmax(150px, auto);
  justify-content: start;
  align-items: start;
}

.seven-days-edit-grid.close-id-only {
  grid-template-columns: minmax(280px, 1fr) minmax(180px, auto);
  align-items: end;
}

.seven-days-edit-grid.today-action-row {
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr);
}

.seven-days-edit-grid.today-action-row.call-later-date-open {
  grid-template-columns: minmax(170px, 0.72fr) minmax(260px, 1fr) minmax(300px, 1fr);
}

.seven-days-edit-grid select,
.seven-days-edit-grid input,
.seven-days-edit-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-deep);
  color: var(--ink-strong);
  padding: 11px 12px;
}

.seven-days-edit-grid select,
.seven-days-edit-grid input {
  min-height: 46px;
}

.seven-days-edit-grid textarea {
  min-height: 86px;
  resize: vertical;
}

.seven-days-save-cell {
  min-width: 150px;
  display: grid;
  gap: 8px;
}

.seven-days-save-actions {
  display: grid;
  gap: 8px;
}

.seven-days-edit-grid.today-action-row .seven-days-save-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seven-days-save-cell .primary-button,
.seven-days-save-cell .secondary-button {
  min-height: 46px;
}

.seven-days-action-button {
  white-space: normal;
  line-height: 1.2;
}

.seven-days-save-cell .form-message {
  min-height: 18px;
  margin: 0;
  font-size: 0.72rem;
}

.seven-days-save-cell .form-message:empty {
  display: none;
  min-height: 0;
}

.seven-days-audit-row {
  align-items: start;
}

.seven-days-guidelines-body {
  padding: 18px;
}

.seven-days-guidelines-body p {
  margin-bottom: 14px;
  color: var(--ink-strong);
  font-weight: 720;
}

.seven-days-guidelines-body ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  line-height: 1.5;
}

@media (max-width: 1199px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .brand-panel {
    display: none;
  }

  .seven-days-upload-form {
    grid-template-columns: 1fr;
  }

  .seven-days-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seven-days-edit-grid {
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr);
  }

  .seven-days-edit-grid .seven-days-notes-field,
  .seven-days-save-cell {
    grid-column: 1 / -1;
  }

  .targets-driver-item,
  .targets-audit-item {
    grid-template-columns: 1fr;
  }

  .targets-driver-item {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    grid-template-areas:
      "summary metrics"
      "actions metrics";
  }

  .targets-driver-actions {
    align-content: end;
    justify-items: stretch;
  }

  .targets-driver-actions .secondary-button {
    width: 100%;
  }

  .company-vehicle-row {
    grid-template-columns: minmax(0, 1fr) minmax(318px, 318px);
  }

  .company-inventory-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-vehicle-row .warehouse-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "stamp availability"
      "reserve assign"
      ". delete";
    gap: 10px;
  }

  .company-vehicle-row .warehouse-actions > :only-child {
    grid-column: 2;
  }

  .targets-override-note {
    max-width: none;
    text-align: left;
  }

  .targets-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .targets-reason-field,
  .targets-form-actions {
    grid-column: 1 / -1;
  }

  .onboarding-summary.driver-information-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .driver-information-card {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    grid-template-areas:
      "summary details"
      "actions details";
  }

  .driver-information-card.compact-view {
    grid-template-columns: minmax(220px, 1fr) minmax(250px, 320px);
    grid-template-areas: "summary actions";
  }

  .driver-information-actions {
    align-content: end;
    justify-items: stretch;
  }

  .driver-information-actions .secondary-button {
    width: 100%;
  }

  .driver-information-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-information-current-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suppliers-supplier-card,
  .suppliers-history-item {
    grid-template-columns: 1fr;
  }

  .suppliers-supplier-card {
    grid-template-areas:
      "name"
      "meta"
      "stats";
  }

  .supplier-filter-grid,
  .supplier-bulk-actions,
  .supplier-payment-card-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-bulk-buttons,
  .supplier-history-grid,
  .supplier-payment-card-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .supplier-payment-note-group {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  }

  .supplier-payment-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .landing-nav {
    position: relative;
    flex-wrap: wrap;
    padding: 14px 18px;
  }

  .landing-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 18px;
  }

  .landing-login-link {
    min-width: 112px;
  }

  .landing-hero {
    min-height: auto;
  }

  .landing-hero-image {
    object-position: 64% center;
  }

  .landing-hero-shade {
    background:
      linear-gradient(90deg, rgba(8, 17, 31, 0.97) 0%, rgba(8, 17, 31, 0.82) 58%, rgba(8, 17, 31, 0.42) 100%),
      linear-gradient(180deg, rgba(8, 17, 31, 0.18) 0%, rgba(8, 17, 31, 0.86) 100%);
  }

  .landing-hero-content {
    padding: 56px 0 34px;
  }

  .landing-signal-grid,
  .landing-feature-grid,
  .landing-step-grid,
  .landing-operations,
  .landing-apply {
    grid-template-columns: 1fr;
  }

  .landing-signal-grid {
    margin-top: 36px;
  }

  .landing-section {
    padding: 54px 0;
  }

  .landing-operations {
    padding: 56px 18px;
  }

  .landing-apply {
    padding: 26px;
  }

  .landing-apply-actions {
    justify-content: stretch;
  }

  .landing-apply-actions .primary-button,
  .landing-apply-actions .secondary-button {
    width: 100%;
  }

  .dashboard {
    width: min(100% - 24px, 640px);
    padding: 16px 0 28px;
  }

  .admin-summary-grid,
  .admin-columns {
    grid-template-columns: 1fr;
  }

  .profile-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .company-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payout-upload-form {
    grid-template-columns: 1fr;
  }

  .housing-page {
    width: min(100% - 20px, 640px);
    gap: 14px;
  }

  .housing-mobile-tabs {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 30;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    border: 1px solid rgba(147, 197, 253, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    scrollbar-width: none;
  }

  .housing-mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  .housing-mobile-tabs button {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0;
  }

  .housing-mobile-tabs button.active {
    border-color: rgba(96, 165, 250, 0.75);
    background: linear-gradient(135deg, rgba(6, 111, 209, 0.92), rgba(37, 99, 235, 0.72));
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
  }

  .housing-page[data-housing-tab="overview"] [data-housing-panel]:not([data-housing-panel="overview"]),
  .housing-page[data-housing-tab="money"] [data-housing-panel]:not([data-housing-panel="money"]),
  .housing-page[data-housing-tab="houses"] [data-housing-panel]:not([data-housing-panel="houses"]),
  .housing-page[data-housing-tab="setup"] [data-housing-panel]:not([data-housing-panel="setup"]),
  .housing-page[data-housing-tab="assign"] [data-housing-panel]:not([data-housing-panel="assign"]),
  .housing-page[data-housing-tab="swap"] [data-housing-panel]:not([data-housing-panel="swap"]),
  .housing-page[data-housing-tab="actions"] [data-housing-panel]:not([data-housing-panel="actions"]) {
    display: none;
  }

  .housing-summary.onboarding-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .housing-summary.onboarding-summary > div {
    min-height: 92px;
    padding: 14px;
  }

  .housing-summary.onboarding-summary span {
    font-size: 0.64rem;
    line-height: 1.25;
  }

  .housing-summary strong {
    font-size: clamp(1.38rem, 8vw, 1.8rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .housing-capacity-panel .section-heading.tight,
  .housing-profit-panel .section-heading.tight {
    padding: 18px 16px 6px;
  }

  .housing-capacity-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 78vw);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    padding: 18px 16px 22px;
    scroll-snap-type: x mandatory;
  }

  .housing-capacity-item {
    scroll-snap-align: start;
  }

  .housing-form-grid,
  .housing-filter-grid,
  .housing-layout,
  .housing-profit-layout {
    grid-template-columns: 1fr;
  }

  .housing-swap-review {
    margin: 16px;
    padding: 14px;
  }

  .housing-swap-grid {
    grid-template-columns: 1fr;
  }

  .housing-profit-layout {
    border-top: 0;
    gap: 14px;
    padding: 16px;
  }

  .housing-profit-panel {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.18);
    overflow: hidden;
  }

  .housing-profit-panel + .housing-profit-panel {
    border-left: 1px solid var(--line-soft);
    border-top: 1px solid var(--line-soft);
  }

  .housing-profit-list {
    padding: 18px 14px 20px;
  }

  .housing-profit-metrics,
  .housing-finance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .housing-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .housing-wide-field {
    grid-column: auto;
  }

  .housing-form-grid,
  .housing-filter-grid {
    gap: 12px;
    padding: 16px;
  }

  .housing-reminder-controls,
  .housing-reminder-item {
    grid-template-columns: 1fr;
  }

  .housing-reminder-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .housing-reminder-actions .primary-button,
  .housing-reminder-actions .secondary-button {
    width: 100%;
  }

  .housing-reminder-select {
    justify-content: stretch;
  }

  .housing-reminder-select label {
    width: 100%;
  }

  .housing-house-list {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .housing-external-form {
    grid-template-columns: 1fr;
  }

  .housing-record-item .warehouse-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .housing-house-export-button {
    width: 100%;
  }

  .housing-record-item {
    grid-template-columns: 1fr;
  }

  .housing-detail-body {
    padding: 16px;
  }

  .mechanic-shell {
    grid-template-columns: 1fr;
  }

  .mechanic-sidebar {
    position: static;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .mechanic-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mechanic-stepper li {
    min-height: 72px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .mechanic-stepper li:last-child {
    border-right: 0;
  }

  .mechanic-detail-grid,
  .mechanic-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanic-audit-item {
    grid-template-columns: 1fr;
  }

  .mechanic-audit-details {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanic-audit-details .mechanic-audit-driver,
  .mechanic-audit-details .mechanic-audit-work {
    grid-column: span 2;
  }

  .warehouse-dashboard #motorbikePanel {
    grid-template-columns: 1fr;
  }

  .warehouse-dashboard #warehouseOverviewHeading,
  .warehouse-dashboard #warehouseCategoriesHeading,
  .warehouse-dashboard #warehouseSuppliersHeading,
  .warehouse-dashboard #warehouseLocationsHeading,
  .warehouse-dashboard #warehouseActionsHeading {
    grid-column: 1;
    grid-row: auto;
  }

  .warehouse-dashboard .warehouse-overview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .warehouse-dashboard .warehouse-overview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-dashboard .warehouse-supplier-summary,
  .warehouse-dashboard .warehouse-location-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .targets-control-grid,
  .targets-rules-grid {
    grid-template-columns: 1fr;
  }

  .charges-page .targets-rules-grid,
  .charges-page .targets-edit-form {
    grid-template-columns: 1fr;
  }

  .targets-driver-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suppliers-page,
  .supplier-portal-page {
    width: min(100% - 24px, 640px);
  }

  .supplier-portal-tabs {
    flex-wrap: wrap;
  }

  .supplier-portal-tab {
    flex: 1 1 180px;
  }

  .supplier-card-stats,
  .supplier-bike-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-payment-workflow-heading,
  .supplier-payment-section-heading,
  .supplier-payment-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .supplier-payment-workflow-actions,
  .supplier-payment-workflow-actions .secondary-button,
  .supplier-payment-action-button,
  .supplier-payment-section-heading .download-button {
    width: 100%;
  }

  .supplier-payment-proof-row,
  .supplier-payment-proof-upload,
  .supplier-payment-note-group {
    grid-template-columns: 1fr;
  }

  .supplier-payment-proof-actions {
    align-items: stretch;
    justify-content: stretch;
  }

  .supplier-payment-proof-actions .secondary-button {
    width: 100%;
  }

  .onboarded-export-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suppliers-bike-card {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }

  .suppliers-bike-card.supplier-bike-editable {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    grid-template-areas:
      "summary metrics"
      "controls controls";
  }

  .supplier-card-actions {
    margin-top: 16px;
  }

  .supplier-card-actions .secondary-button {
    width: 112px;
  }

  .warehouse-summary-total .warehouse-summary-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-dashboard .motorbike-summary,
  .warehouse-dashboard #motorbikeActionPanel,
  .warehouse-dashboard #companyInventoryPanel,
  .warehouse-dashboard #appMotorbikeExchangeRequestPanel,
  .warehouse-dashboard #motorbikeAuditPanel,
  .warehouse-dashboard #appMotorbikeSubmissionForm,
  .warehouse-dashboard #appMotorbikeConfirmPanel,
  .warehouse-dashboard #appMotorbikeExchangePanel,
  .warehouse-dashboard #appMotorbikeExchangeConfirmPanel {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .landing-body .primary-button,
  .landing-body .secondary-button {
    width: 100%;
  }

  .landing-nav {
    align-items: flex-start;
    gap: 12px;
  }

  .landing-brand {
    flex: 1 1 180px;
  }

  .landing-brand .brand-mark.small {
    width: 38px;
    height: 38px;
  }

  .landing-brand strong {
    font-size: 1.12rem;
  }

  .landing-login-link {
    flex: 0 0 118px;
    width: auto;
  }

  .landing-links {
    display: none;
  }

  .landing-hero-content {
    width: min(100% - 28px, 520px);
    padding: 46px 0 26px;
  }

  .landing-hero h1 {
    font-size: clamp(2.6rem, 14vw, 4.4rem);
  }

  .landing-hero-copy {
    font-size: 1rem;
  }

  .landing-hero-actions {
    align-items: stretch;
  }

  .landing-signal-grid {
    display: none;
  }

  .landing-section,
  .landing-apply {
    width: min(100% - 28px, 520px);
  }

  .landing-section-heading h2,
  .landing-panel-copy h2,
  .landing-apply-copy h2 {
    font-size: clamp(1.8rem, 10vw, 2.45rem);
  }

  .landing-feature-grid article,
  .landing-step-grid article {
    min-height: 0;
    padding: 20px;
  }

  .driver-information-page {
    width: min(100% - 20px, 560px);
  }

  .onboarding-summary.driver-information-summary,
  .driver-information-filter-grid,
  .driver-information-card,
  .driver-information-details,
  .driver-information-form-grid,
  .driver-information-current-panel,
  .driver-information-choice-grid {
    grid-template-columns: 1fr;
  }

  .driver-information-card {
    grid-template-areas:
      "summary"
      "details"
      "actions";
    gap: 14px;
    padding: 16px;
  }

  .driver-information-card.compact-view {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "actions";
  }

  .driver-information-card.compact-view .driver-information-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-information-quick-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .driver-information-list,
  .driver-information-filter-grid,
  .driver-information-form-grid,
  .driver-information-pagination {
    padding: 14px;
  }

  .driver-information-pagination {
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }

  .driver-information-pagination span {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .driver-information-visa-actions {
    grid-template-columns: 1fr;
  }

  .driver-information-actions {
    justify-items: stretch;
  }

  .driver-information-form-actions,
  .driver-information-form-actions .primary-button {
    width: 100%;
  }

  .driver-information-driver-form {
    padding: 16px;
  }

  .warehouse-driver-item {
    padding: 14px 12px;
  }

  .warehouse-driver-item .warehouse-category-details {
    grid-template-columns: 1fr;
  }

  .warehouse-vehicle-item {
    padding: 14px 12px;
  }

  .warehouse-vehicle-item .warehouse-category-details {
    grid-template-columns: 1fr;
  }

  .landing-ops-list div {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .landing-apply {
    margin-bottom: 32px;
    padding: 22px;
  }

  .auth-column {
    justify-content: center;
    padding: 24px 16px 42px;
  }

  .login-card {
    padding: 20px;
  }

  .section-heading,
  .document-item {
    align-items: stretch;
  }

  .section-heading {
    flex-direction: column;
  }

  .dashboard-header {
    min-height: 64px;
    align-items: center;
  }

  .dashboard-title {
    gap: 12px;
  }

  .dashboard-title h1 {
    font-size: 1.45rem;
    line-height: 1.15;
    padding-right: 18px;
  }

  .admin-dashboard .dashboard-title h1 {
    padding-right: 0;
  }

  .warehouse-dashboard .dashboard-title {
    align-items: center;
    gap: 16px;
  }

  .warehouse-dashboard .dashboard-title h1 {
    font-size: 1.45rem;
    padding-right: 0;
  }

  .mechanic-audit-page .dashboard-header {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 14px;
  }

  .mechanic-audit-page .dashboard-title {
    justify-content: flex-start;
    gap: 12px;
  }

  .mechanic-audit-page .dashboard-title h1 {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
    font-size: 1.12rem;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
  }

  .mechanic-audit-page .dashboard-title h1 span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.9rem;
  }

  .mechanic-audit-page .warehouse-back-button {
    justify-self: stretch;
    width: 100%;
    white-space: normal;
  }

  .mechanic-audit-heading .warehouse-export-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .mechanic-audit-heading .download-button {
    width: 100%;
    min-width: 0;
  }

  .warehouse-section-heading {
    min-height: 28px;
    padding: 0 2px;
  }

  .warehouse-section-heading h3 {
    font-size: 0.94rem;
  }

  .warehouse-section-heading span {
    font-size: 0.72rem;
  }

  .warehouse-dashboard #motorbikePanel > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

  .warehouse-dashboard #motorbikeStatusLabel {
    align-self: center;
    text-align: right;
  }

  .warehouse-dashboard .warehouse-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 44px;
    gap: 12px;
  }

  .warehouse-dashboard .warehouse-overview-summary {
    grid-template-columns: 1fr;
  }

  .warehouse-dashboard .warehouse-supplier-summary,
  .warehouse-dashboard .warehouse-location-summary {
    grid-template-columns: 1fr;
  }

  .warehouse-summary-total .warehouse-summary-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .warehouse-summary-item-header {
    align-items: flex-start;
    gap: 14px;
  }

  .warehouse-summary-breakdown-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .warehouse-summary-total .warehouse-summary-breakdown-row {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 40px;
    padding: 6px;
  }

  .warehouse-summary-total .warehouse-summary-breakdown-row.no-action {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .warehouse-summary-total .warehouse-summary-breakdown-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .warehouse-summary-breakdown-row .warehouse-category-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .warehouse-driver-gap-row .warehouse-category-button {
    grid-column: auto;
    width: auto;
  }

  .warehouse-summary-total .warehouse-summary-breakdown-row .warehouse-category-button {
    grid-column: auto;
    min-height: 32px;
    min-width: 52px;
    padding: 0 8px;
    width: auto;
  }

  .warehouse-export-actions {
    justify-content: stretch;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }

  .warehouse-export-actions .secondary-button,
  .warehouse-export-actions .compact-button,
  .warehouse-export-actions .download-button {
    flex: 1;
    min-width: min(140px, 100%);
  }

  .warehouse-vehicle-search {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .warehouse-vehicle-search .secondary-button {
    width: 100%;
  }

  .targets-page {
    width: min(100% - 24px, 640px);
  }

  .targets-review-queue {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 14px;
  }

  .targets-review-queue .primary-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
  }

  .targets-export-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .targets-export-actions #targetsRefresh {
    grid-column: 1 / -1;
    width: 100%;
  }

  .targets-control-grid,
  .targets-month-card-grid,
  .targets-rules-grid,
  .targets-driver-list,
  .targets-audit-list,
  .targets-edit-form {
    padding: 14px;
  }

  .targets-month-card-grid {
    grid-template-columns: 1fr;
  }

  .targets-driver-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "metrics"
      "actions";
    gap: 14px;
    padding: 16px;
  }

  .supplier-filter-grid,
  .supplier-bulk-actions,
  .supplier-bulk-buttons,
  .supplier-payment-card-form,
  .supplier-payment-card-actions,
  .supplier-payment-card-metrics,
  .supplier-payment-proof-row,
  .supplier-payment-proof-upload,
  .supplier-payment-note-group,
  .supplier-history-grid,
  .supplier-bike-metrics {
    grid-template-columns: 1fr;
  }

  .onboarding-summary.suppliers-summary,
  .onboarding-summary.compact-supplier-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suppliers-supplier-card {
    min-height: 0;
  }

  .supplier-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .supplier-card-stats .profile-row {
    min-height: 58px;
    padding: 9px 10px;
  }

  .supplier-payment-workflow,
  .supplier-payment-cards-section {
    padding: 16px 14px;
  }

  .supplier-portal-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 6px 0 14px;
  }

  .supplier-portal-tab {
    width: 100%;
  }

  .supplier-portal-payments-list {
    padding: 14px;
  }

  .supplier-portal-payment-card .supplier-payment-card-meta {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .supplier-portal-payment-card .supplier-payment-card-badge,
  .supplier-portal-show-bikes,
  .supplier-portal-proof-section .supplier-payment-proof-actions .secondary-button {
    width: 100%;
  }

  .onboarded-export-filter-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .suppliers-bike-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "metrics";
  }

  .suppliers-bike-card.supplier-bike-editable {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "metrics"
      "controls";
  }

  .supplier-card-actions {
    margin-top: 14px;
  }

  .supplier-card-actions .secondary-button {
    width: 100%;
  }

  .suppliers-list,
  .suppliers-bike-list {
    padding: 14px;
  }

  .supplier-info-card,
  .supplier-temp-password {
    margin-left: 14px;
    margin-right: 14px;
  }

  .supplier-bulk-actions {
    padding: 0 14px 14px;
  }

  .supplier-history-grid {
    padding: 0 14px 14px;
  }

  .suppliers-bike-card .targets-driver-actions,
  .supplier-portal-page .targets-driver-actions {
    justify-items: stretch;
  }

  .targets-edit-form {
    grid-template-columns: 1fr;
  }

  .targets-reason-field,
  .targets-form-actions {
    grid-column: auto;
  }

  .mechanic-audit-heading .warehouse-export-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .mechanic-audit-heading .download-button {
    width: 100%;
    min-width: 0;
  }

  .document-item.warehouse-category-item:not(.mechanic-audit-item) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "details"
      "actions"
      "edit";
    gap: 14px;
  }

  .warehouse-driver-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .warehouse-vehicle-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .warehouse-driver-item .warehouse-category-meta {
    min-height: 0;
    justify-content: flex-start;
    padding: 0;
  }

  .warehouse-vehicle-item .warehouse-category-meta {
    min-height: 0;
    justify-content: flex-start;
    padding: 0;
  }

  .warehouse-category-details {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-driver-item .warehouse-category-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .warehouse-vehicle-item .warehouse-category-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .warehouse-category-edit {
    grid-template-columns: 1fr;
  }

  .mechanic-sidebar,
  .mechanic-driver-form,
  .mechanic-mileage-form,
  .mechanic-audit-filters,
  .fleet-audit-filters,
  .advance-audit-filters {
    grid-template-columns: 1fr;
  }

  .general-audit-page .section-heading.compact {
    align-items: stretch;
  }

  .general-audit-page .warehouse-export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .general-audit-filters {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }

  .general-audit-filters label {
    margin-top: 0;
  }

  .general-audit-filters input,
  .general-audit-filters select,
  .general-audit-filters button {
    min-height: 54px;
    height: 54px;
  }

  .general-audit-filters input[type="date"],
  .general-audit-filters input[type="date"]::-webkit-date-and-time-value {
    min-height: 54px;
    line-height: 54px;
  }

  .mechanic-audit-card {
    min-height: 86px;
  }

  .mechanic-stepper {
    grid-template-columns: 1fr;
  }

  .mechanic-stepper li {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .mechanic-detail-grid,
  .mechanic-service-grid,
  .mechanic-audit-details {
    grid-template-columns: 1fr;
  }

  .mechanic-audit-details .mechanic-audit-driver,
  .mechanic-audit-details .mechanic-audit-work {
    grid-column: auto;
  }

  .fleet-audit-item {
    grid-template-columns: 1fr;
  }

  .fleet-audit-details,
  .advance-audit-details {
    grid-template-columns: 1fr;
  }

  .advance-audit-item {
    grid-template-columns: 1fr;
  }

  .advance-audit-pagination {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .advance-audit-pagination span {
    min-width: 0;
    order: -1;
  }

  .fleet-movement-summary,
  .fleet-movement-grid {
    grid-template-columns: 1fr;
    padding-left: 12px;
    padding-right: 12px;
  }

  .fleet-today-movements-panel > .section-heading.compact {
    align-items: stretch;
    padding: 14px 12px;
  }

  #fleetTodayMovementsRetry {
    width: 100%;
  }

  .fleet-movement-summary {
    gap: 8px;
  }

  .fleet-movement-metric {
    min-height: 78px;
    padding: 13px 14px;
  }

  .fleet-movement-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .fleet-integrity-preview-actions {
    justify-content: stretch;
    padding: 12px;
  }

  .fleet-integrity-review-button,
  .fleet-integrity-preview-actions .primary-button {
    width: 100%;
  }

  .fleet-integrity-review-modal {
    align-items: stretch;
    padding: 12px;
  }

  .fleet-integrity-review-card {
    max-height: calc(100vh - 24px);
    width: 100%;
  }

  .fleet-integrity-review-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .fleet-integrity-review-header .secondary-button {
    width: 100%;
  }

  .fleet-integrity-review-body {
    gap: 12px;
    padding: 12px;
  }

  .fleet-integrity-issue {
    padding: 13px;
  }

  .fleet-integrity-issue-header {
    flex-direction: column;
    gap: 10px;
  }

  .fleet-integrity-severity {
    align-self: flex-start;
  }

  .fleet-integrity-facts {
    grid-template-columns: 1fr;
  }

  .fleet-integrity-actions .secondary-button {
    width: 100%;
  }

  .warehouse-metric {
    padding: 8px 10px;
    font-size: 0.86rem;
  }

  .admin-stat {
    min-height: 84px;
  }

  .analytics-row {
    align-items: flex-start;
  }

  .dashboard-footer .secondary-button {
    width: 100%;
  }

  .action-panel,
  .saved-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .action-link {
    width: 100%;
  }

  .action-buttons {
    width: 100%;
    flex-direction: column;
  }

  .action-buttons .primary-button,
  .action-buttons .secondary-button {
    width: 100%;
  }

  .motorbike-layout {
    width: min(100% - 24px, 640px);
    padding: 16px 0 28px;
  }

  .driver-housing-page {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: calc(36px + env(safe-area-inset-bottom));
  }

  .intake-header {
    min-height: 58px;
  }

  .submission-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .saved-details {
    grid-template-columns: 1fr;
  }

  .driver-housing-form .section-heading.compact {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .driver-housing-choice-field {
    margin: 0;
    padding: 16px 18px;
  }

  .housing-choice-question {
    font-size: 0.98rem;
    line-height: 1.4;
  }

  .housing-choice-options {
    grid-template-columns: 1fr;
  }

  .driver-housing-choice-field label {
    min-height: 50px;
  }

  .driver-housing-form .submission-fields {
    gap: 12px;
    padding: 16px 18px 0;
  }

  .driver-housing-form .submission-fields label {
    margin-top: 0;
  }

  .driver-housing-form .button-row.form-actions {
    margin-top: 18px;
  }

  .intake-dashboard .dashboard-title {
    align-items: flex-start;
  }

  .intake-dashboard .dashboard-title .secondary-button {
    min-width: 92px;
  }

  .module-option {
    min-height: 78px;
  }

  .profile-card {
    grid-template-columns: 1fr;
  }

  .profile-row {
    min-height: 70px;
    padding: 14px 18px;
    gap: 9px;
  }

  .document-item {
    grid-template-columns: 1fr;
  }

  .company-inventory-filter {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .company-inventory-filter label {
    width: 100%;
  }

  .company-inventory-pagination {
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 14px 14px;
  }

  .company-inventory-pagination span {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .company-inventory-pagination .secondary-button {
    flex: 1 1 150px;
  }

  .company-vehicle-row {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .audit-title-row {
    flex-direction: column;
    gap: 8px;
  }

  .document-action,
  .download-button {
    width: 100%;
  }

  .warehouse-actions {
    min-width: 0;
    justify-content: stretch;
  }

  .company-vehicle-row .warehouse-actions {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "stamp"
      "availability"
      "reserve"
      "assign"
      "delete";
    justify-content: stretch;
    gap: 12px;
  }

  .company-vehicle-row .warehouse-actions > :only-child {
    grid-column: 1;
  }

  .company-vehicle-row .vehicle-availability-switch {
    justify-content: center;
  }

  .fleet-notification-item {
    grid-template-columns: 1fr;
  }

  .fleet-notification-actions {
    width: 100%;
    justify-content: stretch;
  }

  .fleet-notification-actions .primary-button,
  .fleet-notification-actions .secondary-button {
    flex: 1 1 120px;
  }

  .fleet-alert {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 16px;
  }

  .fleet-alert .secondary-button {
    width: 100%;
  }

  .warehouse-actions .missing-badge,
  .warehouse-actions .vehicle-availability-switch,
  .warehouse-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

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

  .company-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .company-dashboard-section-heading {
    display: grid;
    justify-content: stretch;
    align-items: start;
    gap: 4px;
  }

  .company-dashboard-card {
    min-height: 146px;
  }

  .driver-request-options {
    grid-template-columns: 1fr;
  }

  .driver-request-options .company-dashboard-card {
    min-height: 128px;
    padding: 17px 18px;
  }

  .driver-salary-choice-list {
    gap: 9px;
  }

  .driver-salary-option {
    min-height: 70px;
    padding: 13px 14px;
  }

  .driver-salary-option strong {
    font-size: 0.88rem;
  }

  .seven-days-upload-form,
  .seven-days-upload-actions,
  .seven-days-summary-grid,
  .seven-days-detail-grid,
  .seven-days-edit-grid,
  .seven-days-row-head {
    grid-template-columns: 1fr;
  }

  .seven-days-section-search {
    width: 100%;
  }

  .seven-days-priority {
    width: 100%;
    min-width: 0;
  }

  .seven-days-edit-grid.today-action-row .seven-days-save-actions {
    grid-template-columns: 1fr;
  }

  .seven-days-row {
    padding: 16px;
  }

  .onboarding-shell {
    width: min(100% - 28px, 560px);
    padding: 22px 0 34px;
  }

  .onboarding-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .onboarding-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .onboarding-header-actions > span {
    text-align: left;
  }

  .onboarding-staff-back {
    width: 100%;
  }

  .onboarding-hero {
    min-height: 220px;
    padding: 22px;
  }

  .onboarding-form-grid,
  .onboarding-upload-grid,
  .onboarding-actions,
  .onboarding-share-grid,
  .onboarding-sms-share,
  .onboarding-summary,
  .onboarding-document-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-application-list {
    display: grid;
    overflow-x: visible;
  }

  .onboarding-table-header {
    display: none;
  }

  .onboarding-application-item {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .onboarding-application-list .onboarding-application-item {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .document-item.warehouse-category-item.onboarding-audit-item {
    grid-template-columns: 1fr;
  }

  .onboarding-audit-details {
    grid-template-columns: 1fr;
  }

  .onboarding-table-cell {
    min-height: auto;
    display: grid;
    gap: 5px;
    padding: 13px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .onboarding-table-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .onboarding-documents-cell {
    align-items: stretch;
  }

  .onboarding-status-cell {
    border-bottom: 0;
  }

  .onboarding-wide-field {
    grid-column: auto;
  }

  .onboarding-actions {
    align-items: stretch;
  }

  .onboarding-status-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .submission-modal,
  .confirmation-modal {
    align-items: flex-start;
  }

  .confirmation-alert {
    padding: 20px 18px 16px;
  }

  .confirmation-alert h2 {
    font-size: 1.28rem;
  }
}

@media (max-width: 720px) {
  .driver-information-visa-modal {
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px);
  }

  .driver-information-visa-dialog {
    width: min(100%, 440px);
  }

  .driver-information-visa-dialog .confirmation-hero {
    gap: 10px;
    padding: 24px 20px 22px;
  }

  .driver-information-visa-dialog .confirmation-hero h2 {
    font-size: 1.32rem;
  }

  .driver-information-visa-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
}

.global-search-form {
  width: min(520px, 42vw);
  min-width: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.global-search-form input {
  height: 44px;
  margin: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 16px;
}

.global-search-form .secondary-button {
  height: 44px;
  margin: 0;
  border-radius: 999px;
  padding: 0 18px;
  white-space: nowrap;
}

.search-page {
  width: min(1320px, calc(100vw - 32px));
}

.search-command-panel {
  overflow: visible;
}

.search-page-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid var(--line-soft);
}

.search-page-form input,
.search-page-actions .primary-button,
.search-page-actions .secondary-button {
  margin: 0;
  min-height: 54px;
}

.search-page-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 180px);
  gap: 10px;
  min-width: 0;
}

.search-page #searchLoadingProgress.flee7-stage-progress {
  margin-top: 0;
}

.search-results-list,
.driver-360-record-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.search-result-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 4px solid rgba(59, 130, 246, 0.8);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  color: var(--ink);
  padding: 18px;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.search-result-open {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.search-result-actions {
  display: grid;
  justify-content: stretch;
  gap: 8px;
  min-width: 0;
}

.search-result-actions > * {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.search-result-card:hover {
  background: rgba(30, 41, 59, 0.62);
  border-color: rgba(59, 130, 246, 0.58);
  transform: translateY(-1px);
}

.search-result-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.search-result-main h3,
.search-result-main p {
  margin: 0;
  overflow-wrap: anywhere;
}

.search-result-main h3 {
  color: var(--ink-strong);
  font-size: 1.02rem;
}

.search-result-main p {
  color: var(--muted);
  font-size: 0.9rem;
}

.search-result-bike-history {
  display: grid;
  gap: 7px;
}

.search-result-bike-history-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(251, 191, 36, 0.36);
  border-radius: 7px;
  background: rgba(120, 53, 15, 0.14);
  padding: 9px 11px;
}

.search-result-bike-history-item strong {
  color: #fde68a;
  font-size: 0.82rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.search-result-bike-history-item span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.search-result-bike-history-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.search-result-status {
  justify-self: end;
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 999px;
  color: #bbf7d0;
  padding: 9px 13px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.driver-360 {
  display: grid;
  gap: 18px;
}

.driver-360-summary,
.driver-360-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.78));
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.driver-360-summary {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-color: rgba(59, 130, 246, 0.36);
}

.driver-360-summary-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.driver-360-summary-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.driver-360-avatar {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 50%;
  background: rgba(6, 111, 209, 0.18);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.driver-360-summary-title h2,
.driver-360-summary-title p {
  margin: 0;
  overflow-wrap: anywhere;
}

.driver-360-summary-title h2 {
  color: var(--ink-strong);
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
}

.driver-360-summary-title p {
  color: var(--muted);
}

.driver-360-summary-aside {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: 0;
}

.driver-360-summary-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.driver-360-whatsapp-action {
  min-height: 42px;
  min-width: 198px;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.driver-360-whatsapp-disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.driver-360-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.driver-360-badge {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--ink);
  padding: 8px 11px;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.driver-360-badge.badge-green {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.driver-360-badge.badge-orange {
  border-color: rgba(249, 115, 22, 0.55);
  background: rgba(249, 115, 22, 0.12);
  color: #fed7aa;
}

.driver-360-badge.badge-red {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

.driver-360-priority-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.driver-360-priority-tile {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 104px;
  padding: 13px;
}

.driver-360-priority-tile span,
.driver-360-priority-tile small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.driver-360-priority-tile strong {
  color: var(--ink-strong);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.driver-360-priority-tile small {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.driver-360-priority-tile.tone-green {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(20, 83, 45, 0.18);
}

.driver-360-priority-tile.tone-orange {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(124, 45, 18, 0.18);
}

.driver-360-priority-tile.tone-red {
  border-color: rgba(248, 113, 113, 0.46);
  background: rgba(127, 29, 29, 0.22);
}

.driver-360-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.driver-360-metric {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  gap: 7px;
  padding: 13px 14px;
}

.driver-360-metric span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.driver-360-metric strong {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.driver-360-nav {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.92);
  padding: 10px;
}

.driver-360-nav a {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: var(--ink);
  padding: 9px 12px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
}

.driver-360-grid {
  display: grid;
  gap: 18px;
}

.driver-360-loading-sections {
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
  display: grid;
  gap: 5px;
  padding: 16px 18px;
}

.driver-360-loading-sections strong {
  color: var(--ink-strong);
}

.driver-360-loading-sections span {
  color: var(--muted);
  line-height: 1.45;
}

.driver-360-group {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.driver-360-group-heading {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(30, 41, 59, 0.36);
  padding: 18px;
}

.driver-360-group-heading h2,
.driver-360-group-heading span {
  margin: 0;
}

.driver-360-group-heading h2 {
  color: var(--ink-strong);
  font-size: 1.08rem;
}

.driver-360-group-heading span {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.driver-360-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.driver-360-card {
  align-self: start;
}

#driver-360-group-compliance .driver-360-card,
#driver-360-group-history .driver-360-card,
#driver-360-group-extra .driver-360-card {
  grid-column: 1 / -1;
}

.driver-360-card-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.driver-360-record-list {
  padding: 0;
}

.driver-360-record {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.driver-360-record h3 {
  color: var(--ink-strong);
  font-size: 0.98rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.driver-360-bike-history-list {
  display: grid;
  gap: 10px;
}

.driver-360-bike-history-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 4px solid rgba(96, 165, 250, 0.72);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
  padding: 13px;
}

.driver-360-bike-history-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.driver-360-bike-history-copy strong {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.driver-360-bike-history-copy span,
.driver-360-bike-history-copy small {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.driver-360-bike-history-copy span {
  font-size: 0.8rem;
}

.driver-360-bike-history-copy small {
  color: #fde68a;
  font-size: 0.74rem;
  font-weight: 700;
}

.driver-360-bike-history-action {
  min-height: 44px;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: normal;
  text-align: center;
}

.driver-360-monitoring-banner {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.driver-360-monitoring-banner strong,
.driver-360-monitoring-banner span {
  overflow-wrap: anywhere;
}

.driver-360-monitoring-banner.tone-green {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(20, 83, 45, 0.18);
  color: #bbf7d0;
}

.driver-360-monitoring-banner.tone-orange {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(124, 45, 18, 0.18);
  color: #fed7aa;
}

.driver-360-monitoring-banner.tone-red {
  border-color: rgba(248, 113, 113, 0.46);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

.driver-360-timeline-filter {
  max-width: 280px;
}

.driver-360-timeline {
  display: grid;
  gap: 12px;
}

.driver-360-timeline-item {
  border-left: 3px solid rgba(59, 130, 246, 0.72);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  display: grid;
  gap: 7px;
  padding: 13px 15px;
}

.driver-360-timeline-item span,
.driver-360-timeline-item small {
  color: var(--muted);
  font-size: 0.78rem;
}

.driver-360-timeline-item h3,
.driver-360-timeline-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

.driver-360-timeline-item h3 {
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.driver-360-timeline-item p {
  color: var(--ink);
  line-height: 1.45;
}

.city-transfer-current-panel,
.city-transfer-stepper-panel {
  overflow: hidden;
}

.transfer-info-grid,
.transfer-review-grid,
.transfer-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  min-width: 0;
}

.transfer-info-grid .profile-row,
.transfer-review-grid .profile-row,
.transfer-card-details .profile-row,
.transfer-comparison-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 14px;
}

.transfer-info-grid .profile-row strong,
.transfer-review-grid .profile-row strong,
.transfer-card-details .profile-row strong,
.transfer-comparison-row strong {
  overflow-wrap: anywhere;
}

.city-transfer-request-card {
  align-items: start;
  gap: 14px;
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 18px 20px 16px;
  border-left-width: 4px;
}

.city-transfer-card-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.city-transfer-card-summary h3 {
  margin: 0 0 5px;
}

.city-transfer-card-summary p {
  margin: 0;
}

.city-transfer-card-facts {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.city-transfer-card-fact {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 9px;
}

.city-transfer-card-fact span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.city-transfer-card-fact strong {
  color: var(--ink-strong);
  font-size: 0.9rem;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-transfer-request-card .document-action {
  align-self: center;
  justify-self: end;
  min-width: 0;
}

.city-transfer-request-card .document-action .compact-button,
.city-transfer-request-card .transfer-status-badge {
  justify-content: center;
  min-height: 38px;
  min-width: 74px;
}

.city-transfer-request-card.status-pending,
.city-transfer-request-card.status-under-review,
.transfer-status-badge.status-pending,
.transfer-status-badge.status-under-review {
  border-color: rgba(251, 146, 60, 0.62);
}

.city-transfer-request-card.status-approved,
.city-transfer-request-card.status-completed,
.transfer-status-badge.status-approved,
.transfer-status-badge.status-completed {
  border-color: rgba(34, 197, 94, 0.62);
}

.city-transfer-request-card.status-rejected,
.transfer-status-badge.status-rejected {
  border-color: rgba(248, 113, 113, 0.62);
}

.city-transfer-request-card.status-approved,
.city-transfer-request-card.status-completed {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.22), rgba(15, 23, 42, 0.72));
}

.city-transfer-request-card.status-rejected {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.22), rgba(15, 23, 42, 0.72));
}

.city-transfer-view-switch {
  align-items: center;
  gap: 12px;
  margin: 16px 18px 18px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
}

.city-transfer-view-switch .secondary-button {
  flex: 0 0 220px;
  min-width: 220px;
}

.transfer-city-page .special-filter-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transfer-city-page .special-filter-actions button {
  min-width: 0;
}

.transfer-comparison-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
}

.transfer-comparison-row span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.transfer-comparison-row em {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.city-transfer-direct-form {
  display: grid;
  gap: 24px;
}

.city-transfer-direct-form .special-step-panel {
  margin: 0;
}

.city-transfer-admin-panel {
  padding-bottom: 28px;
}

.city-transfer-admin-panel .section-heading {
  padding-bottom: 18px;
}

.city-transfer-direct-form .special-stepper {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 24px 4px;
}

.city-transfer-direct-form .special-step {
  min-height: 50px;
}

.city-transfer-direct-form .special-step-panel {
  padding: 26px 24px 4px;
}

.city-transfer-confirm-step {
  display: grid;
  gap: 26px;
}

.city-transfer-confirm-step .transfer-review-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.city-transfer-confirm-step .profile-row {
  min-height: 116px;
  padding: 18px;
}

.city-transfer-confirm-step .confirmation-alert {
  width: min(100%, 760px);
  justify-self: center;
  border: 1px solid rgba(147, 197, 253, 0.26);
  border-radius: 8px;
  padding: 26px 28px 24px;
}

.city-transfer-confirm-step .confirmation-alert p {
  max-width: 560px;
}

.city-transfer-direct-form .special-step-actions {
  justify-content: flex-end;
  gap: 14px;
  margin: 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.city-transfer-direct-form .special-step-actions button {
  min-width: 160px;
  min-height: 48px;
}

.city-transfer-manual-current {
  margin-top: 14px;
}

.transfer-decision-actions {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.transfer-decision-actions button {
  min-height: 52px;
  width: 100%;
}

.driver-transfer-page .company-dashboard-panel {
  gap: 18px;
}

.driver-transfer-page .city-transfer-stepper-panel {
  display: grid;
  gap: 0;
  padding-bottom: 18px;
}

.driver-transfer-page .special-stepper {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
  padding: 16px 18px 4px;
}

.driver-transfer-page .special-step {
  min-height: 46px;
  align-content: center;
  padding: 10px 8px;
  line-height: 1.2;
}

.driver-transfer-page .special-step-panel {
  padding: 18px;
}

.driver-transfer-page .special-step-panel:not(.hidden) {
  display: grid;
  gap: 16px;
}

.driver-transfer-page .driver-information-choice-field {
  margin: 0;
  padding: 16px;
}

.driver-transfer-page .driver-information-choice-grid {
  gap: 10px;
}

.driver-transfer-page .driver-information-choice-grid label {
  min-height: 62px;
  padding: 13px 14px;
}

.driver-transfer-page .submission-fields {
  gap: 16px;
  padding: 0;
}

.driver-transfer-page .special-step-actions {
  margin: 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.driver-transfer-page .is-disabled {
  opacity: 0.74;
}

@media (max-width: 700px) {
  .transfer-decision-actions {
    grid-template-columns: 1fr;
  }
}

.transfer-city-page .special-stepper {
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .driver-transfer-page .special-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .city-transfer-direct-form .special-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .city-transfer-confirm-step .transfer-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .driver-transfer-page .city-transfer-stepper-panel {
    padding-bottom: 14px;
  }

  .driver-transfer-page .special-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 14px 4px;
  }

  .driver-transfer-page .special-step {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 0.86rem;
  }

  .driver-transfer-page .special-step-panel {
    padding: 14px;
  }

  .driver-transfer-page .special-step-panel:not(.hidden) {
    gap: 14px;
  }

  .driver-transfer-page .driver-information-choice-field {
    padding: 14px;
  }

  .driver-transfer-page .driver-information-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .driver-transfer-page .driver-information-choice-grid label {
    min-height: 58px;
    gap: 10px;
    padding: 12px;
  }

  .driver-transfer-page .submission-fields {
    gap: 12px;
  }

  .driver-transfer-page .special-step-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 14px;
    padding-top: 14px;
  }

  .city-transfer-direct-form {
    gap: 18px;
  }

  .city-transfer-direct-form .special-stepper {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 14px 0;
  }

  .city-transfer-direct-form .special-step-panel {
    padding: 18px 14px 0;
  }

  .city-transfer-confirm-step .transfer-review-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .city-transfer-confirm-step .profile-row {
    min-height: auto;
  }

  .city-transfer-confirm-step .confirmation-alert {
    padding: 22px 16px 20px;
  }

  .city-transfer-direct-form .special-step-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 14px;
  }

  .city-transfer-direct-form .special-step-actions button {
    width: 100%;
  }

  .city-transfer-request-card {
    padding: 16px;
  }

  .city-transfer-card-facts {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .city-transfer-request-card .document-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .city-transfer-request-card .document-action .compact-button,
  .city-transfer-request-card .transfer-status-badge {
    width: 100%;
  }

  .city-transfer-view-switch {
    margin: 14px;
    padding: 10px;
  }

  .city-transfer-view-switch .secondary-button {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }

  .transfer-city-page .special-filter-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199px) {
  .tasks-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .tasks-page {
    width: min(100% - 24px, 680px);
  }

  .tasks-view-switch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .tasks-view-switch .secondary-button {
    width: 100%;
  }

  .tasks-summary,
  .tasks-control-grid,
  .task-card-main,
  .driver-target-main {
    grid-template-columns: 1fr;
  }

  .task-card-badges,
  .driver-target-value {
    justify-content: center;
    justify-items: center;
  }

  .driver-history-heading,
  .driver-history-item-top {
    display: grid;
    justify-content: stretch;
  }

  .driver-history-heading p {
    text-align: left;
  }

  .driver-history-details {
    grid-template-columns: 1fr;
  }

  .driver-history-detail:nth-last-child(-n + 2) {
    grid-column: auto;
  }

  .tasks-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasks-detail-grid .profile-row:nth-last-child(-n + 2) {
    grid-column: 1 / -1;
  }

  .task-alert {
    grid-template-columns: 1fr;
  }

  .task-alert > strong {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .task-card-grid,
  .tasks-detail-grid {
    grid-template-columns: 1fr;
  }

  .task-card {
    padding: 15px;
  }

  .driver-target-main {
    min-height: 220px;
    padding: 22px 16px;
  }

  .driver-history-heading,
  .driver-history-list {
    padding: 14px;
  }
}

@media (max-width: 760px) {
  .dashboard-header {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .dashboard-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .dashboard-title .auth-brand.inline {
    min-width: 0;
    gap: 8px;
  }

  .dashboard-title .auth-brand.inline strong {
    font-size: 1.15rem;
    white-space: nowrap;
  }

  .dashboard-title .brand-mark.small {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }

  .dashboard-title h1,
  .admin-dashboard .dashboard-title h1 {
    min-width: 0;
    padding-right: 0;
    font-size: 1.35rem;
    line-height: 1.15;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }

  .dashboard-title .secondary-button,
  .dashboard-logout-button,
  .admin-dashboard .dashboard-title .secondary-button {
    width: auto;
    min-width: 76px;
    justify-self: end;
    margin-left: 0;
    padding-right: 12px;
    padding-left: 12px;
  }

  .dashboard-header .global-search-form {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .dashboard-header .global-search-form input {
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    font-size: 16px;
  }

  .dashboard-header .global-search-form .secondary-button {
    width: auto;
    min-width: 74px;
    height: 42px;
    padding: 0 14px;
  }
}

@media (max-width: 390px) {
  .dashboard-title {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand logout"
      "title title";
    row-gap: 8px;
  }

  .dashboard-title .auth-brand.inline {
    grid-area: brand;
  }

  .dashboard-title h1 {
    grid-area: title;
  }

  .dashboard-title .secondary-button,
  .dashboard-logout-button,
  .admin-dashboard .dashboard-title .secondary-button {
    grid-area: logout;
  }

  .dashboard-header .global-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .monitoring-page .dashboard-title {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand title";
    row-gap: 0;
  }

  .monitoring-page .dashboard-title h1 {
    font-size: 1.18rem;
  }
}

@media (max-width: 760px) {
  .housing-missing-panel {
    margin: 10px;
  }

  .housing-missing-driver-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .housing-missing-driver-actions {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .housing-missing-export-actions {
    width: 100%;
    justify-content: stretch;
  }

  .housing-missing-export-actions .download-button,
  .housing-missing-export-actions .secondary-button {
    flex: 1 1 0;
  }

  .seven-days-page {
    width: min(100% - 24px, 1280px);
  }

  .seven-days-page .dashboard-title,
  .seven-days-page .dashboard-title .brand-link,
  .seven-days-section .section-heading.compact > div,
  .seven-days-row,
  .seven-days-row-head,
  .seven-days-row-head > div,
  .seven-days-title-line,
  .seven-days-title-line h3,
  .seven-days-detail-grid,
  .seven-days-detail,
  .seven-days-activity-trail,
  .seven-days-edit-grid,
  .seven-days-save-cell {
    min-width: 0;
  }

  .seven-days-page .warehouse-back-button {
    width: 100%;
    justify-content: center;
  }

  .seven-days-summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .seven-days-filter-card {
    min-width: 0;
    min-height: 94px;
    padding: 16px;
  }

  .seven-days-filter-card span,
  .seven-days-filter-card strong,
  .seven-days-card-breakdown {
    overflow-wrap: anywhere;
  }

  .seven-days-section .section-heading.compact {
    display: grid;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  .seven-days-section .section-heading h2 {
    font-size: 1.08rem;
    line-height: 1.2;
  }

  .seven-days-list {
    gap: 12px;
    padding: 10px;
  }

  .seven-days-row {
    gap: 12px;
    overflow: hidden;
    padding: 14px;
  }

  .seven-days-row-head {
    gap: 12px;
  }

  .seven-days-title-line h3 {
    overflow-wrap: anywhere;
  }

  .seven-days-row-head p {
    overflow-wrap: anywhere;
  }

  .seven-days-priority {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  .seven-days-detail-grid {
    gap: 8px;
  }

  .seven-days-detail {
    min-height: 0;
  }

  .seven-days-activity-trail {
    overflow: hidden;
  }

  .seven-days-edit-grid.today-action-row,
  .seven-days-edit-grid.today-action-row.call-later-date-open,
  .seven-days-edit-grid.has-corrected-phone,
  .seven-days-edit-grid.wrong-phone-only,
  .seven-days-edit-grid.close-id-only {
    grid-template-columns: 1fr;
  }

  .seven-days-save-actions,
  .seven-days-edit-grid.today-action-row .seven-days-save-actions {
    grid-template-columns: 1fr;
  }

  .seven-days-save-cell .primary-button,
  .seven-days-save-cell .secondary-button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .seven-days-list {
    padding: 8px;
  }

  .seven-days-row {
    padding: 12px;
  }

  .seven-days-detail,
  .seven-days-activity-trail {
    padding: 11px;
  }
}

@media (max-width: 860px) {
  .search-page {
    width: min(100% - 24px, 680px);
  }

  .search-command-panel .section-heading.compact {
    display: grid;
    align-items: start;
    gap: 8px;
  }

  .search-page-form,
  .search-result-card,
  .search-result-open,
  .driver-360-grid {
    grid-template-columns: 1fr;
  }

  .search-page-actions {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    width: 100%;
  }

  .search-page-actions .primary-button,
  .search-page-actions .secondary-button {
    width: 100%;
  }

  .search-result-actions {
    justify-content: stretch;
  }

  .search-result-status {
    justify-self: start;
  }

  .driver-360,
  .driver-360-summary,
  .driver-360-summary-top,
  .driver-360-card,
  .driver-360-group,
  .driver-360-group-grid,
  .driver-360-card-heading,
  .driver-360-card-heading > div,
  .driver-360-card-body,
  .driver-360-record,
  .driver-360-detail-grid,
  .driver-360-metric {
    min-width: 0;
  }

  .driver-360 {
    gap: 14px;
  }

  .driver-360-summary {
    padding: 16px;
  }

  .driver-360-summary-top {
    grid-template-columns: 1fr;
  }

  .driver-360-summary-aside,
  .driver-360-summary-actions,
  .driver-360-badges {
    justify-items: stretch;
    justify-content: stretch;
    width: 100%;
  }

  .driver-360-whatsapp-action {
    width: 100%;
    min-width: 0;
  }

  .driver-360-summary-title {
    align-items: flex-start;
    gap: 12px;
  }

  .driver-360-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
  }

  .driver-360-detail-grid {
    grid-template-columns: 1fr;
  }

  .driver-360-priority-strip,
  .driver-360-group-grid {
    grid-template-columns: 1fr;
  }

  .driver-360-priority-tile {
    min-height: 0;
  }

  #driver-360-group-compliance .driver-360-card,
  #driver-360-group-history .driver-360-card,
  #driver-360-group-extra .driver-360-card {
    grid-column: auto;
  }

  .driver-360-group-heading {
    padding: 14px;
  }

  .driver-360-group-grid {
    padding: 12px;
    gap: 12px;
  }

  .driver-360-card-body {
    gap: 12px;
    padding: 14px;
  }

  .driver-360-record-list {
    padding: 0;
  }

  .driver-360-record {
    padding: 12px;
  }

  .driver-360-loading-sections {
    padding: 14px;
  }

  .driver-360-monitoring-banner {
    display: grid;
  }

  .driver-360-bike-history-item {
    grid-template-columns: 1fr;
  }

  .driver-360-bike-history-action {
    width: 100%;
    min-width: 0;
  }

  .driver-360-metric {
    min-height: 0;
    padding: 12px;
  }

  .driver-360-metric strong,
  .driver-360-record h3,
  .driver-360-timeline-item p,
  .driver-360-timeline-item small {
    overflow-wrap: anywhere;
  }

  .driver-360-nav {
    position: static;
    top: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .driver-360-nav a {
    max-width: 72vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .driver-360-timeline-filter {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .search-page {
    width: min(100% - 20px, 680px);
  }

  .search-page-form,
  .search-results-list,
  .driver-360-card-body {
    padding: 12px;
  }

  .driver-360-summary {
    padding: 14px;
  }

  .driver-360-priority-strip,
  .driver-360-group-grid {
    gap: 10px;
  }

  .driver-360-nav {
    padding: 8px;
  }
}

html.flee7-phone-layout .housing-page {
  width: min(100% - 20px, 640px);
  gap: 14px;
}

html.flee7-phone-layout .housing-mobile-tabs {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 30;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid rgba(147, 197, 253, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  scrollbar-width: none;
}

html.flee7-phone-layout .housing-mobile-tabs::-webkit-scrollbar {
  display: none;
}

html.flee7-phone-layout .housing-mobile-tabs button {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.7);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
}

html.flee7-phone-layout .housing-mobile-tabs button.active {
  border-color: rgba(96, 165, 250, 0.75);
  background: linear-gradient(135deg, rgba(6, 111, 209, 0.92), rgba(37, 99, 235, 0.72));
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

html.flee7-phone-layout .housing-page[data-housing-tab="overview"] [data-housing-panel]:not([data-housing-panel="overview"]),
html.flee7-phone-layout .housing-page[data-housing-tab="money"] [data-housing-panel]:not([data-housing-panel="money"]),
html.flee7-phone-layout .housing-page[data-housing-tab="houses"] [data-housing-panel]:not([data-housing-panel="houses"]),
html.flee7-phone-layout .housing-page[data-housing-tab="setup"] [data-housing-panel]:not([data-housing-panel="setup"]),
html.flee7-phone-layout .housing-page[data-housing-tab="assign"] [data-housing-panel]:not([data-housing-panel="assign"]),
html.flee7-phone-layout .housing-page[data-housing-tab="swap"] [data-housing-panel]:not([data-housing-panel="swap"]),
html.flee7-phone-layout .housing-page[data-housing-tab="actions"] [data-housing-panel]:not([data-housing-panel="actions"]) {
  display: none;
}

html.flee7-phone-layout .housing-summary.onboarding-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.flee7-phone-layout .housing-summary.onboarding-summary > div {
  min-height: 92px;
  padding: 14px;
}

html.flee7-phone-layout .housing-summary.onboarding-summary span {
  font-size: 0.64rem;
  line-height: 1.25;
}

html.flee7-phone-layout .housing-summary strong {
  font-size: clamp(1.38rem, 8vw, 1.8rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

html.flee7-phone-layout .housing-missing-panel {
  margin: 10px;
}

html.flee7-phone-layout .housing-missing-driver-item {
  grid-template-columns: 1fr;
  align-items: stretch;
}

html.flee7-phone-layout .housing-missing-driver-actions {
  width: 100%;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 10px;
}

html.flee7-phone-layout .housing-missing-export-actions {
  width: 100%;
  justify-content: stretch;
}

html.flee7-phone-layout .housing-missing-export-actions .download-button,
html.flee7-phone-layout .housing-missing-export-actions .secondary-button {
  flex: 1 1 0;
}

html.flee7-phone-layout .housing-form-grid,
html.flee7-phone-layout .housing-filter-grid,
html.flee7-phone-layout .housing-layout,
html.flee7-phone-layout .housing-profit-layout {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .housing-swap-review {
  margin: 16px;
  padding: 14px;
}

html.flee7-phone-layout .housing-swap-grid {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .housing-profit-layout {
  border-top: 0;
  gap: 14px;
  padding: 16px;
}

html.flee7-phone-layout .housing-profit-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

html.flee7-phone-layout .housing-profit-panel + .housing-profit-panel {
  border-left: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
}

html.flee7-phone-layout .housing-capacity-panel .section-heading.tight,
html.flee7-phone-layout .housing-profit-panel .section-heading.tight {
  padding: 18px 16px 6px;
}

html.flee7-phone-layout .housing-capacity-list {
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 78vw);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 18px 16px 22px;
  scroll-snap-type: x mandatory;
}

html.flee7-phone-layout .housing-capacity-item {
  scroll-snap-align: start;
}

html.flee7-phone-layout .housing-profit-list {
  padding: 18px 14px 20px;
}

html.flee7-phone-layout .housing-profit-metrics,
html.flee7-phone-layout .housing-finance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.flee7-phone-layout .housing-finance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.flee7-phone-layout .housing-wide-field {
  grid-column: auto;
}

html.flee7-phone-layout .housing-form-grid,
html.flee7-phone-layout .housing-filter-grid {
  gap: 12px;
  padding: 16px;
}

html.flee7-phone-layout .housing-reminder-controls,
html.flee7-phone-layout .housing-reminder-item {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .housing-reminder-actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

html.flee7-phone-layout .housing-reminder-actions .primary-button,
html.flee7-phone-layout .housing-reminder-actions .secondary-button {
  width: 100%;
}

html.flee7-phone-layout .housing-reminder-select {
  justify-content: stretch;
}

html.flee7-phone-layout .housing-reminder-select label {
  width: 100%;
}

html.flee7-phone-layout .housing-house-list {
  border-right: 0;
  border-bottom: 1px solid var(--line-soft);
}

html.flee7-phone-layout .housing-external-form,
html.flee7-phone-layout .housing-record-item {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .housing-record-item .warehouse-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex-wrap: wrap;
  justify-content: stretch;
}

html.flee7-phone-layout .housing-house-export-button {
  width: 100%;
}

html.flee7-phone-layout .housing-detail-body {
  padding: 16px;
}

.bills-page .tasks-view-switch {
  margin: 18px 20px 16px;
  gap: 10px;
}

.bills-actions,
.bills-detail-actions {
  gap: 10px;
}

.bills-card {
  border-left: 4px solid var(--line);
  gap: 18px;
}

.bills-card-pending {
  border-left-color: #f59e0b;
}

.bills-card-paid {
  border-left-color: #22c55e;
}

.bills-card-cancelled {
  border-left-color: #ef4444;
}

.bill-status-paid {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.12);
}

.bill-status-pending {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
}

.bill-status-cancelled {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.12);
}

.bills-card-actions {
  min-width: 250px;
  flex-wrap: wrap;
  gap: 10px;
}

.bills-card-actions .compact-button {
  min-width: 72px;
}

.bills-email-status {
  overflow-wrap: anywhere;
  font-weight: 720;
}

.bills-email-status.is-safe {
  color: #86efac;
}

.bills-email-status.is-warning {
  color: #fde68a;
}

.bills-email-status.is-danger {
  color: #fca5a5;
}

.bills-modal-card {
  width: min(640px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  max-height: min(860px, calc(100dvh - 32px));
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}

.bills-modal-card > .bills-form-grid,
.bills-modal-card > .saved-details,
.bills-modal-card > .bills-paid-fields,
.bills-modal-card > .bills-provider-form-section,
.bills-modal-card > .bills-provider-view-details,
.bills-modal-card > .bills-linked-ledger-warning,
.bills-modal-card > label,
.bills-modal-card > .button-row,
.bills-modal-card > .form-message {
  margin-right: 24px;
  margin-left: 24px;
}

.bills-modal-card > .bills-form-grid,
.bills-modal-card > .saved-details,
.bills-modal-card > .bills-provider-form-section,
.bills-modal-card > .bills-provider-view-details {
  margin-top: 24px;
}

.bills-modal-card > label {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 18px;
}

.bills-modal-card input,
.bills-modal-card select,
.bills-modal-card textarea {
  width: 100%;
  box-sizing: border-box;
}

.bills-modal-card textarea {
  min-height: 108px;
  resize: vertical;
}

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

.bills-conditional-panel {
  margin: 18px 24px 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
}

.bills-conditional-panel .bills-form-grid,
.bills-paid-fields .bills-form-grid,
.bills-provider-form-section .bills-form-grid {
  margin: 0;
}

.bills-conditional-panel .help-text {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

#billCreateForm:has(#billRechargeFields:not(.hidden)),
#billEditForm:has(#billEditRechargeFields:not(.hidden)) {
  width: min(960px, calc(100vw - 32px));
}

#billRechargeFields,
#billEditRechargeFields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.bills-allocation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.bills-allocation-heading h3,
.bills-allocation-heading p {
  margin: 0;
}

.bills-allocation-heading h3 {
  color: var(--ink-strong);
  font-size: 1rem;
}

.bills-allocation-heading p {
  max-width: 560px;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.bills-allocation-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.bills-allocation-tools .compact-button {
  min-height: 42px;
  white-space: nowrap;
}

.bills-allocation-list {
  display: grid;
  gap: 14px;
}

.bills-allocation-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.bills-allocation-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.bills-allocation-card-header strong,
.bills-allocation-driver-status {
  display: block;
  overflow-wrap: anywhere;
}

.bills-allocation-card-header strong {
  color: var(--ink-strong);
}

.bills-allocation-driver-status {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

.bills-allocation-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(125px, 0.8fr));
  gap: 14px;
  align-items: end;
}

.bills-allocation-grid > label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bills-allocation-grid > label:last-child {
  grid-column: 1 / -1;
}

.bills-allocation-grid textarea {
  min-height: 76px;
}

.bills-allocation-courier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.bills-allocation-courier .compact-button {
  min-height: 48px;
  white-space: nowrap;
}

.bills-allocation-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bills-allocation-totals > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.bills-allocation-totals span,
.bills-allocation-totals strong {
  display: block;
}

.bills-allocation-totals span {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.bills-allocation-totals.is-balanced > div:last-child strong {
  color: #86efac;
}

.bills-allocation-totals.is-unbalanced > div:last-child strong {
  color: #fca5a5;
}

.bills-allocation-mismatch,
.bills-paid-allocation-balance {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(239, 68, 68, 0.42);
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
}

.bills-allocation-mismatch label,
.bills-paid-allocation-balance label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bills-allocation-mismatch label:first-child,
.bills-paid-allocation-balance label:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bills-allocation-mismatch input[type="checkbox"],
.bills-paid-allocation-balance input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.bills-paid-allocation-balance p {
  margin: 0;
  color: #fecaca;
}

.bills-paid-fields {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.bills-paid-fields > label {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.bills-paid-fields input[type="file"] {
  min-width: 0;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-deep);
  color: var(--muted);
  line-height: 30px;
  padding: 10px 12px;
  white-space: nowrap;
}

.bills-paid-fields input[type="file"]::file-selector-button {
  min-height: 32px;
  margin: 0 12px 0 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.92);
  color: var(--ink-strong);
  font-weight: 760;
}

.bills-paid-fields input[type="file"]::-webkit-file-upload-button {
  min-height: 32px;
  margin: 0 12px 0 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.92);
  color: var(--ink-strong);
  font-weight: 760;
}

.bills-email-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
}

.bills-email-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink-strong);
  font-weight: 800;
}

.bills-email-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-hover);
}

.bills-email-preview {
  display: grid;
  gap: 12px;
}

.bills-email-preview label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bills-email-preview textarea {
  min-height: 210px;
}

.bills-integrity-section {
  display: grid;
  gap: 14px;
  margin: 20px 24px 0;
  padding: 16px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
}

.bills-integrity-section.is-safe {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.08);
}

.bills-integrity-section.is-warning {
  border-color: rgba(245, 158, 11, 0.48);
  background: rgba(245, 158, 11, 0.09);
}

.bills-integrity-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bills-integrity-heading span,
.bills-reconcile-summary span,
.bills-repair-facts span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bills-integrity-heading h3 {
  margin: 5px 0 0;
  color: var(--ink-strong);
  font-size: 1rem;
}

.bills-integrity-heading > strong {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--ink-strong);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.bills-integrity-section > p,
.bills-integrity-card p,
.bills-reconcile-options > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.bills-integrity-list {
  display: grid;
  gap: 10px;
}

.bills-integrity-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.bills-integrity-card strong,
.bills-integrity-card code {
  overflow-wrap: anywhere;
}

.bills-integrity-card code,
.bills-repair-facts code {
  color: #bfdbfe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  word-break: break-all;
}

.bills-integrity-card .secondary-button {
  width: 100%;
}

.bills-reconcile-body {
  display: grid;
  gap: 18px;
  margin: 24px;
}

.bills-reconcile-body > label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bills-reconcile-summary {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.09);
}

.bills-reconcile-summary strong {
  color: #fde68a;
  overflow-wrap: anywhere;
}

.bills-reconcile-summary small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bills-reconcile-options {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.bills-reconcile-options legend {
  margin-bottom: 7px;
  color: var(--ink-strong);
  font-weight: 800;
}

.bills-reconcile-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 14px;
}

.bills-reconcile-options input,
.bills-reconcile-confirm input {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--blue-hover);
}

.bills-reconcile-options label span,
.bills-reconcile-options label strong,
.bills-reconcile-options label small {
  display: block;
}

.bills-reconcile-options label strong {
  color: var(--ink-strong);
  line-height: 1.35;
}

.bills-reconcile-options label small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.bills-reconcile-confirm {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: flex-start;
  gap: 11px !important;
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.09);
  padding: 13px;
  color: #fde68a;
  line-height: 1.45;
}

.bills-repair-facts {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--line-soft);
}

.bills-repair-facts > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  background: var(--panel-deep);
  padding: 13px 14px;
}

.bills-repair-facts strong {
  overflow-wrap: anywhere;
  color: var(--ink-strong);
}

.bills-reconcile-body .confirmation-warning {
  margin: 0;
}

.bills-provider-payment-details {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 8px;
  background: rgba(14, 116, 144, 0.08);
}

.bills-provider-payment-header > strong,
.bills-provider-form-section h3,
.bills-provider-view-section h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
}

.bills-provider-payment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bills-provider-payment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bills-provider-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bills-provider-detail-tile {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.bills-provider-detail-tile span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bills-provider-detail-tile strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-size: 0.95rem;
}

.bills-provider-detail-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.bills-provider-copy-button,
.bills-provider-edit-bank-button {
  min-width: 0;
  white-space: nowrap;
}

.bills-provider-copy-status {
  min-height: 1.2em;
  color: var(--blue-hover) !important;
  font-weight: 750;
}

.bills-provider-copy-status:empty {
  display: none;
}

.bills-provider-copy-status.is-error {
  color: var(--danger) !important;
}

.bills-provider-payment-details p {
  margin: 0;
  color: var(--muted);
}

.bills-provider-payment-details.is-warning {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.1);
}

.bills-linked-ledger-warning {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--muted);
  font-weight: 720;
  line-height: 1.45;
}

.bills-provider-form-section,
.bills-provider-view-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
}

.bills-provider-form-section > label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bills-provider-view-details {
  display: grid;
  gap: 14px;
}

.bills-provider-view-section .saved-details {
  margin: 0;
}

.bills-provider-actions {
  min-width: 210px;
}

.bills-detail-actions {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: stretch;
  margin-top: 26px;
}

.bills-detail-actions .primary-button,
.bills-detail-actions .secondary-button,
.bills-detail-actions .danger-button {
  min-height: 48px;
  line-height: 1.2;
  padding: 0 16px;
  text-align: center;
}

.bills-modal-card > .button-row {
  gap: 12px;
  margin-top: 26px;
}

.bills-modal-card > .button-row .primary-button,
.bills-modal-card > .button-row .secondary-button,
.bills-modal-card > .button-row .danger-button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  line-height: 1.2;
  padding: 0 16px;
  text-align: center;
}

html.flee7-phone-layout .bills-page .tasks-view-switch {
  margin: 16px;
  display: grid;
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-card,
html.flee7-phone-layout .provider-card {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-card-actions,
html.flee7-phone-layout .bills-detail-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-form-grid,
html.flee7-phone-layout .bills-conditional-panel {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-allocation-heading,
html.flee7-phone-layout .bills-allocation-card-header {
  display: grid;
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-allocation-tools,
html.flee7-phone-layout .bills-allocation-grid,
html.flee7-phone-layout .bills-allocation-totals,
html.flee7-phone-layout .bills-allocation-courier {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
}

html.flee7-phone-layout .bills-allocation-tools .compact-button,
html.flee7-phone-layout .bills-allocation-courier .compact-button,
html.flee7-phone-layout .bills-allocation-remove {
  width: 100%;
}

html.flee7-phone-layout .bills-allocation-card {
  padding: 14px;
}

html.flee7-phone-layout .bills-modal-card {
  width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
}

html.flee7-phone-layout .bills-modal-card > .bills-form-grid,
html.flee7-phone-layout .bills-modal-card > .saved-details,
html.flee7-phone-layout .bills-modal-card > .bills-paid-fields,
html.flee7-phone-layout .bills-modal-card > .bills-provider-form-section,
html.flee7-phone-layout .bills-modal-card > .bills-provider-view-details,
html.flee7-phone-layout .bills-modal-card > .bills-linked-ledger-warning,
html.flee7-phone-layout .bills-modal-card > label,
html.flee7-phone-layout .bills-modal-card > .button-row,
html.flee7-phone-layout .bills-modal-card > .form-message,
html.flee7-phone-layout .bills-conditional-panel {
  margin-right: 16px;
  margin-left: 16px;
}

html.flee7-phone-layout .bills-integrity-section,
html.flee7-phone-layout .bills-reconcile-body {
  margin-right: 16px;
  margin-left: 16px;
}

html.flee7-phone-layout .bills-integrity-heading {
  display: grid;
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-integrity-heading > strong {
  justify-self: start;
}

html.flee7-phone-layout .bills-provider-payment-grid {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-provider-payment-header {
  align-items: stretch;
  flex-direction: column;
}

html.flee7-phone-layout .bills-provider-payment-actions {
  display: grid;
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .bills-provider-payment-actions .compact-button {
  width: 100%;
}

html.flee7-phone-layout .bills-provider-actions {
  min-width: 0;
}

html.flee7-phone-layout .bills-modal-card > .button-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 12px;
}

html.flee7-phone-layout .bills-modal-card > .button-row .primary-button,
html.flee7-phone-layout .bills-modal-card > .button-row .secondary-button,
html.flee7-phone-layout .bills-modal-card > .button-row .danger-button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

html.flee7-phone-layout .bills-paid-fields input[type="file"] {
  white-space: normal;
}

.bills-house-card .document-meta {
  gap: 10px;
}

.bills-house-finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.bills-house-finance-grid .profile-row {
  min-width: 0;
}

.bills-house-intro,
.bills-house-card {
  align-items: stretch;
}

.bills-house-card-actions {
  gap: 10px;
  align-content: center;
}

.bills-house-setup-warning {
  align-items: stretch;
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(120, 53, 15, 0.16);
}

.bills-house-setup-manager {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(14, 116, 144, 0.08);
}

.bills-house-setup-warning-meta {
  width: 100%;
  gap: 18px;
  padding: 18px;
}

.bills-house-setup-header {
  display: grid;
  gap: 6px;
  max-width: 720px;
}

.bills-house-setup-header > strong {
  font-size: 1.05rem;
}

.bills-house-setup-header p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.45;
}

.bills-house-setup-list {
  display: grid;
  gap: 12px;
}

.bills-house-setup-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.2fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
}

.bills-house-setup-identity {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 360px;
}

.bills-house-setup-identity > strong {
  overflow-wrap: anywhere;
}

.bills-house-setup-status {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bills-house-setup-status.inactive {
  border-color: rgba(148, 163, 184, 0.28);
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.08);
}

.bills-house-setup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.bills-house-setup-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.1);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.bills-house-setup-chip.is-complete {
  border-color: rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
}

.bills-house-setup-chip.is-current {
  border-color: rgba(59, 130, 246, 0.28);
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.1);
}

.bills-house-setup-row .compact-button {
  min-width: 112px;
  min-height: 42px;
  justify-self: end;
}

.bills-house-setup-card {
  width: min(680px, calc(100vw - 32px));
  padding-bottom: 0;
}

.bills-house-setup-modal-header {
  padding: 26px 28px 22px;
}

.bills-house-setup-modal-header p {
  max-width: 460px;
  overflow-wrap: anywhere;
}

.bills-house-setup-body {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.bills-house-setup-current {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.bills-house-setup-form-grid {
  gap: 16px 18px;
  margin: 0;
}

.bills-house-setup-form-grid label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bills-house-setup-form-grid input {
  min-height: 48px;
}

.bills-house-provider-field {
  grid-column: 1 / -1;
}

.bills-house-setup-notes {
  grid-column: 1 / -1;
}

.bills-house-setup-notes textarea {
  min-height: 96px;
}

.bills-house-setup-toggle {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
}

.bills-house-setup-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-hover);
}

.bills-house-setup-existing {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: rgba(120, 53, 15, 0.14);
}

.bills-house-setup-existing strong {
  color: var(--ink-strong);
}

.bills-house-setup-existing p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.45;
}

.bills-house-setup-existing label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.bills-house-setup-existing input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-hover);
}

.bills-house-setup-info {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 8px;
  background: rgba(14, 116, 144, 0.08);
}

.bills-house-setup-info strong {
  color: var(--ink-strong);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bills-house-setup-info p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bills-house-setup-card > .bills-house-setup-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(142px, 1fr) minmax(180px, 1.25fr);
  gap: 12px;
  margin: 0 24px 24px;
  align-items: stretch;
}

.bills-house-setup-card > .bills-house-setup-actions .primary-button,
.bills-house-setup-card > .bills-house-setup-actions .secondary-button {
  width: 100%;
  min-height: 50px;
  line-height: 1.2;
  padding: 0 14px;
  white-space: normal;
}

.bills-house-setup-card > .form-message {
  margin: -8px 24px 24px;
  min-height: 18px;
}

.bills-house-setup-card .bills-house-setup-current,
.bills-house-setup-card .bills-house-setup-form-grid {
  margin-right: 0;
  margin-left: 0;
}

.bills-house-guidance,
.bills-house-draft-edit,
.bills-house-allocation-section {
  margin: 16px 24px 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
}

.bills-house-guidance p {
  margin: 6px 0 0;
  color: var(--muted-text);
}

.bills-house-draft-edit {
  display: grid;
  gap: 14px;
}

.bills-house-draft-edit .section-heading {
  padding: 0;
}

.bills-house-draft-edit .bills-form-grid {
  margin: 0;
}

.bills-house-allocation-rows {
  display: grid;
  gap: 10px;
}

.bills-house-allocation-row {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.22);
}

.bills-house-allocation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.bills-house-allocation-row label {
  min-width: 0;
}

.bills-house-allocation-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 32px;
  color: var(--ink-strong);
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.bills-house-allocation-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  accent-color: var(--blue-hover);
}

.bills-house-allocation-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bills-house-allocation-driver-name {
  min-width: 0;
  max-width: 45%;
  color: var(--muted-text);
  font-size: 0.86rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.bills-house-allocation-fields {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) minmax(180px, 1.4fr) minmax(110px, 0.8fr) minmax(180px, 1.4fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.bills-house-payment-actions {
  flex-wrap: wrap;
  gap: 12px;
}

.bills-house-payment-actions .primary-button,
.bills-house-payment-actions .secondary-button {
  min-height: 44px;
}

@media (max-width: 760px) {
  .bills-house-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bills-house-allocation-row {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    padding: 14px;
  }

  .bills-house-allocation-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .bills-house-allocation-driver-name {
    max-width: 100%;
    text-align: left;
  }

  .bills-house-allocation-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bills-house-allocation-fields input {
    width: 100%;
  }

  .bills-house-guidance,
  .bills-house-setup-current,
  .bills-house-draft-edit,
  .bills-house-allocation-section {
    margin-right: 16px;
    margin-left: 16px;
  }

  .bills-house-setup-card {
    width: calc(100vw - 28px);
  }

  .bills-house-setup-modal-header {
    padding: 22px 18px 18px;
  }

  .bills-house-setup-body {
    gap: 16px;
    padding: 16px;
  }

  .bills-house-setup-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bills-house-provider-field {
    grid-column: auto;
  }

  .bills-house-setup-toggle,
  .bills-house-setup-notes {
    grid-column: auto;
  }

  .bills-house-setup-card .bills-house-setup-current,
  .bills-house-setup-card .bills-house-setup-form-grid {
    margin-right: 0;
    margin-left: 0;
  }

  .bills-house-setup-card > .bills-house-setup-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 16px 16px;
  }

  #houseRentSetupSaveGenerate {
    order: -2;
  }

  #houseRentSetupSave {
    order: -1;
  }

  .bills-house-setup-card > .form-message {
    margin: 0 16px 16px;
  }

  .bills-house-setup-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .bills-house-setup-identity {
    max-width: none;
  }

  .bills-house-setup-row .compact-button,
  .bills-house-setup-actions .primary-button,
  .bills-house-setup-actions .secondary-button {
    width: 100%;
    justify-self: stretch;
  }

  .bills-house-payment-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .bills-house-setup-current {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .warehouse-driver-item .warehouse-category-details,
  .warehouse-vehicle-item .warehouse-category-details {
    grid-template-columns: 1fr;
  }

  .warehouse-summary-item-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .warehouse-summary-item-header .warehouse-category-button {
    width: 100%;
  }

  .warehouse-vehicle-row-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "vehicle-meta"
      "vehicle-facts"
      "vehicle-actions";
    align-items: stretch;
  }

  .warehouse-vehicle-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-vehicle-fact.is-wide {
    grid-column: 1 / -1;
  }

  .warehouse-vehicle-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .warehouse-vehicle-row-actions .warehouse-manage-open-button,
  .warehouse-vehicle-row-actions .whatsapp-button,
  .warehouse-vehicle-row-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .warehouse-vehicle-row-actions .warehouse-manage-open-button {
    grid-column: 1 / -1;
  }

  .warehouse-vehicle-row-actions > :only-child {
    grid-column: 1 / -1;
  }

  .warehouse-vehicle-edit {
    grid-template-columns: 1fr;
  }

  .warehouse-vehicle-edit-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .warehouse-missing-vehicles-page .section-heading.compact {
    align-items: stretch;
    gap: 16px;
  }

  .warehouse-missing-vehicles-page .warehouse-export-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .warehouse-missing-vehicles-page .warehouse-export-actions .download-button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }

  .document-item.warehouse-missing-driver-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "details"
      "actions";
    gap: 16px;
    padding: 16px;
  }

  .warehouse-missing-driver-item .warehouse-category-meta {
    padding: 0;
  }

  .warehouse-missing-driver-item .warehouse-category-meta h3 {
    margin-bottom: 5px;
    font-size: 1.08rem;
  }

  .warehouse-missing-driver-item .warehouse-category-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .warehouse-missing-driver-item .warehouse-category-detail {
    min-height: 72px;
    padding: 12px;
  }

  .warehouse-missing-driver-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .warehouse-missing-driver-actions .whatsapp-button {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  .warehouse-missing-driver-item .warehouse-category-details {
    grid-template-columns: 1fr;
  }
}

.driver-deductions-page .documents-panel {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.driver-deductions-page > .dashboard-header,
.driver-deductions-page > .form-message {
  width: 100%;
  min-width: 0;
}

.driver-deductions-page .section-heading,
.driver-deductions-page .deductions-summary,
.driver-deductions-page .deductions-list,
.driver-deductions-page .deductions-warning-list,
.driver-deductions-page .deductions-notice-list,
.driver-deductions-page .deductions-setup-grid,
.driver-deductions-page .deductions-setup-lists,
.driver-deductions-page .deductions-note {
  width: 100%;
}

.driver-deductions-page .deductions-note {
  max-width: none;
  padding: 0 18px;
}

.driver-deductions-page > .form-message {
  padding: 0 18px;
}

.deductions-header-row {
  gap: 22px;
  align-items: start;
  padding-bottom: 18px;
}

.deductions-header-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.deductions-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(104px, auto) minmax(104px, auto);
  gap: 12px;
  align-items: end;
  justify-content: end;
  min-width: min(100%, 600px);
  padding-top: 4px;
}

.deductions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  justify-content: flex-end;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
}

.deductions-toolbar .compact-button,
.deductions-actions .compact-button {
  min-height: 42px;
  border-radius: 6px;
}

.deductions-confirm-button {
  min-width: 220px;
}

.deductions-actions .deductions-shortcut-button {
  opacity: 0.9;
}

.deductions-month-picker {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.deductions-month-picker input,
.deductions-month-picker select {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.deductions-toolbar .compact-button {
  width: 100%;
  min-width: 104px;
}

.deductions-payroll-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 18px 18px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.08);
}

.deductions-payroll-info[hidden] {
  display: none;
}

.deductions-payroll-info > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-content: start;
}

.deductions-payroll-info-wide {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid rgba(96, 165, 250, 0.18);
}

.driver-deductions-page .deductions-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.driver-deductions-page .deductions-summary > div {
  min-width: 0;
}

.driver-deductions-page .deductions-summary strong {
  max-width: 100%;
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
  white-space: normal;
}

.deductions-payroll-info span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deductions-payroll-info strong {
  color: var(--text);
  line-height: 1.25;
}

.deductions-payroll-info p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.deductions-source-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.deductions-source-periods span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.34);
  color: #dbeafe;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.deductions-source-periods b {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.deductions-note {
  max-width: 860px;
  margin: 0 0 18px;
}

.deductions-section {
  min-width: 0;
}

.deductions-section.collapsed {
  overflow: hidden;
}

.deductions-collapsible-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.deductions-section-toggle {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.deductions-section-toggle:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.78);
  outline-offset: 4px;
  border-radius: 8px;
}

.deductions-setup-section > .deductions-section-toggle {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.deductions-section-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.deductions-section-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deductions-section-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deductions-section-metrics {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.deductions-section-metrics span,
.deductions-section-state {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.5);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.deductions-section-state {
  min-width: 64px;
  color: var(--muted);
}

.deductions-collapsible-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.deductions-collapsible-body[hidden] {
  display: none;
}

.deductions-collapsible-body .deductions-note {
  padding: 0;
  margin-bottom: 4px;
}

.deductions-source-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 2px;
}

.deductions-source-legend span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.deductions-source-legend .source-advance {
  border-left-color: rgba(129, 140, 248, 0.9);
}

.deductions-source-legend .source-house_rent {
  border-left-color: rgba(34, 197, 94, 0.9);
}

.deductions-source-legend .source-bike_rent {
  border-left-color: rgba(56, 189, 248, 0.9);
}

.deductions-source-legend .source-electricity {
  border-left-color: rgba(245, 158, 11, 0.9);
}

.deductions-count-note {
  color: var(--muted);
  font-weight: 800;
}

.deductions-driver-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
}

.deductions-driver-search > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.deductions-driver-search input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.deductions-driver-search > button {
  min-width: 92px;
  min-height: 44px;
}

.deductions-driver-search > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.deductions-setup-section {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.deductions-setup-body {
  align-content: start;
}

.deductions-setup-list-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
  padding: 16px;
}

.deductions-setup-list-card h3 {
  margin: 0;
}

.deductions-warning-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 0;
  padding: 18px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
}

.deductions-warning-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.deductions-warning-panel strong {
  color: var(--text);
}

.deductions-notice-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
}

.deductions-notice-panel > div:first-child,
.deductions-notice-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.deductions-notice-panel span,
.deductions-notice-copy > span {
  color: var(--muted);
  line-height: 1.45;
}

.deductions-notice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
}

.deductions-information-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 999px;
  color: #bfdbfe !important;
  background: rgba(37, 99, 235, 0.14);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.deductions-explanation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.deductions-explanation-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.deductions-explanation-grid span {
  display: block;
  margin-bottom: 5px;
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deductions-explanation-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.deductions-warning-panel .deductions-explanation-grid > div {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(120, 53, 15, 0.08);
}

.deductions-warning-panel .deductions-explanation-grid span {
  color: #fde68a;
}

.deductions-notice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deductions-notice-tags span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.deductions-coverage-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
}

.deductions-coverage-panel.needs-review {
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(120, 53, 15, 0.16);
}

.deductions-coverage-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.deductions-coverage-header > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.deductions-coverage-header span,
.deductions-coverage-metrics span,
.deductions-coverage-detail > strong {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.deductions-coverage-header strong {
  color: var(--text);
  font-size: 1.05rem;
}

.deductions-coverage-header p,
.deductions-coverage-messages p,
.deductions-coverage-row span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.deductions-sync-action {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  max-width: 340px;
}

.deductions-sync-action .compact-button {
  width: 100%;
  min-height: 40px;
}

.deductions-sync-action .deductions-sync-state {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(59, 130, 246, 0.34);
  border-radius: 6px;
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.1);
  font-weight: 850;
  text-align: center;
}

.deductions-sync-action p,
.deductions-sync-action span {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.deductions-sync-action span {
  color: #bfdbfe;
}

.deductions-coverage-messages {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
}

.deductions-coverage-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.deductions-coverage-metrics > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
}

.deductions-coverage-metrics strong {
  color: var(--text);
  font-size: 1rem;
}

.deductions-coverage-detail {
  display: grid;
  gap: 10px;
}

.deductions-coverage-detail summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.deductions-coverage-detail summary::-webkit-details-marker {
  display: none;
}

.deductions-coverage-detail summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.deductions-coverage-detail summary strong {
  color: var(--text);
}

.deductions-coverage-detail summary em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.deductions-coverage-toggle-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  font-size: 0.78rem;
  font-weight: 900;
}

.deductions-coverage-detail[open] .deductions-coverage-toggle-label {
  color: #dbeafe;
}

.deductions-coverage-detail[open] .deductions-coverage-toggle-label::before {
  content: "Hide";
}

.deductions-coverage-detail[open] .deductions-coverage-toggle-label {
  font-size: 0;
}

.deductions-coverage-detail[open] .deductions-coverage-toggle-label::before {
  font-size: 0.78rem;
}

.deductions-coverage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
}

.deductions-coverage-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.deductions-coverage-row strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.deductions-coverage-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
  font-weight: 900;
  white-space: nowrap;
}

.deductions-coverage-row-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 2px;
}

.deductions-coverage-row-actions .compact-button {
  width: 100%;
  min-height: 38px;
}

.deductions-no-charge-detail {
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
}

.deductions-no-charge-row {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(15, 23, 42, 0.48);
}

.deductions-no-charge-row > span {
  border-color: rgba(34, 197, 94, 0.34);
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.18);
}

.deductions-unassigned-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
}

.deductions-unassigned-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.deductions-unassigned-header > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.deductions-unassigned-header span,
.deductions-unassigned-chips span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.deductions-unassigned-header strong {
  color: var(--text);
  font-size: 1rem;
}

.deductions-unassigned-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.deductions-unassigned-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deductions-unassigned-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
}

.deductions-unassigned-list {
  display: grid;
  gap: 10px;
}

.deductions-unassigned-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.56);
}

.deductions-unassigned-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.deductions-unassigned-row strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.deductions-unassigned-row span {
  color: var(--muted);
  line-height: 1.35;
}

.deductions-unassigned-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.deductions-unassigned-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
  font-size: 0.78rem;
  font-weight: 800;
}

.deductions-warning-panel span {
  color: var(--muted);
}

.deductions-warning-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.54);
  cursor: pointer;
}

.deductions-warning-row:focus-within,
.deductions-warning-row:hover {
  border-color: rgba(59, 130, 246, 0.58);
  background: rgba(30, 64, 175, 0.16);
}

.deductions-warning-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.deductions-warning-copy > span {
  max-width: 780px;
}

.deductions-warning-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deductions-warning-tags span {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 999px;
  color: var(--text);
  background: rgba(245, 158, 11, 0.09);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.deductions-warning-row .compact-button {
  min-width: 104px;
  min-height: 40px;
}

.deductions-warning-review-card {
  width: min(100%, 640px);
  max-height: min(860px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.deductions-sync-card {
  width: min(100%, 620px);
  max-height: min(820px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.deductions-warning-review-form {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: grid;
  gap: 16px;
}

.deductions-general-review-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: grid;
  gap: 16px;
}

.deductions-general-review-card {
  width: min(100%, 760px);
}

.deductions-sync-form {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: grid;
  gap: 16px;
}

.deductions-sync-summary {
  display: grid;
  gap: 12px;
}

.deductions-sync-summary-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
}

.deductions-sync-summary-card span,
.deductions-sync-summary-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.deductions-sync-summary-card strong {
  color: var(--text);
  font-size: 1.05rem;
}

.deductions-sync-summary-card p,
.deductions-sync-message-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.deductions-sync-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.deductions-sync-summary-row {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.58);
}

.deductions-sync-summary-row strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.deductions-sync-summary-row.add {
  border-color: rgba(34, 197, 94, 0.3);
}

.deductions-sync-summary-row.cancel {
  border-color: rgba(248, 113, 113, 0.3);
}

.deductions-sync-summary-row.free,
.deductions-sync-summary-row.update {
  border-color: rgba(96, 165, 250, 0.34);
}

.deductions-sync-message-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
}

.deductions-sync-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
}

.deductions-sync-actions button {
  min-height: 44px;
}

.deductions-warning-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.deductions-warning-detail-grid > div {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
}

.deductions-warning-detail-grid span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deductions-warning-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deductions-warning-review-form > label,
.deductions-warning-action-fields label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.deductions-warning-action-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.deductions-warning-action-fields input,
.deductions-warning-action-fields select,
.deductions-warning-action-fields textarea,
.deductions-warning-review-form > label > select {
  width: 100%;
  min-width: 0;
}

.deductions-warning-review-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.deductions-duplicate-review-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: grid;
  gap: 16px;
}

.deductions-duplicate-lines {
  display: grid;
  gap: 10px;
}

.deductions-duplicate-line {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
}

.deductions-duplicate-line.duplicate {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.12);
}

.deductions-duplicate-line > div:first-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.deductions-duplicate-line p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.deductions-duplicate-line dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.deductions-duplicate-line dl > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
}

.deductions-duplicate-line dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.deductions-duplicate-line dd {
  margin: 4px 0 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.deductions-duplicate-review-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.deductions-warning-modal-message {
  min-height: 20px;
  margin: 0;
}

.deductions-override-card {
  width: min(100%, 700px);
  max-height: min(880px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.deductions-override-form {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.deductions-override-form .deductions-warning-detail-grid,
.deductions-override-form .deductions-wide-field,
.deductions-override-form .deductions-warning-modal-message,
.deductions-override-actions {
  grid-column: 1 / -1;
}

.deductions-override-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.deductions-override-form input,
.deductions-override-form textarea {
  width: 100%;
  min-width: 0;
}

.deductions-override-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.deductions-list {
  display: grid;
  gap: 12px;
}

.deductions-line-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  grid-template-areas:
    "main actions"
    "meta actions"
    "description actions"
    "review actions"
    "note actions"
    "source actions";
  align-items: center;
  gap: 12px 18px;
  padding: 16px;
}

.deductions-line-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.deductions-line-main > div,
.deductions-line-amount {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.deductions-line-main span,
.deductions-line-meta span {
  color: var(--muted);
}

.deductions-line-amount {
  text-align: right;
}

.deductions-line-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.deductions-line-meta span {
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.5);
  font-size: 0.82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  white-space: normal;
}

.deductions-line-meta .deductions-preview-change {
  border-color: rgba(34, 197, 94, 0.32);
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.16);
}

.deductions-line-meta .deductions-preview-change.update {
  border-color: rgba(96, 165, 250, 0.34);
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
}

.deductions-line-meta .deductions-review-state {
  border-radius: 6px;
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(37, 99, 235, 0.12);
  color: #bfdbfe;
}

.deductions-line-meta .deductions-review-state.state-new_source,
.deductions-line-meta .deductions-review-state.state-source_update {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(22, 101, 52, 0.14);
  color: #bbf7d0;
}

.deductions-line-meta .deductions-review-state.state-stale_source,
.deductions-line-meta .deductions-review-state.state-locked_missing_source,
.deductions-line-meta .deductions-review-state.state-locked_source_change,
.deductions-line-meta .deductions-review-state.state-locked_new_source {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.16);
  color: #fecaca;
}

.deductions-line-card p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.deductions-line-card > .deductions-line-description {
  grid-area: description;
}

.deductions-line-card > .deductions-review-explanation {
  grid-area: review;
  padding: 10px 12px;
  border-left: 3px solid rgba(96, 165, 250, 0.48);
  background: rgba(15, 23, 42, 0.32);
  color: var(--muted);
  line-height: 1.45;
}

.deductions-line-card > p.form-note {
  grid-area: note;
}

.deductions-source-details {
  grid-area: source;
  min-width: 0;
}

.deductions-source-details summary {
  width: fit-content;
  color: #bfdbfe;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.deductions-source-details > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

.deductions-source-details p {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
}

.deductions-source-details span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.deductions-source-details strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deductions-line-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: center;
  justify-content: flex-end;
  justify-self: end;
  padding-top: 4px;
}

.deductions-line-actions .compact-button,
.deductions-line-actions .whatsapp-button {
  min-height: 42px;
}

.deductions-line-card.source-bike_rent {
  border-left: 3px solid rgba(56, 189, 248, 0.75);
}

.deductions-line-card.source-house_rent {
  border-left: 3px solid rgba(34, 197, 94, 0.75);
}

.deductions-line-card.source-electricity {
  border-left: 3px solid rgba(245, 158, 11, 0.75);
}

.deductions-line-card.source-advance {
  border-left: 3px solid rgba(129, 140, 248, 0.75);
}

.deductions-line-card.deductions-line-highlight {
  outline: 2px solid rgba(245, 158, 11, 0.82);
  outline-offset: 3px;
}

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

.deductions-setup-card {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
}

.deductions-setup-card h3,
.deductions-wide-field,
.deductions-setup-card button {
  grid-column: 1 / -1;
}

.deductions-setup-card h3 {
  margin: 0;
}

.deductions-setup-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.deductions-setup-card input,
.deductions-setup-card select,
.deductions-setup-card textarea {
  width: 100%;
  min-width: 0;
}

.deductions-setup-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
  padding: 0 18px 18px;
}

.deductions-setup-lists > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
  padding: 16px;
}

.deductions-setup-lists h3 {
  margin: 0;
}

.deductions-compact-list {
  display: grid;
  gap: 10px;
  padding: 0;
}

.deductions-compact-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.deductions-override-row {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.deductions-override-row:hover,
.deductions-override-row:focus-within {
  border-color: rgba(59, 130, 246, 0.58);
  background: rgba(30, 64, 175, 0.14);
}

.deductions-override-row.cancelled {
  opacity: 0.82;
  border-color: rgba(148, 163, 184, 0.28);
}

.deductions-override-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.deductions-override-main > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.deductions-override-main span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.deductions-status-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(59, 130, 246, 0.36);
  border-radius: 999px;
  color: var(--text);
  background: rgba(59, 130, 246, 0.12);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.deductions-override-row.cancelled .deductions-status-pill {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(248, 113, 113, 0.1);
}

.deductions-override-actions-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.deductions-override-actions-row .compact-button {
  min-height: 40px;
  min-width: 96px;
}

.deductions-compact-card p {
  margin: 0;
  color: var(--muted);
}

@media (min-width: 761px) and (max-width: 1000px) {
  .deductions-payroll-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deductions-payroll-info > div:last-child {
    grid-column: 1 / -1;
  }

  .driver-deductions-page .deductions-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .driver-deductions-page .deductions-summary > div:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .deductions-collapsible-header {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .deductions-section-toggle {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .deductions-section-metrics {
    justify-content: flex-start;
  }

  .deductions-section-metrics span,
  .deductions-section-state {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .deductions-section-state {
    width: 100%;
  }

  .deductions-collapsible-body {
    padding: 16px;
  }

  .deductions-header-row {
    align-items: stretch;
  }

  .deductions-toolbar,
  .deductions-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .deductions-toolbar .compact-button,
  .deductions-actions .compact-button,
  .deductions-month-picker input,
  .deductions-month-picker select {
    width: 100%;
  }

  .deductions-payroll-info {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    margin: 12px 16px 16px;
    padding: 14px;
  }

  .driver-deductions-page .deductions-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-deductions-page .deductions-summary > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .deductions-source-periods,
  .deductions-source-legend {
    display: grid;
    grid-template-columns: 1fr;
  }

  .deductions-driver-search {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .deductions-driver-search > button,
  .deductions-driver-search > p {
    grid-column: 1;
    width: 100%;
  }

  .deductions-confirm-button {
    width: 100%;
    min-width: 0;
  }

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

  .deductions-notice-row,
  .deductions-explanation-grid {
    grid-template-columns: 1fr;
  }

  .deductions-information-badge {
    justify-self: start;
  }

  .deductions-warning-row .compact-button {
    width: 100%;
  }

  .deductions-coverage-header,
  .deductions-coverage-row {
    grid-template-columns: 1fr;
  }

  .deductions-sync-action {
    max-width: none;
  }

  .deductions-coverage-detail summary {
    grid-template-columns: 1fr;
  }

  .deductions-coverage-toggle-label {
    justify-self: start;
  }

  .deductions-coverage-header .compact-button {
    width: 100%;
  }

  .deductions-coverage-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deductions-coverage-row > span {
    justify-self: start;
    white-space: normal;
    text-align: center;
  }

  .deductions-coverage-row-actions {
    grid-template-columns: 1fr;
  }

  .deductions-unassigned-header,
  .deductions-unassigned-row {
    grid-template-columns: 1fr;
  }

  .deductions-unassigned-header .compact-button {
    width: 100%;
  }

  .deductions-unassigned-meta {
    justify-content: flex-start;
  }

  .deductions-warning-review-card {
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
  }

  .deductions-sync-card {
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
  }

  .deductions-override-card {
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
  }

  .deductions-warning-review-form,
  .deductions-general-review-body,
  .deductions-duplicate-review-body,
  .deductions-sync-form,
  .deductions-override-form {
    padding: 16px;
  }

  .deductions-warning-detail-grid,
  .deductions-duplicate-line dl,
  .deductions-source-details > div,
  .deductions-warning-action-fields,
  .deductions-warning-review-actions,
  .deductions-sync-summary-grid,
  .deductions-sync-actions,
  .deductions-override-form,
  .deductions-override-actions {
    grid-template-columns: 1fr;
  }

  .deductions-sync-actions button {
    width: 100%;
  }

  .deductions-override-main {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .deductions-override-actions-row {
    display: grid;
    justify-content: stretch;
  }

  .deductions-override-actions-row .compact-button,
  .deductions-override-actions button {
    width: 100%;
  }

  .deductions-line-main {
    grid-template-columns: 1fr;
  }

  .deductions-line-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "meta"
      "description"
      "review"
      "note"
      "source"
      "actions";
    align-items: stretch;
  }

  .deductions-line-amount {
    text-align: left;
  }

  .deductions-line-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-self: stretch;
    justify-content: stretch;
  }

  .deductions-line-actions .compact-button,
  .deductions-line-actions .whatsapp-button {
    width: 100%;
  }

  .deductions-setup-grid,
  .deductions-setup-lists,
  .deductions-setup-card {
    grid-template-columns: 1fr;
  }

  .driver-deductions-page .section-heading,
  .driver-deductions-page .deductions-setup-grid {
    padding: 16px;
  }

  .driver-deductions-page .deductions-note,
  .driver-deductions-page > .form-message {
    padding-right: 16px;
    padding-left: 16px;
  }

  .deductions-setup-card,
  .deductions-setup-lists > div,
  .deductions-setup-list-card {
    padding: 16px;
  }

  .deductions-setup-lists {
    gap: 14px;
    padding: 0 16px 16px;
  }
}
/* Revenue Calculation: scoped guided workflow */
.revenue-page {
  width: min(1480px, calc(100vw - 32px));
  max-width: 1480px;
}

.revenue-page .documents-panel {
  padding: 24px;
}

.revenue-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 28px;
  align-items: end;
}

.revenue-intro h2,
.revenue-intro p,
.revenue-step-heading h2,
.revenue-step-heading p {
  margin: 0;
}

.revenue-intro p,
.revenue-step-heading p {
  max-width: 78ch;
  margin-top: 8px;
  color: #aab6c8;
  line-height: 1.55;
}

.revenue-eyebrow,
.revenue-step-heading > span {
  color: #60a5fa;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.revenue-history-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 150px;
  gap: 10px 12px;
  align-items: end;
}

.revenue-history-control label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #c7d2e3;
  font-weight: 700;
}

.revenue-history-control select,
.revenue-review-toolbar :is(input, select),
.revenue-review-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.revenue-loading {
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px solid #33445c;
  background: #172235;
}

.revenue-loading-bar {
  height: 5px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #0f1828;
}

.revenue-loading-bar i {
  display: block;
  width: 42%;
  height: 100%;
  background: #3b82f6;
  animation: revenue-loading 1.2s ease-in-out infinite alternate;
}

@keyframes revenue-loading {
  from { transform: translateX(-5%); }
  to { transform: translateX(145%); }
}

.revenue-page-message {
  min-height: 24px;
  margin: 14px 0;
}
.revenue-page-message.warning { color: #fbbf24; }

.revenue-stepper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.revenue-stepper button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 10px;
  border: 1px solid #34435a;
  border-radius: 6px;
  color: #aeb9ca;
  background: #172235;
  text-align: left;
}

.revenue-stepper button b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #0e1727;
}

.revenue-stepper button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.revenue-stepper button.is-complete {
  border-color: #2f855a;
  color: #bbf7d0;
}

.revenue-stepper button.is-active {
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 0 0 1px #60a5fa inset;
}

.revenue-stepper button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.revenue-step-panel {
  margin-top: 0;
}

.revenue-step-heading {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid #34435a;
}

.revenue-step-heading > span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid #315d8b;
  border-radius: 5px;
  background: #122840;
}

.revenue-period-summary,
.revenue-review-summary,
.revenue-final-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.revenue-period-summary > div,
.revenue-review-summary > div,
.revenue-final-summary > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid #34435a;
  border-radius: 5px;
  background: #172235;
}

.revenue-period-summary span,
.revenue-review-summary span,
.revenue-final-summary span,
.revenue-final-summary small {
  display: block;
  color: #99a6b9;
}

.revenue-period-summary strong,
.revenue-review-summary strong,
.revenue-final-summary strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 1.08rem;
}

.revenue-final-summary small {
  margin-top: 6px;
  line-height: 1.4;
}

.revenue-review-summary .is-ready { border-color: #2f855a; }
.revenue-review-summary .is-review { border-color: #b88722; }
.revenue-review-summary .is-blocked { border-color: #b64b55; }

.revenue-info-box {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid #315d8b;
  border-left: 4px solid #60a5fa;
  border-radius: 5px;
  background: #12243a;
}

.revenue-info-box.neutral { border-color: #48576b; border-left-color: #94a3b8; background: #172235; }
.revenue-info-box.danger { border-color: #87424a; border-left-color: #f87171; background: #2b1a24; }
.revenue-info-box p { margin: 6px 0 0; color: #b7c1d0; line-height: 1.5; }

.revenue-reset-area {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #6b4a52;
  border-radius: 5px;
  background: #241b27;
}

.revenue-reset-area > div { min-width: 0; }
.revenue-reset-area p { max-width: 82ch; margin: 6px 0 0; color: #b7c1d0; line-height: 1.5; }
.revenue-reset-area button { flex: 0 0 250px; min-height: 46px; }

.revenue-step-actions,
.revenue-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.revenue-step-actions > *,
.revenue-modal-actions > * {
  min-height: 46px;
}

.revenue-upload-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.revenue-upload-form label {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #34435a;
  border-radius: 5px;
  background: #172235;
}

.revenue-upload-form label > span { font-weight: 800; }
.revenue-upload-form label > small { min-height: 40px; margin: 6px 0 12px; color: #99a6b9; line-height: 1.4; }
.revenue-upload-form input { width: 100%; min-width: 0; box-sizing: border-box; }
.revenue-upload-form > button { grid-column: 1 / -1; min-height: 48px; }

.revenue-upload-result { margin-top: 18px; }
.revenue-empty { margin: 0; padding: 16px; border: 1px dashed #44536a; color: #aab6c8; }
.revenue-empty.is-ready { border-color: #2f855a; color: #bbf7d0; }

.revenue-performance-upload {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #315d8b;
  border-radius: 7px;
  background: linear-gradient(135deg, #12243a 0%, #172235 72%);
}

.revenue-performance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.revenue-performance-heading h3,
.revenue-performance-heading p { margin: 0; }
.revenue-performance-heading h3 { margin-top: 5px; }
.revenue-performance-heading p { max-width: 78ch; margin-top: 7px; color: #aab6c8; line-height: 1.5; }
.revenue-performance-status { flex: 0 0 auto; }
.revenue-performance-status b {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.revenue-performance-status .is-ready { color: #4ade80; }
.revenue-performance-status .is-blocked { color: #fbbf24; }

.revenue-performance-form {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1fr) 230px;
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
}

.revenue-performance-file {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #34435a;
  border-radius: 5px;
  background: #111c2d;
  font-weight: 800;
}
.revenue-performance-file small { color: #99a6b9; font-weight: 500; line-height: 1.4; }
.revenue-performance-file input { width: 100%; min-width: 0; box-sizing: border-box; }
.revenue-performance-confirm { margin: 0; padding: 14px; border: 1px solid #34435a; border-radius: 5px; background: #111c2d; }
.revenue-performance-form > button { width: 100%; min-height: 100%; margin: 0; }
.revenue-performance-result { margin-top: 12px; }
.revenue-performance-saved { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.revenue-performance-saved > div { min-width: 0; padding: 13px 14px; border: 1px solid #34435a; border-radius: 5px; background: #111c2d; }
.revenue-performance-saved > div.is-ready { border-color: #2f855a; }
.revenue-performance-saved > div.is-review { border-color: #b88722; }
.revenue-performance-saved > div.is-blocked { border-color: #b94a5b; background: #251c28; }
.revenue-performance-saved > div.is-combined { grid-column: 1 / -1; }
.revenue-performance-saved span,
.revenue-performance-saved small { display: block; color: #99a6b9; }
.revenue-performance-saved strong { display: block; margin: 5px 0; overflow-wrap: anywhere; }
.revenue-performance-actions { margin: 12px 0 0; }

.revenue-saved-heading {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 16px;
  border-left: 4px solid #f87171;
  background: #251c28;
}
.revenue-saved-heading.is-ready { border-left-color: #4ade80; background: #142a29; }
.revenue-saved-heading span { color: #aab6c8; }

.revenue-file-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.revenue-file-summary > div { min-width: 0; padding: 14px; border: 1px solid #34435a; }
.revenue-file-summary span,
.revenue-file-summary small { display: block; color: #99a6b9; }
.revenue-file-summary strong { display: block; margin: 5px 0; overflow-wrap: anywhere; }

.revenue-reconciliation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.revenue-reconciliation-grid > article { min-width: 0; border: 1px solid #34435a; }
.revenue-check-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid #34435a; }
.revenue-check-heading span { color: #99a6b9; }
.revenue-check-heading h3 { margin: 4px 0 0; }
.revenue-check-heading > b { flex: 0 0 auto; padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; }
.revenue-check-heading .is-ready { color: #4ade80; }
.revenue-check-heading .is-blocked { color: #f87171; }
.revenue-check-list { padding: 8px 16px 16px; }
.revenue-check-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #2c394d; }
.revenue-check-list > div:last-child { border-bottom: 0; }
.revenue-check-list > div > b { color: #4ade80; }
.revenue-check-list > div.is-blocked > b { color: #f87171; }
.revenue-check-list span > * { display: block; }
.revenue-check-list small { margin-top: 4px; color: #fca5a5; line-height: 1.4; }

.revenue-review-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) 130px;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
}
.revenue-review-toolbar label { display: grid; gap: 7px; color: #c7d2e3; font-weight: 700; }
.revenue-review-toolbar button { min-height: 48px; }

.revenue-export-bar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #34435a;
  border-radius: 6px;
  background: #111c2d;
}
.revenue-export-bar small { display: block; margin-top: 4px; color: #99a6b9; }
.revenue-export-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.revenue-export-actions a {
  display: inline-flex;
  min-width: 108px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.revenue-export-actions a.is-disabled { opacity: 0.48; cursor: not-allowed; }

.revenue-entitlement-table {
  min-width: 0;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #34435a;
  border-radius: 7px;
  background: #111c2d;
}
.revenue-entitlement-head,
.revenue-driver-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) 92px 112px minmax(150px, 1.1fr) 118px 90px 88px minmax(140px, 1fr) minmax(125px, 0.9fr) 108px;
  gap: 12px;
  align-items: center;
}
.revenue-entitlement-head {
  padding: 12px 14px;
  border-bottom: 1px solid #41516a;
  color: #9fb0c8;
  background: #0e1727;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.revenue-entitlement-head > span { min-width: 0; overflow-wrap: anywhere; }
.revenue-driver-list { display: grid; }
.revenue-driver-row {
  min-width: 0;
  padding: 14px;
  border-bottom: 1px solid #34435a;
  border-left: 4px solid #4ade80;
  background: #172235;
}
.revenue-driver-row:last-child { border-bottom: 0; }
.revenue-driver-row.is-review { border-left-color: #fbbf24; }
.revenue-driver-row.is-blocked { border-left-color: #f87171; }
.revenue-driver-row > div { min-width: 0; }
.revenue-driver-row small,
.revenue-driver-row span { display: block; color: #99a6b9; line-height: 1.4; overflow-wrap: anywhere; }
.revenue-driver-row strong { display: block; margin: 4px 0; overflow-wrap: anywhere; }
.revenue-driver-approved strong { color: #86efac; }
.revenue-driver-approved small { color: #bfdbfe; }
.revenue-driver-state > b { color: #bbf7d0; }
.revenue-driver-row.is-review .revenue-driver-state > b { color: #fde68a; }
.revenue-driver-row.is-blocked .revenue-driver-state > b { color: #fca5a5; }
.revenue-open-review { width: 100%; min-height: 44px; }

.revenue-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.revenue-pagination button { min-width: 110px; }

.revenue-warning-list { display: grid; gap: 10px; margin-top: 18px; }
.revenue-warning-list article { padding: 14px 16px; border: 1px solid #6f5722; border-left: 4px solid #fbbf24; background: #282318; }
.revenue-warning-list p { margin: 5px 0 0; color: #c8b98d; line-height: 1.5; }

.revenue-confirm-check,
.revenue-inline-check {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
}
.revenue-confirm-check { margin-top: 22px; padding: 18px; border: 1px solid #4c5d74; background: #172235; font-weight: 700; }
.revenue-confirm-check input,
.revenue-inline-check input { flex: 0 0 auto; width: 18px !important; height: 18px; margin-top: 2px; }

.revenue-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(4, 10, 22, 0.86);
}
.revenue-modal.hidden { display: none; }
.revenue-modal-card { width: min(1050px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 24px; border: 1px solid #41516a; border-radius: 7px; background: #172235; }
.revenue-modal-card > .section-heading { position: sticky; top: -24px; z-index: 2; margin: -24px -24px 0; padding: 22px 24px; background: #172235; border-bottom: 1px solid #34435a; }
.revenue-modal-card .section-heading h2 { margin: 3px 0; }
.revenue-review-explanation { margin: 20px 0; padding: 16px 18px; border: 1px solid #6f5722; border-left: 4px solid #fbbf24; background: #282318; }
.revenue-review-explanation p { margin-bottom: 0; }
.revenue-review-explanation ol { margin: 8px 0 0; padding-left: 22px; }
.revenue-review-explanation li + li { margin-top: 6px; }
.revenue-resolution-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: -4px 0 20px;
  padding: 16px;
  border: 1px solid #315d8b;
  border-left: 4px solid #60a5fa;
  border-radius: 5px;
  background: #12243a;
}
.revenue-resolution-actions > * {
  flex: 0 1 260px;
  width: auto;
  min-width: 220px;
  margin: 0;
}
.revenue-review-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.revenue-review-facts > div { min-width: 0; padding: 13px 14px; border: 1px solid #34435a; background: #111c2d; }
.revenue-review-facts span { display: block; color: #99a6b9; font-size: 0.82rem; }
.revenue-review-facts strong { display: block; margin-top: 5px; overflow-wrap: anywhere; }
.revenue-review-form { display: grid; gap: 18px; }
.revenue-review-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; margin: 0; padding: 18px; border: 1px solid #34435a; }
.revenue-review-form legend { padding: 0 8px; font-weight: 800; }
.revenue-review-form label { display: grid; gap: 7px; min-width: 0; color: #c7d2e3; font-weight: 700; }
.revenue-review-form label.wide { grid-column: 1 / -1; }
.revenue-fieldset-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid #60a5fa;
  color: #b7c1d0;
  background: #111c2d;
  line-height: 1.5;
}
.revenue-review-form textarea { min-height: 90px; resize: vertical; }
.revenue-owner-override { border-color: #315d8b !important; background: #12243a; }
.revenue-owner-override.hidden { display: none; }
.revenue-system-amount {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #365f8c;
  border-radius: 5px;
  background: #0e1c30;
}
.revenue-system-amount span,
.revenue-system-amount small { display: block; color: #9fb0c8; }
.revenue-system-amount strong { display: block; margin: 6px 0; color: #fff; font-size: 1.12rem; }
.revenue-review-form .revenue-info-box.wide { grid-column: 1 / -1; margin-top: 0; }
.revenue-guidance-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #365f8c;
  border-radius: 7px;
  background: #0e1c30;
}
.revenue-guidance-card.is-hours { border-color: #2f6f62; background: #102628; }
.revenue-guidance-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #60a5fa;
  border-radius: 50%;
  color: #bfdbfe;
  background: #122840;
  font-size: 1.15rem;
  font-weight: 900;
}
.revenue-guidance-card.is-hours .revenue-guidance-icon { border-color: #4ade80; color: #bbf7d0; background: #14302e; }
.revenue-guidance-card h3 { margin: 4px 0 12px; }
.revenue-rule-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.revenue-rule-details > div { min-width: 0; padding: 12px 13px; border: 1px solid #34435a; border-radius: 5px; background: rgba(15, 23, 42, 0.58); }
.revenue-rule-details > div.is-ready { border-color: #2f855a; }
.revenue-rule-details > div.is-review { border-color: #b88722; }
.revenue-rule-details span,
.revenue-rule-details small { display: block; color: #99a6b9; line-height: 1.4; }
.revenue-rule-details strong { display: block; margin: 5px 0; overflow-wrap: anywhere; }
.revenue-exception-controls { border-color: #6f5722 !important; background: #221f19; }
.revenue-modal-actions { padding-top: 18px; border-top: 1px solid #34435a; }
.revenue-modal-actions > button {
  flex: 0 0 240px;
  width: 240px;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.revenue-driver-action {
  display: grid;
  gap: 8px;
}
.revenue-driver-action > * {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1400px) {
  .revenue-entitlement-head { display: none; }
  .revenue-driver-list { gap: 12px; padding: 12px; }
  .revenue-driver-row { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #34435a; border-left-width: 4px; border-radius: 6px; }
  .revenue-driver-row:last-child { border-bottom: 1px solid #34435a; }
  .revenue-driver-row > div[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #8292a9;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }
  .revenue-driver-action { grid-column: 1 / -1; }
}

@media (max-width: 1120px) {
  .revenue-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .revenue-period-summary,
  .revenue-review-summary,
  .revenue-final-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .revenue-page .documents-panel { padding: 16px; }
  .revenue-intro,
  .revenue-upload-form,
  .revenue-reconciliation-grid,
  .revenue-review-toolbar,
  .revenue-file-summary { grid-template-columns: 1fr; }
  .revenue-performance-heading { flex-direction: column; }
  .revenue-performance-form,
  .revenue-performance-saved { grid-template-columns: 1fr; }
  .revenue-performance-form > button { min-height: 52px; }
  .revenue-guidance-card { grid-template-columns: 1fr; }
  .revenue-rule-details { grid-template-columns: 1fr; }
  .revenue-history-control { grid-template-columns: 1fr; }
  .revenue-history-control > * { width: 100%; }
  .revenue-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revenue-step-heading { grid-template-columns: 1fr; gap: 12px; }
  .revenue-step-heading > span { width: 74px; }
  .revenue-upload-form label { min-height: 0; }
  .revenue-upload-form label > small { min-height: 0; }
  .revenue-review-toolbar button { width: 100%; }
  .revenue-reset-area { align-items: stretch; flex-direction: column; }
  .revenue-reset-area button { flex-basis: auto; width: 100%; }
  .revenue-export-bar { align-items: stretch; flex-direction: column; }
  .revenue-export-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revenue-export-actions a { width: 100%; min-width: 0; }
  .revenue-driver-row { grid-template-columns: 1fr; padding: 14px; }
  .revenue-driver-action { grid-column: auto; }
  .revenue-step-actions,
  .revenue-modal-actions { flex-direction: column-reverse; }
  .revenue-step-actions > *,
  .revenue-modal-actions > button { flex-basis: auto; width: 100%; min-width: 0; }
  .revenue-modal { place-items: start center; padding: 10px; }
  .revenue-modal-card { max-height: calc(100dvh - 20px); padding: 16px; }
  .revenue-modal-card > .section-heading { top: -16px; margin: -16px -16px 0; padding: 16px; }
  .revenue-review-form fieldset { grid-template-columns: 1fr; padding: 14px; }
  .revenue-review-form label.wide { grid-column: auto; }
  .revenue-review-form .revenue-info-box.wide { grid-column: auto; }
  .revenue-review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.revenue-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 420px) {
  .revenue-stepper,
  .revenue-period-summary,
  .revenue-review-summary,
  .revenue-final-summary { grid-template-columns: 1fr; }
  .revenue-stepper button { min-height: 48px; }
  .revenue-pagination { display: grid; grid-template-columns: 1fr; text-align: center; }
  .revenue-pagination button { width: 100%; }
  .revenue-review-facts { grid-template-columns: 1fr; }
}

/* Owner settings and per-module access */
.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.settings-menu {
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}

.settings-menu > summary {
  list-style: none;
}

.settings-menu > summary::-webkit-details-marker {
  display: none;
}

.settings-menu-trigger {
  box-sizing: border-box;
  min-width: 92px;
  cursor: pointer;
  user-select: none;
}

.settings-menu[open] .settings-menu-trigger {
  border-color: #f5b942;
  color: #f5b942;
}

.settings-menu-popover {
  box-sizing: border-box;
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: 180px;
  padding: 7px;
  border: 1px solid #40516a;
  border-radius: 8px;
  background: #172235;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.settings-menu-popover a {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  color: #f3f6fb;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.settings-menu-popover a:hover,
.settings-menu-popover a:focus-visible {
  background: #24334a;
  color: #f5b942;
}

.settings-access-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.settings-access-header {
  margin-bottom: 18px;
}

.settings-access-header .dashboard-title > div {
  min-width: 0;
}

.settings-access-header h1 {
  margin: 2px 0 0;
}

.settings-eyebrow {
  display: block;
  color: #f5b942;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-owner-note {
  margin-bottom: 18px;
  padding: 17px 19px;
  border: 1px solid #7a6535;
  border-left: 4px solid #f5b942;
  border-radius: 8px;
  background: #282318;
}

.settings-owner-note strong {
  display: block;
  color: #f8d77d;
  font-size: 1.02rem;
}

.settings-owner-note p {
  margin: 5px 0 0;
  color: #d4d8df;
}

.settings-access-layout {
  display: grid;
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-access-shell #settingsLoadingProgress.flee7-stage-progress {
  margin: 0 0 18px;
}

.settings-load-actions {
  justify-content: flex-end;
  margin: -8px 0 18px;
}

.staff-password-layout {
  display: block;
}

.staff-password-card {
  width: min(100%, 480px);
  margin: 0 auto;
}

.staff-password-card #staffPasswordLoadingProgress.flee7-stage-progress {
  margin: 2px 0 4px;
}

.staff-password-card > button,
.staff-password-card > a.primary-button {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

.settings-people-panel,
.settings-permissions-panel,
.settings-audit-panel {
  border: 1px solid #34435a;
  border-radius: 9px;
  background: #172235;
  box-shadow: 0 14px 30px rgba(3, 9, 18, 0.18);
}

.settings-people-panel {
  position: sticky;
  top: 16px;
  padding: 18px;
}

.settings-people-search {
  display: grid;
  gap: 7px;
  margin: 16px 0 12px;
  color: #c7d2e3;
  font-size: 0.82rem;
  font-weight: 800;
}

.settings-people-search input {
  min-height: 44px;
}

.settings-people-list {
  display: grid;
  gap: 8px;
  max-height: calc(100dvh - 250px);
  overflow: auto;
  padding-right: 2px;
}

.settings-person-button {
  display: grid;
  width: 100%;
  min-height: 76px;
  gap: 3px;
  padding: 12px 13px;
  border: 1px solid #34435a;
  border-radius: 7px;
  background: #111c2d;
  color: #f3f6fb;
  text-align: left;
  cursor: pointer;
}

.settings-person-button:hover,
.settings-person-button:focus-visible {
  border-color: #6f83a0;
  background: #1d2a40;
}

.settings-person-button.active {
  border-color: #f5b942;
  box-shadow: inset 3px 0 0 #f5b942;
}

.settings-person-button span,
.settings-person-button small {
  color: #9eabba;
  overflow-wrap: anywhere;
}

.settings-person-button small {
  color: #f0c768;
  font-size: 0.74rem;
  font-weight: 800;
}

.settings-permissions-panel {
  min-height: 420px;
  overflow: hidden;
}

.settings-empty-state {
  display: grid;
  min-height: 420px;
  place-content: center;
  padding: 28px;
  color: #9eabba;
  text-align: center;
}

.settings-empty-state strong {
  color: #f3f6fb;
  font-size: 1.2rem;
}

.settings-empty-state p {
  max-width: 420px;
  margin: 7px 0 0;
}

.settings-person-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid #34435a;
  background: #1b283c;
}

.settings-person-heading span:first-child {
  color: #f5b942;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-person-heading h2 {
  margin: 4px 0 3px;
}

.settings-person-heading p {
  margin: 0;
  color: #9eabba;
}

.settings-policy-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #52657e;
  border-radius: 999px;
  color: #cbd5e1 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.settings-viewer-warning {
  margin: 18px 24px 0;
  padding: 12px 14px;
  border: 1px solid #705d2c;
  border-radius: 6px;
  background: #282318;
  color: #f4d173;
  font-weight: 700;
}

.settings-permission-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 24px;
}

.settings-permission-toolbar p {
  max-width: 680px;
  margin: 0;
  color: #b6c0cf;
}

.settings-module-groups {
  display: grid;
  gap: 20px;
  padding: 0 24px 24px;
}

.settings-module-groups fieldset {
  min-width: 0;
  margin: 0;
  padding: 15px;
  border: 1px solid #34435a;
  border-radius: 8px;
  background: #111c2d;
}

.settings-module-groups legend {
  padding: 0 8px;
  color: #dce5f2;
  font-weight: 900;
}

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

.settings-module-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  min-height: 82px;
  align-items: start;
  padding: 13px;
  border: 1px solid #34435a;
  border-radius: 7px;
  background: #172235;
  cursor: pointer;
}

.settings-module-option:hover {
  border-color: #5d718d;
}

.settings-module-option:has(input:checked) {
  border-color: #4f8c6b;
  background: #162b27;
}

.settings-module-option input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #50b47a;
}

.settings-module-option span,
.settings-module-option strong,
.settings-module-option small {
  display: block;
  min-width: 0;
}

.settings-module-option small {
  margin-top: 5px;
  color: #9eabba;
  line-height: 1.38;
}

.settings-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  min-height: 76px;
  justify-content: flex-end;
  gap: 18px;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid #40516a;
  background: rgba(23, 34, 53, 0.97);
  backdrop-filter: blur(8px);
}

.settings-save-bar p {
  margin: 0 auto 0 0;
  color: #f0c768;
  font-weight: 800;
}

.settings-save-bar button {
  min-width: 190px;
}

.settings-audit-panel {
  margin-top: 18px;
  padding: 20px;
}

.settings-audit-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.settings-audit-list article {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #34435a;
  border-radius: 6px;
  background: #111c2d;
}

.settings-audit-list p {
  margin: 3px 0 0;
  color: #9eabba;
}

.settings-audit-list time {
  flex: 0 0 auto;
  color: #9eabba;
  font-size: 0.82rem;
}

.settings-list-empty {
  margin: 0;
  padding: 18px;
  color: #9eabba;
  text-align: center;
}

@media (max-width: 880px) {
  .settings-access-layout {
    grid-template-columns: 1fr;
  }

  .settings-people-panel {
    position: static;
  }

  .settings-people-list {
    max-height: 320px;
  }
}

@media (max-width: 760px) {
  .dashboard-title.dashboard-title-with-actions {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand title"
      "actions actions";
  }

  .dashboard-title-with-actions > .auth-brand.inline {
    grid-area: brand;
  }

  .dashboard-title-with-actions > h1 {
    grid-area: title;
  }

  .dashboard-title-with-actions > .dashboard-header-actions {
    grid-area: actions;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    margin-left: 0;
  }

  .dashboard-title-with-actions > .dashboard-header-actions > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .dashboard-title-with-actions .settings-menu-trigger,
  .dashboard-title-with-actions .dashboard-logout-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
  }

  .dashboard-title-with-actions .settings-menu-popover {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
  }
}

@media (max-width: 680px) {
  .settings-access-shell {
    width: min(100% - 20px, 1440px);
    padding-top: 10px;
  }

  .settings-access-header {
    align-items: stretch;
  }

  .settings-access-header > .secondary-button {
    width: 100%;
  }

  .settings-person-heading,
  .settings-permission-toolbar,
  .settings-save-bar,
  .settings-audit-list article {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-permission-toolbar .button-row,
  .settings-permission-toolbar button,
  .settings-save-bar button {
    width: 100%;
  }

  .settings-module-grid {
    grid-template-columns: 1fr;
  }

  .settings-module-groups,
  .settings-permission-toolbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .settings-person-heading {
    padding: 18px 14px;
  }

  .settings-save-bar {
    padding: 14px;
  }

  .settings-audit-list time {
    align-self: flex-start;
  }

  .staff-password-card {
    padding: 18px 14px;
  }
}

/* Bike Issues & Recovery: scoped, phone-first workflow. */
.bike-issues-page {
  width: min(1180px, calc(100vw - 28px));
}

.bike-issues-page .dashboard-header {
  position: relative;
}

.bike-issues-header-actions,
.bike-issues-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bike-issues-heading-actions .primary-button,
.bike-issues-heading-actions .secondary-button {
  width: auto;
  min-height: 44px;
  margin: 0;
}

.bike-issues-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding: 16px;
}

.bike-issues-summary:empty {
  display: none;
}

.bike-summary-card {
  min-height: 128px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.12), rgba(15, 23, 42, 0.55));
  padding: 17px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.bike-summary-card:hover,
.bike-summary-card:focus-visible,
.bike-summary-card.active {
  border-color: #fbbf24;
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(15, 23, 42, 0.66));
  outline: 0;
}

.bike-summary-card strong {
  color: #fde68a;
  font-size: 2.2rem;
  line-height: 1;
}

.bike-summary-card span {
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.4;
}

.bike-summary-card.is-billing {
  border-color: rgba(96, 165, 250, 0.46);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.18), rgba(15, 23, 42, 0.62));
}

.bike-summary-card.is-billing:hover,
.bike-summary-card.is-billing:focus-visible,
.bike-summary-card.is-billing.active {
  border-color: #60a5fa;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.28), rgba(15, 23, 42, 0.72));
}

.bike-summary-card.is-billing strong {
  color: #bfdbfe;
}

.bike-summary-card.is-decision-needed {
  border-color: rgba(248, 113, 113, 0.46);
  background: linear-gradient(145deg, rgba(185, 28, 28, 0.18), rgba(15, 23, 42, 0.62));
}

.bike-summary-card.is-decision-needed strong {
  color: #fecaca;
}

.bike-summary-card.is-decision-needed:hover,
.bike-summary-card.is-decision-needed:focus-visible,
.bike-summary-card.is-decision-needed.active {
  border-color: #f87171;
  background: linear-gradient(145deg, rgba(185, 28, 28, 0.28), rgba(15, 23, 42, 0.72));
}

.bike-issues-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.bike-issues-toolbar label {
  margin: 0;
}

.bike-issues-toolbar input {
  min-height: 48px;
}

.bike-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 8px;
  background: var(--blue-soft);
  padding: 8px 10px 8px 13px;
  color: #bfdbfe;
  font-size: 0.82rem;
  font-weight: 750;
}

.bike-active-filter button {
  min-width: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: rgba(147, 197, 253, 0.12);
  color: var(--ink-strong);
  cursor: pointer;
  font-size: 1rem;
}

.bike-issue-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.bike-issue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
  gap: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 4px solid #fbbf24;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.43);
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.bike-issue-card.is-ready {
  border-left-color: #34d399;
}

.bike-issue-main {
  min-width: 0;
}

.bike-issue-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bike-issue-title-row h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.24rem;
  overflow-wrap: anywhere;
}

.bike-issue-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 999px;
  background: var(--amber-soft);
  padding: 5px 9px;
  color: #fde68a;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bike-issue-card.is-ready .bike-issue-badge {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.1);
  color: #a7f3d0;
}

.bike-issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bike-issue-meta span {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  padding: 5px 9px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.bike-issue-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 15px;
}

.bike-issue-detail {
  min-width: 0;
}

.bike-issue-detail span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bike-issue-detail strong {
  display: block;
  color: var(--ink);
  font-size: 0.87rem;
  overflow-wrap: anywhere;
}

.bike-issue-detail.is-charge-driver {
  border-radius: 7px;
  background: rgba(120, 53, 15, 0.14);
  box-shadow: inset 3px 0 rgba(251, 191, 36, 0.72);
  padding: 9px 10px;
}

.bike-issue-detail.is-charge-driver span {
  color: #fcd34d;
}

.bike-issue-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bike-issue-history {
  margin-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 12px;
}

.bike-issue-history summary {
  color: #bfdbfe;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
}

.bike-issue-history ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.bike-issue-history li {
  color: var(--muted);
  font-size: 0.76rem;
}

.bike-issue-history li strong,
.bike-issue-history li span {
  display: block;
}

.bike-issue-history li strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.bike-issue-history li p {
  margin: 4px 0 0;
  line-height: 1.4;
}

.bike-issue-action {
  display: grid;
  align-content: center;
  gap: 8px;
}

.bike-issue-action-buttons {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bike-issue-action .primary-button,
.bike-issue-action .secondary-button {
  width: 100%;
  min-height: 54px;
  margin: 0;
  font-size: 0.96rem;
  white-space: normal;
}

.bike-issue-action small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
}

.bike-issues-empty {
  margin: 0;
  padding: 42px 18px;
  color: var(--muted);
  text-align: center;
}

.bike-issues-modal-card {
  width: min(100%, 620px);
  max-height: calc(100svh - 36px);
  overflow-y: auto;
}

.bike-modal-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.bike-modal-body label {
  margin: 0;
}

.bike-modal-body input,
.bike-modal-body select,
.bike-modal-body textarea {
  width: 100%;
}

.bike-modal-body textarea {
  min-height: 92px;
}

.bike-report-bike-meta {
  min-height: 20px;
  margin: -6px 0 0;
  color: #bfdbfe;
  font-size: 0.78rem;
  font-weight: 650;
}

.bike-billing-explanation {
  margin: 0;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 9px;
  background: rgba(30, 64, 175, 0.12);
  padding: 12px 13px;
  color: #bfdbfe;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.5;
}

.bike-billing-explanation.is-correction {
  border-color: rgba(251, 191, 36, 0.44);
  background: rgba(120, 53, 15, 0.18);
  color: #fde68a;
}

.bike-billing-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bike-billing-identity .bike-issue-detail {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  padding: 11px;
}

.bike-billing-responsibility {
  display: grid;
  gap: 10px;
}

.bike-billing-choice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.bike-choice.bike-billing-choice span {
  min-height: 0;
  place-items: initial;
  gap: 4px;
  padding: 13px 14px;
  text-align: left;
}

.bike-choice.bike-billing-choice span strong,
.bike-choice.bike-billing-choice span small {
  display: block;
}

.bike-choice.bike-billing-choice span strong {
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.35;
}

.bike-choice.bike-billing-choice span small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.4;
}

.bike-choice.bike-billing-choice input:checked + span small {
  color: #bfdbfe;
}

.bike-supplier-payment {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 9px;
  background: rgba(6, 78, 59, 0.12);
  padding: 13px;
}

.bike-supplier-payment div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bike-supplier-payment span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bike-supplier-payment strong {
  color: #a7f3d0;
  font-size: 0.9rem;
  text-align: right;
}

.bike-supplier-payment p {
  margin: 0;
  border-top: 1px solid rgba(52, 211, 153, 0.18);
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.bike-reason-field {
  display: grid;
  gap: 8px;
}

.bike-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bike-field-heading label {
  min-width: 0;
}

.bike-inline-action {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 4px 0;
  color: #93c5fd;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.bike-inline-action:hover,
.bike-inline-action:focus-visible {
  color: #dbeafe;
}

.bike-reason-add {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.48);
  padding: 13px;
}

.bike-reason-add[hidden] {
  display: none;
}

.bike-reason-add > label:not(.bike-reason-requires-note) {
  margin-bottom: -4px;
  font-size: 0.78rem;
}

.bike-reason-requires-note {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.bike-reason-requires-note input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.bike-reason-add-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bike-reason-add-actions .primary-button,
.bike-reason-add-actions .secondary-button {
  min-height: 44px;
  margin: 0;
}

.bike-reason-add .form-message {
  margin: 0;
}

.bike-modal-body .bike-possession-field {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(147, 197, 253, 0.26);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.34);
  padding: 14px;
}

.bike-modal-body .bike-possession-field legend {
  margin: 0;
  padding: 0 5px;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
}

.bike-possession-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.bike-choice span small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
}

.bike-choice input:checked + span small {
  color: #bfdbfe;
}

.bike-choice input:disabled + span {
  cursor: not-allowed;
  opacity: 0.45;
}

.bike-workflow-stepper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 16px 18px 0;
  list-style: none;
}

.bike-workflow-stepper li {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.bike-workflow-stepper li.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: #bfdbfe;
}

.bike-workflow-stepper li.done {
  border-color: rgba(52, 211, 153, 0.35);
  color: #a7f3d0;
}

.bike-workflow-question {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

.bike-workflow-help {
  margin: -7px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.bike-modal-body fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.bike-modal-body legend {
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
}

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

.bike-choice {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.bike-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bike-choice span {
  min-height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.bike-choice input:checked + span {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: #bfdbfe;
  box-shadow: 0 0 0 2px rgba(6, 111, 209, 0.18);
}

.bike-choice input:focus-visible + span {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.bike-placement-choice {
  display: grid;
  gap: 9px;
}

.bike-choice.bike-placement-option span {
  min-height: 104px;
  place-items: initial;
  align-content: center;
  gap: 5px;
  text-align: left;
}

.bike-choice.bike-placement-option span strong,
.bike-choice.bike-placement-option span small {
  display: block;
}

.bike-choice.bike-placement-option span strong {
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.3;
}

.bike-choice.bike-placement-option span small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.4;
}

.bike-choice.bike-placement-option input:checked + span small {
  color: #bfdbfe;
}

.bike-placement-fields {
  display: grid;
  gap: 15px;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.3);
  padding: 14px;
}

.bike-placement-fields[hidden] {
  display: none;
}

.bike-return-ready {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 9px;
  background: rgba(6, 78, 59, 0.14);
  padding: 11px 12px;
}

.bike-return-ready > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, 0.48);
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  font-size: 1rem;
  font-weight: 900;
}

.bike-return-ready p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.bike-return-ready strong {
  color: #a7f3d0;
  font-size: 0.84rem;
}

.bike-return-ready small,
.bike-return-driver-preview {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.45;
}

.bike-return-driver-preview {
  min-height: 42px;
  margin: -4px 0 0;
  border-left: 3px solid rgba(96, 165, 250, 0.55);
  border-radius: 0 7px 7px 0;
  background: rgba(30, 64, 175, 0.12);
  padding: 10px 12px;
  color: #bfdbfe;
}

.bike-workflow-actions {
  display: grid;
  grid-template-columns: minmax(100px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
}

.bike-workflow-actions .primary-button,
.bike-workflow-actions .secondary-button {
  min-height: 52px;
  margin: 0;
}

.bike-workflow-section[hidden],
.bike-active-filter[hidden] {
  display: none;
}

body.bike-modal-open {
  overflow: hidden;
}

.company-dashboard-card.bike-recovery p {
  color: #fecaca;
}

.motorbike-bike-issue-alert {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(96, 165, 250, 0.52);
  border-left: 5px solid #60a5fa;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.78));
  padding: 18px;
  box-shadow: var(--shadow);
}

.motorbike-bike-issue-alert.driver-has-bike {
  border-color: rgba(251, 191, 36, 0.55);
  border-left-color: #fbbf24;
  background: linear-gradient(145deg, rgba(180, 83, 9, 0.2), rgba(15, 23, 42, 0.78));
}

.motorbike-bike-issue-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.motorbike-bike-issue-heading span {
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.motorbike-bike-issue-alert.driver-has-bike .motorbike-bike-issue-heading span {
  color: #fde68a;
}

.motorbike-bike-issue-heading h2 {
  margin: 6px 0 0;
  color: var(--ink-strong);
  font-size: 1.16rem;
  line-height: 1.3;
}

.motorbike-bike-issue-heading > strong {
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, 0.42);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  padding: 6px 10px;
  color: #bfdbfe;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.motorbike-bike-issue-alert.driver-has-bike .motorbike-bike-issue-heading > strong {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(180, 83, 9, 0.16);
  color: #fde68a;
}

.motorbike-bike-issue-alert > p {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.motorbike-bike-issue-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.motorbike-bike-issue-details > div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
  padding: 12px;
}

.motorbike-bike-issue-details dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.motorbike-bike-issue-details dd {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.motorbike-bike-issue-next {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 14px;
  color: #bfdbfe !important;
  font-weight: 700;
}

.motorbike-bike-issue-alert.driver-has-bike .motorbike-bike-issue-next {
  color: #fde68a !important;
}

.motorbike-take-bike-intro {
  margin: 0;
  border-bottom: 1px solid rgba(96, 165, 250, 0.24);
  background: rgba(37, 99, 235, 0.1);
  padding: 14px 18px;
  color: #bfdbfe;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.5;
}

.motorbike-driver-history {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.motorbike-driver-history-heading {
  align-items: center;
}

.motorbike-driver-history-heading > div {
  min-width: 0;
}

.motorbike-driver-history-heading h2,
.motorbike-driver-history-heading p,
.motorbike-driver-history-item h3 {
  margin: 0;
}

.motorbike-driver-history-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
}

.motorbike-driver-history-list {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.motorbike-driver-history-item {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 4px solid rgba(148, 163, 184, 0.48);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  padding: 14px;
}

.motorbike-driver-history-item.is-under-recovery {
  border-color: rgba(96, 165, 250, 0.34);
  border-left-color: #60a5fa;
  background: rgba(30, 64, 175, 0.1);
}

.motorbike-driver-history-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.motorbike-driver-history-item-heading h3 {
  min-width: 0;
  color: var(--ink-strong);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.motorbike-driver-history-item-heading strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  padding: 5px 8px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.motorbike-driver-history-item.is-under-recovery .motorbike-driver-history-item-heading strong {
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
}

.motorbike-driver-history-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.motorbike-driver-history-facts > div {
  min-width: 0;
}

.motorbike-driver-history-facts dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.motorbike-driver-history-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .bike-issues-page {
    width: min(100% - 20px, 1180px);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .bike-issues-page .dashboard-header,
  .bike-issues-page .dashboard-title {
    align-items: center;
  }

  .bike-issues-page .dashboard-title h1 {
    padding-right: 0;
    font-size: 1.28rem;
    text-align: left;
  }

  .bike-issues-page .warehouse-back-button {
    min-width: 44px;
    padding-inline: 10px;
    font-size: 0.75rem;
  }

  .bike-issues-page .section-heading {
    align-items: stretch;
    padding: 15px;
  }

  #bikeIssuesHistoryToggle {
    width: 100%;
    min-height: 46px;
    margin: 0;
  }

  .bike-issues-heading-actions {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .bike-issues-heading-actions .primary-button {
    min-height: 52px;
  }

  .bike-issues-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 11px;
  }

  .bike-summary-card {
    min-height: 116px;
    padding: 14px;
  }

  .bike-summary-card strong {
    font-size: 2rem;
  }

  .bike-summary-card span {
    font-size: 0.78rem;
  }

  .bike-issues-toolbar {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .bike-active-filter {
    justify-content: space-between;
  }

  .bike-issue-list {
    padding: 10px;
  }

  .bike-issue-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 15px;
  }

  .bike-issue-title-row {
    display: grid;
    gap: 9px;
  }

  .bike-issue-badge {
    justify-self: start;
  }

  .bike-issue-details {
    grid-template-columns: 1fr;
  }

  .bike-issue-action .primary-button,
  .bike-issue-action .secondary-button {
    min-height: 58px;
  }

  .bike-issues-modal-card {
    width: 100%;
    max-height: calc(100svh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    border-radius: 12px;
  }

  .bike-issues-page .confirmation-modal {
    align-items: flex-end;
    padding: max(12px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom));
  }

  .bike-modal-body {
    padding: 16px;
  }

  .bike-billing-identity {
    grid-template-columns: 1fr;
  }

  .bike-supplier-payment div {
    display: grid;
  }

  .bike-supplier-payment strong {
    text-align: left;
  }

  .bike-reason-add-actions {
    grid-template-columns: 1fr;
  }

  .bike-workflow-actions {
    grid-template-columns: 1fr;
  }

  .motorbike-bike-issue-heading {
    display: grid;
  }

  .motorbike-bike-issue-heading > strong {
    justify-self: start;
  }

  .motorbike-bike-issue-details {
    grid-template-columns: 1fr;
  }

  .motorbike-driver-history-heading,
  .motorbike-driver-history-item-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .motorbike-driver-history-item-heading strong {
    align-self: flex-start;
  }

  .motorbike-driver-history-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .bike-issues-summary,
  .bike-choice-grid {
    grid-template-columns: 1fr;
  }

  .bike-workflow-stepper li {
    padding-inline: 3px;
    font-size: 0.64rem;
  }
}

/* Keep Bike History overrides last so shared dashboard and issue rules cannot collapse its controls. */
.dashboard.bike-history-page {
  width: min(1180px, calc(100vw - 28px));
}

.form-message.bike-history-message {
  min-height: 0;
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  text-align: left;
}

@media (max-width: 760px) {
  .dashboard.bike-history-page {
    width: min(100% - 20px, 1180px);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .bike-issues-page .bike-history-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bike-issues-page .bike-history-header-actions .secondary-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .bike-issues-page .bike-history-header-actions {
    grid-template-columns: 1fr;
  }
}

/* Tasks mission workspace -------------------------------------------------- */
.dashboard.tasks-page {
  width: min(1440px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
}

.tasks-page > * {
  min-width: 0;
}

.tasks-page .primary-button,
.tasks-page .secondary-button {
  box-sizing: border-box;
}

.tasks-eyebrow {
  color: #93c5fd;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tasks-mission-panel {
  position: relative;
  border-color: rgba(59, 130, 246, 0.42);
  background:
    radial-gradient(circle at 86% 8%, rgba(37, 99, 235, 0.22), transparent 34%),
    linear-gradient(145deg, #172136 0%, #1f2937 58%, #172033 100%);
}

.tasks-mission-panel::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(147, 197, 253, 0.08);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.tasks-mission-panel.is-clear {
  border-color: rgba(52, 211, 153, 0.42);
  background:
    radial-gradient(circle at 86% 8%, rgba(16, 185, 129, 0.18), transparent 34%),
    linear-gradient(145deg, #142535 0%, #1f2937 58%, #172b2d 100%);
}

.tasks-mission-head,
.tasks-queue-header,
.tasks-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tasks-mission-head {
  padding: 22px 24px 10px;
}

.tasks-mission-head h2,
.tasks-queue-header h2,
.tasks-detail-header h2,
.tasks-detail-empty h2,
.tasks-detail-brief h3,
.tasks-detail-section h3,
.tasks-decision-heading h3 {
  margin: 0;
  color: var(--ink-strong);
}

.tasks-mission-head h2 {
  margin-top: 5px;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.tasks-mission-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.tasks-mission-head .secondary-button,
.tasks-queue-header .secondary-button,
.tasks-detail-header .secondary-button {
  width: auto;
  min-width: 96px;
  margin: 0;
}

.tasks-mission-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 10px 24px 24px;
}

.tasks-progress-orb {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#38bdf8 var(--tasks-progress), rgba(71, 85, 105, 0.42) 0);
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.3), 0 0 28px rgba(56, 189, 248, 0.08);
}

.tasks-mission-panel.is-clear .tasks-progress-orb {
  background: conic-gradient(#34d399 var(--tasks-progress), rgba(71, 85, 105, 0.42) 0);
}

.tasks-progress-orb > div {
  width: 92px;
  height: 92px;
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 50%;
  background: #162033;
  text-align: center;
}

.tasks-progress-orb strong {
  color: var(--ink-strong);
  font-size: 1.65rem;
  line-height: 1;
}

.tasks-progress-orb span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tasks-mission-copy {
  display: grid;
  gap: 7px;
}

.tasks-mission-copy > strong {
  color: var(--ink-strong);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.tasks-mission-copy > span {
  color: var(--muted);
  font-size: 0.85rem;
}

.tasks-progress-track {
  width: 100%;
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.64);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.tasks-progress-track > span {
  width: var(--tasks-progress-width, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  transition: width 0.42s ease;
}

.tasks-mission-panel.is-clear .tasks-progress-track > span {
  background: linear-gradient(90deg, #059669, #34d399);
}

.tasks-mission-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(71, 85, 105, 0.72);
  background: rgba(15, 23, 42, 0.22);
}

.tasks-mission-metrics > div {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 20px;
  border-right: 1px solid rgba(71, 85, 105, 0.58);
}

.tasks-mission-metrics > div:last-child {
  border-right: 0;
}

.tasks-mission-metrics span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tasks-mission-metrics strong {
  color: var(--ink-strong);
  font-size: 1.65rem;
  line-height: 1;
}

.tasks-mission-metrics .attention strong {
  color: #fcd34d;
}

.tasks-mission-metrics .complete strong {
  color: #6ee7b7;
}

.tasks-workspace {
  display: grid;
  grid-template-columns: minmax(390px, 0.85fr) minmax(520px, 1.15fr);
  align-items: start;
  gap: 18px;
}

.tasks-queue-panel,
.tasks-detail-panel {
  min-width: 0;
}

.tasks-queue-header {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.tasks-queue-header h2 {
  margin-top: 4px;
  font-size: 1.25rem;
}

.tasks-queue-header > div > span:last-child,
.tasks-detail-header > div > span:last-child {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.tasks-filter-toggle.has-active-filters {
  border-color: rgba(96, 165, 250, 0.72);
  color: #bfdbfe;
}

.tasks-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 18px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.46);
}

.tasks-view-switch .secondary-button {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-color: transparent;
}

.tasks-view-switch .secondary-button.active {
  border-color: rgba(96, 165, 250, 0.36);
  background: rgba(37, 99, 235, 0.2);
  color: #dbeafe;
  box-shadow: 0 5px 14px rgba(2, 6, 23, 0.2);
}

.tasks-search-field {
  display: grid;
  gap: 7px;
  margin: 14px 18px 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.tasks-search-field input {
  width: 100%;
  min-height: 46px;
  padding-left: 14px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.7);
}

.tasks-filter-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.48);
}

.tasks-filter-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.tasks-filter-panel select {
  min-width: 0;
}

.tasks-filter-panel .secondary-button {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.tasks-lanes {
  display: flex;
  gap: 8px;
  padding: 14px 18px 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tasks-lane {
  min-height: 38px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(15, 23, 42, 0.32);
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.tasks-lane strong {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.48);
  color: var(--ink);
  font-size: 0.68rem;
}

.tasks-lane:hover,
.tasks-lane:focus-visible,
.tasks-lane.active {
  border-color: rgba(96, 165, 250, 0.7);
  color: #dbeafe;
}

.tasks-lane.active {
  background: rgba(37, 99, 235, 0.16);
}

.tasks-lane.active strong {
  background: #2563eb;
  color: white;
}

.tasks-completion-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 14px 18px 4px;
  padding: 13px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 10px;
  background: rgba(6, 78, 59, 0.2);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.tasks-completion-notice.is-visible {
  opacity: 1;
  transform: none;
}

.tasks-completion-check {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #059669;
  color: white;
  font-size: 1.05rem;
  font-weight: 900;
}

.tasks-completion-notice > div {
  display: grid;
  gap: 2px;
}

.tasks-completion-notice strong {
  color: #d1fae5;
  font-size: 0.86rem;
}

.tasks-completion-notice span:not(.tasks-completion-check) {
  color: #a7f3d0;
  font-size: 0.75rem;
}

.tasks-completion-notice .secondary-button {
  margin: 0;
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
}

.tasks-focus-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 14px 18px 5px;
  padding: 15px;
  border: 1px solid rgba(251, 191, 36, 0.48);
  border-radius: 11px;
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.13), transparent 44%),
    rgba(69, 45, 8, 0.18);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.2);
}

.tasks-focus-card.is-selected {
  border-color: rgba(96, 165, 250, 0.82);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12), 0 12px 30px rgba(2, 6, 23, 0.28);
}

.tasks-focus-icon,
.task-card-icon {
  display: grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.14);
  color: #bfdbfe;
  font-weight: 850;
}

.tasks-focus-icon {
  width: 46px;
  height: 46px;
  font-size: 1rem;
}

.tasks-focus-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tasks-focus-copy > strong {
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 0.96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-focus-copy > span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-focus-card .primary-button {
  width: auto;
  min-width: 112px;
  margin: 0;
}

.tasks-list {
  display: grid;
  gap: 9px;
  padding: 14px 18px 18px;
}

.tasks-list:empty {
  display: none;
}

.tasks-page .task-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(96, 165, 250, 0.58);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.4);
  cursor: default;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.tasks-page .task-card:hover,
.tasks-page .task-card:focus-within,
.tasks-page .task-card.is-selected {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(30, 64, 175, 0.13);
  transform: translateY(-1px);
}

.tasks-page .task-card.priority-high,
.tasks-page .task-card.is-overdue {
  border-left-color: #f59e0b;
}

.tasks-page .task-card.status-completed {
  border-left-color: #34d399;
}

.tasks-page .task-card.status-rejected {
  border-left-color: #f87171;
}

.tasks-page .task-card-open {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  border: 0;
  padding: 12px 10px 12px 13px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-card-icon {
  width: 40px;
  height: 40px;
  font-size: 0.82rem;
}

.task-card-icon.module-monitoring,
.tasks-focus-icon.module-monitoring {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(124, 58, 237, 0.14);
  color: #ddd6fe;
}

.task-card-icon.module-data-quality,
.tasks-focus-icon.module-data-quality {
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(217, 119, 6, 0.16);
  color: #fde68a;
}

.tasks-page .task-card.module-data-quality {
  border-left-color: #fbbf24;
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.08), transparent 38%),
    rgba(15, 23, 42, 0.4);
}

.task-card-icon.module-fleet,
.tasks-focus-icon.module-fleet {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(217, 119, 6, 0.13);
  color: #fde68a;
}

.task-card-icon.module-housing,
.tasks-focus-icon.module-housing {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(5, 150, 105, 0.13);
  color: #a7f3d0;
}

.task-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.task-card-kicker {
  color: #93c5fd;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.task-card-title,
.task-card-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-title {
  color: var(--ink-strong);
  font-size: 0.88rem;
}

.task-card-context {
  color: var(--muted);
  font-size: 0.73rem;
}

.task-card-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.task-card-age {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-card-age.attention {
  color: #fcd34d;
}

.tasks-page .task-card-badges {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.tasks-page .task-card-badges strong,
.tasks-page .task-card-badges em {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.59rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.tasks-page .task-card-badges .priority {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

.tasks-page .task-card-badges .status {
  background: rgba(59, 130, 246, 0.13);
  color: #bfdbfe;
}

.task-card-chevron {
  color: #60a5fa;
  font-size: 1rem;
  transition: transform 0.15s ease;
}

.task-card-open:hover .task-card-chevron,
.task-card-open:focus-visible .task-card-chevron {
  transform: translateX(2px);
}

.tasks-page .task-card-actions {
  display: grid;
  gap: 8px;
  padding-right: 10px;
}

.tasks-page .task-card-actions .task-card-work-button,
.tasks-page .task-card-actions .whatsapp-button {
  width: 100%;
  min-width: 118px;
  margin: 0;
}

.task-card-skeleton {
  height: 88px;
  display: grid;
  grid-template-columns: 42px 1fr 92px;
  gap: 12px;
  padding: 14px;
}

.task-card-skeleton span {
  display: block;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(71, 85, 105, 0.28), rgba(100, 116, 139, 0.42), rgba(71, 85, 105, 0.28));
  background-size: 220% 100%;
  animation: tasks-skeleton 1.25s linear infinite;
}

.tasks-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed rgba(100, 116, 139, 0.48);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.22);
  text-align: center;
}

.tasks-empty-icon,
.tasks-detail-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, 0.38);
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.12);
  color: #6ee7b7;
  font-size: 1.2rem;
  font-weight: 900;
}

.tasks-empty-state strong {
  color: var(--ink-strong);
}

.tasks-empty-state > span:not(.tasks-empty-icon) {
  max-width: 360px;
  color: var(--muted);
  font-size: 0.82rem;
}

.tasks-empty-state .secondary-button {
  margin-top: 6px;
}

.tasks-message {
  min-height: 0;
  margin: 0;
  padding: 0 18px 18px;
  text-align: left;
}

.tasks-detail-panel {
  position: sticky;
  top: 18px;
  min-height: 620px;
  max-height: calc(100dvh - 36px);
  overflow: hidden;
}

.tasks-detail-empty {
  min-height: 620px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 40px;
  background:
    radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.12), transparent 34%),
    var(--panel);
  text-align: center;
}

.tasks-detail-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.tasks-detail-content {
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.tasks-detail-header {
  z-index: 3;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(31, 41, 55, 0.97);
  backdrop-filter: blur(12px);
}

.tasks-detail-header h2 {
  margin-top: 5px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.tasks-detail-module {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(37, 99, 235, 0.13);
  color: #bfdbfe;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tasks-detail-module.module-data-quality {
  border-color: rgba(251, 191, 36, 0.46);
  background: rgba(217, 119, 6, 0.15);
  color: #fde68a;
}

.tasks-detail-scroll {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  padding: 18px;
  scrollbar-width: thin;
}

.tasks-workflow-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.tasks-workflow-stepper.is-data-repair {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tasks-workflow-stepper li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 750;
  text-align: center;
}

.tasks-workflow-stepper li::before {
  position: absolute;
  top: 14px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #334155;
  content: "";
}

.tasks-workflow-stepper li:first-child::before {
  display: none;
}

.tasks-workflow-stepper li span {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #475569;
  border-radius: 50%;
  background: #172033;
  color: #94a3b8;
}

.tasks-workflow-stepper li.is-reached,
.tasks-workflow-stepper li.is-active {
  color: #bfdbfe;
}

.tasks-workflow-stepper li.is-reached::before {
  background: #2563eb;
}

.tasks-workflow-stepper li.is-reached span {
  border-color: #3b82f6;
  background: rgba(37, 99, 235, 0.22);
  color: white;
}

.tasks-workflow-stepper li.is-active span {
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.13);
}

.tasks-read-only-notice {
  margin-bottom: 14px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 8px;
  padding: 11px 13px;
  background: rgba(120, 53, 15, 0.16);
  color: #fde68a;
  font-size: 0.8rem;
  line-height: 1.45;
}

.tasks-detail-brief,
.tasks-detail-section,
.tasks-decision-panel {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.33);
}

.tasks-detail-brief {
  padding: 18px;
}

.tasks-detail-brief h3,
.tasks-detail-section h3,
.tasks-decision-heading h3 {
  margin-top: 5px;
  font-size: 1rem;
}

.tasks-detail-brief p {
  margin: 11px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.58;
  white-space: pre-wrap;
}

.tasks-context-actions {
  display: flex;
  margin-top: 12px;
}

.tasks-context-actions .primary-button {
  width: auto;
  min-height: 44px;
  margin: 0;
}

.tasks-detail-section {
  margin-top: 14px;
  overflow: hidden;
}

.tasks-detail-section-heading {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.tasks-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}

.tasks-detail-fact {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 18px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.tasks-detail-fact:nth-child(2n),
.tasks-detail-fact.is-wide {
  border-right: 0;
}

.tasks-detail-fact.is-wide {
  grid-column: 1 / -1;
}

.tasks-detail-fact span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tasks-detail-fact strong {
  color: var(--ink-strong);
  font-size: 0.88rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tasks-detail-message {
  min-height: 0;
  margin: 12px 0 0;
  padding: 0;
  text-align: left;
}

.tasks-action-zone {
  min-width: 0;
  max-width: 100%;
  margin-top: 14px;
}

.tasks-action-zone:not(.has-actions) {
  margin-top: 0;
}

.tasks-detail-panel .targets-edit-form.tasks-action-form {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 13px;
  padding: 16px;
}

.tasks-decision-heading {
  margin-bottom: 2px;
}

.tasks-detail-panel .targets-edit-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.tasks-detail-panel .targets-edit-form input,
.tasks-detail-panel .targets-edit-form select,
.tasks-detail-panel .targets-edit-form textarea {
  width: 100%;
}

.tasks-detail-panel .targets-edit-form textarea {
  min-height: 88px;
}

.tasks-detail-panel .targets-form-actions.tasks-decision-panel,
.tasks-detail-panel .tasks-action-form .targets-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tasks-detail-panel .targets-form-actions.tasks-decision-panel,
.tasks-detail-panel .tasks-action-form > .targets-form-actions {
  padding: 14px;
}

.tasks-detail-panel .tasks-action-form > .targets-form-actions {
  margin: 2px -16px -16px;
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 11px 11px;
  background: rgba(15, 23, 42, 0.4);
}

.tasks-detail-panel .tasks-action-form :is(.tasks-source-stage, .tasks-inline-callout) > .targets-form-actions {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.tasks-detail-panel .tasks-action-form .tasks-notification-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.tasks-detail-panel .targets-form-actions .primary-button,
.tasks-detail-panel .targets-form-actions .secondary-button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
}

.tasks-detail-panel .targets-form-actions .primary-button {
  grid-column: 1 / -1;
}

.tasks-detail-panel .danger-action {
  border-color: rgba(248, 113, 113, 0.42);
  color: #fca5a5;
}

.tasks-data-repair-form {
  display: grid;
  gap: 14px;
  overflow: hidden;
  border-color: rgba(251, 191, 36, 0.32);
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.1), transparent 38%),
    rgba(15, 23, 42, 0.48);
}

.tasks-repair-heading {
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
  padding-bottom: 13px;
}

.tasks-repair-heading p,
.tasks-repair-stage-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.tasks-repair-stage {
  display: grid;
  gap: 14px;
}

.tasks-repair-stage-heading {
  display: grid;
  gap: 3px;
}

.tasks-repair-stage-heading > span {
  color: #fbbf24;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tasks-repair-stage-heading h4 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.3;
}

.tasks-repair-stage-heading h4:focus {
  outline: 0;
}

.tasks-repair-comparison,
.tasks-repair-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
}

.tasks-repair-comparison > div,
.tasks-repair-review > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.58);
}

.tasks-repair-comparison > div.is-uploaded {
  border-color: rgba(167, 139, 250, 0.34);
}

.tasks-repair-comparison > div.is-current,
.tasks-repair-review > div.is-after {
  border-color: rgba(251, 191, 36, 0.38);
}

.tasks-repair-comparison span:not(.tasks-repair-versus),
.tasks-repair-review div > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tasks-repair-comparison strong,
.tasks-repair-review strong {
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-size: 1rem;
}

.tasks-repair-comparison small,
.tasks-repair-review small {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.4;
}

.tasks-repair-versus,
.tasks-repair-arrow {
  align-self: center;
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.tasks-repair-arrow {
  font-size: 1.2rem;
}

.tasks-repair-choices {
  display: grid;
  gap: 9px;
  margin: 0;
  border: 0;
  padding: 0;
}

.tasks-repair-choices legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.tasks-repair-choices label {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.48);
  color: inherit;
  cursor: pointer;
}

.tasks-repair-choices label:hover,
.tasks-repair-choices label:focus-within,
.tasks-repair-choices label:has(input:checked) {
  border-color: rgba(251, 191, 36, 0.62);
  background: rgba(120, 53, 15, 0.18);
}

.tasks-repair-choices input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #f59e0b;
}

.tasks-repair-choices label > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tasks-repair-choices strong {
  color: var(--ink-strong);
  font-size: 0.83rem;
}

.tasks-repair-choices small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.tasks-repair-city-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.tasks-repair-city-field select {
  width: 100%;
  min-height: 48px;
}

.tasks-repair-validation {
  min-height: 0;
  margin: 0;
  color: #fca5a5;
  font-size: 0.75rem;
  font-weight: 700;
}

.tasks-repair-safety-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(52, 211, 153, 0.32);
  border-radius: 9px;
  padding: 12px;
  background: rgba(6, 78, 59, 0.16);
}

.tasks-repair-safety-note > span,
.tasks-repair-done-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.24);
  color: #6ee7b7;
  font-weight: 900;
}

.tasks-repair-safety-note p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: #a7f3d0;
  font-size: 0.72rem;
  line-height: 1.45;
}

.tasks-repair-safety-note strong {
  color: #d1fae5;
  font-size: 0.77rem;
}

.tasks-repair-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tasks-repair-actions.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tasks-repair-actions .primary-button,
.tasks-repair-actions .secondary-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
}

.tasks-repair-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.tasks-repair-stage[data-repair-stage="done"] {
  min-height: 190px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.tasks-repair-done-icon {
  width: 58px;
  height: 58px;
  font-size: 1.5rem;
  box-shadow: 0 0 0 8px rgba(5, 150, 105, 0.1);
}

.tasks-detail-panel .primary-button.danger-action,
.tasks-confirm-dialog .primary-button.danger-action {
  background: #b91c1c;
  color: white;
}

.tasks-confirm-dialog {
  width: min(430px, calc(100vw - 32px));
  border: 1px solid rgba(248, 113, 113, 0.38);
  border-radius: 12px;
  padding: 0;
  background: #1f2937;
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.tasks-confirm-dialog::backdrop {
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(3px);
}

.tasks-confirm-dialog > div:first-child {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 24px 18px;
  text-align: center;
}

.tasks-confirm-dialog h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.2rem;
}

.tasks-confirm-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.tasks-confirm-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(185, 28, 28, 0.18);
  color: #fca5a5;
  font-size: 1.1rem;
  font-weight: 900;
}

.tasks-confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.34);
}

.tasks-confirm-actions .primary-button,
.tasks-confirm-actions .secondary-button {
  width: 100%;
  min-height: 46px;
  margin: 0;
}

@keyframes tasks-skeleton {
  to {
    background-position: -220% 0;
  }
}

@media (max-width: 1180px) {
  .tasks-workspace {
    grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.1fr);
  }

  .tasks-page .task-card-open {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tasks-page .task-card-meta {
    grid-column: 2 / 4;
    grid-row: 2;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }

  .task-card-chevron {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 960px) {
  .dashboard.tasks-page {
    width: min(100% - 20px, 760px);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .tasks-workspace {
    display: block;
  }

  .tasks-mission-head,
  .tasks-queue-header {
    align-items: flex-start;
  }

  .tasks-mission-head {
    padding: 18px 18px 8px;
  }

  .tasks-mission-body {
    gap: 16px;
    padding: 8px 18px 18px;
  }

  .tasks-progress-orb {
    width: 92px;
    height: 92px;
  }

  .tasks-progress-orb > div {
    width: 72px;
    height: 72px;
  }

  .tasks-progress-orb strong {
    font-size: 1.25rem;
  }

  .tasks-mission-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tasks-mission-metrics > div {
    min-height: 68px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.58);
  }

  .tasks-mission-metrics > div:nth-child(3n) {
    border-right: 0;
  }

  .tasks-mission-metrics > div:last-child {
    grid-column: span 2;
    border-right: 0;
    border-bottom: 0;
  }

  .tasks-mission-metrics strong {
    font-size: 1.35rem;
  }

  .tasks-queue-panel {
    margin-top: 18px;
  }

  .tasks-view-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasks-detail-panel {
    position: fixed;
    inset: 0;
    z-index: 1100;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-x: clip;
    border: 0;
    border-radius: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.22s ease, visibility 0.22s;
  }

  .tasks-detail-panel.is-open {
    visibility: visible;
    transform: none;
  }

  .tasks-detail-panel.is-empty {
    display: none;
  }

  .tasks-detail-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .tasks-detail-header {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 82px;
    flex-direction: row;
    align-items: center;
    padding:
      max(14px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      14px
      max(16px, env(safe-area-inset-left));
  }

  .tasks-detail-header > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tasks-detail-header h2 {
    overflow: hidden;
    font-size: 1.1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tasks-detail-header .secondary-button {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 48px;
  }

  .tasks-detail-scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    padding:
      16px
      max(16px, env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .tasks-detail-brief,
  .tasks-detail-section,
  .tasks-action-zone,
  .tasks-detail-panel .targets-edit-form.tasks-action-form,
  .tasks-detail-panel .targets-form-actions.tasks-decision-panel,
  .tasks-detail-panel .tasks-action-form .targets-form-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tasks-detail-panel .targets-form-actions.tasks-decision-panel,
  .tasks-detail-panel .tasks-action-form > .targets-form-actions {
    position: static;
    bottom: auto;
    margin: 2px 0 0;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.97);
  }

  .tasks-detail-panel .targets-form-actions :is(.primary-button, .secondary-button) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.tasks-detail-open {
    overflow: hidden;
  }
}

@media (max-width: 720px) {
  .tasks-workflow-stepper.is-data-repair {
    gap: 3px;
  }

  .tasks-workflow-stepper.is-data-repair li {
    font-size: 0.61rem;
  }

  .tasks-data-repair-form {
    padding: 14px;
  }

  .tasks-repair-comparison,
  .tasks-repair-review {
    grid-template-columns: 1fr;
  }

  .tasks-repair-versus,
  .tasks-repair-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .tasks-repair-actions.is-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .tasks-mission-head .secondary-button,
  .tasks-queue-header .secondary-button {
    min-width: 82px;
  }

  .tasks-mission-body {
    grid-template-columns: 1fr;
  }

  .tasks-progress-orb {
    display: none;
  }

  .tasks-filter-panel {
    grid-template-columns: 1fr;
  }

  .tasks-focus-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tasks-focus-card .primary-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }

  .tasks-page .task-card {
    grid-template-columns: 1fr;
  }

  .tasks-page .task-card-open {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 94px;
    padding: 13px;
  }

  .tasks-page .task-card-meta {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .tasks-page .task-card-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 12px 12px;
  }

  .tasks-page .task-card-actions .task-card-work-button,
  .tasks-page .task-card-actions .whatsapp-button {
    width: 100%;
    min-height: 44px;
    min-width: 0;
  }

  .tasks-completion-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tasks-completion-notice .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .tasks-detail-grid {
    grid-template-columns: 1fr;
  }

  .tasks-detail-fact,
  .tasks-detail-fact:nth-child(2n) {
    grid-column: auto;
    border-right: 0;
  }

  .tasks-detail-fact.is-wide {
    grid-column: auto;
  }

  .tasks-detail-panel .targets-form-actions.tasks-decision-panel,
  .tasks-detail-panel .tasks-action-form .targets-form-actions {
    grid-template-columns: 1fr;
  }

  .tasks-detail-panel .targets-form-actions .primary-button {
    grid-column: auto;
  }

}

@media (max-width: 390px) {
  .tasks-mission-head,
  .tasks-queue-header {
    gap: 10px;
  }

  .tasks-mission-head h2,
  .tasks-queue-header h2 {
    font-size: 1.15rem;
  }

  .tasks-mission-head p {
    font-size: 0.78rem;
  }

  .tasks-lanes {
    padding-inline: 14px;
  }

  .tasks-search-field,
  .tasks-filter-panel,
  .tasks-focus-card,
  .tasks-completion-notice {
    margin-inline: 14px;
  }

  .tasks-list {
    padding-inline: 14px;
  }

  .task-card-icon {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tasks-progress-track > span,
  .tasks-completion-notice,
  .tasks-detail-panel,
  .tasks-page .task-card,
  .task-card-chevron {
    transition: none;
  }

  .task-card-skeleton span {
    animation: none;
  }
}

/* Fleet Control Centre */
.warehouse-dashboard #motorbikePanel {
  display: block;
}

.warehouse-dashboard #motorbikePanel > .section-heading {
  margin-bottom: 14px;
  border-color: rgba(96, 165, 250, 0.2);
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.12), rgba(15, 23, 42, 0.8)),
    var(--panel);
}

.warehouse-dashboard #fleetLoadingProgress {
  margin: 0 0 16px;
}

.fleet-control-centre {
  display: grid;
  gap: 16px;
}

.fleet-command-hero {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 16%, rgba(56, 189, 248, 0.22), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(30, 64, 175, 0.28), rgba(15, 23, 42, 0.92) 62%);
  padding: 28px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.34);
}

.fleet-command-hero::after {
  content: "F7";
  position: absolute;
  top: -44px;
  right: 24px;
  color: rgba(147, 197, 253, 0.055);
  font-size: 11rem;
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 1;
  pointer-events: none;
}

.fleet-command-copy,
.fleet-command-actions {
  position: relative;
  z-index: 1;
}

.fleet-command-copy {
  max-width: 720px;
}

.fleet-eyebrow,
.fleet-section-kicker {
  display: block;
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.fleet-command-copy h3,
.fleet-activity-intro h3 {
  margin: 10px 0 8px;
  color: #f8fafc;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.fleet-command-copy p,
.fleet-activity-intro p {
  max-width: 640px;
  margin: 0;
  color: #b8c5d8;
  font-size: 0.95rem;
  line-height: 1.55;
}

.fleet-command-actions {
  min-width: 208px;
  display: grid;
  gap: 10px;
}

.fleet-command-actions .primary-button,
.fleet-command-actions .secondary-button {
  width: 100%;
  min-height: 46px;
  margin: 0;
  justify-content: center;
  white-space: nowrap;
}

.fleet-control-tabs {
  position: sticky;
  top: 8px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.9);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(18px);
}

.fleet-control-tab {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.fleet-control-tab:hover,
.fleet-control-tab:focus-visible {
  border-color: rgba(96, 165, 250, 0.26);
  color: #dbeafe;
}

.fleet-control-tab.active {
  border-color: rgba(96, 165, 250, 0.48);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(14, 165, 233, 0.16));
  color: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.08), 0 10px 26px rgba(30, 64, 175, 0.2);
}

.fleet-control-tab-panel {
  display: grid;
  gap: 16px;
}

.fleet-control-tab-panel.hidden,
.fleet-control-centre.hidden {
  display: none;
}

.fleet-control-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
  box-shadow: 0 18px 46px rgba(2, 6, 23, 0.22);
}

.fleet-control-section-heading {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding: 18px 20px;
}

.fleet-control-section-heading > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.fleet-control-section-heading h3 {
  margin: 0;
  color: #f1f5f9;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.fleet-control-section-heading > span,
.fleet-control-section-heading > div + span {
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-align: right;
}

.warehouse-dashboard .fleet-control-centre .warehouse-overview-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px 16px 0;
  box-shadow: none;
}

.fleet-status-card {
  min-width: 0;
  min-height: 132px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.58);
  color: inherit;
  padding: 16px;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}

a.fleet-status-card:hover,
a.fleet-status-card:focus-visible {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(30, 58, 138, 0.22);
  transform: translateY(-2px);
}

.fleet-status-card > span {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.fleet-status-card > strong {
  color: #f8fafc;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 1;
}

.fleet-status-card > small {
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

.fleet-status-card.is-positive,
.fleet-status-card.is-ready {
  border-color: rgba(52, 211, 153, 0.22);
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.2), rgba(15, 23, 42, 0.62));
}

.fleet-status-card.is-positive > strong,
.fleet-status-card.is-ready > strong {
  color: #6ee7b7;
}

.fleet-status-card.is-attention {
  border-color: rgba(251, 191, 36, 0.34);
  background: linear-gradient(145deg, rgba(120, 53, 15, 0.22), rgba(15, 23, 42, 0.66));
}

.fleet-status-card.is-attention > strong {
  color: #fcd34d;
}

.fleet-status-card.is-loading {
  opacity: 0.72;
}

.fleet-coverage-panel {
  display: grid;
  grid-template-columns: minmax(210px, auto) minmax(220px, 1fr);
  align-items: center;
  gap: 22px;
  margin: 16px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  background: rgba(30, 64, 175, 0.09);
  padding: 14px 16px;
}

.fleet-coverage-copy {
  display: grid;
  gap: 4px;
}

.fleet-coverage-copy > span {
  color: #7dd3fc;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fleet-coverage-copy > strong {
  color: #e2e8f0;
  font-size: 0.88rem;
}

.fleet-coverage-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.58);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.fleet-coverage-track > span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #34d399);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.42);
  transition: width 420ms ease;
}

.fleet-attention-panel.is-clear {
  border-color: rgba(52, 211, 153, 0.28);
}

.fleet-attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.fleet-attention-item {
  min-width: 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.48);
  padding: 14px;
}

.fleet-attention-item.urgent {
  border-color: rgba(248, 113, 113, 0.34);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.16), rgba(15, 23, 42, 0.56));
}

.fleet-attention-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 50%;
  background: rgba(30, 64, 175, 0.2);
  color: #93c5fd;
  font-weight: 900;
}

.fleet-attention-item.urgent .fleet-attention-icon {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.24);
  color: #fca5a5;
}

.fleet-attention-item > div {
  min-width: 0;
}

.fleet-attention-item strong {
  color: #f1f5f9;
  font-size: 0.9rem;
}

.fleet-attention-item p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.76rem;
  line-height: 1.4;
}

.fleet-attention-item .secondary-button {
  width: auto;
  min-width: 82px;
  margin: 0;
}

.fleet-clear-state {
  grid-column: 1 / -1;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(52, 211, 153, 0.26);
  border-radius: 12px;
  background: rgba(6, 78, 59, 0.14);
  color: #d1fae5;
  padding: 16px;
}

.fleet-clear-state > span:first-child {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  font-size: 1.1rem;
  font-weight: 900;
}

.fleet-clear-state strong {
  display: block;
  font-size: 0.92rem;
}

.fleet-clear-state p {
  margin: 4px 0 0;
  color: #9fbfaf;
  font-size: 0.76rem;
  line-height: 1.4;
}

.fleet-clear-state.is-error {
  justify-content: space-between;
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(127, 29, 29, 0.14);
  color: #fecaca;
}

.fleet-text-button {
  border: 0;
  background: transparent;
  color: #7dd3fc;
  padding: 6px 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.fleet-text-button:hover,
.fleet-text-button:focus-visible {
  color: #bae6fd;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.warehouse-dashboard .fleet-control-centre .warehouse-location-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px;
  box-shadow: none;
}

.fleet-warehouse-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(30, 64, 175, 0.13), rgba(15, 23, 42, 0.58));
  padding: 16px;
}

.fleet-warehouse-card.is-empty {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.32);
  opacity: 0.68;
}

.fleet-warehouse-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.fleet-warehouse-card-top > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 7px;
}

.fleet-warehouse-card-top span {
  grid-column: 1 / -1;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.fleet-warehouse-card-top strong {
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 1;
}

.fleet-warehouse-card-top small {
  color: #94a3b8;
  font-size: 0.72rem;
}

.fleet-warehouse-card-top .secondary-button {
  width: auto;
  min-width: 112px;
  margin: 0;
}

.fleet-warehouse-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.fleet-warehouse-fact {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-radius: 9px;
  background: rgba(2, 6, 23, 0.3);
  padding: 9px 10px;
}

.fleet-warehouse-fact small {
  overflow: hidden;
  color: #7f8ca1;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fleet-warehouse-fact strong {
  color: #cbd5e1;
  font-size: 1rem;
}

.fleet-warehouse-fact.ready strong {
  color: #6ee7b7;
}

.fleet-warehouse-fact.reserved strong {
  color: #93c5fd;
}

.fleet-warehouse-fact.attention strong {
  color: #fcd34d;
}

.fleet-case-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding: 0 16px 16px;
}

.fleet-case-links.hidden {
  display: none;
}

.fleet-case-link {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(251, 191, 36, 0.24);
  border-radius: 11px;
  background: rgba(120, 53, 15, 0.13);
  color: #e2e8f0;
  padding: 12px 14px;
  text-decoration: none;
}

.fleet-case-link > strong {
  color: #fcd34d;
  font-size: 1.3rem;
}

.fleet-case-link > span {
  font-size: 0.84rem;
  font-weight: 750;
}

.fleet-case-link > small {
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 800;
}

.fleet-makeup-section > summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}

.fleet-makeup-section > summary::-webkit-details-marker {
  display: none;
}

.fleet-makeup-section > summary > span {
  display: grid;
  gap: 4px;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 800;
}

.fleet-makeup-section > summary small {
  color: #7dd3fc;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fleet-makeup-section > summary b {
  color: #94a3b8;
  font-size: 0.74rem;
}

.fleet-makeup-section[open] > summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.fleet-makeup-section[open] > summary b::after {
  content: " · Close";
}

.fleet-makeup-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.fleet-makeup-body .warehouse-section-heading {
  min-height: 28px;
  padding: 0 2px;
}

.warehouse-dashboard .fleet-makeup-body .warehouse-overview-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.fleet-makeup-body .warehouse-metric {
  width: auto;
  min-height: 38px;
  height: auto;
  flex: 0 1 auto;
  padding: 8px 13px;
}

.warehouse-dashboard .fleet-makeup-body .warehouse-supplier-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fleet-makeup-body .warehouse-supplier-item {
  min-height: 72px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px;
}

.fleet-activity-intro {
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(30, 64, 175, 0.16), rgba(15, 23, 42, 0.76));
  padding: 22px;
}

.fleet-activity-intro h3 {
  font-size: 1.45rem;
}

.warehouse-dashboard .fleet-control-centre #fleetTodayMovementsPanel,
.warehouse-dashboard .fleet-control-centre #motorbikeAuditPanel {
  min-width: 0;
  margin: 0;
}

.fleet-legacy-stock-panel {
  display: none !important;
}

@media (max-width: 1100px) {
  .warehouse-dashboard .fleet-control-centre .warehouse-overview-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .warehouse-dashboard .fleet-control-centre .warehouse-location-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .warehouse-dashboard #motorbikePanel > .section-heading {
    margin-bottom: 12px;
  }

  .fleet-command-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 20px;
    border-radius: 15px;
    padding: 21px 18px;
  }

  .fleet-command-hero::after {
    top: -16px;
    right: 12px;
    font-size: 7rem;
  }

  .fleet-command-copy h3 {
    max-width: 92%;
    font-size: 1.65rem;
  }

  .fleet-command-actions {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .fleet-control-tabs {
    top: max(6px, env(safe-area-inset-top));
    gap: 4px;
    border-radius: 12px;
    padding: 5px;
  }

  .fleet-control-tab {
    min-height: 44px;
    padding: 9px 7px;
    font-size: 0.78rem;
  }

  .fleet-control-section {
    border-radius: 14px;
  }

  .fleet-control-section-heading {
    min-height: 70px;
    align-items: flex-start;
    padding: 16px;
  }

  .fleet-control-section-heading > span,
  .fleet-control-section-heading > div + span {
    max-width: 132px;
    font-size: 0.66rem;
  }

  .warehouse-dashboard .fleet-control-centre .warehouse-overview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 12px 0;
  }

  .fleet-status-card {
    min-height: 116px;
    padding: 13px;
  }

  .fleet-status-card > strong {
    font-size: 1.85rem;
  }

  .fleet-status-card > span {
    font-size: 0.62rem;
  }

  .fleet-status-card > small {
    font-size: 0.68rem;
  }

  .fleet-coverage-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 12px;
  }

  .fleet-attention-list {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .fleet-attention-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .fleet-attention-item .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .warehouse-dashboard .fleet-control-centre .warehouse-location-summary {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .fleet-warehouse-card-top {
    grid-template-columns: 1fr;
  }

  .fleet-warehouse-card-top .secondary-button {
    width: 100%;
  }

  .fleet-case-links {
    grid-template-columns: 1fr;
    padding: 0 12px 12px;
  }

  .fleet-case-link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fleet-case-link > small {
    grid-column: 1 / -1;
  }

  .fleet-makeup-body {
    padding: 12px;
  }

  .fleet-clear-state.is-error {
    align-items: stretch;
    flex-direction: column;
  }

  .fleet-clear-state.is-error .secondary-button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .fleet-control-section-heading {
    flex-direction: column;
    gap: 8px;
  }

  .fleet-control-section-heading > span,
  .fleet-control-section-heading > div + span {
    max-width: none;
    text-align: left;
  }

  .fleet-warehouse-facts {
    gap: 5px;
  }

  .fleet-warehouse-fact {
    padding: 8px 6px;
  }

  .fleet-warehouse-fact small {
    font-size: 0.56rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fleet-control-centre *,
  .fleet-control-tabs * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Mass SMS campaign studio */
.mass-sms-page {
  width: min(1380px, calc(100vw - 32px));
  max-width: 1380px;
  padding-bottom: 64px;
}

.mass-sms-page [hidden] {
  display: none !important;
}

.mass-sms-page .mass-sms-page-header {
  align-items: center;
}

.mass-sms-page .primary-button,
.mass-sms-page .secondary-button,
.mass-sms-confirm-dialog .primary-button,
.mass-sms-confirm-dialog .secondary-button {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 850;
}

.mass-sms-command {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0%, rgba(37, 99, 235, 0.28), transparent 34%),
    linear-gradient(145deg, rgba(30, 58, 105, 0.72), rgba(20, 31, 52, 0.96) 58%, rgba(15, 23, 42, 0.98));
  box-shadow: 0 22px 54px rgba(2, 8, 23, 0.25);
  padding: 26px;
}

.mass-sms-command::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -105px;
  bottom: -150px;
  border: 36px solid rgba(56, 189, 248, 0.08);
  border-radius: 999px;
  pointer-events: none;
}

.mass-sms-command-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.mass-sms-eyebrow {
  display: block;
  color: #7dd3fc;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mass-sms-command h2,
.mass-sms-studio-heading h2,
.mass-sms-history-heading h2 {
  margin: 7px 0 0;
  color: #f8fafc;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.1;
}

.mass-sms-command-copy > p,
.mass-sms-studio-heading p,
.mass-sms-history-heading p,
.mass-sms-step-intro p {
  margin: 8px 0 0;
  color: #aebbd0;
  line-height: 1.45;
}

.mass-sms-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #dbeafe;
  font-size: 0.82rem;
  font-weight: 800;
}

.mass-sms-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 5px rgba(148, 163, 184, 0.12);
}

.mass-sms-status-dot[data-tone="ready"] {
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.12);
}

.mass-sms-status-dot[data-tone="loading"],
.mass-sms-status-dot[data-tone="sending"] {
  background: #38bdf8;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.12);
  animation: mass-sms-status-pulse 1.2s ease-in-out infinite;
}

.mass-sms-status-dot[data-tone="readonly"] {
  background: #fbbf24;
  box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.12);
}

.mass-sms-status-dot[data-tone="error"] {
  background: #f87171;
  box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.12);
}

@keyframes mass-sms-status-pulse {
  50% { opacity: 0.45; }
}

.mass-sms-refresh {
  position: relative;
  z-index: 1;
  align-self: start;
  min-width: 104px;
}

.mass-sms-loading-progress {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: 2px;
}

.mass-sms-command-metrics {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(9, 18, 34, 0.46);
  backdrop-filter: blur(10px);
}

.mass-sms-command-metrics > div {
  min-width: 0;
  padding: 17px 18px;
  border-right: 1px solid rgba(148, 163, 184, 0.15);
}

.mass-sms-command-metrics > div:last-child {
  border-right: 0;
}

.mass-sms-command-metrics span,
.mass-sms-history-summary span,
.mass-sms-message-metrics span,
.mass-sms-review-facts span,
.mass-sms-receipt-metrics span {
  display: block;
  color: #8f9db3;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mass-sms-command-metrics strong {
  display: block;
  margin-top: 6px;
  color: #f8fafc;
  font-size: 1.45rem;
  line-height: 1;
}

.mass-sms-studio {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.97), rgba(22, 32, 50, 0.98));
  box-shadow: 0 22px 58px rgba(2, 8, 23, 0.24);
}

.mass-sms-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.48);
}

.mass-sms-view-tab {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #93a4bd;
  padding: 11px 16px;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.mass-sms-view-tab span {
  font-size: 0.94rem;
  font-weight: 900;
}

.mass-sms-view-tab small {
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.78;
}

.mass-sms-view-tab.active {
  border-color: rgba(96, 165, 250, 0.38);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.26), rgba(30, 64, 175, 0.14));
  color: #f8fafc;
}

.mass-sms-studio-heading,
.mass-sms-history-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
}

.mass-sms-studio-heading p,
.mass-sms-history-heading p {
  font-size: 0.85rem;
}

.mass-sms-mini-progress {
  flex: 0 0 240px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.74);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.mass-sms-mini-progress > span {
  display: block;
  width: 33.333%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.42);
  transition: width 240ms ease;
}

.mass-sms-read-only-notice {
  display: grid;
  gap: 4px;
  margin: 0 26px 18px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.09);
  color: #fde68a;
  padding: 13px 15px;
}

.mass-sms-read-only-notice span {
  color: #e5d6a3;
  font-size: 0.82rem;
}

.mass-sms-stepper {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(40px, 1fr) minmax(150px, auto) minmax(40px, 1fr) minmax(150px, auto);
  align-items: center;
  padding: 0 26px 22px;
}

.mass-sms-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #77869d;
  padding: 0;
  text-align: left;
}

.mass-sms-step:disabled {
  cursor: default;
  opacity: 1;
}

.mass-sms-step-number {
  position: relative;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: #131e31;
  color: #91a0b5;
  font-size: 0.8rem;
  font-weight: 950;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.mass-sms-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mass-sms-step-copy strong {
  color: inherit;
  font-size: 0.83rem;
  font-weight: 900;
}

.mass-sms-step-copy small {
  color: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.76;
}

.mass-sms-step-line {
  height: 2px;
  margin: 0 14px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.mass-sms-step.active {
  color: #f8fafc;
}

.mass-sms-step.active .mass-sms-step-number {
  border-color: #38bdf8;
  background: linear-gradient(145deg, #2563eb, #0ea5e9);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.1), 0 7px 18px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.mass-sms-step.complete {
  color: #86efac;
}

.mass-sms-step.complete .mass-sms-step-number {
  border-color: rgba(52, 211, 153, 0.68);
  background: rgba(16, 185, 129, 0.18);
  color: transparent;
}

.mass-sms-step.complete .mass-sms-step-number::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6ee7b7;
  font-size: 0.9rem;
  line-height: 1;
}

.mass-sms-step-panel {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding: 24px 26px 26px;
}

.mass-sms-step-intro {
  margin-bottom: 20px;
}

.mass-sms-step-intro h3,
.mass-sms-receipt h3 {
  margin: 7px 0 0;
  color: #f8fafc;
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
  line-height: 1.2;
}

.mass-sms-step-intro p {
  font-size: 0.86rem;
}

.mass-sms-audience-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: start;
  gap: 18px;
}

.mass-sms-audience-main {
  min-width: 0;
}

.mass-sms-audience-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mass-sms-audience-mode {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  min-height: 116px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.48);
  color: #e5edf8;
  padding: 15px;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.mass-sms-audience-mode:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.5);
  transform: translateY(-1px);
}

.mass-sms-audience-mode.active {
  border-color: rgba(56, 189, 248, 0.72);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.25), rgba(14, 165, 233, 0.08));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 14px 28px rgba(2, 8, 23, 0.18);
}

.mass-sms-mode-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 11px;
  background: rgba(37, 99, 235, 0.14);
  color: #7dd3fc;
  font-size: 1.15rem;
  font-weight: 900;
}

.mass-sms-audience-mode > span:last-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mass-sms-audience-mode strong {
  color: #f8fafc;
  font-size: 0.88rem;
  line-height: 1.25;
}

.mass-sms-audience-mode small {
  color: #97a6bb;
  font-size: 0.72rem;
  line-height: 1.38;
}

.mass-sms-audience-tools {
  display: grid;
  gap: 13px;
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 15px;
  background: rgba(10, 18, 32, 0.34);
  padding: 16px;
}

.mass-sms-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.mass-sms-search-field,
.mass-sms-filter-panel label,
.mass-sms-message-field {
  display: grid;
  gap: 7px;
  color: #dce6f4;
  font-size: 0.78rem;
  font-weight: 850;
}

.mass-sms-page input,
.mass-sms-page select,
.mass-sms-page textarea {
  min-width: 0;
  border-radius: 11px;
  background: rgba(9, 17, 31, 0.84);
}

.mass-sms-search-field input,
.mass-sms-filter-panel select {
  min-height: 48px;
}

.mass-sms-filter-toggle {
  min-width: 122px;
}

.mass-sms-filter-toggle span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
  color: #cbd5e1;
  font-size: 0.7rem;
}

.mass-sms-filter-toggle.has-filters,
.mass-sms-filter-toggle.active {
  border-color: rgba(56, 189, 248, 0.5);
  color: #bae6fd;
}

.mass-sms-filter-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.13);
  padding-top: 14px;
}

.mass-sms-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mass-sms-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.09);
  color: #bae6fd;
  padding: 6px 10px 6px 12px;
  font-size: 0.7rem;
  font-weight: 800;
}

.mass-sms-filter-chip > span:last-child {
  color: #7dd3fc;
  font-size: 1rem;
  line-height: 1;
}

.mass-sms-match-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 13px;
  background: rgba(30, 64, 175, 0.09);
  padding: 13px 14px;
}

.mass-sms-match-bar > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  gap: 5px 9px;
}

.mass-sms-match-bar span {
  color: #aebbd0;
  font-size: 0.72rem;
  font-weight: 850;
}

.mass-sms-match-bar strong {
  color: #f8fafc;
  font-size: 1.15rem;
}

.mass-sms-match-bar small {
  grid-column: 1 / -1;
  color: #8291a7;
  font-size: 0.68rem;
}

.mass-sms-browser-actions,
.mass-sms-summary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mass-sms-text-button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #7dd3fc;
  padding: 4px 0;
  font-size: 0.75rem;
  font-weight: 850;
  text-align: left;
}

.mass-sms-text-button:hover:not(:disabled) {
  color: #e0f2fe;
}

.mass-sms-text-button.danger {
  color: #fca5a5;
}

.mass-sms-text-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.mass-sms-driver-browser {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.42);
}

.mass-sms-driver-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: #f8fafc;
  font-size: 0.76rem;
}

.mass-sms-driver-list-heading span {
  color: #8f9db3;
  font-size: 0.7rem;
  font-weight: 750;
}

.mass-sms-driver-list {
  display: grid;
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mass-sms-driver-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(140px, auto);
  align-items: center;
  gap: 13px;
  min-width: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
  background: transparent;
  color: #e6edf7;
  padding: 13px 14px;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.mass-sms-driver-item:last-child {
  border-bottom: 0;
}

.mass-sms-driver-item:hover {
  background: rgba(30, 64, 175, 0.08);
}

.mass-sms-driver-item.selected {
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 3px 0 0 #38bdf8;
}

.mass-sms-driver-item.unavailable {
  cursor: default;
  opacity: 0.66;
}

.mass-sms-driver-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
}

.mass-sms-driver-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mass-sms-driver-identity strong,
.mass-sms-driver-context strong {
  color: #f8fafc;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.mass-sms-driver-identity span,
.mass-sms-driver-identity small,
.mass-sms-driver-context span {
  color: #91a0b5;
  font-size: 0.69rem;
  overflow-wrap: anywhere;
}

.mass-sms-driver-context {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 0;
  text-align: right;
}

.mass-sms-driver-context strong {
  color: #86efac;
  font-size: 0.68rem;
}

.mass-sms-driver-item.unavailable .mass-sms-driver-context strong {
  color: #fca5a5;
}

.mass-sms-empty-state,
.mass-sms-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 88px;
  color: #98a6ba;
  padding: 18px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.mass-sms-list-loading > span,
.mass-sms-sending-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(125, 211, 252, 0.34);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: flee7-spin 0.8s linear infinite;
}

.mass-sms-audience-summary {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 15px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.17), transparent 45%),
    rgba(13, 24, 42, 0.84);
  box-shadow: 0 16px 34px rgba(2, 8, 23, 0.2);
  padding: 18px;
}

.mass-sms-selection-score {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.mass-sms-selection-score strong {
  color: #f8fafc;
  font-size: 2.6rem;
  line-height: 0.9;
}

.mass-sms-selection-score span {
  color: #aebbd0;
  font-size: 0.76rem;
  font-weight: 800;
}

.mass-sms-audience-summary > p {
  margin: 0;
  color: #bdc8d8;
  font-size: 0.78rem;
  line-height: 1.45;
}

.mass-sms-summary-actions {
  align-items: stretch;
  flex-direction: column;
}

.mass-sms-summary-actions .secondary-button,
.mass-sms-summary-actions .mass-sms-text-button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.mass-sms-test-copy-mini {
  display: grid;
  gap: 5px;
  margin: 0 -18px -18px;
  border-top: 1px solid rgba(125, 211, 252, 0.17);
  background: rgba(14, 165, 233, 0.06);
  padding: 14px 18px 16px;
}

.mass-sms-test-copy-mini > span {
  color: #7dd3fc;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mass-sms-test-copy-mini strong {
  color: #e0f2fe;
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.mass-sms-test-copy-mini small {
  color: #8fa2ba;
  font-size: 0.68rem;
  line-height: 1.4;
}

.mass-sms-compose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: start;
  gap: 20px;
}

.mass-sms-composer-card,
.mass-sms-review-card,
.mass-sms-review-message {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.19);
  border-radius: 16px;
  background: rgba(10, 18, 33, 0.42);
  padding: 18px;
}

.mass-sms-composer-audience {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 11px;
  background: rgba(37, 99, 235, 0.08);
  padding: 11px 13px;
}

.mass-sms-composer-audience > span {
  color: #8fa1b7;
  font-size: 0.7rem;
  font-weight: 800;
}

.mass-sms-composer-audience strong {
  color: #dbeafe;
  font-size: 0.78rem;
}

.mass-sms-message-field textarea {
  min-height: 220px;
  resize: vertical;
  line-height: 1.5;
}

.mass-sms-message-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.mass-sms-message-metrics > div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.48);
  padding: 10px 11px;
}

.mass-sms-message-metrics strong,
.mass-sms-review-facts strong,
.mass-sms-receipt-metrics strong,
.mass-sms-history-summary strong {
  display: block;
  margin-top: 5px;
  color: #f8fafc;
  font-size: 0.95rem;
}

.mass-sms-inline-note {
  margin: 11px 0 0;
  color: #8fa0b7;
  font-size: 0.7rem;
  line-height: 1.45;
}

.mass-sms-phone-preview {
  position: sticky;
  top: 18px;
  width: 100%;
  max-width: 380px;
  min-height: 500px;
  overflow: hidden;
  border: 7px solid #070b12;
  border-radius: 38px;
  background: #f5f7fb;
  box-shadow: 0 22px 46px rgba(2, 8, 23, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #172033;
  padding: 14px 15px 18px;
}

.mass-sms-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111827;
  font-size: 0.66rem;
  font-weight: 850;
  padding: 0 4px 12px;
}

.mass-sms-phone-contact {
  display: grid;
  justify-items: center;
  gap: 3px;
  border-bottom: 1px solid #d9dee8;
  padding-bottom: 13px;
}

.mass-sms-phone-contact > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2563eb, #0ea5e9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
}

.mass-sms-phone-contact strong {
  font-size: 0.78rem;
}

.mass-sms-phone-contact small {
  color: #6b7280;
  font-size: 0.62rem;
}

.mass-sms-phone-thread {
  display: flex;
  justify-content: flex-start;
  min-height: 290px;
  padding: 28px 2px 18px;
}

.mass-sms-phone-thread p {
  align-self: flex-start;
  max-width: 86%;
  margin: 0;
  border-radius: 18px 18px 18px 5px;
  background: #e5e7eb;
  color: #111827;
  padding: 10px 13px;
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mass-sms-phone-thread p.empty {
  color: #6b7280;
}

.mass-sms-preview-caption {
  display: block;
  color: #6b7280;
  font-size: 0.6rem;
  line-height: 1.4;
  text-align: center;
}

.mass-sms-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: 14px;
}

.mass-sms-review-card {
  grid-row: span 2;
}

.mass-sms-review-heading,
.mass-sms-review-message-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.mass-sms-review-check {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  font-size: 0.92rem;
  font-weight: 950;
}

.mass-sms-review-heading > div,
.mass-sms-review-message-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mass-sms-review-heading span:not(.mass-sms-review-check),
.mass-sms-review-message-heading span {
  color: #8fa0b7;
  font-size: 0.67rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mass-sms-review-heading strong,
.mass-sms-review-message-heading strong {
  color: #f8fafc;
  font-size: 0.85rem;
}

.mass-sms-review-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.mass-sms-review-facts > div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.43);
  padding: 11px;
}

.mass-sms-review-recipients {
  width: 100%;
}

.mass-sms-test-copy-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.08);
  padding: 15px;
}

.mass-sms-warning-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
  font-weight: 950;
}

.mass-sms-test-copy-card strong {
  color: #fef3c7;
  font-size: 0.8rem;
}

.mass-sms-test-copy-card p {
  margin: 5px 0 0;
  color: #cbbb8a;
  font-size: 0.7rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mass-sms-review-message {
  display: grid;
  align-content: start;
  gap: 14px;
}

.mass-sms-review-message-heading {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mass-sms-review-message > p {
  margin: 0;
  border-radius: 14px 14px 14px 5px;
  background: #e5e7eb;
  color: #111827;
  padding: 13px 15px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mass-sms-sending-state {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 15px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 13px;
  background: rgba(14, 165, 233, 0.08);
  padding: 14px 16px;
}

.mass-sms-sending-state > div {
  display: grid;
  gap: 3px;
}

.mass-sms-sending-state strong {
  color: #e0f2fe;
  font-size: 0.82rem;
}

.mass-sms-sending-state span:not(.mass-sms-sending-spinner) {
  color: #9bb8cb;
  font-size: 0.7rem;
}

.mass-sms-inline-status {
  margin: 0 26px 16px;
  border: 1px solid rgba(248, 113, 113, 0.38);
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
  padding: 13px 15px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.mass-sms-inline-status[data-tone="info"] {
  border-color: rgba(56, 189, 248, 0.32);
  background: rgba(14, 165, 233, 0.08);
  color: #bae6fd;
}

.mass-sms-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.3);
  padding: 16px 26px;
}

.mass-sms-action-bar .secondary-button {
  flex: 0 0 auto;
  min-width: 120px;
}

.mass-sms-action-bar .primary-button {
  min-width: min(310px, 100%);
}

.mass-sms-action-bar .primary-button,
.mass-sms-action-bar .secondary-button,
.mass-sms-receipt-actions .primary-button,
.mass-sms-receipt-actions .secondary-button,
.mass-sms-confirm-actions .primary-button,
.mass-sms-confirm-actions .secondary-button {
  height: 48px;
  margin-top: 0;
}

.mass-sms-receipt {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 46px 26px 40px;
  text-align: center;
}

.mass-sms-receipt-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(52, 211, 153, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.24), rgba(16, 185, 129, 0.08));
  color: #6ee7b7;
  font-size: 1.6rem;
  font-weight: 950;
  box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.06);
}

.mass-sms-receipt[data-tone="warning"] .mass-sms-receipt-icon {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
  box-shadow: 0 0 0 10px rgba(251, 191, 36, 0.05);
}

.mass-sms-receipt[data-tone="error"] .mass-sms-receipt-icon {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
  box-shadow: 0 0 0 10px rgba(248, 113, 113, 0.05);
}

.mass-sms-receipt > p {
  max-width: 620px;
  margin: 0;
  color: #aebbd0;
  line-height: 1.5;
}

.mass-sms-receipt-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 9px;
  width: 100%;
  margin-top: 8px;
}

.mass-sms-receipt-metrics > div {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.48);
  padding: 13px;
}

.mass-sms-receipt-preview {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.4);
  padding: 14px;
  text-align: left;
}

.mass-sms-receipt-preview > span {
  color: #8fa0b7;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mass-sms-receipt-preview p {
  margin: 8px 0 0;
  color: #eef4fb;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mass-sms-receipt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.mass-sms-history-heading {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.mass-sms-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 18px 26px 0;
}

.mass-sms-history-summary > div {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.4);
  padding: 13px 14px;
}

.mass-sms-campaign-list {
  display: grid;
  gap: 10px;
  padding: 18px 26px 26px;
}

.mass-sms-campaign-item {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.39);
}

.mass-sms-campaign-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.mass-sms-campaign-item summary::-webkit-details-marker {
  display: none;
}

.mass-sms-campaign-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mass-sms-campaign-heading strong {
  color: #f8fafc;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.mass-sms-campaign-heading span {
  color: #8fa0b7;
  font-size: 0.7rem;
}

.mass-sms-campaign-result {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.66rem;
  font-weight: 900;
}

.mass-sms-campaign-result.success {
  background: rgba(16, 185, 129, 0.11);
  color: #86efac;
}

.mass-sms-campaign-result.warning {
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
}

.mass-sms-campaign-chevron {
  color: #7d8ca2;
  transition: transform 140ms ease;
}

.mass-sms-campaign-item[open] .mass-sms-campaign-chevron {
  transform: rotate(180deg);
}

.mass-sms-campaign-body {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 28, 0.22);
  padding: 14px 15px 16px;
}

.mass-sms-campaign-body > span {
  color: #8fa0b7;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mass-sms-campaign-body p {
  margin: 7px 0 0;
  color: #dbe4f1;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mass-sms-confirm-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 20px;
  background: linear-gradient(160deg, #1e2c43, #121c2d);
  box-shadow: 0 28px 90px rgba(2, 6, 23, 0.72);
  color: #e5edf8;
  padding: 24px;
}

.mass-sms-confirm-dialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(6px);
}

.mass-sms-confirm-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2563eb, #0ea5e9);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 950;
  box-shadow: 0 11px 24px rgba(37, 99, 235, 0.28);
}

.mass-sms-confirm-dialog h2 {
  margin: 8px 0 0;
  color: #f8fafc;
  font-size: 1.35rem;
}

.mass-sms-confirm-dialog > p {
  margin: 9px 0 0;
  color: #aebbd0;
  line-height: 1.48;
}

.mass-sms-confirm-preview {
  max-height: 220px;
  overflow-y: auto;
  margin-top: 17px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px;
  background: rgba(8, 15, 28, 0.46);
  color: #f1f5f9;
  padding: 14px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mass-sms-confirm-warning {
  margin-top: 12px;
  border: 1px solid rgba(251, 191, 36, 0.26);
  border-radius: 11px;
  background: rgba(251, 191, 36, 0.07);
  color: #fde68a;
  padding: 11px 13px;
  font-size: 0.73rem;
  font-weight: 800;
}

.mass-sms-confirm-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.mass-sms-page .is-read-only .mass-sms-step-panel,
.mass-sms-page .is-read-only .mass-sms-action-bar {
  opacity: 0.62;
}

@media (max-width: 1080px) {
  .mass-sms-audience-layout,
  .mass-sms-compose-layout {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
  }

  .mass-sms-audience-modes {
    grid-template-columns: 1fr;
  }

  .mass-sms-audience-mode {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .mass-sms-page {
    width: min(100% - 20px, 640px);
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }

  .mass-sms-page .dashboard-header {
    gap: 10px;
  }

  .mass-sms-page .dashboard-title h1 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .mass-sms-command {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 10px;
    border-radius: 17px;
    padding: 18px 16px 16px;
  }

  .mass-sms-command h2 {
    font-size: 1.25rem;
  }

  .mass-sms-command-copy > p {
    font-size: 0.78rem;
  }

  .mass-sms-refresh {
    min-width: 88px;
    min-height: 44px;
    padding-inline: 12px;
  }

  .mass-sms-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 12px;
  }

  .mass-sms-command-metrics > div {
    padding: 13px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

  .mass-sms-command-metrics > div:nth-child(2n) {
    border-right: 0;
  }

  .mass-sms-command-metrics > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .mass-sms-command-metrics strong {
    font-size: 1.2rem;
  }

  .mass-sms-studio {
    border-radius: 17px;
  }

  .mass-sms-view-tabs {
    padding: 9px;
  }

  .mass-sms-view-tab {
    min-height: 58px;
    padding: 9px 11px;
  }

  .mass-sms-view-tab span {
    font-size: 0.8rem;
  }

  .mass-sms-view-tab small {
    font-size: 0.65rem;
  }

  .mass-sms-studio-heading,
  .mass-sms-history-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 19px 15px 15px;
  }

  .mass-sms-mini-progress {
    flex-basis: auto;
    width: 100%;
    height: 7px;
  }

  .mass-sms-read-only-notice {
    margin: 0 15px 15px;
  }

  .mass-sms-stepper {
    grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto;
    padding: 0 15px 18px;
  }

  .mass-sms-step {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
  }

  .mass-sms-step-number {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .mass-sms-step-copy strong {
    font-size: 0.66rem;
  }

  .mass-sms-step-copy small {
    display: none;
  }

  .mass-sms-step-line {
    align-self: start;
    margin: 15px 7px 0;
  }

  .mass-sms-step-panel {
    padding: 20px 15px;
  }

  .mass-sms-step-intro {
    margin-bottom: 16px;
  }

  .mass-sms-audience-layout,
  .mass-sms-compose-layout,
  .mass-sms-review-layout {
    grid-template-columns: 1fr;
  }

  .mass-sms-audience-modes {
    grid-template-columns: 1fr;
  }

  .mass-sms-audience-mode {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 86px;
    padding: 13px;
  }

  .mass-sms-audience-summary,
  .mass-sms-phone-preview {
    position: static;
  }

  .mass-sms-audience-summary {
    order: -1;
  }

  .mass-sms-selection-score strong {
    font-size: 2.25rem;
  }

  .mass-sms-audience-tools {
    padding: 13px;
  }

  .mass-sms-search-row,
  .mass-sms-filter-panel,
  .mass-sms-match-bar {
    grid-template-columns: 1fr;
  }

  .mass-sms-filter-toggle,
  .mass-sms-match-bar .secondary-button {
    width: 100%;
  }

  .mass-sms-match-bar > div {
    justify-content: center;
    text-align: center;
  }

  .mass-sms-browser-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .mass-sms-text-button,
  .mass-sms-filter-chip {
    min-height: 44px;
  }

  .mass-sms-driver-list {
    max-height: 390px;
  }

  .mass-sms-driver-item {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 13px 12px;
  }

  .mass-sms-driver-context {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    gap: 8px;
    text-align: left;
  }

  .mass-sms-driver-context strong {
    justify-self: end;
  }

  .mass-sms-composer-card,
  .mass-sms-review-card,
  .mass-sms-review-message {
    padding: 15px;
  }

  .mass-sms-composer-audience {
    grid-template-columns: 1fr auto;
  }

  .mass-sms-composer-audience > span {
    grid-column: 1 / -1;
  }

  .mass-sms-message-field textarea {
    min-height: 190px;
  }

  .mass-sms-message-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mass-sms-message-metrics > div {
    padding: 9px 8px;
  }

  .mass-sms-message-metrics span {
    font-size: 0.58rem;
  }

  .mass-sms-message-metrics strong {
    font-size: 0.8rem;
  }

  .mass-sms-phone-preview {
    justify-self: center;
    max-width: 350px;
    min-height: 430px;
    border-radius: 33px;
  }

  .mass-sms-phone-thread {
    min-height: 230px;
  }

  .mass-sms-review-card {
    grid-row: auto;
  }

  .mass-sms-review-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mass-sms-inline-status {
    margin: 0 15px 13px;
  }

  .mass-sms-action-bar {
    align-items: stretch;
    padding: 13px 15px calc(13px + env(safe-area-inset-bottom));
  }

  .mass-sms-action-bar .secondary-button {
    flex: 0 0 34%;
    min-width: 0;
  }

  .mass-sms-action-bar .primary-button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mass-sms-receipt {
    padding: 38px 15px 30px;
  }

  .mass-sms-receipt-metrics,
  .mass-sms-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mass-sms-receipt-metrics > div,
  .mass-sms-history-summary > div {
    padding: 10px 8px;
  }

  .mass-sms-receipt-actions {
    grid-template-columns: 1fr;
  }

  .mass-sms-history-heading .secondary-button {
    width: 100%;
  }

  .mass-sms-history-summary {
    padding: 15px 15px 0;
  }

  .mass-sms-campaign-list {
    padding: 15px;
  }

  .mass-sms-campaign-item summary {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    gap: 8px;
    padding: 12px;
  }

  .mass-sms-confirm-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .mass-sms-confirm-actions {
    grid-template-columns: minmax(98px, 0.5fr) minmax(0, 1fr);
  }
}

html.flee7-phone-layout .mass-sms-page {
  width: min(100% - 20px, 640px);
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
}

html.flee7-phone-layout .mass-sms-stepper {
  grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto;
}

html.flee7-phone-layout .mass-sms-audience-layout,
html.flee7-phone-layout .mass-sms-compose-layout,
html.flee7-phone-layout .mass-sms-review-layout,
html.flee7-phone-layout .mass-sms-audience-modes,
html.flee7-phone-layout .mass-sms-search-row,
html.flee7-phone-layout .mass-sms-filter-panel,
html.flee7-phone-layout .mass-sms-match-bar {
  grid-template-columns: 1fr;
}

html.flee7-phone-layout .mass-sms-audience-summary,
html.flee7-phone-layout .mass-sms-phone-preview {
  position: static;
}

html.flee7-phone-layout .mass-sms-text-button,
html.flee7-phone-layout .mass-sms-filter-chip {
  min-height: 44px;
}

@media (max-width: 390px) {
  .mass-sms-page {
    width: calc(100% - 16px);
  }

  .mass-sms-page .dashboard-title h1 {
    font-size: 1.28rem;
  }

  .mass-sms-command {
    padding-inline: 13px;
  }

  .mass-sms-command h2 {
    font-size: 1.12rem;
  }

  .mass-sms-live-status {
    font-size: 0.72rem;
  }

  .mass-sms-view-tab {
    padding-inline: 8px;
  }

  .mass-sms-step-panel {
    padding-inline: 12px;
  }

  .mass-sms-stepper {
    padding-inline: 12px;
  }

  .mass-sms-step-copy strong {
    font-size: 0.61rem;
  }

  .mass-sms-review-facts {
    grid-template-columns: 1fr;
  }

  .mass-sms-action-bar {
    gap: 8px;
    padding-inline: 12px;
  }

  .mass-sms-action-bar .secondary-button,
  .mass-sms-action-bar .primary-button {
    font-size: 0.76rem;
    padding-inline: 10px;
  }

  .mass-sms-receipt-metrics,
  .mass-sms-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mass-sms-receipt-metrics > div:last-child {
    grid-column: 1 / -1;
  }

  .mass-sms-campaign-result {
    display: none;
  }

  .mass-sms-campaign-item summary {
    grid-template-columns: minmax(0, 1fr) 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mass-sms-page *,
  .mass-sms-confirm-dialog * {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .mass-sms-list-loading > span,
  .mass-sms-sending-spinner {
    animation: none;
  }
}

/* Fleet vehicle register: keep the single Manage action and its modal tools orderly. */
.warehouse-category-page .fleet-control-tabs > .advance-tab {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  margin: 0;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
}

.warehouse-category-page .fleet-control-tabs > .advance-tab:hover,
.warehouse-category-page .fleet-control-tabs > .advance-tab:focus-visible {
  border-color: rgba(96, 165, 250, 0.26);
  color: #dbeafe;
}

.warehouse-category-page .fleet-control-tabs > .advance-tab.active {
  border-color: rgba(96, 165, 250, 0.48);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(14, 165, 233, 0.16));
  color: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.08), 0 10px 26px rgba(30, 64, 175, 0.2);
}

.warehouse-manage-secondary-tools {
  gap: 12px;
  background: rgba(15, 23, 42, 0.42);
}

.warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions > *,
.warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions .whatsapp-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0;
}

.warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions > span {
  display: flex;
  align-items: stretch;
}

.warehouse-manage-secondary-tools .warehouse-vehicle-edit {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.warehouse-manage-secondary-tools .warehouse-vehicle-edit > .warehouse-vehicle-edit-actions,
.warehouse-manage-secondary-tools .warehouse-vehicle-edit > .form-message {
  grid-column: 1 / -1;
}

.warehouse-manage-secondary-tools [aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

/* Fleet lifecycle actions reuse the existing control-centre surfaces. */
.warehouse-category-page > .dashboard-header .bike-history-header-actions .primary-button {
  width: auto;
  min-width: 104px;
  margin: 0;
  white-space: nowrap;
}

#warehouseVehicleManageControls .warehouse-manage-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.warehouse-manage-wide-field {
  grid-column: 1 / -1;
}

.warehouse-vehicle-item.is-returned {
  border-color: rgba(148, 163, 184, 0.2);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.58), rgba(15, 23, 42, 0.78));
}

.warehouse-vehicle-item.is-returned .warehouse-vehicle-meta h3 {
  color: #cbd5e1;
}

.warehouse-assign-card.confirmation-card {
  width: min(100%, 760px);
}

.warehouse-assign-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.warehouse-assign-progress li {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.warehouse-assign-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  width: calc(100% - 28px);
  height: 2px;
  background: rgba(148, 163, 184, 0.22);
}

.warehouse-assign-progress li > span {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: #111b2d;
  color: #94a3b8;
}

.warehouse-assign-progress li.is-active,
.warehouse-assign-progress li.is-complete {
  color: #bfdbfe;
}

.warehouse-assign-progress li.is-active > span {
  border-color: #60a5fa;
  background: rgba(37, 99, 235, 0.36);
  color: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.warehouse-assign-progress li.is-complete > span {
  border-color: rgba(52, 211, 153, 0.54);
  background: rgba(6, 78, 59, 0.4);
  color: #a7f3d0;
}

.warehouse-assign-progress li.is-complete:not(:last-child)::after {
  background: rgba(52, 211, 153, 0.46);
}

.warehouse-assign-step {
  display: grid;
  gap: 14px;
}

.warehouse-assign-step-heading {
  display: grid;
  gap: 4px;
}

.warehouse-assign-step-heading > span {
  color: #7dd3fc;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.warehouse-assign-step-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.08rem;
}

.warehouse-assign-source-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.warehouse-assign-note {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 750;
}

.warehouse-assign-note textarea {
  width: 100%;
  min-height: 82px;
  box-sizing: border-box;
  resize: vertical;
}

#warehouseVehicleManageWarehouseTools > h3,
#warehouseVehicleManageWarehouseTools > #warehouseVehicleManageReservationControls,
#warehouseVehicleManageWarehouseTools > label,
#warehouseVehicleManageWarehouseTools > .warehouse-vehicle-edit-actions,
#warehouseVehicleManageWarehouseTools > .form-message {
  grid-column: 1 / -1;
}

#warehouseVehicleManageWarehouseTools > h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.98rem;
}

#warehouseVehicleManageReservationControls {
  display: grid;
  gap: 12px;
}

#warehouseVehicleManageReservationControls > label {
  margin: 0;
}

#warehouseVehicleManageReservationControls > .warehouse-vehicle-edit-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#warehouseVehicleManageWarehouseTools > .warehouse-vehicle-edit-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#warehouseVehicleManageWarehouseTools .danger-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 7px;
  background: rgba(127, 29, 29, 0.12);
  padding: 0 14px;
  color: #fecaca;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

#warehouseVehicleManageWarehouseTools .danger-button:hover,
#warehouseVehicleManageWarehouseTools .danger-button:focus-visible {
  border-color: var(--danger);
  background: rgba(248, 113, 113, 0.18);
  color: var(--ink-strong);
}

#warehouseVehicleManageWarehouseTools .danger-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (max-width: 760px) {
  .warehouse-category-page > .dashboard-header .bike-history-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .warehouse-category-page > .dashboard-header .bike-history-header-actions .primary-button,
  .warehouse-category-page > .dashboard-header .bike-history-header-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .warehouse-category-page > .dashboard-header #warehouseAssignBikeButton {
    grid-column: 1 / -1;
    min-height: 48px;
  }

  .warehouse-category-page .fleet-control-tabs > .advance-tab {
    min-height: 44px;
    padding: 9px 7px;
    font-size: 0.78rem;
  }

  .warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions,
  .warehouse-manage-secondary-tools .warehouse-vehicle-edit,
  #warehouseVehicleManageReservationControls > .warehouse-vehicle-edit-actions,
  #warehouseVehicleManageWarehouseTools > .warehouse-vehicle-edit-actions {
    grid-template-columns: 1fr;
  }

  #warehouseVehicleManageControls .warehouse-manage-action-grid,
  .warehouse-assign-source-grid,
  .warehouse-assign-fields {
    grid-template-columns: 1fr;
  }

  .warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions > *,
  .warehouse-manage-secondary-tools > .warehouse-vehicle-edit-actions .whatsapp-button,
  #warehouseVehicleManageWarehouseTools .secondary-button,
  #warehouseVehicleManageWarehouseTools .danger-button {
    min-height: 48px;
  }
}

@media (max-width: 390px) {
  .warehouse-category-page > .dashboard-header .bike-history-header-actions {
    grid-template-columns: 1fr;
  }

  .warehouse-assign-progress {
    gap: 4px;
  }

  .warehouse-assign-progress li {
    font-size: 0.62rem;
  }

  .warehouse-assign-progress li > span {
    width: 28px;
    height: 28px;
  }
}

.phase3b-reconciliation-page .driver-information-table-wrap {
  margin: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.phase3b-reconciliation-page .driver-information-summary-card {
  cursor: default;
}

.phase3b-reconciliation-page .driver-information-summary-card:hover {
  background: rgba(15, 23, 42, 0.34);
  box-shadow: none;
  transform: none;
}

.phase3b-reconciliation-page table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.phase3b-reconciliation-page th,
.phase3b-reconciliation-page td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--panel-border, #334155);
  text-align: left;
  vertical-align: top;
}

.phase3b-reconciliation-page th {
  color: var(--muted-text, #94a3b8);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phase3b-reconciliation-page form > .driver-information-form-grid,
.phase3b-reconciliation-page form > label,
.phase3b-reconciliation-page form > button {
  margin-top: 0.75rem;
}

.phase3b-status-blockers {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 14px;
  background: rgba(127, 29, 29, 0.2);
}

.phase3b-status-blockers h3,
.phase3b-status-blockers p {
  margin: 0;
}

.phase3b-status-blockers ul {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

@media (max-width: 640px) {
  .phase3b-reconciliation-page .driver-information-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phase3b-reconciliation-page form > button {
    width: 100%;
  }

  .phase3b-reconciliation-page table {
    min-width: 0;
  }

  .phase3b-reconciliation-page thead {
    display: none;
  }

  .phase3b-reconciliation-page tbody,
  .phase3b-reconciliation-page tr,
  .phase3b-reconciliation-page td {
    display: block;
    width: 100%;
  }

  .phase3b-reconciliation-page tr {
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--panel-border, #334155);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.3);
  }

  .phase3b-reconciliation-page td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr);
    gap: 0.65rem;
    padding: 0.65rem 0;
  }

  .phase3b-reconciliation-page td::before {
    content: attr(data-label);
    color: var(--muted-text, #94a3b8);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .phase3b-reconciliation-page td[colspan]::before {
    content: none;
  }
}

/* Applicant accounts, application status and the staff Leads queue. */
.company-dashboard-card.leads-dashboard-card {
  border-color: rgba(56, 189, 248, 0.72);
  background:
    radial-gradient(circle at 88% 12%, rgba(45, 212, 191, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(3, 105, 161, 0.4), rgba(15, 23, 42, 0.98));
}

.company-dashboard-card.leads-dashboard-card:hover {
  border-color: rgba(103, 232, 249, 0.88);
  background:
    radial-gradient(circle at 88% 12%, rgba(45, 212, 191, 0.26), transparent 38%),
    linear-gradient(145deg, rgba(3, 105, 161, 0.5), rgba(15, 23, 42, 0.98));
}

.company-dashboard-card.leads-dashboard-card.action-required {
  border-color: rgba(251, 191, 36, 0.88);
  background:
    radial-gradient(circle at 88% 12%, rgba(251, 191, 36, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(120, 53, 15, 0.46), rgba(15, 23, 42, 0.98));
}

.company-dashboard-card.leads-dashboard-card.delivery-pending {
  border-color: rgba(250, 204, 21, 0.7);
  background:
    radial-gradient(circle at 88% 12%, rgba(250, 204, 21, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(113, 63, 18, 0.4), rgba(15, 23, 42, 0.98));
}

.company-dashboard-card.leads-dashboard-card.delivery-attention {
  border-color: rgba(248, 113, 113, 0.9);
  background:
    radial-gradient(circle at 88% 12%, rgba(248, 113, 113, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(127, 29, 29, 0.5), rgba(15, 23, 42, 0.98));
}

.leads-dashboard-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.company-dashboard-card .leads-dashboard-card-heading > span {
  color: #cffafe;
  font-size: 1.18rem;
  font-weight: 860;
  letter-spacing: 0.08em;
}

.leads-dashboard-card-heading i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(165, 243, 252, 0.34);
  border-radius: 50%;
  background: rgba(8, 145, 178, 0.22);
  color: #cffafe;
  font-size: 1rem;
  font-style: normal;
}

.leads-dashboard-card-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.company-dashboard-card .leads-dashboard-card-counts > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(165, 243, 252, 0.18);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.3);
  padding: 8px 6px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.15;
  text-align: center;
}

.leads-dashboard-card-counts b {
  color: #ecfeff;
  font-size: 1rem;
  line-height: 1;
}

.leads-dashboard-card-counts small {
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 760;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.applicant-body,
.leads-body {
  min-width: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(6, 111, 209, 0.2), transparent 28rem),
    radial-gradient(circle at 100% 26%, rgba(45, 212, 191, 0.08), transparent 30rem),
    #08111f;
}

.applicant-flow-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.applicant-shell {
  width: min(100% - 32px, 980px);
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 0 max(36px, env(safe-area-inset-bottom));
}

.applicant-account-shell {
  width: min(100% - 32px, 860px);
}

.applicant-header,
.leads-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.applicant-header .auth-brand,
.leads-header .auth-brand {
  text-decoration: none;
}

.applicant-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.applicant-nav a,
.applicant-text-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 0 14px;
  color: #bfdbfe;
  font-size: 0.9rem;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

.applicant-nav a:hover,
.applicant-nav a:focus-visible,
.applicant-text-button:hover,
.applicant-text-button:focus-visible {
  border-color: rgba(147, 197, 253, 0.38);
  background: rgba(30, 64, 175, 0.14);
  color: var(--ink-strong);
  outline: 0;
}

.applicant-hero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
  align-items: end;
  gap: 28px;
  margin: 24px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(125deg, rgba(7, 89, 133, 0.82), rgba(15, 23, 42, 0.96) 68%),
    var(--panel);
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.26);
}

.applicant-kicker,
.leads-kicker {
  margin: 0 0 10px;
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.applicant-hero h1 {
  max-width: 660px;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(2.45rem, 7vw, 5rem);
  font-weight: 840;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.applicant-hero > div:first-child > p:last-child {
  max-width: 600px;
  margin: 20px 0 0;
  color: #cbd5e1;
  font-size: 1.02rem;
  line-height: 1.6;
}

.applicant-hero-options {
  display: grid;
  gap: 9px;
}

.applicant-option {
  min-height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0 16px;
  color: #062b3b;
  font-size: 0.86rem;
  font-weight: 860;
}

.applicant-option-wolt {
  background: linear-gradient(145deg, #5ee1f3, #00c2e8);
}

.applicant-option-bolt {
  background: linear-gradient(145deg, #52d99a, #32bb78);
  color: #0b3022;
}

.applicant-option-hourly {
  background: linear-gradient(145deg, #ffd65e, #fbbf24);
  color: #3d2b00;
}

.applicant-card,
.applicant-status-card,
.leads-panel {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(23, 32, 51, 0.96);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22);
}

.applicant-auth-card {
  width: min(100%, 600px);
  margin: 0 auto;
}

.applicant-card-heading {
  padding: 24px clamp(20px, 5vw, 32px) 20px;
  border-bottom: 1px solid var(--line-soft);
}

.applicant-card-heading-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.applicant-card-heading h2 {
  margin: 5px 0 8px;
  color: var(--ink-strong);
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: -0.025em;
}

.applicant-card-heading h2:focus-visible,
.applicant-result-card h2:focus-visible,
.applicant-status-card h2:focus-visible {
  border-radius: 4px;
  outline: 2px solid #67e8f9;
  outline-offset: 6px;
}

.applicant-card-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.applicant-step,
.applicant-verified-email,
.applicant-reference {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(103, 232, 249, 0.28);
  border-radius: 999px;
  background: rgba(8, 145, 178, 0.12);
  padding: 0 11px;
  color: #a5f3fc;
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.06em;
}

.applicant-verified-email,
.applicant-reference {
  max-width: 46%;
  overflow-wrap: anywhere;
  text-align: center;
}

.applicant-form {
  display: grid;
  gap: 16px;
  padding: 24px clamp(20px, 5vw, 32px);
}

.applicant-form label,
.leads-filter-form label {
  margin: 0;
  font-weight: 720;
}

.applicant-form input:not([type="checkbox"]),
.applicant-form select,
.leads-filter-form input,
.leads-filter-form select {
  min-height: 52px;
  height: 52px;
  border-radius: 10px;
  background-color: rgba(2, 6, 23, 0.62);
}

.applicant-form input[autocomplete="one-time-code"] {
  font-size: 1.45rem;
  font-weight: 820;
  letter-spacing: 0.32em;
  text-align: center;
}

.applicant-primary-action,
.applicant-primary-link {
  min-height: 52px;
  margin-top: 2px;
  border-radius: 10px;
  font-weight: 780;
}

.applicant-primary-link {
  width: auto;
  min-width: 210px;
  margin: 0;
  padding: 0 20px;
}

.applicant-message {
  min-height: 22px;
  margin: 0;
  text-align: left;
}

.applicant-field-help,
.applicant-privacy-note {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.applicant-privacy-note {
  margin: 0;
  border-top: 1px solid var(--line-soft);
  padding: 16px clamp(20px, 5vw, 32px) 20px;
}

.applicant-inline-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
}

.applicant-inline-actions .applicant-text-button {
  min-width: 0;
  padding: 0 8px;
}

.applicant-application-form {
  gap: 24px;
}

.applicant-application-form fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.applicant-application-form legend {
  margin: 0 0 14px;
  padding: 0;
  color: #e0f2fe;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

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

.applicant-wide-field {
  grid-column: 1 / -1;
}

.applicant-consent {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px !important;
  border: 1px solid rgba(103, 232, 249, 0.2);
  border-radius: 12px;
  background: rgba(8, 145, 178, 0.07);
  padding: 16px;
  line-height: 1.5;
}

.applicant-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  accent-color: var(--blue-hover);
}

.applicant-submit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
}

.applicant-submit-panel strong {
  color: var(--ink-strong);
  font-size: 1rem;
}

.applicant-submit-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.applicant-result-card {
  min-height: 260px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 5vw, 40px);
}

.applicant-result-card:not(.hidden) {
  display: grid;
}

.applicant-result-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.38);
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.16);
  color: #86efac;
  font-size: 1.7rem;
  font-weight: 820;
}

.applicant-result-icon-empty {
  border-color: rgba(96, 165, 250, 0.38);
  background: rgba(37, 99, 235, 0.16);
  color: #93c5fd;
}

.applicant-result-card h2 {
  margin: 0 0 10px;
  color: var(--ink-strong);
  font-size: clamp(1.55rem, 4vw, 2.2rem);
  letter-spacing: -0.03em;
}

.applicant-result-card div > p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.applicant-account-intro {
  padding: 60px 0 28px;
}

.applicant-account-intro h1 {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.applicant-account-intro > p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.applicant-status-view {
  display: grid;
  gap: 18px;
}

.applicant-status-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 6vw, 48px);
}

.applicant-status-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: #38bdf8;
}

.applicant-status-card[data-status="approved"]::before {
  background: #22c55e;
}

.applicant-status-card[data-status="declined"]::before {
  background: #f87171;
}

.applicant-status-card[data-status="unknown"]::before {
  background: #fbbf24;
}

.applicant-status-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.applicant-status-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.34);
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.12);
  color: #7dd3fc;
  font-size: 1.5rem;
  font-weight: 850;
}

[data-status="approved"] .applicant-status-icon {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(22, 163, 74, 0.14);
  color: #86efac;
}

[data-status="declined"] .applicant-status-icon {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(185, 28, 28, 0.14);
  color: #fca5a5;
}

[data-status="unknown"] .applicant-status-icon {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(180, 83, 9, 0.14);
  color: #fde68a;
}

.applicant-status-badge,
.lead-status-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(56, 189, 248, 0.34);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  padding: 0 13px;
  color: #bae6fd;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-status="approved"] .applicant-status-badge,
.lead-card[data-status="approved"] .lead-status-badge {
  border-color: rgba(74, 222, 128, 0.36);
  background: rgba(22, 163, 74, 0.12);
  color: #bbf7d0;
}

[data-status="declined"] .applicant-status-badge,
.lead-card[data-status="declined"] .lead-status-badge {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(185, 28, 28, 0.12);
  color: #fecaca;
}

[data-status="unknown"] .applicant-status-badge {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(180, 83, 9, 0.14);
  color: #fef3c7;
}

.applicant-status-card h2 {
  max-width: 700px;
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(2rem, 6vw, 3.65rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.applicant-status-card > p:not(.applicant-kicker) {
  max-width: 650px;
  margin: 18px 0 0;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.6;
}

.applicant-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.applicant-progress li {
  min-width: 0;
  min-height: 86px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.3);
  padding: 14px;
  opacity: 0.58;
}

.applicant-progress li.current,
.applicant-progress li.complete,
.applicant-progress li.declined {
  opacity: 1;
}

.applicant-progress li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-weight: 820;
}

.applicant-progress li.current > span {
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(14, 165, 233, 0.16);
  color: #7dd3fc;
}

.applicant-progress li.complete > span {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(22, 163, 74, 0.16);
  color: #86efac;
}

.applicant-progress li.declined > span {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(185, 28, 28, 0.16);
  color: #fca5a5;
}

.applicant-progress strong,
.applicant-progress small {
  display: block;
  overflow-wrap: anywhere;
}

.applicant-progress strong {
  color: var(--ink-strong);
  font-size: 0.84rem;
}

.applicant-progress small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.applicant-details-card {
  overflow: hidden;
}

.applicant-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
}

.applicant-detail-grid > div {
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.92);
  padding: 18px;
}

.applicant-detail-grid dt,
.lead-detail dt,
.leads-decision-summary dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.applicant-detail-grid dd,
.lead-detail dd,
.leads-decision-summary dd {
  min-width: 0;
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.applicant-details-card > .applicant-message {
  padding: 0 20px 20px;
}

.applicant-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #94a3b8;
  font-size: 0.82rem;
}

.applicant-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #bfdbfe;
  font-weight: 700;
  text-decoration: none;
}

.applicant-footer a:hover {
  color: var(--ink-strong);
}

.leads-shell {
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 0 max(40px, env(safe-area-inset-bottom));
}

.leads-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 16px;
}

.leads-header-divider {
  width: 1px;
  height: 36px;
  background: var(--line);
}

.leads-header p,
.leads-header h1 {
  margin: 0;
}

.leads-header p {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leads-header h1 {
  color: var(--ink-strong);
  font-size: 1.25rem;
}

.leads-back-button,
.leads-refresh-button {
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
}

.leads-intro {
  min-height: 230px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 24px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 20%, rgba(45, 212, 191, 0.18), transparent 30%),
    linear-gradient(125deg, rgba(3, 105, 161, 0.54), rgba(15, 23, 42, 0.96));
  padding: clamp(24px, 4vw, 38px);
}

.leads-intro h2 {
  max-width: 690px;
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.leads-intro div > p:last-child {
  max-width: 650px;
  margin: 16px 0 0;
  color: #cbd5e1;
  line-height: 1.55;
}

.leads-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.leads-summary-card {
  min-height: 124px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(23, 32, 51, 0.9);
  padding: 18px;
}

.leads-summary-card span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leads-summary-card strong {
  color: var(--ink-strong);
  font-size: 2.25rem;
  line-height: 1;
}

.leads-summary-card small {
  color: var(--muted);
  font-size: 0.74rem;
}

.leads-summary-review {
  border-color: rgba(56, 189, 248, 0.38);
}

.leads-summary-approved {
  border-color: rgba(74, 222, 128, 0.3);
}

.leads-summary-declined {
  border-color: rgba(248, 113, 113, 0.28);
}

.leads-email-delivery {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: -2px 0 18px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 12px;
  background: rgba(113, 63, 18, 0.24);
  padding: 14px 16px;
}

.leads-email-delivery.hidden {
  display: none;
}

.leads-email-delivery.needs-attention {
  border-color: rgba(248, 113, 113, 0.54);
  background: rgba(127, 29, 29, 0.28);
}

.leads-email-delivery-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(253, 224, 71, 0.45);
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.12);
  color: #fef08a;
  font-weight: 900;
}

.leads-email-delivery.needs-attention .leads-email-delivery-icon {
  border-color: rgba(252, 165, 165, 0.52);
  background: rgba(248, 113, 113, 0.14);
  color: #fecaca;
}

.leads-email-delivery strong {
  color: var(--ink-strong);
  font-size: 0.92rem;
}

.leads-email-delivery p {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 0.78rem;
  line-height: 1.45;
}

.leads-panel {
  overflow: hidden;
}

.leads-panel-heading {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 20px;
}

.leads-panel-heading h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.25rem;
}

.leads-panel-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.leads-filter-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.58fr) minmax(260px, 1.5fr) minmax(140px, 0.45fr);
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 20px;
}

.leads-filter-form .primary-button {
  min-height: 52px;
  margin: 0;
}

.leads-message {
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  text-align: left;
}

.leads-message:not(:empty) {
  padding-top: 14px;
}

.leads-list {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.lead-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.58);
}

.lead-card[data-status="under_review"] {
  border-left: 4px solid #38bdf8;
}

.lead-card[data-status="approved"] {
  border-left: 4px solid #22c55e;
}

.lead-card[data-status="declined"] {
  border-left: 4px solid #f87171;
}

.lead-email-state {
  max-width: min(100%, 620px);
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(250, 204, 21, 0.34);
  border-radius: 999px;
  background: rgba(113, 63, 18, 0.2);
  padding: 5px 9px;
  color: #fef08a;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.35;
}

.lead-email-state.needs-attention {
  border-color: rgba(248, 113, 113, 0.46);
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
}

.lead-card-heading {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 18px;
}

.lead-card-identity {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 6px;
}

.lead-card-badges {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.lead-campaign-badge {
  max-width: 100%;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(167, 139, 250, 0.38);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  padding: 0 13px;
  color: #ddd6fe;
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lead-card-identity h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.12rem;
  overflow-wrap: anywhere;
}

.lead-card-identity p,
.lead-card-submitted span {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.lead-card-submitted {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.lead-card-submitted strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.lead-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
}

.lead-detail {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.9);
  padding: 14px 16px;
}

.lead-card-footer {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.lead-contact-actions,
.lead-decision-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lead-contact-actions .secondary-button,
.lead-decision-actions .primary-button,
.lead-decision-actions .secondary-button {
  width: auto;
  min-width: 112px;
  min-height: 44px;
  margin: 0;
}

.lead-updated {
  color: var(--muted);
  font-size: 0.7rem;
}

.lead-decline-button {
  border-color: rgba(248, 113, 113, 0.36);
  color: #fecaca;
}

.lead-decline-button:hover {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(185, 28, 28, 0.12);
}

.leads-empty-state {
  min-height: 180px;
  display: grid;
  place-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.leads-empty-state strong {
  color: var(--ink-strong);
  font-size: 1rem;
}

.leads-decision-dialog {
  width: min(calc(100% - 28px), 560px);
  max-height: calc(100svh - 28px);
  margin: auto;
  border: 0;
  border-radius: 16px;
  background: transparent;
  padding: 0;
  color: var(--ink);
}

.leads-decision-dialog::backdrop {
  background: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(5px);
}

.leads-dialog-card {
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #172033;
  padding: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.leads-dialog-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.leads-decision-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.36);
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.14);
  color: #86efac;
  font-size: 1.45rem;
  font-weight: 850;
}

.leads-decision-dialog[data-status="declined"] .leads-decision-icon {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(185, 28, 28, 0.14);
  color: #fca5a5;
}

.leads-dialog-heading h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.5rem;
}

.leads-dialog-card > p:not(.leads-message, .leads-decline-note) {
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.55;
}

.leads-decision-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.leads-decision-summary > div {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.3);
  padding: 13px;
}

.leads-decline-note {
  margin: 14px 0 0;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 10px;
  background: rgba(185, 28, 28, 0.09);
  padding: 12px;
  color: #fecaca;
  font-size: 0.78rem;
  line-height: 1.5;
}

.leads-dialog-actions {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
  margin-top: 20px;
}

.leads-dialog-actions .primary-button,
.leads-dialog-actions .secondary-button {
  min-height: 50px;
  margin: 0;
}

.lead-confirm-decline {
  background: #b91c1c;
}

.lead-confirm-decline:hover {
  background: #dc2626;
}

@media (max-width: 760px) {
  .applicant-shell,
  .applicant-account-shell,
  .leads-shell {
    width: min(100% - 24px, 620px);
  }

  .applicant-header,
  .leads-header {
    min-height: 58px;
  }

  .applicant-header .brand-mark.small,
  .leads-header .brand-mark.small {
    width: 40px;
    height: 40px;
  }

  .applicant-header .auth-brand strong,
  .leads-header .auth-brand strong {
    font-size: 1.25rem;
  }

  .applicant-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    margin-top: 14px;
    padding: 26px 22px;
  }

  .applicant-hero h1 {
    font-size: clamp(2.4rem, 14vw, 4rem);
  }

  .applicant-hero-options {
    grid-template-columns: 1fr;
  }

  .applicant-form-grid,
  .applicant-submit-panel,
  .applicant-detail-grid,
  .applicant-progress,
  .leads-summary,
  .leads-filter-form,
  .lead-detail-grid {
    grid-template-columns: 1fr;
  }

  .applicant-wide-field {
    grid-column: auto;
  }

  .applicant-card-heading-split {
    display: grid;
  }

  .applicant-verified-email,
  .applicant-reference {
    max-width: 100%;
    justify-self: start;
  }

  .applicant-submit-panel .applicant-primary-action {
    width: 100%;
  }

  .applicant-result-card:not(.hidden) {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
  }

  .applicant-result-icon {
    width: 54px;
    height: 54px;
  }

  .applicant-result-card .applicant-primary-link {
    grid-column: 1 / -1;
    width: 100%;
  }

  .applicant-account-intro {
    padding: 40px 0 24px;
  }

  .applicant-progress {
    gap: 8px;
  }

  .applicant-progress li {
    min-height: 72px;
  }

  .applicant-detail-grid > div {
    min-height: 78px;
  }

  .leads-header-divider,
  .leads-header > div:first-child > div {
    display: none;
  }

  .leads-intro {
    min-height: 0;
    display: grid;
    align-items: start;
    margin-top: 14px;
    padding: 26px 22px;
  }

  .leads-intro h2 {
    font-size: clamp(2rem, 11vw, 3.3rem);
  }

  .leads-refresh-button,
  .leads-back-button {
    min-height: 46px;
  }

  .leads-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .leads-summary-card {
    min-height: 106px;
    padding: 12px 10px;
  }

  .leads-summary-card span {
    font-size: 0.58rem;
  }

  .leads-summary-card strong {
    font-size: 1.7rem;
  }

  .leads-summary-card small {
    display: none;
  }

  .leads-filter-form {
    gap: 14px;
  }

  .lead-card-heading,
  .lead-card-footer {
    display: grid;
    align-items: start;
  }

  .lead-card-submitted {
    justify-items: start;
    text-align: left;
  }

  .lead-contact-actions {
    display: grid;
    justify-items: stretch;
  }

  .lead-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-contact-actions .secondary-button,
  .lead-decision-actions .primary-button,
  .lead-decision-actions .secondary-button {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 430px) {
  .applicant-shell,
  .applicant-account-shell,
  .leads-shell {
    width: min(100% - 20px, 420px);
  }

  .applicant-nav {
    gap: 0;
  }

  .applicant-nav a,
  .applicant-text-button {
    padding: 0 10px;
    font-size: 0.84rem;
  }

  .applicant-inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .applicant-inline-actions .applicant-text-button {
    width: 100%;
  }

  .applicant-footer {
    display: grid;
    justify-items: start;
    padding-top: 12px;
  }

  .leads-back-button {
    max-width: 152px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  .leads-summary-card {
    min-width: 0;
    padding: 10px 7px;
  }

  .leads-summary-card span {
    overflow-wrap: anywhere;
  }

  .leads-decision-summary,
  .leads-dialog-actions {
    grid-template-columns: 1fr;
  }

  .leads-dialog-card {
    padding: 20px 16px;
  }

  .leads-dialog-heading {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .leads-decision-icon {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .applicant-body *,
  .leads-body *,
  .leads-dashboard-card {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Supplier accounts: one clear payment workspace for every supplier. */
.supplier-account {
  overflow: hidden;
}

.supplier-account-heading {
  align-items: center;
}

.supplier-account-eyebrow {
  display: block;
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.supplier-account-period {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(460px, 1.35fr) auto;
  align-items: end;
  gap: 18px;
  margin: 18px;
  border: 1px solid rgba(59, 130, 246, 0.38);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.18), rgba(15, 23, 42, 0.42)),
    rgba(15, 23, 42, 0.36);
  padding: 16px 18px;
}

.supplier-account-period > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.supplier-account-period span {
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.supplier-account-period strong {
  color: var(--ink-strong);
  font-size: 1.12rem;
}

.supplier-account-period small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.supplier-account-period .primary-button {
  min-width: 180px;
  min-height: 46px;
}

.supplier-account-period-form {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.supplier-account-period-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--ink-strong);
  font-size: 0.76rem;
  font-weight: 760;
}

.supplier-account-period-form input,
.supplier-account-period-form .secondary-button {
  width: 100%;
  min-height: 46px;
}

.supplier-account-period-form .secondary-button {
  white-space: nowrap;
}

.supplier-account-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.supplier-account-stat {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.38);
  padding: 15px;
}

.supplier-account-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(148, 163, 184, 0.58);
}

.supplier-account-stat span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.supplier-account-stat strong {
  color: var(--ink-strong);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.supplier-account-stat small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.supplier-account-stat.status-due::before,
.supplier-account-stat.status-money::before {
  background: #60a5fa;
}

.supplier-account-stat.status-paid::before {
  background: #34d399;
}

.supplier-account-stat.status-unpaid::before {
  background: #fb7185;
}

.supplier-account-stat.status-review::before,
.supplier-account-stat.status-outstanding::before {
  background: #fbbf24;
}

.supplier-account-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(15, 23, 42, 0.22);
  padding: 12px 18px;
}

.supplier-account-tab {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 10px 12px;
  cursor: pointer;
}

.supplier-account-tab:hover {
  border-color: rgba(148, 163, 184, 0.24);
  color: var(--ink-strong);
}

.supplier-account-tab.active {
  border-color: rgba(59, 130, 246, 0.54);
  background: rgba(37, 99, 235, 0.18);
  color: #bfdbfe;
}

.supplier-account-tab:focus-visible,
.supplier-account-status-filters button:focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.38);
  outline-offset: 2px;
}

.supplier-account-tab-panel {
  min-width: 0;
}

.supplier-payment-workflow {
  margin: 18px;
  scroll-margin-top: 18px;
  border-color: rgba(59, 130, 246, 0.36);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(30, 64, 175, 0.12), transparent 56%),
    rgba(15, 23, 42, 0.34);
}

.supplier-payment-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.supplier-payment-stepper li {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.32);
  color: var(--muted);
  padding: 9px;
}

.supplier-payment-stepper li span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 850;
}

.supplier-payment-stepper li strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-payment-stepper li.active {
  border-color: rgba(96, 165, 250, 0.56);
  background: rgba(37, 99, 235, 0.18);
  color: #bfdbfe;
}

.supplier-payment-stepper li.active span {
  border-color: #60a5fa;
  background: #2563eb;
  color: #fff;
}

.supplier-payment-stepper li.complete {
  border-color: rgba(52, 211, 153, 0.34);
  color: #a7f3d0;
}

.supplier-payment-stepper li.complete span {
  border-color: rgba(52, 211, 153, 0.58);
  background: rgba(5, 150, 105, 0.24);
}

.supplier-payment-step-form {
  display: block;
  padding-top: 16px;
}

.supplier-payment-stage {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.28);
  padding: 16px;
}

.supplier-payment-stage.hidden {
  display: none;
}

.supplier-payment-stage legend {
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 820;
  padding: 0 6px;
}

.supplier-payment-stage-help {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
}

.supplier-payment-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.supplier-payment-stage-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--ink-strong);
  font-size: 0.82rem;
  font-weight: 760;
}

.supplier-payment-stage-grid label small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.supplier-payment-proof-field,
.supplier-payment-note-field {
  grid-column: 1 / -1;
}

.supplier-payment-selection-meta {
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(30, 64, 175, 0.12);
  color: #bfdbfe;
  font-size: 0.82rem;
  font-weight: 760;
  padding: 10px 12px;
}

.supplier-payment-bike-search {
  grid-column: 1 / -1;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.38);
  padding: 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.supplier-payment-bike-search:focus-within {
  border-color: rgba(96, 165, 250, 0.62);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.supplier-payment-bike-search input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
}

.supplier-payment-selection-list {
  max-height: min(52vh, 560px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 10px;
  padding: 10px;
}

.supplier-payment-selection-list .supplier-payment-bike-search-empty {
  min-height: 156px;
  justify-items: center;
  border-style: dashed;
  border-color: rgba(96, 165, 250, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.12), transparent 58%),
    rgba(15, 23, 42, 0.3);
  color: #bfdbfe;
  line-height: 1.45;
  text-align: center;
}

.supplier-payment-review {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.supplier-payment-review .profile-row {
  min-height: 70px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
  padding: 12px;
}

.supplier-payment-stage-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
}

.supplier-payment-stage-actions .primary-button,
.supplier-payment-stage-actions .secondary-button {
  align-self: center;
  box-sizing: border-box;
  min-width: 150px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  margin: 0;
  padding: 0 16px;
  line-height: 1.2;
}

.supplier-payment-submit {
  width: 100%;
  min-height: 50px;
}

.supplier-period-reconciliation {
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 92% 2%, rgba(59, 130, 246, 0.12), transparent 30%),
    rgba(15, 23, 42, 0.12);
  padding: 22px 18px;
}

.supplier-reconciliation-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 12px;
  background: rgba(30, 64, 175, 0.1);
  padding: 18px;
}

.supplier-reconciliation-heading-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.supplier-reconciliation-heading-copy h3 {
  color: var(--ink-strong);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.18;
  margin: 0;
}

.supplier-reconciliation-heading-copy > strong {
  color: #bfdbfe;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.supplier-reconciliation-heading-copy > span:last-child {
  max-width: 820px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.supplier-reconciliation-exports {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
}

.supplier-reconciliation-exports .download-button {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.supplier-reconciliation-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.supplier-reconciliation-stat {
  position: relative;
  min-width: 0;
  min-height: 105px;
  display: grid;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
  padding: 14px 14px 14px 17px;
}

.supplier-reconciliation-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #60a5fa;
}

.supplier-reconciliation-stat.status-payable::before {
  background: #60a5fa;
}

.supplier-reconciliation-stat.status-paid::before {
  background: #34d399;
}

.supplier-reconciliation-stat.status-review::before {
  background: #fbbf24;
}

.supplier-reconciliation-stat.status-not-chargeable::before {
  background: #fb923c;
}

.supplier-reconciliation-stat.status-returned::before {
  background: #94a3b8;
}

.supplier-reconciliation-stat span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.supplier-reconciliation-stat strong {
  color: var(--ink-strong);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1;
}

.supplier-reconciliation-stat small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.supplier-reconciliation-groups {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}

.supplier-reconciliation-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.3);
}

.supplier-reconciliation-group.status-payable {
  border-color: rgba(96, 165, 250, 0.34);
}

.supplier-reconciliation-group.status-paid {
  border-color: rgba(52, 211, 153, 0.3);
}

.supplier-reconciliation-group.status-review {
  border-color: rgba(251, 191, 36, 0.38);
}

.supplier-reconciliation-group.status-not-chargeable {
  border-color: rgba(251, 146, 60, 0.38);
}

.supplier-reconciliation-group.status-returned {
  border-color: rgba(148, 163, 184, 0.27);
}

.supplier-reconciliation-group > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  list-style: none;
  padding: 15px;
  cursor: pointer;
}

.supplier-reconciliation-group > summary::-webkit-details-marker {
  display: none;
}

.supplier-reconciliation-group > summary::before {
  content: "›";
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1.2rem;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

.supplier-reconciliation-group[open] > summary::before {
  transform: rotate(90deg);
}

.supplier-reconciliation-group > summary > span:first-of-type {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.supplier-reconciliation-group > summary strong {
  color: var(--ink-strong);
  font-size: 0.94rem;
}

.supplier-reconciliation-group > summary small {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.supplier-reconciliation-group-count {
  min-width: 38px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: var(--ink-strong);
  font-size: 0.78rem;
  font-weight: 850;
  padding: 5px 9px;
}

.supplier-reconciliation-group-body {
  display: grid;
  gap: 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding: 12px;
}

.supplier-reconciliation-group-empty {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  padding: 8px;
}

.supplier-reconciliation-bike {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.46);
  padding: 14px;
}

.supplier-reconciliation-bike.status-payable {
  border-left-color: #60a5fa;
}

.supplier-reconciliation-bike.status-paid {
  border-left-color: #34d399;
}

.supplier-reconciliation-bike.status-review {
  border-left-color: #fbbf24;
}

.supplier-reconciliation-bike.status-not-chargeable {
  border-left-color: #fb923c;
}

.supplier-reconciliation-bike.status-returned {
  border-left-color: #94a3b8;
}

.supplier-reconciliation-bike-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.supplier-reconciliation-bike-head > div {
  min-width: 0;
}

.supplier-reconciliation-bike-head h4 {
  color: var(--ink-strong);
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.supplier-reconciliation-bike-head p {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.supplier-reconciliation-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.5);
  color: #cbd5e1;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  padding: 7px 9px;
  text-transform: uppercase;
}

.supplier-reconciliation-badge.status-payable {
  border-color: rgba(96, 165, 250, 0.5);
  color: #bfdbfe;
}

.supplier-reconciliation-badge.status-paid {
  border-color: rgba(52, 211, 153, 0.5);
  color: #a7f3d0;
}

.supplier-reconciliation-badge.status-review {
  border-color: rgba(251, 191, 36, 0.52);
  color: #fde68a;
}

.supplier-reconciliation-badge.status-not-chargeable {
  border-color: rgba(251, 146, 60, 0.52);
  color: #fed7aa;
}

.supplier-reconciliation-why {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  background: rgba(30, 64, 175, 0.08);
  padding: 10px 11px;
}

.supplier-reconciliation-bike.status-review .supplier-reconciliation-why {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(120, 53, 15, 0.12);
}

.supplier-reconciliation-why > strong {
  color: var(--ink-strong);
  font-size: 0.72rem;
}

.supplier-reconciliation-why ul {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.4;
  margin: 0;
  padding-left: 18px;
}

.supplier-reconciliation-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.supplier-reconciliation-facts .profile-row {
  min-width: 0;
  min-height: 58px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.34);
  padding: 9px;
}

.supplier-reconciliation-facts .profile-row strong {
  overflow-wrap: anywhere;
}

.supplier-reconciliation-histories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.supplier-reconciliation-timeline {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 10px;
}

.supplier-reconciliation-timeline h5 {
  color: var(--ink-strong);
  font-size: 0.73rem;
  margin: 0;
}

.supplier-reconciliation-timeline-list {
  display: grid;
  gap: 7px;
}

.supplier-reconciliation-timeline-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.supplier-reconciliation-timeline-marker {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 2px solid #94a3b8;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
}

.supplier-reconciliation-timeline-item.tone-ok .supplier-reconciliation-timeline-marker {
  border-color: #34d399;
}

.supplier-reconciliation-timeline-item.tone-warning .supplier-reconciliation-timeline-marker {
  border-color: #fbbf24;
}

.supplier-reconciliation-timeline-item > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.supplier-reconciliation-timeline-item strong {
  color: var(--ink-strong);
  font-size: 0.71rem;
  overflow-wrap: anywhere;
}

.supplier-reconciliation-timeline-item span:last-child,
.supplier-reconciliation-timeline-empty {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.supplier-reconciliation-timeline-empty {
  margin: 0;
}

.supplier-reconciliation-bike-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 11px;
}

.supplier-reconciliation-bike-footer > span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.supplier-reconciliation-bike-footer .secondary-button {
  flex: 0 0 auto;
  min-width: 120px;
}

.supplier-reconciliation-bike-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.supplier-reconciliation-bike-actions :is(.primary-button, .secondary-button) {
  min-width: 120px;
}

.supplier-motorbike-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.supplier-review-modal {
  z-index: 70;
}

.supplier-review-card {
  width: min(100%, 920px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px);
  overflow-y: auto;
  overflow-x: hidden;
}

.supplier-review-alert {
  border-bottom-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(180deg, rgba(146, 64, 14, 0.28), rgba(23, 32, 51, 0.98));
}

.supplier-review-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 18px 18px 0;
}

.supplier-review-context .profile-row,
.supplier-review-preview .profile-row {
  min-width: 0;
  min-height: 64px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  padding: 11px 12px;
}

.supplier-review-context .profile-row strong,
.supplier-review-preview .profile-row strong {
  overflow-wrap: anywhere;
}

.supplier-review-context-wide {
  grid-column: 1 / -1;
}

.supplier-review-evidence {
  display: grid;
  gap: 14px;
  margin: 14px 18px 0;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.34);
  padding: 14px;
}

.supplier-review-coverage {
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.2), transparent 50%),
    rgba(30, 64, 175, 0.1);
  padding: 15px 16px;
}

.supplier-review-coverage > span {
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.supplier-review-coverage h3 {
  margin: 7px 0 4px;
  color: var(--ink-strong);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.supplier-review-coverage p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.supplier-review-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.supplier-review-metric {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.4);
  padding: 12px;
}

.supplier-review-metric.tone-warning {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(146, 64, 14, 0.12);
}

.supplier-review-metric.tone-ok {
  border-color: rgba(52, 211, 153, 0.26);
}

.supplier-review-metric > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.supplier-review-metric > strong {
  color: var(--ink-strong);
  font-size: 1.05rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.supplier-review-metric > small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.supplier-review-why {
  border-left: 3px solid #fbbf24;
  border-radius: 7px;
  background: rgba(146, 64, 14, 0.1);
  padding: 12px 14px;
}

.supplier-review-why > strong {
  color: #fde68a;
  font-size: 0.78rem;
}

.supplier-review-why ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-strong);
  font-size: 0.78rem;
  line-height: 1.45;
}

.supplier-review-history-warning {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.supplier-review-histories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supplier-review-histories .supplier-reconciliation-timeline {
  min-width: 0;
}

.supplier-review-trace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.supplier-review-trace .profile-row {
  min-width: 0;
  min-height: 66px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  padding: 10px 11px;
}

.supplier-review-trace .profile-row strong {
  overflow-wrap: anywhere;
}

.supplier-review-decision {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 18px;
  border: 0;
  padding: 0;
}

.supplier-review-decision legend {
  grid-column: 1 / -1;
  width: 100%;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.supplier-review-choice {
  min-width: 0;
  min-height: 96px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.38);
  padding: 15px;
  cursor: pointer;
}

.supplier-review-choice:has(input:checked) {
  border-color: rgba(96, 165, 250, 0.82);
  background: rgba(30, 64, 175, 0.18);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset;
}

.supplier-review-choice input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

.supplier-review-choice > span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.supplier-review-choice strong {
  color: var(--ink-strong);
  font-size: 0.93rem;
}

.supplier-review-choice small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.supplier-review-fields {
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding: 18px;
}

.supplier-review-fields > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--ink-strong);
  font-size: 0.83rem;
  font-weight: 760;
}

.supplier-review-fields > label > small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.supplier-review-fields :is(select, textarea) {
  width: 100%;
}

.supplier-review-fields textarea {
  min-height: 90px;
  resize: vertical;
}

.supplier-review-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 18px 18px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  background: rgba(30, 64, 175, 0.08);
  padding: 10px;
}

.supplier-review-preview-row.is-before {
  border-left: 3px solid #fbbf24;
}

.supplier-review-preview-row.is-after {
  border-left: 3px solid #60a5fa;
}

.supplier-review-actions {
  margin-top: 0 !important;
}

.supplier-review-message {
  min-height: 20px;
  margin: -5px 18px 18px;
}

.supplier-current-board {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line-soft);
  padding: 18px;
}

.supplier-account-status-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.supplier-account-status-filters button {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.28);
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
}

.supplier-account-status-filters button.active {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(37, 99, 235, 0.18);
  color: #bfdbfe;
}

.supplier-current-bike-list,
.supplier-all-bike-list {
  display: grid;
  gap: 10px;
  padding: 0;
}

.suppliers-bike-card.supplier-account-bike-row {
  width: 100%;
  min-width: 0;
  min-height: 122px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns:
    minmax(170px, 0.72fr)
    minmax(400px, 1.55fr)
    minmax(160px, 0.58fr)
    minmax(280px, 300px);
  grid-template-areas: "summary metrics state actions";
  align-items: center;
  gap: 14px;
  border-left-width: 3px;
  border-radius: 10px;
  padding: 13px 14px;
}

.suppliers-bike-card.supplier-account-bike-row:hover {
  transform: none;
}

.supplier-account-bike-row.supplier-account-status-paid {
  border-left-color: #34d399;
  background: rgba(6, 78, 59, 0.1);
}

.supplier-account-bike-row.supplier-account-status-unpaid {
  border-left-color: #fb7185;
  background: rgba(127, 29, 29, 0.1);
}

.supplier-account-bike-row.supplier-account-status-review {
  border-left-color: #fbbf24;
  background: rgba(120, 53, 15, 0.1);
}

.supplier-account-bike-row.supplier-account-status-not_chargeable {
  border-left-color: #fb923c;
  background: rgba(124, 45, 18, 0.1);
}

.supplier-account-bike-row.supplier-account-status-not_due {
  border-left-color: #94a3b8;
  opacity: 0.82;
}

.supplier-account-bike-row .supplier-bike-top {
  align-content: center;
  gap: 6px;
  padding: 0;
}

.supplier-account-bike-row .supplier-bike-top.with-select {
  grid-template-columns: auto minmax(0, 1fr);
}

.supplier-account-bike-row .supplier-bike-identity h3 {
  font-size: 0.98rem;
}

.supplier-account-bike-row .supplier-bike-identity p {
  font-size: 0.76rem;
}

.supplier-account-bike-note {
  color: #fdba74 !important;
  font-size: 0.72rem !important;
}

.supplier-account-bike-row .supplier-bike-metrics {
  grid-area: metrics;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
}

.supplier-account-bike-row .supplier-bike-metrics .profile-row {
  min-width: 0;
  min-height: 72px;
  align-content: center;
  border-radius: 7px;
  padding: 8px 9px;
}

.supplier-account-bike-row .supplier-bike-metrics .profile-row strong {
  overflow-wrap: anywhere;
}

.supplier-account-bike-actions {
  grid-area: actions;
  width: 100%;
  min-width: 0;
  max-width: 300px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  margin: 0;
}

.supplier-account-bike-actions .supplier-account-bike-action {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  font-size: 0.8rem;
  line-height: 1.1;
}

.supplier-account-bike-action-contact {
  grid-column: 1;
}

.supplier-account-bike-action-review {
  grid-column: 2;
}

.supplier-account-bike-action-details {
  grid-column: 3;
}

.supplier-account-bike-state {
  grid-area: state;
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 6px;
}

.supplier-account-bike-badge {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--ink-strong);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 7px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.supplier-account-bike-badge.status-paid {
  border-color: rgba(52, 211, 153, 0.52);
  color: #a7f3d0;
}

.supplier-account-bike-badge.status-unpaid {
  border-color: rgba(251, 113, 133, 0.52);
  color: #fda4af;
}

.supplier-account-bike-badge.status-review {
  border-color: rgba(251, 191, 36, 0.54);
  color: #fde68a;
}

.supplier-account-bike-badge.status-not_chargeable {
  border-color: rgba(251, 146, 60, 0.54);
  color: #fed7aa;
}

.supplier-account-bike-badge.status-not_due {
  color: #cbd5e1;
}

.supplier-account-bike-payment-detail {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.supplier-payment-cards-section {
  border: 0;
  padding: 18px;
}

.supplier-payment-card-metrics {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.supplier-inventory-summary {
  margin: 0;
  padding: 18px;
}

.supplier-all-bike-list {
  padding: 0 18px 18px;
}

.supplier-settings-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: 14px;
  padding: 18px;
}

.supplier-settings-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.3);
  padding: 16px;
}

.supplier-settings-card h3,
.supplier-account-audit h3 {
  color: var(--ink-strong);
  font-size: 1rem;
  margin: 0;
}

.supplier-settings-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 5px 0 0;
}

.supplier-settings-card .supplier-info-card {
  margin: 0;
}

.supplier-rate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.supplier-rate-form label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--ink-strong);
  font-size: 0.82rem;
  font-weight: 760;
}

.supplier-rate-form .primary-button {
  min-height: 46px;
}

.supplier-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-account-audit {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding: 18px;
}

.supplier-account-audit > div:first-child {
  display: grid;
  gap: 4px;
}

.supplier-account-audit > div:first-child > span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 1360px) {
  .supplier-account-period {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .supplier-account-period-form {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .supplier-account-period > .primary-button {
    grid-column: 2;
    grid-row: 1;
  }

  .supplier-account-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .supplier-reconciliation-heading {
    grid-template-columns: 1fr;
  }

  .supplier-reconciliation-exports {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }

  .supplier-reconciliation-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .supplier-reconciliation-groups {
    grid-template-columns: 1fr;
  }

  .suppliers-bike-card.supplier-account-bike-row {
    grid-template-columns: minmax(180px, 0.72fr) minmax(360px, 1.45fr) 300px;
    grid-template-areas:
      "summary metrics state"
      "summary metrics actions";
  }

  .supplier-account-bike-row .supplier-bike-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .suppliers-bike-card.supplier-account-bike-row {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.55fr);
    grid-template-areas:
      "summary state"
      "metrics metrics"
      "actions actions";
  }

  .supplier-account-bike-actions {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .supplier-account-period {
    align-items: stretch;
    grid-template-columns: 1fr;
    margin: 14px;
    padding: 14px;
  }

  .supplier-account-period-form,
  .supplier-account-period > .primary-button {
    grid-column: 1;
    grid-row: auto;
  }

  .supplier-account-period-form {
    grid-template-columns: 1fr;
  }

  .supplier-account-period .primary-button {
    width: 100%;
  }

  .supplier-account-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 14px 14px;
  }

  .supplier-account-stat {
    min-height: 104px;
    padding: 13px;
  }

  .supplier-account-tabs {
    display: flex;
    overflow-x: auto;
    padding: 10px 14px;
    scroll-snap-type: x proximity;
  }

  .supplier-account-tab {
    flex: 0 0 auto;
    min-width: 142px;
    scroll-snap-align: start;
  }

  .supplier-payment-workflow {
    margin: 14px;
  }

  .supplier-payment-stepper {
    grid-template-columns: repeat(4, 72px);
    overflow-x: auto;
  }

  .supplier-payment-stepper li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .supplier-payment-stage-grid,
  .supplier-payment-review,
  .supplier-settings-grid,
  .supplier-rate-form {
    grid-template-columns: 1fr;
  }

  .supplier-payment-proof-field,
  .supplier-payment-note-field {
    grid-column: auto;
  }

  .supplier-payment-stage-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .supplier-payment-stage-actions .primary-button,
  .supplier-payment-stage-actions .secondary-button {
    align-self: stretch;
    width: 100%;
  }

  .supplier-current-board {
    padding: 14px;
  }

  .supplier-period-reconciliation {
    gap: 14px;
    padding: 14px;
  }

  .supplier-reconciliation-heading {
    gap: 14px;
    padding: 14px;
  }

  .supplier-reconciliation-exports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-reconciliation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-reconciliation-histories {
    grid-template-columns: 1fr;
  }

  .supplier-reconciliation-bike-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .supplier-reconciliation-bike-footer .secondary-button {
    width: 100%;
  }

  .supplier-reconciliation-bike-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .supplier-reconciliation-bike-actions :is(.primary-button, .secondary-button) {
    width: 100%;
  }

  .supplier-review-modal {
    align-items: flex-start;
    padding-right: 10px;
    padding-left: 10px;
  }

  .supplier-review-card {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  }

  .supplier-review-context,
  .supplier-review-metrics,
  .supplier-review-histories,
  .supplier-review-trace,
  .supplier-review-decision,
  .supplier-review-preview {
    grid-template-columns: 1fr;
  }

  .supplier-review-evidence {
    margin-right: 10px;
    margin-left: 10px;
    padding: 10px;
  }

  .supplier-review-metric {
    min-height: 0;
  }

  .supplier-review-context-wide,
  .supplier-review-decision legend {
    grid-column: auto;
  }

  .supplier-review-choice {
    min-height: 84px;
  }

  .supplier-review-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .supplier-review-actions :is(.primary-button, .secondary-button) {
    width: 100%;
  }

  .supplier-motorbike-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .supplier-motorbike-heading-actions :is(.primary-button, .secondary-button) {
    width: 100%;
  }

  .supplier-account-status-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .supplier-account-status-filters button {
    width: 100%;
  }

  .suppliers-bike-card.supplier-account-bike-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "state"
      "metrics"
      "actions";
    gap: 12px;
    padding: 14px;
  }

  .supplier-account-bike-row .supplier-bike-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-account-bike-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .supplier-account-bike-actions .supplier-account-bike-action {
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }

  .supplier-payment-cards-section,
  .supplier-inventory-summary,
  .supplier-settings-grid,
  .supplier-account-audit {
    padding: 14px;
  }

  .supplier-all-bike-list {
    padding: 0 14px 14px;
  }
}

@media (max-width: 420px) {
  .supplier-account-summary,
  .supplier-reconciliation-summary,
  .supplier-reconciliation-exports,
  .supplier-reconciliation-facts,
  .supplier-account-status-filters,
  .supplier-account-bike-row .supplier-bike-metrics,
  .supplier-account-bike-row .supplier-card-actions {
    grid-template-columns: 1fr;
  }

  .supplier-reconciliation-group > summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .supplier-reconciliation-group-count {
    grid-column: 2;
    justify-self: start;
  }

  .supplier-reconciliation-bike-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .supplier-account-stat {
    min-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .supplier-payment-workflow {
    scroll-behavior: auto;
  }
}

/* Tasks Operations Control Centre */
.tasks-command-centre {
  overflow: hidden;
  border-color: rgba(96, 165, 250, 0.28);
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 189, 248, 0.11), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(139, 92, 246, 0.1), transparent 32%),
    var(--panel);
}

.tasks-command-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.tasks-command-heading h2 {
  margin: 5px 0 0;
  color: var(--ink-strong);
  font-size: 1.25rem;
}

.tasks-command-heading p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.tasks-command-heading .primary-button {
  width: auto;
  min-width: 190px;
  min-height: 46px;
  margin: 0;
}

.tasks-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px;
}

.tasks-workspace-tab {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(71, 85, 105, 0.62);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tasks-workspace-tab:hover,
.tasks-workspace-tab:focus-visible {
  border-color: rgba(96, 165, 250, 0.66);
  background: rgba(30, 64, 175, 0.13);
  transform: translateY(-1px);
}

.tasks-workspace-tab.active {
  border-color: rgba(56, 189, 248, 0.76);
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.16), transparent 45%),
    rgba(30, 64, 175, 0.2);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.08), 0 10px 24px rgba(2, 6, 23, 0.2);
}

.tasks-workspace-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.15);
  color: #bfdbfe;
  font-size: 0.78rem;
  font-weight: 900;
}

.tasks-workspace-tab > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tasks-workspace-tab strong,
.tasks-workspace-tab small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-workspace-tab strong {
  color: var(--ink-strong);
  font-size: 0.8rem;
}

.tasks-workspace-tab small {
  color: var(--muted);
  font-size: 0.66rem;
}

.tasks-workspace-tab em {
  min-width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.5);
  color: var(--ink);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}

.tasks-workspace-tab.active em {
  background: #2563eb;
  color: white;
}

.tasks-workspace-progress {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding: 9px 20px;
  background: rgba(15, 23, 42, 0.3);
  color: var(--muted);
  font-size: 0.72rem;
}

.tasks-workspace-progress > span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.1);
}

.tasks-workspace-progress.is-loading > span {
  border: 2px solid rgba(147, 197, 253, 0.26);
  border-top-color: #60a5fa;
  background: transparent;
  box-shadow: none;
  animation: tasks-control-spin 0.75s linear infinite;
}

.tasks-workspace-progress.is-error > span {
  background: #f87171;
  box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.1);
}

.tasks-source-warning {
  margin: 12px 20px 18px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(245, 158, 11, 0.48);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.28), rgba(30, 41, 59, 0.75));
  color: #fef3c7;
}

.tasks-source-warning-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251, 191, 36, 0.52);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  font-weight: 900;
}

.tasks-source-warning strong {
  display: block;
  color: #fff7d6;
  font-size: 0.82rem;
}

.tasks-source-warning p {
  margin: 3px 0 0;
  color: #d8caa7;
  font-size: 0.72rem;
  line-height: 1.45;
}

.tasks-source-warning .secondary-button {
  min-height: 40px;
  white-space: nowrap;
}

.task-card-icon.module-special,
.tasks-focus-icon.module-special {
  border-color: rgba(192, 132, 252, 0.42);
  background: rgba(126, 34, 206, 0.14);
  color: #e9d5ff;
}

.task-card-icon.module-new-vehicle,
.tasks-focus-icon.module-new-vehicle {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(13, 148, 136, 0.14);
  color: #99f6e4;
}

.task-card-icon.module-city-transfer,
.tasks-focus-icon.module-city-transfer {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
}

.task-card-icon.module-advance,
.tasks-focus-icon.module-advance {
  border-color: rgba(52, 211, 153, 0.42);
  background: rgba(5, 150, 105, 0.14);
  color: #a7f3d0;
}

.task-card-icon.module-salary,
.tasks-focus-icon.module-salary {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(217, 119, 6, 0.14);
  color: #fde68a;
}

.tasks-workflow-stepper.is-source-workflow {
  grid-template-columns: repeat(var(--tasks-step-count, 4), minmax(0, 1fr));
}

.tasks-source-action {
  border-color: rgba(96, 165, 250, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.09), transparent 38%),
    rgba(15, 23, 42, 0.4);
}

.tasks-decision-heading p,
.tasks-source-stage-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.48;
}

.tasks-inline-callout,
.tasks-source-stage,
.tasks-inline-review,
.tasks-special-progress {
  min-width: 0;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.52);
}

#tasksNewVehicleDecisionStage,
#tasksAdvanceDecisionStage {
  min-width: 0;
  display: grid;
  gap: 13px;
}

.tasks-inline-callout > span,
.tasks-source-stage-heading > span,
.tasks-inline-review > span {
  color: #93c5fd;
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tasks-inline-callout > strong,
.tasks-source-stage-heading h4,
.tasks-inline-review > strong {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-size: 0.9rem;
  line-height: 1.4;
}

.tasks-inline-callout > small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.tasks-inline-review > small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.tasks-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.tasks-inline-actions :is(.primary-button, .secondary-button) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
}

.tasks-source-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.tasks-inline-loading,
.tasks-embedded-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  color: #bfdbfe;
  font-size: 0.74rem;
  font-weight: 750;
}

.tasks-inline-loading > span,
.tasks-embedded-loading > span {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(147, 197, 253, 0.25);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: tasks-control-spin 0.75s linear infinite;
}

.tasks-special-actions {
  padding: 16px;
}

.tasks-special-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
}

.tasks-special-progress-track::after {
  width: var(--special-progress, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #34d399);
  content: "";
}

.tasks-special-progress > strong {
  color: var(--ink-strong);
  font-size: 1rem;
}

.tasks-special-progress > span {
  color: var(--muted);
  font-size: 0.74rem;
}

.tasks-embedded-dialog {
  width: min(1280px, calc(100vw - 32px));
  height: min(900px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 14px;
  padding: 0;
  background: #0f172a;
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.tasks-embedded-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.tasks-embedded-dialog::backdrop {
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(5px);
}

.tasks-embedded-header {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(31, 41, 55, 0.98);
}

.tasks-embedded-header h2 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 1.05rem;
}

.tasks-embedded-header .secondary-button {
  width: auto;
  min-width: 86px;
  margin: 0;
}

.tasks-embedded-dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f172a;
}

.tasks-embedded-dialog .tasks-embedded-loading {
  position: absolute;
  inset: 64px 0 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.96);
}

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

@media (max-width: 1180px) {
  .tasks-workspace-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .tasks-command-centre {
    border-radius: 12px;
  }

  .tasks-command-heading {
    align-items: stretch;
    flex-direction: column;
    padding: 17px 16px 14px;
  }

  .tasks-command-heading .primary-button {
    width: 100%;
    min-height: 50px;
  }

  .tasks-workspace-tabs {
    display: flex;
    gap: 9px;
    padding: 13px 14px 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .tasks-workspace-tab {
    min-width: min(76vw, 270px);
    min-height: 72px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .tasks-workspace-progress {
    padding-right: 16px;
    padding-left: 16px;
  }

  .tasks-source-warning {
    margin-right: 14px;
    margin-left: 14px;
  }

  .tasks-workflow-stepper.is-source-workflow {
    overflow-x: auto;
    grid-template-columns: repeat(var(--tasks-step-count, 4), minmax(86px, 1fr));
    padding: 3px 2px 7px;
  }

  .tasks-source-fields,
  .tasks-inline-actions {
    grid-template-columns: 1fr;
  }

  .tasks-embedded-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .tasks-embedded-header {
    padding:
      max(14px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      14px
      max(16px, env(safe-area-inset-left));
  }
}

@media (max-width: 560px) {
  .tasks-source-warning {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px;
  }

  .tasks-source-warning .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .tasks-workspace-tab {
    min-width: min(82vw, 250px);
  }

  .tasks-detail-panel .targets-edit-form.tasks-action-form,
  .tasks-special-actions,
  .tasks-source-stage {
    padding: 14px;
  }

  .tasks-detail-panel .tasks-action-form .targets-form-actions {
    grid-template-columns: 1fr;
  }

  .tasks-detail-panel .tasks-action-form .targets-form-actions .primary-button {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tasks-workspace-tab,
  .tasks-special-progress-track::after {
    transition: none;
  }
}

/* Manager Coaching Queue: deliberately scoped so the guided phone workflow
   cannot change dashboard, Monitoring or other Driver Portal controls. */
.driver-manager-page,
.driver-manager-modal {
  --manager-blue: #60a5fa;
  --manager-blue-strong: #1683e8;
  --manager-green: #34d399;
  --manager-amber: #fbbf24;
  --manager-red: #fb7185;
  --manager-panel: rgba(15, 23, 42, 0.74);
  --manager-line: rgba(148, 163, 184, 0.2);
}

.driver-manager-page {
  width: 100%;
  max-width: 1040px;
  overflow-x: clip;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.driver-manager-page [hidden],
.driver-manager-modal[hidden],
.driver-manager-modal [hidden] {
  display: none !important;
}

.driver-manager-page .driver-manager-topbar {
  padding-top: max(16px, env(safe-area-inset-top));
}

.driver-manager-page .driver-manager-shell {
  width: 100%;
  min-width: 0;
}

.driver-manager-page .driver-manager-page-heading {
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.driver-manager-page .driver-manager-page-heading h1 {
  margin: 4px 0 0;
  font-size: clamp(1.65rem, 5vw, 2.35rem);
  line-height: 1.08;
}

.driver-manager-page .driver-manager-page-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.driver-manager-eyebrow {
  display: block;
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.driver-manager-page .driver-manager-portal-link,
.driver-manager-page button,
.driver-manager-page a.secondary-button,
.driver-manager-modal button,
.driver-manager-modal a {
  min-height: 48px;
}

.driver-manager-page .driver-manager-overview {
  display: grid;
  gap: 16px;
  margin: 0 18px 20px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.74));
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.24);
  padding: 20px;
}

.driver-manager-page .driver-manager-overview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.driver-manager-page .driver-manager-overview-heading > div {
  display: grid;
  gap: 5px;
}

.driver-manager-page .driver-manager-overview-heading span {
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-manager-page .driver-manager-overview-heading strong {
  color: var(--ink-strong);
  font-size: 1.05rem;
  line-height: 1.35;
}

.driver-manager-page .driver-manager-overview-heading .driver-manager-date {
  border: 1px solid var(--manager-line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.64);
  padding: 8px 12px;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.driver-manager-page .driver-manager-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.66);
}

.driver-manager-page .driver-manager-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #34d399);
  transition: width 260ms ease;
}

.driver-manager-page .driver-manager-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.driver-manager-page .driver-manager-metrics article {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--manager-line);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
  padding: 14px;
}

.driver-manager-page .driver-manager-metrics span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.driver-manager-page .driver-manager-metrics strong {
  color: var(--ink-strong);
  font-size: 1.65rem;
  line-height: 1;
}

.driver-manager-page .driver-manager-recovery-message {
  margin: 0;
  border: 1px solid rgba(52, 211, 153, 0.38);
  border-radius: 12px;
  background: rgba(6, 78, 59, 0.24);
  padding: 12px 14px;
  color: #a7f3d0;
  font-weight: 850;
  text-align: center;
}

.driver-manager-page .driver-manager-start-button {
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 900;
}

.driver-manager-page .driver-manager-card {
  border-radius: 18px;
}

.driver-manager-page .driver-manager-heading {
  padding: 20px;
}

.driver-manager-page .driver-manager-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--manager-line);
  padding: 12px 14px;
  scrollbar-width: none;
}

.driver-manager-page .driver-manager-tabs::-webkit-scrollbar {
  display: none;
}

.driver-manager-page .driver-manager-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 120px;
  border: 1px solid var(--manager-line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.56);
  color: var(--muted);
  padding: 11px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.driver-manager-page .driver-manager-tabs button > span {
  min-width: 25px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  padding: 4px 7px;
  color: inherit;
}

.driver-manager-page .driver-manager-tabs button[aria-selected="true"] {
  border-color: rgba(96, 165, 250, 0.76);
  background: rgba(30, 64, 175, 0.34);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
  color: #dbeafe;
}

.driver-manager-page .driver-manager-list {
  gap: 12px;
  padding: 16px;
}

.driver-manager-page .driver-manager-item {
  gap: 14px;
  border-radius: 15px;
  padding: 16px;
}

.driver-manager-page .driver-manager-item.is-other,
.driver-manager-page .driver-manager-item.is-done {
  opacity: 0.82;
}

.driver-manager-page .driver-manager-item-header strong:first-child {
  font-size: 1.02rem;
}

.driver-manager-page .driver-manager-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.driver-manager-page .driver-manager-owner-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--manager-line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  padding: 6px 10px;
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 900;
}

.driver-manager-page .driver-manager-owner-chip.is-mine,
.driver-manager-page .driver-manager-owner-chip.is-followup {
  border-color: rgba(96, 165, 250, 0.52);
  color: #bfdbfe;
}

.driver-manager-page .driver-manager-owner-chip.is-done,
.driver-manager-page .driver-manager-owner-chip.is-recovered {
  border-color: rgba(52, 211, 153, 0.48);
  background: rgba(6, 78, 59, 0.22);
  color: #a7f3d0;
}

.driver-manager-page .driver-manager-status-row .driver-manager-trend {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-manager-page .driver-manager-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-manager-page .driver-manager-latest-contact {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.driver-manager-page .driver-manager-work-account-missing {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 12px;
  background: rgba(113, 63, 18, 0.18);
  color: #fde68a;
  line-height: 1.42;
}

.driver-manager-page .driver-manager-work-account-missing span {
  color: var(--muted);
  font-size: 0.84rem;
}

.driver-manager-page .driver-manager-item-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.driver-manager-page .driver-manager-item-actions > * {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
}

.driver-manager-page .driver-manager-card-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.driver-manager-page .driver-manager-empty-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 50%;
  background: rgba(30, 64, 175, 0.18);
  color: #bfdbfe;
  font-weight: 950;
}

.driver-manager-page .driver-manager-item.empty {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.driver-manager-page .driver-manager-item.empty.ok .driver-manager-empty-icon {
  border-color: rgba(52, 211, 153, 0.46);
  background: rgba(6, 78, 59, 0.28);
  color: #a7f3d0;
}

.driver-manager-page .driver-manager-loading-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--manager-line);
  border-radius: 15px;
  padding: 18px;
}

.driver-manager-page .driver-manager-loading-card span {
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.54), rgba(100, 116, 139, 0.36), rgba(51, 65, 85, 0.54));
  background-size: 220% 100%;
  animation: manager-shimmer 1.3s linear infinite;
}

.driver-manager-page .driver-manager-loading-card span:nth-child(1) { width: 62%; }
.driver-manager-page .driver-manager-loading-card span:nth-child(2) { width: 88%; }
.driver-manager-page .driver-manager-loading-card span:nth-child(3) { width: 42%; }

.driver-manager-page .driver-manager-list-footer {
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
}

.driver-manager-page .driver-manager-retry,
.driver-manager-page .driver-manager-load-more {
  min-height: 48px;
  width: min(100%, 300px);
}

body.driver-manager-modal-open {
  overflow: hidden;
}

.driver-manager-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.driver-manager-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(8px);
}

.driver-manager-modal-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 780px);
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.44);
  border-radius: 20px;
  background: #111c2f;
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.58);
  color: var(--ink-strong);
}

.driver-manager-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--manager-line);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.28), rgba(15, 23, 42, 0.82));
  padding: 18px 20px;
}

.driver-manager-modal-header h2 {
  margin: 5px 0 0;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  line-height: 1.15;
}

.driver-manager-modal-header p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.driver-manager-modal .driver-manager-close-button {
  flex: 0 0 auto;
  min-width: 72px;
}

.driver-manager-modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

.driver-manager-briefing {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--manager-line);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.56);
  padding: 15px;
}

.driver-manager-loading-copy {
  display: grid;
  gap: 6px;
  min-height: 80px;
  place-content: center;
  text-align: center;
}

.driver-manager-loading-copy span {
  color: var(--muted);
}

.driver-manager-briefing-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.driver-manager-briefing-hero > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.driver-manager-briefing-hero > div > strong {
  font-size: 1.08rem;
}

.driver-manager-briefing-hero > div > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.driver-manager-briefing-hero > b {
  flex: 0 0 auto;
  border: 1px solid rgba(251, 113, 133, 0.45);
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.22);
  padding: 7px 10px;
  color: #fecdd3;
  font-size: 0.78rem;
}

.driver-manager-why {
  display: grid;
  gap: 5px;
  border-left: 3px solid var(--manager-amber);
  border-radius: 0 10px 10px 0;
  background: rgba(120, 53, 15, 0.15);
  padding: 11px 12px;
}

.driver-manager-why span {
  color: #fde68a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.driver-manager-why strong {
  line-height: 1.35;
}

.driver-manager-performance-group {
  overflow: hidden;
  border: 1px solid var(--manager-line);
  border-radius: 13px;
}

.driver-manager-performance-group > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--manager-line);
  padding: 11px 12px;
}

.driver-manager-performance-group > div:first-child span {
  color: var(--muted);
  font-size: 0.78rem;
}

.driver-manager-performance-group > div:last-child {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--manager-line);
}

.driver-manager-performance-group > div:last-child > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  background: #111c2f;
  padding: 10px;
}

.driver-manager-performance-group > div:last-child span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.driver-manager-performance-group > div:last-child strong {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.driver-manager-release-button {
  min-height: 48px !important;
  border: 0;
  background: transparent;
  color: #bfdbfe;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.driver-manager-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.driver-manager-stepper > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border: 1px solid var(--manager-line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  text-align: center;
}

.driver-manager-stepper b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.driver-manager-stepper > span.is-active {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(30, 64, 175, 0.28);
  color: #dbeafe;
}

.driver-manager-stepper > span.is-complete {
  border-color: rgba(52, 211, 153, 0.44);
  color: #a7f3d0;
}

.driver-manager-step {
  display: grid;
  gap: 16px;
  border: 1px solid var(--manager-line);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.5);
  padding: 18px;
}

.driver-manager-step-heading > span {
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.driver-manager-step-heading h3 {
  margin: 5px 0 0;
  font-size: 1.28rem;
}

.driver-manager-step-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.driver-manager-contact-actions,
.driver-manager-choice-grid,
.driver-manager-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.driver-manager-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px !important;
  border: 1px solid var(--manager-line);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.62);
  color: var(--ink-strong);
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.driver-manager-contact-button.is-whatsapp {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(5, 46, 22, 0.34);
  color: #bbf7d0;
}

.driver-manager-contact-button.is-call {
  border-color: rgba(96, 165, 250, 0.58);
  background: rgba(30, 64, 175, 0.3);
  color: #dbeafe;
}

.driver-manager-contact-button.is-selected {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.24);
}

.driver-manager-step-action {
  width: 100%;
  min-height: 54px !important;
}

.driver-manager-choice-grid button {
  min-height: 58px;
  border: 1px solid var(--manager-line);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.62);
  color: var(--ink-strong);
  padding: 11px 12px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.3;
  cursor: pointer;
}

.driver-manager-choice-grid button.is-selected {
  border-color: rgba(96, 165, 250, 0.82);
  background: rgba(30, 64, 175, 0.38);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.16);
  color: #eff6ff;
}

.driver-manager-plan-branch {
  display: grid;
  gap: 15px;
}

.driver-manager-choice-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--manager-line);
  border-radius: 14px;
  padding: 14px;
}

.driver-manager-choice-fieldset legend {
  padding: 0 6px;
  color: var(--ink-strong);
  font-weight: 900;
}

.driver-manager-choice-fieldset > p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.8rem;
}

.driver-manager-date-field,
.driver-manager-note-control label {
  display: grid;
  gap: 7px;
  color: var(--ink-strong);
  font-weight: 800;
}

.driver-manager-date-field input,
.driver-manager-note-control textarea {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
}

.driver-manager-note-control {
  border: 1px solid var(--manager-line);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.36);
  padding: 0 14px;
}

.driver-manager-note-control summary {
  min-height: 50px;
  align-content: center;
  color: #bfdbfe;
  font-weight: 850;
  cursor: pointer;
}

.driver-manager-note-control[open] {
  padding-bottom: 14px;
}

.driver-manager-review {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 13px;
  background: rgba(6, 78, 59, 0.22);
  padding: 13px;
}

.driver-manager-review span {
  color: #6ee7b7;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.driver-manager-review strong {
  color: #d1fae5;
  line-height: 1.4;
}

.driver-manager-modal-actions {
  position: sticky;
  z-index: 2;
  bottom: -18px;
  margin: 0 -18px -18px;
  border-top: 1px solid var(--manager-line);
  background: rgba(17, 28, 47, 0.96);
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
}

.driver-manager-modal-actions > * {
  width: 100%;
  min-height: 54px !important;
}

.driver-manager-modal-actions .primary-button,
.driver-manager-step-action.primary-button {
  margin-top: 0;
}

.driver-manager-success {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 360px;
  align-content: center;
  text-align: center;
}

.driver-manager-success-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(52, 211, 153, 0.58);
  border-radius: 50%;
  background: rgba(6, 78, 59, 0.3);
  color: #6ee7b7;
  font-size: 2rem;
  font-weight: 950;
}

.driver-manager-success > span:not(.driver-manager-success-icon) {
  color: #6ee7b7;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.driver-manager-success h3 {
  max-width: 460px;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}

@keyframes manager-shimmer {
  to { background-position: -220% 0; }
}

@media (max-width: 700px) {
  .driver-manager-page {
    padding-inline: max(10px, env(safe-area-inset-left));
  }

  .driver-manager-page .driver-manager-page-heading {
    align-items: stretch;
    padding: 18px 16px;
  }

  .driver-manager-page .driver-manager-page-heading,
  .driver-manager-page .driver-manager-overview-heading,
  .driver-manager-page .driver-manager-item-header,
  .driver-manager-page .driver-manager-status-row {
    flex-direction: column;
  }

  .driver-manager-page .driver-manager-portal-link {
    width: 100%;
  }

  .driver-manager-page .driver-manager-overview {
    margin-inline: 10px;
    padding: 16px;
  }

  .driver-manager-page .driver-manager-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-manager-page .driver-manager-tabs {
    grid-template-columns: repeat(3, max-content);
  }

  .driver-manager-page .driver-manager-status-row {
    align-items: flex-start;
  }

  .driver-manager-page .driver-manager-status-row .driver-manager-trend {
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  .driver-manager-page .driver-manager-gap {
    width: fit-content;
  }

  .driver-manager-modal {
    place-items: end center;
    padding: max(8px, env(safe-area-inset-top)) 0 0;
  }

  .driver-manager-modal-card {
    width: 100%;
    max-height: 100%;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
  }

  .driver-manager-modal-header {
    padding: 16px;
  }

  .driver-manager-modal-body {
    padding: 14px;
  }

  .driver-manager-stepper {
    gap: 5px;
  }

  .driver-manager-stepper > span {
    display: grid;
    gap: 4px;
    min-height: 56px;
    padding: 5px;
    font-size: 0.64rem;
  }

  .driver-manager-stepper b {
    margin: auto;
  }

  .driver-manager-performance-group > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-manager-step {
    padding: 14px;
  }

  .driver-manager-choice-grid.compact {
    grid-template-columns: 1fr;
  }

  .driver-manager-modal-actions {
    bottom: -14px;
    margin: 0 -14px -14px;
    padding-inline: 14px;
  }
}

@media (max-width: 390px) {
  .driver-manager-page .driver-manager-fields,
  .driver-manager-contact-actions,
  .driver-manager-choice-grid,
  .driver-manager-modal-actions {
    grid-template-columns: 1fr;
  }

  .driver-manager-page .driver-manager-metrics article {
    padding: 12px;
  }

  .driver-manager-modal-header {
    gap: 8px;
  }

  .driver-manager-modal .driver-manager-close-button {
    min-width: 62px;
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .driver-manager-page .driver-manager-progress-track > span {
    transition: none;
  }

  .driver-manager-page .driver-manager-loading-card span {
    animation: none;
  }
}

/* Driver and Manager role navigation. The same controls become a compact
   desktop toolbar and a thumb-friendly phone bar without changing either
   portal's authenticated content flow. */
.driver-role-navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(136px, auto));
  justify-content: end;
  gap: 8px;
  margin: 0 18px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.82)),
    rgba(15, 23, 42, 0.78);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.22);
  padding: 8px;
}

.driver-role-navigation-driver {
  grid-template-columns: repeat(2, minmax(136px, auto));
}

.driver-role-navigation-driver.has-manager-return {
  grid-template-columns: repeat(3, minmax(136px, auto));
}

.driver-role-navigation > :is(a, button) {
  appearance: none;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
  padding: 8px 13px;
  color: #cbd5e1;
  font: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.driver-role-navigation > :is(a, button) > span {
  flex: 0 0 auto;
  color: #93c5fd;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.driver-role-navigation > :is(a, button) > strong {
  min-width: 0;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.driver-role-navigation > [aria-current="page"] {
  border-color: rgba(96, 165, 250, 0.7);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.48), rgba(30, 64, 175, 0.28));
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.14);
  color: #eff6ff;
}

.driver-role-navigation > :is(a, button):hover {
  border-color: rgba(96, 165, 250, 0.72);
  background-color: rgba(30, 64, 175, 0.28);
  color: #f8fafc;
}

.driver-role-navigation > :is(a, button):active {
  transform: translateY(1px);
}

.driver-role-navigation > :is(a, button):focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.58);
  outline-offset: 2px;
}

.driver-role-navigation > button:disabled,
.driver-role-navigation > button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
  transform: none;
}

.driver-manager-step-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid var(--manager-line);
  padding-top: 14px;
}

.driver-manager-step-navigation .secondary-button {
  width: min(100%, 190px);
  min-height: 48px;
  margin: 0;
}

@media (max-width: 700px) {
  .driver-portal-page,
  .driver-manager-page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .driver-role-navigation {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: auto;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 -14px 34px rgba(2, 6, 23, 0.44);
    padding:
      8px
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    backdrop-filter: blur(14px);
  }

  .driver-role-navigation-driver {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-role-navigation-driver.has-manager-return {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .driver-role-navigation > :is(a, button) {
    min-height: 52px;
    gap: 5px;
    padding: 6px 7px;
  }

  .driver-role-navigation > :is(a, button) > span {
    font-size: 1rem;
  }

  .driver-role-navigation > :is(a, button) > strong {
    font-size: 0.72rem;
  }

  body.driver-manager-modal-open .driver-role-navigation,
  body.driver-portal-modal-open .driver-role-navigation {
    display: none;
  }

  .driver-manager-step-navigation .secondary-button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .driver-role-navigation {
    gap: 5px;
    padding-right: max(7px, env(safe-area-inset-right));
    padding-left: max(7px, env(safe-area-inset-left));
  }

  .driver-role-navigation > :is(a, button) {
    gap: 4px;
    padding-inline: 5px;
  }

  .driver-role-navigation > :is(a, button) > strong {
    font-size: 0.67rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .driver-role-navigation > :is(a, button) {
    transition: none;
  }
}

/* Monthly 30% ID Selection: phone-first batch rankings and safe one-tap awards. */
.thirty-id-page {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding-bottom: calc(42px + env(safe-area-inset-bottom));
}

.thirty-id-header {
  gap: 12px;
}

.thirty-id-header .dashboard-title {
  min-width: 0;
}

.thirty-id-header h1 {
  overflow-wrap: anywhere;
}

.thirty-id-hero,
.thirty-id-source,
.thirty-id-outstanding,
.thirty-id-empty {
  box-sizing: border-box;
  border-radius: 14px;
  padding: 22px;
}

.thirty-id-hero {
  overflow: hidden;
  border-color: rgba(59, 130, 246, 0.34);
  background:
    radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.2), transparent 42%),
    linear-gradient(150deg, rgba(30, 41, 59, 0.98), rgba(17, 24, 39, 0.98));
}

.thirty-id-hero-heading {
  display: grid;
  gap: 18px;
}

.thirty-id-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #60a5fa;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.thirty-id-hero-heading h2,
.thirty-id-source h2,
.thirty-id-outstanding h2,
.thirty-id-empty h2,
.thirty-id-dialog-card h2 {
  margin: 0;
  color: var(--ink-strong);
}

.thirty-id-hero-heading p,
.thirty-id-source p,
.thirty-id-outstanding-heading p,
.thirty-id-empty p,
.thirty-id-dialog-card > p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.thirty-id-month-field,
.thirty-id-reason-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.83rem;
  font-weight: 750;
}

.thirty-id-month-field input,
.thirty-id-reason-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.8);
  color: var(--ink-strong);
  padding: 11px 13px;
  font: inherit;
}

.thirty-id-month-field small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 500;
}

.thirty-id-month-field input:disabled {
  opacity: 1;
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(15, 23, 42, 0.62);
  color: #dbeafe;
  cursor: default;
  -webkit-text-fill-color: #dbeafe;
}

.thirty-id-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.thirty-id-summary > div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.58);
  padding: 12px;
}

.thirty-id-summary span,
.thirty-id-performance span {
  display: block;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thirty-id-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 1.4rem;
}

.thirty-id-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.thirty-id-source-copy {
  min-width: 0;
}

.thirty-id-source-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
  font-size: 1.25rem;
  font-weight: 900;
}

.thirty-id-source[data-state="ready"] {
  border-color: rgba(52, 211, 153, 0.36);
}

.thirty-id-source[data-state="ready"] .thirty-id-source-icon {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

.thirty-id-source[data-state="missing"],
.thirty-id-source[data-state="error"] {
  border-color: rgba(251, 191, 36, 0.36);
}

.thirty-id-source[data-state="missing"] .thirty-id-source-icon,
.thirty-id-source[data-state="error"] .thirty-id-source-icon {
  background: rgba(251, 191, 36, 0.14);
  color: #fcd34d;
}

.thirty-id-source-actions {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.thirty-id-source-actions :is(.primary-button, .secondary-button) {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
}

.thirty-id-source-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.thirty-id-source-meta > div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.58);
  padding: 10px;
}

.thirty-id-source-meta .thirty-id-source-file {
  grid-column: 1 / -1;
}

.thirty-id-source-meta :is(span, strong, small) {
  display: block;
}

.thirty-id-source-meta span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thirty-id-source-meta strong {
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.thirty-id-source-meta small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.thirty-id-upload-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  width: 100%;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding-top: 14px;
}

.thirty-id-upload-file,
.thirty-id-replace-reason {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.83rem;
  font-weight: 800;
}

.thirty-id-upload-file > small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 1.45;
}

.thirty-id-upload-file input[type="file"],
.thirty-id-replace-reason textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.8);
  color: var(--ink-strong);
  padding: 7px;
  font: inherit;
}

.thirty-id-upload-file input[type="file"]::file-selector-button,
.thirty-id-upload-file input[type="file"]::-webkit-file-upload-button {
  min-height: 44px;
  margin: -3px 10px -3px -3px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  padding: 8px 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.thirty-id-upload-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 11px;
  background: rgba(30, 64, 175, 0.09);
  color: #dbeafe;
  padding: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
}

.thirty-id-upload-confirm input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #2563eb;
}

.thirty-id-upload-actions {
  display: grid;
  gap: 8px;
}

.thirty-id-upload-actions :is(.primary-button, .secondary-button) {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin: 0;
}

.thirty-id-replace-review {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 12px;
  background: rgba(120, 53, 15, 0.17);
  padding: 14px;
}

.thirty-id-replace-review h3,
.thirty-id-replace-review p {
  margin: 0;
}

.thirty-id-replace-review h3 {
  color: #fef3c7;
  font-size: 1rem;
}

.thirty-id-replace-review p {
  color: #fde68a;
  font-size: 0.79rem;
  line-height: 1.5;
}

.thirty-id-replace-review .thirty-id-replace-file {
  color: #fef3c7;
}

.thirty-id-replace-file strong {
  overflow-wrap: anywhere;
}

.thirty-id-replace-reason textarea {
  min-height: 92px;
  resize: vertical;
}

.thirty-id-upload-issues {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 11px;
  background: rgba(127, 29, 29, 0.2);
  color: #fecaca;
  padding: 12px;
}

.thirty-id-upload-issues > strong {
  color: #fee2e2;
}

.thirty-id-upload-issues details {
  border-top: 1px solid rgba(248, 113, 113, 0.22);
  padding-top: 8px;
}

.thirty-id-upload-issues summary {
  min-height: 44px;
  color: #fecaca;
  font-size: 0.79rem;
  font-weight: 800;
  line-height: 44px;
  cursor: pointer;
}

.thirty-id-upload-issues ul {
  margin: 2px 0 5px;
  padding-left: 20px;
}

.thirty-id-upload-issues li {
  margin-top: 5px;
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.thirty-id-upload-message {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.thirty-id-notice {
  margin: var(--section-gap) 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.9);
  color: var(--ink);
  padding: 13px 15px;
  line-height: 1.45;
}

.thirty-id-notice.is-success {
  border-color: rgba(52, 211, 153, 0.44);
  background: rgba(6, 78, 59, 0.28);
  color: #a7f3d0;
}

.thirty-id-notice.is-error {
  border-color: rgba(248, 113, 113, 0.44);
  background: rgba(127, 29, 29, 0.25);
  color: #fecaca;
}

.thirty-id-notice.is-warning {
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(120, 53, 15, 0.24);
  color: #fde68a;
}

.thirty-id-outstanding {
  display: grid;
  gap: 15px;
  margin-top: var(--section-gap);
  border-color: rgba(251, 191, 36, 0.42);
  background:
    radial-gradient(circle at 100% 0, rgba(245, 158, 11, 0.13), transparent 40%),
    rgba(31, 41, 55, 0.96);
}

.thirty-id-outstanding-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.thirty-id-outstanding-heading > div,
.thirty-id-outstanding-item-heading > div {
  min-width: 0;
}

.thirty-id-outstanding-count {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid rgba(251, 191, 36, 0.36);
  border-radius: 50%;
  background: rgba(120, 53, 15, 0.28);
  color: #fde68a;
  font-size: 1.05rem;
}

.thirty-id-outstanding-list {
  display: grid;
  gap: 10px;
}

.thirty-id-outstanding-item {
  display: grid;
  gap: 11px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-left: 4px solid #60a5fa;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.62);
  padding: 13px;
}

.thirty-id-outstanding-item.is-pending {
  border-left-color: #fbbf24;
}

.thirty-id-outstanding-item.is-overdue {
  border-left-color: #f87171;
}

.thirty-id-outstanding-item-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.thirty-id-outstanding-item-heading span {
  display: block;
  color: #93c5fd;
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.thirty-id-outstanding-item-heading h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.thirty-id-outstanding-item-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.thirty-id-outstanding-status {
  justify-self: end;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  color: #bfdbfe;
  padding: 7px 9px;
  font-size: 0.69rem;
  font-weight: 850;
  white-space: nowrap;
}

.thirty-id-outstanding-status.is-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fde68a;
}

.thirty-id-outstanding-status.is-overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #fecaca;
}

.thirty-id-outstanding-guidance {
  margin: 0;
  color: #dbeafe;
  font-size: 0.79rem;
  line-height: 1.5;
}

.thirty-id-outstanding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thirty-id-outstanding-actions .secondary-button {
  width: auto;
  min-height: 44px;
  margin: 0;
}

.thirty-id-batches {
  display: grid;
  gap: 14px;
  margin-top: var(--section-gap);
}

.thirty-id-batch {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(31, 41, 55, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.thirty-id-batch > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  cursor: pointer;
  list-style: none;
  padding: 13px 14px;
}

.thirty-id-batch > summary::-webkit-details-marker {
  display: none;
}

.thirty-id-batch > summary:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: -3px;
}

.thirty-id-batch-chevron {
  color: #93c5fd;
  font-size: 1.65rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.thirty-id-batch[open] .thirty-id-batch-chevron {
  transform: rotate(90deg);
}

.thirty-id-batch summary strong,
.thirty-id-batch summary small {
  display: block;
}

.thirty-id-batch summary strong {
  color: var(--ink-strong);
  font-size: 1rem;
}

.thirty-id-batch summary small {
  margin-top: 3px;
  color: var(--muted);
}

.thirty-id-batch-selected {
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  padding: 6px 9px;
  font-size: 0.71rem;
  font-weight: 800;
  white-space: nowrap;
}

.thirty-id-candidate-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.thirty-id-candidate {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid rgba(55, 65, 81, 0.72);
  padding: 14px 12px;
}

.thirty-id-candidate:last-child {
  border-bottom: 0;
}

.thirty-id-candidate.is-selected {
  box-shadow: inset 4px 0 #34d399;
  background: rgba(6, 78, 59, 0.14);
}

.thirty-id-candidate.has-history:not(.is-selected) {
  box-shadow: inset 4px 0 #f59e0b;
  background: rgba(120, 53, 15, 0.08);
}

.thirty-id-rank {
  display: grid;
  align-content: start;
  justify-content: center;
  grid-template-columns: auto auto;
  gap: 1px;
  min-height: 42px;
  border-radius: 11px;
  background: rgba(59, 130, 246, 0.13);
  color: #bfdbfe;
  padding: 9px 5px;
}

.thirty-id-rank span {
  font-size: 0.72rem;
  font-weight: 750;
}

.thirty-id-rank strong {
  font-size: 1.05rem;
  line-height: 1;
}

.thirty-id-candidate-main,
.thirty-id-driver-heading > div {
  min-width: 0;
}

.thirty-id-driver-heading {
  display: grid;
  gap: 9px;
}

.thirty-id-driver-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.thirty-id-driver-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.thirty-id-recommendation {
  justify-self: start;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #bfdbfe;
  padding: 5px 8px;
  font-size: 0.67rem;
  font-weight: 850;
}

.thirty-id-recommendation:is(.is-recommended, .is-success, .is-best) {
  border-color: rgba(52, 211, 153, 0.32);
  background: rgba(16, 185, 129, 0.13);
  color: #a7f3d0;
}

.thirty-id-recommendation:is(.is-warning, .is-recent, .is-history) {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(245, 158, 11, 0.13);
  color: #fde68a;
}

.thirty-id-performance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.thirty-id-performance > div {
  min-width: 0;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.58);
  padding: 9px;
}

.thirty-id-performance > div:first-child {
  grid-column: 1 / -1;
}

.thirty-id-performance strong {
  display: block;
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 0.87rem;
  overflow-wrap: anywhere;
}

.thirty-id-performance > div:first-child strong {
  color: #6ee7b7;
  font-size: 1.08rem;
}

.thirty-id-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.thirty-id-badge {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.66rem;
  font-weight: 800;
}

.thirty-id-badge.selected {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

.thirty-id-badge.history {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

.thirty-id-badge.quiet {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

.thirty-id-select-button {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 13px 0 0;
}

.thirty-id-selected-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}

.thirty-id-selected-actions .secondary-button {
  width: auto;
  min-height: 44px;
  margin: 0;
}

.thirty-id-sms-state {
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 0.69rem;
  font-weight: 850;
}

.thirty-id-sms-state.is-sent {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

.thirty-id-sms-state.is-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.thirty-id-sms-state:is(.is-pending, .is-unknown) {
  background: rgba(59, 130, 246, 0.14);
  color: #bfdbfe;
}

.thirty-id-cancel-link {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  padding: 8px 2px;
  font: inherit;
  font-size: 0.73rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}

.thirty-id-inline-error {
  margin: 8px 0 0;
  color: #fca5a5;
  font-size: 0.76rem;
  line-height: 1.4;
}

.thirty-id-blocked {
  display: grid;
  gap: 3px;
  margin-top: 11px;
  border-left: 3px solid rgba(148, 163, 184, 0.46);
  padding: 4px 0 4px 10px;
}

.thirty-id-blocked strong {
  color: #cbd5e1;
  font-size: 0.75rem;
}

.thirty-id-blocked span {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.4;
}

.thirty-id-blocked a {
  justify-self: start;
  min-height: 44px;
  margin-top: 5px;
}

.thirty-id-empty {
  display: grid;
  justify-items: center;
  margin-top: var(--section-gap);
  text-align: center;
  padding-block: 34px;
}

.thirty-id-empty > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.13);
  color: #93c5fd;
  font-size: 1.3rem;
}

.thirty-id-dialog {
  box-sizing: border-box;
  width: min(620px, calc(100% - 20px));
  max-height: min(880px, calc(100dvh - 20px));
  margin: auto;
  overflow: auto;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 18px;
  background: #111827;
  color: var(--ink);
  padding: 0;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
}

.thirty-id-dialog::backdrop {
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(5px);
}

.thirty-id-dialog-card {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 22px 17px max(18px, env(safe-area-inset-bottom));
}

.thirty-id-dialog-card > :is(h2, p) {
  padding-right: 38px;
}

.thirty-id-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(31, 41, 55, 0.9);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
}

.thirty-id-confirm-driver {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 12px;
  background: rgba(30, 64, 175, 0.1);
  padding: 13px;
}

.thirty-id-confirm-driver span {
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.thirty-id-confirm-driver strong {
  color: var(--ink-strong);
  font-size: 1.05rem;
}

.thirty-id-confirm-driver small {
  color: var(--muted);
}

.thirty-id-confirm-details {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.thirty-id-confirm-details > div {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
}

.thirty-id-confirm-details > div:last-child {
  border-bottom: 0;
}

.thirty-id-confirm-details :is(dt, dd) {
  margin: 0;
}

.thirty-id-confirm-details dt {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
}

.thirty-id-confirm-details dd {
  color: var(--ink-strong);
  font-size: 0.87rem;
  overflow-wrap: anywhere;
}

.thirty-id-confirm-details dd strong,
.thirty-id-confirm-details dd small {
  display: block;
}

.thirty-id-confirm-details dd strong {
  color: #6ee7b7;
}

.thirty-id-confirm-details dd small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}

.thirty-id-sms-preview {
  border-left: 3px solid #60a5fa;
  border-radius: 0 10px 10px 0;
  background: rgba(30, 64, 175, 0.1);
  padding: 11px 13px;
}

.thirty-id-sms-preview span {
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.thirty-id-sms-preview p {
  margin: 6px 0 0;
  color: #dbeafe;
  font-size: 0.82rem;
  line-height: 1.5;
}

.thirty-id-warning {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(251, 191, 36, 0.36);
  border-radius: 11px;
  background: rgba(120, 53, 15, 0.18);
  padding: 12px;
}

.thirty-id-warning strong {
  color: #fde68a;
}

.thirty-id-warning span {
  color: #fef3c7;
  font-size: 0.79rem;
  line-height: 1.45;
}

.thirty-id-reason-field textarea {
  resize: vertical;
}

.thirty-id-dialog-actions {
  display: grid;
  gap: 9px;
}

.thirty-id-dialog-actions :is(.primary-button, .secondary-button) {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin: 0;
}

.thirty-id-dialog-actions .danger-action {
  background: #b91c1c;
}

.thirty-id-dialog-actions .danger-action:hover {
  background: #dc2626;
}

@media (min-width: 700px) {
  .thirty-id-page {
    width: min(1180px, calc(100% - 42px));
  }

  .thirty-id-hero-heading {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.32fr);
    align-items: start;
  }

  .thirty-id-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .thirty-id-source {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .thirty-id-source-actions {
    grid-column: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .thirty-id-source-actions :is(.primary-button, .secondary-button) {
    width: auto;
    min-width: 112px;
  }

  .thirty-id-source-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .thirty-id-source-meta .thirty-id-source-file {
    grid-column: span 2;
  }

  .thirty-id-upload-actions {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  .thirty-id-upload-actions :is(.primary-button, .secondary-button) {
    width: auto;
    min-width: 190px;
  }

  .thirty-id-candidate {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 15px;
    padding: 17px;
  }

  .thirty-id-driver-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .thirty-id-recommendation {
    justify-self: end;
  }

  .thirty-id-performance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .thirty-id-performance > div:first-child {
    grid-column: auto;
  }

  .thirty-id-select-button {
    width: auto;
    min-width: 180px;
  }

  .thirty-id-confirm-details > div {
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: start;
  }

  .thirty-id-dialog-card {
    padding: 28px;
  }

  .thirty-id-dialog-actions {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 520px) {
  .thirty-id-page {
    width: auto;
    max-width: 1180px;
    margin-inline-start: max(16px, env(safe-area-inset-left));
    margin-inline-end: max(16px, env(safe-area-inset-right));
  }

  .thirty-id-hero,
  .thirty-id-source,
  .thirty-id-outstanding,
  .thirty-id-empty {
    padding: 18px 16px;
  }

  .thirty-id-empty {
    padding-block: 30px;
  }

  .thirty-id-dialog {
    width: calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .thirty-id-header {
    align-items: stretch;
  }

  .thirty-id-header .warehouse-back-button {
    width: 100%;
  }

  .thirty-id-outstanding-heading,
  .thirty-id-outstanding-item-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .thirty-id-outstanding-count,
  .thirty-id-outstanding-status {
    justify-self: start;
  }

  .thirty-id-outstanding-actions .secondary-button {
    width: 100%;
  }

  .thirty-id-batch > summary {
    padding-inline: 11px;
  }

  .thirty-id-batch-selected {
    max-width: 90px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thirty-id-batch-chevron {
    transition: none;
  }
}

@media (max-width: 1199px) {
  .targets-filter-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .targets-bulk-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .targets-bulk-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .targets-bulk-form,
  .targets-bulk-confirm-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .targets-filter-buttons,
  .targets-bulk-toolbar-actions,
  .targets-bulk-form,
  .targets-bulk-confirm-form,
  .targets-bulk-review-row {
    grid-template-columns: 1fr;
  }

  .targets-filter-panel:not(.hidden) {
    position: fixed;
    z-index: 1200;
    inset: auto 0 0;
    max-height: min(82dvh, 760px);
    overflow: auto;
    border: 1px solid rgba(96, 165, 250, 0.44);
    border-radius: 18px 18px 0 0;
    background: #0f172a;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.46);
    padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .targets-filter-groups {
    grid-template-columns: 1fr;
  }

  .targets-filter-group {
    max-height: none;
  }

  .targets-bulk-toolbar {
    margin: 0 14px;
  }

  .targets-bulk-review {
    padding: 14px;
  }

  .targets-bulk-review-change {
    justify-content: flex-start;
  }
}