/* ==================================================================
   AKONetwork SOC overrides
   ==================================================================
   Layered on top of css/vendor/cyberlycee-soc.css to refine the
   cyberlycee Path A baseline for AKONetwork's typical viewports
   and SOC analyst desktop workflow.

   Path A discipline says: never rewrite class strings inside the
   panel JS. Cyberlycee's verbatim DOM stays. AKONetwork visual
   refinements live HERE so future cyberlycee fixes still merge
   cleanly via diff.

   Scope: every rule is anchored under `.akoslot-soc` so the
   overrides only fire when an AKONetwork host (smoke pages, the
   future engine.js soc_bootcamp lab mount) declares that wrapper.
   The vendored cyberlycee CSS in isolation is unaffected.

   Design rationale per tweak is documented inline. All four blocks
   are surgical - they target ONE behaviour each, leave color and
   typography untouched, and respect WCAG 2.1 AA (our baseline).
   ================================================================== */


/* ------------------------------------------------------------------
   1. TOP STATS BAR - wrap counters instead of clipping
   ------------------------------------------------------------------
   Cyberlycee top bar uses `flex items-center gap-4` for the right-
   side stats block (critical / untriaged / score / timer). On
   viewports under ~1280px the row overflows and the rightmost stat
   ("8 non triés") gets clipped. We hooked a custom class
   `.aq-soc-topbar-stats` in js/security/soc/soc_dashboard.js so we
   can target it without an over-broad selector.

   Force flex-wrap so counters stack to a second line instead of
   clipping. Right-justify so the wrapped row still hugs the timer
   on the far right. Keep tight gap so wrapped stats don't waste
   vertical real estate.
   ------------------------------------------------------------------ */
.akoslot-soc .aq-soc-topbar-stats {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    column-gap: 14px;
}

@media (max-width: 900px) {
    .akoslot-soc .aq-soc-topbar-stats {
        column-gap: 10px;
        font-size: 11px;
    }
}


/* ------------------------------------------------------------------
   2. CLASSIFICATION BUTTONS - 36px on desktop (cyberlycee: 44px)
   ------------------------------------------------------------------
   Cyberlycee uses min-h-[44px]/min-w-[44px] on the VP/FP/BP/?
   classification buttons for WCAG 2.5.5 (Target Size) AAA. Our
   declared baseline is WCAG 2.1 AA, where 2.5.5 does not apply.
   SOC analysts work on desktop with mouse; each alert card has 4
   of these buttons in a row, and at 44px they dominate the card
   visually - the eye lands on the buttons before the alert title.

   Drop to 36px on viewports >= 768px (Tailwind's md: breakpoint).
   This keeps the buttons comfortably clickable on mouse + reduces
   the cumulative button row from 4x44=176px to 4x36=144px, freeing
   the alert content (title, description, IOCs) to breathe.

   Mobile (<768px) keeps the 44px touch target via no-op (no rule
   below the breakpoint).
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .akoslot-soc .aq-class-btn {
        min-height: 36px;
        min-width:  36px;
        height:     36px;
        padding:    4px 14px;
        font-size:  12px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
}


/* ------------------------------------------------------------------
   3. ALERT CARDS - more breathing room on wider viewports
   ------------------------------------------------------------------
   Cyberlycee uses `flex flex-col gap-3` (12px gap) between alert
   cards in the AlertQueue list. On a typical SOC queue with 8-15
   alerts visible, gap-3 reads as a "wall of alerts" - the eye
   doesn't separate them as 8 distinct items.

   On viewports >= 1024px we widen to 16px (Tailwind gap-4 equiv).
   Below that we keep cyberlycee's 12px because vertical real
   estate is precious on small screens.

   Also: lift the unclassified card's border from cyberlycee's
   border-cyan-500/30 (30% opacity) to 45% opacity, and add a
   barely-there cyan glow (0 1px 2px @ 5% opacity). That makes
   "needs your attention" cards read as actionable without
   straining a tired analyst's eyes during a long shift.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .akoslot-soc .flex.flex-col.gap-3 {
        gap: 16px;
    }
}

.akoslot-soc article[aria-label^="Alerte"][class*="border-cyan-500/30"],
.akoslot-soc article[aria-label^="Alert:"][class*="border-cyan-500/30"] {
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 1px 2px rgba(6, 182, 212, 0.05);
}


/* ------------------------------------------------------------------
   4. IOC CHIPS - tighter rhythm, controlled wrapping
   ------------------------------------------------------------------
   Cyberlycee's IOC chip container is `<div class="flex flex-wrap
   gap-1.5 mb-3">` (6px gap, 12px bottom margin). On wide viewports
   the chips can use a touch more horizontal space, and very long
   chip values (file paths, full URLs, command lines) currently push
   the row out instead of wrapping inside the chip.

   Tailwind compiles `gap-1.5` to literal `gap-1\.5` selectors -
   we match that here so the override actually fires.

   Bumping to gap 8x10 px (row x col) and giving the value `<span>`
   a controlled wrap ensures long IOCs (e.g.
   "/etc/sudoers.d/admin", "sudo -i") wrap gracefully instead of
   stretching the row.
   ------------------------------------------------------------------ */
.akoslot-soc article > .flex.flex-wrap.gap-1\.5.mb-3 {
    row-gap:    8px;
    column-gap: 10px;
    margin-bottom: 14px;
}

.akoslot-soc article > .flex.flex-wrap.gap-1\.5.mb-3 > span {
    /* The chip itself - constrained max-width so it never blows
       the card layout horizontally on a single very long value. */
    max-width: 100%;
}

.akoslot-soc article > .flex.flex-wrap.gap-1\.5.mb-3 > span > span.font-mono {
    /* The mono value side of the chip - allow break at any char on
       long values (file paths with no spaces, hashes, command lines
       with quoted strings). overflow-wrap:anywhere is well-supported
       in evergreen browsers and degrades gracefully. */
    overflow-wrap: anywhere;
    word-break:    break-word;
}


/* ------------------------------------------------------------------
   5. SECONDARY PANEL 50/50 ON WIDE SCREENS
   ------------------------------------------------------------------
   Cyberlycee fixes the main:secondary split at 2:1 (main gets
   flex:2, secondary gets flex:1). On a 1280px viewport that gives
   secondary ~427px which is tight for SiemTerminal / Tickets /
   PlaybookGuide - SIEM KQL queries and ticket descriptions both
   benefit from more horizontal real estate. Cyberlycee's 2:1 made
   sense when the queue was the only first-class panel; in our
   bootcamp design the secondary panels are equally important.

   On viewports >= 1400px (covers external monitors but excludes
   most laptops at 1366/1440px after browser chrome) we balance
   to 1:1. Below that breakpoint we keep cyberlycee's 2:1 - on
   constrained screens the alert queue should still get the focus.

   The inline `style="flex:2 1 0%"` in soc_dashboard.js takes
   precedence over plain CSS, so we use !important here. It's
   scoped under .akoslot-soc so this override only fires in our
   context (cyberlycee verbatim test pages stay unaffected).
   ------------------------------------------------------------------ */
@media (min-width: 1400px) {
    .akoslot-soc #aqSocMain {
        flex: 1 1 0% !important;
    }
}


/* ------------------------------------------------------------------
   6. SOC SHIFT FULL-SCREEN MODE (phase 4 of soc_bootcamp missions)
   ------------------------------------------------------------------
   When a soc_bootcamp mission enters phase 4 (the SOC SHIFT lab),
   renderSocLabPhase adds `soc-fullscreen` to <body>. We hide the
   LEFT mission story panel so the dashboard fills the full width
   (~80% viewport coverage with only the topbar + phase nav as
   chrome). Mirrors the cyberlycee deployment where the analyst
   works in a wide single-pane SOC console, not a constrained
   side-by-side teaching layout.

   The story panel content (Solange briefing, objectives, hint
   button, review-lesson) is redundant in phase 4: the briefing
   card is rendered above the dashboard, the only objective is
   "complete the shift" which is self-evident, and hints don't
   apply (the playbook IS the hint).

   Cleanup: renderConceptualMission removes the class on every
   re-render so phase tab clicks back to phases 0-3 restore the
   story panel automatically.
   ------------------------------------------------------------------ */
body.soc-fullscreen .story-panel {
    display: none !important;
}

/* Give the now-orphaned terminal panel its own padding so the
   dashboard doesn't kiss the screen edges */
body.soc-fullscreen .terminal-panel {
    border-left: none;
}


/* ------------------------------------------------------------------
   7. BRAND RE-SKIN - cyberlycee cyan/blue -> AKONetwork palette
   ------------------------------------------------------------------
   Cyberlycee ships the SOC dashboard with cyan as the accent + blue
   for active buttons. Inside the AKONetwork shell (amber/ochre logo
   chrome, terracotta CTAs, forest success badges) the cyan reads as
   "third-party widget embedded in our brand" rather than "part of
   AKONetwork". This block remaps every cyan/blue Tailwind utility
   the panel JS actually emits to the brand palette.

   Discipline: Path A (never rewrite class strings in the JS, override
   via CSS only) is preserved. Every selector is scoped under
   `.akoslot-soc` so the vendored cyberlycee CSS is unaffected outside
   our mount. Class names below are the literal Tailwind v4 output
   from `js/security/soc/{alert_queue,siem_terminal,playbook_guide,
   ticket_system,soc_dashboard}.js` (verified May 2026 via grep).

   Palette map:
     cyan-300/400/500   -> ochre  (#d4a03c)  primary accent
     cyan-700/800/950   -> ochre dim (rgba)  hover / dark surfaces
     blue-300/400/500   -> forest (#5ab865)  safe action / true-pos
     blue-800/900       -> forest dim (rgba)
   ------------------------------------------------------------------ */

/* Text: cyan -> ochre */
.akoslot-soc .text-cyan-300 { color: rgb(232, 192, 100) !important; }
.akoslot-soc .text-cyan-400 { color: rgb(212, 160, 60) !important; }
.akoslot-soc .text-cyan-500 { color: rgb(190, 140, 50) !important; }
.akoslot-soc .hover\:text-cyan-400:hover { color: rgb(232, 192, 100) !important; }

/* Backgrounds: cyan -> ochre (with their alpha preserved) */
.akoslot-soc .bg-cyan-500 { background-color: rgb(212, 160, 60) !important; }
.akoslot-soc .bg-cyan-700 { background-color: rgb(160, 115, 30) !important; }
.akoslot-soc .bg-cyan-500\/10 { background-color: rgba(212, 160, 60, 0.10) !important; }
.akoslot-soc .bg-cyan-900\/20 { background-color: rgba(160, 115, 30, 0.20) !important; }
.akoslot-soc .bg-cyan-950\/30 { background-color: rgba(120, 85, 20, 0.30) !important; }
.akoslot-soc .hover\:bg-cyan-600:hover { background-color: rgb(180, 130, 40) !important; }

/* Borders: cyan -> ochre */
.akoslot-soc .border-cyan-500 { border-color: rgb(212, 160, 60) !important; }
.akoslot-soc .border-cyan-700 { border-color: rgb(160, 115, 30) !important; }
.akoslot-soc .border-cyan-800 { border-color: rgb(120, 85, 20) !important; }
.akoslot-soc .border-cyan-500\/30 { border-color: rgba(212, 160, 60, 0.30) !important; }
.akoslot-soc .border-cyan-500\/50 { border-color: rgba(212, 160, 60, 0.50) !important; }
.akoslot-soc .focus\:border-cyan-500:focus { border-color: rgb(212, 160, 60) !important; }
.akoslot-soc .focus\:ring-cyan-500:focus { --tw-ring-color: rgb(212, 160, 60) !important; }

/* Override block 3's manual cyan glow on unclassified alert cards
   so the "needs your attention" tint is ochre instead of cyan. */
.akoslot-soc article[aria-label^="Alerte"][class*="border-cyan-500/30"],
.akoslot-soc article[aria-label^="Alert:"][class*="border-cyan-500/30"] {
    border-color: rgba(212, 160, 60, 0.45);
    box-shadow: 0 1px 2px rgba(212, 160, 60, 0.05);
}

/* Text: blue -> forest (safe / true-positive action) */
.akoslot-soc .text-blue-300 { color: rgb(140, 200, 150) !important; }
.akoslot-soc .text-blue-400 { color: rgb(90, 184, 101) !important; }
.akoslot-soc .text-blue-500 { color: rgb(70, 160, 85) !important; }

/* Backgrounds: blue -> forest */
.akoslot-soc .bg-blue-500\/10 { background-color: rgba(90, 184, 101, 0.10) !important; }
.akoslot-soc .bg-blue-500\/30 { background-color: rgba(90, 184, 101, 0.30) !important; }
.akoslot-soc .hover\:bg-blue-500\/20:hover { background-color: rgba(90, 184, 101, 0.20) !important; }

/* Borders: blue -> forest */
.akoslot-soc .border-blue-500 { border-color: rgb(90, 184, 101) !important; }
.akoslot-soc .border-blue-500\/30 { border-color: rgba(90, 184, 101, 0.30) !important; }
.akoslot-soc .hover\:border-blue-500\/50:hover { border-color: rgba(90, 184, 101, 0.50) !important; }


/* Slate accent utilities (small "?" help button text and OpenSearch
   chrome subtitle), pull a touch warmer toward the muted brand text
   so they don't read as cool grey islands inside the warm ochre frame. */
.akoslot-soc .text-slate-400 { color: rgb(160, 150, 130) !important; }
.akoslot-soc .text-slate-500 { color: rgb(130, 120, 100) !important; }

/* Saturated semantic accents in the topbar stats bar
   (text-yellow-500 for "untriaged", text-emerald-400 for score) read
   visually as cyan/teal pings against the dark ochre frame. Pull both
   into brand-aligned dim variants so the SOC chrome is one coherent
   amber-family palette. The `text-red-500` for critical count is left
   alone, it's the only loud signal the analyst MUST notice. */
.akoslot-soc .text-yellow-500  { color: rgb(212, 160, 60) !important; }
.akoslot-soc .text-emerald-400 { color: rgb(120, 175, 130) !important; }


/* ------------------------------------------------------------------
   9. TOPBAR STATS - muted and compact
   ------------------------------------------------------------------
   The "8 non triés • Score: 0/100 • 00:00:10" stats bar shouts at the
   student on a Day-1 orientation scenario where the lesson explicitly
   says "pas d'incident urgent". Mute the whole stats container to
   muted-text and shrink from text-xs (12px) to 11px so the score and
   timer recede into chrome instead of acting like a competitive HUD.

   Critical-count remains its own red signal: it overrides this muted
   layer with a specific .text-red-500 selector that wins on
   specificity inside the same scope. */
.akoslot-soc .aq-soc-topbar-stats {
    color: rgb(130, 120, 100) !important;
    font-size: 11px !important;
}


/* ------------------------------------------------------------------
   9b. ALERT CARD COMPACT MODE on short viewports (Bug 4 fix)
   ------------------------------------------------------------------
   At 1366x768 laptop the dashboard mount = calc(100vh - 280px) = 488px.
   Inner alert-list area shrinks to ~320px after panel header + filter
   bar. With cyberlycee's `p-4` (16px) + `gap-3` (12px) on cards
   measuring ~140px tall, only ~2 cards fit before scroll, while the
   queue carries 5-15 in a typical SOC mission. The student feels
   they're missing alerts.

   Tighten cards on viewports under 1024px: drop padding p-4 -> p-3
   and gap-3 -> gap-2. Saves ~12px per card + 4px per gap, fitting
   ~3-4 cards instead of 2. Above 1024px we keep cyberlycee's roomy
   defaults so the SOC console still feels like a workstation.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .akoslot-soc article[aria-label^="Alerte"],
    .akoslot-soc article[aria-label^="Alert:"] {
        padding: 0.5rem 0.75rem !important;
    }
    .akoslot-soc .flex.flex-col.gap-3 {
        gap: 0.5rem !important;
    }
    .akoslot-soc article h3 {
        margin-bottom: 0.125rem !important;
    }
    .akoslot-soc article > p.mb-3 {
        margin-bottom: 0.5rem !important;
    }
}


/* ------------------------------------------------------------------
   10. WIDE-SCREEN SPLIT - prefer 2:1 instead of 1:1
   ------------------------------------------------------------------
   Block 5 above re-balanced the secondary panel from cyberlycee's
   2:1 to 1:1 on viewports >= 1400px. In practice this gave the SIEM
   too much width when empty (large dead zone next to the query bar)
   and made the AlertQueue feel cramped despite being the primary
   surface. Override block 5 on wide viewports back to 2:1 so the
   AlertQueue keeps focus on the wide screens we previously balanced.
   ------------------------------------------------------------------ */
@media (min-width: 1400px) {
    .akoslot-soc #aqSocMain {
        flex: 2 1 0% !important;
    }
}