/* ===== Custom MAze Theme (Light + Dark Mode) ===== */

/* ---------- Base (Light Mode) ---------- */
:root {
    --brand-bg: #005EB8;     /* Navbar background blue */
    --brand-fg: #FFFFFF;     /* Text color on dark backgrounds */
    --brand-accent: #0099ff; /* Accent blue for hover or highlights */
    --brand-link: #0066cc;   /* Link color */
    --brand-link-hover: #004c99;
    --brand-body-bg: #f9fafc;
    --brand-text: #222;
  }
  
  /* ---------- Dark Mode Overrides ---------- */
  html[data-bs-theme="dark"] {
    --brand-bg: #00264d;          /* Darker navbar blue */
    --brand-fg: #e0e0e0;          /* Light gray text */
    --brand-accent: #66b2ff;      /* Softer blue highlight */
    --brand-link: #66b2ff;
    --brand-link-hover: #99ccff;
    --brand-body-bg: #0d1117;     /* Dark body background */
    --brand-text: #f0f0f0;
  }
  
  /* ---------- Global Styles ---------- */
  body {
    background-color: var(--brand-body-bg);
    color: var(--brand-text);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  }
  
  /* ---------- Navbar ---------- */
  .navbar,
  .header {
    background-color: var(--brand-bg) !important;
    color: var(--brand-fg) !important;
  }
  
  /* Fix inconsistent link colors (Home, Token, Admin) */
  .navbar .nav-link,
  .navbar a.nav-link,
  .navbar .navbar-brand {
    color: var(--brand-fg) !important;
  }
  
  .navbar .nav-link:hover,
  .navbar .nav-link.active,
  .navbar .nav-link:focus {
    color: var(--brand-accent) !important;
  }
  
  /* ---------- Links ---------- */
  a,
  a:visited {
    color: var(--brand-link);
  }
  
  a:hover {
    color: var(--brand-link-hover);
  }
  
  /* ---------- Buttons ---------- */
  .btn-jupyter {
    border: 2px solid var(--brand-accent) !important;
    border-radius: 8px;
    background-color: #003366 !important;
    color: var(--brand-fg) !important;
  }
  
  .btn-jupyter:hover {
    background-color: #004080 !important;
    border-color: var(--brand-link-hover) !important;
  }
  
  /* Dark mode button adjustments */
  html[data-bs-theme="dark"] .btn-jupyter {
    background-color: var(--brand-bg) !important;
    border-color: var(--brand-accent) !important;
    color: var(--brand-fg) !important;
  }
  
  html[data-bs-theme="dark"] .btn-jupyter:hover {
    background-color: var(--brand-accent) !important;
    color: #00264d !important; /* dark text on light blue */
  }

  .btn-outline-contrast {
    color: #ffffff !important;            /* White text */
    border: 1px solid #ffffff !important; /* White outline */
    background-color: transparent !important;
  }
  
  .btn-outline-contrast:hover {
    color: #003366 !important;            /* Dark text on hover */
    background-color: #ffffff !important; /* White fill on hover */
  }
  
  /* Dark mode adjustment: lighter border, slightly darker text */
  html[data-bs-theme="dark"] .btn-outline-contrast {
    color: #e0e0e0 !important;
    border: 1px solid #e0e0e0 !important;
  }
  
  html[data-bs-theme="dark"] .btn-outline-contrast:hover {
    background-color: #e0e0e0 !important;
    color: #00264d !important;
  }