/* ==========================================================================
   Tool tabs: Unit Cost Calculator (#tab-unit-cost-calc) and Updates
   (#tab-updates). Loaded right after style.css. Tokens only, see
   DESIGN_SYSTEM.md. FL Simulator and TOP 10 live in their own files.
   ========================================================================== */

/* ==========================================================================
   Unit Cost Calculator
   Rows are rendered by js/modules/unit-cost-calc/index.js (renderRow),
   results by displayResults(). Each row is a quiet --surface-2 tile.
   ========================================================================== */

#tab-unit-cost-calc {
    --ucc-cols: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr) var(--control-h);
    --ucc-max: 860px;
}

/* Column captions above the rows (wide screens only) */
.ucc-row-head {
    display: grid;
    grid-template-columns: var(--ucc-cols);
    gap: var(--space-3);
    max-width: var(--ucc-max);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-3);
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.ucc-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: var(--ucc-max);
}

.ucc-row {
    display: grid;
    grid-template-columns: var(--ucc-cols);
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.ucc-row .ucc-field {
    margin: 0;
}

/* Each control keeps a real <label>; on wide screens the header row shows it */
.ucc-row .ucc-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ucc-row input[type="number"] {
    font-variant-numeric: tabular-nums;
}

.ucc-delete {
    color: var(--text-3);
}

.ucc-delete:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

.ucc-actions {
    margin-top: var(--space-4);
}

@media (max-width: 599px) {
    .ucc-row-head {
        display: none;
    }

    .ucc-row {
        /* Unit names are long: give the unit select the full width */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "tribe qty del"
            "unit unit unit";
        padding: var(--space-3);
    }

    .ucc-field--tribe { grid-area: tribe; }
    .ucc-field--unit { grid-area: unit; }
    .ucc-field--qty { grid-area: qty; }

    .ucc-delete {
        grid-area: del;
    }

    .ucc-row .ucc-field-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: var(--text-xs);
    }

    .ucc-actions .btn-primary {
        width: 100%;
    }
}

/* ---- Results table ------------------------------------------------------ */
.ucc-res-icon {
    margin: 0;
}

.ucc-table .ucc-col-unit {
    white-space: nowrap;
    font-weight: var(--weight-medium);
}

.ucc-table td.num {
    white-space: nowrap;
}

.ucc-table .ucc-col-sum,
.ucc-table .ucc-grand-total {
    font-weight: var(--weight-semibold);
}

.ucc-table tfoot td {
    padding: var(--space-3);
    border-top: 1px solid var(--border-strong);
    border-bottom: 0;
    background: var(--surface-2);
    color: var(--text);
    font-weight: var(--weight-semibold);
}

.ucc-total-label {
    color: var(--text-2);
}

/* Unit sprite (game asset): img/<tribe>_small.png, 16px per unit.
   The sprite files are not in the repo (they always 404'd and rendered an
   empty 16px gap), so the icon stays hidden. When the files are added,
   restore the three background-image lines and drop display: none. */
.ucc-unit-icon {
    display: none;
    width: 16px;
    height: 16px;
    margin-right: var(--space-2);
    background-repeat: no-repeat;
    vertical-align: -3px;
    image-rendering: pixelated;
}

/*
.ucc-unit-icon { display: inline-block; }
.ucc-unit-icon--roman_small { background-image: url('../img/roman_small.png'); }
.ucc-unit-icon--teuton_small { background-image: url('../img/teuton_small.png'); }
.ucc-unit-icon--gaul_small { background-image: url('../img/gaul_small.png'); }
*/

.ucc-unit-icon[data-unit="1"] { background-position: 0 0; }
.ucc-unit-icon[data-unit="2"] { background-position: 0 -16px; }
.ucc-unit-icon[data-unit="3"] { background-position: 0 -32px; }
.ucc-unit-icon[data-unit="4"] { background-position: 0 -48px; }
.ucc-unit-icon[data-unit="5"] { background-position: 0 -64px; }
.ucc-unit-icon[data-unit="6"] { background-position: 0 -80px; }
.ucc-unit-icon[data-unit="7"] { background-position: 0 -96px; }
.ucc-unit-icon[data-unit="8"] { background-position: 0 -112px; }
.ucc-unit-icon[data-unit="9"] { background-position: 0 -128px; }
.ucc-unit-icon[data-unit="10"] { background-position: 0 -144px; }

@media (max-width: 899px) {
    /* No sortable columns: hide the empty chip row */
    .ucc-table.table--stack thead {
        display: none;
    }

    .ucc-table.table--stack tbody tr {
        padding-left: var(--space-4);
    }

    .ucc-table.table--stack td.ucc-col-sum {
        grid-column: 1 / -1;
        padding-top: var(--space-2);
        border-top: 1px solid var(--border);
    }

    .ucc-table.table--stack td.ucc-col-qty::before {
        display: inline;
        margin-right: 6px;
    }

    /* Totals row becomes the last card */
    .ucc-table.table--stack tfoot {
        display: block;
    }

    .ucc-table.table--stack tfoot tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-top: 1px solid var(--border-strong);
        background: var(--surface-2);
    }

    .ucc-table.table--stack tfoot td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
    }

    .ucc-table.table--stack tfoot td.ucc-total-label,
    .ucc-table.table--stack tfoot td.ucc-grand-total {
        grid-column: 1 / -1;
    }

    .ucc-table.table--stack tfoot td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--text-3);
        font-size: var(--text-2xs);
        font-weight: var(--weight-medium);
    }
}

/* ==========================================================================
   Updates (changelog)
   Entry = meta column (version, date) + body. Sections are headed by an
   icon and a word, not coloured pills; items are name + description.
   ========================================================================== */

#tab-updates .changelog {
    --card-pad: var(--space-6);
}

#tab-updates .changelog-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
}

#tab-updates .changelog-entry:first-of-type {
    padding-top: var(--space-2);
    border-top: 0;
}

#tab-updates .changelog-entry:last-of-type {
    padding-bottom: 0;
}

#tab-updates .changelog-version {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

#tab-updates .changelog-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

#tab-updates .changelog-badge-old {
    background: var(--surface-2);
    color: var(--text-2);
}

#tab-updates .changelog-date {
    color: var(--text-3);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

#tab-updates .changelog-body {
    min-width: 0;
    max-width: 72ch;
}

#tab-updates .changelog-title {
    margin: 0 0 var(--space-5);
    color: var(--text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

#tab-updates .changelog-section {
    margin-bottom: var(--space-6);
}

#tab-updates .changelog-section:last-child {
    margin-bottom: 0;
}

#tab-updates .changelog-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: auto;
    margin: 0 0 var(--space-3);
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

#tab-updates .changelog-section-title .i {
    font-size: 14px;
}

/* Icon colour by meaning: added, improved, fixed */
#tab-updates .changelog-new .i { color: var(--success); }
#tab-updates .changelog-improved .i { color: var(--accent); }
#tab-updates .changelog-fixed .i { color: var(--warning); }

#tab-updates .changelog-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

#tab-updates .changelog-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: var(--space-6);
    color: var(--text-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

#tab-updates .changelog-list li strong {
    color: var(--text);
    font-weight: var(--weight-semibold);
}

/* Section without a heading (first release): no indent to align with */
#tab-updates .changelog-section:not(:has(.changelog-section-title)) .changelog-list li {
    padding-left: 0;
}

@media (min-width: 768px) {
    #tab-updates .changelog-entry {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: var(--space-8);
    }

    #tab-updates .changelog-version {
        flex-direction: column;
        align-items: flex-start;
        align-self: start;
        gap: var(--space-2);
        padding-top: 2px;
    }
}

@media (max-width: 599px) {
    #tab-updates .changelog {
        --card-pad: var(--space-4);
    }

    #tab-updates .changelog-list li {
        padding-left: 0;
    }
}