html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

:root{
  --sidebar-bg: #111827;        /* change to match theme */
  --sidebar-foreground: #E6EEF8;
  --sidebar-accent: #0d6efd;    /* primary accent */
  --sidebar-width: 240px;
  --navbar-height: 56px;
}

/* Sidebar container */
.sidebar {
  background: #ffffff !important;       /* keep menu white */
  color: #111827 !important;            /* dark text for readability */
  width: var(--sidebar-width);
  min-height: 100vh;
  padding-top: 1rem;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  overflow-y: auto;
  transition: transform .22s ease, width .22s ease;
  z-index: 1030;
  border-right: 1px solid rgba(0,0,0,0.04); /* light separator from content */
}

/* Main content shifted to the right of sidebar */
.main-content {
  margin-left: var(--sidebar-width);
  padding: 1.25rem;
}

/* Nav links */
.sidebar .nav-link {
  color: var(--sidebar-foreground);
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-left: 4px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Hover state */
.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.03);
  color: var(--sidebar-accent);
}

/* Active state */
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(13,110,253,0.06), rgba(13,110,253,0.02));
  color: var(--sidebar-accent);
  border-left-color: var(--sidebar-accent);
  font-weight: 600;
}

/* Small-screen sidebar overlay and content safety */
@media (max-width: 767.98px) {
  /* Sidebar hidden by default (collapse handles transform) */
  .sidebar {
    transform: translateX(-100%);
    position: fixed; /* already fixed, keep it overlaying */
    z-index: 1045;   /* sit above main content when shown */
    width: var(--sidebar-width);
    transition: transform .22s ease;
  }
  /* When shown (via toggler) slide in as overlay */
  .sidebar.show {
    transform: translateX(0);
    box-shadow: 0 12px 34px rgba(2,6,23,0.12);
    background: #fff;
  }

  /* Add a simple backdrop when sidebar is open */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1040;
  }
  .sidebar.show + .sidebar-backdrop {
    display: block;
  }

  /* Ensure main content does not keep a left margin on small screens */
  .main-content-area,
  main.main-content-area {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  /* keep sidebar visible and reserve space on desktop */
  .sidebar { transform: none !important; position:fixed; top:var(--navbar-height); left:0; z-index:1030; }
  .main-content-area { margin-left: var(--sidebar-width); }
}

/* Optional: small icon sizing inside links */
.sidebar .nav-link .icon {
  display: inline-block;
  width: 28px;         /* give it more room so emoji or icons aren't clipped */
  font-size: 18px;     /* ensures glyphs are large enough */
  line-height: 1;      /* avoid vertical clipping */
  text-align: center;
  vertical-align: middle;
  opacity: .95;
}

/* Nice thin scrollbar for sidebar */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }

/* Target the brand in _LayoutNoMenu (explicit file path) */
a.navbar-brand.brand-navy {
  color: #000080 !important; /* navy */
  transition: color 120ms ease;
  font-weight: 700 !important; /* make brand bold */
}

a.navbar-brand.brand-navy:hover,
a.navbar-brand.brand-navy:focus {
  color: #000060 !important;
  text-decoration: none;
  outline: none;
}

/* Stronger selector to override Bootstrap if needed */
.navbar.navbar-light a.navbar-brand.brand-navy {
  color: #000080 !important;
  font-weight: 700 !important;
}

/* If icon/SVG inside brand, force fill/color and keep bold feel */
a.navbar-brand.brand-navy svg,
a.navbar-brand.brand-navy .logo {
  fill: #000080 !important;
  color: #000080 !important;
}

/* Override sidebar/menu visual so the menu stays white (remove previous gradient/shadow) */
.sidebar {
  background: #ffffff !important;       /* keep menu white */
  color: #111827 !important;            /* dark text for readability */
  box-shadow: none !important;          /* remove heavy shadow */
  border-right: 1px solid rgba(0,0,0,0.04); /* light separator from content */
}

/* Ensure list items use transparent bg (no gradient) and inherit color */
.sidebar .list-group-item,
.sidebar .list-group-item-action {
  background: transparent !important;
  color: inherit !important;
  border: none;
}

/* Hover and active states — subtle and consistent with white background */
.sidebar .list-group-item:hover {
  background: rgba(13,110,253,0.03);
  color: var(--sidebar-accent);
}
.sidebar .list-group-item.active {
  background: rgba(13,110,253,0.06);
  color: var(--sidebar-accent);
  font-weight: 600;
}

/* Keep small-screen behavior intact */
@media (max-width: 767.98px) {
  .sidebar { box-shadow: 0 8px 20px rgba(0,0,0,0.06); } /* optional light shadow on off-canvas */
}

/* Menu hover glow / highlight — append to the end of site.css */
/* Uses --sidebar-accent (already defined) for a consistent color */
.sidebar .list-group-item,
.sidebar .list-group-item-action,
.sidebar .nav-link {
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Hover: subtle lift + glow + left accent */
.sidebar .list-group-item:hover,
.sidebar .list-group-item-action:hover,
.sidebar .nav-link:hover {
  background: rgba(13,110,253,0.06);                   /* soft highlight */
  color: var(--sidebar-accent) !important;             /* ensure readable accent */
  border-left-color: var(--sidebar-accent);            /* visual bar at left */
  box-shadow: 0 8px 24px rgba(13,110,253,0.10);        /* glow */
  transform: translateY(-2px);                         /* subtle lift */
}

/* Focus (keyboard accessible) — stronger ring */
.sidebar .list-group-item:focus,
.sidebar .list-group-item-action:focus,
.sidebar .nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(13,110,253,0.06), 0 12px 32px rgba(13,110,253,0.12);
}

/* Tweak submenu hover to keep indentation */
.menu-submenu .list-group-item:hover {
  padding-left: 2.5rem;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar .list-group-item,
  .sidebar .list-group-item-action,
  .sidebar .nav-link {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Add at end of file: layout fixes for footer, sidebar and responsive widths */

/* Ensure full-height layout and allow footer to sit at bottom */
html, body {
  height: 100%;
  overflow-x: hidden; /* avoid accidental horizontal scrollbar from minor rounding issues */
}

.app-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-body {
  flex: 1 1 auto; /* expand main area so footer is pushed to bottom */
}

/* Main content area: no sidebar offset on small screens */
.main-content-area {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  padding-top: 0.5rem;
}

/* Apply sidebar offset only on medium and larger screens */
@media (min-width: 768px) {
  .main-content-area {
    margin-left: var(--sidebar-width); /* reserve space for fixed sidebar */
    max-width: calc(100% - var(--sidebar-width));
  }
}

/* Prevent children (cards, rows) from exceeding available width */
.main-content-area .p-3,
.main-content-area > div {
  box-sizing: border-box;
  width: 100%;
}

/* Footer stays visually at bottom because .app-body grows; ensure footer height consistent */
footer.footer {
  height: auto;
  padding: 0.75rem 0;
}

/* Tweak container-fluid so it doesn't add extra horizontal gap */
.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Keep sidebar fixed on desktop and offcanvas on mobile (existing rules remain) */
@media (max-width: 767.98px) {
  /* remove left offset and allow sidebar to slide in/out without pushing layout */
  .main-content-area {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar .list-group-item,
  .sidebar .list-group-item-action {
    transition: none !important;
  }
}

/* Ensure sidebar is visible and not translated on desktop; remain overlay on small screens */
@media (min-width: 768px) {
  .sidebar {
    transform: none !important;
    display: block !important;
    position: fixed; /* keep it fixed on desktop */
    top: var(--navbar-height);
    left: 0;
    z-index: 1030;
  }
}

/* Mobile overlay behaviour (already present) — keep it as overlay when .show is added */
@media (max-width: 767.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.show { transform: translateX(0); box-shadow: 0 12px 34px rgba(2,6,23,0.12); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1040; }
  .sidebar.show + .sidebar-backdrop { display: block; }
  .main-content-area { margin-left: 0 !important; max-width: 100% !important; }
}

/* Small navbar toggler with hover glow/highlight */
.navbar-toggler.small-toggler {
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .16s ease, transform .12s ease, background-color .12s ease;
  background: transparent;
  border: 1px solid transparent;
}

/* Make the default toggler icon scale down */
.navbar-toggler.small-toggler .navbar-toggler-icon {
  background-size: 18px 18px;
  width: 18px;
  height: 18px;
}

/* Hover / focus glow and subtle lift */
.navbar-toggler.small-toggler:hover,
.navbar-toggler.small-toggler:focus {
  background-color: rgba(13,110,253,0.04);
  box-shadow: 0 8px 22px rgba(13,110,253,0.12);
  transform: translateY(-2px);
  border-color: rgba(13,110,253,0.08);
  outline: none;
}

/* Stronger focus ring for keyboard users */
.navbar-toggler.small-toggler:focus-visible {
  box-shadow: 0 0 0 4px rgba(13,110,253,0.08), 0 8px 22px rgba(13,110,253,0.12);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler.small-toggler {
    transition: none;
    transform: none;
  }
  .navbar-toggler.small-toggler:hover,
  .navbar-toggler.small-toggler:focus {
    transform: none;
    box-shadow: none;
  }
}

/* Desktop toggler behavior: hide sidebar when .desktop-collapsed and remove left offset */
@media (min-width: 768px) {
  /* Hide the sidebar by sliding it out */
  .sidebar.desktop-collapsed {
    transform: translateX(-100%) !important;
    transition: transform .22s ease;
  }

  /* Show backdrop when we intentionally collapsed on desktop */
  .sidebar-backdrop.show {
    display: block;
  }

  /* When sidebar is hidden, remove main content left margin */
  .main-content-area.sidebar-hidden {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}

/* Ensure backdrop default hidden */
.sidebar-backdrop {
  display: none;
}

/* Safe fallback: when sidebar has inline styles from bootstrap, ensure desktop-collapsed takes precedence */
.sidebar.desktop-collapsed,
.sidebar.show.desktop-collapsed {
  transform: translateX(-100%) !important;
}

/* Desktop: compact icons-only sidebar by default; expand on hover or when .desktop-expanded is present */
@media (min-width: 768px) {
  /* Compact default */
  .sidebar {
    width: 64px !important;
    overflow: visible;
    transition: width .20s ease, box-shadow .20s ease;
  }

  /* Icons centered, labels hidden */
  .sidebar .list-group-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .65rem .35rem;
    text-align: center;
  }
  .sidebar .menu-label {
    display: inline-block;
    margin-left: .5rem;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .18s ease, max-width .18s ease;
    visibility: hidden;
  }

  /* Hide submenu chevrons/icons in compact state */
  .sidebar .menu-toggle-icon,
  .sidebar .menu-submenu .icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Main content uses compact offset */
  .main-content-area {
    margin-left: 64px !important;
    transition: margin-left .18s ease;
  }

  /* Expand behavior: on hover or when desktop-expanded class present */
  .sidebar:hover,
  .sidebar.desktop-expanded {
    width: var(--sidebar-width) !important;
    box-shadow: 0 12px 34px rgba(2,6,23,0.06);
  }
  .sidebar:hover .list-group-item,
  .sidebar.desktop-expanded .list-group-item {
    justify-content: flex-start;
    padding: .5rem 1rem;
  }
  .sidebar:hover .menu-label,
  .sidebar.desktop-expanded .menu-label {
    max-width: 360px;
    opacity: 1;
    visibility: visible;
  }

  /* Reveal submenu toggle and submenu icons when expanded/hovered or when collapse is open */
  .sidebar:hover .menu-toggle-icon,
  .sidebar.desktop-expanded .menu-toggle-icon,
  .sidebar:hover .menu-submenu .icon,
  .sidebar.desktop-expanded .menu-submenu .icon,
  .sidebar .collapse.show .menu-toggle-icon,
  .sidebar .collapse.show .menu-submenu .icon {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* When expanded, shift main content to full sidebar width */
  .sidebar:hover ~ .main-content-area,
  .sidebar.desktop-expanded ~ .main-content-area,
  .sidebar.show ~ .main-content-area {
    margin-left: var(--sidebar-width) !important;
  }

  /* Keep submenu spacing consistent in compact mode */
  .sidebar:not(:hover) a[data-bs-toggle="collapse"] {
    margin-bottom: 0.65rem;
    padding-bottom: 0.25rem;
  }
  .sidebar:hover a[data-bs-toggle="collapse"],
  .sidebar a[data-bs-toggle="collapse"][aria-expanded="true"] {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Accessibility: keyboard focus should also expand (optional) */
  .sidebar .list-group-item:focus-within + .menu-submenu,
  .sidebar .list-group-item:focus-within {
    outline: none;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .menu-label,
  .main-content-area {
    transition: none !important;
  }
}

/* Reduce gap for collapsed submenu toggler and remove double-spacing */
@media (min-width: 768px) {
  /* smaller single gap under the toggler in compact state */
  .sidebar:not(:hover) a[data-bs-toggle="collapse"] {
    margin-bottom: 0.28rem; /* smaller spacing */
    padding-bottom: 0.12rem; /* keep touch target comfortable */
  }

  /* cancel the extra top margin previously added to the following item */
  .sidebar:not(:hover) a[data-bs-toggle="collapse"] + .menu-submenu + .list-group-item {
    margin-top: 0 !important;
  }

  /* if you prefer spacing applied to the submenu itself (safer DOM), use this instead */
  .sidebar:not(:hover) a[data-bs-toggle="collapse"] + .menu-submenu {
    margin-bottom: 0.28rem;
  }
}

/* Hide navbar toggler on desktop and show only on small screens */
.navbar-toggler.small-toggler {
  display: none; /* hide by default (desktop) */
}

/* show on small screens */
@media (max-width: 767.98px) {
  .navbar-toggler.small-toggler {
    display: inline-flex;
  }
}

/* Footer logo: small, aligned and responsive */
.footer-logo {
  height: 28px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Layout for footer container (keeps logo + text on left, optional content on right) */
.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* On very small screens stack footer content and center it */
@media (max-width: 575.98px) {
  .footer .container {
    flex-direction: column;
    text-align: center;
  }
  .footer-logo {
    margin-bottom: 0.35rem;
  }
  .footer-right {
    display: block !important;
    margin-top: 0.25rem;
  }
}

/* Shift footer content to the right so it lines up with main content (desktop only) */
@media (min-width: 768px) {
  footer .container {
    margin-left: var(--sidebar-width);
    max-width: calc(100% - var(--sidebar-width));
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Keep footer full-width on small screens */
@media (max-width: 767.98px) {
  footer .container {
    margin-left: 0;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}