/*
 * /public/ridecompanion.css
 * Styles for the Zypps Ride Companion Module
 * This file is additive and does not conflict with style.css or agentic.css
 *
 * --- MODIFIED (FEATURE 3) ---
 * - ADDED: New styles for `.flight-result-item-detailed` to support
 * the "maximalist" flight info display.
 *
 * --- MODIFIED (v6.1 - User "Maximalist" Request) ---
 * - REPLACED: The F3 styles for `.flight-result-item-detailed` have been
 * replaced with a new, more complex set of styles to match the
 * Delta screenshot, including styles for `.flight-routing`,
 * `.flight-endpoint`, `.flight-path`, etc.
 * - ADDED: `.pill-success` style for flight status.
 * - ADDED: `.flight-endpoint-header` style for "Departure" / "Arrival" headers.
 *
 * --- MODIFIED (11/11/2025 - User Bug Fix) ---
 * - ADDED: New styles for #companion-address-updater warning box.
 *
 * --- MODIFIED (11/11/2025 - Req 2: Confirmation Modal) ---
 * - ADDED: New styles for .modal-backdrop, .modal-content, and
 * .ride-summary-grid for the confirmation modal.
 */

/* ---------------------------------- */
/* -- Main Companion View Container -- */
/* ---------------------------------- */
.companion-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---------------------------------- */
/* -- Pillar 1: Travel Intent Card -- */
/* ---------------------------------- */
.companion-intent-card .grid {
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: end;
  gap: 1rem;
}

.companion-intent-card .grid label {
  margin: 0;
}

.companion-intent-card .grid button {
  padding: 0.5rem 1rem;
}

#companion-flight-search-results {
  margin-top: 1rem;
  max-height: 200px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.flight-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  gap: 1rem;
}

.flight-result-item:last-child {
  border-bottom: none;
}

.flight-result-item .flight-info {
  display: flex;
  flex-direction: column;
}

.flight-result-item .flight-info strong {
  font-weight: 600;
}

.flight-result-item .flight-info .muted {
  font-size: 0.9rem;
}

.flight-result-item button {
  flex-shrink: 0;
}

/* --- NEW (v6.1): Detailed Flight Result Item --- */
/* This replaces the old F3 styles */
.flight-result-item-detailed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  gap: 1rem;
}
.flight-result-item-detailed:last-child {
  border-bottom: none;
}

.flight-result-item-detailed .flight-info-detailed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%; /* Take full width */
}

.flight-result-item-detailed .flight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.flight-result-item-detailed .flight-header strong {
  font-weight: 700;
  font-size: 1.1rem;
}

.flight-result-item-detailed .flight-operator-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem; /* 0 vertical, 1rem horizontal */
  font-size: 0.9rem;
  margin-top: -0.25rem; /* Pull up under header */
}
.flight-result-item-detailed .flight-operator {
  font-style: italic;
}

.flight-result-item-detailed .flight-routing {
  display: flex;
  align-items: flex-start; /* Align to the top */
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}

.flight-result-item-detailed .flight-endpoint {
  display: flex;
  flex-direction: column;
  width: 120px; /* Give it space */
}
.flight-result-item-detailed .flight-endpoint:last-child {
  align-items: flex-end; /* Align arrival to the right */
}

/* --- ADDED (v6.1) --- */
.flight-result-item-detailed .flight-endpoint-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}

.flight-result-item-detailed .flight-time {
  font-size: 1.25rem;
  font-weight: 700;
}
.flight-result-item-detailed .flight-iata {
  font-size: 1rem;
  font-weight: 600;
}
.flight-result-item-detailed .flight-location,
.flight-result-item-detailed .flight-terminal {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.flight-result-item-detailed .flight-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* Grow to fill space */
  padding-top: 0.25rem;
}
.flight-result-item-detailed .flight-duration {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.flight-result-item-detailed .flight-path-line {
  width: 100%;
  border-bottom: 2px solid var(--border-subtle);
  position: relative;
  margin-top: 0.5rem;
}
.flight-result-item-detailed .flight-path-plane {
  position: absolute;
  left: 50%;
  top: -9px; /* Half of its height */
  transform: translateX(-50%);
  font-size: 1rem;
  background: var(--bg-canvas, white); /* Match page bg */
  padding: 0 0.25rem;
}

.flight-result-item-detailed button {
  flex-shrink: 0;
  align-self: center;
}


/* ---------------------------------- */
/* -- Pillar 2 & 4: My Trip View -- */
/* ---------------------------------- */
.companion-trip-view {
  /* This is a container, display: block is fine */
  display: block; 
}

.companion-trip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.companion-trip-header .flight-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.companion-trip-header .flight-summary-icon {
  font-size: 1.5rem;
}

.companion-trip-header .flight-summary-details {
  display: flex;
  flex-direction: column;
}

.companion-trip-header .flight-summary-details h3 {
  margin: 0;
}

.companion-trip-header .flight-summary-details .muted {
  margin: 0;
  font-size: 0.9rem;
}

.companion-trip-header .flight-summary-details .status-delayed {
  color: var(--warning-dark);
  font-weight: 700;
}

.companion-trip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .companion-trip-grid {
    grid-template-columns: 1fr;
  }
}

.companion-ride-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.companion-ride-card .card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: white;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.companion-ride-card .card-header h4 {
  margin: 0;
}

.companion-ride-card .card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.companion-ride-card .ride-detail-item {
  display: flex;
  flex-direction: column;
}

.companion-ride-card .ride-detail-item .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.companion-ride-card .ride-detail-item .value {
  font-size: 1rem;
  font-weight: 500;
}

.companion-ride-card .value-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Statuses */
.companion-ride-card .status-planned {
  color: var(--info);
  font-weight: 700;
}
.companion-ride-card .status-pending_dispatch {
  color: var(--warning);
  font-weight: 700;
}
.companion-ride-card .status-monitoring {
  color: var(--success);
  font-weight: 700;
}
.companion-ride-card .status-delayed {
  color: var(--warning-dark);
  font-weight: 700;
}
.companion-ride-card .status-matched {
  color: var(--success-dark);
  font-weight: 700;
}

/* Pillar 2: Rate Proposal Section */
.companion-rate-proposal {
  margin-top: 1rem;
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
}

.companion-rate-proposal .rate-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.companion-rate-proposal .rate-option {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: white;
}

.companion-rate-proposal .rate-option label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.companion-rate-proposal .rate-option-details {
  display: flex;
  flex-direction: column;
}

.companion-rate-proposal .rate-option-details strong {
  font-size: 1rem;
  font-weight: 600;
}

.companion-rate-proposal .rate-option-details .muted {
  font-size: 0.85rem;
}

.companion-rate-proposal .custom-rate-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem 0 0.5rem 1.75rem; /* Indent under the radio button */
}

/* ---------------------------------- */
/* -- Pillar 5: Local Mobility Card -- */
/* ---------------------------------- */
.companion-local-mobility {
  /* This overrides the 'display: none' from the original file */
  display: block; 
}

.companion-local-mobility .grid {
  /* This overrides the 3-column grid from the original file */
  grid-template-columns: 1fr; /* Default to 1-col for setup */
  gap: 1rem;
}

.companion-local-mobility .button-group {
  display: flex;
  gap: 0.75rem;
}

.companion-local-mobility .local-results-list {
  max-height: 200px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  margin-top: 0.5rem;
}

.companion-local-mobility .local-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  gap: 1rem;
}
.companion-local-mobility .local-result-item:last-child {
  border-bottom: none;
}

.companion-local-mobility .local-result-info {
  display: flex;
  flex-direction: column;
}

.companion-local-mobility .local-result-info strong {
  font-weight: 600;
}

.companion-local-mobility .local-result-info .muted {
  font-size: 0.9rem;
}

.companion-local-mobility .local-stay-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.companion-local-mobility .local-stay-header .local-stay-label {
  font-weight: 600;
}

.companion-local-mobility .local-stay-header .btn-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  margin-left: auto;
}

.companion-local-mobility #local-ride-view .grid {
  grid-template-columns: 1fr 1fr;
}

.companion-local-mobility .local-ride-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.companion-local-mobility .local-rides-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  background: white;
}

.companion-local-mobility .local-ride-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.companion-local-mobility .local-ride-item strong {
  font-weight: 600;
}

.companion-local-mobility .local-ride-item .muted {
  font-size: 0.9rem;
  display: block;
}

/* ---------------------------------- */
/* -- Pillar 6: Post-Trip Card -- */
/* ---------------------------------- */
.companion-trip-summary {
  /* This overrides the 'display: none' from the original file */
  display: block; 
}

.companion-trip-summary ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.companion-trip-summary li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.companion-trip-summary li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success-dark);
  font-weight: 700;
}
.companion-trip-summary li.error {
  color: var(--danger-dark);
}
.companion-trip-summary li.error::before {
  content: 'X';
  color: var(--danger-dark);
}
.companion-trip-summary li.muted {
  color: var(--text-muted);
}
.companion-trip-summary li.muted::before {
  content: 'i';
  font-style: italic;
  font-weight: 700;
  color: var(--text-muted);
}


/* ---------------------------------- */
/* -- Driver Companion View -- */
/* ---------------------------------- */
.companion-driver-view .list-item {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.companion-driver-view .list-item .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.companion-driver-view .list-item .flight-details {
  font-size: 1.1rem;
  font-weight: 600;
}

.companion-driver-view .list-item .trip-time {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.companion-driver-view .list-item .rate-proposal {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.companion-driver-view .list-item .rate-proposal .label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.companion-driver-view .list-item .rate-proposal .value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.companion-driver-view .list-item .actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* ---------------------------------- */
/* -- NEW: Status Pill Styles -- */
/* (Required for Pillar 5 local ride list) */
/* ---------------------------------- */
.pill{
  border-radius:999px;
  padding:.125rem .5rem;
  border:1px solid #e5e7eb;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}
.pill-planned{ background:#E0F2FE; color: #0C4A6E; border-color: #BAE6FD; }
.pill-pending_dispatch{ background:#FEF3C7; color: #92400E; border-color: #FDE68A; }
.pill-matched{ background:#D1FAE5; color: #065F46; border-color: #A7F3D0; }
.pill-success{ background:#D1FAE5; color: #065F46; border-color: #A7F3D0; } /* ADDED (v6) */
.pill-completed{ background:#E5E7EB; color: #374151; border-color: #D1D5DB; }
.pill-canceled{ background:#FEE2E2; color: #991B1B; border-color: #FECACA; }


/* ---------------------------------------------- */
/* -- NEW: Home Address Updater (Bug Fix) -- */
/* ---------------------------------------------- */
#companion-address-updater {
  margin-top: 1.5rem;
  border: 1px solid var(--danger);
  background: var(--danger-light);
}

#companion-address-updater .card-body {
  padding: 1.25rem;
}

#companion-address-updater h4 {
  color: var(--danger-dark);
  margin-top: 0;
}

#companion-address-updater p.muted {
  color: var(--danger-dark);
}

#companion-address-updater label {
  font-weight: 600;
  color: var(--danger-dark);
}

#companion-address-updater input[type="text"] {
  margin-top: 0.5rem;
  width: 100%;
}

/* ---------------------------------------------- */
/* -- NEW: Address Choice Card (Bug Fix) -- */
/* ---------------------------------------------- */
.companion-address-choice {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.companion-address-choice .address-choice-option {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.companion-address-choice .address-choice-option h5 {
  margin-bottom: 0.75rem;
}
.companion-address-choice .address-choice-option .muted {
  margin-bottom: 1rem;
}
.companion-address-choice .saved-address-display {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.companion-address-choice .saved-address-display strong {
  font-size: 1rem;
  font-weight: 600;
}
.companion-address-choice .saved-address-display span {
  font-size: 0.9rem;
  color: var(--text-muted);
}


/* ---------------------------------------------- */
/* -- NEW (Req 2): Ride Confirmation Modal -- */
/* ---------------------------------------------- */
.modal-backdrop {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  width: 90%;
  max-width: 500px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: modal-fade-in 0.3s ease-out;
}

@keyframes modal-fade-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
}

.modal-close {
  color: var(--text-muted);
  float: right;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
  color: var(--text-heading);
  text-decoration: none;
}

.modal-body {
  padding: 1.5rem;
}

.ride-summary-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.ride-summary-grid .label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ride-summary-grid .value {
  font-size: 1rem;
  font-weight: 500;
}

.ride-summary-grid .value-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--bg-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.modal-footer .muted {
  margin: 0;
  margin-right: auto;
  font-size: 0.9rem;
}