/* Panel sidebar (includes/aside.php, #panelSidebar).
   Bootstrap 5.3's responsive offcanvas (.offcanvas-lg) handles the
   mobile-drawer vs desktop-static split at the 992px breakpoint on its
   own (backdrop, Esc-to-close, click-outside-to-close all included).
   This file adds: desktop default-open state with a click-to-collapse
   toggle persisted to localStorage, and the visual styling.
   Note: this theme's compiled Bootstrap bundle reads --dashui-* custom
   properties (not the stock --bs-* names) for its component CSS. */

#panelSidebar {
  --dashui-offcanvas-width: 280px;
  background-color: #f8f9fa !important;
}
/* assets/css/navbar.css (the public site's header stylesheet, loaded after
   this file in every panel wrapper) has its own unrelated ".navbar-vertical"
   rule with margin-top:106px/96px for a completely different component --
   #panelSidebar only carries that class name for the admin theme's existing
   nav styling. Reset it explicitly so it doesn't leak in and push the rail
   down below its intended top offset. */
#panelSidebar.navbar-vertical {
  margin: 0 !important;
}

.panel-topbar {
  display: none;
}

.panel-sidebar-toggle,
.panel-sidebar-collapse-btn,
.panel-sidebar-header .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5b6b82;
  font-size: 1.15rem;
  cursor: pointer;
}
.panel-sidebar-toggle:hover,
.panel-sidebar-collapse-btn:hover {
  background-color: rgba(40, 161, 247, 0.1);
  color: #28a1f7;
}
.panel-sidebar-collapse-btn i {
  transition: transform 0.25s ease;
}

.panel-sidebar-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid #e5e7f2;
}
.panel-sidebar-brand {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid #e5e7f2;
  padding: 0.75rem 1rem;
}
.panel-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
}
.panel-sidebar-user-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #28a1f7;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}
.panel-sidebar-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  color: #5b6b82;
}

/* --- Icon + link colors -------------------------------------------------
   The theme's --dashui-gray-600 variable (normally a neutral gray) has been
   repurposed site-wide to the brand blue (#28a1f7), so by default EVERY
   nav-link -- active or not -- rendered the same bright blue, and the only
   thing marking the active page was a switch to --dashui-primary (#023369,
   navy), which is actually less prominent than the blue everything else
   uses. Override with a real hierarchy: neutral by default, blue on hover,
   a solid pill on the active item so it's unmistakable at a glance. */
#panelSidebar:not(.is-collapsed) .navbar-nav > .nav-item {
  padding: 0 0.75rem;
}
.navbar-vertical.nav-dashboard .navbar-nav .nav-item .nav-link {
  color: #5b6b82;
  border-radius: 0.5rem;
}
.navbar-vertical.nav-dashboard .navbar-nav .nav-item .nav-link:hover {
  color: #28a1f7;
  background-color: rgba(40, 161, 247, 0.1);
}
.navbar-vertical.nav-dashboard .navbar-nav .nav-item .nav-link.active {
  color: #fff;
  background-color: #28a1f7;
}
.navbar-vertical.nav-dashboard .navbar-nav .nav-item .nav-link.active:hover {
  color: #fff;
  background-color: #1c8fe0;
}
.navbar-vertical.nav-dashboard .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]:after {
  color: inherit;
  opacity: 0.5;
}

/* Every icon at the same footprint regardless of which Bootstrap Icons
   variant (outline/filled) or inline width/height attribute it shipped
   with, so the rail reads as one consistent set. */
.navbar-vertical.nav-dashboard .nav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  /* #app-content becomes a flex row so #panelSidebar sits as a normal-flow
     column (not taken out of flow like fixed/absolute) -- this is what lets
     position:sticky work correctly: a sticky flex item stays pinned at
     `top` while scrolling, but can never scroll past the bottom of its
     containing block (the flex container, #app-content) -- i.e. it
     automatically stops before it would ever overlap the site footer that
     follows #app-content, without any manual footer-margin hack.

     This only works if every ancestor between #panelSidebar and the real
     page scrollport has overflow:visible -- the theme's own #main-wrapper
     (the <main> wrapping #app-content) sets overflow-x:hidden, and per the
     CSS overflow spec a non-visible x with a visible y gets that y silently
     computed as auto too, turning #main-wrapper into its own scroll
     container and breaking the sticky calculation. Reset it explicitly. */
  #main-wrapper {
    overflow: visible !important;
  }
  #main-wrapper #app-content {
    display: flex;
    align-items: flex-start;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: calc(100vh - 70px);
  }
  #app-content > .app-content-area {
    flex: 1 1 auto;
    min-width: 0;
  }
  #panelSidebar.panel-sidebar {
    position: sticky !important;
    top: 70px;
    flex: 0 0 280px;
    width: 280px !important;
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    z-index: 900;
    overflow: hidden;
    transition: width 0.25s ease;
    /* Bootstrap's .offcanvas-lg reset only touches header/body/background;
       visibility/transform stay gated behind a JS-added .show class that
       nothing ever adds here (there's no mobile-style trigger at this
       breakpoint) -- force them open unconditionally instead. */
    visibility: visible !important;
    transform: none !important;
  }
  #panelSidebar.panel-sidebar .panel-sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Bootstrap's .offcanvas-lg resets hide .offcanvas-header entirely at
     this breakpoint (it assumes a responsive offcanvas has no header once
     it's "just a sidebar") -- but ours holds the collapse toggle, so it
     needs to stay. Override with an ID-scoped rule to out-specificity
     the theme's ".offcanvas-lg .offcanvas-header{display:none}". */
  #panelSidebar .panel-sidebar-header {
    display: flex !important;
  }

  /* Collapsed (icon-rail) state, toggled via #panel-sidebar-collapse-btn
     and persisted to localStorage -- see the script in aside.php.
     Labels are hidden with font-size:0 rather than display:none so the
     inline SVG icons (which carry explicit width/height attributes and
     so aren't affected by font-size) stay put without a layout jump. */
  #panelSidebar.panel-sidebar.is-collapsed {
    flex-basis: 64px;
    width: 64px !important;
  }
  #panelSidebar.panel-sidebar.is-collapsed .navbar-nav .nav-link {
    font-size: 0;
  }
  #panelSidebar.panel-sidebar.is-collapsed .panel-sidebar-brand,
  #panelSidebar.panel-sidebar.is-collapsed .panel-sidebar-user-name {
    display: none;
  }
  #panelSidebar.panel-sidebar.is-collapsed .panel-sidebar-header,
  #panelSidebar.panel-sidebar.is-collapsed .panel-sidebar-footer .panel-sidebar-user {
    justify-content: center;
  }
  #panelSidebar.panel-sidebar.is-collapsed .collapse.show {
    display: none;
  }
  #panelSidebar.panel-sidebar.is-collapsed .panel-sidebar-collapse-btn i {
    transform: rotate(180deg);
  }
}

@media (max-width: 991.98px) {
  .panel-topbar {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    height: 48px;
    align-items: center;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid #e5e7f2;
    z-index: 1010;
  }

  #panelSidebar.panel-sidebar {
    top: 70px;
    height: calc(100% - 70px);
  }

  #app-content {
    padding-top: 48px;
  }
}

/* --- Content cards --------------------------------------------------------
   .card sections (profile, invoices, working hours, ...) rely on a very
   faint theme shadow with no border, which reads as one undifferentiated
   block once a page has several sections stacked. A visible border makes
   each section identifiable without changing the theme's flat look. */
#app-content .card {
  border: 1px solid #e5e7f2;
}