/* T28 — District Map & Detail (UX §5.4). Combined single screen: map + inline detail expand
   (GDD-Addendum §2 item 8). Exactly 3 P1 districts. */

.sd-districts {
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-5);
}

.sd-districts__layers {
    display: flex;
    gap: var(--sd-space-2);
    flex-wrap: wrap;
}

/* Overlord/Crime Rate/Enforcement Presence — visible but inert per the ticket's own instruction
   ("the toggle control can exist with the other options visibly disabled/absent rather than
   half-functional"), not absent entirely. */
.sd-chip--disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.sd-chip--disabled small {
    margin-left: var(--sd-space-1);
    font-family: var(--sd-font-data);
}

.sd-chip--modifier {
    cursor: default;
    color: var(--sd-text-primary);
}

.sd-districts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sd-space-4);
}

/* The azulejo signature (§1.6/§4.3): each district gets a distinct accent + a real per-district tile
   pattern (img/azulejo/*.svg) so the 3 panels read apart from each other without needing to read the
   name first — replaces the earlier placeholder (a single shared diagonal-stripe gradient every
   district used identically, which didn't actually deliver "distinct" anything). Only 3 variants exist
   — R1's other 4 districts (Porto, Faro, Sines, Coimbra) extend this list, not replace it, when they
   arrive. The pattern files are plain black-on-transparent shapes applied via `mask-image`, not a
   colour-baked image — `background-color: var(--sd-district-accent)` supplies the actual colour, so no
   hex value is introduced outside tokens.css (governance §5, "one theme file"). */
.sd-district-card {
    --sd-district-accent: var(--sd-accent);
    --sd-district-tile: none;

    position: relative;
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-border-default);
    border-top: 3px solid var(--sd-district-accent);
    border-radius: var(--sd-radius-lg);
    padding: var(--sd-space-4);
    cursor: pointer;
    transition: border-color var(--sd-dur-quick) var(--sd-ease);
    isolation: isolate;
}

.sd-district-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-color: var(--sd-district-accent);
    -webkit-mask-image: var(--sd-district-tile);
    mask-image: var(--sd-district-tile);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 32px 32px;
    mask-size: 32px 32px;
    border-radius: inherit;
}

.sd-district-card--lisbon {
    --sd-district-accent: var(--sd-clean);
    --sd-district-tile: url('/img/azulejo/lisbon.svg');
}

.sd-district-card--braga {
    --sd-district-accent: var(--sd-influence);
    --sd-district-tile: url('/img/azulejo/braga.svg');
}

.sd-district-card--alentejo {
    --sd-district-accent: var(--sd-dirty);
    --sd-district-tile: url('/img/azulejo/alentejo.svg');
}

.sd-district-card--expanded {
    border-color: var(--sd-district-accent);
}

.sd-district-card__header h3 {
    margin: 0;
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-md);
    color: var(--sd-text-primary);
}

.sd-district-card__role {
    margin: var(--sd-space-1) 0 var(--sd-space-3);
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
}

.sd-district-card__stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.sd-district-card__stat-label {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-xs);
    color: var(--sd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sd-district-card__stat-value {
    font-family: var(--sd-font-data);
    font-variant-numeric: var(--sd-numeric);
    font-size: var(--sd-text-lg);
    color: var(--sd-text-primary);
}

.sd-district-card__stat-value small {
    font-size: var(--sd-text-xs);
    color: var(--sd-text-secondary);
    margin-left: var(--sd-space-1);
}

/* Same tier colour convention as ThreatBoardPanel's sd-threat-row--tierN. */
.sd-district-card__stat--tier1 .sd-district-card__stat-value { color: var(--sd-heat-ghost); }
.sd-district-card__stat--tier2 .sd-district-card__stat-value { color: var(--sd-heat-flagged); }
.sd-district-card__stat--tier3 .sd-district-card__stat-value { color: var(--sd-heat-investigated); }
.sd-district-card__stat--tier4 .sd-district-card__stat-value { color: var(--sd-heat-target); }

.sd-district-card__detail {
    margin-top: var(--sd-space-4);
    padding-top: var(--sd-space-3);
    border-top: 1px solid var(--sd-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-2);
}

.sd-district-card__detail-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--sd-font-data);
    font-variant-numeric: var(--sd-numeric);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
}

.sd-district-card__modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-space-2);
    margin-top: var(--sd-space-2);
}