/* ============================================================
   VGP Fahrplan – Stylesheet
   Plugin: vgp-fahrplan | Version: 1.0.0
   ============================================================ */

:root {
    --vgp-primary:   #3a6578;
    --vgp-primary-h: #2d5060;
    --vgp-accent:    #bec832;
    --vgp-ok:        #2e7d32;
    --vgp-warn:      #e65100;
    --vgp-grey:      #f2f6f8;
    --vgp-border:    #c5d5dc;
    --vgp-shadow:    0 2px 8px rgba(0, 0, 0, .1);
    --vgp-radius:    6px;
}

/* ── Basis ────────────────────────────────────────────────── */
.vgp-widget {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size:   1rem;
    line-height: 1.5;
    margin:      1.5em 0;
    box-sizing:  border-box;
}
.vgp-widget *,
.vgp-widget *::before,
.vgp-widget *::after {
    box-sizing: inherit;
}

/* ── Lade-Indikator ───────────────────────────────────────── */
.vgp-loading {
    padding:     24px;
    text-align:  center;
    color:       #888;
    font-style:  italic;
    background:  var(--vgp-grey);
    border-radius: var(--vgp-radius);
}

/* ── Statusmeldungen ──────────────────────────────────────── */
.vgp-msg {
    margin:        0;
    padding:       14px 18px;
    border-radius: var(--vgp-radius);
}
.vgp-msg--empty {
    background: var(--vgp-grey);
    color:      #555;
}
.vgp-msg--error {
    background: #ffebee;
    color:      #b71c1c;
    border:     1px solid #ef9a9a;
}

/* ── Steuerleiste ─────────────────────────────────────────── */
.vgp-controls {
    display:      flex;
    flex-wrap:    wrap;
    gap:          12px;
    align-items:  center;
    margin-bottom: 0;
}

/* Tabs */
.vgp-tabs {
    display: flex;
    gap:     4px;
}
.vgp-tab {
    background:    #fff;
    border:        2px solid var(--vgp-border);
    border-bottom: 2px solid var(--vgp-border);
    border-radius: var(--vgp-radius) var(--vgp-radius) 0 0;
    padding:       9px 18px;
    cursor:        pointer;
    font-size:     .88rem;
    font-weight:   600;
    color:         #555;
    transition:    all .18s ease;
}
.vgp-tab:hover {
    background: var(--vgp-grey);
    color:      var(--vgp-primary);
}
.vgp-tab.active,
.vgp-tab[aria-selected="true"] {
    background:   var(--vgp-primary);
    border-color: var(--vgp-primary);
    color:        #fff;
}

/* Datumsauswahl */
.vgp-date-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-left: auto;
    font-size:   .88rem;
    color:       #555;
}
.vgp-date {
    border:        1px solid var(--vgp-border);
    border-radius: 4px;
    padding:       6px 10px;
    font-size:     .88rem;
    color:         #333;
}
.vgp-date:focus {
    outline:      2px solid var(--vgp-primary);
    outline-offset: 2px;
}
.vgp-refresh {
    background:    var(--vgp-grey);
    border:        1px solid var(--vgp-border);
    border-radius: 4px;
    padding:       6px 12px;
    cursor:        pointer;
    font-size:     1.15rem;
    line-height:   1;
    color:         #555;
    transition:    background .18s;
}
.vgp-refresh:hover { background: #e0e0e0; color: var(--vgp-primary); }

/* ── Abfahrtstabelle ──────────────────────────────────────── */
.vgp-content {
    border:        1px solid var(--vgp-border);
    border-radius: 0 var(--vgp-radius) var(--vgp-radius) var(--vgp-radius);
    overflow:      hidden;
    box-shadow:    var(--vgp-shadow);
}
/* Wenn kein Tab vorhanden (Haltestellen / Störungen) */
.vgp-haltestellen .vgp-content,
.vgp-stoerungen .vgp-content {
    border-radius: var(--vgp-radius);
}

.vgp-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .88rem;
    background:      #fff;
}
.vgp-table thead th {
    background:      var(--vgp-primary);
    color:           #fff;
    padding:         10px 14px;
    text-align:      left;
    font-size:       .78rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .06em;
    white-space:     nowrap;
}
.vgp-table tbody td {
    padding:      9px 14px;
    border-bottom: 1px solid var(--vgp-border);
    vertical-align: middle;
}
.vgp-table tbody tr:last-child td {
    border-bottom: none;
}
.vgp-table tbody tr:hover td {
    background: #f9f9fb;
}
.vgp-row--cancelled td {
    opacity:         .6;
    text-decoration: line-through;
    color:           #999;
}

/* Zeit */
.vgp-time-plan {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vgp-time-rt {
    font-weight: 700;
    color:       var(--vgp-warn);
    font-variant-numeric: tabular-nums;
}

/* Linienbadge */
.vgp-badge {
    display:       inline-block;
    background:    var(--vgp-primary);
    color:         #fff;
    border-radius: 3px;
    padding:       2px 9px;
    font-size:     .82rem;
    font-weight:   700;
    white-space:   nowrap;
}

/* Statusspalte */
.vgp-col-status { width: 90px; text-align: center; }
.vgp-tag {
    display:       inline-block;
    font-size:     .78rem;
    font-weight:   700;
    border-radius: 3px;
    padding:       2px 7px;
    white-space:   nowrap;
}
.vgp-tag--ok       { background: #e8e8e8; color: #111;     }
.vgp-tag--late     { background: #fff3e0; color: #a83d00;  }
.vgp-tag--cancelled{ background: #ffebee; color: #b0001e;  }

/* ── Aufklappbare Journey-Details ────────────────────────── */
.vgp-row--expandable {
    cursor:      pointer;
    user-select: none;
}
.vgp-row--expandable:hover td { background: #eef2f9; }
.vgp-row--open td {
    background:    #eef2f9;
    border-bottom: none;
}
.vgp-journey-detail td {
    padding:       0 !important;
    background:    #f7f9fc;
    border-bottom: 2px solid var(--vgp-border);
}
.vgp-journey-loading {
    padding:    10px 18px;
    color:      #888;
    font-style: italic;
    font-size:  .82rem;
}
.vgp-jstops {
    list-style: none;
    margin:     0;
    padding:    10px 18px;
    display:    flex;
    flex-direction: column;
    gap:        0;
}
.vgp-jstop {
    display:     flex;
    align-items: baseline;
    gap:         6px;
    padding:     3px 0;
    min-width:   0;
}
.vgp-jstop__dot {
    flex-shrink:   0;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--vgp-primary);
    position:      relative;
    top:           1px;
    opacity:       .5;
}
.vgp-jstop--first .vgp-jstop__dot,
.vgp-jstop--last  .vgp-jstop__dot { background: var(--vgp-accent); opacity: 1; }
.vgp-jstop__time {
    font-size:            .78rem;
    font-weight:          700;
    color:                #555;
    white-space:          nowrap;
    min-width:            34px;
    font-variant-numeric: tabular-nums;
}
.vgp-jstop__rt   { color: var(--vgp-warn); }
.vgp-jstop__name {
    font-size:     .82rem;
    color:         #333;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.vgp-jstop--first .vgp-jstop__name,
.vgp-jstop--last  .vgp-jstop__name { font-weight: 700; color: var(--vgp-primary); }

/* ── Haltestellenliste ────────────────────────────────────── */
.vgp-stops {
    list-style:    none;
    padding:       0 0 0 20px;
    margin:        0;
    background:    #fff;
    position:      relative;
}

/* Vertikale Linie */
.vgp-stops::before {
    content:    '';
    position:   absolute;
    left:       30px;
    top:        24px;
    bottom:     24px;
    width:      2px;
    background: var(--vgp-primary);
    opacity:    .3;
}

.vgp-stop {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        13px 16px 13px 0;
    position:       relative;
    border-bottom:  1px solid var(--vgp-border);
}
.vgp-stop:last-child { border-bottom: none; }

.vgp-stop__dot {
    flex-shrink: 0;
    width:       14px;
    height:      14px;
    border-radius: 50%;
    background:  var(--vgp-primary);
    border:      3px solid #fff;
    box-shadow:  0 0 0 2px var(--vgp-primary);
    position:    relative;
    z-index:     1;
}
.vgp-stop--first .vgp-stop__dot,
.vgp-stop--last  .vgp-stop__dot {
    background: var(--vgp-accent);
    box-shadow: 0 0 0 2px var(--vgp-accent);
}

.vgp-stop__name {
    font-size:   .92rem;
    font-weight: 500;
    color:       #333;
}
.vgp-stop--first .vgp-stop__name,
.vgp-stop--last  .vgp-stop__name {
    font-weight: 700;
    color:       var(--vgp-primary);
}

/* ── Störungsmeldungen ────────────────────────────────────── */
.vgp-no-stoerung {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    #e8e8e8;
    border:        1px solid #ccc;
    border-radius: var(--vgp-radius);
    padding:       16px 20px;
    color:         #111;
    font-weight:   500;
}
.vgp-no-stoerung__icon {
    font-size: 1.3rem;
    color:     #111;
}

.vgp-stoerung {
    background:   #fff;
    border:       1px solid rgba(190, 200, 50, .45);
    border-left:  4px solid var(--vgp-accent);
    border-radius: var(--vgp-radius);
    padding:      16px 20px;
    margin-bottom: 12px;
}
.vgp-stoerung:last-child { margin-bottom: 0; }

.vgp-stoerung__dates {
    font-size: .78rem;
    color:     #888;
    margin:    0 0 6px;
}
.vgp-stoerung__title {
    margin:      0 0 8px;
    font-size:   1rem;
    font-weight: 700;
    color:       #222;
}
.vgp-stoerung__lead {
    margin:      0 0 4px;
    font-weight: 500;
    color:       #444;
}
.vgp-stoerung__text {
    margin:    4px 0 0;
    color:     #555;
    font-size: .88rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .vgp-controls {
        flex-direction: column;
        align-items:    flex-start;
    }
    .vgp-date-wrap { margin-left: 0; }
    .vgp-tabs      { width: 100%; }
    .vgp-tab       { flex: 1; text-align: center; border-radius: var(--vgp-radius); }

    .vgp-table { font-size: .82rem; }
    .vgp-table thead th,
    .vgp-table tbody td { padding: 7px 10px; }

    /* Statusspalte auf kleinen Screens ausblenden */
    .vgp-col-status { display: none; }

    /* Tabelle horizontal scrollbar statt abgeschnitten */
    .vgp-content { overflow-x: auto; }

    /* Richtungstext kürzen damit er nicht überläuft */
    .vgp-table .vgp-col-dir {
        max-width: 130px;
        overflow:      hidden;
        text-overflow: ellipsis;
        white-space:   nowrap;
    }
}