:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
  }

.brand-logo {
  height: 60px;           /* bump this up or down for size */
}

.navbar-logo {
  height: 60px;    /* tweak this number to taste */
  width: auto;
}

.navbar.sticky-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}


.brand-text {
  font-size: 1.25rem;     /* smaller than fs-1 */
  font-weight: 600;
  white-space: nowrap;    /* prevents "Wifieye LPR" from breaking */
}

/* make sure nav links stay nicely centered vertically */
.navbar-nav .nav-link {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;    /* "User Profile" stays on one line */
  color: white;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;   
}

:root{
  --wifieye-blue: #285681; /* try #22517E or #2F6FA3 if you want darker/brighter */
}

/* all switches = primary (blue) */
.form-switch .form-check-input:checked {
    background-color: var(--wifieye-blue) !important;
    border-color: var(--wifieye-blue) !important;
}

/* Optional: focus ring */
.form-check-input:focus{
  box-shadow: 0 0 0 .2rem rgba(40, 86, 129, .25);
}

body {
    font-family: "Source Sans Pro", var(--bs-font-sans-serif);
    color: var(--bs-dark);
    background-color: var(--bs-light);
    overflow-y: auto;
}





/* Floating alerts in top-right corner */
.alert-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
}

/* Smaller alert size */
.alert-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    max-width: 320px;      /* keeps it from stretching across the page */
}

/* Navbar link hover effect – text only */
.navbar-light .navbar-nav .nav-link {
    transition: color 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #6c757d; /* light gray text on hover */
    /* no background color, no border-radius */
}

.plate-link {
  text-decoration: none;
}

/* Dashboard: switch rows should never force horizontal overflow */
.lpr-switch{
  width: 100%;
  max-width: 420px;   /* keeps the nice centered look on desktop/tablet */
}

/* On small phones, let labels wrap naturally */
@media (max-width: 576px){
  .lpr-switch{
    max-width: 100%;
  }
  .lpr-switch .form-check-label{
    white-space: normal;
    line-height: 1.2;
  }
}

@media (max-width: 576px){
  .custom-modal{
    padding: 1rem 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }
}

/* Mobile plate cards */
.plate-card {
  background: #fff;
}

@media (max-width: 576px){
  .plate-card .plate-link{
    font-size: 1.05rem;
  }
}

/* Navbar: keep logo from overflowing/cropping on mobile */
.navbar-brand{
  min-width: 0;
  padding-right: .5rem;
}

.navbar-logo{
  height: 60px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 576px){
  .navbar-logo{
    height: 44px;
  }
}

/* Login: keep title on one line and readable on phones */
.login-title{
  white-space: nowrap;
}

/* Optional: reduce vertical whitespace on mobile */
@media (max-width: 576px){
  .login-title{
    font-size: 1.6rem;
  }
}

@media (max-width: 576px){
  body.logged-out .navbar .navbar-brand{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 576px){
  .navbar > .container-fluid{
    display: flex;
    flex-wrap: wrap !important;   /* allows the expanded menu to drop below */
    align-items: center;
  }

  /* Header row: brand can shrink but must leave room for toggler */
  .navbar .navbar-brand{
    min-width: 0;
    flex: 1 1 auto;
    max-width: calc(100% - 72px); /* reserve space for hamburger */
  }

  /* Header row: hamburger always on the right */
  .navbar .navbar-toggler{
    margin-left: auto !important;
    flex: 0 0 auto;
  }

  /* Expanded menu: force a full-width new row below the header */
  .navbar .navbar-collapse{
    flex-basis: 100%;
    width: 100%;
  }

  /* Logo sizing */
  .navbar-logo{
    height: 44px;
    width: auto;
    max-width: 100%;
    display: block;
  }
}


/* Slightly larger toggle switches on mobile */
@media (max-width: 576px){
  .form-switch .form-check-input{
    transform: scale(1.3);
    transform-origin: left center;
    margin-right: .35rem;
  }
}

/* Navbar hamburger: remove Bootstrap focus ring / tap outline */
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active,
.navbar .navbar-toggler:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Mobile-only: make LPR toggle rows larger and spaced */
@media (max-width: 576px){

  /* Increase spacing between toggle and label */
  .form-switch{
    padding-left: 4.6rem; /* moves label right */
  }

  .form-switch .form-check-input{
    margin-left: -4.6rem; /* keeps switch aligned */
    transform: scale(1.25); /* bigger toggle */
    transform-origin: left center;
  }

  /* Bigger, more readable labels */
  .form-switch .form-check-label{
    font-size: 1.1rem;
    line-height: 1.4;
  }

  /* Add vertical breathing room between rows */
  .form-switch{
    margin-bottom: 0.75rem;
  }
}

.lpr-section-title{
  font-weight: 600;
  margin: 0.25rem 0 0.5rem;
}

/* Mobile-only sticky footer for dashboard actions */
@media (max-width: 576px){
  /* Give the page room so the fixed bar doesn't cover content */
  body{
    padding-bottom: 120px; /* adjust if you change footer height */
  }

  .mobile-sticky-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.15);
    padding: 10px 12px 8px;
    z-index: 1060;
  }

  .mobile-sticky-inner{
    display: flex;
    gap: 10px;
  }

  .mobile-sticky-copy{
    text-align: center;
    font-size: 0.9rem;
    margin-top: 6px;
    color: rgba(0,0,0,.6);
  }
}

@media (max-width: 576px){
  body.dashboard-page footer{
    display: none !important;
  }
}

/* Flash message modal overlay (global) */
.flash-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;          /* bottom */
  justify-content: center;        /* centered horizontally */
  padding: 16px;
  z-index: 2000;
  pointer-events: none;           /* enabled only when visible */
  opacity: 0;
  transition: opacity .25s ease;
}

.flash-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;           /* blocks clicks underneath */
  background: rgba(0,0,0,.25);    /* dims page */
}

/* Default (mobile/tablet): content-ish width */
.flash-card{
  width: min(92vw, 720px);
  margin-bottom: 70px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
}

/* Desktop: make it noticeably smaller */
@media (min-width: 992px){
  .flash-card{
    width: 520px;      /* adjust to taste: 480–600 */
  }
}

.flash-card .alert{
  border-radius: 0;
  padding: .6rem .9rem;
  text-align: center;
}

.flash-overlay.is-hiding{
  opacity: 0;
  pointer-events: none;
}

/* LPR section headers */
.lpr-section-title{
  font-weight: 600;
  margin: 1rem 0 .5rem;
  position: relative;
}

/* Short accent line under section title */
.lpr-section-title::after{
  content: "";
  display: block;
  width: 80px;              /* length of the line */
  height: 2px;
  margin: .4rem auto 0;
  background-color: rgba(0,0,0,.2);
  border-radius: 2px;
}

/* Only on the mobile License Plates view: make room for sticky footer */
@media (max-width: 576px){
  body.dashboard-plates-page{
    padding-bottom: 120px; /* adjust if you change footer height */
  }
}

/* Hand cursor ONLY on the toggle itself + the label text */
.lpr-switch .form-check-input,
.lpr-switch .form-check-label {
  cursor: pointer;
}

/* Ensure the rest of the row stays default arrow */
.lpr-switch {
  cursor: default;
}

/* =====================================================================
   ALWAYS-DARK THEME OVERRIDES
   Revert to light mode by removing "dark-mode" from <body>.
   ===================================================================== */

body.dark-mode{
  --we-bg: #454D55;                 /* exact background color requested */
  --we-surface: #3f464d;            /* cards/panels */
  --we-surface-2: #343A40;          /* navbar */
  --we-border: rgba(255,255,255,.12);
  --we-text: #f1f5f9;
  --we-text-muted: rgba(241,245,249,.72);
  --we-link: #8ab4f8;
  background-color: var(--we-bg) !important;
  color: var(--we-text) !important;
}

/* Page background + default text */
body.dark-mode,
body.dark-mode main,
body.dark-mode .container,
body.dark-mode .container-fluid{
  background-color: var(--we-bg) !important;
  color: var(--we-text) !important;
}

/* Navbar (force dark bar color) */
body.dark-mode nav.navbar{
  background-color: var(--we-surface-2) !important;
  border-bottom: 1px solid var(--we-border) !important;
}

/* IMPORTANT: the navbar has an inner .container-fluid.
   Your global body.dark-mode .container-fluid rule repaints it to --we-bg.
   Force the inner container to the navbar bar color. */
body.dark-mode nav.navbar > .container-fluid,
body.dark-mode nav.navbar > .container{
  background-color: var(--we-surface-2) !important;
}


/* Ensure the Bootstrap toggler icon is visible */
body.dark-mode .navbar-toggler{
  border-color: rgba(255,255,255,.25) !important;
}
body.dark-mode .navbar-toggler-icon{
  filter: invert(1) grayscale(1) brightness(2);
}


/* Logo swap */
.logo-dark{ display: none; }
body.dark-mode .logo-light{ display: none; }
body.dark-mode .logo-dark{ display: inline-block; }

/* Cards / panels (includes your plate cards) */
body.dark-mode .card,
body.dark-mode .plate-card,
body.dark-mode .flash-card{
  background-color: var(--we-surface) !important;
  color: var(--we-text) !important;
  border-color: var(--we-border) !important;
}

/* Tables */
body.dark-mode .table{
  color: var(--we-text) !important;
}
body.dark-mode .table thead th{
  border-bottom-color: var(--we-border) !important;
}
body.dark-mode .table td,
body.dark-mode .table th{
  border-top-color: var(--we-border) !important;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select{
  background-color: #2f363d !important;
  color: var(--we-text) !important;
  border-color: var(--we-border) !important;
}
body.dark-mode .form-control::placeholder{
  color: rgba(241,245,249,.55) !important;
}

/* Footer */
body.dark-mode footer{
  background-color: var(--we-surface-2) !important;
  border-top: 1px solid var(--we-border) !important;
  color: var(--we-text-muted) !important;
  padding: 10px 0;
}

/* Footer inner container should match the footer bar color */
body.dark-mode footer .container,
body.dark-mode footer .container-fluid{
  background-color: var(--we-surface-2) !important;
}

/* ===== Bootstrap 5.3.3: Global primary button color override ===== */

/* (Optional) Also update theme primary for links, text, etc. */
:root{
  --bs-primary: #3F6791;
  --bs-primary-rgb: 63, 103, 145;
}

/* Solid primary buttons */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: #3F6791;
  --bs-btn-border-color: #3F6791;

  /* Slightly darker on hover/active (auto-derived) */
  --bs-btn-hover-bg: color-mix(in srgb, #3F6791 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, #3F6791 88%, #000);

  --bs-btn-active-bg: color-mix(in srgb, #3F6791 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, #3F6791 80%, #000);

  --bs-btn-focus-shadow-rgb: 63, 103, 145;
}

/* Outline primary buttons */
.btn-outline-primary{
  --bs-btn-color: #3F6791;
  --bs-btn-border-color: #3F6791;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3F6791;
  --bs-btn-hover-border-color: #3F6791;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, #3F6791 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, #3F6791 80%, #000);

  --bs-btn-focus-shadow-rgb: 63, 103, 145;
}

/* ===== Toggles: keep OFF white, make ON match primary ===== */

/* OFF state (default): keep white like before */
.form-switch .form-check-input{
  background-color: #ffffff !important;
  border-color: rgba(255,255,255,.55) !important; /* subtle edge on dark bg */
}

/* ON state */
.form-switch .form-check-input:checked{
  background-color: #3F6791 !important;
  border-color: #3F6791 !important;
}

/* Focus ring */
.form-switch .form-check-input:focus{
  border-color: #3F6791 !important;
  box-shadow: 0 0 0 .25rem rgba(63, 103, 145, .25) !important;
}

/* Disabled stays visually disabled */
.form-switch .form-check-input:disabled{
  opacity: .45;
}

/* If you use .form-check-input without .form-switch (checkbox/radio) */
.form-check-input:checked{
  background-color: #3F6791 !important;
  border-color: #3F6791 !important;
}
.form-check-input:focus{
  border-color: #3F6791 !important;
  box-shadow: 0 0 0 .25rem rgba(63, 103, 145, .25) !important;
}

/* ===== Mobile: ensure footer paints all the way to the bottom (no strip) ===== */
@media (max-width: 576px){
  body.dark-mode footer{
    position: relative !important; /* required for ::after positioning */
    overflow: visible !important;
  }

  /* Paint an extra bar below the footer to cover the "gap" area */
  body.dark-mode footer::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;                 /* extend below footer */
    height: 40px;                  /* covers the visible strip */
    background: var(--we-surface-2) !important;
  }
}

/* Footer link: bold + primary color */
footer a{
  color: #3F6791 !important;
  font-weight: 700 !important;
  text-decoration: none;
}

footer a:hover,
footer a:focus{
  color: #3F6791 !important;
  text-decoration: underline;
}

/* Footer copyright text (© 2025) */
footer{
  color: #869099 !important;
}

/* Keep the link styled separately */
footer a{
  color: #3F6791 !important;
  font-weight: 700 !important;
}

/* Footer: force © + year color */
body.dark-mode footer,
body.dark-mode footer p,
body.dark-mode footer .text-center,
body.dark-mode footer .mb-0{
  color: #869099 !important;
}

/* Footer link: bold + primary color */
body.dark-mode footer a,
body.dark-mode footer a:visited{
  color: #3F6791 !important;
  font-weight: 700 !important;
  text-decoration: none;
}

body.dark-mode footer a:hover,
body.dark-mode footer a:focus{
  color: #3395FF !important;
  text-decoration: underline;
}