/* ==========================================================================
   lab-polish.css  (2026)
   Loaded on every interactive lab AFTER the lab's own stylesheet and the
   shared styles.css. Keeps the original light look but removes the all-italic
   Times New Roman, calms decoration, and lets the shared header/footer match
   the home page. The labs were already light, so this is a light touch.
   ========================================================================== */
:root {
    --font-head: "Times New Roman", Times, serif;
    --font-body: "Times New Roman", Times, serif;
}

body {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    background-color: #f8f9fa;
    color: #333;
    -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .section-title {
    font-family: "Segoe UI", Tahoma, "Geeza Pro", sans-serif !important;
}

h1, h2, h3, h4, h5,
.section-title, .tool-title, .results-title, .logo, .card-title, .panel-title {
    font-family: var(--font-head) !important;
    font-style: normal !important;
    letter-spacing: -0.01em;
}
p, li, a, span, div, td, th, input, textarea, select, button, label,
code, pre, .terminal, .packet-data, .mono {
    font-style: normal !important;
}
/* code and terminals stay monospace */
code, pre, .terminal, .terminal *, .packet-detail, .code, .mono, .console, .console * {
    font-family: "SF Mono", "Consolas", "Roboto Mono", monospace !important;
}
em, i { font-style: italic !important; }

/* the old full-page background canvas threw errors and added noise: remove on labs */
.cyber-visualization, #cyber-visualization { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.22; display: block !important; }

/* the injected shared header/footer use the same classes as the home page,
   so they inherit styles.css automatically. Just make sure page content clears
   the fixed language toggle on desktop. */
@media (min-width: 993px) {
    body > header .container { padding-right: 155px; }
}

/* breadcrumb strip shown under the header on lab pages */
.lab-crumbs {
    background: #eef1f4;
    border-bottom: 1px solid #dee2e6;
    font-size: 14px;
}
.lab-crumbs .container { padding: 10px 15px; }
.lab-crumbs a { color: var(--secondary-color); }
.lab-crumbs .sep { color: #adb5bd; margin: 0 8px; }

/* prev/next lab footer nav */
.lab-nav {
    display: flex; justify-content: space-between; gap: 12px;
    max-width: 1200px; margin: 0 auto; padding: 26px 15px;
}
.lab-nav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border: 1px solid #dee2e6; border-radius: 8px;
    background: #fff; color: var(--secondary-color); font-weight: 500;
}
.lab-nav a:hover { border-color: var(--secondary-color); color: var(--primary-color); }
.lab-nav .spacer { flex: 1; }

/* completion-certificate name capture + feedback */
.cert-namebox {
    max-width: 560px; margin: 30px auto 0; text-align: center;
    background: #fff; border: 1px solid #dee2e6; border-radius: 10px; padding: 18px 20px;
}
.cert-namebox label { display: block; font-weight: 600; color: var(--primary-color); margin-bottom: 8px; }
.cert-namebox input {
    width: 100%; padding: 12px 14px; font-size: 16px; text-align: center;
    border: 1px solid #ced4da; border-radius: 8px; background: #fff; color: #212529;
}
.cert-namebox input:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(73,80,87,.12); }
.cert-namebox input.cert-need { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,.15); }
.cert-flash {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
    background: #212529; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transition: all .3s; z-index: 4000; max-width: 90vw;
}
.cert-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* readability fixes */
footer, footer p, footer li, footer a, footer .footer-about p, footer .copyright span { color: rgba(255,255,255,0.85) !important; }
footer h3 { color: #fff !important; }
.scenario-option { color: #212529 !important; }
.scenario-option.active { color: #fff !important; }
/* breadcrumb stays readable even on labs with their own dark body */
.lab-crumbs { background: #eef1f4 !important; }
.lab-crumbs a, .lab-crumbs span { color: #495057 !important; }
.lab-crumbs .sep { color: #adb5bd !important; }

/* edr: active scenario needs a dark chip so its white text reads */
.scenario-option.active { background: #212529 !important; color: #fff !important; }
.scenario-option { background: #f1f3f6 !important; color: #212529 !important; }

/* Capture The Flag is an intentionally dark challenge: keep it dark with light text */
body[data-lab="ctf-game"] { background: #0f1115 !important; color: #e6e8eb !important; }
body[data-lab="ctf-game"] p,
body[data-lab="ctf-game"] li,
body[data-lab="ctf-game"] span:not(.labx-tag),
body[data-lab="ctf-game"] h1,
body[data-lab="ctf-game"] h2,
body[data-lab="ctf-game"] h3,
body[data-lab="ctf-game"] label,
body[data-lab="ctf-game"] .game-title { color: #e6e8eb !important; }
body[data-lab="ctf-game"] code,
body[data-lab="ctf-game"] pre,
body[data-lab="ctf-game"] .code-block,
body[data-lab="ctf-game"] .hidden-content { color: #7CFFB2 !important; }

/* severity badge contrast + CTF breadcrumb/text readability */
.alert-severity.severity-high, .severity-high { background-color: #c25e0a !important; }
body[data-lab="ctf-game"] .lab-crumbs { background: #eef1f4 !important; }
body[data-lab="ctf-game"] .lab-crumbs a, body[data-lab="ctf-game"] .lab-crumbs span { color: #495057 !important; }
body[data-lab="ctf-game"] .container,
body[data-lab="ctf-game"] .container div,
body[data-lab="ctf-game"] .container p,
body[data-lab="ctf-game"] .game-container,
body[data-lab="ctf-game"] .game-container div { color: #e6e8eb; }

/* CTF is dark: give its breadcrumb a matching dark strip with light text */
body[data-lab="ctf-game"] .lab-crumbs { background: #171a1f !important; border-bottom-color: #2a2f36 !important; }
body[data-lab="ctf-game"] .lab-crumbs a, body[data-lab="ctf-game"] .lab-crumbs span { color: #c9ced4 !important; }
body[data-lab="ctf-game"] .lab-crumbs .sep { color: #5a626b !important; }

/* status badges: readable pills instead of pale colored text on white */
.status-badge { padding: 3px 10px !important; border-radius: 999px !important; font-weight: 600 !important; }
.status-badge.implemented { background: #e3f3e9 !important; color: #1f7a4d !important; }
.status-badge.partial, .status-badge.partially-implemented { background: #fff3d6 !important; color: #8a6a00 !important; }
.status-badge.not-implemented, .status-badge.missing { background: #fdeaea !important; color: #b02a2a !important; }
.status-badge.planned { background: #e7eef7 !important; color: #245b8f !important; }
/* security-level indicator: white text on its solid colour */
.security-level.security-low, .security-level.security-medium, .security-level.security-high { color: #fff !important; }
/* architecture canvas placeholder text */
.canvas-label, .canvas-placeholder, #canvas-placeholder, .canvas-empty { color: #6c757d !important; }