/* Audio-detected operations — map markers, popups, and the summary section.
   Self-contained (app.php does not load atc.css). */

/* ── Map markers ─────────────────────────────────────────────── */
.ao-marker { background: none; border: 0; }
.ao-dot {
    position: relative; display: flex; align-items: center; gap: 4px;
    transform: translate(-50%, -50%);
    white-space: nowrap; font: 600 10px/1 system-ui, sans-serif;
}
.ao-dot::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: #f59e0b; border: 2px solid #fde68a;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 6px rgba(245,158,11,.8); flex: 0 0 auto;
}
.ao-cs { color: #fde68a; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.ao-ph { color: #fcd34d; opacity: .85; text-shadow: 0 0 3px #000, 0 0 3px #000; }
/* currently-reported op — brighten, enlarge & pulse while the clock is on it */
.ao-marker { transition: opacity .25s ease; }
.ao-marker.ao-active { z-index: 1000 !important; }
.ao-marker.ao-active .ao-dot { transform: translate(-50%, -50%) scale(1.3); }
.ao-marker.ao-active .ao-dot::before { animation: ao-pulse 1.1s ease-out infinite; }
.ao-marker.ao-active .ao-cs, .ao-marker.ao-active .ao-ph { color: #fff; }
@keyframes ao-pulse {
    0%   { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 0 rgba(245,158,11,.7); }
    70%  { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 10px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 0 rgba(245,158,11,0); }
}

/* ── Marker popup ────────────────────────────────────────────── */
.ao-leaflet-popup .leaflet-popup-content { margin: 8px 10px; }
.ao-popup { min-width: 200px; max-height: 320px; overflow-y: auto; }
.ao-pop-cs { font: 700 13px/1 system-ui, sans-serif; color: #fbbf24; margin-bottom: 6px; }
.ao-pop-row { border-top: 1px solid rgba(255,255,255,.1); padding: 6px 0; }
.ao-pop-row:first-of-type { border-top: 0; }
.ao-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ao-pop-time { font-size: 11px; color: #9ca3af; }
.ao-pop-text { font-size: 11px; color: #cbd5e1; margin-top: 3px; }
.ao-popup audio { height: 28px; width: 200px; vertical-align: middle; }

/* ── Timeline: recording segment with a detected audio operation ─ */
.timeline-recording-segment.ao-tl-op {
    outline: 1.5px solid rgba(253, 224, 71, .95); outline-offset: 0;
    box-shadow: 0 0 5px rgba(234, 179, 8, .7);
}
.timeline-recording-segment.ao-tl-op::after {
    content: '🎧'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-size: 10px; line-height: 1; pointer-events: none;
}

/* ── Operation badges (self-contained subset) ────────────────── */
.op-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 9999px; font-size: .72rem; font-weight: 600; white-space: nowrap;
    background: rgba(107,114,128,.15); color: #9ca3af; border: 1px solid rgba(107,114,128,.3);
}
.op-takeoff  { background: rgba(59,130,246,.15);  color: #93c5fd; border-color: rgba(59,130,246,.3); }
.op-landing  { background: rgba(16,185,129,.15);  color: #6ee7b7; border-color: rgba(16,185,129,.3); }
.op-tng      { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(245,158,11,.3); }
.op-goaround { background: rgba(239,68,68,.15);   color: #fca5a5; border-color: rgba(239,68,68,.3); }
.op-final    { background: rgba(244,114,182,.15); color: #f9a8d4; border-color: rgba(244,114,182,.3); }
.op-base     { background: rgba(168,85,247,.15);  color: #c4b5fd; border-color: rgba(168,85,247,.3); }
.op-downwind { background: rgba(6,182,212,.15);   color: #67e8f9; border-color: rgba(6,182,212,.3); }
.op-circuit  { background: rgba(139,92,246,.15);  color: #c4b5fd; border-color: rgba(139,92,246,.3); }
.op-taxi     { background: rgba(107,114,128,.15); color: #d1d5db; border-color: rgba(107,114,128,.3); }
.op-other    { background: rgba(107,114,128,.12); color: #9ca3af; border-color: rgba(107,114,128,.25); }

/* ── Summary section (daily/grouped/hourly) ──────────────────── */
.audio-ops-section .ac-summary-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 4px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.audio-ops-section .ac-summary-row:hover { background: rgba(255,255,255,.03); }
.audio-ops-section .ac-summary-chevron { color: #6b7280; font-size: 10px; width: 12px; }
.audio-ops-section .ac-summary-callsign { font-weight: 600; color: #93c5fd; min-width: 90px; }
.audio-ops-section .ac-summary-time { color: #9ca3af; font-size: 12px; }
.audio-ops-section .ac-summary-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.audio-ops-section .ac-summary-total { margin-left: auto; color: #6b7280; font-size: 12px; }
.audio-ops-section .audio-detail table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.audio-ops-section .audio-detail td { padding: 4px 8px; font-size: 12px; color: #cbd5e1; vertical-align: middle; }
.audio-ops-section .detail-time { color: #9ca3af; font-variant-numeric: tabular-nums; }
.audio-ops-section .audio-cell { width: 230px; }
.audio-ops-section .audio-detail audio { height: 28px; width: 220px; vertical-align: middle; }
.audio-ops-section .audio-text {
    max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9ca3af;
}
.audio-src {
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    border: 1px solid rgba(156,163,175,.4); color: #9ca3af; white-space: nowrap;
}
.audio-src-human { border-color: rgba(52,211,153,.6); color: #34d399; }