/* ────────────────────────────────────────────────────────────────────────────
   Foyl Learn — Projector Mode
   High-contrast light theme for classroom and presentation use.
   Applied when  html[data-theme="projector"]  is set by projector.js.
   Dark mode is unchanged and remains the default.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── CSS custom property overrides ─────────────────────────────────────────
   Covers both Pattern A (platform/lab/scenario) and Pattern B (tool pages).
   html[data-theme="projector"] (specificity 0,1,1) beats :root (0,1,0) in
   per-tool CSS files, so these cascade correctly even when loaded first.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-theme="projector"] {
  /* Backgrounds: pure white → light grey */
  --bg:    #FFFFFF;
  --bg2:   #F2F4F3;
  --bg3:   #E8ECEA;
  --surf:  #DEE1DF;
  --surf2: #D3D7D5;
  --surf3: #BFC4C1;

  /* Borders */
  --border:  rgba(0,0,0,.10);
  --border2: rgba(0,0,0,.18);
  --border3: rgba(0,0,0,.28);

  /* Text: near-black for maximum contrast */
  --tx:  #060606;
  --tx2: #1A1A1A;
  --tx3: #3E3E3E;
  --tx4: #5E5E5E;

  /* Semantic colours — darkened for white backgrounds */
  --danger: #B22721;
  --warn:   #95600A;
  --ok:     #155E38;
  --blue:   #006FA3;
  --teal:   #004D44;
  --ocean:  #003A58;
  --cyan:   #0091B2;

  /* ── Severity colours (tool-specific, but shared variable names) ────────
     Darker shades so they remain readable on white backgrounds.           */
  --crit:   #C41F1F;
  --high:   #B86008;
  --med:    #9B7000;
  --low:    #1A55C0;
  --purple: #6D3FCC;
  --info-c: #4B5563;

  /* ── Severity badge backgrounds — raised from ~.08-.1 to .22-.28 ──────── */
  --crit-bg:   rgba(196,31,31,.22);    --crit-b:   rgba(196,31,31,.45);
  --high-bg:   rgba(184,96,8,.20);     --high-b:   rgba(184,96,8,.42);
  --med-bg:    rgba(155,112,0,.18);    --med-b:    rgba(155,112,0,.40);
  --low-bg:    rgba(26,85,192,.20);    --low-b:    rgba(26,85,192,.42);
  --ok-bg:     rgba(21,94,56,.18);     --ok-b:     rgba(21,94,56,.40);
  --purple-bg: rgba(109,63,204,.20);   --purple-b: rgba(109,63,204,.42);
  --info-bg:   rgba(75,85,99,.18);     --info-b:   rgba(75,85,99,.38);

  /* ── Tool accent overlays (used for accent-dim, accent-border etc.) ────── */
  --accent-dim:    rgba(0,0,0,.08);
  --accent-bd:     rgba(0,0,0,.22);
  --accent-border: rgba(0,0,0,.22);

  /* ── Identity-specific vars ──────────────────────────────────────────── */
  --id-bg:   rgba(109,63,204,.20);
  --id-b:    rgba(109,63,204,.42);
}

/* ── Body base + font scale ─────────────────────────────────────────────────
   16px body gives ~14% more size for inherited text. Explicit px overrides
   below catch elements that set their own sizes.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-theme="projector"] body {
  background: #FFFFFF;
  color: #060606;
  font-size: 16px;
}

/* Page titles */
html[data-theme="projector"] h1 { font-size: calc(1em + 4px); }
html[data-theme="projector"] h2 { font-size: calc(1em + 3px); }
html[data-theme="projector"] h3 { font-size: calc(1em + 2px); }

/* Table cells and common body text */
html[data-theme="projector"] td,
html[data-theme="projector"] th { font-size: calc(1em + 1px); }

/* Tool sidebar nav items */
html[data-theme="projector"] .nav-item { font-size: 13px; }

/* Scenario / lab step text */
html[data-theme="projector"] .item-desc,
html[data-theme="projector"] .step-body,
html[data-theme="projector"] .card-body,
html[data-theme="projector"] p { font-size: calc(1em + 1px); }

/* ── Nav override (Pattern A: hardcoded rgba background) ────────────────── */
html[data-theme="projector"] nav,
html[data-theme="projector"] #main-nav {
  background: #F2F4F3 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(0,0,0,.12) !important;
}

html[data-theme="projector"] nav.scrolled {
  background: #E4E8E6 !important;
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
html[data-theme="projector"] ::-webkit-scrollbar-track { background: #E8ECEA; }
html[data-theme="projector"] ::-webkit-scrollbar-thumb { background: #A2A9A6; }
html[data-theme="projector"] ::-webkit-scrollbar-thumb:hover { background: #828A87; }

/* ── Dot-matrix canvas ──────────────────────────────────────────────────── */
html[data-theme="projector"] #dot-canvas { opacity: .04; }

/* ── Code ───────────────────────────────────────────────────────────────── */
html[data-theme="projector"] code {
  background: #E8ECEA;
  color: #1A1A1A;
}

/* ── Form inputs ────────────────────────────────────────────────────────── */
html[data-theme="projector"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="projector"] select,
html[data-theme="projector"] textarea {
  background: #FFFFFF;
  color: #060606;
  border-color: rgba(0,0,0,.22) !important;
  color-scheme: light;
}

/* ── Table rows ─────────────────────────────────────────────────────────── */
html[data-theme="projector"] tr:hover td { background: rgba(0,0,0,.03); }

/* ── Pills with hardcoded low-opacity inline rgba backgrounds ───────────── */
/* Platform index lr-tags (5% opacity — nearly invisible on white)         */
html[data-theme="projector"] .lr-tag,
html[data-theme="projector"] .sr-sev,
html[data-theme="projector"] .item-pill,
html[data-theme="projector"] .ph-badge,
html[data-theme="projector"] .actor-ttp-pill,
html[data-theme="projector"] .mitre-tag,
html[data-theme="projector"] .mitre-tactic,
html[data-theme="projector"] .ato-indicator-tag,
html[data-theme="projector"] .filter-pill,
html[data-theme="projector"] .det-pill,
html[data-theme="projector"] .disp-badge,
html[data-theme="projector"] .os-badge,
html[data-theme="projector"] .tag {
  border-width: 1px !important;
  border-style: solid !important;
}

/* Force all .lr-tag and .sr-sev inline rgba backgrounds to readable values */
html[data-theme="projector"] [class*="lr-tag"],
html[data-theme="projector"] [class*="sr-sev"] {
  filter: contrast(1.25) saturate(1.3);
}

/* Badge text in projector — ensure contrast on boosted backgrounds */
html[data-theme="projector"] .badge,
html[data-theme="projector"] [class*="badge"],
html[data-theme="projector"] [class*="pill"],
html[data-theme="projector"] [class*="-tag"],
html[data-theme="projector"] [class*="sev-"] {
  font-weight: 500 !important;
}

/* Active / "on" filter pills */
html[data-theme="projector"] .filter-pill.on,
html[data-theme="projector"] .det-pill.active {
  background: rgba(0,111,163,.22) !important;
  border-color: rgba(0,111,163,.50) !important;
  color: #004D74 !important;
}

/* Nav badges */
html[data-theme="projector"] .nav-badge {
  background: var(--crit-bg) !important;
  border-color: var(--crit-b) !important;
  color: var(--crit) !important;
}
html[data-theme="projector"] .nav-badge.yellow,
html[data-theme="projector"] .nav-badge.warn {
  background: var(--high-bg) !important;
  border-color: var(--high-b) !important;
  color: var(--high) !important;
}
html[data-theme="projector"] .nav-badge.ok {
  background: var(--ok-bg) !important;
  border-color: var(--ok-b) !important;
  color: var(--ok) !important;
}
html[data-theme="projector"] .nav-badge.info {
  background: var(--id-bg, rgba(109,63,204,.20)) !important;
  border-color: var(--id-b, rgba(109,63,204,.42)) !important;
}

/* Status-badge closed (hardcoded grey rgba) */
html[data-theme="projector"] .status-badge.closed {
  background: rgba(75,85,99,.20) !important;
  color: #3A3F47 !important;
  border-color: rgba(75,85,99,.40) !important;
}

/* Disp badges (hardcoded rgba in SIEM) */
html[data-theme="projector"] .disp-badge.tp  {
  background: rgba(249,115,22,.22) !important;
  border-color: rgba(249,115,22,.48) !important;
}
html[data-theme="projector"] .disp-badge.fp,
html[data-theme="projector"] .det-pill.active {
  background: rgba(0,111,163,.20) !important;
  border-color: rgba(0,111,163,.45) !important;
}
html[data-theme="projector"] .disp-badge.benign {
  background: rgba(21,94,56,.18) !important;
  border-color: rgba(21,94,56,.40) !important;
}
html[data-theme="projector"] .disp-badge.indet {
  background: rgba(155,112,0,.20) !important;
  border-color: rgba(155,112,0,.42) !important;
}

/* EDR endpoint status pills */
html[data-theme="projector"] .ep-status-pill.online {
  background: rgba(21,94,56,.18) !important;
  border-color: rgba(21,94,56,.40) !important;
}
html[data-theme="projector"] .ep-status-pill.at-risk {
  background: rgba(184,96,8,.18) !important;
  border-color: rgba(184,96,8,.42) !important;
}
html[data-theme="projector"] .ep-status-pill.isolated {
  background: rgba(196,31,31,.20) !important;
  border-color: rgba(196,31,31,.44) !important;
}
html[data-theme="projector"] .ep-status-pill.offline {
  background: rgba(80,90,85,.15) !important;
  border-color: rgba(80,90,85,.32) !important;
  color: #444 !important;
}

/* Policy mode badges (EDR) */
html[data-theme="projector"] .policy-mode-badge.protect {
  background: rgba(21,94,56,.18) !important;
  border-color: rgba(21,94,56,.40) !important;
}
html[data-theme="projector"] .policy-mode-badge.detect {
  background: rgba(155,112,0,.18) !important;
  border-color: rgba(155,112,0,.40) !important;
}
html[data-theme="projector"] .policy-mode-badge.monitor {
  background: rgba(26,85,192,.18) !important;
  border-color: rgba(26,85,192,.40) !important;
}

/* ── Projector toggle button ─────────────────────────────────────────────── */
.foyl-projector-btn {
  background: none;
  border: 1px solid var(--border2, rgba(0,0,0,.18));
  color: var(--tx3, #444);
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.foyl-projector-btn:hover {
  border-color: var(--blue, #006FA3);
  color: var(--blue, #006FA3);
}

html[data-theme="projector"] .foyl-projector-btn {
  border-color: rgba(0,0,0,.22);
  color: #3E3E3E;
}

/* ── Diagonal wave transition animation ─────────────────────────────────────
   Applied per-element by projector.js with a staggered delay based on
   each element's diagonal (x+y) position on screen.
   ─────────────────────────────────────────────────────────────────────────── */
.foyl-wave-el {
  animation: foyl-wave var(--fp-dur, 380ms) cubic-bezier(.4,0,.2,1) var(--fp-delay, 0ms) both;
  will-change: transform, filter;
}

@keyframes foyl-wave {
  0%   { transform: scale(1)     translateY(0);   filter: brightness(1);    }
  38%  { transform: scale(1.025) translateY(-3px); filter: brightness(1.12); }
  100% { transform: scale(1)     translateY(0);   filter: brightness(1);    }
}

/* ── GDPR consent modal ─────────────────────────────────────────────────── */
#foyl-projector-consent {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#foyl-projector-consent-box {
  max-width: 460px;
  width: calc(100% - 40px);
  padding: 28px 30px 30px;
  background: #FFFFFF;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  animation: fpc-in .18s ease both;
}

@keyframes fpc-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);    }
}

#foyl-projector-consent-box .fpc-label {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 11px;
}

#foyl-projector-consent-box h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #080808;
  margin-bottom: 12px;
  letter-spacing: -.025em;
  line-height: 1.2;
}

#foyl-projector-consent-box p {
  font-size: 13.5px;
  color: #3A3A3A;
  line-height: 1.68;
  margin-bottom: 10px;
  font-weight: 300;
}

#foyl-projector-consent-box p strong { color: #101010; font-weight: 500; }

#foyl-projector-consent-box p:last-of-type { margin-bottom: 22px; }

#foyl-projector-consent-box code {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  background: #EEF2FF;
  color: #2A3AAA;
  padding: 1px 5px;
  border-radius: 3px;
}

.fpc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#fpc-accept {
  flex: 1;
  min-width: 130px;
  padding: 10px 18px;
  background: #0A0A0A;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
}
#fpc-accept:hover { opacity: .82; }

#fpc-decline {
  padding: 10px 18px;
  background: transparent;
  color: #555;
  border: 1px solid #CCC;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
#fpc-decline:hover { border-color: #888; color: #222; }