:root {
    --navy: #1a2744;
    /*    --blue: #2c5282;*/
    --steel: #4a7ab5;
    --sky: #e8f0f9;
    --mint: #d4edda;
    --amber: #fff3cd;
    --rose: #f8d7da;
    --silver: #f4f6fa;
    --border: #d0daea;
    --text: #1e2d45;
    --muted: #5a6a82;
    --success: #1a7340;
    --warn: #7a5800;
    --danger: #7a1a2a;
    --pilot: #3b5998;
    --closed-bg: #f0f0f0;
    --closed-text: #666;
}
/** { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--silver);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
  }*/
.version-hdr {
    /*background: var(--navy);*/
    color: #dee2e6 !important;
    padding: 28px 40px 24px;
    border-bottom: 3px solid;
}

    .version-hdr h1 {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: .4px;
    }

    .version-hdr p {
        font-size: 13px;
        margin-top: 4px;
    }

.header-meta {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.stat {
    background: #393e40 !important;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 8px 16px;
}

    .stat .n {
        font-size: 24px;
        font-weight: 700;
        /*color: #7eb8f7;*/
        line-height: 1;
    }

    .stat .lbl {
        font-size: 11px;
        /*color: #8aaecf;*/
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-top: 2px;
    }

.version-nav {
    padding: 0 40px;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

    .version-nav button {
        background: none;
        border: none;
        color: #dee2e6 !important;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: .15s;
    }

        .version-nav button.active {
            /*color: #fff;*/
            border-bottom-color: #dee2e6;
        }

        .version-nav button:hover:not(.active) {
            color: #c0d4ee;
        }

.version-main {
    padding: 28px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.tab {
    display: none;
}

    .tab.active {
        display: block;
    }

.filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .filters input, .filters select {
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 13px;
        background: #fff;
        color: var(--text);
        outline: none;
    }

    .filters input {
        width: 260px;
    }

        .filters input:focus, .filters select:focus {
            border-color: var(--steel);
        }

.count-label {
    font-size: 12px;
    /*color: var(--muted);*/
    margin-left: auto;
}

.card-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card {
    background: #393e40 !important;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
}

    .card-header:hover {
        background: rgba(0,0,0,.2) !important;
    }

.card-id {
    font-size: 11px;
    /*font-family: 'Cascadia Code', 'Consolas', monospace;*/
    color: var(--muted);
    background: var(--silver);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    margin-top: 2px;
    flex-shrink: 0;
}

.card-title {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}

.card-body {
    padding: 0 16px 14px 16px;
    border-top: 1px solid var(--border);
    display: none;
}

.card.open .card-body {
    display: block;
}

.card-body p {
    /*color: #3a4a60;*/
    font-size: 13px;
    margin-top: 10px;
}

.card-body .desc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    /*color: var(--muted);*/
    margin-top: 12px;
}

.chevron {
    font-size: 12px;
    color: var(--muted);
    margin-left: 8px;
    flex-shrink: 0;
    margin-top: 4px;
    transition: transform .15s;
}

.card.open .chevron {
    transform: rotate(90deg);
}

.badge {
    display: inline-block;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-delivered {
    background: var(--mint);
    color: var(--success);
}

.badge-closed {
    background: var(--closed-bg);
    color: var(--closed-text);
}

.badge-ready {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-pilot {
    background: #ede9fe;
    color: #5b21b6;
}

.badge-active {
    background: var(--amber);
    color: var(--warn);
}

.badge-transferred {
    background: #fce7f3;
    color: #9d174d;
}

.badge-design {
    background: #fff7ed;
    color: #c2410c;
}

.badge-testing {
    background: #d1fae5;
    color: #065f46;
}

.badge-default {
    background: var(--sky);
    color: var(--blue);
}

.badge-di {
    background: #e0e7ff;
    color: #3730a3;
}

.badge-req {
    background: #f0fdf4;
    color: #166534;
}

.badge-downloaded {
    background: #e0f2fe;
    color: #075985;
}

.badge-removed {
    background: var(--rose);
    color: var(--danger);
}

.badge-resolved {
    background: var(--mint);
    color: var(--success);
}

.badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.meta-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.meta-item {
    font-size: 12px;
    /*color: var(--muted);*/
}

    .meta-item strong {
        /*color: var(--text);*/
        font-weight: 600;
    }

.table-wrap {
    overflow-x: auto;
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.version-main table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.version-main thead th {
    background: #242728 !important;
    /*color: #d0e0f5;*/
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 9px 12px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
}

.version-main tbody tr {
    border-bottom: 1px solid var(--border);
    background: #393e40 !important;
}

.version-maint body tr:nth-child(even) {
    background: var(--silver);
}

.version-maint body tr:hover {
    /*background: var(--sky);*/
}

.version-main td {
    padding: 9px 12px;
    vertical-align: top;
}

    .version-main td.id-col {
        /*font-family: 'Cascadia Code','Consolas',monospace;*/
        font-size: 11px;
        /*color: var(--muted);*/
        white-space: nowrap;
        font-weight: 500;
    }

    .version-main td.title-col {
        font-weight: 500;
        max-width: 340px;
    }

        .version-main td.title-col .sub-desc {
            display: block;
            font-weight: 400;
            /*color: var(--muted);*/
            font-size: 11px;
            margin-top: 3px;
        }

    .version-main td.note-col {
        /*color: #2a5a35;*/
        /*font-size: 12px;*/
        max-width: 320px;
        font-weight: 600;
    }

    .version-main td.comp-col {
        font-size: 11px;
        /*color: var(--muted);*/
        max-width: 160px;
    }

    .version-main td.cat-col {
        white-space: nowrap;
    }

    .version-main td.ver-col {
        font-size: 11px;
        /*color: #3a4a60;*/
    }

    .version-main td.ticket-col {
        /*font-family: monospace;*/
        font-size: 11px;
        /*color: var(--muted);*/
    }

.tag-pill {
    display: inline-block;
    background: #e8f0f9;
    color: #1e3a6e;
    border-radius: 10px;
    font-size: 10px;
    padding: 1px 7px;
    margin: 1px 2px;
    white-space: nowrap;
}

.empty {
    color: var(--muted);
    font-style: italic;
    text-align: center;
    padding: 32px;
}

.ver-tag {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 4px;
    font-size: 10px;
    padding: 1px 6px;
    margin: 1px 2px;
    white-space: nowrap;
}

[dir=ltr]:root[data-theme=default] .version-hdr {
    color:#495057 !important;
}

[dir=ltr]:root[data-theme=default] .stat {
    background: rgba(0, 0, 0, .1) !important;
}

[dir=ltr]:root[data-theme=default] .version-main thead th {
    background: #f8f9fa !important;
}

[dir=ltr]:root[data-theme=default] .version-main tbody tr {
    background: #eaeaea !important;
}

[dir=ltr]:root[data-theme=default] .card {
    background: rgba(0, 0, 0, .1) !important;
}

[dir=ltr]:root[data-theme=default] .version-nav button {
    color: #495057 !important;
}

[dir=ltr]:root[data-theme=default].card-header:hover {
    background: rgba(0,0,0,.2) !important;
}

[dir=ltr]:root[data-theme=default] .version-nav button.active {
    border-bottom-color: #495057 !important;
}

@media (max-width: 760px) {
    .version-main, .version-hdr, .version-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .version-hdr {
        padding-top: 20px;
        padding-bottom: 16px;
    }

        .version-hdr h1 {
            font-size: 22px;
        }

        .version-hdr p {
            font-size: 12px;
        }

    .header-meta {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        margin-top: 12px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

        .header-meta::-webkit-scrollbar {
            display: none;
        }

    .stat {
        flex-shrink: 0;
        padding: 6px 12px;
    }

        .stat .n {
            font-size: 19px;
        }

        .stat .lbl {
            font-size: 10px;
        }

    .verions-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .version-nav::-webkit-scrollbar {
        display: none;
    }

    .version-nav button {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .version-main {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .filters input, .filters select {
            width: 100%;
        }

    .count-label {
        margin-left: 0;
        text-align: left;
    }

    .card-header {
        padding: 12px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .card-title {
        font-size: 13px;
        flex-basis: 100%;
        order: -1;
    }

    .card-id {
        order: 0;
    }

    .badges {
        order: 1;
    }

    .chevron {
        order: 2;
        margin-left: auto;
    }

    .meta-row {
        gap: 8px 16px;
    }

    /*Turn wide data tables into stacked, labeled cards on small screens*/
    .table-wrap {
        overflow-x: visible;
    }

    .version-main table, thead, tbody, th, tr {
        display: block;
    }

    thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    tbody tr {
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 4px 12px;
    }

    td {
        display: block;
        padding: 7px 0;
        border: none;
        max-width: none !important;
        white-space: normal !important;
    }

        td:not(:last-child) {
            border-bottom: 1px dashed var(--border);
        }

        td::before {
            content: attr(data-label);
            display: block;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .4px;
            color: var(--muted);
            margin-bottom: 3px;
        }
}

@media (max-width: 420px) {
    .version.hdr h1 {
        font-size: 16px;
    }

    .stat .n {
        font-size: 17px;
    }
}