/* =============================================================================
   TOLA S6 — Fleet Intelligence Layer (N1–N20)
   يعتمد على متغيرات tola-design-system.css لدعم الوضعين الفاتح والداكن.
   ============================================================================= */

/* ---------- Global a11y ---------- */
:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.tfi-muted { color: var(--text-muted); font-style: normal; }
.tfi-sep { width: 1px; height: 16px; background: var(--border-color); display: inline-block; }
.tfi-link { background: none; border: 0; padding: 0; color: var(--color-info); cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tfi-link:hover { color: var(--brand-gold-hover); }
.tfi-h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--text-primary); }
.tfi-src { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.tfi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tfi-two > .tola-card { margin-bottom: 0; }
@media (max-width: 1100px) { .tfi-two { grid-template-columns: 1fr; } }

/* ---------- Banners ---------- */
.tfi-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid; font-size: 13px; margin-bottom: 12px; }
.tfi-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.tfi-banner > div { flex: 1; }
.tfi-banner.danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.tfi-banner.info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.tfi-banner.warn { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--color-warn); }

/* ---------- N2 Live strip ---------- */
.tfi-livestrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 14px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-secondary); box-shadow: var(--shadow-xs); }
.tfi-livestrip .tola-btn { margin-inline-start: 0; }
.tfi-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-offline); display: inline-block; flex-shrink: 0; }
.tfi-live-dot.on { background: var(--color-ok); box-shadow: 0 0 0 3px var(--color-ok-bg); }
.tfi-chipcount { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-full); font-weight: 700; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }

/* ---------- N20 Saved views ---------- */
.tfi-viewsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.tfi-viewsbar-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tfi-viewchip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-color); background: var(--surface-color); border-radius: var(--radius-full); font-size: 12px; overflow: hidden; }
.tfi-viewchip button { background: none; border: 0; padding: 4px 10px; cursor: pointer; color: var(--text-secondary); font: inherit; }
.tfi-viewchip button.x { padding: 4px 8px; color: var(--text-muted); border-inline-start: 1px solid var(--border-subtle); }
.tfi-viewchip button.x:hover { color: var(--color-danger); }
.tfi-viewchip.active { border-color: var(--brand-gold); background: var(--brand-gold-light); }
.tfi-viewchip.active button { color: var(--text-primary); font-weight: 700; }

/* ---------- N5 / §7.1 Fleet table ---------- */
.tfi-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tfi-sort span { font-size: 10px; color: var(--text-muted); }
.tfi-sort.active, .tfi-sort.active span { color: var(--brand-gold-hover); }
.tfi-row { cursor: pointer; }
.tfi-row:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; background: var(--brand-gold-light); }
.tfi-score { display: inline-block; min-width: 34px; text-align: center; padding: 2px 8px; border-radius: var(--radius-full); font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.tfi-stale-tag { font-size: 10.5px; font-weight: 700; color: var(--color-warn); margin-top: 2px; }
.tfi-cartbars { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.tfi-cartbar { position: relative; width: 9px; height: 100%; background: var(--surface-alt); border-radius: 2px; display: flex; align-items: flex-end; overflow: visible; }
.tfi-cartbar > span { display: block; width: 100%; border-radius: 2px; }
.tfi-cartbar em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-style: normal; color: inherit; opacity: 0.7; margin-top: 2px; }
.tfi-inspector .tfi-cartbars { height: 34px; gap: 8px; margin-bottom: 14px; }
.tfi-inspector .tfi-cartbar { width: 22px; background: rgba(255, 255, 255, 0.08); }
.tfi-timeline { display: flex; gap: 1px; width: 100%; border-radius: 3px; overflow: hidden; }
.tfi-timeline span { flex: 1; min-width: 1px; }

/* ---------- R-FLEET hero (N1) ---------- */
.tfi-hero { display: grid; grid-template-columns: auto 1fr 260px; gap: 22px; align-items: center; }
.tfi-hero-gauge { cursor: pointer; text-align: center; border-radius: var(--radius-md); padding: 4px; }
.tfi-hero-gauge:hover { background: var(--surface-hover); }
.tfi-hero-parts { display: flex; flex-direction: column; gap: 10px; }
.tfi-part-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.tfi-part-head em { font-size: 11px; }
.tfi-bar { height: 7px; background: var(--surface-alt); border-radius: var(--radius-full); overflow: hidden; }
.tfi-bar > span { display: block; height: 100%; border-radius: var(--radius-full); }
td .tfi-bar { margin-bottom: 3px; }
.tfi-hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tfi-mini { background: var(--surface-alt); border-radius: var(--radius-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.tfi-mini span { font-size: 11px; color: var(--text-muted); }
.tfi-mini strong { font-size: 16px; color: var(--text-primary); }
.tfi-mini em { font-size: 10.5px; color: var(--text-muted); font-style: normal; }
@media (max-width: 1200px) { .tfi-hero { grid-template-columns: auto 1fr; } .tfi-hero-side { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } }

/* Trend chart (LTR, not flipped) */
.tfi-trend { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 18px 4px 22px; }
.tfi-trend-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.tfi-trend-col .b { width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; }
.tfi-trend-col .v { font-size: 9.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-bottom: 2px; }
.tfi-trend-col .d { position: absolute; bottom: -18px; font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.tfi-target { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--color-danger); z-index: 1; pointer-events: none; margin-bottom: 22px; }
.tfi-target span { position: absolute; right: 0; top: -16px; font-size: 10px; color: var(--color-danger); font-weight: 700; background: var(--surface-color); padding: 0 4px; }
.tfi-alt-table { margin-top: 10px; font-size: 12.5px; }
.tfi-alt-table summary { cursor: pointer; color: var(--color-info); font-weight: 600; }
.tfi-alt-table table { margin-top: 8px; }

/* ---------- N19 Shortcuts ---------- */
.tfi-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-size: 13px; }
.tfi-shortcuts > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }

/* ---------- Segmented control ---------- */
.tfi-seg { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 3px; gap: 2px; flex-wrap: wrap; }
.tfi-seg label { font-size: 12px; color: var(--text-muted); padding: 5px 8px; }
.tfi-seg button { background: none; border: 0; padding: 5px 12px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.tfi-seg button:hover { color: var(--text-primary); }
.tfi-seg button.active { background: var(--brand-ink); color: var(--brand-gold); box-shadow: var(--shadow-sm); }

/* ---------- N6–N10 Map ---------- */
.tfi-mapcard .tola-card-header { border-bottom: 0; }
.tfi-regionbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.tfi-mapwrap { position: relative; min-height: 660px; background: radial-gradient(ellipse at 50% 40%, #13213A 0%, #0A0F1A 70%); border-top: 1px solid var(--border-color); overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.tfi-map-svg { display: block; width: 100%; height: 660px; user-select: none; touch-action: none; }
.tfi-map-svg.interactive { cursor: grab; }
.tfi-map-svg.dragging { cursor: grabbing; }
.tfi-map-svg .tola-map-pin { cursor: pointer; }
.tfi-map-svg .tola-map-pin:focus-visible { outline: none; }
.tfi-map-svg .tola-map-pin:focus-visible > circle:not(.tfi-pulse) { stroke: var(--brand-gold); stroke-width: 3; }

.tfi-mapctl { position: absolute; top: 14px; inset-inline-end: 14px; display: flex; flex-direction: column; gap: 4px; background: rgba(17, 22, 34, 0.88); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); padding: 4px; z-index: 3; }
.tfi-mapctl button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #FFF; font-size: 17px; cursor: pointer; }
.tfi-mapctl button:hover { background: rgba(201, 169, 97, 0.2); color: #C9A961; }
.tfi-zoomlvl { font-size: 10.5px; color: #C9A961; text-align: center; padding: 2px 0; }
.tfi-compass { position: absolute; top: 166px; inset-inline-end: 20px; width: 30px; text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 13px; line-height: 1; z-index: 2; }
.tfi-compass span { display: block; font-size: 10px; font-weight: 800; color: #C9A961; }

.tfi-legend { position: absolute; bottom: 12px; inset-inline-end: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: calc(100% - 360px); background: rgba(17, 22, 34, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); padding: 7px 12px; font-size: 11.5px; color: rgba(255, 255, 255, 0.85); z-index: 2; }
.tfi-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tfi-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tfi-legend .tfi-muted { color: rgba(255, 255, 255, 0.5); }
.tfi-legend.inline { position: static; max-width: none; background: none; border: 0; padding: 0; color: var(--text-secondary); }
.tfi-legend.inline .tfi-muted { color: var(--text-muted); }
.tfi-grad { width: 90px; height: 9px; border-radius: var(--radius-full); display: inline-block; }

.tfi-regionpanel { position: absolute; top: 14px; inset-inline-end: 62px; width: 270px; background: rgba(17, 22, 34, 0.95); border: 1px solid rgba(201, 169, 97, 0.45); border-radius: var(--radius-md); padding: 12px; color: #FFF; z-index: 3; box-shadow: var(--shadow-lg); }
.tfi-rp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #C9A961; font-size: 14px; }
.tfi-rp-head button { background: none; border: 0; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-size: 14px; }
.tfi-rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.tfi-rp-grid > div { background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.tfi-rp-grid span { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
.tfi-rp-grid strong { font-size: 13.5px; }
.tfi-rp-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 4px 0; color: rgba(255, 255, 255, 0.7); }
.tfi-regionpanel .tfi-link, .tfi-inspector .tfi-link { color: #E8D9B5; }
.tfi-regionpanel .tfi-muted { color: rgba(255, 255, 255, 0.55); }

.tfi-inspector { position: absolute; top: 14px; inset-inline-start: 14px; width: 310px; max-height: calc(100% - 28px); overflow-y: auto; background: rgba(13, 18, 28, 0.95); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: 14px; color: #FFF; z-index: 3; box-shadow: var(--shadow-xl); }
.tfi-insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tfi-insp-grid > div { background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.tfi-insp-grid span { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
.tfi-insp-grid strong { font-size: 13.5px; font-family: 'JetBrains Mono', monospace; }
.tfi-insp-note { margin-top: 10px; padding: 8px 10px; background: rgba(204, 6, 5, 0.14); border: 1px solid rgba(238, 52, 51, 0.4); border-radius: 6px; font-size: 12px; color: #FCA5A5; }
.tfi-insp-note code { color: #FFF; font-weight: 700; }
.tfi-insp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tfi-insp-actions .tola-btn-secondary { background: rgba(255, 255, 255, 0.06); color: #FFF; border-color: rgba(255, 255, 255, 0.18); }
.tfi-insp-actions .tola-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 900px) {
  .tfi-inspector { position: static; width: auto; max-height: none; border-radius: 0; }
  .tfi-legend { max-width: calc(100% - 28px); }
}

/* N10 — pulse only on critical, limited iterations (§11.8) */
.tfi-pulse { transform-box: fill-box; transform-origin: center; animation: tfiPulse 1.6s ease-out 5; }
@keyframes tfiPulse { 0% { transform: scale(0.7); opacity: 0.55; } 100% { transform: scale(1.8); opacity: 0; } }

/* N9 Floor plan */
.tfi-fp-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; margin-bottom: 10px; color: var(--text-secondary); }
.tfi-floorplan { width: 100%; height: auto; background: var(--surface-alt); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.tfi-floorplan .fp-outline { fill: var(--surface-color); stroke: var(--text-muted); stroke-width: 2; }
.tfi-floorplan .fp-corridor { fill: var(--surface-alt); stroke: var(--border-color); stroke-dasharray: 4 3; }
.tfi-floorplan .fp-store { fill: var(--surface-alt); stroke: var(--border-color); }
.tfi-floorplan .fp-esc { fill: var(--color-info-bg); stroke: var(--color-info); }
.tfi-floorplan .fp-label { font-size: 10px; fill: var(--text-muted); font-weight: 600; }
.tfi-floorplan .fp-gate { fill: var(--surface-color); stroke: var(--text-muted); stroke-width: 1.5; }
.tfi-floorplan .fp-gate.active { fill: var(--brand-gold); stroke: var(--brand-ink); stroke-width: 2; }
.tfi-floorplan .fp-gatenum { font-size: 10px; font-weight: 800; fill: var(--text-primary); pointer-events: none; }
.tfi-floorplan .fp-route { fill: none; stroke: var(--brand-gold); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; }
.tfi-floorplan .fp-kiosk { font-size: 11px; font-weight: 800; fill: var(--color-danger); font-family: 'JetBrains Mono', monospace; }

/* ---------- N3/N4 Fleet health ---------- */
.tfi-health-top { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
@media (max-width: 1000px) { .tfi-health-top { grid-template-columns: 1fr; } }
.tola-table.tfi-compact td, .tola-table.tfi-compact th { padding: 7px 10px; }
.tfi-formula { margin-top: 10px; padding: 8px 12px; background: var(--brand-gold-light); border: 1px dashed var(--brand-gold-border); border-radius: var(--radius-md); font-size: 11.5px; color: var(--text-secondary); }
.tfi-slabar { position: relative; height: 8px; background: var(--surface-alt); border-radius: var(--radius-full); margin: 6px 0 4px; }
.tfi-slabar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full); }
.tfi-slabar .tgt { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-primary); border-radius: 1px; }
.tfi-tl-grid { display: grid; grid-template-columns: 170px 1fr 64px; gap: 6px 12px; align-items: center; }
.tfi-tl-label { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; }
.tfi-tl-label .tfi-muted { font-size: 11px; }
.tfi-tl-up { font-size: 12px; font-weight: 700; text-align: center; color: var(--text-secondary); }
.tfi-tl-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* ---------- N11/N12 Predictive ---------- */
.tfi-thermal { display: grid; grid-template-columns: 1fr 130px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.tfi-thermal:last-child { border-bottom: 0; }
.tfi-risk { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.tfi-risk:last-of-type { border-bottom: 0; }
.tfi-route { display: grid; grid-template-columns: minmax(280px, 1fr) 1.2fr; gap: 20px; }
@media (max-width: 1000px) { .tfi-route { grid-template-columns: 1fr; } }
.tfi-routemap { width: 100%; height: auto; background: #0D1422; border-radius: var(--radius-md); }
.tfi-route-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.tfi-route-sum > div { background: var(--surface-alt); border-radius: var(--radius-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.tfi-route-sum span { font-size: 11px; color: var(--text-muted); }
.tfi-route-sum strong { font-size: 13.5px; }
.tfi-stops { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.tfi-stops li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.tfi-stops .n { width: 24px; height: 24px; border-radius: 50%; color: #FFF; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }

/* ---------- N14 Command queue ---------- */
.tfi-stepper { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.tfi-stepper span { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border-color); flex-shrink: 0; }
.tfi-stepper span.done { background: var(--color-ok); color: #FFF; border-color: var(--color-ok); }
.tfi-stepper span.fail { background: var(--color-danger); color: #FFF; border-color: var(--color-danger); }
.tfi-stepper i { width: 16px; height: 2px; background: var(--border-color); display: inline-block; }
.tfi-stepper em { font-style: normal; font-size: 11.5px; font-weight: 700; margin-inline-start: 8px; color: var(--color-info); white-space: nowrap; }
.tfi-stepper em.ok { color: var(--color-ok); }
.tfi-stepper em.fail { color: var(--color-danger); }

/* ---------- N13 Runbooks ---------- */
.tfi-runbook { border: 1px solid var(--border-color); border-inline-start: 4px solid var(--sev); border-radius: var(--radius-md); margin-bottom: 8px; background: var(--surface-color); }
.tfi-runbook.open { box-shadow: var(--shadow-md); }
.tfi-rb-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--text-primary); text-align: start; }
.tfi-rb-head:hover { background: var(--surface-hover); }
.tfi-rb-body { padding: 4px 14px 14px; }
.tfi-rb-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; font-size: 12.5px; }
.tfi-rb-meta > div { background: var(--surface-alt); border-radius: 6px; padding: 8px 10px; }
.tfi-rb-meta span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; }
.tfi-rb-steps { margin: 0; padding-inline-start: 20px; font-size: 13px; }
.tfi-rb-steps li { padding: 5px 0; }
.tfi-rb-steps label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
@media (max-width: 900px) { .tfi-rb-meta { grid-template-columns: 1fr; } }

/* ---------- N15 Alert rules ---------- */
.tfi-lastchange { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.tfi-numin { width: 84px !important; display: inline-block; font-family: 'JetBrains Mono', monospace; text-align: center; padding: 4px 6px !important; }
.tfi-numin.warn { border-color: var(--color-warn-border); background: var(--color-warn-bg); }
.tfi-numin.crit { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.tfi-channels { white-space: nowrap; }
.tfi-channels label { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 10px; font-size: 12px; cursor: pointer; }

/* ---------- N18 Benchmark ---------- */
.tfi-rank { display: grid; grid-template-columns: 28px 210px 1fr 110px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.tfi-rank-n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--surface-alt); color: var(--text-secondary); }
.tfi-rank-n.top { background: var(--brand-gold); color: var(--brand-ink); }
.tfi-rank-n.bottom { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.tfi-rank-name { display: flex; flex-direction: column; line-height: 1.3; }
.tfi-rank-name .tfi-muted { font-size: 11px; }
.tfi-rank-bar { position: relative; height: 10px; background: var(--surface-alt); border-radius: var(--radius-full); }
.tfi-rank-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--brand-gold-border), var(--brand-gold)); border-radius: var(--radius-full); }
.tfi-rank-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-primary); opacity: 0.6; }
.tfi-rank-v { text-align: end; font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.tfi-smallsample { font-family: inherit; font-size: 10px; font-weight: 600; color: var(--color-warn); }
@media (max-width: 900px) { .tfi-rank { grid-template-columns: 28px 1fr 90px; } .tfi-rank-bar { display: none; } }

/* ---------- N16 NOC wall mode ---------- */
#tfi-noc { position: fixed; inset: 0; z-index: 1000; background: #07090D; color: #E5E7EB; display: flex; flex-direction: column; padding: 18px 22px; gap: 14px; overflow: hidden; direction: rtl; }
.noc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.noc-brand { display: flex; align-items: center; gap: 12px; }
.noc-brand strong { display: block; font-size: 20px; color: #FFF; }
.noc-brand em { font-style: normal; font-size: 11px; letter-spacing: 2px; color: #C9A961; font-family: 'JetBrains Mono', monospace; }
.noc-logo { width: 40px; height: 40px; border-radius: 10px; background: #1F2329; color: #C9A961; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; border: 1px solid rgba(201, 169, 97, 0.4); }
.noc-view { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.04); padding: 4px; border-radius: 10px; }
.noc-view button { background: none; border: 0; color: rgba(255, 255, 255, 0.6); padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.noc-view button.active { background: #C9A961; color: #1F2329; }
.noc-clock { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; color: #FFF; }
.noc-clock em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.noc-exit { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: #FFF; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 12.5px; margin-inline-start: 10px; }
.noc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr 340px; gap: 14px; }
.noc-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.noc-card { background: #0F131B; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 14px; }
.noc-card.center { text-align: center; }
.noc-sub { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; }
.noc-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.noc-counts > div { background: #0F131B; border: 1px solid rgba(255, 255, 255, 0.08); border-top: 3px solid var(--c); border-radius: 10px; padding: 10px 12px; }
.noc-counts strong { display: block; font-size: 30px; font-weight: 800; color: var(--c); font-family: 'JetBrains Mono', monospace; line-height: 1.1; }
.noc-counts span { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
.noc-kv { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; }
.noc-kv:last-child { border-bottom: 0; }
.noc-kv span { color: rgba(255, 255, 255, 0.65); }
.noc-kv strong { color: #FFF; font-family: 'JetBrains Mono', monospace; font-size: 16px; }
.noc-map { position: relative; background: radial-gradient(ellipse at 50% 40%, #13213A 0%, #0A0F1A 70%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; min-height: 0; }
.noc-map .tfi-map-svg { width: 100%; height: 100%; }
.noc-maplabel { position: absolute; top: 14px; inset-inline-start: 14px; background: rgba(17, 22, 34, 0.9); border: 1px solid rgba(201, 169, 97, 0.4); color: #C9A961; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.noc-title { font-size: 14px; font-weight: 700; color: #C9A961; margin-bottom: 8px; }
.noc-issue { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; border-inline-start: 3px solid var(--c); padding-inline-start: 10px; margin-bottom: 4px; }
.noc-issue strong { font-family: 'JetBrains Mono', monospace; color: #FFF; }
.noc-issue em { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.noc-foot { font-size: 12px; color: rgba(255, 255, 255, 0.45); text-align: center; }
@media (max-width: 1200px) { .noc-body { grid-template-columns: 1fr; overflow-y: auto; } #tfi-noc { overflow-y: auto; } .noc-map { min-height: 420px; } }

/* ---------- Reduced motion (§11.8 / A11y) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tfi-pulse { display: none; }
}

/* ---------- Print (N17) ---------- */
@media print {
  .tola-sidebar, .tola-topbar, .tfi-livestrip, .tfi-viewsbar, .tfi-mapctl { display: none !important; }
}