/* ---------- Variables ---------- */
[data-theme="dark"] :root {
  /* Base Colors */
  --color-bg: #33393e;          /* Main background */
  --color-surface: #2a2d33;     /* Cards, jumbotron, navbars, modals */
  --color-muted: #7a8288;       /* Secondary text */
  --color-text: #e0e0e0;        /* Primary text */
  --border-color: #3a3f44;      /* General borders */

  /* Brand / Semantic Colors */
  --color-primary: #3a3f44;
  --color-secondary: #50565c;
  --color-success: #4b794b;
  --color-danger: rgba(143, 6, 6, 0.78);
  --color-warning: #8b6b3a;
  --color-info: rgba(42, 79, 103, 0.78);
  --color-light: #444c53;
  --color-dark: #1f2226;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Breakpoints */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

html[data-theme="dark"] body {
    background-color: #454748; /* dark background */
    color: #e0e0e0;           /* light text */
}

html[data-theme="dark"] a {
    color: #66aaff;
}

/* Optional: reset bootstrap background for dark mode */
html[data-theme="dark"] .bg-light {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ---------- Base ---------- */
[data-theme="dark"] {
  margin: 0;
  font-family: var(--font-family-sans-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #d0d0d0;
  background-color: var(--dark);
  transition: background 0.3s linear, color 0.3s linear;
}

[data-theme="dark"] h1, h2, h3, h4, h5, h6 {
  color: #e0e0e0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- Background Utilities ---------- */
[data-theme="dark"] .bg-primary { background-color: var(--primary) !important; }
[data-theme="dark"] .bg-secondary { background-color: var(--secondary) !important; }
[data-theme="dark"] .bg-success { background-color: var(--success) !important; }
[data-theme="dark"] .bg-info { background-color: var(--info) !important; }
[data-theme="dark"] .bg-warning { background-color: var(--warning) !important; }
[data-theme="dark"] .bg-danger { background-color: var(--danger) !important; }
[data-theme="dark"] .bg-light { background-color: var(--light) !important; }
[data-theme="dark"] .bg-dark { background-color: var(--dark) !important; }
[data-theme="dark"] .bg-transparent { background-color: transparent !important; }

/* ---------- Cards ---------- */
[data-theme="dark"] .card {
  background-color: var(--primary);
  border: 1px solid #3a3f44;
  border-radius: 0.25rem;
  color: #e0e0e0;
}

[data-theme="dark"] .card-header {
  background-color: #3a3f44;
  border-bottom: 1px solid #272b30;
  color: #f5f5f5;
}

/* ---------- Buttons ---------- */
[data-theme="dark"] .btn {
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

[data-theme="dark"] .btn-primary { background-color: var(--primary); }
[data-theme="dark"] .btn-secondary { background-color: var(--secondary); }
[data-theme="dark"] .btn-success { background-color: var(--success); }
[data-theme="dark"] .btn-danger { background-color: var(--danger); }
[data-theme="dark"] .btn-warning { background-color: var(--warning); }
[data-theme="dark"] .btn-info { background-color: var(--info); }

[data-theme="dark"] .btn:hover {
  filter: brightness(1.2);
}

/* ---------- Tables ---------- */
[data-theme="dark"] .table {
  color: #e0e0e0;
  border-color: #3a3f44;
  background-color: var(--primary);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: #2e3236;
}

[data-theme="dark"] .table-bordered th, .table-bordered td {
  border: 1px solid #3a3f44;
}

/* ---------- Form Controls ---------- */
[data-theme="dark"] .form-control {
  background-color: #46484a;
  color: #e0e0e0;
  border: 1px solid #3a3f44;
}

[data-theme="dark"] .form-control:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 0.2rem rgba(91,192,222,.25);
  background-color: #2e3236;
  color: #fff;
}

/* ---------- Links ---------- */
[data-theme="dark"] a {
  color: var(--info);
  text-decoration: none;
}

[data-theme="dark"] a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------- Lists ---------- */
[data-theme="dark"] .list-group-item {
  background-color: #2e3236;
  border: 1px solid #3a3f44;
  color: #e0e0e0;
}

[data-theme="dark"] .list-group-item.active {
  background-color: var(--info);
  color: #fff;
  border-color: var(--info);
}

/* ---------- Images ---------- */
[data-theme="dark"] .img-thumbnail {
  border: 1px solid #3a3f44;
  background-color: var(--primary);
}

/* ---------- Misc ---------- */
[data-theme="dark"] pre, code, kbd, samp {
  background-color: #2e3236;
  color: #e0e0e0;
}

[data-theme="dark"] pre {
  overflow: auto;
  padding: 1rem;
  border-radius: 0.25rem;
}

[data-theme="dark"] blockquote {
  border-left: 4px solid var(--secondary);
  color: #d0d0d0;
}
/* ---------- Jumbotron ---------- */
[data-theme="dark"] .jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #2e3236;
  color: #e0e0e0;
  border-radius: 0.3rem;
}

/* ---------- Soft Dark Alerts ---------- */
[data-theme="dark"] .alert {
  color: #e0e0e0;
  border: 1px solid #3a3f44;
  background-color: #2e3236; /* Base dark alert background */
}

/* Toned-down variants */
[data-theme="dark"] .alert-primary { background-color: #3a3f44; border-color: #272b30; color: #d0d0d0; }
[data-theme="dark"] .alert-secondary { background-color: #50565c; border-color: #3a3f44; color: #d0d0d0; }
[data-theme="dark"] .alert-success { background-color: #4b794b; border-color: #3a3f44; color: #e0e0e0; }
[data-theme="dark"] .alert-danger { background-color: #8b3a3a; border-color: #3a3f44; color: #fff; }
[data-theme="dark"] .alert-warning { background-color: #8b6b3a; border-color: #3a3f44; color: #fff; }
[data-theme="dark"] .alert-info { background-color: #3a6b8b; border-color: #3a3f44; color: #fff; }
[data-theme="dark"] .alert-light { background-color: #444c53; border-color: #3a3f44; color: #d0d0d0; }
[data-theme="dark"] .alert-dark { background-color: #1f2226; border-color: #272b30; color: #e0e0e0; }


/* ---------- Breadcrumbs ---------- */
[data-theme="dark"] .breadcrumb {
  background-color: var(--primary);
  color: #e0e0e0;
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--info);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #fff;
}

/* ---------- Progress Bars ---------- */
[data-theme="dark"] .progress {
  background-color: #2e3236;
  border-radius: 0.25rem;
  overflow: hidden;
}

[data-theme="dark"] .progress-bar {
  background-color: var(--info);
}

/* ---------- Pagination ---------- */
[data-theme="dark"] .page-link {
  background-color: #2e3236;
  color: #e0e0e0;
  border: 1px solid #3a3f44;
}

[data-theme="dark"] .page-link:hover {
  background-color: var(--info);
  color: #fff;
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--info);
  border-color: var(--info);
  color: #fff;
}

/* ---------- Navbar ---------- */
[data-theme="dark"] .navbar {
  background-color: var(--primary);
  color: #fff;
}

[data-theme="dark"] .navbar a,
[data-theme="dark"] .navbar .navbar-brand {
  color: #fff;
}

[data-theme="dark"] .navbar a:hover {
  color: var(--info);
}

/* ---------- Modal ---------- */
[data-theme="dark"] .modal-content {
  background-color: var(--primary);
  color: #e0e0e0;
  border-radius: 0.3rem;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #272b30;
}

/* ---------- Dropdown ---------- */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--primary);
  color: #e0e0e0;
  border: 1px solid #272b30;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--info);
  color: #fff;
}

/* ---------- Tooltips & Popovers ---------- */
[data-theme="dark"] .tooltip-inner {
  background-color: var(--secondary);
  color: #fff;
}

[data-theme="dark"] .popover {
  background-color: var(--primary);
  color: #fff;
  border: 1px solid #272b30;
}

/* ---------- Badges ---------- */
[data-theme="dark"] .badge {
  color: #fff;
}

[data-theme="dark"] .badge-primary { background-color: var(--primary); }
[data-theme="dark"] .badge-secondary { background-color: var(--secondary); }
[data-theme="dark"] .badge-success { background-color: var(--success); }
[data-theme="dark"] .badge-danger { background-color: var(--danger); }
[data-theme="dark"] .badge-warning { background-color: var(--warning); }
[data-theme="dark"] .badge-info { background-color: var(--info); }
[data-theme="dark"] .badge-light { background-color: var(--light); color: #e0e0e0; }
[data-theme="dark"] .badge-dark { background-color: var(--dark); }

/* ---------- Cards Extras ---------- */
[data-theme="dark"] .card-footer {
  background-color: #3a3f44;
  border-top: 1px solid #272b30;
}