/* eidolon-dossier.css — Dossier / Intelligence Briefing theme
 * Light: Cool forensic steel, muted teal-cyan focus, squared geometry
 * Dark:  Deep void, electric cyan luminescence, scan-line CRT texture
 * The visual language of the Case Dossier report — cinematic intelligence-grade clarity
 *
 * This theme is a FULL aesthetic transformation:
 *   - Squarish border radii (2–4px) replacing the default 8–12px roundness
 *   - Goldman display font for headings (loaded from /static/fonts/)
 *   - Opaque, solid card surfaces instead of glassmorphism blur
 *   - Horizontal scan-line texture overlay (dark mode)
 *   - Left-bar cyan accent on section headers
 *   - Uppercase tracked labels and metadata
 *   - Teal-tinged dark borders (#1a3a4a) instead of generic rgba
 *   - Corner bracket decorative accents
 *   - Classification-banner typography
 *   - Animated background glow: DISABLED
 */

/* ---------------------------------- */
/* 0. GOLDMAN WEB FONT                */
/* ---------------------------------- */
@font-face {
  font-family: "Goldman";
  src: url("/static/fonts/Goldman-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Goldman";
  src: url("/static/fonts/Goldman-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------- */
/* 1. VARIABLES & THEMES              */
/* ---------------------------------- */
:root {
  /* Light Theme — The Briefing Room */
  --font-color: #1a2332;
  --background-color: #e8edf3;
  --background-color-secondary: #e0e5ec;
  --primary-color: #0097b2;
  --primary-rgb: 0, 151, 178;
  --primary-color-hover: #007a91;
  --primary-color-inverse: #ffffff;
  --muted-color: #6e7a8a;
  --card-background-color: rgba(240, 244, 250, 0.92);
  --card-border-color: rgba(0, 150, 178, 0.12);
  --form-border-color: rgba(0, 150, 178, 0.20);
  --success-color: #00b368;
  --error-color: #d94452;
  --warning-color: #c48a02;
  --info-color: #0097b2;
  --shadow: 0 4px 16px 0 rgba(13, 17, 23, 0.08);

  /* Light theme background — cool steel */
  --bg-start: #e8edf3;
  --bg-end: #e0e5ec;
  --accent-color-1: #0097b2;
  --accent-color-2: #0097b2;
  --glass-bg: rgba(235, 240, 248, 0.88);
  --glass-border: rgba(0, 150, 178, 0.12);
  --brand-glow: #0097b2;
  --text-primary: #1a2332;
  --text-secondary: #4a5568;

  /* ── Dossier geometry tokens ── */
  --border-radius-xs: 2px;
  --border-radius-sm: 3px;
  --border-radius: 4px;
  --border-radius-lg: 6px;
  --border-radius-full: 4px;

  /* ── Dossier typography tokens ── */
  --font-heading: "Goldman", "Segoe UI", system-ui, sans-serif;

  /* ── Dossier shadow — flatter, tighter ── */
  --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  /* Dark Theme — The Dossier */
  --font-color: #e6edf3;
  --background-color: #0d1117;
  --background-color-secondary: #161b22;
  --primary-color: #00d4ff;
  --primary-rgb: 0, 212, 255;
  --primary-color-hover: #33ddff;
  --primary-color-inverse: #0d1117;
  --muted-color: #6e7681;
  --card-background-color: #161b22;
  --card-border-color: #1a3a4a;
  --form-border-color: rgba(0, 212, 255, 0.20);
  --success-color: #00ff88;
  --error-color: #ff4757;
  --warning-color: #ffa502;
  --info-color: #00d4ff;
  --shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.50);

  /* Dark theme — solid void, no gradient */
  --bg-start: #0d1117;
  --bg-end: #0d1117;
  --accent-color-1: #00d4ff;
  --accent-color-2: #00d4ff;
  --glass-bg: #161b22;
  --glass-border: #1a3a4a;
  --brand-glow: #00d4ff;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;

  /* Dark dossier shadows — hard-edge */
  --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
  --shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.60);
}

/* ---------------------------------- */
/* 2. DISABLE ANIMATED BACKGROUND     */
/* ---------------------------------- */
body::before {
  display: none !important;
}

/* ---------------------------------- */
/* 3. SCAN-LINE CRT OVERLAY           */
/* ---------------------------------- */
/* Disabled — uncomment to enable horizontal scan-line texture.
 * Adjust spacing (11→12px) and opacity (0.025) to taste.

body::after {
  display: none !important;
}

[data-theme="dark"] body::after {
  content: '';
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 11px,
    rgba(200, 220, 255, 0.025) 11px,
    rgba(200, 220, 255, 0.025) 12px
  );
}

— Light mode variant (more subtle):
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 11px,
    rgba(0, 0, 0, 0.015) 11px, rgba(0, 0, 0, 0.015) 12px
  );
}

*/

/* ===================================================================== */
/* 4. TYPOGRAPHY — Goldman headings, tight tracking, uppercase labels    */
/* ===================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
  font-weight: 700 !important;
}

h4 { font-size: 1.1rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.9rem !important; }

/* Dark mode heading glow */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: #00d4ff !important;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.15) !important;
}

/* ===================================================================== */
/* 5. SURFACES — Opaque, solid, no glassmorphism blur                   */
/* ===================================================================== */

/* Kill backdrop-filter everywhere — dossier surfaces are solid, not glass */
.content-section,
article,
.card,
.panel,
.tile,
.feature-card,
.testimonial-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--border-radius) !important;
}

/* Dark mode: solid opaque cards with teal border */
[data-theme="dark"] .content-section,
[data-theme="dark"] article,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .tile {
  background: #161b22 !important;
  border: 1px solid #1a3a4a !important;
  border-left: 3px solid rgba(0, 212, 255, 0.30) !important;
}

/* Light mode: solid, clean cards */
.content-section,
article,
.card,
.panel,
.tile {
  background: var(--card-background-color);
  border: 1px solid var(--card-border-color);
  border-left: 3px solid rgba(0, 151, 178, 0.25);
}

/* Top-edge glow accent line on cards */
[data-theme="dark"] .content-section::before,
[data-theme="dark"] .card::before,
[data-theme="dark"] .panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #00d4ff, rgba(0, 212, 255, 0.3), transparent);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

[data-theme="dark"] .content-section:hover::before,
[data-theme="dark"] .card:hover::before,
[data-theme="dark"] .panel:hover::before {
  opacity: 1;
}

/* Remove the float-up hover on content sections — dossier is grounded, not airy */
.content-section:hover,
.card:hover,
.feature-card:hover {
  transform: none !important;
}

/* ===================================================================== */
/* 6. SECTION HEADERS — Dossier-style with left accent bar              */
/* ===================================================================== */

.content-section h2,
.settings-section-title,
.panel h2 {
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* Section header icon glow */
[data-theme="dark"] .content-section h2 i {
  color: #00d4ff;
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.4));
}

/* ===================================================================== */
/* 7. TABLES — Dark banded rows, cyan header accents, squared geometry   */
/* ===================================================================== */

table {
  border-radius: var(--border-radius) !important;
  backdrop-filter: none !important;
}

th {
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.72em !important;
  font-weight: 700 !important;
}

[data-theme="dark"] th {
  background-color: #0d2137 !important;
  color: #00d4ff !important;
  border-bottom: 1px solid #1a3a4a !important;
}

[data-theme="dark"] td {
  border-bottom: 1px solid rgba(26, 58, 74, 0.5) !important;
}

[data-theme="dark"] tbody tr:nth-child(even) {
  background-color: rgba(22, 27, 34, 0.5);
}

[data-theme="dark"] tbody tr:hover {
  background-color: rgba(0, 212, 255, 0.04) !important;
  transform: none !important;
}

/* Light mode table accents */
th {
  border-bottom: 2px solid var(--primary-color);
}

tbody tr:hover {
  transform: none !important;
}

/* ===================================================================== */
/* 8. NAVBAR — Solid, opaque, with bottom accent line                   */
/* ===================================================================== */

.navbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="dark"] .navbar {
  background: #0d1117 !important;
  border-bottom: 1px solid #1a3a4a !important;
}

/* Accent glow line under navbar */
[data-theme="dark"] .navbar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, #00d4ff 30%, #00d4ff 70%, transparent 95%);
  opacity: 0.6;
}

/* Subtle glow underneath the accent line */
[data-theme="dark"] .navbar::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, rgba(0, 212, 255, 0.12) 30%, rgba(0, 212, 255, 0.12) 70%, transparent 95%);
  z-index: -1;
}

/* Logo ring — squared */
.navbar-logo-ring {
  border-radius: var(--border-radius) !important;
}

/* Icon buttons — squared */
.btn-icon-round {
  border-radius: var(--border-radius-sm) !important;
}

/* ===================================================================== */
/* 9. FORMS & INPUTS — Tight, squared, solid                            */
/* ===================================================================== */

input,
select,
textarea {
  border-radius: var(--border-radius) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] input:not(.omnibar-input),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #0d1117 !important;
  border-color: #1a3a4a !important;
}

[data-theme="dark"] input:not(.omnibar-input):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.10) !important;
  background-color: #161b22 !important;
}

/* ===================================================================== */
/* 10. BUTTONS — Squared, tactical                                      */
/* ===================================================================== */

button,
a[role="button"],
.btn {
  border-radius: var(--border-radius-sm) !important;
}

/* CTA buttons — not pill-shaped, squared */
.cta-button {
  border-radius: var(--border-radius) !important;
}

/* Pill buttons — still small but not fully round */
.btn-pill {
  border-radius: var(--border-radius-sm) !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.06em !important;
}

/* ===================================================================== */
/* 11. BADGES & STATUS — Dossier classification style                   */
/* ===================================================================== */

.badge,
.status-badge,
[class*="badge"] {
  border-radius: 2px !important;
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* ===================================================================== */
/* 12. METADATA LABELS — Uppercase, muted, tracked                     */
/* ===================================================================== */

label,
.meta-label,
.settings-form-label,
.ctb-label {
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.78em !important;
}

/* ===================================================================== */
/* 13. BLOCKQUOTES — Left cyan bar, no quote decoration                */
/* ===================================================================== */

blockquote {
  border-left: 3px solid var(--brand-glow) !important;
  border-radius: var(--border-radius) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] blockquote {
  background-color: #0d2137 !important;
  border-color: #1a3a4a !important;
  border-left: 3px solid #00d4ff !important;
}

blockquote::before {
  display: none !important;
}

/* ===================================================================== */
/* 14. CODE BLOCKS — Solid dark, not glassy                            */
/* ===================================================================== */

pre,
code {
  border-radius: var(--border-radius-sm) !important;
}

[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: #0d1117 !important;
  border-color: #1a3a4a !important;
  color: #00d4ff;
}

/* ===================================================================== */
/* 15. SCROLLBARS — Squared, teal-tinted                               */
/* ===================================================================== */

*::-webkit-scrollbar-thumb {
  border-radius: 2px !important;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #1a3a4a !important;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: #00d4ff !important;
}

/* ===================================================================== */
/* 16. TOAST & FEEDBACK — Squared, solid                               */
/* ===================================================================== */

.error-toast,
.offline-indicator {
  border-radius: var(--border-radius) !important;
  backdrop-filter: none !important;
}

/* ===================================================================== */
/* 17. DROPDOWN & POPOVERS — Squared, opaque                          */
/* ===================================================================== */

.omnibar-dropdown {
  border-radius: var(--border-radius) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .omnibar-dropdown {
  background: #161b22 !important;
  border-color: #1a3a4a !important;
}

/* ===================================================================== */
/* 18. MODAL & OVERLAYS — Squared geometry                             */
/* ===================================================================== */

.modal-content,
.modal-dialog,
[class*="modal"] {
  border-radius: var(--border-radius) !important;
}

/* ===================================================================== */
/* 19. SETTINGS PANEL — Dossier-grade styling                          */
/* ===================================================================== */

.settings-section {
  border-radius: var(--border-radius) !important;
}

.settings-tab-button {
  border-radius: var(--border-radius-sm) !important;
}

.settings-form-input {
  border-radius: var(--border-radius) !important;
}

/* Theme swatch cards — squared */
.theme-swatch-card {
  border-radius: var(--border-radius) !important;
}

.theme-swatch-preview {
  border-radius: var(--border-radius-sm) !important;
}

/* ===================================================================== */
/* 20. HERO SECTION — Goldman branding                                 */
/* ===================================================================== */

.hero h1 {
  font-family: var(--font-heading) !important;
  letter-spacing: 0.08em !important;
}

[data-theme="dark"] .hero h1 {
  background: linear-gradient(135deg, #e6edf3, #00d4ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===================================================================== */
/* 21. WORKSPACE PANELS — Opaque, bordered, dossier structure          */
/* ===================================================================== */

[data-theme="dark"] .panel,
[data-theme="dark"] [class*="panel"] {
  background: #161b22 !important;
  border-color: #1a3a4a !important;
  border-radius: var(--border-radius) !important;
}

/* ===================================================================== */
/* 22. LINKS — Cyan, no underline by default                           */
/* ===================================================================== */

a {
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

[data-theme="dark"] a:hover {
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.25);
}

/* ===================================================================== */
/* 23. CLASSIFICATION BANNER — Intelligence-grade document marker      */
/* ===================================================================== */

/* Utility class for dossier classification markers */
.dossier-classification {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--muted-color);
}

/* ===================================================================== */
/* 24. FEATURE CARDS — Squared, grounded                               */
/* ===================================================================== */

.feature-card {
  border-radius: var(--border-radius) !important;
}

.feature-card::before {
  display: none !important;
}

[data-theme="dark"] .feature-card {
  background: #161b22 !important;
  border: 1px solid #1a3a4a !important;
}

.feature-card h3 {
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* ===================================================================== */
/* 25. LOADING SPINNERS — Cyan accent on dark                          */
/* ===================================================================== */

[data-theme="dark"] .loading-spinner {
  border-color: #1a3a4a !important;
  border-top-color: #00d4ff !important;
}