/* ==========================================================================
   next-departures.css — Composant canonique unifié « Prochains passages »
   Partagé par Page ligne, StopSheet PWA et StopSheet / Popup Web.
   ========================================================================== */

.next-departures-section {
    --next-dep-divider: rgba(148, 163, 184, 0.18);
    --next-dep-surface: var(--line-shell-surface-strong, var(--pm-bg-card, #ffffff));
    --next-dep-border: var(--line-shell-border, var(--pm-border-light, #e2e8f0));
    --next-dep-text: var(--line-shell-text-primary, var(--pm-text-primary, #0f172a));
    --next-dep-secondary: var(--line-shell-text-secondary, var(--pm-text-secondary, #64748b));
    --next-dep-muted: var(--pm-text-muted, #94a3b8);
    --next-dep-live: #0b7496;
    --next-dep-live-bg: #e0f2fe;
    --next-dep-cancelled: #dc2626;
    --next-dep-cancelled-bg: #fee2e2;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 16px;
}

.next-departures-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.next-departures-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--next-dep-text);
    letter-spacing: -0.01em;
}

.next-departures-list,
.pwa-line-next-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.next-departures-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--next-dep-secondary);
    font-size: 0.92rem;
    background: var(--next-dep-surface);
    border: 1px solid var(--next-dep-border);
    border-radius: 16px;
}

/* ==========================================================================
   Grille Canonique d'une Ligne de Départ (departure-row)
   Disposition en 3 colonnes partagées Web & PWA :
   [1. Destination / via] (minmax(0, 1fr), ellipsis)
   [2. Bloc Horaire]      (max-content, align-items: flex-end)
   [3. Chevron / Action]  (colonne fixe 44px / 40px)
   ========================================================================== */

.departure-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content 44px !important;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .departure-row {
        grid-template-columns: minmax(0, 1fr) max-content 40px !important;
        gap: 8px;
    }
}

/* Style unifié d'une ligne dans Prochains Passages (identique Page Ligne & StopSheet) */
.next-departure-item,
.pwa-line-next-item {
    padding: 0.85rem 0.35rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--next-dep-divider, rgba(148, 163, 184, 0.18)) !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease;
}

.next-departure-item:hover,
.pwa-line-next-item:hover {
    background: rgba(148, 163, 184, 0.04) !important;
}

.next-departure-item.is-cancelled,
.pwa-line-next-item.is-cancelled {
    background: rgba(220, 38, 38, 0.03) !important;
}

.next-departure-item:last-child,
.pwa-line-next-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0.3rem !important;
}

@media (max-width: 420px) {
    .next-departure-item,
    .pwa-line-next-item {
        padding: 0.75rem 0.25rem !important;
    }
}

/* 1. Colonne Destination (Gauche) */
.departure-row__destination,
.next-departure-destination-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
}

.departure-row__destination-main,
.next-departure-destination-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.next-departure-route-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    flex-shrink: 0;
    line-height: 1.2;
}

.next-departure-destination {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--next-dep-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.departure-row__destination-secondary,
.next-departure-via,
.next-departure-short-turn {
    display: block;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    margin-top: 1px;
}

.next-departure-via {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--next-dep-secondary);
}

.next-departure-short-turn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #d97706;
}

/* 2. Colonne Horaire (Droite Déterministe) */
.departure-row__time,
.next-departure-time-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-self: end !important;
    width: max-content !important;
    min-width: 88px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
    gap: 2px !important;
}

.departure-row__time-main,
.next-departure-time-main-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.next-departure-time-main,
.departure-time-main,
.departure-row__time-value,
.departure-time {
    font-family: inherit !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--next-dep-text) !important;
    letter-spacing: -0.01em !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

/* Slot RT fixe dédié : heure | slot icône RT (existant même vide pour alignement absolu) */
.departure-rt-slot,
.next-departure-rt-slot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.departure-rt-slot:empty,
.next-departure-rt-slot:empty {
    visibility: hidden !important;
}

.departure-rt-slot img,
.next-departure-rt-slot img {
    display: block !important;
    width: 18px !important;
    height: 16px !important;
}

.next-departure-time-main.is-realtime,
.departure-time-main.is-realtime,
.departure-row.is-realtime .departure-row__time-value,
.departure-time.is-realtime {
    color: var(--next-dep-live) !important;
}

.next-departure-time-main.is-cancelled,
.departure-time-main.is-cancelled,
.departure-time.is-cancelled {
    color: var(--next-dep-cancelled) !important;
    text-decoration: line-through;
    opacity: 0.85;
}

.next-departure-rt-indicator,
.departure-rt-indicator {
    display: inline-flex;
    align-items: center;
    color: var(--next-dep-live);
}

.departure-row__time-secondary,
.next-departure-time-secondary-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    font-size: 0.78rem !important;
    color: var(--next-dep-secondary) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    padding-right: 26px !important; /* Calé sous les chiffres de l'heure en excluant le slot RT de 20px + gap 6px */
}

.departure-time-previous,
.next-departure-time-striked,
.departure-time.scheduled {
    font-size: 0.85rem !important;
    text-decoration: line-through;
    color: var(--next-dep-muted) !important;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.departure-relative,
.next-departure-relative {
    font-size: 0.78rem !important;
    font-weight: 600;
    color: var(--next-dep-secondary);
}

.departure-row.is-realtime .next-departure-relative,
.departure-row.is-realtime .departure-relative {
    color: var(--next-dep-live) !important;
}

.next-departure-status,
.departure-row__status {
    font-size: 0.78rem !important;
    font-weight: 700;
}

.next-departure-status--cancelled,
.departure-row__status--cancelled {
    color: var(--next-dep-cancelled);
}

.next-departure-separator,
.departure-separator {
    color: var(--next-dep-muted);
}

/* 3. Colonne Action / Chevron (Fixe) */
.departure-row__action,
.next-departure-action-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 100% !important;
    justify-self: end !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .departure-row__action,
    .next-departure-action-col {
        width: 40px !important;
        min-width: 40px !important;
    }
}

/* ==========================================================================
   Design Token Unique : Chevron / Déclencheur de détail de course
   Uniformisé pour TOUTES les vues (Page Ligne, StopSheet, Web, PWA, Prochains, Tous)
   ========================================================================== */

.trip-detail-trigger,
.next-departure-chevron-btn,
#pwa-stop-sheet .trip-detail-trigger,
.stop-bottom-sheet .trip-detail-trigger,
.all-times-schedule .trip-detail-trigger,
body.line-page .trip-detail-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: #ffffff !important;
    color: #64748b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.16s ease !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
}

.trip-detail-trigger:hover,
.next-departure-chevron-btn:hover,
#pwa-stop-sheet .trip-detail-trigger:hover,
.stop-bottom-sheet .trip-detail-trigger:hover,
.all-times-schedule .trip-detail-trigger:hover,
body.line-page .trip-detail-trigger:hover {
    color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
    background: #f8fafc !important;
    transform: none !important;
}

.trip-detail-trigger:active,
.next-departure-chevron-btn:active,
#pwa-stop-sheet .trip-detail-trigger:active,
.stop-bottom-sheet .trip-detail-trigger:active,
.all-times-schedule .trip-detail-trigger:active,
body.line-page .trip-detail-trigger:active {
    transform: translateY(1px) scale(0.96) !important;
}

.trip-detail-trigger-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.trip-detail-trigger-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    display: block !important;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .next-departures-section,
[data-theme="dark"] .next-departures-section,
body.dark-theme .next-departures-section,
#pwa-stop-sheet.dark-theme .next-departures-section,
body.dark-theme #pwa-stop-sheet .next-departures-section,
body[data-theme="dark"] #pwa-stop-sheet .next-departures-section {
    --next-dep-surface: var(--line-shell-surface-strong, #131b2c);
    --next-dep-border: var(--line-shell-border, rgba(255, 255, 255, 0.08));
    --next-dep-divider: rgba(255, 255, 255, 0.08);
    --next-dep-text: var(--line-shell-text-primary, #f8fafc);
    --next-dep-secondary: var(--line-shell-text-secondary, #94a3b8);
    --next-dep-muted: #64748b;
    --next-dep-live: #7dd3fc;
    --next-dep-live-bg: rgba(56, 189, 248, 0.12);
    --next-dep-cancelled: #f87171;
    --next-dep-cancelled-bg: rgba(248, 113, 113, 0.12);
}

body.dark-theme .next-departure-item,
body.dark-theme .pwa-line-next-item,
body[data-theme="dark"] .next-departure-item,
body[data-theme="dark"] .pwa-line-next-item,
#pwa-stop-sheet.dark-theme .next-departure-item,
#pwa-stop-sheet.dark-theme .pwa-line-next-item,
body.dark-theme #pwa-stop-sheet .next-departure-item,
body[data-theme="dark"] #pwa-stop-sheet .next-departure-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .next-departure-item:hover,
body.dark-theme .pwa-line-next-item:hover,
body[data-theme="dark"] .next-departure-item:hover,
body[data-theme="dark"] .pwa-line-next-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

body:is(.dark-theme, [data-theme="dark"]) .trip-detail-trigger,
html:is(.dark-theme, [data-theme="dark"]) .trip-detail-trigger,
.dark-theme .trip-detail-trigger,
[data-theme="dark"] .trip-detail-trigger,
body.dark-theme #pwa-stop-sheet .trip-detail-trigger,
body[data-theme="dark"] #pwa-stop-sheet .trip-detail-trigger {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

body:is(.dark-theme, [data-theme="dark"]) .trip-detail-trigger:hover,
html:is(.dark-theme, [data-theme="dark"]) .trip-detail-trigger:hover,
.dark-theme .trip-detail-trigger:hover,
[data-theme="dark"] .trip-detail-trigger:hover,
body.dark-theme #pwa-stop-sheet .trip-detail-trigger:hover,
body[data-theme="dark"] #pwa-stop-sheet .trip-detail-trigger:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #f1f5f9 !important;
}

/* ==========================================================================
   Realtime Badge (aligné partout : Web, PWA, Page Ligne, StopSheet)
   ========================================================================== */

.next-departures-section .realtime-badge,
.pwa-line-card-section .realtime-badge,
.block-next-departures .realtime-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #e0f2fe !important;
    color: #0b7496 !important;
    border: 1px solid #bae6fd !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    vertical-align: middle;
}

.next-departures-section .realtime-badge.realtime-badge--offline,
.pwa-line-card-section .realtime-badge.realtime-badge--offline,
.block-next-departures .realtime-badge.realtime-badge--offline {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
}

body.dark-theme .realtime-badge,
body[data-theme="dark"] .realtime-badge,
#pwa-stop-sheet.dark-theme .realtime-badge,
body.dark-theme #pwa-stop-sheet .realtime-badge,
body[data-theme="dark"] #pwa-stop-sheet .realtime-badge {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
}

body.dark-theme .realtime-badge.realtime-badge--offline,
body[data-theme="dark"] .realtime-badge.realtime-badge--offline,
#pwa-stop-sheet.dark-theme .realtime-badge.realtime-badge--offline,
body.dark-theme #pwa-stop-sheet .realtime-badge.realtime-badge--offline,
body[data-theme="dark"] #pwa-stop-sheet .realtime-badge.realtime-badge--offline {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}