/* TaxiTV Display Scherm - Vereenvoudigd zonder animaties */
/* Alle items op 1 scherm, geen scrollen nodig */

:root {
    --status-onderweg: #2196F3;
    --status-vertraagd: #FF9800;
    --status-klaar: #4CAF50;
    --status-vertrokken: #9C27B0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', 'Segoe UI', sans-serif;
    overflow: hidden;
    background-color: #E8F5E9;
}

.display-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow: hidden;
}

/* Header - compact */
.display-header {
    text-align: center;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.header-with-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.school-logo {
    max-height: 120px;
    max-width: 250px;
    height: auto;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.header-text {
    text-align: center;
}

.display-header h1 {
    font-size: 42px;
    font-weight: bold;
    color: #1B5E20;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 8px;
}

.general-text {
    font-size: 26px;
    color: #2E7D32;
    font-weight: 500;
}

/* Taxi lijst - vult resterende ruimte */
.taxi-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

/* Individuele taxi regel - dynamisch grid op basis van getoonde kolommen */
.taxi-item {
    display: grid;
    grid-template-columns: auto;
    gap: 30px;
    align-items: center;
    background: white;
    padding: 15px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 8px solid #4CAF50;
    flex-shrink: 1;
    min-height: 0;
}

/* Grid layouts op basis van welke kolommen getoond worden */
/* Alleen taxi naam */
.taxi-item[data-show-datum="0"][data-show-taxi="1"][data-show-status="0"][data-show-opmerking="0"] {
    grid-template-columns: 1fr;
    justify-items: center;
}

/* Taxi + Opmerking (standaard) */
.taxi-item[data-show-datum="0"][data-show-taxi="1"][data-show-status="0"][data-show-opmerking="1"] {
    grid-template-columns: 250px 1fr;
}

/* Alle kolommen */
.taxi-item[data-show-datum="1"][data-show-taxi="1"][data-show-status="1"][data-show-opmerking="1"] {
    grid-template-columns: 120px 200px 1fr 180px;
    gap: 20px;
}

/* Datum + Taxi + Opmerking */
.taxi-item[data-show-datum="1"][data-show-taxi="1"][data-show-status="0"][data-show-opmerking="1"] {
    grid-template-columns: 120px 200px 1fr;
    gap: 20px;
}

/* Taxi + Status + Opmerking */
.taxi-item[data-show-datum="0"][data-show-taxi="1"][data-show-status="1"][data-show-opmerking="1"] {
    grid-template-columns: 200px 1fr 180px;
    gap: 20px;
}

/* Taxi + Status */
.taxi-item[data-show-datum="0"][data-show-taxi="1"][data-show-status="1"][data-show-opmerking="0"] {
    grid-template-columns: 250px 180px;
    gap: 30px;
}

/* Alleen opmerking */
.taxi-item[data-show-datum="0"][data-show-taxi="0"][data-show-status="0"][data-show-opmerking="1"] {
    grid-template-columns: 1fr;
}

/* Datum + Status + Opmerking */
.taxi-item[data-show-datum="1"][data-show-taxi="0"][data-show-status="1"][data-show-opmerking="1"] {
    grid-template-columns: 120px 1fr 180px;
}

.taxi-item.status-onderweg {
    border-left-color: var(--status-onderweg);
}

.taxi-item.status-vertraagd {
    border-left-color: var(--status-vertraagd);
}

.taxi-item.status-staat_klaar {
    border-left-color: var(--status-klaar);
}

.taxi-item.status-vertrokken {
    border-left-color: var(--status-vertrokken);
}

/* Taxi naam */
.taxi-naam {
    display: flex;
    align-items: center;
    justify-content: center;
}

.taxi-text {
    font-size: 26px;
    font-weight: bold;
    color: #1976D2;
    text-align: center;
}

/* Datum kolom */
.taxi-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.datum-icon {
    font-size: 32px;
}

.datum-text {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Status kolom */
.taxi-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.status-icon {
    font-size: 48px;
}

.status-text {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
    text-align: center;
    white-space: nowrap;
}

/* Status kleuren */
.status-onderweg .status-icon {
    color: var(--status-onderweg);
}

.status-onderweg .status-text {
    background-color: #E3F2FD;
    color: var(--status-onderweg);
}

.status-vertraagd .status-icon {
    color: var(--status-vertraagd);
}

.status-vertraagd .status-text {
    background-color: #FFF3E0;
    color: var(--status-vertraagd);
}

.status-staat_klaar .status-icon {
    color: var(--status-klaar);
}

.status-staat_klaar .status-text {
    background-color: #E8F5E9;
    color: var(--status-klaar);
}

.status-vertrokken .status-icon {
    color: var(--status-vertrokken);
}

.status-vertrokken .status-text {
    background-color: #F3E5F5;
    color: var(--status-vertrokken);
}

/* Tijd display (rechtsboven) */
.time-display {
    position: fixed;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: 600;
    color: #1B5E20;
    background: white;
    padding: 12px 24px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 100;
}

/* Opmerking - ondersteunt HTML */
.taxi-opmerking {
    font-size: 22px;
    color: #555;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* HTML elementen styling in opmerking */
.taxi-opmerking strong,
.taxi-opmerking b {
    font-weight: bold;
    color: #333;
}

.taxi-opmerking em,
.taxi-opmerking i {
    font-style: italic;
}

.taxi-opmerking u {
    text-decoration: underline;
}

.taxi-opmerking s,
.taxi-opmerking strike {
    text-decoration: line-through;
}

/* Lijsten in opmerking */
.taxi-opmerking ul {
    list-style-type: disc;
    margin: 8px 0;
    padding-left: 25px;
}

.taxi-opmerking ol {
    list-style-type: decimal;
    margin: 8px 0;
    padding-left: 25px;
}

.taxi-opmerking li {
    margin: 4px 0;
    line-height: 1.4;
}

/* Paragrafen */
.taxi-opmerking p {
    margin: 5px 0;
}

/* Divs met uitlijning */
.taxi-opmerking div[style*="text-align: center"],
.taxi-opmerking p[style*="text-align: center"] {
    text-align: center;
}

.taxi-opmerking div[style*="text-align: right"],
.taxi-opmerking p[style*="text-align: right"] {
    text-align: right;
}

.taxi-opmerking div[style*="text-align: left"],
.taxi-opmerking p[style*="text-align: left"] {
    text-align: left;
}

/* Kleuren behouden (inline styles) */
.taxi-opmerking span[style*="color"],
.taxi-opmerking div[style*="color"],
.taxi-opmerking p[style*="color"] {
    /* Inline styles worden automatisch toegepast */
}

/* Afbeeldingen (als die worden gebruikt) */
.taxi-opmerking img {
    max-width: 50px;
    max-height: 50px;
    vertical-align: middle;
    margin: 0 5px;
}

/* Geen taxi's bericht */
.no-taxis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.no-taxis-icon {
    font-size: 100px;
    margin-bottom: 20px;
    color: #9E9E9E;
}

.no-taxis-text {
    font-size: 36px;
    color: #666;
    font-weight: 500;
}

/* Dynamische aanpassing op basis van aantal items */
/* 1-2 items */
.taxi-list:has(.taxi-item:nth-child(1):nth-last-child(1)) .taxi-item,
.taxi-list:has(.taxi-item:nth-child(2):nth-last-child(1)) .taxi-item {
    padding: 25px 40px;
}

.taxi-list:has(.taxi-item:nth-child(1):nth-last-child(1)) .taxi-text,
.taxi-list:has(.taxi-item:nth-child(2):nth-last-child(1)) .taxi-text {
    font-size: 32px;
}

.taxi-list:has(.taxi-item:nth-child(1):nth-last-child(1)) .taxi-opmerking,
.taxi-list:has(.taxi-item:nth-child(2):nth-last-child(1)) .taxi-opmerking {
    font-size: 28px;
}

/* 3-4 items */
.taxi-list:has(.taxi-item:nth-child(3):nth-last-child(1)) .taxi-item,
.taxi-list:has(.taxi-item:nth-child(4):nth-last-child(1)) .taxi-item {
    padding: 20px 35px;
}

.taxi-list:has(.taxi-item:nth-child(3):nth-last-child(1)) .taxi-text,
.taxi-list:has(.taxi-item:nth-child(4):nth-last-child(1)) .taxi-text {
    font-size: 28px;
}

.taxi-list:has(.taxi-item:nth-child(3):nth-last-child(1)) .taxi-opmerking,
.taxi-list:has(.taxi-item:nth-child(4):nth-last-child(1)) .taxi-opmerking {
    font-size: 24px;
}

/* 5-6 items */
.taxi-list:has(.taxi-item:nth-child(5)) .taxi-item {
    padding: 15px 30px;
}

.taxi-list:has(.taxi-item:nth-child(5)) .taxi-text {
    font-size: 24px;
}

.taxi-list:has(.taxi-item:nth-child(5)) .taxi-opmerking {
    font-size: 20px;
}

.taxi-list:has(.taxi-item:nth-child(5)) {
    gap: 8px;
}

/* 7-9 items */
.taxi-list:has(.taxi-item:nth-child(7)) .taxi-item {
    padding: 12px 25px;
}

.taxi-list:has(.taxi-item:nth-child(7)) .taxi-text {
    font-size: 22px;
}

.taxi-list:has(.taxi-item:nth-child(7)) .taxi-opmerking {
    font-size: 18px;
}

.taxi-list:has(.taxi-item:nth-child(7)) {
    gap: 6px;
}

/* 10-12 items */
.taxi-list:has(.taxi-item:nth-child(10)) .taxi-item {
    padding: 10px 20px;
}

.taxi-list:has(.taxi-item:nth-child(10)) .taxi-text {
    font-size: 20px;
}

.taxi-list:has(.taxi-item:nth-child(10)) .taxi-opmerking {
    font-size: 17px;
}

.taxi-list:has(.taxi-item:nth-child(10)) {
    gap: 5px;
}

/* 13-15 items */
.taxi-list:has(.taxi-item:nth-child(13)) .taxi-item {
    padding: 8px 18px;
}

.taxi-list:has(.taxi-item:nth-child(13)) .taxi-text {
    font-size: 18px;
}

.taxi-list:has(.taxi-item:nth-child(13)) .taxi-opmerking {
    font-size: 16px;
}

.taxi-list:has(.taxi-item:nth-child(13)) {
    gap: 4px;
}

/* 16-20 items */
.taxi-list:has(.taxi-item:nth-child(16)) .taxi-item {
    padding: 6px 15px;
}

.taxi-list:has(.taxi-item:nth-child(16)) .taxi-text {
    font-size: 16px;
}

.taxi-list:has(.taxi-item:nth-child(16)) .taxi-opmerking {
    font-size: 14px;
}

.taxi-list:has(.taxi-item:nth-child(16)) {
    gap: 3px;
}

.taxi-list:has(.taxi-item:nth-child(16)) ~ .display-header h1 {
    font-size: 32px;
    margin-bottom: 5px;
}

.taxi-list:has(.taxi-item:nth-child(16)) ~ .display-header .general-text {
    font-size: 20px;
}

/* 20+ items - absoluut minimum */
.taxi-list:has(.taxi-item:nth-child(20)) .taxi-item {
    padding: 5px 12px;
}

.taxi-list:has(.taxi-item:nth-child(20)) .taxi-text {
    font-size: 14px;
}

.taxi-list:has(.taxi-item:nth-child(20)) .taxi-opmerking {
    font-size: 13px;
}

.taxi-list:has(.taxi-item:nth-child(20)) {
    gap: 2px;
}

/* Responsive voor kleinere schermen */
@media (max-width: 1200px) {
    .taxi-item {
        grid-template-columns: 200px 1fr;
        gap: 20px;
    }
    
    .display-header h1 {
        font-size: 36px;
    }
    
    .general-text {
        font-size: 22px;
    }
    
    .school-logo {
        max-height: 100px;
        max-width: 200px;
    }
    
    .header-with-logo {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .display-container {
        padding: 10px;
    }
    
    .taxi-item {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 10px 15px;
        gap: 8px;
    }
    
    .display-header h1 {
        font-size: 28px;
    }
    
    .general-text {
        font-size: 18px;
    }
    
    .school-logo {
        max-height: 80px;
        max-width: 150px;
    }
    
    .header-with-logo {
        flex-direction: column;
        gap: 15px;
    }
}