/* Notemark Global Theme System */
:root {
  /* Default Light Mode Variables */
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --surface-hover: #F3F4F6;
  --border: #E5E7EB;
  --border-subtle: #F3F4F6;
  --primary-text: #111827;
  --secondary-text: #6B7280;
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-light: rgba(79, 70, 229, 0.1);
  --success: #10B981;
  --error: #EF4444;
  --code-bg: #F1F5F9;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* System preference fallback when no data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0B0F19;
    --surface: #111827;
    --surface-hover: #1F2937;
    --border: #1F2937;
    --border-subtle: #182234;
    --primary-text: #F9FAFB;
    --secondary-text: #9CA3AF;
    --accent: #6366F1;
    --accent-hover: #818CF8;
    --accent-light: rgba(99, 102, 241, 0.15);
    --success: #34D399;
    --error: #F87171;
    --code-bg: #1E293B;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  }
}

/* Explicit light mode */
:root[data-theme="light"] {
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --surface-hover: #F3F4F6;
  --border: #E5E7EB;
  --border-subtle: #F3F4F6;
  --primary-text: #111827;
  --secondary-text: #6B7280;
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-light: rgba(79, 70, 229, 0.1);
  --success: #10B981;
  --error: #EF4444;
  --code-bg: #F1F5F9;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Explicit dark mode */
:root[data-theme="dark"] {
  --bg: #0B0F19;
  --surface: #111827;
  --surface-hover: #1F2937;
  --border: #1F2937;
  --border-subtle: #182234;
  --primary-text: #F9FAFB;
  --secondary-text: #9CA3AF;
  --accent: #6366F1;
  --accent-hover: #818CF8;
  --accent-light: rgba(99, 102, 241, 0.15);
  --success: #34D399;
  --error: #F87171;
  --code-bg: #1E293B;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Apply theme variables globally */
html, body {
  background-color: var(--bg);
  color: var(--primary-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin: 0;
  padding: 0;
  height: 100%;
}

a, .btn-link {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

.btn-primary {
  color: #fff;
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem var(--accent-light), 0 0 0 0.25rem var(--accent);
}

.blazor-error-boundary {
  background: #b32121;
  padding: 1rem 1rem 1rem 2rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* ========================================================= */
/* GLOBAL MARKDOWN PREVIEW STYLING                           */
/* ========================================================= */

/* Base Tables */
.preview-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 0.9375rem !important;
  display: table !important;
}

.preview-content th,
.preview-content td {
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--border) !important;
  text-align: left;
}

.preview-content th {
  background-color: var(--surface-hover) !important;
  font-weight: 600 !important;
  color: var(--primary-text) !important;
  border-bottom: 2px solid var(--border) !important;
}

.preview-content tr:hover td {
  background-color: var(--surface-hover);
}

/* Modern Preset Tables */
.preview-content[data-doc-style="modern"] table,
.preview-content.doc-style-modern table {
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.preview-content[data-doc-style="modern"] th,
.preview-content.doc-style-modern th {
  background-color: var(--surface-hover) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 2px solid var(--accent) !important;
}

.preview-content[data-doc-style="modern"] td,
.preview-content.doc-style-modern td {
  border: 1px solid var(--border) !important;
}

/* Academic Preset Tables */
.preview-content[data-doc-style="academic"] table,
.preview-content.doc-style-academic table {
  border: 1px solid rgba(128, 128, 128, 0.4) !important;
  border-top: 2.5px solid currentColor !important;
  border-bottom: 2.5px solid currentColor !important;
}

.preview-content[data-doc-style="academic"] th,
.preview-content.doc-style-academic th {
  border: 1px solid rgba(128, 128, 128, 0.35) !important;
  border-bottom: 2px solid currentColor !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

.preview-content[data-doc-style="academic"] td,
.preview-content.doc-style-academic td {
  border: 1px solid rgba(128, 128, 128, 0.25) !important;
}

/* Technical Preset Tables */
.preview-content[data-doc-style="technical"] table,
.preview-content.doc-style-technical table {
  border: 1.5px solid #30363d !important;
  background-color: #161b22 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.preview-content[data-doc-style="technical"] th,
.preview-content.doc-style-technical th {
  background-color: #21262d !important;
  color: #7ee787 !important;
  border: 1px solid #30363d !important;
}

.preview-content[data-doc-style="technical"] td,
.preview-content.doc-style-technical td {
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
}

/* Executive Preset Tables */
.preview-content[data-doc-style="executive"] table,
.preview-content.doc-style-executive table {
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 6px -1px rgba(15, 39, 68, 0.06) !important;
}

:root[data-theme="dark"] .preview-content[data-doc-style="executive"] table,
:root[data-theme="dark"] .preview-content.doc-style-executive table {
  border-color: #334155 !important;
}

.preview-content[data-doc-style="executive"] th,
.preview-content.doc-style-executive th {
  background-color: #0f2744 !important;
  color: #ffffff !important;
  border: 1px solid #1e3a5f !important;
}

:root[data-theme="dark"] .preview-content[data-doc-style="executive"] th,
:root[data-theme="dark"] .preview-content.doc-style-executive th {
  background-color: #1e293b !important;
  color: #38bdf8 !important;
  border: 1px solid #334155 !important;
}

.preview-content[data-doc-style="executive"] td,
.preview-content.doc-style-executive td {
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="dark"] .preview-content[data-doc-style="executive"] td,
:root[data-theme="dark"] .preview-content.doc-style-executive td {
  border: 1px solid #334155 !important;
}