/* ==========================================================================
   AGK Sidebar — Production CSS
   3 states: mobile drawer | tablet icon-only + hover | desktop full/collapsed
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS custom properties (scoped to avoid conflicts with Bootstrap)
   -------------------------------------------------------------------------- */
:root {
  --agk-primary:        #2a264a;
  --agk-primary-light:  #3d3864;
  --agk-primary-dark:   #1a1630;
  --agk-secondary:      #1e73be;
  --agk-secondary-light:#2b8dd6;
  --agk-sidebar-width:  240px;
  --agk-sidebar-icon:   56px;
  --agk-nav-height:     56px; /* matches Bootstrap navbar default */
  --agk-transition:     0.25s ease;
  --agk-text:           #d0cfe8;
  --agk-text-muted:     #8480a8;
  --agk-hover-bg:       rgba(255, 255, 255, 0.07);
  --agk-active-bg:      var(--agk-secondary);
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --agk-transition: 0ms;
  }
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.agk-layout {
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - var(--agk-nav-height));
  position: relative;
}

/* --------------------------------------------------------------------------
   Sidebar base — shared across all states
   -------------------------------------------------------------------------- */
.agk-sidebar {
  background-color: var(--agk-primary);
  color: var(--agk-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* overflow-x visible allows toggle button to protrude;
     internal scrolling is handled by the nav child */
  overflow: visible;
  transition:
    width var(--agk-transition),
    transform var(--agk-transition);
  z-index: 1040;
  position: relative;
}

/* Internal scrollable container — allows toggle button to protrude from parent */
.agk-sidebar > nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--agk-primary-light) transparent;
}

.agk-sidebar > nav::-webkit-scrollbar {
  width: 4px;
}
.agk-sidebar > nav::-webkit-scrollbar-track {
  background: transparent;
}
.agk-sidebar > nav::-webkit-scrollbar-thumb {
  background: var(--agk-primary-light);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Main content area
   -------------------------------------------------------------------------- */
.agk-main {
  flex: 1 1 0;
  min-width: 0; /* prevent flex overflow */
  transition: margin-left var(--agk-transition);
}

/* --------------------------------------------------------------------------
   Sidebar nav list
   -------------------------------------------------------------------------- */
.agk-nav {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  width: 100%; /* always fill sidebar width */
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Nav items
   -------------------------------------------------------------------------- */
.agk-nav-item {
  width: 100%;
  position: relative;
}

.agk-nav-item.agk-nav-logoff {
  margin-top: auto;
  border-top: 1px solid var(--agk-primary-light);
  padding-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Nav links (anchors AND buttons — unified appearance)
   -------------------------------------------------------------------------- */
.agk-nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px; /* WCAG touch target */
  padding: 0.5rem 1rem;
  color: var(--agk-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  transition: background-color var(--agk-transition), color var(--agk-transition);
  /* Ensure button resets */
  font-family: inherit;
  text-align: left;
  -webkit-appearance: none;
}

.agk-nav-link:hover,
.agk-nav-link:focus-visible {
  background-color: var(--agk-hover-bg);
  color: #fff;
  outline: none;
}

.agk-nav-link:focus-visible {
  outline: 2px solid var(--agk-secondary-light);
  outline-offset: -2px;
}

.agk-nav-link.active,
.agk-nav-link.active:hover {
  background-color: var(--agk-secondary);
  color: #fff;
}

/* Logoff button inherits agk-nav-link */
.agk-logoff-btn {
  /* already inherits all agk-nav-link styles; ensure full width */
  width: 100%;
}

/* --------------------------------------------------------------------------
   Nav icons
   -------------------------------------------------------------------------- */
.agk-nav-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 1.5rem;        /* fixed width so labels align */
  text-align: center;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Nav labels — hidden when collapsed/icon-only
   -------------------------------------------------------------------------- */
.agk-nav-label {
  margin-left: 0.75rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--agk-transition), width var(--agk-transition);
}

/* --------------------------------------------------------------------------
   Chevron for submenu triggers
   -------------------------------------------------------------------------- */
.agk-chevron {
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: transform var(--agk-transition), opacity var(--agk-transition);
  margin-left: auto;
}

.agk-submenu-trigger[aria-expanded="true"] .agk-chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Submenus
   -------------------------------------------------------------------------- */
.agk-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--agk-primary-dark);
  overflow: hidden;
  /* Bootstrap's .collapse handles display toggling;
     we add max-height animation on top for smoothness */
}

.agk-submenu.show {
  display: block;
}

.agk-submenu-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem 0.4rem 2.75rem; /* indent under icon column */
  color: var(--agk-text);
  text-decoration: none;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--agk-transition), color var(--agk-transition);
}

.agk-submenu-link:hover,
.agk-submenu-link:focus-visible {
  background-color: var(--agk-hover-bg);
  color: #fff;
  outline: none;
}

.agk-submenu-link:focus-visible {
  outline: 2px solid var(--agk-secondary-light);
  outline-offset: -2px;
}

.agk-submenu-link.active {
  background-color: var(--agk-secondary);
  color: #fff;
}

.agk-submenu-section-label {
  padding: 0.5rem 1rem 0.15rem 2.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--agk-text-muted);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Desktop collapse toggle button
   -------------------------------------------------------------------------- */
.sidebar-toggle {
  display: none; /* shown only on desktop via media query below */
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  z-index: 1050;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--agk-primary-light);
  background: var(--agk-primary);
  color: var(--agk-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background-color var(--agk-transition),
    border-color var(--agk-transition),
    transform var(--agk-transition);
  /* Override any stacking context that would clip the button */
  overflow: visible;
}

.sidebar-toggle:hover {
  background-color: var(--agk-secondary);
  border-color: var(--agk-secondary);
  color: #fff;
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--agk-secondary-light);
  outline-offset: 2px;
}

/* Icon rotates when collapsed */
.agk-sidebar.is-collapsed .sidebar-toggle #sidebarToggleIcon {
  transform: rotate(180deg);
}

#sidebarToggleIcon {
  transition: transform var(--agk-transition);
}

/* --------------------------------------------------------------------------
   Mobile overlay dim
   -------------------------------------------------------------------------- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1039; /* just below sidebar */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.is-active {
  display: block;
}

/* ==========================================================================
   STATE 1 — MOBILE (< 768px)
   Sidebar hidden off-screen left; hamburger opens it as a drawer overlay
   ========================================================================== */
@media (max-width: 767.98px) {
  .agk-sidebar {
    position: fixed;
    top: var(--agk-nav-height);
    left: 0;
    bottom: 0;
    width: var(--agk-sidebar-width);
    transform: translateX(calc(-1 * var(--agk-sidebar-width)));
    /* Drawer sits above overlay */
    z-index: 1045;
    /* Submenus always show labels when drawer is open */
  }

  .agk-sidebar.is-mobile-open {
    transform: translateX(0);
  }

  /* Labels always visible in mobile drawer */
  .agk-sidebar .agk-nav-label {
    opacity: 1;
  }

  /* Chevron always visible in mobile */
  .agk-sidebar .agk-chevron {
    opacity: 1;
  }

  /* No desktop toggle button on mobile */
  .sidebar-toggle {
    display: none !important;
  }

  /* Main content spans full width */
  .agk-main {
    margin-left: 0 !important;
  }

  /* Prevent body scroll when drawer is open */
  body.agk-drawer-open {
    overflow: hidden;
  }
}

/* ==========================================================================
   STATE 2 — TABLET / ICON-ONLY (768px – 1199px)
   Sidebar always visible at 56px; hover expands to 240px (overlay, not push)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .agk-sidebar {
    position: fixed;
    top: var(--agk-nav-height);
    left: 0;
    bottom: 0;
    width: var(--agk-sidebar-icon);
    z-index: 1040;
    overflow: visible; /* allow submenu to peek out while collapsed */
  }

  /* Reserve space so content doesn't sit under sidebar */
  .agk-main {
    margin-left: var(--agk-sidebar-icon);
  }

  /* Labels hidden when icon-only */
  .agk-sidebar .agk-nav-label {
    opacity: 0;
    width: 0;
    margin-left: 0;
    pointer-events: none;
    transition: opacity var(--agk-transition), width var(--agk-transition), margin-left var(--agk-transition);
  }

  /* Chevron hidden when icon-only */
  .agk-sidebar .agk-chevron {
    opacity: 0;
    transition: opacity var(--agk-transition);
  }

  /* Submenus must not show when collapsed (no hover) */
  .agk-sidebar .agk-submenu.show {
    display: none;
  }

  /* On hover — expand sidebar to full width, float over content */
  .agk-sidebar:hover {
    width: var(--agk-sidebar-width);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.35);
  }

  .agk-sidebar:hover .agk-nav-label {
    opacity: 1;
    width: auto;
    margin-left: 0.75rem;
    pointer-events: auto;
  }

  .agk-sidebar:hover .agk-chevron {
    opacity: 1;
  }

  /* Re-enable submenus that were open when hovering */
  .agk-sidebar:hover .agk-submenu.show {
    display: block;
  }

  /* No desktop toggle on tablet */
  .sidebar-toggle {
    display: none !important;
  }

  /* No mobile overlay on tablet */
  .sidebar-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   STATE 3 — DESKTOP (>= 1200px)
   Full 240px by default; toggle button collapses to 56px (pushes content)
   ========================================================================== */
@media (min-width: 1200px) {
  .agk-sidebar {
    position: fixed;
    top: var(--agk-nav-height);
    left: 0;
    bottom: 0;
    width: var(--agk-sidebar-width);
    flex-shrink: 0;
    height: calc(100vh - var(--agk-nav-height));
  }

  /* Show desktop toggle button */
  .sidebar-toggle {
    display: flex;
  }

  /* Content needs margin to account for fixed sidebar */
  .agk-main {
    margin-left: var(--agk-sidebar-width);
  }

  /* Labels visible by default */
  .agk-sidebar .agk-nav-label {
    opacity: 1;
    width: auto;
    margin-left: 0.75rem;
    transition: opacity var(--agk-transition), width var(--agk-transition), margin-left var(--agk-transition);
  }

  .agk-sidebar .agk-chevron {
    opacity: 1;
    transition: opacity var(--agk-transition), transform var(--agk-transition);
  }

  /* COLLAPSED state on desktop */
  .agk-sidebar.is-collapsed {
    width: var(--agk-sidebar-icon);
    overflow: visible; /* allow toggle button to protrude */
  }

  .agk-sidebar.is-collapsed .agk-nav-label {
    opacity: 0;
    width: 0;
    margin-left: 0;
    pointer-events: none;
  }

  .agk-sidebar.is-collapsed .agk-chevron {
    opacity: 0;
    pointer-events: none;
  }

  /* Hide open submenus when collapsed */
  .agk-sidebar.is-collapsed .agk-submenu.show {
    display: none;
  }

  /* Collapsed sidebar: center icons */
  .agk-sidebar.is-collapsed .agk-nav-link {
    padding-left: calc((var(--agk-sidebar-icon) - 1.5rem) / 2);
    padding-right: calc((var(--agk-sidebar-icon) - 1.5rem) / 2);
    justify-content: center;
  }

  /* Section labels hidden when collapsed */
  .agk-sidebar.is-collapsed .agk-submenu-section-label {
    display: none;
  }

  /* Adjust main content margin when sidebar is collapsed */
  .agk-sidebar.is-collapsed ~ .agk-main {
    margin-left: var(--agk-sidebar-icon);
  }

  /* No mobile overlay on desktop */
  .sidebar-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   DETAIL PANEL — only ultrawide / large TV displays
   Replaces the incorrect @media (min-width: 1400px) rule.

   Shows on:
     - Ultrawide monitors: aspect ratio >= 21:9 AND width >= 1920px
     - 4K / large TVs: width >= 3440px (covers 4K and above regardless of ratio)
   Hides on everything else (laptops, standard 16:9/16:10 up to 29")
   ========================================================================== */

/* Detail pane: always hidden until user clicks "View Details" */
.detail-pane {
  display: none;
}

/* Only allow panel to open on ultrawide / large TV screens */
@media (min-width: 1920px) and (min-aspect-ratio: 21/9),
       (min-width: 3440px) {
  .detail-pane.is-open {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
}