/* =====================================================================
   style.css — Jelgavas signālplāni
   Dizains: minimālistisks, gaišs, bez ietvara (no framework)
   ===================================================================== */

/* ----- Pamata atiestate un krāsas ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ķermeņa pamata stils — gaišs fons, moderna tipografija */
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    background: #f5f5f5;
    color: #222;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =====================================================================
   GALVENE
   ===================================================================== */
header {
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    padding: 14px 24px;
}

/* Lapas virsraksts galvenē */
header h1 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111;
    letter-spacing: -.015em;
}

/* =====================================================================
   GALVENAIS SATURS
   ===================================================================== */
main {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* =====================================================================
   KONTROLES — izvēlne
   ===================================================================== */
/* Izvēles zona ar label un select */
.controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Etiķete izvēlnei */
.controls label {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Krustojumu nolaižamā izvēlne */
#sel {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .9rem;
    font-family: inherit;
    background: #fff;
    color: #111;
    cursor: pointer;
    min-width: 260px;
    outline: none;
}

/* Fokusa izcelšana izvēlnei */
#sel:focus { border-color: #555; }

/* =====================================================================
   KĻŪDAS PAZIŅOJUMS
   ===================================================================== */
.err {
    color: #b00;
    font-size: .85rem;
    padding: 6px 10px;
    background: #fff3f3;
    border: 1px solid #f4c6c6;
    border-radius: 4px;
}

/* =====================================================================
   SIGNĀLPLĀNA SADAĻA
   ===================================================================== */
/* Krustojuma nosaukums un meta info */
.plan-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* Krustojuma nosaukums */
.plan-header strong {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

/* Perioda un cikla informācija */
.plan-header span {
    font-size: .82rem;
    color: #666;
}

/* =====================================================================
   SIGNĀLA TABULA
   ===================================================================== */
/* Horizontālās ritināšanas iesaiņojums */
.table-wrap {
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

/* Galvenā tabula */
#tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* ----- Virzienu kolonna ----- */
.col-v {
    width: 100px;
    min-width: 100px;
    padding: 5px 8px;
    border-right: 2px solid #ddd;
    white-space: nowrap;
    vertical-align: middle;
    font-size: .82rem;
    background: #fafafa;
}

/* Virziena kods (V4, GP1 utt.) */
.col-v .code {
    display: block;
    font-weight: 700;
    color: #111;
}

/* Virziena tips (Transports / Gājēji) */
.col-v .type {
    font-size: .7rem;
    color: #888;
}

/* ----- Laika joslas kolonna ----- */
.col-t {
    position: relative;
    width: calc(100% - 100px);
}

/* Laika atzīmju josla galvenē */
.ticks {
    position: relative;
    height: 28px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
}

/* Atsevišķa laika atzīme */
.tick {
    position: absolute;
    bottom: 0;
}

/* Laika cipars galvenē */
.tick-num {
    display: block;
    font-size: 8px;
    color: #666;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* Garā svītra ik 10s */
.tl { border-left: 1px solid #aaa; height: 8px; }

/* Īsā svītra ik 5s */
.ts { border-left: 1px solid #ddd; height: 4px; }

/* =====================================================================
   SEKUNŽU ŠŪNAS — 1 šūna = 1 sekunde
   ===================================================================== */
/* Šūnu rinda — Flex horizontāls izkārtojums */
.row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 24px;
}

/* Viena sekundes šūna */
.c {
    flex: 1;
    height: 100%;
    min-width: 0;
    border-right: 1px solid rgba(0,0,0,.06);
}

/* Biezāka robeža ik 5s */
.c.b5  { border-right: 1px solid rgba(0,0,0,.2); }

/* Vēl biezāka robeža ik 10s */
.c.b10 { border-right: 2px solid rgba(0,0,0,.35); }

/* =====================================================================
   SIGNĀLU KRĀSAS
   ===================================================================== */

/* Sarkanais signāls — stop */
.sig-red    { background: #e53935; }

/* Zaļais signāls — braukt / iet */
.sig-green  { background: #43a047; }

/* Dzeltenais — gatavs */
.sig-yellow { background: #fdd835; }

/* Sarkans+dzeltens pirms zaļā — diagonālas svītras */
.sig-ry {
    background: repeating-linear-gradient(
        45deg,
        #e53935 0px, #e53935 4px,
        #fdd835 4px, #fdd835 8px
    );
}

/*
 * Gājēju zona pēc zaļā — statiskas diagonālas zaļ/baltas svītras
 * (BEZ mirgošanas — tikai vizuāla atšķirība no parastā zaļā)
 */
.sig-blink-ped {
    background: repeating-linear-gradient(
        45deg,
        #43a047 0px, #43a047 4px,
        #ffffff 4px, #ffffff 8px
    );
}

/* =====================================================================
   LEĢENDA
   ===================================================================== */
/* Horizontāls saraksts */
.legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-size: .78rem;
    color: #444;
}

/* Leģendas elements */
.legend li { display: flex; align-items: center; gap: 6px; }

/* Krāsas kvadrātiņš leģendā */
.sq {
    display: inline-block;
    width: 22px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.1);
    flex-shrink: 0;
}

/* Leģendas kvadrātiņu krāsas */
.sq.green  { background: #43a047; }
.sq.yellow { background: #fdd835; }
.sq.red    { background: #e53935; }
.sq.ped    { background: repeating-linear-gradient(45deg,#43a047 0,#43a047 4px,#fff 4px,#fff 8px); }
.sq.ry     { background: repeating-linear-gradient(45deg,#e53935 0,#e53935 4px,#fdd835 4px,#fdd835 8px); }

/* =====================================================================
   KĀJENE
   ===================================================================== */
footer {
    text-align: center;
    padding: 10px;
    font-size: .72rem;
    color: #aaa;
    border-top: 1px solid #e0e0e0;
    background: #fff;
}