/**
 * TargetTrac V4 - NHS.uk Frontend Theme Override
 * Replaces NHS blues with alliance/war colours.
 * Adjust the palette variables here to match your alliance's branding.
 */

:root {
    /* ── Primary palette (replaces NHS blue #005EB8) ── */
    /*--tt-primary:       rgb(85, 2, 74);   /* dark navy — change to alliance colour */
    --tt-primary:       #55024a;
    --tt-primary-dark:  #3f0137;
    --tt-primary-light: #7a3b73;

    /* ── Accent (replaces NHS bright blue) ── */
    --tt-accent:        #e8b400;   /* gold/amber war theme */

    /* ── Semantic ── */
    --tt-danger:        #d5281b;   /* red — enemy / full slots */
    --tt-warning:       #f47738;   /* orange */
    --tt-success:       #007f3b;   /* green */
    --tt-neutral:       #4c6272;   /* grey-blue */

    /* ── Backgrounds ── */
    --tt-bg-dark:       #8c5a86;
    --tt-bg-mid:        #c8a3c3;
    --tt-bg-light:      #f5f0f4;
}

/* ── Override NHS header colours ── */
.nhsuk-header,
.tt-header {
    background-color: var(--tt-primary) !important;
    border-bottom: 4px solid var(--tt-accent);
}

.nhsuk-header__link,
.nhsuk-header__name {
    color: #ffffff !important;
        font-size: 3.85rem;
        text-decoration: none;
}


/* Widen container on milcom pages so the wide target table isn't clipped */
body.tt-milcom-dashboard .nhsuk-width-container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ── Target table ── */
.tt-target-table {
    width: 100%;
    font-size: 0.85rem;
}

.tt-target-table td,
.tt-target-table th {
    vertical-align: middle;
    white-space: nowrap;
}

/* Greyed-out rows (beige / vacation) */
.tt-row-greyed {
    opacity: 0.45;
}

/* ── Section spacing ── */
.tt-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* ── Dashboard header ── */
.tt-dashboard-header {
    background-color: var(--tt-bg-light);
    padding: 1rem;
    border-left: 4px solid var(--tt-accent);
    margin-bottom: 1.5rem;
}

/* ── Login cards ── */
.tt-login-card {
    border-left: 4px solid var(--tt-accent);
    margin-bottom: 1.5rem;
}

/* ── Discord button ── */
.tt-discord-btn {
    background-color: #5865f2 !important;
    border-bottom-color: #3d4cc7 !important;
}

/* ── WS status indicator ── */
#ws-status {
    font-size: 0.75rem;
}

/* ── Filter bar ── */
.tt-filter-bar {
    margin-bottom: 0.75rem;
}

/* ── Responsive table scroll ── */
.tt-target-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Milcom top bar ── */
.tt-milcom-topbar {
    border-bottom: 1px solid #d8dde0;
    padding: 1rem 0;
    margin-bottom: 0;
}

.tt-topbar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── War badge ── */
.tt-war-badge {
    font-size: 0.75rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ── Milcom table column widths ── */
.tt-milcom-table .tt-col-nation  { min-width: 160px; }
.tt-milcom-table .tt-col-aa      { min-width: 110px; }
.tt-milcom-table .tt-col-colour  { width: 65px; }
.tt-milcom-table .tt-col-cities  { width: 50px; }
.tt-milcom-table .tt-col-score   { width: 75px; }
.tt-milcom-table .tt-col-ground  { width: 85px; }
.tt-milcom-table .tt-col-air     { width: 55px; }
.tt-milcom-table .tt-col-sea     { width: 55px; }
.tt-milcom-table .tt-col-special { width: 70px; }
.tt-milcom-table .tt-col-slot    { min-width: 140px; }
.tt-milcom-table .tt-col-notes   { min-width: 130px; }
.tt-milcom-table .tt-col-timer   { width: 60px; }

/* ── Sortable column headers ── */
.tt-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tt-sortable:hover { background-color: rgba(0,94,184,0.08); }
.tt-sort-icon { font-size: 0.7rem; opacity: 0.55; margin-left: 0.2rem; }
.tt-sortable.tt-sort-asc  .tt-sort-icon,
.tt-sortable.tt-sort-desc .tt-sort-icon { opacity: 1; }

/* Leader name in nation cell */
.tt-leader { color: #4c6272; font-size: 0.8rem; }

/* ── Slot cells ── */
.tt-slot-empty {
    background: none;
    border: 1px dashed #4c6272;
    border-radius: 4px;
    color: #4c6272;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.6rem;
    transition: border-color 0.15s, color 0.15s;
    width: 100%;
}

.tt-slot-empty:hover {
    border-color: var(--tt-accent);
    color: var(--tt-accent);
}

.tt-slot-filled {
    position: relative;
    font-size: 0.8rem;
    padding-right: 1.5rem;
}

.tt-slot-edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    opacity: 0.6;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.tt-slot-edit:hover { opacity: 1; }

/* ── Notes cell ── */
.tt-notes-cell { font-size: 0.8rem; }
.tt-notes-btn  { background: none; border: none; cursor: pointer; font-size: 0.7rem; opacity: 0.5; }
.tt-notes-btn:hover { opacity: 1; }

/* ── Row status tinting ── */
.tt-row-beige td { background-color: rgba(244, 119, 56, 0.08) !important; }
.tt-row-vmode td { background-color: rgba(76, 98, 114, 0.08)  !important; }

/* Colour badge */
.tt-colour-badge { font-size: 0.65rem; }

/* ── Modal ── */
.tt-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tt-modal[hidden] { display: none; }

.tt-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.tt-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    max-height: 80vh;
    overflow-y: auto;
    border-left: 4px solid var(--tt-accent);
    background: #ffffff;
}

/* ── Modal ally list ── */
.tt-modal-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #4c6272;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.tt-modal-list-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(76, 98, 114, 0.3);
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.85rem;
    transition: background 0.1s;
    color: inherit;
}

.tt-modal-list-item:hover:not([disabled]) {
    background: rgba(232, 180, 0, 0.12);
}

.tt-modal-list-item--taken {
    opacity: 0.45;
    cursor: default;
}

/* ── Danger button ── */
.tt-btn-danger {
    background-color: var(--tt-danger) !important;
    border-bottom-color: #a01c11 !important;
}

/* ── Icon button ── */
.tt-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.25rem;
}

/* ── Loading row ── */
.tt-loading-row { padding: 1rem; text-align: center; }

/* ── Spy table column widths ── */
.tt-spy-table .tt-col-spies   { width: 50px; }
.tt-spy-table .tt-col-warpol  { min-width: 90px; }
.tt-spy-table .tt-col-espavail { width: 70px; }

/* ── War policy badges ── */
.tt-wp-arcane     { background-color: #d5281b !important; }
.tt-wp-tactician  { background-color: #007f3b !important; }
.tt-wp-covert     { background-color: #005EB8 !important; }

/* ── Spy legend ── */
.tt-spy-legend { margin-top: 0.5rem; }

/* ── Sortable headers ── */
.tt-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tt-sortable:hover { background-color: rgba(0,0,0,.04); }
.tt-sort-icon { font-style: normal; opacity: .55; margin-left: 2px; }
.tt-sort-asc .tt-sort-icon,
.tt-sort-desc .tt-sort-icon { opacity: 1; color: var(--tt-accent); }

/* ── VDS / Iron Dome columns (hidden until checkbox toggled) ── */
.tt-vds-col { display: none; }
#milcom-target-table.tt-show-vds .tt-vds-col { display: table-cell; }

/* ── Inline checkbox in filter bar ── */
.tt-inline-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 400;
    cursor: pointer;
    vertical-align: middle;
    margin-left: .5rem;
}
.tt-inline-checkbox { width: 1.1rem; height: 1.1rem; cursor: pointer; }

/* ── Survey date tags in active nations ── */
.tt-survey-tag { font-size: .75rem; }

/* ── Tier charts ── */
.tt-chart-wrap {
    position: relative;
    max-width: 900px;
    margin: 1rem 0 2rem;
}

.tt-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Toast notifications ── */
.tt-toast {
    position: fixed !important;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}