/* CYNAPSE UI Governance / Design-System Layer
   Purpose: unify feedback, spacing, headings, form controls, desktop/mobile
   parity, and a small set of reusable component primitives (.cy-btn,
   .cy-card, .cy-badge, .cy-input) across every surface (marketing, academy,
   community, admin, My Cynapse, SecureOPS/Exposure Engine) without changing
   each surface's own existing CSS. Only additive/generic selectors are used
   here so this can be safely included alongside every page's own stylesheet.
   Revived + wired live 2026-07-24 (maturity-uplift wave) -- this file existed
   before but was never actually <link>-ed into any live template; tokens
   below are aligned to the platform's unified brand color (#17352B, see the
   earlier brand-unification pass) so this governance layer and the brand
   pass agree with each other instead of drifting independently. */

/* No-italic override (2026-07-24, strengthened 2026-07-30): Cairo-Variable.ttf
   (the locally-hosted font most pages use) ships a 'slnt' variation axis;
   some mobile browsers auto-slant text through that axis whenever
   font-style resolves to italic/oblique -- including via the browser
   default italic on <em>, <i>, <cite>, <address>, <dfn>, <var> -- which is
   why mobile/tablet showed slanted text that desktop did not.

   2026-07-30 follow-up: `font-style: normal` alone did not fully fix this
   on real mobile/tablet devices. Two more specific mechanisms can still
   produce slanted text even with font-style pinned to normal:
     1. Some mobile WebKit/Blink builds resolve italic requests against a
        variable font's raw variation axes independently of font-style, so
        the 'slnt'/'ital' axis coordinates need to be reset explicitly via
        font-variation-settings, not just the font-style keyword.
     2. `font-synthesis` defaults to allowing the browser to fabricate
        ("synthesize") a fake oblique for any element that requests italic
        when no dedicated italic face is registered -- font-style:normal
        prevents *requesting* italic, but doesn't stop synthesis for any
        markup path that still ends up asking for it (e.g. inline
        style="font-style:italic" set by page JavaScript).
   Forcing all three (font-style, font-variation-settings, font-synthesis)
   together removes every path back to slanted text, unconditionally (no
   media query), so mobile/tablet/desktop are visually identical. Safe for
   icon fonts (Font Awesome/Phosphor <i> glyphs are symbol shapes, not
   letterforms, so none of this has any visual effect on them either way). */
html, body,
*, *::before, *::after {
    font-style: normal !important;
    font-variation-settings: normal !important;
    font-synthesis: none !important;
}
:root {
  --cynapse-brand: #17352b;
  --cynapse-brand-bright: #4f934d;
  --cynapse-ink: #17352b;
  --cynapse-ink-2: #0d2019;
  --cynapse-muted: #55695f;
  --cynapse-line: rgba(23, 53, 43, .14);
  --cynapse-line-strong: rgba(23, 53, 43, .24);
  --cynapse-soft: #f5f9f4;
  --cynapse-soft-2: #eaf1e8;
  --cynapse-surface: #ffffff;
  --cynapse-success: #1f7a4d;
  --cynapse-warning: #b7791f;
  --cynapse-danger: #b42318;
  --cynapse-info: #2563eb;
  --cynapse-radius: 10px;
  --cynapse-radius-sm: 8px;
  --cynapse-shadow: 0 10px 26px rgba(13, 48, 36, .08);
  --cynapse-header-height: 64px;
}

/* Reusable component primitives -- opt-in via .cy-* classes. New surfaces
   (or existing ones being refactored) should reach for these instead of
   inventing another one-off .btn/.card variant, so future work stops
   duplicating the same component pattern per page-type (see the design
   audit: my_cynapse.css, admin_dashboard.css, vulnhub_analyzer.css, and the
   marketing CSS files each currently define their own separate button/card/
   badge classes with no shared source). Existing page-specific classes are
   left untouched -- this is additive, not a replacement. */
.cy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--cynapse-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.cy-btn--primary { background: var(--cynapse-brand); color: #fff; }
.cy-btn--primary:hover { background: var(--cynapse-ink-2); }
.cy-btn--secondary { background: transparent; color: var(--cynapse-brand); border-color: var(--cynapse-line-strong); }
.cy-btn--secondary:hover { background: var(--cynapse-soft); }
.cy-btn--ghost { background: transparent; color: var(--cynapse-muted); }

.cy-card {
  background: var(--cynapse-surface);
  border: 1px solid var(--cynapse-line);
  border-radius: var(--cynapse-radius);
  box-shadow: var(--cynapse-shadow);
  padding: 20px;
}

.cy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--cynapse-soft);
  color: var(--cynapse-brand);
  border: 1px solid var(--cynapse-line);
}
/* Severity/risk badges are semantic, not brand -- never map these to the
   brand green (a red "Critical" badge turning green would be a genuine
   safety regression for a security product). Kept intentionally separate
   from .cy-badge and untouched by the brand-unification pass. */
.cy-badge--critical { background: #fee2e2; color: #991b1b; border-color: rgba(153,35,27,.2); }
.cy-badge--high { background: #ffedd5; color: #9a3412; border-color: rgba(154,52,18,.2); }
.cy-badge--medium { background: #fef3c7; color: #92400e; border-color: rgba(146,64,14,.2); }
.cy-badge--low { background: #eaf1e8; color: var(--cynapse-brand); border-color: var(--cynapse-line); }

.cy-input, .cy-select, .cy-textarea {
  border: 1px solid var(--cynapse-line-strong);
  border-radius: var(--cynapse-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--cynapse-ink);
  background: #fff;
}
.cy-input:focus, .cy-select:focus, .cy-textarea:focus {
  outline: 3px solid rgba(23, 53, 43, .18);
  outline-offset: 1px;
  border-color: var(--cynapse-brand);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, video { max-width: 100%; }
table { width: 100%; }

h1, h2, h3,
.page-title, .section-title, .card-title, .panel-title, .modal-title, .tab-title,
.dashboard-title, .workspace-title, .project-title {
  color: var(--cynapse-ink);
  font-weight: 700;
  letter-spacing: 0;
}

h4, h5, h6,
label, .form-label, .table th, thead th,
.kpi-label, .metric-label {
  font-weight: 600;
  letter-spacing: 0;
}

p, li, td, input, textarea, select, button { letter-spacing: 0; }

button, .btn, .button, .action-btn, .primary-btn, .secondary-btn, a.btn,
.download-btn, .save-btn, .cancel-btn {
  border-radius: var(--cynapse-radius-sm);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

button:focus-visible, .btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(23, 53, 43, .22);
  outline-offset: 2px;
}

input, select, textarea, .form-control, .form-select {
  border-radius: var(--cynapse-radius-sm);
}

.alert, .flash, .toast, .notice, .message, .validation-message,
.error-message, .success-message, .warning-message, .info-message {
  border-radius: var(--cynapse-radius);
  border: 1px solid var(--cynapse-line);
}

header, .header, .topbar, .navbar, .app-header, .site-header,
footer, .footer, .site-footer, .app-footer {
  letter-spacing: 0;
}

footer, .footer, .site-footer, .app-footer {
  color: var(--cynapse-muted);
}

.cynapse-feedback-region {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.cynapse-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 0;
  background: var(--cynapse-surface);
  border: 1px solid var(--cynapse-line);
  border-radius: 12px;
  box-shadow: var(--cynapse-shadow);
  color: var(--cynapse-ink);
  overflow: hidden;
  animation: cynapseToastIn .18s ease-out;
}

.cynapse-toast__bar { width: 6px; height: 100%; min-height: 42px; }
.cynapse-toast__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--cynapse-ink); }
.cynapse-toast__message { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cynapse-muted); }
.cynapse-toast__close {
  border: 0;
  background: transparent;
  color: var(--cynapse-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

.cynapse-toast--success .cynapse-toast__bar { background: var(--cynapse-success); }
.cynapse-toast--error .cynapse-toast__bar { background: var(--cynapse-danger); }
.cynapse-toast--warning .cynapse-toast__bar { background: var(--cynapse-warning); }
.cynapse-toast--info .cynapse-toast__bar { background: var(--cynapse-info); }

.cynapse-inline-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--cynapse-radius);
  border: 1px solid var(--cynapse-line);
  background: #fff;
  color: var(--cynapse-ink);
}

.cynapse-inline-message[data-type="success"] { border-color: rgba(31,122,77,.25); background: rgba(31,122,77,.06); }
.cynapse-inline-message[data-type="error"] { border-color: rgba(180,35,24,.25); background: rgba(180,35,24,.06); }
.cynapse-inline-message[data-type="warning"] { border-color: rgba(183,121,31,.25); background: rgba(183,121,31,.08); }
.cynapse-inline-message[data-type="info"] { border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.06); }

.cynapse-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cynapse-table-scroll > table { margin-bottom: 0; }

.cynapse-is-loading {
  cursor: progress;
}

.cynapse-is-loading button,
.cynapse-is-loading .btn,
button[aria-busy="true"],
.btn[aria-busy="true"] {
  opacity: .72;
  pointer-events: none;
}

@keyframes cynapseToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  body { overflow-x: hidden; }

  .container, .page-container, .main-container, .content-container,
  .dashboard-container, .workspace-container, .project-container,
  .vulnhub-container, .admin-container, .portal-container,
  main, .main-content {
    max-width: 100% !important;
  }

  .container, .page-container, .main-container, .content-container,
  .dashboard-container, .workspace-container, .project-container,
  .vulnhub-container, .admin-container, .portal-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .row, .grid, .dashboard-grid, .cards-grid, .metrics-grid,
  .summary-grid, .tab-grid, .form-grid, .split-layout,
  .two-column, .three-column, .content-grid, .workspace-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card, .panel, .metric-card, .summary-card, .workspace-card,
  .dashboard-card, .form-card, .feature-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  h1, .page-title { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.15 !important; }
  h2, .section-title { font-size: clamp(20px, 5.8vw, 28px) !important; line-height: 1.2 !important; }
  h3, .card-title, .panel-title { font-size: clamp(17px, 4.8vw, 22px) !important; line-height: 1.25 !important; }

  p, li, td, input, textarea, select, button { font-size: 15px; line-height: 1.55; }

  button, .btn, .button, .action-btn, .primary-btn, .secondary-btn, a.btn {
    min-height: 42px;
    white-space: normal;
  }

  input, select, textarea, .form-control, .form-select {
    min-height: 42px;
    width: 100%;
  }

  .tabs, .tab-list, .nav-tabs, .segmented-control, .filter-tabs,
  .project-tabs, .sub-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: thin;
  }

  .tabs > *, .tab-list > *, .nav-tabs > *, .segmented-control > *,
  .filter-tabs > *, .project-tabs > *, .sub-tabs > * {
    flex: 0 0 auto;
  }

  .table-wrapper, .data-table-wrapper, .table-responsive,
  .matrix-table-wrapper, .report-table-wrapper, .cynapse-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.report-page) table:not(.report-page table):not(.report-table) {
    min-width: 680px;
  }

  .modal, .modal-dialog, .dialog, .popup, .drawer, .offcanvas {
    max-width: calc(100vw - 24px) !important;
  }

  .modal-content, .dialog-content, .popup-content {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .cynapse-feedback-region {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .hide-on-mobile, .desktop-only { display: none !important; }

  .mobile-stack, .toolbar, .actions-bar, .page-actions,
  .form-actions, .modal-actions, .button-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .toolbar > *, .actions-bar > *, .page-actions > *,
  .form-actions > *, .modal-actions > *, .button-row > * {
    width: 100%;
  }

  .cynapse-toast { grid-template-columns: 5px 1fr auto; }
}

@media print {
  .cynapse-feedback-region { display: none !important; }
  .cy-field-help { display: none !important; }
}

/* WAVE 43 -- field-level guidance ("?" help icons next to form fields,
   app-wide). This reuses the app's EXISTING, already-vendored Tippy.js
   tooltip library (vendor/tippy-bundle.umd.min.js, initialized via
   Utils.initTippy() in project_details_utils.js -- previously only called
   after rendering the Systems table, now also called once on page load in
   project_details_logic.js and again after the edit-item-modal injects
   dynamic content in project_details_modals.js) instead of inventing a new
   tooltip system. Markup convention used everywhere:
     <span class="cy-field-help" data-tippy-content="explanation text">?</span>
   This is only the badge's visual styling -- the popover itself (position,
   arrow, theme) is entirely Tippy's existing 'light-border' theme, already
   proven working elsewhere in this same page. */
.cy-field-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--cynapse-line-strong);
  color: var(--cynapse-brand);
  background: var(--cynapse-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  margin-inline-start: 4px;
  vertical-align: middle;
  user-select: none;
}
.cy-field-help:hover, .cy-field-help:focus-visible {
  background: var(--cynapse-brand);
  color: #fff;
  outline: none;
}

/* WAVE 45 -- shared Tippy.js popover border, moved here from project_details.html
   so every page that wires up tippy-bundle.umd.min.js for "?" field-help
   badges gets the same light-border popover style from one place instead of
   duplicating this rule per page. */
.tippy-box[data-theme~='light-border'] { border: 1px solid #d1d5db; }

/* WAVE 46 -- Controls Library accordion redesign (Security Modeling -> Controls
   Library). Each control family card's header is a real <button> so it's
   keyboard-accessible; this just makes it look like a clickable section header
   instead of a default button, and animates the chevron on expand/collapse.
   See Handlers.loadControls / Handlers.toggleControlFamily in
   project_details_handlers_V2.js for the JS side. */
.control-family-card {
  padding: 0;
  overflow: hidden;
}
.control-family-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem;
  font: inherit;
  color: inherit;
}
.control-family-toggle:hover {
  background: var(--cynapse-soft, #F4F8F1);
}
.control-family-toggle:focus-visible {
  outline: 2px solid var(--cynapse-brand);
  outline-offset: -2px;
}
.control-family-chevron {
  color: #8a978d;
  transition: transform 0.2s ease;
}
.control-family-card.is-expanded .control-family-chevron {
  transform: rotate(180deg);
}
.control-family-body {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.controls-library-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
}