/*
 * Cybersecurity track theme: red accents, no purple.
 *
 * Linked last in <head> on every page under /academics/cybersecurity/ by
 * scripts/apply_cyber_red_theme.py, which also recolours the pages' own CSS.
 * This file overrides what the shared assets bring in: light-mode.css,
 * mobile-fixes.css, a11y.css, breakdown.css, and the styles injected at runtime
 * by search.js, pdf-embed.js, recent-pages.js, mobile-navigation.js and
 * standalone-theme.js. Injected <style> tags land after this file, so those
 * overrides use doubled selectors instead of !important.
 */

:root {
  --brand-purple: #ff2a4b;
  --brand-purple-dim: rgba(255, 42, 75, 0.1);
  --text-purple-bright: #ff5c77;
  --border-purple: rgba(255, 42, 75, 0.4);
  --cyber-red: #ff2a4b;
  --cyber-red-soft: #ff5c77;
  --cyber-tab-idle: #9a9499;
}

/* Tab labels use the shared bracketed style in mobile-fixes.css; its active
   colour is var(--brand-purple), which this track sets to red above. */

/* Folder icons in listings and the sidebar. */
.dir-folder-icon,
.dir-title .folder-icon,
.academic-sidebar .folder-icon {
  color: var(--cyber-red) !important;
}

.dir-row:hover .dir-folder-icon,
.dir-row:hover .dir-title .folder-icon {
  color: var(--cyber-red-soft) !important;
}

/* mobile-fixes.css header buttons */
.shoug-header-menu-btn,
.shoug-directory-btn {
  border-color: rgba(255, 42, 75, 0.45);
  background: rgba(255, 42, 75, 0.08);
}

.shoug-header-menu-btn:hover,
.shoug-directory-btn:hover {
  border-color: rgba(255, 42, 75, 0.7);
  background: rgba(255, 42, 75, 0.16);
}

html:root .shoug-header-nav {
  border-color: rgba(255, 42, 75, 0.38) !important;
}

/* a11y.css focus rings */
html:root :focus-visible,
html:root .shoug-skip-link:focus {
  outline-color: var(--cyber-red) !important;
}

/* breakdown.css reading progress */
html:root .bd-progress > i {
  background: linear-gradient(90deg, #3b82f6, #ff2a4b, #ec4899);
}

/* search.js */
#shoug-search-box#shoug-search-box {
  background: #0c0708;
  border-color: rgba(255, 42, 75, 0.4);
  box-shadow: 0 0 60px rgba(255, 42, 75, 0.15);
}

#shoug-search-top#shoug-search-top svg,
.shoug-sr-section.shoug-sr-section,
mark.shoug-hl.shoug-hl {
  color: var(--cyber-red);
}

.shoug-sr-item.shoug-sr-item:hover,
.shoug-sr-item.shoug-sr-item.active {
  background: rgba(255, 42, 75, 0.1);
}

.shoug-sr-item.shoug-sr-item.active {
  border-left-color: var(--cyber-red);
}

#shoug-search-kbd#shoug-search-kbd,
.shoug-search-key.shoug-search-key {
  border-color: #3a1c22;
}

#shoug-search-results#shoug-search-results::-webkit-scrollbar-thumb {
  background: #3a1c22;
}

/* mobile-navigation.js sign-in button */
.shoug-auth-btn.shoug-auth-btn {
  border-color: rgba(255, 42, 75, 0.5);
  color: var(--cyber-red-soft);
}

/* pdf-embed.js */
.pdf-embed__card.pdf-embed__card {
  border-color: rgba(255, 42, 75, 0.24);
}

.pdf-embed__btn--ghost.pdf-embed__btn--ghost {
  border-color: rgba(255, 42, 75, 0.34);
}

.pdf-embed__btn--ghost.pdf-embed__btn--ghost:hover {
  background: rgba(255, 42, 75, 0.1);
}

.pdf-embed__btn.pdf-embed__btn:focus-visible {
  outline-color: var(--cyber-red);
}

/* recent-pages.js resume cards */
.shoug-resume__card.shoug-resume__card {
  border-color: rgba(255, 42, 75, 0.24);
}

.shoug-resume__card.shoug-resume__card:hover {
  background: rgba(255, 42, 75, 0.08);
}

/* standalone-theme.js dark fallback on standalone pages (no academic sidebar) */
html:root[data-theme="dark"]:not(:has(.academic-sidebar)) {
  --secondary: #ff9aa8 !important;
  --secondary-color: #ff9aa8 !important;
}

html:root[data-theme="dark"]:not(:has(.academic-sidebar)) body a,
html:root[data-theme="dark"]:not(:has(.academic-sidebar))
  body
  .relationships-section
  h4,
html:root[data-theme="dark"]:not(:has(.academic-sidebar))
  body
  .relationship-symbol {
  color: #ff8095 !important;
}

html:root[data-theme="dark"]:not(:has(.academic-sidebar)) body .diagram-type {
  background: #4a1520 !important;
  color: #ffe4e8 !important;
  border-color: #ff4d6a !important;
}

/* ------------------------------------------------------------------ light mode
 * light-mode.css tints the whole shell purple; these selectors outrank its
 * body.shoug-light-mode rules with html:root and repeat its !important flags. */
html:root body.shoug-light-mode {
  --bg: #fbf7f7;
  --bg-void: #fbf7f7;
  --bg-elevated: #fdf0f2;
  --text-main: #221417;
  --text-primary: #221417;
  --text-bright: #221417;
  --text-high: #221417;
  --text-dark: #221417;
  --text-secondary: #5a4a4f;
  --text-med: #5a4a4f;
  --text-dim: #6f6266;
  --text-dimmed: #6f6266;
  --text-muted: #77696d;
  --text-low: #77696d;
  --border: rgba(120, 40, 55, 0.18);
  --border-color: rgba(120, 40, 55, 0.18);
  --border-dim: rgba(120, 40, 55, 0.12);
  --border-subtle: rgba(120, 40, 55, 0.12);
  --border-main: rgba(120, 40, 55, 0.22);
  --border-med: rgba(120, 40, 55, 0.24);
  --border-medium: rgba(120, 40, 55, 0.24);
  --border-hard: rgba(120, 40, 55, 0.32);
  --grid-line: rgba(255, 42, 75, 0.06);
  --grid-pattern: rgba(255, 42, 75, 0.06);
  --brand-purple: #d91a3a;
  --brand-purple-dim: rgba(217, 26, 58, 0.1);
  --text-purple-bright: #c8102e;
  --border-purple: rgba(217, 26, 58, 0.4);
  --cyber-red: #d91a3a;
  --cyber-red-soft: #c8102e;
  --cyber-tab-idle: #6f6266;
  background-color: #fbf7f7 !important;
  background-image:
    radial-gradient(
      circle at 10% 8%,
      rgba(255, 42, 75, 0.08),
      transparent 25rem
    ),
    radial-gradient(
      circle at 92% 28%,
      rgba(255, 42, 75, 0.06),
      transparent 24rem
    ),
    linear-gradient(rgba(255, 42, 75, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 42, 75, 0.045) 1px, transparent 1px) !important;
}

html:root body.shoug-light-mode .shoug-site-header,
html:root body.shoug-light-mode .shoug-site-footer,
html:root body.shoug-light-mode .top-bar,
html:root body.shoug-light-mode .sidebar,
html:root body.shoug-light-mode .academic-sidebar,
html:root body.shoug-light-mode .sidebar-header {
  border-color: rgba(120, 40, 55, 0.18) !important;
  box-shadow: 0 12px 36px rgba(90, 30, 40, 0.08) !important;
}

html:root body.shoug-light-mode .shoug-site-footer {
  background: linear-gradient(
    135deg,
    rgba(255, 244, 246, 0.98),
    rgba(255, 241, 243, 0.98)
  ) !important;
}

html:root body.shoug-light-mode .shoug-header-logo,
html:root body.shoug-light-mode .shoug-footer-brand,
html:root body.shoug-light-mode h1,
html:root body.shoug-light-mode h2,
html:root body.shoug-light-mode h3,
html:root body.shoug-light-mode h4,
html:root body.shoug-light-mode h5,
html:root body.shoug-light-mode strong {
  color: #221417 !important;
}

html:root body.shoug-light-mode .shoug-header-nav a:hover,
html:root body.shoug-light-mode .shoug-header-nav a.active,
html:root body.shoug-light-mode a:hover {
  color: #c8102e;
}

html:root body.shoug-light-mode .shoug-icon-btn,
html:root body.shoug-light-mode .shoug-lang-btn,
html:root body.shoug-light-mode .shoug-theme-btn,
html:root body.shoug-light-mode button,
html:root body.shoug-light-mode input,
html:root body.shoug-light-mode textarea,
html:root body.shoug-light-mode select {
  border-color: rgba(120, 40, 55, 0.22);
  color: #221417;
}

html:root body.shoug-light-mode :focus-visible {
  outline-color: #d91a3a !important;
}

html:root body.shoug-light-mode .hero-terminal,
html:root body.shoug-light-mode .terminal-window,
html:root body.shoug-light-mode .terminal-panel,
html:root body.shoug-light-mode [class*="terminal-box"],
html:root body.shoug-light-mode [class*="code-window"],
html:root body.shoug-light-mode [class*="code-panel"] {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(255, 240, 243, 0.96)
  ) !important;
  border-color: rgba(255, 42, 75, 0.3) !important;
  box-shadow: 0 28px 70px rgba(90, 30, 40, 0.14) !important;
  color: #3a2529 !important;
}

html:root body.shoug-light-mode .terminal-header,
html:root body.shoug-light-mode [class*="terminal-header"],
html:root body.shoug-light-mode [class*="code-header"] {
  background: rgba(250, 222, 228, 0.72) !important;
  border-color: rgba(120, 40, 55, 0.18) !important;
}

html:root body.shoug-light-mode .terminal-content,
html:root body.shoug-light-mode [class*="terminal-content"],
html:root body.shoug-light-mode [class*="code-content"],
html:root body.shoug-light-mode .term-dim {
  color: #6b5358 !important;
}

html:root body.shoug-light-mode .stat-card,
html:root body.shoug-light-mode .work-card,
html:root body.shoug-light-mode .explore-item,
html:root body.shoug-light-mode [class$="-card"],
html:root body.shoug-light-mode [class*="-card "],
html:root body.shoug-light-mode [class$="-panel"],
html:root body.shoug-light-mode [class*="-panel "],
html:root body.shoug-light-mode [class$="-box"],
html:root body.shoug-light-mode [class*="-box "],
html:root body.shoug-light-mode [class$="-tile"],
html:root body.shoug-light-mode [class*="-tile "],
html:root body.shoug-light-mode [class$="-widget"],
html:root body.shoug-light-mode [class*="-widget "] {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 244, 246, 0.96)
  ) !important;
  border-color: rgba(120, 40, 55, 0.18) !important;
  box-shadow: 0 16px 42px rgba(90, 30, 40, 0.08) !important;
}

html:root body.shoug-light-mode .stat-card:hover,
html:root body.shoug-light-mode .work-card:hover,
html:root body.shoug-light-mode .explore-item:hover,
html:root body.shoug-light-mode [class$="-card"]:hover,
html:root body.shoug-light-mode [class$="-panel"]:hover,
html:root body.shoug-light-mode [class$="-tile"]:hover {
  background: linear-gradient(145deg, #ffffff, #ffeef1) !important;
  border-color: rgba(255, 42, 75, 0.5) !important;
  box-shadow: 0 22px 52px rgba(150, 30, 50, 0.14) !important;
}

html:root body.shoug-light-mode .explore-grid,
html:root body.shoug-light-mode [class*="grid-frame"],
html:root body.shoug-light-mode [class*="directory"],
html:root body.shoug-light-mode [class*="table-wrap"] {
  background-color: rgba(120, 40, 55, 0.16) !important;
  border-color: rgba(120, 40, 55, 0.2) !important;
}

html:root body.shoug-light-mode .dir-row,
html:root body.shoug-light-mode .tree-item,
html:root body.shoug-light-mode .list-row,
html:root body.shoug-light-mode [class*="resource-row"],
html:root body.shoug-light-mode [class*="course-row"] {
  border-color: rgba(120, 40, 55, 0.14) !important;
}

html:root body.shoug-light-mode .dir-row:hover,
html:root body.shoug-light-mode .tree-item:hover,
html:root body.shoug-light-mode .list-row:hover,
html:root body.shoug-light-mode [class*="resource-row"]:hover,
html:root body.shoug-light-mode [class*="course-row"]:hover {
  background: rgba(255, 236, 239, 0.94) !important;
  border-color: rgba(255, 42, 75, 0.42) !important;
}

html:root body.shoug-light-mode table {
  border-color: rgba(120, 40, 55, 0.18) !important;
  box-shadow: 0 16px 42px rgba(90, 30, 40, 0.08);
}

html:root body.shoug-light-mode th {
  background: #fbe6ea !important;
  color: #2e1a1e !important;
}

html:root body.shoug-light-mode td {
  border-color: rgba(120, 40, 55, 0.12) !important;
}

html:root body.shoug-light-mode pre,
html:root body.shoug-light-mode code {
  background: #f8eef0;
  border-color: rgba(120, 40, 55, 0.18);
  color: #4a2d33;
}

html:root body.shoug-light-mode hr {
  border-color: rgba(120, 40, 55, 0.16) !important;
}

html:root body.shoug-light-mode .main-wrapper > .top-bar,
html:root body.shoug-light-mode .app-layout .main-wrapper > .top-bar,
html:root body.shoug-light-mode .layout-wrapper .main-wrapper > .top-bar,
html:root body.shoug-light-mode .sys-layout .main-wrapper > .top-bar {
  border-color: rgba(255, 42, 75, 0.2) !important;
  color: #2e1a1e !important;
  box-shadow: 0 5px 18px rgba(90, 30, 40, 0.07) !important;
}

html:root body.shoug-light-mode .main-wrapper > .top-bar .breadcrumb .current,
html:root
  body.shoug-light-mode
  .main-wrapper
  > .top-bar
  .breadcrumb-link:hover {
  color: #c8102e !important;
}

html:root body.shoug-light-mode .main-wrapper > .top-bar .separator {
  color: #c9a3ab !important;
}

html:root body.shoug-light-mode .academic-sidebar > .sidebar-header,
html:root body.shoug-light-mode .sidebar.academic-sidebar > .sidebar-header {
  border-color: rgba(255, 42, 75, 0.2) !important;
  color: #2e1a1e !important;
}
