/* ==========================================================================
   Attack Manager tab (#tab-attack-manager) + its modals
   Phase 1 redesign. Tokens only (css/tokens.css), components from style.css.
   Sections
     2 Sub-tabs
     3 Tables inside sub-tab cards (attacks, history, farm list)
     4 Troops cell
     5 Add attack form
     6 Farm list: header, groups, oasis stats
     7 Modals (import, create village / farm list, JS-built selection modals)
     8 Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   2 Sub-tabs (segmented, thumb slides; see style.css section 11)
   -------------------------------------------------------------------------- */
.am-subtabs .sub-tab-btn .i { font-size: 15px; }

.am-subtab-label { white-space: nowrap; }

/* --------------------------------------------------------------------------
   3 Tables inside the sub-tab cards
   The containers sit one level deeper than .card > .table-container, so the
   edge bleed from style.css section 08 is repeated here.
   -------------------------------------------------------------------------- */
#tab-attack-manager :is(#active-attacks-container, #attack-history-container, #farm-list-container) {
    margin-inline: calc(var(--card-pad) * -1);
    margin-bottom: calc(var(--card-pad) * -1);
    border-width: 1px 0 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.am-table-container > .empty-state {
    padding-block: var(--space-10);
}

.am-attacks-table th:last-child,
.am-attacks-table td:last-child {
    padding-right: var(--space-4);
}

.am-attacks-table th:first-child,
.am-attacks-table td:first-child,
.am-farm-table th:first-child,
.am-farm-table td:first-child {
    padding-left: var(--space-4);
}

.am-coords {
    color: var(--text);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.am-datetime {
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.countdown-timer {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4 Troops cell (markup from formatTroopsDisplay in app.js)
   teuton_units.css keeps a hard-coded grey for .troop-upgrades; tokens here.
   -------------------------------------------------------------------------- */
#tab-attack-manager .troop-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
}

#tab-attack-manager .troop-item {
    gap: 6px;
}

#tab-attack-manager .troop-count {
    color: var(--text);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

#tab-attack-manager .troop-upgrades {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-3);
    font-size: var(--text-xs);
}

.troop-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

.troop-upgrade .i { font-size: 11px; }

/* --------------------------------------------------------------------------
   5 Add attack form
   -------------------------------------------------------------------------- */
.am-attack-form {
    max-width: 880px;
}

.am-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.am-fieldset + .am-fieldset {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

/* float keeps the legend inside the box, not on the fieldset border line */
.am-legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.am-legend-note {
    color: var(--text-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
}

.am-form-grid {
    clear: both;
    margin-bottom: 0;
}

/* X / Y and date / time pair up even on a phone */
.am-form-grid:not(.form-grid--2) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

/* "Кто отправил" narrow, "Заметки" wide */
.am-form-grid.form-grid--2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.am-attack-form textarea {
    min-height: calc(var(--control-h) * 2);
    resize: vertical;
}

.am-form-actions {
    margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   6 Farm list
   -------------------------------------------------------------------------- */
.am-farm-header {
    align-items: flex-start;
}

.am-farm-heading {
    min-width: 0;
    flex: 1 1 320px;
}

.am-farm-desc {
    margin: var(--space-1) 0 0;
    max-width: 68ch;
    color: var(--text-3);
    font-size: var(--text-sm);
}

/* Group rows: village > farm list > items. Grouped by fill and indent, not stripes. */
.am-farm-table tr.farm-group > td {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.am-farm-table tr.farm-group--village > td,
.am-farm-table tr.farm-group--village:hover > td {
    background: var(--surface-2);
    color: var(--text);
}

.am-farm-table tr.farm-group--list > td,
.am-farm-table tr.farm-group--list:hover > td {
    padding-left: var(--space-8);
    background: var(--surface);
}

.am-farm-table tr.farm-group--note > td,
.am-farm-table tr.farm-group--note:hover > td {
    padding-left: var(--space-8);
    background: var(--surface);
    color: var(--text-3);
    font-size: var(--text-sm);
}

.am-farm-table tr.farm-group--nested > td,
.am-farm-table tr.farm-group--nested:hover > td {
    padding-left: var(--space-12);
}

.farm-group-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
}

.farm-group-head > .i {
    color: var(--text-3);
    font-size: 16px;
}

.farm-group-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: var(--weight-semibold);
}

.farm-group--list .farm-group-name {
    font-weight: var(--weight-medium);
}

.farm-group-meta {
    color: var(--text-3);
    font-size: var(--text-sm);
}

.farm-group-spacer { flex: 1 1 auto; }

.farm-group-head .btn { flex: none; }

.farm-player {
    font-weight: var(--weight-semibold);
}

.am-farm-table td.col-type .chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.farm-oasis-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-5);
}

.farm-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.farm-stat-label {
    color: var(--text-3);
    font-size: var(--text-xs);
}

.farm-stat .num {
    font-weight: var(--weight-medium);
}

.am-farm-table td.col-added {
    font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   7 Modals
   -------------------------------------------------------------------------- */
.am-import-text {
    min-height: 240px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    resize: vertical;
    tab-size: 4;
}

.am-kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-3);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.am-kbd-hint kbd {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-2xs);
}

.am-kbd-hint kbd:last-of-type { margin-right: 3px; }

.am-modal-lead {
    margin: 0 0 var(--space-4);
    color: var(--text-2);
    font-size: var(--text-sm);
}

.am-modal-lead strong { color: var(--text); }

/* Checkbox list in the farm-list selection modal */
.am-choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: min(400px, 50dvh);
    overflow-y: auto;
}

.am-choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-h-lg);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.am-choice:hover { background: var(--surface-3); }

.am-choice:has(input:checked) {
    border-color: var(--border-strong);
    background: var(--row-selected);
}

.am-choice:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.am-choice input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
}

.am-choice-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

.am-choice-meta { flex: none; }

/* --------------------------------------------------------------------------
   8 Responsive
   -------------------------------------------------------------------------- */

/* Stacked cards (<900px): attacks and history have no checkbox and no sort chips */
@media (max-width: 899px) {
    .am-attacks-table thead { display: none; }

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

    /* First card row: oasis left, countdown right */
    .am-attacks-table.table--stack td.col-coords { order: -2; }
    .am-attacks-table.table--stack td.col-countdown { order: -1; }

    #attack-history-table.table--stack td.col-coords { grid-column: 1 / -1; }

    .am-attacks-table.table--stack td.col-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: var(--space-1);
    }

    .am-attacks-table td:first-child,
    .am-farm-table td:first-child { padding-left: 0; }

    .am-attacks-table td:last-child { padding-right: 0; }

    .am-datetime { white-space: normal; }

    /* Farm list groups become full-width bands between item cards */
    .am-farm-table.table--stack tbody tr.farm-group {
        display: block;
        padding: var(--space-2) var(--space-4);
    }

    .am-farm-table.table--stack tbody tr.farm-group--village {
        background: var(--surface-2);
    }

    .am-farm-table.table--stack tbody tr.farm-group--list,
    .am-farm-table.table--stack tbody tr.farm-group--note {
        padding-left: var(--space-6);
        background: var(--surface);
    }

    .am-farm-table.table--stack tbody tr.farm-group--nested {
        padding-left: var(--space-8);
    }

    .am-farm-table.table--stack tbody tr.farm-group > td,
    .am-farm-table.table--stack tbody tr.farm-group:hover > td {
        padding: 0;
        background: none;
    }

    .am-farm-table.table--stack tbody tr.farm-group:hover { background: inherit; }
    .am-farm-table.table--stack tbody tr.farm-group--village:hover { background: var(--surface-2); }
    .am-farm-table.table--stack tbody tr.farm-group--list:hover,
    .am-farm-table.table--stack tbody tr.farm-group--note:hover { background: var(--surface); }

    .am-farm-table.table--stack td.col-type { grid-column: 1 / -1; }

    .farm-oasis-stats { gap: var(--space-1) var(--space-4); }
}

@media (max-width: 768px) {
    .am-farm-toolbar {
        width: 100%;
    }

    .am-farm-toolbar > .btn {
        flex: 1 1 auto;
    }

    .am-kbd-hint { display: none; }

    .am-form-grid.form-grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: sub-tabs keep all four options visible (icon over a short label) */
@media (max-width: 560px) {
    .am-subtabs .sub-tab-btn {
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        height: auto;
        min-height: 48px;
        padding: var(--space-1) 6px;
        font-size: var(--text-2xs);
        line-height: 1.2;
    }

    .am-subtabs .sub-tab-btn .i { font-size: 18px; }

    .am-subtab-extra { display: none; }
}

@media (max-width: 480px) {
    .am-farm-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}