/* ========================================================
   LicenseVault — Universal Design System & Theme Engine
   Light / Dark Mode Dual Token Architecture (Section 2.2)
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* Typography & Subpixel Antialiasing (Anti-Halation) */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ========================================================
   Base Design Tokens (Light Mode Base)
   ======================================================== */
:root {
  --bg-app: #f8fafc;
  --bg-main: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.85);
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-input: #f1f5f9;
  --bg-input-focus: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-badge: rgba(var(--color-primary-500, 99 102 241), 0.08);

  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-strong: #94a3b8;
  --border-active: rgba(var(--color-primary-500, 99 102 241), 0.5);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-faint: #cbd5e1;

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-elevated: rgba(255, 255, 255, 0.95);
  --glass-blur: 12px;
  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  --card-shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  /* Brand Gradient Accents */
  --accent-indigo: var(--accent-brand, #4f46e5);
  --accent-violet: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-cyan: #0891b2;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;

  /* Lordicon Brand Gradient Palette */
  --lord-primary: #8b5cf6;
  --lord-secondary: #4f46e5;
  --lord-accent: #ec4899;
}

/* ========================================================
   Dark Mode Override Tokens (Section 2.2)
   ======================================================== */
html.dark {
  --bg-app: #090d16;
  --bg-main: #090d16;
  --bg-sidebar: #060911;
  --bg-header: rgba(6, 9, 17, 0.8);
  --bg-surface: #0f172a;
  --bg-surface-elevated: #151f38;
  --bg-input: #0b1120;
  --bg-input-focus: #0f172a;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-badge: rgba(var(--color-primary-500, 99 102 241), 0.12);

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-active: rgba(var(--color-primary-500, 99 102 241), 0.4);

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-faint: #475569;

  --glass-bg: rgba(15, 23, 42, 0.75);
  --glass-bg-elevated: rgba(21, 31, 56, 0.85);
  --glass-blur: 12px;
  --card-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.35);
  --card-shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  --scrollbar-track: rgba(15, 23, 42, 0.6);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

  /* Brand Gradient Accents */
  --accent-indigo: var(--accent-brand, #6366f1);
  --accent-violet: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  /* Lordicon Brand Palette */
  --lord-primary: var(--lord-primary, #8b5cf6);
  --lord-secondary: var(--lord-secondary, #4f46e5);
  --lord-accent: #ec4899;
}

/* ========================================================
   Lordicon Custom Element
   ======================================================== */
lord-icon {
  display: inline-block;
  vertical-align: middle;
  --lord-icon-primary: var(--lord-primary);
  --lord-icon-secondary: var(--lord-secondary);
}

/* ========================================================
   Body & Core Layout Base
   ======================================================== */
body {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================
   Semantic Utility Classes (Approach 2.3a)
   ======================================================== */
.surface {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
}

.surface-elevated {
  background-color: var(--bg-surface-elevated);
  border-color: var(--border-subtle);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-faint {
  color: var(--text-faint);
}

.border-subtle {
  border-color: var(--border-subtle);
}

.border-strong {
  border-color: var(--border-medium);
}

/* ========================================================
   Glassmorphism & Panels
   ======================================================== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--card-shadow);
}

.glass-panel-elevated {
  background: var(--glass-bg-elevated);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--card-shadow-elevated);
}

.console-glow {
  box-shadow: 0 0 25px -5px rgba(99, 102, 241, 0.25);
}

.console-glow-emerald {
  box-shadow: 0 0 20px -4px rgba(16, 185, 129, 0.3);
}

.console-glow-rose {
  box-shadow: 0 0 20px -4px rgba(244, 63, 94, 0.3);
}

.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.2), rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Page content smooth container */
.page-content-smooth {
  will-change: opacity, transform;
}

/* Code & Keys */
.key-badge {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  letter-spacing: 0.05em;
}

/* ========================================================
   View Transitions API (Section 4.2)
   ======================================================== */
@view-transition {
  navigation: auto;
}

aside.sidebar-desktop {
  view-transition-name: app-sidebar;
}

header {
  view-transition-name: app-header;
}

#main-content {
  view-transition-name: app-main;
}

::view-transition-old(app-main) {
  animation: 140ms cubic-bezier(0.4, 0, 1, 1) both cv-content-out;
}

::view-transition-new(app-main) {
  animation: 200ms cubic-bezier(0, 0, 0.2, 1) 30ms both cv-content-in;
}

@keyframes cv-content-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes cv-content-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================
   Theme Radial Ripple Reveal via View Transitions API
   ======================================================== */
html[data-theme-transitioning="true"] aside.sidebar-desktop,
html[data-theme-transitioning="true"] header,
html[data-theme-transitioning="true"] #main-content {
  view-transition-name: none !important;
}

html[data-theme-transitioning="true"]::view-transition-old(root),
html[data-theme-transitioning="true"]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-theme-transitioning="true"]::view-transition-old(root) {
  z-index: 1;
}

html[data-theme-transitioning="true"]::view-transition-new(root) {
  z-index: 9999;
}

@keyframes theme-radial-reveal {
  from {
    clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
  }
  to {
    clip-path: circle(150% at var(--click-x, 50%) var(--click-y, 50%));
  }
}

html[data-theme-transitioning="true"]::view-transition-new(root) {
  animation: theme-radial-reveal 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Swup Top Progress Bar */
.swup-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #ec4899);
  z-index: 99999;
  transition: width 200ms ease, opacity 150ms ease;
  pointer-events: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Sidebar transition & Layout Sync */
#app-sidebar {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease, border-color 200ms ease;
  overflow: hidden;
}

#app-sidebar.is-animating {
  will-change: width;
}

#content-wrapper {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

html.sidebar-is-collapsed #app-sidebar {
  width: 4rem;
}

#main-content {
  min-width: 0;
}

/* ========================================================
   Light Mode Theme Adaptation Layer
   Guarantees perfect legibility across all views & modals
   ======================================================== */
html:not(.dark) {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Ensure text on gradient buttons/badges stays pure white */
button[class*="bg-gradient-"],
button[class*="bg-gradient-"] *,
a[class*="bg-gradient-"],
a[class*="bg-gradient-"] *,
button[class*="bg-indigo-600"],
button[class*="bg-indigo-600"] *,
a[class*="bg-indigo-600"],
a[class*="bg-indigo-600"] *,
span[class*="bg-indigo-600"],
span[class*="bg-indigo-600"] *,
button[class*="bg-rose-600"],
button[class*="bg-rose-600"] * {
  color: #ffffff !important;
}

/* Comprehensive text color mapping in light mode (guarantees dark text on light backgrounds) */
html:not(.dark) h1.text-white,
html:not(.dark) h2.text-white,
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white,
html:not(.dark) h5.text-white,
html:not(.dark) h6.text-white,
html:not(.dark) p.text-white,
html:not(.dark) span.text-white:not([class*="bg-indigo-"]):not([class*="bg-gradient-"]):not([class*="bg-rose-"]):not([class*="from-"]),
html:not(.dark) div.text-white:not([class*="bg-indigo-"]):not([class*="bg-gradient-"]):not([class*="bg-rose-"]):not([class*="from-"]),
html:not(.dark) td.text-white,
html:not(.dark) th.text-white,
html:not(.dark) code.text-white,
html:not(.dark) strong.text-white,
html:not(.dark) label.text-white,
html:not(.dark) a.text-white:not([class*="bg-indigo-"]):not([class*="bg-gradient-"]):not([class*="bg-rose-"]),
html:not(.dark) li.text-white {
  color: var(--text-primary) !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: var(--text-primary) !important;
}

html:not(.dark) .text-slate-300 {
  color: var(--text-secondary) !important;
}

html:not(.dark) .text-slate-400 {
  color: var(--text-secondary) !important;
}

html:not(.dark) .text-slate-500 {
  color: var(--text-muted) !important;
}

/* Background surfaces in light mode */
html:not(.dark) .bg-slate-900 {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary);
}

html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/40 {
  background-color: var(--bg-input) !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/50 {
  background-color: var(--bg-hover) !important;
}

/* Border overrides in light mode */
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .border-white\/20 {
  border-color: var(--border-subtle) !important;
}

html:not(.dark) .divide-white\/5 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-subtle) !important;
}

/* Key badges in light mode */
html:not(.dark) .key-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* Inputs, textareas, and selects in light mode */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: var(--text-muted) !important;
}

html:not(.dark) select option {
  background-color: #ffffff;
  color: #0f172a;
}

/* Active sidebar item in light mode */
html:not(.dark) aside a.bg-indigo-600\/20 {
  background-color: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
}

html:not(.dark) aside a:hover:not(.bg-indigo-600\/20) {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-primary) !important;
}

/* ========================================================
   Modern Clean UI & Bento Utility Styles
   ======================================================== */
.bento-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.bento-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--card-shadow);
}

/* Translucent Micro-Badges */
.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1;
  letter-spacing: 0.025em;
  border: 1px solid transparent;
}
.badge-modern-success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}
.badge-modern-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.25);
}
.badge-modern-danger {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.25);
}
.badge-modern-indigo {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.25);
}