/* Vigilant site-specific styles.
   The shared b-* vocabulary lives in /static/ds/css/ (design-system/css in
   the repo). This file holds only what the design system deliberately does
   not cover, and loads AFTER it so responsive overrides win. */

/* ── Inline icon ─────────────────────────────────────────────────── */
.corp-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border: 1px solid var(--border);
    flex-shrink: 0;
    filter: grayscale(20%);
}

/* ── HTMX ────────────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* ── ESI banner override ─────────────────────────────────────────── */
#esi-banner > div {
    border-top: none;
    border-left: none;
    border-right: none;
}

/* ── Structure alert banners ─────────────────────────────────────── */
.structure-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 2rem;
    font-size: 12px;
    letter-spacing: 0.04em;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
}
.structure-alert-banner.is-danger {
    background: rgba(204, 51, 51, 0.10);
    border-left: 3px solid var(--danger);
    color: var(--danger);
}
.structure-alert-banner.is-warn {
    background: rgba(200, 169, 81, 0.08);
    border-left: 3px solid var(--warn);
    color: var(--warn);
}
.structure-alert-banner .alert-icon { font-size: 13px; flex-shrink: 0; }
.structure-alert-banner .alert-text { min-width: 0; }
.structure-alert-banner .alert-text strong { font-weight: 600; }
.structure-alert-banner .alert-time { color: var(--muted); font-size: 11px; }
.structure-alert-banner .alert-dismiss {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    flex-shrink: 0;
    font-family: inherit;
    transition: color 0.1s;
}
.structure-alert-banner .alert-dismiss:hover { color: var(--text); }

/* ── Focus visibility (keyboard nav) ─────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
/* Inline-text affordances get a thin gold underline instead of a box */
.b-link:focus-visible,
.b-nav-link:focus-visible,
.b-nav-dropdown-item:focus-visible,
.b-tab-strip a:focus-visible,
.b-footer-link:focus-visible,
.b-breadcrumbs a:focus-visible,
.b-mobile-menu a:focus-visible {
    outline: none;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

/* ── Mobile hamburger ─────────────────────────────────────────── */
.b-hamburger {
    display: none;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0;
}
.b-hamburger:hover { color: var(--text); }
.b-hamburger svg { flex-shrink: 0; }
.b-mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    overflow-y: auto;
    border-bottom: none;
    border-top: 1px solid var(--border);
}
.b-mobile-menu.is-open { display: flex; }
.b-mobile-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.1s, background 0.1s;
}
.b-mobile-menu a:hover { color: var(--text); background: rgba(200,169,81,0.05); }
.b-mobile-menu a.is-active { color: var(--accent); font-weight: 500; }
.b-mobile-menu .b-mobile-sep {
    border-top: 1px solid var(--border);
    margin: 0.25rem 1.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .b-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Nav-only breakpoint, deliberately separate from the general 768px tablet
   block below: with 8 top-level groups (see app/nav.py) plus the notif
   bell / Add Character / Logout links, .b-nav-links (display:flex, no
   flex-wrap) starts overflowing the sticky nav well above 768px — the
   hamburger needs to take over earlier than the rest of the tablet layout
   does. Measured against the current registry; bump this if groups are
   added. */
@media (max-width: 1120px) {
    .b-nav-links { display: none; }
    .b-hamburger { display: flex; }
}
@media (max-width: 768px) {
    .b-footer { flex-direction: column; gap: 0.75rem; text-align: center; }
    .b-footer-links { flex-wrap: wrap; justify-content: center; }
    .b-breadcrumbs { padding: 0.5rem 1rem; }
    /* Touch-friendly form elements on tablets */
    input, select, textarea, .b-btn, button { min-height: 38px; }
    /* Page headers stack vertically */
    .b-page-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}
@media (max-width: 640px) {
    .b-grid-3 { grid-template-columns: 1fr; }
    .b-grid-2 { grid-template-columns: 1fr; }
    .b-nav { padding: 0 1rem; }
    .b-main { padding: 1.5rem 1rem; }
    .b-stats { flex-wrap: wrap; }
    .b-stat { flex: 1 1 45%; }
    /* Full touch compliance on phones (44px Apple HIG) */
    input, select, textarea, .b-btn, button {
        min-height: 44px;
        font-size: max(12px, inherit);
    }
    /* Collapse inline 2-column grids to single column */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Prevent fixed-width inline elements from overflowing */
    [style*="width:340px"], [style*="width: 340px"] {
        width: 100% !important; max-width: 100% !important;
    }
    /* Reduce min-widths that cause horizontal overflow */
    [style*="min-width:150px"], [style*="min-width:160px"],
    [style*="min-width:180px"], [style*="min-width:200px"] {
        min-width: 0 !important;
    }
    /* Phone base bumped to 16px to prevent iOS input auto-zoom and meet web a11y floor */
    body { font-size: 16px; }
    .b-page-title { font-size: 18px; }
    /* Alert banners wrap text */
    .structure-alert-banner { flex-wrap: wrap; padding: 0.75rem 1rem; }
    /* Exempt tiny icon buttons from min-height rule */
    .alert-dismiss { min-height: auto !important; padding: 0.25rem; }
    /* Card rows: allow values to wrap for long text */
    .b-row { flex-wrap: wrap; gap: 0.25rem; }
    .b-row-val { white-space: normal; text-align: right; word-break: break-word; }
    /* Card actions: buttons wrap if needed */
    .b-actions { flex-wrap: wrap; }
    .b-actions .b-btn { min-height: 36px; }
    /* Card portraits slightly smaller on phones */
    .b-card-portrait { width: 64px; height: 64px; }
    /* Server bar stacks */
    .b-server-bar { flex-direction: column; gap: 0.25rem; padding: 0.4rem 1rem; }
}
@media (max-width: 480px) {
    .b-main { padding: 1rem 0.75rem; }
    .b-nav { padding: 0 0.75rem; }
    .b-stat { flex: 1 1 100%; }
}

/* T-031 round 3: CSS hover utilities to replace inline mouseover/out
   handlers. Avoid inline event handlers so CSP can drop unsafe-inline
   in T-033.
   NOTE: Do NOT pair any of these classes with an inline declaration
   of the property they animate — inline style has higher CSS
   specificity than a class `:hover` rule and silently masks the
   effect. Affected pairings:
     .b-hover-accent / .b-hover-surface / .b-hover-row — `background`
     .b-hover-underline                                — `text-decoration`
   The `.b-hover-row` / `.b-hover-underline` rules below declare the
   non-hover state inside the class so the row-style and anchor-
   underline conventions stay self-contained. */
.b-hover-accent:hover    { background: rgba(200,169,81,0.07); }
.b-hover-surface:hover   { background: var(--surface); }
.b-hover-row             { background: var(--bg); transition: background 0.15s; }
.b-hover-row:hover       { background: var(--surface); }
/* Hover-only highlight that keeps a transparent rest state. Use on
   rows inside a panel where the row should NOT carry its own
   background at rest (otherwise it stands out from the panel
   surface even when un-hovered). See ISS-025. */
.b-hover-transparent        { background: transparent; transition: background 0.15s; }
.b-hover-transparent:hover  { background: var(--surface); }
/* Hover to var(--bg) — used by the fitting-tool implant search
   dropdown where the panel surface is var(--surface) and rows want
   to deepen on hover rather than lighten. ISS-020. */
.b-hover-bg:hover        { background: var(--bg); }
.b-hover-underline       { text-decoration: none; }
.b-hover-underline:hover { text-decoration: underline; }

/* entity_links cross-link chip row (partials/_entity_links.html) — small
   muted deep-links to a character/system/item's related pages. */
.el-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.el-chip {
    font-size: 10px; letter-spacing: 0.04em; line-height: 1.4;
    color: var(--muted); border: 1px solid var(--border);
    padding: 2px 7px; border-radius: 3px; text-decoration: none; white-space: nowrap;
    transition: color 0.1s, border-color 0.1s;
}
.el-chip:hover { color: var(--text); border-color: var(--muted); }
.el-chip.is-ext::after { content: " \2197"; font-size: 9px; }

/* ── Range filter buttons (character_detail / mining_ledger / structure_timers) ── */
/* T-039: was defined verbatim in all three template style blocks; promoted
   here since the rules were byte-identical across all three. */
.range-btn {
    padding: 0.25rem 0.6rem;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.range-btn:hover { color: var(--text); border-color: var(--muted); }
.range-btn.is-active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(200, 169, 81, 0.07);
}

/* ── Killfeed shared (.kf-*) ── */
/* T-039: rules identical (or trivially combinable) between intel_kills.html
   and intel_kills_search.html — the search page copies the live feed's
   kill-row/detail-panel markup ("Feature A pattern") to render results.
   Kept here so both pages stay in sync; each template still owns the
   .kf-* rules that are unique to its own layout (filter chips on
   intel_kills.html; .kfs-* filter UI on intel_kills_search.html). */
.kf-row {
    display:grid; grid-template-columns:36px 1fr 90px; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--border); align-items:center; font-size:11px;
    color:var(--text); cursor:pointer; transition: background-color 0.2s ease;
}
.kf-row:hover { background:rgba(94,177,255,0.04); }
.kf-row.open { background:rgba(94,177,255,0.08); border-bottom:1px solid var(--accent); }
.kf-ship-thumb { width:36px; height:36px; border-radius:3px; background:var(--surface); }
.kf-meta-top { color:var(--text); }
.kf-meta-bot { color:var(--muted); font-size:10px; }
.kf-isk { text-align:right; color:#facc15; font-weight:600; }
.kf-ago { display:block; color:var(--muted); font-size:9px; font-weight:400; }
.kf-sys-hs { color:#4ade80; }
.kf-sys-ls { color:#facc15; }
.kf-sys-ns { color:#ef4444; }
.kf-sys-wh { color:#a78bfa; }
.kf-sys-unknown { color:var(--muted); }
.kf-npc-badge { display:inline-block; background:var(--surface); color:var(--muted); padding:0 4px; font-size:8px; font-weight:600; letter-spacing:0.08em; border-radius:2px; border:1px solid var(--border); margin-left:4px; vertical-align:middle; }
/* Expand/collapse animation: max-height 0 → grown, with opacity + padding eased. */
.kf-detail {
    background:rgba(94,177,255,0.04);
    border-bottom:2px solid var(--accent);
    max-height:0;
    opacity:0;
    overflow:hidden;
    padding:0 14px;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out 0.05s, padding 0.3s ease-out;
}
.kf-detail.shown {
    max-height:2400px;
    opacity:1;
    padding:14px;
}
.kf-detail h4 { margin:0 0 6px; font-size:10px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; }
/* 3 columns: Victim+ISK | Fitting | Attackers */
.kf-detail-grid { display:grid; grid-template-columns:240px minmax(0,1fr) 320px; gap:16px; align-items:start; }
.kf-detail-left, .kf-detail-middle, .kf-detail-right { min-width:0; }
.kf-detail-right { max-height:560px; overflow-y:auto; padding-right:4px; }
.kf-isk-block { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.kf-isk-value { font-size:18px; color:#facc15; font-weight:600; margin:4px 0 10px; font-family:"SF Mono",Menlo,monospace; }
.kf-zkb-link { font-size:10px; color:var(--accent); text-decoration:none; border:1px solid var(--accent); padding:4px 8px; display:inline-block; border-radius:3px; }
.kf-victim-card { display:flex; gap:12px; align-items:flex-start; font-size:11px; line-height:1.6; }
.kf-slot-group { margin-bottom:6px; }
.kf-slot-label { font-size:9px; color:var(--muted); letter-spacing:0.12em; margin-bottom:2px; text-transform:uppercase; }
.kf-slot { display:grid; grid-template-columns:18px 1fr 14px; gap:6px; padding:2px 0; align-items:center; font-size:10px; }
.kf-slot-name { color:var(--text); }
.kf-slot-name.dropped { color:#4ade80; }
.kf-slot-name.destroyed { color:#ef4444; opacity:0.85; }
.kf-slot-dot { width:6px; height:6px; border-radius:50%; }
.kf-slot-dot.d { background:#ef4444; }
.kf-slot-dot.k { background:#4ade80; }
/* Compact attacker rows for the right column (zKB-style). */
.kf-attacker-compact { display:grid; grid-template-columns:28px 1fr; gap:8px; padding:6px 0; border-bottom:1px dotted var(--border); align-items:start; font-size:11px; }
.kf-attacker-compact.fb { background:rgba(239,68,68,0.05); margin:0 -4px; padding-left:4px; padding-right:4px; }
.kf-attacker-compact .info { min-width:0; }
.kf-attacker-compact .line1 { color:var(--text); }
.kf-attacker-compact .line1 a { color:var(--text); font-weight:600; text-decoration:none; }
.kf-attacker-compact .line2 { color:var(--muted); font-size:10px; margin-top:1px; }
.kf-attacker-compact .line2 .ship { color:var(--accent); }
.kf-attacker-compact .line3 { font-size:10px; margin-top:3px; color:#facc15; display:flex; align-items:center; gap:6px; }
.kf-attacker-compact .line3 .dmg-none { color:var(--muted); }
.kf-attacker-compact .line3 .pct { color:var(--muted); font-size:9px; }
.kf-attacker-compact .kf-dmg-bar { flex:1; min-width:30px; margin-top:0; }
.kf-fb-badge { display:inline-block; background:#ef4444; color:#0a0c0f; padding:1px 5px; font-size:8px; font-weight:700; letter-spacing:0.08em; border-radius:2px; margin-left:4px; vertical-align:middle; }
.kf-dmg-bar { height:4px; background:var(--surface); border-radius:2px; margin-top:3px; overflow:hidden; }
.kf-dmg-bar .fill { height:100%; background:linear-gradient(90deg,#facc15,#ef4444); }
@keyframes kf-row-in {
    0%   { opacity:0; transform:translateY(-8px); background-color:rgba(94,177,255,0.18); }
    60%  { opacity:1; transform:translateY(0); background-color:rgba(94,177,255,0.10); }
    100% { background-color:transparent; }
}
.kf-row.kf-new { animation: kf-row-in 0.55s ease-out; }

/* ── Structure-age estimate (tool page + wormhole system embed) ─────────── */
.sa-input {
    width: 100%; padding: 0.5rem 0.6rem;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--text); font: inherit; font-size: 11px;
    resize: vertical; min-height: 70px;
    font-family: monospace;
}
.sa-input:focus { outline: none; border-color: var(--accent); }
.sa-submit {
    padding: 0.45rem 1.25rem; background: transparent;
    border: 1px solid var(--accent); color: var(--accent);
    font: inherit; font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; cursor: pointer;
}
.sa-submit:hover { background: var(--accent); color: var(--bg); }
.sa-method {
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 1px 6px; border: 1px solid var(--border); color: var(--muted);
    margin-left: 0.5rem;
}
.sa-method.is-exact { border-color: var(--success); color: var(--success); }
.sa-method.is-interpolate { border-color: var(--accent); color: var(--accent); }
.sa-method.is-extrapolate { border-color: var(--muted); color: var(--muted); }
.sa-age {
    font-size: 28px; font-weight: 300; letter-spacing: -0.02em;
    color: var(--accent); line-height: 1;
}
.sa-window { font-size: 11px; color: var(--muted); margin-top: 0.25rem; }
.sa-date-row { display: flex; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; }
.sa-date-col { display: flex; flex-direction: column; gap: 2px; }
.sa-date-lbl { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sa-date-val { font-size: 13px; color: var(--text); font-family: monospace; }
.sa-meta { display: flex; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; }
.sa-meta-item { display: flex; flex-direction: column; gap: 2px; }