/* ===========================
   main.css  (Bootstrap overrides)
   Theme: CE Builder-style UI
   =========================== */

/* Keep your original tokens exactly as-is */
:root {
    /* Colors */
    /* --primary-color:    #263b47;
    --secondary-color:  #26a69a;
    --accent-color:     #4f46e5;
    --light-color:      #f3f4f6;
    --border-color:     #d1d5db;
    --text-color:       #374151;
    --bg-body:          #ffffff;
  
   
    --info-color:       #3b82f6;
    --success-color:    #10b981;
    --warning-color:    #f59e0b;
    --danger-color:     #ef4444; */

    /* --primary-color:   #2563eb;
  --secondary-color: #10b981;
  --accent-color:    #8b5cf6;
  --light-color:     #f3f4f6;
  --border-color:    #d1d5db;
  --text-color:      #374151;
  --bg-body:         #ffffff;

  --info-color:      #0ea5e9;
  --success-color:   #22c55e;
  --warning-color:   #f59e0b;
  --danger-color:    #ef4444; */

  /* --primary-color:   #0d9488;
  --secondary-color: #6366f1;
  --accent-color:    #14b8a6;
  --light-color:     #f3f4f6;
  --border-color:    #cbd5e1;
  --text-color:      #334155;
  --bg-body:         #ffffff;

  --info-color:      #3b82f6;
  --success-color:   #16a34a;
  --warning-color:   #facc15;
  --danger-color:    #dc2626; */

  /* --primary-color:   #f59e0b;
  --secondary-color: #475569;
  --accent-color:    #eab308;
  --light-color:     #f8fafc;
  --border-color:    #e2e8f0;
  --text-color:      #1e293b;
  --bg-body:         #ffffff;

  --info-color:      #0284c7;
  --success-color:   #15803d;
  --warning-color:   #d97706;
  --danger-color:    #b91c1c; */

  /* --primary-color:   #9333ea;
  --secondary-color: #e11d48;
  --accent-color:    #c026d3;
  --light-color:     #fafafa;
  --border-color:    #e5e7eb;
  --text-color:      #374151;
  --bg-body:         #ffffff;

  --info-color:      #2563eb;
  --success-color:   #16a34a;
  --warning-color:   #f97316;
  --danger-color:    #dc2626; */

  /* --primary-color:   #0891b2;
  --secondary-color: #059669;
  --accent-color:    #06b6d4;
  --light-color:     #f9fafb;
  --border-color:    #d1d5db;
  --text-color:      #1f2937;
  --bg-body:         #ffffff;

  --info-color:      #0ea5e9;
  --success-color:   #22c55e;
  --warning-color:   #eab308;
  --danger-color:    #ef4444; */

    /* Core Brand Colors */
    --primary-color:   #c9232b;  /* Strong red (main brand) */
    --secondary-color: #f1a675;  /* Warm soft peach */

    /* Accent variations */
    --accent-color:    #e24b3a;  /* Slightly brighter warm-red accent */

    /* UI Neutrals */
    --light-color:     #ffffff;  /* Peach-tinted light background */
    --border-color:    #f3c8a8;  /* Soft warm border */
    --text-color:      #3a1f1d;  /* Deep warm brownish text */
    --bg-body:         #ffffff;  /* Keep body clean white */

    /* System Colors (adjusted to match theme) */
    --info-color:      #f1a675;  /* Info = soft peach */
    --success-color:   #d14f3a;  /* Success = warm red-green hybrid */
    --warning-color:   #f7b45a;  /* Warm peachy yellow */
    --danger-color:    #c9232b;  /* Danger = your main red */
  
    /* Typography & spacing */
    --font-sans:        'Inter', sans-serif;
    --font-head:        'Poppins', sans-serif;
    --space-xs:         4px;
    --space-sm:         6px;
    --space-md:         12px;
    --space-lg:         16px;
    --space-xl:         24px;
    --radius-md:        8px;
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:        0 6px 18px rgba(0,0,0,0.15);
    --transition:       all .18s ease;
    --btn-font-size:    13px;
    --table-font-size:  13px;
    --th-font-size:     13px;
    --badge-font-size:  11px;
    --scrollbar-size: 8px;
    --scrollbar-thumb: var(--primary-color);
    --scrollbar-thumb-hover: var(--secondary-color);
    --scrollbar-track: transparent; /* keep minimal */
  }
  
  /* -------- Base -------- */
  html{
  scrollbar-width: thin; /* slim */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

  html, body {
    background: var(--bg-body);
    color: var(--text-color);
    font-family: var(--font-sans);
    font-size: 0.875rem;
  }
  
  a, .link-primary {
    color: var(--secondary-color);
    transition: var(--transition);
  }
  a:hover, .link-primary:hover { color: var(--accent-color); text-decoration: none; }
  
  /* -------- Containers / Cards -------- */
  .container, .container-fluid {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  .card, .bg-white, .modal-content, .dropdown-menu, .offcanvas, .toast {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  
  .card { overflow: hidden; }
  .card-header {
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
  }
  
  /* Hover-elevate helper (CE vibe) */
  .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: var(--transition); }
  
  /* -------- Buttons -------- */
  .btn {
    --bs-btn-font-weight: 600;
    font-family: var(--font-head);
    font-size: var(--btn-font-size);
    letter-spacing: .5px;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    border-width: 1px;
    transition: var(--transition);
  }
  
  .btn:disabled, .btn.disabled { opacity: .6; }
  
  /* Solid */
  .btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
  .btn-primary:hover { background: var(--secondary-color); border-color: var(--secondary-color); }
  
  .btn-secondary { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
  .btn-secondary:hover { background: var(--primary-color); border-color: var(--primary-color); }
  
  .btn-success { background: var(--success-color); border-color: var(--success-color); color: #fff; }
  .btn-success:hover { filter: brightness(.92); }
  
  .btn-info { background: var(--info-color); border-color: var(--info-color); color: #fff; }
  .btn-info:hover { filter: brightness(.92); }
  
  .btn-warning { background: var(--warning-color); border-color: var(--warning-color); color: var(--text-color); }
  .btn-warning:hover { filter: brightness(.92); }
  
  .btn-danger { background: var(--danger-color); border-color: var(--danger-color); color: #fff; }
  .btn-danger:hover { filter: brightness(.92); }
  
  .btn-light { background: var(--light-color); border-color: var(--light-color); color: var(--text-color); }
  .btn-light:hover { background: #e9ebef; }
  
  /* Outline */
  .btn-outline-primary { border-color: var(--primary-color); color: var(--primary-color); }
  .btn-outline-primary:hover { background: var(--primary-color); color:#fff; }
  .btn-outline-secondary { border-color: var(--secondary-color); color: var(--secondary-color); }
  .btn-outline-secondary:hover { background: var(--secondary-color); color:#fff; }
  .btn-outline-success { border-color: var(--success-color); color: var(--success-color); }
  .btn-outline-success:hover { background: var(--success-color); color:#fff; }
  .btn-outline-info { border-color: var(--info-color); color: var(--info-color); }
  .btn-outline-info:hover { background: var(--info-color); color:#fff; }
  .btn-outline-warning { border-color: var(--warning-color); color: var(--warning-color); }
  .btn-outline-warning:hover { background: var(--warning-color); color: var(--text-color); }
  .btn-outline-danger { border-color: var(--danger-color); color: var(--danger-color); }
  .btn-outline-danger:hover { background: var(--danger-color); color:#fff; }
  
  /* Button groups & icon gap */
  .btn-group .btn, .input-group .btn { border-radius: var(--radius-md); }
  .btn i, .btn .fa { margin-right: 6px; }
  
  /* -------- Forms (inputs/selects/textarea) -------- */
  .form-control, .form-select, .form-control-sm, .form-control-lg, .form-select-sm, .form-select-lg,
  input[type="text"].form-control, input[type="number"].form-control, input[type="email"].form-control, textarea.form-control, select.form-select {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--text-color);
    transition: var(--transition);
    box-shadow: none;
  }
  
  .form-control:focus, .form-select:focus, .form-check-input:focus, .form-control:active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
    outline: none;
  }
  
  .input-group .input-group-text {
    background: #fff;
    border: 1px solid var(--border-color);
    color: #6b7280;
    border-radius: 6px;
  }
  
  .form-check-input {
    border: 1px solid var(--border-color);
    width: 1.05rem; height: 1.05rem;
  }
  .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
  }
  .form-switch .form-check-input { height: 1.2rem; width: 2.2rem; }
  
  /* Inline field help */
  .form-text, .form-hint, .text-muted { color: #6b7280 !important; }
  
  /* Input sizes */
  .form-control-sm, .form-select-sm { padding: 6px 8px; font-size: 13px; }
  .form-control-lg, .form-select-lg { padding: 10px 12px; font-size: 15px; }
  /* SCROLLbAR */
  /* WebKit (Chrome, Edge, Safari, Opera) */
*::-webkit-scrollbar{
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb{
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;       /* creates a slim pill and nicer contrast */
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background-color: var(--scrollbar-thumb-hover);
}

/* Dark theme overrides (keeps same colors, improves contrast if you want) */
.theme-dark{
  --scrollbar-track: transparent;
  /* Optionally push hover toward accent in dark: */
  /* --scrollbar-thumb-hover: var(--accent-color); */
}

/* Optional: even slimmer in tight containers */
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar{
  width: 6px; height: 6px;
}
  /* -------- Table (striped/hover/bordered unified) -------- */
  .table, .table-striped, .table-hover, .table-bordered {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: var(--table-font-size);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  
  .table thead th {
    background: var(--light-color);
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--th-font-size);
    border-bottom: 2px solid var(--border-color) !important;
    padding: 10px 12px;
  }
  
  .table tbody td {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 12px;
    vertical-align: middle;
  }
  
  .table tbody tr:last-child td { border-bottom: none; }
  .table-striped tbody tr:nth-of-type(even) { background: #fafafa; }
  .table-hover tbody tr:hover { background: rgba(99,102,241,.08); transition: var(--transition); }
  
  /* Bordered variant */
  .table-bordered, .table-bordered > :not(caption) > * {
    border: 1px solid var(--border-color);
  }
  
  /* Responsive wrapper keeps rounded corners */

  
  /* -------- Pagination -------- */
  .pagination { gap: 6px; }
  .page-link {
    border: 1px solid var(--border-color);
    border-radius: 6px !important;
    color: var(--text-color);
    background: #fff;
    padding: 6px 10px;
    font-size: 13px;
    transition: var(--transition);
  }
  .page-link:hover { background: var(--light-color); color: var(--primary-color); }
  .page-item.active .page-link {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
  }
  
  /* -------- Navs / Tabs (CE-like) -------- */
  .nav, .nav-tabs, .nav-pills { --tabs-bg: #fff; --tabs-border: var(--border-color); }
  .nav-tabs {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-body);
  }
  .nav-tabs .nav-link {
    border: none; border-right: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px 16px;
    font-size: 14px; display: flex; gap: 6px; align-items: center;
    background: #fff;
  }
  .nav-tabs .nav-link:hover { background: #f9fafb; }
  .nav-tabs .nav-link.active {
    background: rgba(79,70,229,.08);
    color: var(--accent-color);
    font-weight: 600;
    border-right-color: var(--border-color);
  }
  .nav-tabs .nav-item:last-child .nav-link { border-right: none; }
  
  .tab-content { background: #fff; border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
  
  /* Pills */
  .nav-pills .nav-link {
    background: #fff; border: 1px solid var(--border-color);
    color: var(--text-color); border-radius: 6px; margin-right: 6px;
  }
  .nav-pills .nav-link.active {
    background: var(--accent-color); color: #fff; border-color: var(--accent-color);
  }
  
  /* -------- Dropdowns -------- */
  .dropdown-menu {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    padding: 6px;
  }
  .dropdown-item { border-radius: 6px; }
  .dropdown-item:hover { background: #f3f4f6; color: var(--accent-color); }
  
  /* -------- Badges & Alerts -------- */
  .badge {
    padding: calc(var(--space-xs) + 2px) var(--space-md);
    font-size: var(--badge-font-size);
    font-weight: 600;
    border-radius: var(--radius-md);
    letter-spacing: .5px;
    font-family: var(--font-head);
  }
  .badge.text-bg-primary, .badge.bg-primary { background: var(--primary-color) !important; }
  .badge.text-bg-secondary, .badge.bg-secondary { background: var(--secondary-color) !important; }
  .badge.text-bg-success, .badge.bg-success { background: var(--success-color) !important; }
  .badge.text-bg-info, .badge.bg-info { background: var(--info-color) !important; }
  .badge.text-bg-warning, .badge.bg-warning { background: var(--warning-color) !important; color: var(--text-color) !important; }
  .badge.text-bg-danger, .badge.bg-danger { background: var(--danger-color) !important; }
  
  .alert {
    border: 1px solid var(--border-color);
    border-left: 4px solid currentColor;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .alert-primary { color: var(--primary-color); background: #eef2ff; }
  .alert-secondary { color: var(--secondary-color); background: #ecfeff; }
  .alert-success { color: var(--success-color); background: #ecfdf5; }
  .alert-info    { color: var(--info-color); background: #eff6ff; }
  .alert-warning { color: #b45309; background: #fffbeb; }
  .alert-danger  { color: var(--danger-color); background: #fef2f2; }
  
  /* -------- Modals -------- */
  .modal-content { overflow: hidden; }
  .modal-header { background: #f9fafb; border-bottom: 1px solid var(--border-color); }
  .modal-footer { background: #fafafa; border-top: 1px solid var(--border-color); }
  
  /* -------- Navbar -------- */
  .navbar {
    border-bottom: 1px solid var(--border-color);
    background: #fff !important;
  }
  .navbar .navbar-brand, .navbar .nav-link { color: var(--text-color) !important; }
  .navbar .nav-link:hover { color: var(--accent-color) !important; }
  
  /* -------- Breadcrumb -------- */
  .breadcrumb {
    background: #fff; border: 1px solid var(--border-color);
    padding: 8px 12px; border-radius: 6px;
  }
  .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #9aa1aa; }
  
  /* -------- Accordion -------- */
  .accordion-item { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
  .accordion-button {
    background: #fff; color: var(--text-color);
  }
  .accordion-button:not(.collapsed) {
    background: rgba(79,70,229,.08);
    color: var(--accent-color);
    box-shadow: inset 0 -1px 0 var(--border-color);
  }
  
  /* -------- List group -------- */
  .list-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .list-group-item { border-color: var(--border-color); }
  .list-group-item:hover { background: #f9fafb; }
  .list-group-item.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
  }
  
  /* -------- Progress & Spinners -------- */
  .progress {
    background: #eef2f7;
    border-radius: 10px;
    height: 8px;
  }
  .progress-bar { background: var(--accent-color); }
  
  /* -------- Tooltips / Popovers -------- */
  .tooltip .tooltip-inner {
    background: #111827; color: #fff; border-radius: 6px; padding: 6px 8px;
  }
  .tooltip .tooltip-arrow::before { border-top-color: #111827 !important; }
  
  .popover { border: 1px solid var(--border-color); box-shadow: var(--shadow-md); border-radius: 8px; }
  .popover-header { background: #f9fafb; border-bottom: 1px solid var(--border-color); }
  
  /* -------- Tables: sticky header helper (optional) -------- */
  .table-sticky thead th {
    position: sticky; top: 0; z-index: 2;
  }
  
  /* -------- Utilities (CE-ish) -------- */
  .shadow-sm { box-shadow: var(--shadow-sm) !important; }
  .shadow    { box-shadow: var(--shadow-md) !important; }
  .rounded   { border-radius: var(--radius-md) !important; }
  .text-muted { color: #6b7280 !important; }
  .bg-light  { background: var(--light-color) !important; }
  
  .d-flex { display: flex !important; }
  .flex-wrap { flex-wrap: wrap !important; }
  .justify-content-between { justify-content: space-between !important; }
  .align-items-center { align-items: center !important; }
  .text-uppercase { text-transform: uppercase !important; }
  
  .m-0  { margin: 0 !important; }
  .mt-1 { margin-top: var(--space-xs) !important; }
  .mt-2 { margin-top: var(--space-sm) !important; }
  .mt-3 { margin-top: var(--space-md) !important; }
  .mt-4 { margin-top: var(--space-lg) !important; }
  .mt-5 { margin-top: var(--space-xl) !important; }
  .p-0  { padding: 0 !important; }
  .p-1  { padding: var(--space-xs) !important; }
  .p-2  { padding: var(--space-sm) !important; }
  .p-3  { padding: var(--space-md) !important; }
  .p-4  { padding: var(--space-lg) !important; }
  .p-5  { padding: var(--space-xl) !important; }
  
  /* -------- CE-Style “summary-card” block -------- */
  .summary-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-md);
    text-align: center;
    transition: var(--transition);
  }
  .summary-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
  .summary-card .icon { font-size: 2rem; color: var(--secondary-color); margin-bottom: var(--space-sm); }
  .summary-card p { word-break: break-word; white-space: normal; }
  
  /* -------- CE-Style search/export cluster -------- */
  .search-export { display: flex; gap: var(--space-sm); }
  .search-export input[type="search"], .search-export .form-control {
    width: 220px;
  }
  
  /* -------- File inputs -------- */
  .form-control[type="file"] {
    padding: 6px 10px;
  }
  
  /* -------- Tables: compact size variant -------- */
  .table-sm > :not(caption) > * > * {
    padding: 8px 10px;
  }
  
  /* -------- Sticky sidebars / panels (mimic editor) -------- */
  .sticky-panel {
    position: sticky; top: 56px; max-height: calc(100vh - 56px);
    overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: #fff;
  }
  
  /* -------- Code blocks / preview shells -------- */
  .previewer, .code-shell, pre, code {
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
  }
  
  /* -------- Tables inside cards should stretch nicely -------- */
  .card .table { margin-bottom: 0; border: 0; box-shadow: none; }
  .card .table thead th { border-top: 0; }
  
  /* -------- Form layout helpers -------- */
  .form-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .form-row .form-group { flex: 1 1 220px; }
  
  /* -------- Small action buttons (like CE .ce-btn-sm) -------- */
  .btn-xs, .btn-sm.ce-like {
    padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-color);
    background: #fff; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 4px;
  }
  .btn-xs.primary, .btn-sm.ce-like.primary { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
  
  /* -------- Form validation states -------- */
  .is-invalid, .form-control.is-invalid, .form-select.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 .15rem rgba(239,68,68,.15);
  }
  .is-valid, .form-control.is-valid, .form-select.is-valid {
    border-color: #10b981;
    box-shadow: 0 0 0 .15rem rgba(16,185,129,.15);
  }
  
  /* -------- Responsive tweaks -------- */
  @media (max-width: 992px) {
    .card:hover { transform: none; }
    .sticky-panel { top: 48px; max-height: calc(100vh - 48px); }
  }
  
  @media (max-width: 576px) {
    .nav-tabs .nav-link { font-size: 13px; padding: 8px 12px; }
    .page-link { padding: 5px 8px; }
    .search-export { flex-wrap: wrap; }
    .search-export input { width: 100%; }
  }
  
  /* -------- Optional: Table row actions (icon-only) -------- */
  .table .row-actions .btn {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #fff;
  }
  .table .row-actions .btn:hover { background: #f3f4f6; color: var(--accent-color); }
  
  /* -------- Helper: cease pointer on preview links (like CE canvas) -------- */
  a.preview-disabled { pointer-events: none; cursor: default; }



/* =========================================================
   DARK THEME ADDITIONS
   - Use globally: add class="theme-dark" on <html> or <body>
   - Use per-component: add .card-dark, .table-dark, .pagination-dark, etc.
   - No changes to your original classes; only overrides/variants.
   ========================================================= */

/* ---------- Global tokens swap (non-brand) ---------- */
.theme-dark {
  --bg-body:      #0b1220;
  --text-color:   #e5e7eb;
  --light-color:  #0f172a;
  --border-color: #273244;
}

/* ---------- Base ---------- */
.theme-dark html, .theme-dark body {
  background: var(--bg-body);
  color: var(--text-color);
}

.theme-dark a, .theme-dark .link-primary { color: var(--accent-color); }
.theme-dark a:hover, .theme-dark .link-primary:hover { color: var(--secondary-color); }

/* ---------- Generic surfaces ---------- */
.theme-dark .bg-white,
.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .offcanvas,
.theme-dark .toast,
.card-dark,
.modal-content.modal-dark,
.dropdown-menu.dropdown-menu-dark,
.offcanvas.offcanvas-dark,
.toast.toast-dark {
  background: var(--light-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
}

.theme-dark .card-header,
.card-dark .card-header {
  background: #0b1a2e;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

/* ---------- Buttons ---------- */
/* Keep brand fills; adjust neutrals for contrast in dark */
.theme-dark .btn-light { background: #1b2437; border-color: var(--border-color); color: var(--text-color); }
.theme-dark .btn-light:hover { background: #22304a; }

.theme-dark .btn-outline-primary { border-color: var(--primary-color); color: var(--text-color); }
.theme-dark .btn-outline-secondary { border-color: var(--secondary-color); color: var(--text-color); }
.theme-dark .btn-outline-success { border-color: var(--success-color); color: var(--text-color); }
.theme-dark .btn-outline-info { border-color: var(--info-color); color: var(--text-color); }
.theme-dark .btn-outline-warning { border-color: var(--warning-color); color: #fbbf24; }
.theme-dark .btn-outline-danger { border-color: var(--danger-color); color: #fca5a5; }

/* ---------- Forms ---------- */
.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark .input-group .input-group-text,
.form-control.form-dark,
.form-select.form-dark,
.input-group-text.input-dark {
  background: #0f172a;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.theme-dark .form-control::placeholder,
.form-control.form-dark::placeholder {
  color: #8b93a7;
}
.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
.theme-dark .form-check-input:focus,
.form-control.form-dark:focus,
.form-select.form-dark:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 .2rem rgba(79,70,229,.25);
}
.theme-dark .form-check-input { background: #0f172a; border-color: var(--border-color); }
.theme-dark .form-text, .theme-dark .form-hint, .theme-dark .text-muted { color: #9aa4b2 !important; }

/* ---------- Tables ---------- */
.theme-dark .table,
.theme-dark .table-striped,
.theme-dark .table-hover,
.theme-dark .table-bordered,
.table-dark {
  background: #0f172a;
  color: var(--text-color);
  border-color: var(--border-color);
}
.theme-dark .table thead th,
.table-dark thead th {
  background: #0b1a2e;
  color: var(--text-color);
  border-bottom: 2px solid var(--border-color) !important;
}
.theme-dark .table tbody td,
.table-dark tbody td {
  border-bottom: 1px solid var(--border-color);
}
.theme-dark .table-striped tbody tr:nth-of-type(even),
.table-dark.table-striped tbody tr:nth-of-type(even) {
  background: #0e1930;
}
.theme-dark .table-hover tbody tr:hover,
.table-dark.table-hover tbody tr:hover {
  background: rgba(99,102,241,.12);
}

/* Bordered */
.theme-dark .table-bordered,
.theme-dark .table-bordered > :not(caption) > *,
.table-dark.table-bordered,
.table-dark.table-bordered > :not(caption) > * {
  border-color: var(--border-color);
}

/* Sticky header helper works unchanged */

/* ---------- Pagination ---------- */
.theme-dark .pagination .page-link,
.pagination-dark .page-link {
  background: #0f172a;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.theme-dark .page-link:hover,
.pagination-dark .page-link:hover {
  background: #16233c;
  color: var(--accent-color);
}
.theme-dark .page-item.active .page-link,
.pagination-dark .page-item.active .page-link {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

/* ---------- Navs / Tabs ---------- */
.theme-dark .nav-tabs {
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-body);
}
.theme-dark .nav-tabs .nav-link {
  background: #0f172a;
  color: var(--text-color);
  border-right: 1px solid var(--border-color);
}
.theme-dark .nav-tabs .nav-link:hover { background: #13203a; }
.theme-dark .nav-tabs .nav-link.active {
  background: rgba(79,70,229,.12);
  color: var(--accent-color);
  font-weight: 600;
}
.theme-dark .tab-content {
  background: #0f172a; border: 1px solid var(--border-color); border-top: none;
}

/* Pills */
.theme-dark .nav-pills .nav-link {
  background: #0f172a; border: 1px solid var(--border-color); color: var(--text-color);
}
.theme-dark .nav-pills .nav-link.active {
  background: var(--accent-color); color: #fff; border-color: var(--accent-color);
}

/* ---------- Dropdowns ---------- */
.theme-dark .dropdown-menu,
.dropdown-menu.dropdown-menu-dark {
  background: #0f172a;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.theme-dark .dropdown-item,
.dropdown-menu.dropdown-menu-dark .dropdown-item {
  color: var(--text-color);
}
.theme-dark .dropdown-item:hover,
.dropdown-menu.dropdown-menu-dark .dropdown-item:hover {
  background: #13203a;
  color: var(--accent-color);
}

/* ---------- Badges & Alerts ---------- */
.theme-dark .badge { color: #fff; }

.theme-dark .alert {
  background: #0f172a;
  color: var(--text-color);
  border-color: var(--border-color);
}
.theme-dark .alert-primary    { color: #93c5fd; background: #0c203f; }
.theme-dark .alert-secondary  { color: #67e8f9; background: #0b2330; }
.theme-dark .alert-success    { color: #34d399; background: #0b2b22; }
.theme-dark .alert-info       { color: #93c5fd; background: #0c203f; }
.theme-dark .alert-warning    { color: #fbbf24; background: #2a1f07; }
.theme-dark .alert-danger     { color: #fca5a5; background: #2a0d0f; }

/* ---------- Modals ---------- */
.theme-dark .modal-header { background: #0b1a2e; border-bottom-color: var(--border-color); }
.theme-dark .modal-footer { background: #0e1930; border-top-color: var(--border-color); }

/* ---------- Navbar ---------- */
.theme-dark .navbar {
  background: #0f172a !important;
  border-bottom: 1px solid var(--border-color);
}
.theme-dark .navbar .navbar-brand,
.theme-dark .navbar .nav-link {
  color: var(--text-color) !important;
}
.theme-dark .navbar .nav-link:hover { color: var(--accent-color) !important; }

/* ---------- Breadcrumb ---------- */
.theme-dark .breadcrumb {
  background: #0f172a;
  border: 1px solid var(--border-color);
}
.theme-dark .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #72809a; }

/* ---------- Accordion ---------- */
.theme-dark .accordion-item { border-color: var(--border-color); }
.theme-dark .accordion-button {
  background: #0f172a; color: var(--text-color);
}
.theme-dark .accordion-button:not(.collapsed) {
  background: rgba(79,70,229,.12);
  color: var(--accent-color);
  box-shadow: inset 0 -1px 0 var(--border-color);
}

/* ---------- List group ---------- */
.theme-dark .list-group { border-color: var(--border-color); }
.theme-dark .list-group-item {
  background: #0f172a; color: var(--text-color); border-color: var(--border-color);
}
.theme-dark .list-group-item:hover { background: #13203a; }
.theme-dark .list-group-item.active {
  background: var(--accent-color); border-color: var(--accent-color); color: #fff;
}

/* ---------- Progress ---------- */
.theme-dark .progress { background: #1a2742; }
.theme-dark .progress-bar { background: var(--accent-color); }

/* ---------- Tooltips / Popovers ---------- */
.theme-dark .tooltip .tooltip-inner { background: #0b1220; color: #fff; }
.theme-dark .tooltip .tooltip-arrow::before { border-top-color: #0b1220 !important; }

.theme-dark .popover { background: #0f172a; border-color: var(--border-color); }
.theme-dark .popover-header { background: #0b1a2e; border-bottom-color: var(--border-color); color: var(--text-color); }
.theme-dark .popover-body { color: var(--text-color); }

/* ---------- CE helpers ---------- */
.theme-dark .previewer, 
.theme-dark .code-shell, 
.theme-dark pre, 
.theme-dark code {
  background: #0b1a2e;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.theme-dark .sticky-panel {
  background: #0f172a;
  border-color: var(--border-color);
}

/* ---------- Row actions ---------- */
.theme-dark .table .row-actions .btn,
.row-actions .btn.btn-dark-ghost {
  background: #0f172a;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.theme-dark .table .row-actions .btn:hover,
.row-actions .btn.btn-dark-ghost:hover {
  background: #13203a;
  color: var(--accent-color);
}

/* ---------- Component-specific opt-in dark variants ---------- */
/* Use these without global theme if you want individual dark blocks. */
.card-dark { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }
.table-dark { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }
.pagination-dark .page-link { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }
.nav-tabs-dark .nav-link { background: #0f172a; color: var(--text-color); border-right-color: var(--border-color); }
.dropdown-menu-dark { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }
.form-dark .form-control, .form-dark .form-select { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }
.breadcrumb-dark { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }
.accordion-dark .accordion-button { background: #0f172a; color: var(--text-color); }
.list-group-dark .list-group-item { background: #0f172a; color: var(--text-color); border-color: var(--border-color); }

/* ---------- Mobile tweaks keep behavior (inherit dark colors) ---------- */
/* Your existing media queries are fine; colors now inherit from vars. */