/* ===============================
   main.css — Global Dark Theme
   Works well with Bootstrap 5.x
   =============================== */

/* Root tokens */
:root {
    --bg: #0b0f17;
    --bg-elev: #111826;
    --bg-card: #141f33;
    --bg-hover: rgba(255,255,255,0.04);
  
    --text: #e6edf3;
    --text-muted: #9fb0c3;
    --text-inverse: #091017;
  
    --border: rgba(255,255,255,0.10);
    --border-soft: rgba(255,255,255,0.06);
  
    --accent: #60a5fa;   /* blue-400 */
    --success: #22c55e;  /* green-500 */
    --warning: #f59e0b;  /* amber-500 */
    --danger:  #ef4444;  /* red-500 */
    --info:    #38bdf8;  /* sky-400 */
  
    --shadow-1: 0 4px 16px rgba(0,0,0,0.3);
    --radius: 14px;
  
    --input-bg: var(--bg-elev);
    --input-border: var(--border);
    --input-focus: #93c5fd;
  
    --table-stripe: rgba(255,255,255,0.02);
  }
  
  /* Base */
  html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Typography */
  h1,h2,h3,h4,h5,h6 { color: var(--text); }
  p, small, span, li, dt, dd { color: var(--text); }
  small, .text-muted { color: var(--text-muted) !important; }
  
  /* Links & hover */
  a { color: var(--accent); text-decoration: none; }
  a:hover { opacity: .9; text-decoration: underline; }
  
  /* Utilities */
  .bg-dark, .bg-body, .bg-light, .bg-white { background: var(--bg) !important; color: var(--text) !important; }
  .text-body { color: var(--text) !important; }
  .border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--border) !important; }
  
  /* Navbar / header */
  .navbar, header.navbar {
    background: linear-gradient(180deg, #0e1522, #0b0f17) !important;
    border-bottom: 1px solid var(--border);
  }
  .navbar .navbar-brand,
  .navbar .nav-link { color: var(--text) !important; }
  .navbar .nav-link:hover, .navbar .navbar-brand:hover { opacity: .9; }
  
  /* Buttons */
  .btn {
    border-radius: 12px;
    border-color: var(--border);
    color: var(--text);
  }
  .btn:focus, .btn:active { box-shadow: 0 0 0 0.2rem rgba(96,165,250,.25) !important; }
  
  .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
  }
  .btn-primary:hover { filter: brightness(1.05); }
  
  .btn-outline-light {
    color: var(--text);
    border-color: var(--border);
    background: transparent;
  }
  .btn-outline-light:hover { background: var(--bg-hover); }
  
  .btn-success { background: var(--success); border-color: var(--success); color: var(--text-inverse); }
  .btn-warning { background: var(--warning); border-color: var(--warning); color: var(--text-inverse); }
  .btn-danger  { background: var(--danger);  border-color: var(--danger);  color: var(--text-inverse); }
  .btn-info    { background: var(--info);    border-color: var(--info);    color: var(--text-inverse); }
  
  /* Forms */
  .form-control, .form-select, .form-check-input, .form-control:disabled, .form-select:disabled {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--input-border);
  }
  .form-control::placeholder { color: var(--text-muted); }
  .form-control:focus, .form-select:focus {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--input-focus);
    box-shadow: 0 0 0 .2rem rgba(147,197,253,.2);
  }
  .input-group-text {
    background: var(--bg-elev);
    color: var(--text);
    border-color: var(--border);
  }
  
  /* Cards / panels */
  .card {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
  }
  .card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
  }
  .bg-secondary-subtle {
    background: var(--bg-card) !important;
    color: var(--text) !important;
  }
  
  .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
  
    /* Ensure striped rows keep light text */
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-striped-color: var(--text);
  }
  
  .table thead th {
    color: var(--text); /* fix typo: was `#FFFFFF(--text)` */
    border-bottom-color: var(--border);
  }
  
  /* Apply the striped text color to the actual cells */
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--bs-table-striped-color) !important;
  }
  
  /* And keep non-striped rows consistent too */
  .table > tbody > tr > * {
    color: var(--bs-table-color) !important;
  }
  .table tbody tr { border-color: var(--border); }
  .table-hover tbody tr:hover { background: var(--bg-hover); }
  .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--table-stripe); }
  
  /* Badges */
  .badge.bg-success { background-color: var(--success) !important; color: var(--text-inverse); }
  .badge.bg-secondary { background-color: #334155 !important; color: var(--text); }
  .badge.bg-info { background-color: var(--info) !important; color: var(--text-inverse); }
  
  /* Alerts */
  .alert {
    border-color: var(--border);
    color: var(--text);
  }
  .alert-primary { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.35); }
  .alert-secondary { background: var(--bg-elev); }
  .alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
  .alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #ffdf9b; }
  .alert-danger  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
  
  /* Modals */
  .modal-content {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .modal-header, .modal-footer { border-color: var(--border); }
  
  /* Dropdowns */
  .dropdown-menu {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .dropdown-item { color: var(--text); }
  .dropdown-item:hover, .dropdown-item:focus {
    color: var(--text);
    background: var(--bg-hover);
  }
  
  /* Pagination */
  .page-link {
    background: var(--bg-elev);
    color: var(--text);
    border-color: var(--border);
  }
  .page-link:hover { background: var(--bg-hover); color: var(--text); }
  .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
  }
  
  /* List groups */
  .list-group-item {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
  }
  .list-group-item-action:hover { background: var(--bg-hover); }
  
  /* Code / pre */
  code, pre, kbd, samp {
    background: #0f1729;
    color: #d6e1ff;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  pre { padding: .75rem 1rem; }
  
  /* HR */
  hr { border-top: 1px solid var(--border); opacity: 1; }
  
  /* Tooltips / popovers */
  .tooltip-inner { background: var(--bg-card); color: var(--text); }
  .tooltip .tooltip-arrow::before { border-top-color: var(--bg-card) !important; }
  .popover {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
  }
  
  /* Offcanvas */
  .offcanvas, .offcanvas-header { background: var(--bg-card); color: var(--text); }
  .offcanvas .btn-close { filter: invert(1) grayscale(100%); }
  
  /* Forms: switches & checks */
  .form-check-input {
    background-color: var(--bg-elev);
    border-color: var(--border);
  }
  .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
  }
  
  /* Tables: compact helper */
  .table-sm td, .table-sm th { padding-top: .5rem; padding-bottom: .5rem; }
  
  /* Canvas sizing for charts */
  canvas { display: block; width: 100% !important; }
  
  /* Cards used as chart containers respect fixed heights */
  .card canvas {
    height: 300px; /* override per-canvas inline if needed */
  }
  
  /* Footer (if any) */
  footer {
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 2rem;
  }
  
  /* Forms: inline labels spacing */
  .form-label { color: var(--text); }

  .col-deadline {
    flex: 0 0 auto;
    width: auto;
    text-align: center;
  }
  
  /* Tables: header sticky (optional) */
  .table-sticky thead th {
    position: sticky; top: 0;
    background: var(--bg);
    z-index: 2;
  }
  
  /* Scrollbars (webkit) */
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
  *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
  *::-webkit-scrollbar-track { background: transparent; }
  
  /* Forms: disabled */
  .form-control:disabled, .form-select:disabled {
    opacity: .7;
  }
  
  /* Hover helpers */
  .hover-bg:hover { background: var(--bg-hover); }
  
  /* Shadows */
  .shadow-1 { box-shadow: var(--shadow-1); }
  
  /* Ribbons / subtle separators */
  .divider {
    height: 1px;
    background: var(--border-soft);
    margin: 1rem 0;
  }
  
  /* Badge pills */
  .badge.rounded-pill { padding: .45em .7em; }
  
  /* Tables: right-align helper for numeric cols */
  .text-num { text-align: right; font-variant-numeric: tabular-nums; }
  
  /* Buttons: subtle ghost */
  .btn-ghost {
    background: transparent;
    border-color: var(--border);
  }
  .btn-ghost:hover { background: var(--bg-hover); }
  
  /* Form help text */
  .form-text { color: var(--text-muted) !important; }
  
  /* Breadcrumbs */
  .breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); }
  .breadcrumb-item, .breadcrumb-item a { color: var(--text-muted); }
  .breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted); }
  
  /* Tabs */
  .nav-tabs .nav-link {
    color: var(--text-muted);
    background: transparent;
    border-color: transparent transparent var(--border) transparent;
  }
  .nav-tabs .nav-link.active {
    color: var(--text);
    background: transparent;
    border-color: var(--border) var(--border) transparent var(--border);
  }
  
  /* Accordions */
  .accordion-button {
    background: var(--bg-card);
    color: var(--text);
  }
  .accordion-button:not(.collapsed) {
    color: var(--text);
    background: var(--bg-elev);
  }
  .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(147,197,253,.2); }
  .accordion-item { background: var(--bg-card); border-color: var(--border); }
  
  /* Toasts */
  .toast { background: var(--bg-card); color: var(--text); border-color: var(--border); }
  .toast-header { background: var(--bg-elev); color: var(--text); border-bottom-color: var(--border); }
  
  /* Forms: input group hover */
  .input-group:hover .form-control,
  .input-group:hover .input-group-text {
    border-color: var(--border);
  }
  
  /* Disabled link */
  .disabled, .disabled * { pointer-events: none !important; opacity: .6 !important; }
  
  /* Optional: responsive fine-tunes */
  @media (max-width: 576px) {
    .card canvas { height: 240px; }
  }
  
  /* Flash banner legibility */
.alert, .alert * { color: #000 !important; }

/* Softer backgrounds for common alert variants */
.alert-primary  { background-color: #e9f2ff !important; border-color: #cfe2ff !important; }
.alert-success  { background-color: #e8f7ee !important; border-color: #d1e7dd !important; }
.alert-warning  { background-color: #fff3cd !important; border-color: #ffe69c !important; }
.alert-danger   { background-color: #fdecea !important; border-color: #f5c2c7 !important; }
.alert-secondary{ background-color: #f1f3f5 !important; border-color: #dee2e6 !important; }

/* Make the close button visible on light backgrounds */
.btn-close { filter: none !important; }