/* =============================================================
   ParaGate Unified Design System (Palette v3)
   Palette Source:
     Deep Navy       #154D71
     Ocean Indigo    #1C6EA4
     Sky Primary     #33A1E0
     Action Primary  #3396D3
     Soft Highlight  #FFF9AF
     Soft Surface    #FFF0CE
     Warm Surface    #EBCB90
     Neutral Light   #EEEEEE
   Philosophy:
     - Calm professional healthcare / platform tone based on deep navy & ocean blues
     - Vibrant actionable blues for CTAs (use #3396D3 for solid buttons, #33A1E0 for gradients / hover)
     - Warm neutrals (#FFF9AF, #FFF0CE, #EBCB90) used sparingly for status / highlight panels
     - Neutral Light (#EEEEEE) for dividers, subtle borders
     - Focus states rely on semi-transparent primary ring for accessibility
     - All text colors targeted to achieve WCAG AA (>= 4.5:1 for body, 3:1 for meta)
   ============================================================= */
:root {
  /* Core Brand Roles */
  --color-brand-deep: #154D71; /* Deep brand anchor */
  --color-brand-ocean: #1C6EA4; /* Secondary brand */
  --color-brand-sky: #33A1E0; /* Bright accent */
  --color-action: #3396D3; /* Primary action base */

  /* Support / Semantic Surfaces */
  --color-surface-soft: #FFF0CE; /* Light elevated surface */
  --color-surface-warm: #EBCB90; /* Warm card / highlight */
  --color-highlight-soft: #FFF9AF; /* Soft notification / emphasis */
  --color-neutral-light: #EEEEEE; /* Base divider / subtle bg */

  /* Base Neutral Scale (generated blending brand deep + white) */
  --neutral-0: #ffffff;
  --neutral-50: #f7fafc;
  --neutral-100: #f1f5f8;
  --neutral-200: #e3e9f0;
  --neutral-300: #cdd8e2;
  --neutral-400: #b3c4d1;
  --neutral-500: #88a2b3;
  --neutral-600: #5d7e94;
  --neutral-700: #3f5d73;
  --neutral-800: #234059;
  --neutral-900: #162b3c;
  --neutral-950: #0f1c29;

  /* Text */
  --text-primary: #132836; /* On light surfaces */
  --text-secondary: #4a6374; /* Meta / secondary */
  --text-inverse: #ffffff; /* On deep brand / action */
  --text-muted: #6d8797;

  /* Interactive Tokens */
  --focus-ring: 0 0 0 3px rgba(51,150,211,0.45);
  --focus-ring-strong: 0 0 0 3px rgba(21,77,113,0.55);
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px -2px rgba(14,46,69,0.20), 0 2px 4px rgba(14,46,69,0.16);
  --shadow-lg: 0 8px 34px -6px rgba(14,46,69,0.30), 0 4px 10px rgba(14,46,69,0.18);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg,#1C6EA4 0%, #33A1E0 60%, #3396D3 100%);
  --gradient-action: linear-gradient(135deg,#3396D3,#33A1E0);
  --gradient-warm: linear-gradient(135deg,#FFF9AF,#EBCB90);
  --gradient-soft: linear-gradient(145deg,#ffffff,#f6fbff);

  /* Component Specific */
  --border-color: var(--neutral-200);
  --border-color-strong: var(--neutral-300);
  --sidebar-bg: #0f1c29; /* Derived from neutral-950 */
  --sidebar-bg-elev: #132836; /* Slight elevation */
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-link: #b3c4d1;
  --sidebar-link-hover-bg: rgba(51,161,224,0.10);
  --sidebar-link-active-bg: rgba(51,161,224,0.18);
  --sidebar-link-active-bar: #33A1E0;

  --header-bg: rgba(255,255,255,0.75);
  --header-border: var(--neutral-200);

  --btn-primary-bg: #3396D3;
  --btn-primary-bg-hover: #2d8cc7;
  --btn-primary-bg-active: #277db3;
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: var(--neutral-100);
  --btn-secondary-bg-hover: var(--neutral-200);
  --btn-secondary-bg-active: var(--neutral-300);
  --btn-secondary-text: var(--text-primary);

  --btn-outline-border: #3396D3;
  --btn-outline-text: #1C6EA4;
  --btn-outline-hover-bg: rgba(51,150,211,0.08);
  --btn-outline-hover-border: #1C6EA4;

  --warning-bg: #FFF9AF;
  --warning-border: #EBCB90;
  --info-bg: #E3F4FF; /* generated pale of #33A1E0 */
  --info-border: #33A1E0;
  --success-bg: #E1F8F0; /* generated pale teal */
  --success-border: #3396D3; /* keep brand coherence */
  --danger-bg: #FFE8E5;
  --danger-border: #e0665d;
  --danger-text: #9e2d24;

  --link-color: #1C6EA4;
  --link-hover: #154D71;

  --table-header-bg: var(--neutral-100);
  --table-row-hover: #f2f9fe;

  --input-bg: #ffffff;
  --input-border: var(--neutral-300);
  --input-border-focus: #3396D3;
  --input-placeholder: #7894a6;

  --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
  --transition-base: 200ms cubic-bezier(.4,0,.2,1);
}

/* THEME API USAGE ==================================================
   Apply themes by setting body[data-theme]:
     body[data-theme="light"] (default when unspecified)
     body[data-theme="dark"] (uses overrides below)
     body[data-theme="auto"] (planned: will reflect prefers-color-scheme)

   JS Integration:
     localStorage key: 'pg-theme'
     Values stored: 'light' | 'dark'
     If absent: fallback to prefers-color-scheme, else light.

   Adding New Theme:
     1. Duplicate variable override block similar to dark.
     2. Use selector body[data-theme="newName"].
     3. Keep contrast: primary text >= 4.5:1 vs base surface.
=================================================================== */

/* =============================================================
   LIGHT THEME LEGACY OVERRIDES
   Applies to components originally styled for dark (modern-appshell)
   to ensure coherent light experience.
============================================================== */
body[data-theme="light"] .app-sidebar {
  background: linear-gradient(180deg,#ffffff,#f5f9fc 70%, #eef4f8);
  color: var(--text-secondary);
  border-right:1px solid var(--border-color);
}
body[data-theme="light"] .sidebar-brand .brand-title { color: var(--color-brand-deep); }
body[data-theme="light"] .sidebar-brand .brand-subtitle { color: var(--text-secondary); }
body[data-theme="light"] .nav-group-title { color: var(--text-secondary); background: transparent; }
body[data-theme="light"] .nav-group-title:hover { background: var(--neutral-100); color: var(--text-primary); }
body[data-theme="light"] .nav-group-title[aria-expanded="true"] { background: var(--neutral-100); color: var(--text-primary); }
body[data-theme="light"] .nav-link { color: var(--text-secondary); }
body[data-theme="light"] .nav-link:hover { background: var(--neutral-100); color: var(--text-primary); }
body[data-theme="light"] .nav-link.active { background: var(--neutral-100); color: var(--text-primary); border-left-color: var(--btn-primary-bg); }

/* Glass cards & tool container */
body[data-theme="light"] .glass-card { background:#ffffff; border:1px solid var(--border-color); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
body[data-theme="light"] .glass-card:hover { box-shadow: var(--shadow-md); }
body[data-theme="light"] .ai-tool-container { background: linear-gradient(135deg,#f6fbff 0%,#ffffff 60%,#f0f6fa 100%); }

/* Dropdown menu (user menu) */
body[data-theme="light"] .dropdown-menu { background:#ffffff; border:1px solid var(--border-color); -webkit-backdrop-filter: none; backdrop-filter:none; box-shadow: var(--shadow-md); }
body[data-theme="light"] .dropdown-item { color: var(--text-primary); }
body[data-theme="light"] .dropdown-item:hover { background: var(--neutral-100); color: var(--text-primary); }
body[data-theme="light"] .dropdown-divider { border-color: var(--border-color); }

/* User button (btn-glass) */
body[data-theme="light"] .btn-glass { background:#ffffff; border:1px solid var(--border-color); color: var(--text-primary); }
body[data-theme="light"] .btn-glass:hover { background: var(--neutral-100); color: var(--text-primary); border-color: var(--border-color-strong); }
/* Unify interactive control sizing (Light vs Dark) */
.btn-glass { font-size:0.95rem; line-height:1.1; font-weight:600; }
.dropdown-menu { font-size:0.92rem; }
.dropdown-item { font-size:0.92rem; }
body[data-theme="dark"] .btn-glass { font-size:0.95rem; }
body[data-theme="dark"] .dropdown-item { font-size:0.92rem; }
/* Ensure icon + text alignment consistency */
.btn-glass .fas, .btn-glass .bi { font-size:1.05em; }

/* Outline danger tweak for light */
body[data-theme="light"] .btn-outline-danger { color:#b42d2d; border-color:#e38b83; }
body[data-theme="light"] .btn-outline-danger:hover { background:#ffe8e5; color:#9e2d24; }

/* Tabs inside tool nav (if any gradient text assumed) */
body[data-theme="light"] .tool-nav .nav-link { background: transparent; border:1px solid transparent; color: var(--text-secondary); }
body[data-theme="light"] .tool-nav .nav-link.active { background: var(--neutral-100); color: var(--text-primary); border-color: var(--border-color); }

/* =============================================================
   Base Layout & Typography
   ============================================================= */
html { height:100%; }
body { font-family: 'Segoe UI','Noto Sans TC', system-ui,-apple-system,BlinkMacSystemFont,'Microsoft JhengHei',sans-serif; color: var(--text-primary); background: var(--gradient-soft); -webkit-font-smoothing: antialiased; margin:0; min-height:100vh; display:flex; }
.app-shell { display:flex; min-height:100vh; width:100%; }

h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.15; color: var(--text-primary); }
.lead { font-size:1.125rem; color: var(--text-secondary); font-weight:400; }
small, .text-muted { color: var(--text-secondary); }
/* NOTE: .form-text (Bootstrap helper text) sometimes inherits unintended dark overrides from legacy CSS.
  We normalize it to follow the same token-based system as .text-muted for both themes. */
.form-text { color: var(--text-secondary); }

/* Label Normalization -------------------------------------------------
   Some Razor pages (e.g. ImageToImage) still rely on Bootstrap's default
   .form-label or bare <label> elements without a semantic helper class.
   In dark mode these sometimes inherited a near-black (#212529) from
   Bootstrap base because our override only targeted body color. To ensure
   consistent readability, unify generic label / legend styling to use
   tokenized text color.  (Scope kept minimal to avoid altering badge labels.)
----------------------------------------------------------------------- */
label, .form-label, legend { color: var(--text-primary); }

/* Links */
a { color: var(--link-color); text-decoration:none; transition:color var(--transition-fast); }
a:hover, a:focus { color: var(--link-hover); text-decoration:underline; }

/* =============================================================
   Sidebar Redesign
   ============================================================= */
.app-sidebar { background: linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-elev)); color: var(--sidebar-link); border-right:1px solid var(--sidebar-border); width:260px; position:fixed; inset:0 auto 0 0; overflow-y:auto; z-index:30; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.app-sidebar.collapsed { width:84px; }
.sidebar-brand { display:flex; gap:0.75rem; align-items:center; padding:1.25rem 1.25rem 1rem; border-bottom:1px solid rgba(255,255,255,0.05); }
.sidebar-brand .brand-title { font-size:1.15rem; font-weight:700; margin:0; letter-spacing:.5px; color:#fff; }
.sidebar-brand .brand-subtitle { font-size:0.65rem; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin:0; }

.nav-group-title { font-size:0.9rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; padding:0.65rem 1rem; color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:.5rem; position:relative; cursor:pointer; border-radius: var(--radius-sm); transition:background var(--transition-fast),color var(--transition-fast); }
.nav-group-title:hover { color:#fff; background:rgba(255,255,255,0.06); }
.nav-group-title[aria-expanded="true"] { background:rgba(255,255,255,0.10); color:#fff; }

.nav-list { list-style:none; margin:0; padding:0; }
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.65rem 1rem; color: var(--sidebar-link); font-weight:500; font-size:.925rem; position:relative; border:1px solid transparent; border-left:4px solid transparent; border-radius:0 var(--radius-sm) var(--radius-sm) 0; transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast); }
.nav-link:hover { background: var(--sidebar-link-hover-bg); color:#fff; }
.nav-link.active { background: var(--sidebar-link-active-bg); color:#fff; border-left-color: var(--sidebar-link-active-bar); }
.nav-link:focus-visible { outline:none; box-shadow: var(--focus-ring); }

.sidebar-toggle { position:absolute; bottom:1rem; right:1rem; width:38px; height:38px; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:all var(--transition-fast); }
.sidebar-toggle:hover { background:rgba(255,255,255,0.14); }

/* Collapsed adjustments */
.app-sidebar.collapsed .brand-text, .app-sidebar.collapsed .nav-group-title { display:none; }
.app-sidebar.collapsed .nav-link { justify-content:center; padding:.65rem 0; }
.app-sidebar.collapsed .nav-link span.nav-text { display:none; }
.app-sidebar.collapsed .sidebar-toggle { right:50%; transform:translateX(50%); }

/* =============================================================
   Header
   ============================================================= */
.app-header { position:sticky; top:0; z-index:40; height:64px; display:flex; align-items:center; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); background: var(--header-bg); border-bottom:1px solid var(--header-border); box-shadow: var(--shadow-sm); transition:background var(--transition-base); }
.header-content { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 1.25rem; }
.header-title { font-size:1.35rem; font-weight:600; margin:0; background: linear-gradient(90deg,var(--color-brand-deep),var(--color-brand-sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* =============================================================
   Main & Content
   ============================================================= */
.app-main { flex:1; margin-left:280px; display:flex; flex-direction:column; min-height:100vh; transition:margin var(--transition-base); }
.app-main.sidebar-collapsed { margin-left:84px; }
.content-area { flex:1; }

/* Cards */
.card, .surface-card { background: var(--neutral-0); border:1px solid var(--border-color); border-radius: var(--radius-lg); padding:1.25rem 1.5rem; box-shadow: var(--shadow-sm); position:relative; transition:box-shadow var(--transition-fast),transform var(--transition-fast); }
.card:hover, .surface-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-header { border-bottom:1px solid var(--border-color); margin:-1.25rem -1.5rem 1rem; padding:1rem 1.5rem; font-weight:600; font-size:.95rem; background:linear-gradient(90deg,#ffffff,#f5f9fc); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* Glass Card Spacing Enhancement =====================================
   Reason: After introducing rounded corners / inset layouts, the default
   .card-header negative margins + padding caused header text & controls
   to feel visually "貼邊" (too close to the curved border). We increase
   internal padding and slightly reduce vertical compression while keeping
   the edge-to-edge header background aesthetic.
   Strategy:
     1. Add internal padding to .glass-card so body content breathes.
     2. Override header margin/padding specifically when inside .glass-card
        (scoped selector) without affecting standard .card usage elsewhere.
   Safe: Placed immediately after base .card rules to maintain cascade.
===================================================================== */
.glass-card { padding:1.25rem 1.5rem 1.5rem; position:relative; }
.glass-card > .card-header {
  /* Maintain edge-to-edge background while enlarging internal padding */
  margin:-1.25rem -1.5rem 1.15rem; /* slightly more space below header */
  padding:1.15rem 1.85rem 1rem;     /* widen horizontal + top padding */
}
body[data-theme="dark"] .glass-card > .card-header {
  /* Reuse dark gradient but allow extra padding to persist */
  background: linear-gradient(90deg,#183446,#132836);
}

/* Elevated Warm / Soft Panels */
.panel-warm { background: var(--gradient-warm); border:1px solid #e5bd73; color:#4a3a10; }
.panel-soft { background: linear-gradient(135deg,#ffffff,#FFF0CE); border:1px solid #e9d6a5; color:#51421b; }

/* Buttons */
.btn { font-weight:600; letter-spacing:.3px; border-radius: var(--radius-md); position:relative; overflow:hidden; transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast); }
.btn-primary, .btn-brand { background: var(--btn-primary-bg); color: var(--btn-primary-text); border:1px solid var(--btn-primary-bg); }
.btn-primary:hover, .btn-brand:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); box-shadow: var(--shadow-md); }
.btn-primary:active, .btn-brand:active { background: var(--btn-primary-bg-active); border-color: var(--btn-primary-bg-active); transform: translateY(1px); }

.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border:1px solid var(--btn-secondary-bg); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-secondary:active { background: var(--btn-secondary-bg-active); }

.btn-outline-primary { background: transparent; color: var(--btn-outline-text); border:1px solid var(--btn-outline-border); }
.btn-outline-primary:hover { background: var(--btn-outline-hover-bg); color: var(--btn-outline-text); border-color: var(--btn-outline-hover-border); }
.btn-outline-primary:active { background: rgba(51,150,211,0.14); }

.btn-link { background:none; border:none; color: var(--link-color); padding:0.25rem 0; }
.btn-link:hover { color: var(--link-hover); }

.btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }

/* Badges */
.badge { display:inline-flex; align-items:center; font-weight:600; font-size:.675rem; padding:.4rem .6rem; border-radius: var(--radius-pill); letter-spacing:.5px; text-transform:uppercase; }
.badge-primary { background: var(--gradient-action); color:#fff; }
.badge-soft { background: var(--neutral-100); color: var(--text-secondary); }
.badge-warm { background: var(--highlight-soft); color:#4d4100; }
.badge-outline { background:#fff; border:1px solid var(--border-color); color: var(--text-secondary); }

/* Alerts */
.alert { border-radius: var(--radius-md); padding:0.9rem 1rem; border:1px solid var(--border-color); background:#fff; display:flex; gap:.75rem; align-items:flex-start; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color:#534100; }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color:#0d3d58; }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color:#134a33; }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

/* Forms */
.form-control, .form-select { background: var(--input-bg); border:1px solid var(--input-border); color: var(--text-primary); border-radius: var(--radius-md); padding:0.625rem 0.75rem; font-size:0.95rem; transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-control::placeholder { color: var(--input-placeholder); }
.form-control:focus, .form-select:focus { border-color: var(--input-border-focus); box-shadow: var(--focus-ring); outline:none; }
.input-group-text { background: var(--neutral-100); border:1px solid var(--input-border); color: var(--text-secondary); }

/* Tables */
.table { width:100%; border-collapse: separate; border-spacing:0; font-size:.9rem; background: transparent; }
.table thead th { background: var(--table-header-bg); color: var(--text-secondary); font-weight:600; text-transform:uppercase; font-size:.65rem; letter-spacing:.08em; padding:.75rem .75rem; border-bottom:1px solid var(--border-color); }
.table tbody tr { transition:background var(--transition-fast); }
.table tbody tr:hover { background: var(--table-row-hover); }
.table th, .table td { padding:.7rem .75rem; border-bottom:1px solid var(--neutral-200); }
.table-striped tbody tr:nth-of-type(odd) { background: #fcfdff; }

/* Modals */
.modal-content { background: #ffffff; border:1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom:1px solid var(--border-color); }
.modal-footer { border-top:1px solid var(--border-color); }

/* Utility */
.divider { height:1px; background: var(--neutral-200); margin:1.25rem 0; }
.shadow-hover:hover { box-shadow: var(--shadow-md) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.text-brand { color: var(--color-brand-deep) !important; }
.bg-soft { background: var(--neutral-50) !important; }
.bg-brand { background: var(--color-brand-deep) !important; color:#fff !important; }
.bg-ocean { background: var(--color-brand-ocean) !important; color:#fff !important; }
.bg-gradient-brand { background: var(--gradient-brand) !important; color:#fff !important; }

/* Focus visible polyfill for better keyboard nav */
:focus:not(:focus-visible) { outline:none; box-shadow:none; }

/* Transitions for page fade */
.fade-in { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }

/* Media Queries */
@media (max-width: 1023.98px) {
  .app-sidebar { transform:translateX(-100%); transition: transform var(--transition-base); }
  .app-sidebar.mobile-open { transform:translateX(0); }
  .app-main { margin-left:0; }
  .app-main.sidebar-collapsed { margin-left:0; }
}

/* Dark Mode Placeholder (future) */
@media (prefers-color-scheme: dark) {
  /* Placeholder for future adaptive overrides when auto theme is implemented */
  body[data-theme="auto"] .app-header { background: rgba(15,28,41,0.82); }
}

/* =============================================================
  Extension Guidelines:
  1. To add a new semantic color (e.g., --danger-*), define base + hover + active tokens
    near the top token block; keep luminance difference > 15% for interactive states.
  2. Prefer using existing role tokens (e.g., --btn-primary-bg) inside components rather
    than hard-coded hex values to maintain visual consistency.
  3. For dark mode, duplicate structural sections with a [data-theme="dark"] prefix and
    invert neutrals: brand hues stay; surfaces shift to deep navy scale (#0f1c29...#132836).
  4. When introducing new spacing / radius tokens, append numerically (e.g., --radius-2xl)
    and avoid renaming existing tokens to prevent cascade regressions.
  5. Keep gradients subtle: max 2-3 stops, avoid extreme saturation; maintain accessible
    contrast for any text placed over gradient backgrounds (test AA >= 4.5:1 for body text).
  ============================================================= */

/* =============================================================
  DARK THEME OVERRIDES
  Strategy:
    - Reuse brand blues, deepen neutrals, reduce elevation contrast banding
    - Surfaces rely on layered navy slate; text shifts to near-white with softened whites
    - Preserve semantic hues; lighten backgrounds for alert readability
  Activation: body[data-theme="dark"]
  ============================================================= */
body[data-theme="dark"] {
  --text-primary: #e8f2f8;
  /* Secondary/meta text color tuned slightly brighter (prev #9cb4c3) for better contrast on deepest surfaces */
  --text-secondary: #a6bfcd; /* ΔL* +4 vs previous for WCAG on #132836 */
  /* Muted text previously #6d8694 skewed greenish; shift toward balanced slate */
  --text-muted: #7d94a2;
  --text-inverse: #0f1c29;

  --neutral-0: #0f1c29;
  --neutral-50: #132836;
  --neutral-100: #183446;
  --neutral-200: #1f4154;
  --neutral-300: #2b5166;
  --neutral-400: #3d677d;
  --neutral-500: #4d7b91;
  --neutral-600: #6495ab;
  --neutral-700: #80b2c6;
  --neutral-800: #a5cedd;
  --neutral-900: #cfe5ef;
  --neutral-950: #e8f2f8;

  --border-color: rgba(255,255,255,0.10);
  --border-color-strong: rgba(255,255,255,0.18);
  --sidebar-bg: #0b1722;
  --sidebar-bg-elev: #112330;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-link: #85a8ba;
  --sidebar-link-hover-bg: rgba(51,161,224,0.15);
  --sidebar-link-active-bg: rgba(51,161,224,0.22);
  --sidebar-link-active-bar: #33A1E0;

  --header-bg: rgba(19,40,54,0.78);
  --header-border: rgba(255,255,255,0.08);

  --btn-secondary-bg: #1b3443;
  --btn-secondary-bg-hover: #224153;
  --btn-secondary-bg-active: #274a5e;
  --btn-secondary-text: #e8f2f8;

  --table-header-bg: #183446;
  --table-row-hover: #1f4154;
  --input-bg: #142835;
  --input-border: #2b5166;
  --input-border-focus: #3396D3;
  --input-placeholder: #6d8694;

  --warning-bg: #594b14;
  --warning-border: #b58d2c;
  --info-bg: #123849;
  --info-border: #33A1E0;
  --success-bg: #103a2b;
  --success-border: #2d8c66;
  --danger-bg: #4a1f1b;
  --danger-border: #c15147;
  --danger-text: #ffb7ae;

  --focus-ring: 0 0 0 3px rgba(51,161,224,0.5);
  --focus-ring-strong: 0 0 0 3px rgba(21,77,113,0.7);
  background: radial-gradient(circle at 22% 18%, #132836, #0f1c29 60%, #0b1722 100%);
  color: var(--text-primary);
}

/* Dark: header gradient text stays vibrant but softened */
body[data-theme="dark"] .header-title { background: linear-gradient(90deg,#d1ecfa,#68c2eb); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Dark: sidebar link contrast */
body[data-theme="dark"] .nav-link { color: var(--sidebar-link); }
body[data-theme="dark"] .nav-link:hover { color:#fff; }
body[data-theme="dark"] .nav-link.active { color:#fff; }

/* Dark: cards */
body[data-theme="dark"] .card, body[data-theme="dark"] .surface-card { background: linear-gradient(145deg,#132836,#112330); border:1px solid var(--border-color); box-shadow: 0 4px 16px -6px rgba(0,0,0,0.55); }
body[data-theme="dark"] .card-header { background: linear-gradient(90deg,#183446,#132836); border-bottom:1px solid var(--border-color); color: var(--text-primary); }

/* Dark: panels */
body[data-theme="dark"] .panel-warm { background: linear-gradient(135deg,#594b14,#3d300b); border-color:#b58d2c; color:#f2d98a; }
body[data-theme="dark"] .panel-soft { background: linear-gradient(135deg,#183446,#132836); border-color:#2b5166; color: var(--text-secondary); }

/* Dark: buttons */
body[data-theme="dark"] .btn-primary, body[data-theme="dark"] .btn-brand { box-shadow: 0 4px 14px -4px rgba(51,161,224,0.5); }
body[data-theme="dark"] .btn-outline-primary { color:#33A1E0; border-color:#3396D3; }
body[data-theme="dark"] .btn-outline-primary:hover { background: rgba(51,161,224,0.15); }
body[data-theme="dark"] .btn-secondary { border:1px solid #2b5166; }

/* Dark: table */
body[data-theme="dark"] .table { background: transparent; color: var(--text-primary); }
body[data-theme="dark"] .table thead th { background: var(--table-header-bg); color: #9cb4c3; }
body[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: #122734; }
body[data-theme="dark"] .table tbody tr:hover { background: var(--table-row-hover); }
body[data-theme="dark"] .table th, body[data-theme="dark"] .table td { 
    border-bottom: 1px solid rgba(255,255,255,0.08); 
    color: var(--text-primary); 
    background: transparent !important;
}

/* Force override Bootstrap's white table backgrounds in dark mode */
body[data-theme="dark"] .table,
body[data-theme="dark"] .table tbody,
body[data-theme="dark"] .table tbody tr,
body[data-theme="dark"] .table tbody tr td,
body[data-theme="dark"] .table thead,
body[data-theme="dark"] .table thead tr,
body[data-theme="dark"] .table thead tr th {
    background-color: transparent !important;
    background: transparent !important;
}

/* Ensure all table variants work properly in dark mode */
body[data-theme="dark"] .table-striped,
body[data-theme="dark"] .table-hover,
body[data-theme="dark"] .table-responsive {
    background: transparent !important;
}

/* Specific fixes for table stripes and hover in dark mode */
body[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
    background: #122734 !important;
}

body[data-theme="dark"] .table-hover tbody tr:hover td {
    background: var(--table-row-hover) !important;
}

/* Dark: AI tool container surface (prevents white flash on scroll) */
body[data-theme="dark"] .ai-tool-container {
  /* Use deep radial gradient aligned with body to avoid seam while scrolling */
  background: radial-gradient(circle at 22% 18%, #132836, #0f1c29 60%, #0b1722 100%);
  background-attachment: fixed; /* stabilize during scroll */
  /* Fallback solid color behind gradient */
  background-color: #0f1c29;
  /* Ensure it covers entire viewport height */
  min-height: calc(100vh - 64px);
}

/* Dark: forms */
body[data-theme="dark"] .form-control, body[data-theme="dark"] .form-select { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); }
body[data-theme="dark"] .form-control:focus, body[data-theme="dark"] .form-select:focus { border-color: var(--input-border-focus); }
body[data-theme="dark"] .input-group-text { background:#183446; border-color: var(--input-border); color: var(--text-secondary); }

/* Dark: alerts */
body[data-theme="dark"] .alert { background:#132836; border-color: var(--border-color); }
body[data-theme="dark"] .alert-warning { background:#3d300b; border-color:#b58d2c; color:#f2d98a; }
body[data-theme="dark"] .alert-info { background:#123849; border-color:#3396D3; color:#9fd9f5; }
body[data-theme="dark"] .alert-success { background:#103a2b; border-color:#2d8c66; color:#9fe5ce; }
body[data-theme="dark"] .alert-danger { background:#4a1f1b; border-color:#c15147; color:#ffb7ae; }

/* Dark: badges */
body[data-theme="dark"] .badge-soft { background:#183446; color:#9cb4c3; }
body[data-theme="dark"] .badge-outline { background:transparent; border:1px solid var(--border-color); color:#9cb4c3; }

/* Bootstrap badge color overrides for dark theme */
body[data-theme="dark"] .badge-primary { background: var(--gradient-action); color: #ffffff; }
body[data-theme="dark"] .badge-secondary { background: #3d677d; color: #e8f2f8; }
body[data-theme="dark"] .badge-success { background: #2d8c66; color: #9fe5ce; }
body[data-theme="dark"] .badge-danger { background: #c15147; color: #ffb7ae; }
body[data-theme="dark"] .badge-warning { background: #b58d2c; color: #f2d98a; }
body[data-theme="dark"] .badge-info { background: #3396D3; color: #9fd9f5; }
body[data-theme="dark"] .badge-light { background: #183446; color: #9cb4c3; }
body[data-theme="dark"] .badge-dark { background: #e8f2f8; color: #0f1c29; }

/* DARK THEME META / MUTED TEXT NORMALIZATION ==================================
  Goal: Ensure helper / muted text stays readable (>= 4.5:1 where possible) and
  eliminate cases where Bootstrap's .form-text or legacy .text-muted resolved to
  near-black on dark backgrounds after SubLayout integration.
  Implementation:
    1. Explicitly set .text-muted, small, .form-text inside dark theme scope.
    2. Provide slightly brighter secondary for deep surfaces while preserving hierarchy.
    3. Add a stronger fallback for extremely low contrast zones (e.g., inside .ai-panel)
      via contextual selector.
============================================================================= */
body[data-theme="dark"] small,
body[data-theme="dark"] .text-muted,
body[data-theme="dark"] .form-text { color: var(--text-secondary) !important; }

/* Extra subtle tone for ultra-muted (when authors intentionally chain .text-muted twice etc.) */
body[data-theme="dark"] .text-muted.muted-alt { color: var(--text-muted) !important; }

/* Contextual strengthening: if a helper text sits on the deepest gradient stop, ensure adequate contrast */
body[data-theme="dark"] .ai-panel .form-text,
body[data-theme="dark"] .ai-panel .text-muted { color: var(--text-secondary) !important; }

/* Prevent accidental black inheritance (defensive) */
body[data-theme="dark"] .form-text, body[data-theme="dark"] .text-muted { text-shadow:none; }

/* Dark: modal */
body[data-theme="dark"] .modal-content { background:#132836; border:1px solid var(--border-color); }
body[data-theme="dark"] .modal-header, body[data-theme="dark"] .modal-footer { border-color: var(--border-color); }

/* Dark: utility */
body[data-theme="dark"] .bg-soft { background:#132836 !important; }
body[data-theme="dark"] .divider { background: rgba(255,255,255,0.08); }

/* =============================================================
  AI TOOL UI LAYER
  Purpose: Provide consistent surfaces for AI generation tools (e.g., TextToImage)
  Classes: .ai-surface, .ai-panel, .ai-section-header, .ai-tab-nav
============================================================= */
.ai-surface { background: var(--neutral-0); border:1px solid var(--border-color); border-radius: var(--radius-lg); padding:1.25rem 1.5rem; box-shadow: var(--shadow-sm); position:relative; }
.ai-surface:hover { box-shadow: var(--shadow-md); }
.ai-panel { background: linear-gradient(145deg,var(--neutral-0),var(--neutral-100)); border:1px solid var(--border-color); border-radius: var(--radius-lg); padding:1.25rem 1.25rem 1.5rem; box-shadow: var(--shadow-sm); }
.ai-panel + .ai-panel { margin-top:1.25rem; }
.ai-section-header { display:flex; align-items:center; gap:.75rem; margin:0 0 .85rem; padding:.25rem 0 .35rem; border-bottom:1px solid var(--border-color); }
.ai-section-header h5, .ai-section-header h4 { margin:0; font-size:1rem; font-weight:600; }
.ai-section-header .meta { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-secondary); margin-left:auto; }
.ai-tab-nav { display:flex; gap:.5rem; border-bottom:1px solid var(--border-color); margin:0 0 1rem; }
.ai-tab-nav .ai-tab { background:transparent; border:1px solid transparent; padding:.55rem 1rem; border-radius: var(--radius-md) var(--radius-md) 0 0; font-weight:600; font-size:.85rem; color: var(--text-secondary); cursor:pointer; transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast); }
.ai-tab-nav .ai-tab:hover { color: var(--text-primary); }
.ai-tab-nav .ai-tab.active { background: var(--neutral-0); border-color: var(--border-color) var(--border-color) #ffffff var(--border-color); color: var(--text-primary); box-shadow: 0 2px 0 #ffffff inset; }

/* Dark overrides */
body[data-theme="dark"] .ai-surface { background: linear-gradient(145deg,#132836,#112330); border:1px solid var(--border-color); box-shadow: 0 4px 16px -6px rgba(0,0,0,0.55); }
body[data-theme="dark"] .ai-panel { background: linear-gradient(145deg,#132836,#183446); border:1px solid var(--border-color); box-shadow: 0 4px 14px -6px rgba(0,0,0,0.55); }
body[data-theme="dark"] .ai-tab-nav { border-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .ai-tab-nav .ai-tab { color:#9cb4c3; }
body[data-theme="dark"] .ai-tab-nav .ai-tab.active { background:#183446; border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.08) #183446 rgba(255,255,255,0.08); color:#e8f2f8; box-shadow:none; }