/* DCR Flights — Design System CSS
   WCAG AAA compliant color palette (tiered: brand + text-safe)
   See docs/design-system.md for specifications */

/* ===== Light Mode (default) ===== */
:root {
  /* Brand colors — decorative, accents, gradients, large UI elements */
  --color-brand-blue: #0B72FF;
  --color-brand-orange: #FF9B00;

  /* AAA text-safe variants — for text on white/light backgrounds */
  --color-blue-text: #0050B5;     /* ~7.2:1 on white */
  --color-orange-text: #8B4600;   /* ~7.1:1 on white */

  /* Text */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #6B6B6B;

  /* Backgrounds */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-card: #FFFFFF;

  /* Borders & focus */
  --color-border: #D1D1D1;
  --color-border-focus: #0B72FF;

  /* Status */
  --color-success: #1B6D2F;
  --color-error: #9B1C1C;
  --color-warning: #8B4600;

  /* Badges */
  --color-precheck-bg: #1B6D2F;
  --color-precheck-text: #FFFFFF;
  --color-ssss-bg: #9B1C1C;
  --color-ssss-text: #FFFFFF;

  /* Buttons */
  --color-button-primary-bg: #0050B5;
  --color-button-primary-text: #FFFFFF;
  --color-button-hover-bg: #0B72FF;

  /* Card shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(11, 114, 255, 0.1);

  /* Gradient */
  --gradient-brand: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-orange));
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-blue: #0B72FF;
    --color-brand-orange: #FF9B00;

    --color-blue-text: #6AADFF;   /* ~7.8:1 on #121212 */
    --color-orange-text: #FF9B00; /* ~8.9:1 on #121212 — brand orange works directly */

    --color-text-primary: #E8E8E8;
    --color-text-secondary: #B0B0B0;
    --color-text-muted: #8A8A8A;

    --color-bg-primary: #121212;
    --color-bg-secondary: #1E1E1E;
    --color-bg-card: #1E1E1E;

    --color-border: #3A3A3A;
    --color-border-focus: #0B72FF;

    --color-success: #66BB6A;
    --color-error: #EF5350;
    --color-warning: #FF9B00;

    --color-button-primary-bg: #0B72FF;
    --color-button-primary-text: #FFFFFF;
    --color-button-hover-bg: #3D8FFF;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 4px 12px rgba(11, 114, 255, 0.15);
  }
}

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== Skip Navigation ===== */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  text-decoration: none;
  font-weight: 700;
  z-index: 1000;
  border-radius: 0 0 0.25rem 0.25rem;
}

.skip-nav:focus {
  top: 0;
}

/* ===== Focus Indicators ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ===== Links ===== */
a {
  color: var(--color-blue-text);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* ===== Layout ===== */
.container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ===== Header ===== */
.site-header {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo img {
  display: block;
  height: 126px;
  width: auto;
}

.site-logo:hover {
  opacity: 0.85;
}

.site-logo:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* ===== Main Content ===== */
.site-main {
  padding: 1.5rem 0;
  flex: 1;
}

/* ===== Footer ===== */
.site-footer {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: 1rem 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-links a {
  color: var(--color-text-secondary);
}

/* ===== Messages ===== */
.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.messages li {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
}

.messages .success {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-success);
  color: var(--color-success);
}

.messages .error {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-error);
  color: var(--color-error);
}

.messages .warning {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.messages .info {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-brand-blue);
  color: var(--color-blue-text);
}

/* ===== Page Headings ===== */
h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 1.5rem 0 0.75rem 0;
  line-height: 1.3;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 1rem 0 0.5rem 0;
  line-height: 1.3;
}

/* ===== Flight List ===== */
.flight-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flight-row {
  display: grid;
  grid-template-columns: minmax(5rem, auto) 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background-color 0.15s ease;
}

.flight-row:hover {
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}

.flight-row:first-child {
  border-top: 1px solid var(--color-border);
}

.flight-name {
  font-weight: 700;
  color: var(--color-blue-text);
  white-space: nowrap;
}

.flight-route {
  font-weight: 600;
}

.flight-route .arrow {
  color: var(--color-text-muted);
  margin: 0 0.25rem;
}

.flight-date {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.flight-class {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* Responsive: stack flight rows on small screens */
@media (max-width: 40rem) {
  .flight-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
  }

  .flight-date {
    text-align: right;
  }
}

/* ===== Flight Detail ===== */
.flight-detail-header {
  margin-bottom: 1.5rem;
}

.flight-detail-header h1 {
  margin-bottom: 0.25rem;
}

.flight-route-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

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

.airport-iata {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-brand-blue);  /* Large text — brand blue passes AAA at ≥18pt */
  display: block;
}

.airport-name {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  display: block;
}

.route-arrow {
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

.detail-section {
  margin-bottom: 1.5rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.detail-item {
  padding: 0.5rem 0;
}

.detail-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.125rem;
}

.detail-value {
  display: block;
  color: var(--color-text-primary);
}

.detail-value.empty {
  color: var(--color-text-muted);
}

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.badge-status {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-status-completed {
  border-color: var(--color-success);
  color: var(--color-success);
}

.badge-status-scheduled {
  border-color: var(--color-brand-blue);
  color: var(--color-blue-text);
}

.badge-status-cancelled {
  border-color: var(--color-error);
  color: var(--color-error);
}

.badge-status-delayed {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.badge-status-diverted {
  border-color: var(--color-error);
  color: var(--color-error);
}

.badge-precheck {
  background-color: var(--color-precheck-bg);
  color: var(--color-precheck-text);
}

.badge-ssss {
  background-color: var(--color-ssss-bg);
  color: var(--color-ssss-text);
}

/* ===== Back Link ===== */
.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 1rem 0;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.pagination a:hover {
  background-color: var(--color-bg-secondary);
}

.pagination .current {
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border-color: var(--color-button-primary-bg);
  font-weight: 700;
}

.pagination .disabled {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: default;
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  line-height: 1.5;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-border-focus);
}

.form-errors {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primary {
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border-color: var(--color-button-primary-bg);
}

.btn-primary:hover {
  background-color: var(--color-button-hover-bg);
  border-color: var(--color-button-hover-bg);
}

.btn-secondary {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-border);
}

.btn-danger {
  background-color: var(--color-error);
  color: #FFFFFF;
  border-color: var(--color-error);
}

.btn-danger:hover {
  opacity: 0.9;
}

/* ===== Page Header ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.page-header h1 {
  margin-bottom: 0;
}

/* ===== Flight Actions ===== */
.flight-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ===== Form Layout ===== */
.flight-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.flight-form legend {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
  padding: 0 0.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.form-section-collapsible {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.form-section-collapsible summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-primary);
}

.form-section-collapsible fieldset {
  border: none;
  padding: 0.5rem 0;
  margin-bottom: 0;
}

/* ===== Confirm Delete ===== */
.confirm-delete {
  max-width: 36rem;
  margin: 1rem 0;
}

.confirm-delete p {
  margin-bottom: 0.75rem;
}

/* ===== Small Button Variant ===== */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* ===== Boarding Pass Card ===== */
.boarding-pass-card {
  border: 2px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1rem 0;
  background: var(--color-bg-card);
}

.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.bp-carrier {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-blue-text);
}

.bp-badges {
  display: flex;
  gap: 0.375rem;
}

.badge-fast-track {
  background-color: var(--color-brand-blue);
  color: #FFFFFF;
}

.bp-route {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.bp-iata {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand-blue);
}

.bp-arrow {
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

.bp-details {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 1rem 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 480px) {
  .bp-details {
    grid-template-columns: 1fr 1fr;
  }
}

.bp-field {
  min-width: 0;
}

.bp-field-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: 0.125rem;
}

.bp-field-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* Barcode */
.barcode-container {
  text-align: center;
  margin: 1rem 0;
}

.barcode-container img {
  max-width: 250px;
  height: auto;
  image-rendering: pixelated;
}

.barcode-formats {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.barcode-formats button {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}

.barcode-formats button.active {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border-color: var(--color-button-primary-bg);
}

/* Pass Tabs */
.pass-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.pass-tab {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}

.pass-tab.active {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border-color: var(--color-button-primary-bg);
}

/* BCBP Data Tables */
.bcbp-fields,
.pkpass-fields {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.875rem;
}

.bcbp-fields td,
.pkpass-fields td {
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.bcbp-fields td:first-child,
.pkpass-fields td:first-child {
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  width: 40%;
}

/* Upload Section */
.bp-upload-section {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.bp-upload-section summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-primary);
}

.bp-upload-form {
  margin-top: 0.75rem;
}

/* Text helpers */
.text-secondary {
  color: var(--color-text-secondary);
}

/* ===== Login Page ===== */
.login-container {
  max-width: 24rem;
  margin: 2rem auto;
}

.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-logo img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.login-container h1 {
  text-align: center;
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-secondary);
}

/* ===== PKPASS Upload ===== */
.pkpass-upload-form {
  max-width: 32rem;
}

/* ===== Conflict Resolution ===== */
.conflict-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.875rem;
}

.conflict-table th,
.conflict-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.conflict-table th {
  font-weight: 700;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.conflict-field-name {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.conflict-fieldset {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.conflict-fieldset legend {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  padding: 0 0.5rem;
}

.conflict-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conflict-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.conflict-option:hover {
  background-color: var(--color-bg-secondary);
}

.conflict-option input[type="radio"] {
  flex-shrink: 0;
}

.conflict-option-label {
  font-weight: 600;
  font-size: 0.875rem;
  min-width: 8rem;
}

.conflict-option-value {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* ===== Document Card ===== */
.document-card {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0.75rem 0;
  background: var(--color-bg-card);
}

.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.doc-title {
  font-weight: 700;
  color: var(--color-text-primary);
}

.badge-doc-type {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.doc-details {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.doc-actions {
  display: flex;
  gap: 0.5rem;
}

/* Document Upload Section */
.doc-upload-section {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.doc-upload-section summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-primary);
}

.doc-upload-form {
  margin-top: 0.75rem;
}

/* Document List Page */
.document-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.document-row:first-child {
  border-top: 1px solid var(--color-border);
}

.doc-row-title {
  font-weight: 700;
  color: var(--color-text-primary);
}

.doc-row-flight {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.doc-row-date {
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-size: 0.875rem;
}

.doc-row-actions {
  display: flex;
  gap: 0.375rem;
}

/* Document filter bar */
.doc-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 40rem) {
  .document-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
  }

  .doc-row-actions {
    grid-column: 1 / -1;
  }
}

/* ===== Inline PDF Preview ===== */
.bp-pdf-preview {
  margin: 1rem 0;
}

.bp-pdf-preview h3 {
  margin-bottom: 0.5rem;
}

.bp-pdf-object {
  width: 100%;
  height: 400px;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
}

/* ===== Page Picker ===== */
.page-picker-form {
  max-width: 64rem;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.page-thumb-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page-thumb-label:hover {
  border-color: var(--color-brand-blue);
}

.page-thumb-label:has(:checked) {
  border-color: var(--color-button-primary-bg);
  background-color: var(--color-bg-secondary);
}

.page-checkbox {
  margin-bottom: 0.5rem;
}

.page-thumb-img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.page-thumb-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ===== Utility ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ===== Flight Card (Phase 5) ===== */
.flight-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.flight-card {
  display: block;
  text-decoration: none;
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand-blue);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.flight-card:hover {
  border-top-color: var(--color-brand-blue);
  border-right-color: var(--color-brand-blue);
  border-bottom-color: var(--color-brand-blue);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

.flight-card:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Status-colored left borders via data attribute */
.flight-card[data-status="scheduled"] { border-left-color: var(--color-brand-blue); }
.flight-card[data-status="completed"] { border-left-color: var(--color-success); }
.flight-card[data-status="cancelled"] { border-left-color: var(--color-error); }
.flight-card[data-status="delayed"]   { border-left-color: var(--color-brand-orange); }
.flight-card[data-status="diverted"]  { border-left-color: var(--color-error); }

/* Card interior grid */
.flight-card-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
}

/* Row 1: Identity */
.flight-card-identity { grid-column: 1; grid-row: 1; }
.flight-card-date {
  grid-column: 2; grid-row: 1;
  text-align: right;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.flight-card-designator {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blue-text);
}

.flight-card-airline {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-left: 0.375rem;
}

/* Row 2: Route + Times */
.flight-card-route { grid-column: 1; grid-row: 2; }
.flight-card-times {
  grid-column: 2; grid-row: 2;
  text-align: right;
  white-space: nowrap;
}

.flight-card-iata {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-blue-text);
}

.flight-card-arrow {
  color: var(--color-text-muted);
  margin: 0 0.375rem;
  font-size: 1.25rem;
}

.flight-card-time-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.flight-card-time-arrow {
  color: var(--color-text-muted);
  margin: 0 0.25rem;
  font-size: 0.875rem;
}

.flight-card-duration {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-left: 0.5rem;
}

/* Row 3: Metadata */
.flight-card-meta {
  grid-column: 1 / -1; grid-row: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.flight-card-meta-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Metadata pills */
.flight-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

/* Boarding pass count */
.flight-card-bp-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Card responsive */
@media (max-width: 40rem) {
  .flight-card-inner {
    grid-template-columns: 1fr;
  }

  .flight-card-date {
    grid-column: 1;
    text-align: left;
  }

  .flight-card-times {
    grid-column: 1;
    text-align: left;
    margin-top: 0.25rem;
  }

  .flight-card-iata {
    font-size: 1.125rem;
    color: var(--color-blue-text);
  }

  .flight-card-meta {
    flex-wrap: wrap;
  }
}

/* ===== Search/Filter Toolbar (Phase 5) ===== */
.flight-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.search-wrapper {
  position: relative;
}

.search-wrapper::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-text-muted);
}

.search-input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(11, 114, 255, 0.15);
  outline: none;
}

.filter-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--color-bg-card);
  color: var(--color-text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234A4A4A'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

@media (prefers-color-scheme: dark) {
  .filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23B0B0B0'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  }
}

.filter-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(11, 114, 255, 0.15);
  outline: none;
}

.sort-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-left: auto;
  transition: background-color 0.15s ease;
}

.sort-toggle:hover {
  background: var(--color-bg-secondary);
}

.results-count {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  padding: 0.25rem 0;
}

@media (max-width: 40rem) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sort-toggle {
    margin-left: 0;
    align-self: flex-end;
  }
}

/* ===== Dashboard (Phase 5) ===== */
.stats-hero {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.stats-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

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

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand-blue);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.stats-hero-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 40rem) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-hero-actions {
    justify-content: center;
  }
}

/* Dashboard sections */
.dashboard-section {
  margin-bottom: 1.5rem;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.dashboard-section-header h2 { margin: 0; }

.dashboard-section-link {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Upcoming flights grid */
.upcoming-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.upcoming-grid > * {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Compact card variant */
.flight-card-compact {
  padding: 0.5rem 0.75rem;
  border-left-width: 2px;
}

.flight-card-compact .flight-card-inner {
  grid-template-rows: auto auto;
}

.flight-card-compact .flight-card-meta {
  display: none;
}

.flight-card-compact .flight-card-iata {
  font-size: 1.125rem;
  color: var(--color-blue-text);
}

/* Upcoming card orange accent */
.flight-card-upcoming {
  border-left-color: var(--color-brand-orange);
}

.flight-card-countdown {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-orange-text);
  white-space: nowrap;
}

/* Dashboard empty state */
.empty-state-compact {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* ===== Orange Accent Button (Phase 5) ===== */
.btn-accent {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-brand-orange);
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-orange-text);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Light mode hover: #8B4600 bg + white text = 7.1:1 AAA */
.btn-accent:hover {
  background: var(--color-orange-text);
  color: #FFFFFF;
  border-color: var(--color-orange-text);
}

/* Dark mode hover: tinted bg to maintain contrast */
@media (prefers-color-scheme: dark) {
  .btn-accent:hover {
    background: rgba(255, 155, 0, 0.15);
    color: var(--color-orange-text);
    border-color: var(--color-brand-orange);
  }
}

/* ===== Legal Pages ===== */
.legal-page {
  max-width: 48rem;
}

.legal-page h1 {
  margin-bottom: 1.5rem;
}

.legal-page h2 {
  margin-top: 2rem;
}

.legal-page p,
.legal-page ul,
.legal-page ol {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.5rem;
}

.legal-page li {
  margin-bottom: 0.25rem;
}

.lang-section {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* ===== Flight Detail Page (Redesign) ===== */

/* Breadcrumb */
.flight-breadcrumb {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.flight-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.flight-breadcrumb li {
  display: flex;
  align-items: center;
}

.flight-breadcrumb li + li::before {
  content: "/";
  margin: 0 0.375rem;
  color: var(--color-text-muted);
}

.flight-breadcrumb a {
  color: var(--color-blue-text);
}

.flight-breadcrumb li:last-child {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Zone 1: Hero Card */
.flight-detail-hero {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand-blue);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.flight-detail-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

.flight-detail-hero[data-status="scheduled"] { border-left-color: var(--color-brand-blue); }
.flight-detail-hero[data-status="completed"] { border-left-color: var(--color-success); }
.flight-detail-hero[data-status="cancelled"] { border-left-color: var(--color-error); }
.flight-detail-hero[data-status="delayed"]   { border-left-color: var(--color-brand-orange); }
.flight-detail-hero[data-status="diverted"]  { border-left-color: var(--color-error); }

/* Band 1: Identity */
.flight-detail-identity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.flight-detail-identity-info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

h1.flight-detail-designator {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-blue-text);
  margin: 0;
  line-height: 1.3;
}

.flight-detail-airline {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.flight-detail-operator {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.flight-detail-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Band 2: Route */
.flight-detail-route {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 0 0.75rem;
  text-align: center;
}

.flight-detail-airport {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5rem;
}

.flight-detail-iata {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-blue-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.flight-detail-airport-name {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 0.125rem;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-detail-terminal {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* Route connector */
.flight-detail-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.75rem;
  min-width: 5rem;
}

.flight-detail-duration-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.flight-detail-route-line {
  width: 5rem;
  height: 2px;
  background: var(--gradient-brand);
  position: relative;
  margin: 0.375rem 0;
}

.flight-detail-route-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--color-text-muted);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5A1.5 1.5 0 0011.5 2 1.5 1.5 0 0010 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5A1.5 1.5 0 0011.5 2 1.5 1.5 0 0010 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

/* Band 3: Time Strip */
.flight-detail-times {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.flight-detail-date {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.flight-detail-time-separator {
  color: var(--color-text-muted);
}

.flight-detail-time-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flight-detail-time {
  text-align: center;
}

.flight-detail-time-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: block;
}

.flight-detail-time-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  display: block;
}

.flight-detail-time-arrow {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.flight-detail-duration-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Actual times row (ATD/ATA) */
.flight-detail-times-actual,
.flight-detail-times-wheels {
  border-top: none;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
}

.flight-detail-times-actual .flight-detail-time-value,
.flight-detail-times-wheels .flight-detail-time-value {
  font-size: 1rem;
}

.flight-detail-times-row-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  min-width: 3.5rem;
  text-align: right;
}

/* Delay indicator badges */
.flight-delay-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
}

.flight-delay-badge.delay-late {
  background-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
}

.flight-delay-badge.delay-early {
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
}

.flight-delay-badge.delay-on-time {
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
}

/* Band 4: Metadata Pills */
.flight-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  padding-top: 0.75rem;
}

.flight-pill-long {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zone 2: Secondary Details */
.flight-detail-secondary {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.flight-detail-secondary .detail-grid {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* Shared quiet heading for zone cards */
.flight-detail-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: 0 0 0.75rem 0;
}

/* Zone 3a: Boarding Passes */
.flight-detail-boarding {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand-blue);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.flight-detail-boarding .boarding-pass-card {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0.75rem 0 0;
  background: transparent;
  border-radius: 0;
}

.flight-detail-boarding .pass-tab {
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
}

.flight-detail-boarding .barcode-container {
  background: var(--color-bg-secondary);
  border-radius: 0.5rem;
  padding: 1rem;
}

.flight-detail-boarding .barcode-formats button {
  border-radius: 9999px;
}

/* Zone 3b: Documents */
.flight-detail-documents {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.flight-detail-documents .document-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

/* Detail page responsive */
@media (max-width: 40rem) {
  .flight-detail-route {
    flex-direction: column;
    gap: 0.75rem;
  }

  .flight-detail-connector {
    padding-top: 0;
  }

  .flight-detail-route-line {
    width: 2px;
    height: 2rem;
  }

  .flight-detail-route-line::after {
    display: none;
  }

  .flight-detail-times {
    flex-direction: column;
    gap: 0.5rem;
  }

  .flight-detail-identity {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .flight-detail-pills {
    justify-content: center;
  }
}

/* ===== 2FA / Account Settings ===== */
.settings-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.settings-section h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-label {
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-value {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.settings-actions {
  display: flex;
  gap: 0.5rem;
}

.recovery-codes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.recovery-codes-list li {
  font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  text-align: center;
}

.secret-key {
  font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  word-break: break-all;
  user-select: all;
}

.warning-box {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-warning);
  border-radius: 0.25rem;
  background: var(--color-bg-secondary);
  color: var(--color-warning);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.info-box {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-brand-blue);
  border-radius: 0.25rem;
  background: var(--color-bg-secondary);
  color: var(--color-blue-text);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.passkey-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.passkey-name {
  font-weight: 600;
}

.twofa-links {
  margin-top: 1rem;
  font-size: 0.875rem;
  text-align: center;
}

.twofa-links a {
  display: inline-block;
  margin: 0.25rem 0;
}

/* HTMX Transitions */
.htmx-settling {
  transition: opacity 0.2s ease;
}

.htmx-added {
  opacity: 0;
}

.htmx-settling.htmx-added {
  opacity: 1;
}