/**
 * LW Rail – Station Board (CIS-style) CSS
 * Scope everything to .ldb-board to avoid conflicts with theme.
 */

/* ---- Base board container ---- */

.ldb-board {
    background: #000814;
    color: #ffcc33;
    padding: 12px 16px 10px;
    border-radius: 4px;
    border: 2px solid #223047;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
    font-family: "Roboto Mono", "Consolas", "Courier New", monospace;
    max-width: 1200px;
    margin: 0 auto 24px;
    overflow: hidden;
}

/* Mode hook – currently only cis, but ready for full/compact */

.ldb-board-cis {
    background: #000814;
}

/* ---- Header ---- */

.ldb-board .ldb-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffdd55;
    margin-bottom: 4px;
}

.ldb-board .ldb-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ldb-board .ldb-header-crs {
    font-size: 16px;
    font-weight: 600;
    color: #ffd633;
}

/* ---- Meta / generated time ---- */

.ldb-board .ldb-meta {
    font-size: 11px;
    color: #8fa4c2;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ldb-board .ldb-generated {
    color: #c3e1ff;
}

/* ---- "No services" message ---- */

.ldb-board .ldb-no-services {
    padding: 10px 8px;
    background: #111827;
    border-radius: 2px;
    color: #ffdd55;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ---- Table ---- */

.ldb-board .ldb-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

/* Header row: solid yellow on dark bar */

.ldb-board .ldb-table thead tr {
    background: #001d3d;
}

.ldb-board .ldb-table th {
    padding: 6px 8px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 11px;
    color: #ffdd55;
    border-bottom: 1px solid #223047;
}

/* Column widths similar to live CIS boards */

.ldb-board .ldb-col-time   { width: 11%; }
.ldb-board .ldb-col-dest   { width: 49%; }
.ldb-board .ldb-col-plat   { width: 8%;  text-align: center; }
.ldb-board .ldb-col-op     { width: 18%; }
.ldb-board .ldb-col-etd    { width: 14%; }

/* ---- Table body ---- */

.ldb-board .ldb-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row base styling */

.ldb-board .ldb-row {
    background: #000814;
    color: #ffdd77;
}

/* Zebra-effect subtle lines */

.ldb-board .ldb-row:nth-child(2n) {
    background: #00111f;
}

/* Hover highlight like a selection line */

.ldb-board .ldb-row:hover {
    background: #00264d;
}

/* Status-based rows */

.ldb-board .ldb-row-ontime .ldb-cell-etd {
    color: #9eff7a;
}

.ldb-board .ldb-row-delayed {
    color: #ffb347;
}

.ldb-board .ldb-row-delayed .ldb-cell-etd {
    color: #ff9933;
    font-weight: 700;
}

.ldb-board .ldb-row-cancelled {
    color: #ff8080;
    background: #3b0000;
}

.ldb-board .ldb-row-cancelled .ldb-cell-etd {
    color: #ff4d4d;
    font-weight: 700;
}

/* Individual cells */

.ldb-board .ldb-cell-time {
    font-weight: 700;
    color: #ffdd77;
}

.ldb-board .ldb-cell-dest {
    text-transform: uppercase;
}

.ldb-board .ldb-dest-name {
    margin-right: 4px;
}

.ldb-board .ldb-dest-crs {
    font-size: 11px;
    color: #b3c7ff;
}

.ldb-board .ldb-cell-plat {
    text-align: center;
    font-weight: 700;
    color: #ffec99;
}

.ldb-board .ldb-cell-op {
    font-size: 12px;
    color: #d1e4ff;
}

.ldb-board .ldb-cell-etd {
    text-align: left;
    font-weight: 700;
}

/* ---- Responsive tweaks ---- */

@media (max-width: 768px) {

    .ldb-board {
        padding: 10px;
        border-width: 1px;
        font-size: 12px;
    }

    .ldb-board .ldb-header {
        font-size: 16px;
        flex-direction: column;
        gap: 2px;
    }

    .ldb-board .ldb-meta {
        font-size: 10px;
    }

    /* Allow horizontal scrolling on small screens */
    .ldb-board .ldb-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .ldb-board .ldb-table table {
        min-width: 600px;
    }
}

/* Optional: compact mode hook for later layouts */

.ldb-board-compact .ldb-header {
    font-size: 16px;
    margin-bottom: 2px;
}

.ldb-board-compact .ldb-table td,
.ldb-board-compact .ldb-table th {
    padding: 3px 6px;
    font-size: 12px;
}