/* =========================================
   1. CORE VARIABLES & RESET
   ========================================= */
:root {
    color-scheme: dark;
    --bg-main: #121212;
    --bg-card: #1E1E1E;
    --bg-input: #2A2A2A;
    --bg-code: #050709;
    --border-subtle: #333333;

    /* Muted Pastel Accents */
    --accent-primary: #79947D;    /* Sage Green (Submit/Save) */
    --accent-secondary: #B59C6D;  /* Dusty Gold/Tan (Copy/Draft) */
    --accent-info: #6C869E;       /* Slate Blue (Informational/Active Tab) */
    --accent-destructive: #9E6A6A; /* Dusty Rose (Delete) */

    --gold: var(--accent-secondary);
    --gold-hover: #D4BD8E;
    --pastel-blue: var(--accent-info);
    --pastel-green: var(--accent-primary);

    --text-main: #E0E0E0;
    --text-muted: #9E9E9E;
    --sidebar-width: 260px;

    /* Typographic Scale - Minor Third (1.2) */
    --ts-base: 1rem;      /* 16px */
    --ts-xs:   0.75rem;   /* 12px (Labels) */
    --ts-sm:   0.833rem;  /* 13.3px */
    --ts-md:   1.2rem;    /* 19.2px (h4) */
    --ts-lg:   1.44rem;   /* 23.0px (h3) */
    --ts-xl:   1.728rem;  /* 27.6px (h2) */
    --ts-xxl:  2.074rem;  /* 33.2px (h1) */
    --ts-h1:   2.1em;     /* Max cap */

    /* Override Bootstrap variables */
    --bs-body-bg: var(--bg-main) !important;
    --bs-body-bg-rgb: 18, 18, 18 !important;
    --bs-tertiary-bg: #161616 !important;
    --bs-secondary-bg: var(--bg-card) !important;
    --bs-primary: var(--accent-primary);
    --bs-info: var(--accent-info);
    --bs-success: var(--accent-primary);
    --bs-danger: var(--accent-destructive);
    --bs-warning: var(--accent-secondary);
}

/* =========================================
   LIGHT THEME OVERRIDES
   ========================================= */
[data-theme="light"] {
    color-scheme: light;
    --bg-main:       #F4F6F8;
    --bg-card:       #FFFFFF;
    --bg-input:      #F0F2F5;
    --bg-code:       #F4F4F5;
    --border-subtle: #DDE1E7;

    /* Deeper accent variants for legibility on white */
    --accent-primary:     #4F7155;  /* Deep Sage */
    --accent-secondary:   #8B6E38;  /* Deep Gold */
    --accent-info:        #3D6480;  /* Deep Slate Blue */
    --accent-destructive: #7A3E3E;  /* Deep Rose */

    --gold:       var(--accent-secondary);
    --gold-hover: #A0823F;
    --pastel-blue:  var(--accent-info);
    --pastel-green: var(--accent-primary);

    /* Use dark slate for main text in light theme */
    --text-main:  #1A1F2B;
    --text-muted: #5A6478;

    /* Semantic text overrides */
    --text-gold:  var(--accent-secondary);
}

/* Global utility classes for theme variables */
.text-main { color: var(--text-main) !important; }
.text-gold { color: var(--gold) !important; }
.fw-800 { font-weight: 800; }

/* Theme transition — smooth swap */
html, body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: 'Open Sans', "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    background-image: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Light theme: body text class override */
[data-theme="light"] body { color: var(--text-main) !important; }
[data-theme="light"] .text-light { color: var(--text-main) !important; }

/* =========================================
   2. TYPOGRAPHY & UI ELEMENTS
   ========================================= */
.page-title { 
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700; 
    font-size: 2rem;
    color: #ffffff; 
    letter-spacing: -0.01em; 
    text-transform: none !important;
}
.text-gold { color: var(--gold) !important; }
.bg-gold { background-color: var(--gold) !important; }
.text-muted { color: var(--text-muted) !important; }

a { color: var(--gold); text-decoration: none; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
a:hover { color: var(--gold-hover); text-decoration: none; }

code, .code-block { 
    font-family: 'JetBrains Mono', monospace !important; 
    font-size: 0.9rem; 
    line-height: 1.8;
}

/* =========================================
   3. NAVIGATION (FLOATING CONTROL PANEL)
   ========================================= */
.navbar {
    background-color: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.5rem 2rem;
    height: 60px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

[data-theme="light"] .navbar {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: var(--border-subtle);
    box-shadow: 0 1px 12px rgba(0,0,0,0.08);
}

[data-theme="light"] .navbar-collapse {
    background: rgba(255,255,255,0.98);
}

/* Light theme: dropdown menus */
[data-theme="light"] .dropdown-menu {
    background-color: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .dropdown-item {
    color: var(--text-main) !important;
}
[data-theme="light"] .dropdown-item:hover {
    background-color: rgba(0,0,0,0.04) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .dropdown-item.active {
    background-color: rgba(61,100,128,0.08) !important;
    color: var(--accent-info) !important;
}
[data-theme="light"] .dropdown-divider {
    border-color: var(--border-subtle) !important;
}

/* Light: nav-links */
[data-theme="light"] .nav-link {
    color: var(--text-muted) !important;
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: var(--accent-info) !important;
}

.nav-brand { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 700; 
    color: var(--gold) !important; 
    letter-spacing: -0.01em;
}

/* =========================================
   4. INDUSTRIAL CARDS & FORMS
   ========================================= */
.app-card, .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
    padding: 1rem;
}

[data-theme="light"] .app-card,
[data-theme="light"] .card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    color: var(--text-main);
}

.bg-dark-card {
    background-color: var(--bg-card) !important;
}

.app-card:hover {
    border-color: var(--pastel-blue) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .app-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;
}

.form-control, .form-select, .form-textarea, textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    max-width: 100%;
}

textarea {
    min-height: 120px;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.form-control:focus {
    border-color: var(--accent-info) !important;
    box-shadow: 0 0 0 2px rgba(108, 134, 158, 0.25) !important;
    background-color: var(--bg-input) !important;
}

/* Universal fix for native date/time pickers in dark mode */
input[type="date"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="time"] {
    color-scheme: dark !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    display: block !important;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.metric-label {
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 0.5rem;
}

/* =========================================
   5. WORKSPACE & SIDEBAR
   ========================================= */
.workspace {
    display: flex;
    min-height: 750px;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px;
    overflow: hidden;
}

.doc-sidebar {
    width: var(--sidebar-width);
    background: #161616 !important;
    border-right: 1px solid var(--border-subtle) !important;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

[data-theme="light"] .doc-sidebar {
    background: #EAECF0 !important;
}

.doc-item {
    padding: 8px 16px;
    margin: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: 0.2s;
    font-size: 13px;
}

.doc-item:hover { background: rgba(255,255,255,0.03); }
[data-theme="light"] .doc-item:hover { background: rgba(0,0,0,0.04); }

.doc-item.active {
    background: rgba(108, 134, 158, 0.1) !important;
    border-left-color: var(--accent-info) !important;
}
[data-theme="light"] .doc-item.active {
    background: rgba(61,100,128,0.08) !important;
}

.doc-item.active .doc-item-label { color: var(--accent-info) !important; font-weight: 600; }

.doc-content { flex: 1; overflow: auto; padding: 1.5rem; background: var(--bg-main); }

.code-block {
    background-color: var(--bg-code) !important;
    border: 1px solid var(--border-color) !important;
    padding: 1.5rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-main);
    position: relative; /* For floating buttons */
}

.copy-btn-floating {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0.3;
    transition: all 0.2s;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
}

.code-block:hover .copy-btn-floating {
    opacity: 1;
    background: var(--bg-card);
    border-color: var(--gold);
    color: var(--gold);
}

/* =========================================
   6. SYNTAX HIGHLIGHTING (Pastel Scheme)
   ========================================= */
.code-block .c-gold   { color: var(--gold); }
.code-block .c-green  { color: var(--pastel-green); }
.code-block .c-purple { color: #a08ec8; }
.code-block .c-blue   { color: var(--pastel-blue); }
.code-block .c-faint  { color: #4a4a5a; }
.code-block .c-bright { color: #ffffff; }
.code-block .c-lblue  { color: #a0c0d0; }

/* =========================================
   7. BUTTONS (Industrial Solid Rock)
   ========================================= */
.btn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-sm {
    height: 32px;
    padding: 4px 12px;
    font-size: 12px;
}

.btn-primary, .btn-sage {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #121212 !important;
}

.btn-primary:hover, .btn-sage:hover { 
    background-color: #8da691 !important; 
    border-color: #8da691 !important;
}

.btn-gold, .btn-secondary-action {
    background-color: var(--accent-secondary) !important;
    border-color: var(--accent-secondary) !important;
    color: #121212 !important;
}

.btn-outline-gold, .btn-outline-secondary {
    border-color: var(--accent-secondary) !important;
    color: var(--accent-secondary) !important;
    background: transparent !important;
}

.btn-outline-gold:hover, .btn-outline-secondary:hover {
    background-color: rgba(181, 156, 109, 0.1) !important;
    color: var(--accent-secondary) !important;
}

.btn-outline-primary, .btn-outline-sage {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-sage:hover {
    background-color: rgba(121, 148, 125, 0.1) !important;
    color: var(--accent-primary) !important;
}

.btn-info, .btn-slate {
    background-color: var(--accent-info) !important;
    border-color: var(--accent-info) !important;
    color: #121212 !important;
}

.btn-outline-info, .btn-outline-slate {
    border-color: var(--accent-info) !important;
    color: var(--accent-info) !important;
    background: transparent !important;
}

.btn-outline-info:hover, .btn-outline-slate:hover {
    background-color: rgba(108, 134, 158, 0.1) !important;
    color: var(--accent-info) !important;
}

.btn-danger, .btn-rose {
    background-color: var(--accent-destructive) !important;
    border-color: var(--accent-destructive) !important;
    color: #121212 !important;
}

.btn-outline-danger, .btn-outline-rose {
    border-color: var(--accent-destructive) !important;
    color: var(--accent-destructive) !important;
    background: transparent !important;
}

.btn-outline-danger:hover, .btn-outline-rose:hover {
    background-color: rgba(158, 106, 106, 0.1) !important;
    color: var(--accent-destructive) !important;
}

/* =========================================
   8. MODALS & NOTIFICATIONS
   ========================================= */
.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7) !important;
    color: var(--text-main);
}

.modal-header { border-bottom: 1px solid var(--border-color) !important; }

[data-theme="light"] .modal-content {
    box-shadow: 0 20px 50px rgba(0,0,0,0.18) !important;
}

.flash {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    display: none;
}
.flash.active { display: block; animation: fadeIn 0.3s ease; }
.flash-error   { background: rgba(200, 112, 112, 0.1); border: 1px solid #c87070; color: #ff8585; }
.flash-success { background: rgba(126, 200, 128, 0.1); border: 1px solid #7ec880; color: #a5f0a7; }

[data-theme="light"] .flash-error   { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
[data-theme="light"] .flash-success  { background: #f0fdf4; border-color: #86efac; color: #166534; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
    9. REFINED INDUSTRIAL TYPOGRAPHY
    ========================================= */
h1, .h1 { font-size: 2rem !important; font-weight: 600 !important; }
h2, .h2 { font-size: 1.75rem !important; font-weight: 600 !important; }
h3, .h3 { font-size: 1.5rem !important; font-weight: 600 !important; }
h4, .h4 { font-size: 1.25rem !important; font-weight: 600 !important; }

.page-title {
    font-size: 2rem !important;
    letter-spacing: -0.01em;
}

.doc-sidebar-hd {
    color: var(--accent-info) !important;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 1.25rem 1rem 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* AI Studio Instructions Block */
.instructions-block {
    border-left: 3px solid var(--accent-info);
    background-color: rgba(108, 134, 158, 0.05);
    padding: 1rem;
    border-radius: 0 4px 4px 0;
    margin-bottom: 1.5rem;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
    color: var(--text-main) !important;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--gold) !important;
}

/* =========================================
   10. SIMPLEMDE EDITOR OVERRIDES
   ========================================= */
.CodeMirror {
    background: #0b0e11 !important;
    color: #f1f3f5 !important;
    border-color: #2d3339 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    height: 400px !important;
    min-height: 250px !important;
    max-width: 100% !important;
}
.editor-preview, .editor-preview-side {
    max-height: 400px !important;
    overflow-y: auto !important;
}
.CodeMirror-cursor { border-left-color: var(--gold) !important; }
.CodeMirror-selected { background: rgba(200,169,110,0.4) !important; }
.CodeMirror-gutters {
    background: #0d0e12 !important;
    border-right-color: #2d3339 !important;
}
.CodeMirror-linenumber { color: #4a4f56 !important; }
.editor-toolbar {
    background: #15191c !important;
    border-color: #2d3339 !important;
    opacity: 1 !important;
}
.editor-toolbar a {
    color: #adb5bd !important;
}
.editor-toolbar a:hover,
.editor-toolbar a.active {
    color: var(--gold) !important;
    background: rgba(255,255,255,0.05) !important;
}
.editor-toolbar i { color: inherit !important; }
.editor-preview, .editor-preview-side {
    background: #0b0e11 !important;
    color: #f1f3f5 !important;
}
.editor-toolbar.fullscreen, .CodeMirror-fullscreen, .editor-preview-side {
    z-index: 1060 !important;
}
.editor-statusbar { color: #6c757d !important; }

/* Raw Text Look: Disable SimpleMDE's inline markdown styling + kill header line-heights */
.CodeMirror .cm-header,
.CodeMirror .CodeMirror-code .cm-header-1,
.CodeMirror .CodeMirror-code .cm-header-2,
.CodeMirror .CodeMirror-code .cm-header-3,
.CodeMirror .CodeMirror-code .cm-header-4,
.CodeMirror .CodeMirror-code .cm-header-5,
.CodeMirror .CodeMirror-code .cm-header-6 {
    font-size: 1.0em !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.CodeMirror .cm-strong { font-weight: 400 !important; }
.CodeMirror .cm-em { font-style: normal !important; }
.CodeMirror .cm-link { text-decoration: none !important; color: inherit !important; }
.CodeMirror pre { border: none !important; box-shadow: none !important; }
.CodeMirror-line { background: none !important; }
.CodeMirror-lines { background: none !important; }
.CodeMirror-scroll { background: none !important; }
.CodeMirror-sizer { background: none !important; }
.CodeMirror-gutter-wrapper { background: none !important; }
.CodeMirror-code { background: none !important; }
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar { background: none !important; }
.CodeMirror { background: #0b0e11 !important; background-image: none !important; }

/* Light theme: SimpleMDE overrides */
[data-theme="light"] .CodeMirror {
    background: #FAFAFA !important;
    color: #1A1F2B !important;
    border-color: #DDE1E7 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
[data-theme="light"] .CodeMirror-line { background: none !important; }
[data-theme="light"] .CodeMirror-lines { background: none !important; }
[data-theme="light"] .CodeMirror-scroll { background: none !important; }
[data-theme="light"] .CodeMirror-sizer { background: none !important; }
[data-theme="light"] .CodeMirror-gutter-wrapper { background: none !important; }
[data-theme="light"] .CodeMirror-code { background: none !important; }
[data-theme="light"] .CodeMirror { background-image: none !important; background: #FAFAFA !important; }
[data-theme="light"] .CodeMirror pre { border: none !important; box-shadow: none !important; outline: none !important; }
[data-theme="light"] .CodeMirror-line { border: none !important; box-shadow: none !important; }
[data-theme="light"] .CodeMirror-selected { background: rgba(200,169,110,0.35) !important; }
[data-theme="light"] .CodeMirror-gutters {
    background: #F0F2F5 !important;
    border-right-color: #DDE1E7 !important;
}
[data-theme="light"] .CodeMirror-linenumber { color: #9BA3AF !important; }
[data-theme="light"] .editor-toolbar {
    background: #F0F2F5 !important;
    border-color: #DDE1E7 !important;
}
[data-theme="light"] .editor-toolbar a { color: #5A6478 !important; }
[data-theme="light"] .editor-toolbar a:hover,
[data-theme="light"] .editor-toolbar a.active {
    color: var(--gold) !important;
    background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .editor-preview,
[data-theme="light"] .editor-preview-side {
    background: #FAFAFA !important;
    color: #1A1F2B !important;
}
[data-theme="light"] .editor-statusbar { color: #9BA3AF !important; }


.pedal-prompt-wrapper,
.pedal-artifact-content,
.pub-artifact-content,
.markdown-body,
.pub-md-content {
    font-size: 0.95rem !important; /* Compact scholarly appearance */
}

/* Modal Label Contrast */
.metric-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem; /* Standardized to 12px per request */
    letter-spacing: 1.5px;
}

  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
}

/* Status Dropdown Refinements */
.status-dropdown .btn.status-btn {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    padding: 4px 12px;
    height: 32px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Color Mappings - Muted Pastels */
/* Status-specific background Colors (Muted Pastels) */
.status-dropdown .btn.status-btn[data-status="draft"] { background-color: var(--accent-secondary) !important; color: #121212 !important; border-color: var(--accent-secondary) !important; }
.status-dropdown .btn.status-btn[data-status="submitted"] { background-color: var(--accent-primary) !important; color: #121212 !important; border-color: var(--accent-primary) !important; }
.status-dropdown .btn.status-btn[data-status="interview"] { background-color: var(--accent-info) !important; color: #121212 !important; border-color: var(--accent-info) !important; }
.status-dropdown .btn.status-btn[data-status="offer"] { background-color: var(--accent-primary) !important; color: #121212 !important; border-color: var(--accent-primary) !important; }
.status-dropdown .btn.status-btn[data-status="rejected"] { background-color: var(--accent-destructive) !important; color: #121212 !important; border-color: var(--accent-destructive) !important; }

.status-dropdown .dropdown-menu {
    border: 1px solid var(--border-subtle) !important;
    background: #1E1E1E !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    padding: 4px 0;
}

.status-option {
    font-size: 12px;
    padding: 4px 12px;
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif;
}

.status-option:hover {
    background: rgba(255,255,255,0.05) !important;
}


/* --- Slug System --- */
.slug-feedback { font-size: 0.7rem; font-family: 'JetBrains Mono'; transition: all 0.2s; height: 1.2rem; }
.slug-chip { 
    font-family: 'JetBrains Mono'; font-size: 0.7rem; background: rgba(255,255,255,0.05); 
    color: var(--gold); border: 1px solid rgba(200,169,110,0.2); border-radius: 4px; 
    padding: 1px 6px; cursor: pointer; transition: all 0.2s;
}
.slug-chip:hover { background: rgba(200,169,110,0.1); border-color: var(--gold); }
.slug-chip::before { content: '/'; opacity: 0.5; margin-right: 2px; }

/* --- Edit Navigation Header --- */
.nav-edit-header { 
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 8px; padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.nav-edit-header .btn { 
    font-family: 'JetBrains Mono'; font-size: 0.7rem; font-weight: 700; 
    border-color: rgba(255,255,255,0.1); color: var(--text-muted); padding: 0.25rem 0.6rem;
}
.nav-edit-header .btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: transparent; }
.nav-edit-header .nav-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; font-weight: 800; letter-spacing: 0.03rem; margin-right: 0.25rem; }

/* --- Institution Filter --- */
.filter-inst-group .btn { 
    font-size: 0.7rem; font-weight: 700; border-color: rgba(255,255,255,0.1); 
    background: var(--bg-card); color: var(--text-muted); padding: 0.35rem 0.75rem;
}
.filter-inst-group .btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.filter-inst-group .btn.active { background: var(--gold); border-color: var(--gold); color: #000; }
/* --- Dashboard Status Tabs --- */
.status-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    gap: 0.5rem;
}
.status-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
}
.status-tab:hover {
    color: var(--text-main);
}
.status-tab.active {
    color: var(--gold);
}
.status-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
}
.status-tab .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.status-tab.active .badge {
    background: rgba(200, 169, 110, 0.1);
    color: var(--gold);
    border-color: rgba(200, 169, 110, 0.3);
}

/* --- Month/Year Grouping Headers --- */
.app-group-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.app-group-header .header-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.app-group-header .header-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(200, 169, 110, 0.3), transparent);
}

/* ─────────────────────────────────────────────────────────────────
   GLOBAL MARKDOWN & EDITOR ENHANCEMENTS
   ───────────────────────────────────────────────────────────────── */

/* 1. SimpleMDE Sticky Toolbar */
.editor-toolbar {
    position: sticky !important;
    top: 60px !important; /* Adjust for sticky navbar height (match with Dossier nav) */
    z-index: 1010 !important; /* Just below navbar (1020) */
    background: #111 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    opacity: 1 !important;
}

/* Dark theme for SimpleMDE across all modules */
.CodeMirror {
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* 2. Code Block Copy Button */
.code-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}
.code-wrapper pre {
    margin-bottom: 0;
}
.btn-copy-code {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-copy-code:hover {
    background: rgba(200, 169, 110, 0.1);
    border-color: var(--gold);
    color: var(--gold);
}
.btn-copy-code.copied {
    background: var(--accent-success);
    border-color: var(--accent-success);
    color: #000;
}

/* =========================================
   11. RESPONSIVE REFINEMENTS (MOBILE)
   ========================================= */
@media (max-width: 991.98px) {
    .navbar {
        padding: 0.5rem 1rem !important;
        height: auto !important;
        min-height: 60px;
    }
    .navbar-collapse {
        background: rgba(18, 18, 18, 0.98);
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        margin-top: 0.75rem;
        padding: 1rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }
    [data-theme="light"] .navbar-collapse {
        background: rgba(255,255,255,0.98);
        box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    }
    .navbar-nav {
        align-items: center !important;
        text-align: center;
        gap: 0.5rem;
    }
    .nav-item {
        width: 100%;
    }
    .nav-link {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px;
    }
    .nav-link.active {
        background: rgba(108, 134, 158, 0.05);
        color: var(--accent-info) !important;
    }
    .dropdown-menu {
        border: none !important;
        background: rgba(255,255,255,0.03) !important;
        margin-top: 0 !important;
        text-align: center;
    }
    .dropdown-item {
        justify-content: center;
        padding: 0.6rem !important;
    }
    /* Fix logout button on mobile */
    .nav-item.ms-lg-3 {
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
}

/* =========================================
   12. LIGHT THEME — COMPREHENSIVE OVERRIDES
   Catches Bootstrap utility classes and
   hardcoded inline-dark patterns used
   across individual pages.
   ========================================= */

/* --- Bootstrap text utilities --- */
[data-theme="light"] .text-white,
[data-theme="light"] .text-light { color: var(--text-main) !important; }
[data-theme="light"] .text-muted  { color: #64748B !important; }
[data-theme="light"] .small.text-muted { color: #5B6A7E !important; }

/* --- Bootstrap bg utilities --- */
[data-theme="light"] .bg-dark,
[data-theme="light"] .bg-black {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .bg-opacity-25 { --bs-bg-opacity: 0.04; }
[data-theme="light"] .bg-opacity-50 { --bs-bg-opacity: 0.06; }

[data-theme="light"] .bg-transparent {
    background-color: transparent !important;
}

/* --- Bootstrap border utilities --- */
[data-theme="light"] .border-secondary {
    border-color: var(--border-subtle) !important;
}
[data-theme="light"] .border-dark {
    border-color: var(--border-subtle) !important;
}

/* --- Form inputs with dark inline overrides --- */
[data-theme="light"] input.bg-black,
[data-theme="light"] textarea.bg-black,
[data-theme="light"] select.bg-black,
[data-theme="light"] input.text-white,
[data-theme="light"] textarea.text-white,
[data-theme="light"] select.text-white,
[data-theme="light"] .form-control.bg-black,
[data-theme="light"] .form-control.text-white {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}

/* --- Date/time picker light adaptation --- */
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="time"] {
    color-scheme: light !important;
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    -webkit-filter: none !important;
}

/* --- Badges --- */
[data-theme="light"] .badge.bg-dark {
    background-color: #E8EBF0 !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}

/* --- Accordion/Collapsible dark overrides --- */
[data-theme="light"] .accordion-button.bg-transparent,
[data-theme="light"] .accordion-button.text-light,
[data-theme="light"] .accordion-button {
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
}
[data-theme="light"] .accordion-button::after {
    filter: invert(1) brightness(0.5) !important;
}
[data-theme="light"] .accordion-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
}

/* --- Nav tabs in light mode --- */
[data-theme="light"] .nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border-bottom: 2px solid transparent !important;
}
[data-theme="light"] .nav-tabs .nav-link.active {
    color: var(--text-main) !important;
    border-bottom-color: var(--gold) !important;
}
[data-theme="light"] .nav-tabs .nav-link:hover:not(.active) {
    border-bottom-color: var(--border-subtle) !important;
}

/* --- Breadcrumbs --- */
[data-theme="light"] .breadcrumb-item,
[data-theme="light"] .breadcrumb-item a,
[data-theme="light"] .nav-breadcrumb a {
    color: var(--text-muted) !important;
}
[data-theme="light"] .breadcrumb-item.active,
[data-theme="light"] .nav-breadcrumb span:last-child {
    color: var(--gold) !important;
}

/* --- Status tabs & badges --- */
[data-theme="light"] .status-tab .badge {
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
    border-color: var(--border-subtle);
}
[data-theme="light"] .status-tab.active {
    border-bottom-color: var(--gold) !important;
}
[data-theme="light"] .status-tab.active .badge {
    background: rgba(139, 110, 56, 0.12);
    color: var(--gold);
    border-color: rgba(139, 110, 56, 0.3);
}

/* --- Group Headers (Dashboard) --- */
[data-theme="light"] .app-group-header {
    color: var(--text-muted) !important;
    opacity: 0.9;
}
[data-theme="light"] .app-group-header .header-line {
    background: linear-gradient(to right, rgba(139, 110, 56, 0.2), transparent) !important;
}

/* --- Code blocks & copy buttons --- */
[data-theme="light"] .code-block,
[data-theme="light"] pre {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--text-main);
}
[data-theme="light"] .copy-btn-floating {
    background: #fff;
    border-color: #CBD5E1;
    color: #64748B;
}
[data-theme="light"] .code-block:hover .copy-btn-floating {
    background: #fff;
    border-color: var(--gold);
    color: var(--gold);
}
[data-theme="light"] .btn-copy-code {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #475569;
}

/* --- SimpleMDE Sticky Toolbar light fix --- */
[data-theme="light"] .editor-toolbar {
    background: #F0F2F5 !important;
    border-bottom-color: var(--border-subtle) !important;
}
[data-theme="light"] .CodeMirror {
    border-color: var(--border-subtle) !important;
}

/* --- Slug chips & feedback --- */
[data-theme="light"] .slug-chip {
    background: rgba(0,0,0,0.04);
    border-color: rgba(139, 110, 56, 0.2);
    color: var(--gold);
}
[data-theme="light"] .slug-chip:hover {
    background: rgba(139, 110, 56, 0.08);
}

/* --- Nav edit header --- */
[data-theme="light"] .nav-edit-header {
    background: rgba(0,0,0,0.03);
    border-color: var(--border-subtle);
}
[data-theme="light"] .nav-edit-header .btn {
    border-color: var(--border-subtle);
    color: var(--text-muted);
}
[data-theme="light"] .nav-edit-header .btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    background: transparent;
}

/* --- Institution filter buttons --- */
[data-theme="light"] .filter-inst-group .btn {
    background: var(--bg-card);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}
[data-theme="light"] .filter-inst-group .btn:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}
[data-theme="light"] .filter-inst-group .btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* --- Status dropdown dark override --- */
[data-theme="light"] .status-dropdown .dropdown-menu {
    border-color: var(--border-subtle) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] .status-option:hover {
    background: rgba(0,0,0,0.04) !important;
}

/* --- Page title --- */
[data-theme="light"] .page-title {
    color: var(--text-main) !important;
}

/* --- Instructions block --- */
[data-theme="light"] .instructions-block {
    background-color: rgba(61, 100, 128, 0.06);
}

/* --- Auto-save status pill --- */
[data-theme="light"] .auto-save-status {
    background: rgba(255,255,255,0.92);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

/* --- Footer --- */
[data-theme="light"] footer {
    border-top-color: var(--border-subtle) !important;
}
[data-theme="light"] footer .badge.bg-dark {
    background: #E8EBF0 !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}

/* --- Sidebar header --- */
[data-theme="light"] .doc-sidebar-hd {
    color: var(--accent-info) !important;
}

/* --- Modal Bootstrap dark overrides --- */
[data-theme="light"] .modal-header {
    border-bottom-color: var(--border-subtle) !important;
}
[data-theme="light"] .modal-footer {
    border-top-color: var(--border-subtle) !important;
}

/* --- Button text on light: keep dark text on solid buttons --- */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-sage { color: #fff !important; }
[data-theme="light"] .btn-gold,
[data-theme="light"] .btn-secondary-action { color: #fff !important; }
[data-theme="light"] .btn-info,
[data-theme="light"] .btn-slate { color: #fff !important; }
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-rose { color: #fff !important; }

/* --- Search box in navbar --- */
[data-theme="light"] .navbar input.form-control {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .navbar input.form-control::placeholder {
    color: #94A3B8 !important;
}

/* --- Extra Premium Polish --- */
[data-theme="light"] .card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .btn-sage, 
[data-theme="light"] .btn-primary {
    box-shadow: 0 4px 12px rgba(74, 108, 111, 0.2) !important;
}
[data-theme="light"] .btn-gold {
    box-shadow: 0 4px 12px rgba(139, 110, 56, 0.2) !important;
}

/* --- Chart Labels --- */
[data-theme="light"] #chartTotalValue {
    color: var(--text-main) !important;
}

/* --- Status tabs & badges --- */
[data-theme="light"] .status-tab {
    color: #334155 !important;
}
[data-theme="light"] .status-tab .badge {
    background: rgba(0,0,0,0.08);
    color: #1E293B;
    border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .status-tab.active {
    color: #8B6E38 !important;
    border-bottom-color: #8B6E38 !important;
}
[data-theme="light"] .status-tab.active .badge {
    background: rgba(139, 110, 56, 0.2) !important;
    color: #8B6E38 !important;
    border-color: rgba(139, 110, 56, 0.4) !important;
}

/* --- Group Headers (Dashboard) --- */
[data-theme="light"] .app-group-header .header-text {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}
[data-theme="light"] .app-group-header .header-line {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent) !important;
}

/* --- Material Badges & Metrics --- */
[data-theme="light"] .app-card .badge.opacity-50 {
    opacity: 1 !important;
    background: #E2E8F0 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}
[data-theme="light"] .app-card .badge.bg-dark {
    background: #E2E8F0 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}
[data-theme="light"] .app-card .badge.bg-gold {
    background: #FDE68A !important;
    color: #92400E !important;
    border-color: #F59E0B !important;
}
[data-theme="light"] .app-card .badge {
    font-weight: 700 !important;
    color: #1E293B !important; /* Force dark text on generic status badges */
}
[data-theme="light"] .app-card .metric-label {
    opacity: 1 !important;
    color: #8B6E38 !important; /* Clearer gold for IDs */
    font-weight: 700;
}

/* --- Card Headers specific fix --- */
[data-theme="light"] .app-card h3.text-white {
    color: #0F172A !important;
}

/* --- Scrollbar adaptation --- */
[data-theme="light"] ::-webkit-scrollbar { width: 8px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-main); }
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* --- Search component overrides --- */
[data-theme="light"] .snippet mark, 
[data-theme="light"] .snippet em {
    background: rgba(139, 110, 56, 0.2) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .search-result-card:hover {
    background: rgba(0,0,0,0.02) !important;
    border-color: var(--gold) !important;
}
/* --- List Group (Sidebar) light refinement --- */
[data-theme="light"] .list-group-item {
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
}
[data-theme="light"] .list-group-item.active {
    background: rgba(139, 110, 56, 0.1) !important;
    color: var(--gold) !important;
    border-left: 3px solid var(--gold) !important;
    font-weight: 700;
}
[data-theme="light"] .list-group-item:hover:not(.active) {
    background: rgba(0,0,0,0.02) !important;
    color: var(--text-main) !important;
}

/* --- Table Head light refinement --- */
[data-theme="light"] thead[style*="background: rgba(0,0,0,0.03)"] {
    background: #F1F5F9 !important;
    border-bottom: 2px solid #E2E8F0 !important;
}
[data-theme="light"] .table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.01) !important;
}

/* --- Modal overrides for light premium --- */
[data-theme="light"] .modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
    border-color: var(--border-subtle) !important;
}
[data-theme="light"] .modal-title {
    color: var(--gold) !important;
}

/* --- SimpleMDE light refinement --- */
[data-theme="light"] .editor-toolbar {
    background: #F8FAFC !important;
    border-color: var(--border-subtle) !important;
    opacity: 1 !important;
}
[data-theme="light"] .editor-toolbar i {
    color: var(--text-muted) !important;
}
[data-theme="light"] .CodeMirror {
    background: #FFFFFF !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
    background-image: none !important;
}
[data-theme="light"] .editor-statusbar {
    color: var(--text-muted) !important;
}