/* sidebar.css - Modern collapsible sidebar (inspired by reference video)
   - Supports: collapsed mode, nested submenu, mobile off-canvas
*/

:root{
  /* Slimmer, more premium proportions */
  /* Narrower sidebar widths to reduce unused space and mirror the
   * proportions from the reference UI.  The collapsed width is large
   * enough to display only icons comfortably. */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 72px;

  /*
   * Lightened pastel palette for the sidebar.  Instead of using a nearly
   * black background, the new scheme adopts a soft blue gradient so the
   * navigation area feels brighter and more energetic.  Text colours
   * switch from white to the same dark tone used in the main content for
   * better contrast, and muted text follows the muted colour defined in
   * the global stylesheet.  Lines and hover states use subtle tints of
   * the primary colour for a cohesive look.  Active items use a very
   * gentle gradient derived from the primary blue to maintain focus
   * without overwhelming the light theme.
   */
  /*
   * Switch the sidebar to a rich dark theme inspired by the video reference.
   * A deep navy gradient anchors the navigation while text and icons are
   * rendered in soft off‑white tones for contrast.  Muted text uses a
   * desaturated slate, and subtle purple highlights cue hover and active
   * states.  Active items use a gentle indigo gradient derived from the
   * primary colours in global.css.
   */
  /* Lighten the sidebar base colours further by a couple of shades.  These
     updated values retain the dark blue character of the previous theme but
     introduce more lightness so the sidebar feels less heavy.  The top
     gradient now starts with a mid‑tone navy and transitions to a slightly
     brighter royal blue, creating a subtle depth without overwhelming
     contrast. */
  /* ------------------------------------------------------------------
   * Sidebar palette customised to match the new brand colours.
   *
   * The navigation pane adopts a deep navy gradient derived from the
   * primary logo colour.  Off‑white text ensures legibility on the
   * dark background, while muted labels take on a soft blue-grey.  Hover
   * and active states reuse the primary RGB tuple defined in global.css
   * so that interactions tie back to the brand identity.  A semi‑
   * transparent border highlights the currently active item.
   */
  --sidebar-bg-1: #072b6c; /* top of gradient: darkest shade */
  --sidebar-bg-2: #0a3f8f; /* bottom of gradient: slightly lighter */
  --sidebar-text: #f5f9ff;
  --sidebar-muted: #a1b4d3;
  --sidebar-line: rgba(255,255,255,0.07);
  --sidebar-hover: rgba(var(--primary-rgb),0.18);
  --sidebar-active: linear-gradient(90deg, rgba(var(--primary-rgb),0.65), rgba(78,115,203,0.65));
  --sidebar-active-border: rgba(var(--primary-rgb),0.8);
}

/* Push main content when sidebar is present (desktop) */
body.app.with-sidebar{
  padding-left: var(--sidebar-w);
  transition: padding-left var(--transition) ease;
}
body.app.with-sidebar.sidebar-collapsed{
  padding-left: var(--sidebar-collapsed-w);
}

@media (max-width: 1024px){
  body.app.with-sidebar,
  body.app.with-sidebar.sidebar-collapsed{
    padding-left: 0;
  }
}

.sidebar{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  /* Reduce overall gaps and padding for a more compact yet orderly layout.  A
     slimmer gutter and tighter vertical spacing yield a refined and tidy
     navigation column without making it feel cramped. */
  /* Use spacing tokens for spacing within the sidebar */
  gap: var(--space-2);
  padding: var(--space-3) calc(var(--space-2) + 2px) var(--space-2);
  color: var(--sidebar-text);
  background: linear-gradient(180deg, var(--sidebar-bg-1), var(--sidebar-bg-2));
  border-right: 1px solid var(--sidebar-line);
  z-index: 40;
  transition: width var(--transition) ease, transform var(--transition) ease;
}

/* Collapsed */
.sidebar.collapsed{ width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .label,
.sidebar.collapsed .section-title,
.sidebar.collapsed .nav-caret,
.sidebar.collapsed .sidebar-user .meta,
.sidebar.collapsed .sidebar-footer .footer-label{
  display: none !important;
}
.sidebar.collapsed .brand{ justify-content: center; padding: var(--space-2) var(--space-2) var(--space-3); }
.sidebar.collapsed .sidebar-nav{ padding: calc(var(--space-1)) var(--space-2); }
.sidebar.collapsed .sidebar-item{ justify-content: center; padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); }
.sidebar.collapsed .sidebar-item .icon{ flex: 0 0 26px; }

/* Tooltip label (collapsed desktop) */
@media (hover:hover){
  .sidebar.collapsed .sidebar-item[data-tooltip]{ position: relative; }
  .sidebar.collapsed .sidebar-item[data-tooltip]::after{
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15,23,42,.92);
    color: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.12);
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
    transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
  }
  .sidebar.collapsed .sidebar-item[data-tooltip]:hover::after{
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
  }
}

/* Mobile off-canvas */
@media (max-width: 1024px){
  .sidebar{
    width: min(86vw, 360px);
    transform: translateX(-100%);
  }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  .sidebar-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition) ease;
    z-index: 35;
  }
  body.sidebar-open .sidebar-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Brand header */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 10px;
}
.brand .brand-logo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.brand .brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  border-radius: 12px;
}
.brand .brand-logo svg{ width: 22px; height: 22px; stroke: rgba(255,255,255,.86); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand .brand-name{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand .brand-name strong{
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .brand-name small{
  color: var(--sidebar-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation */
.sidebar-nav{
  display: flex;
  flex-direction: column;
  /* Narrower gaps and padding produce tighter grouping of items without
     sacrificing readability.  Use smaller vertical spacing and horizontal
     padding to fit more items elegantly. */
  gap: var(--space-2);
  /* Provide slight horizontal padding to align items with overall spacing scale */
  padding: calc(var(--space-1)/2) var(--space-1);
  overflow: auto;
}

/* Section title (MAIN, TEAM MENU, etc.) */
.section-title{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  margin: var(--space-1) var(--space-2) calc(var(--space-1)/2);
}

.sidebar-item{
  width: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
  color: var(--sidebar-text);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.sidebar-item .icon{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.80);
  flex: 0 0 26px;
  /* Icons sit on a slightly lighter dark surface to distinguish them from the
     surrounding panel.  The border adds subtle definition without
     distracting from the overall dark theme. */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.sidebar-item .icon img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.sidebar-item .icon svg{
  width: 20px;
  height: 20px;
  /* Use currentColor so icons adopt the text colour defined for the
     sidebar (off‑white). */
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-item .label{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 13px;
}

.sidebar-item .nav-caret{
  color: var(--sidebar-muted);
  transition: transform var(--transition-fast) ease;
}

.sidebar-item:hover{
  background: var(--sidebar-hover);
  border-color: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.sidebar-item:hover .icon{
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
}
.sidebar-item:active{ transform: translateY(0); }

.sidebar-item.active{
  background: var(--sidebar-active);
  border-color: var(--sidebar-active-border);
  /* Use the brand primary colour for the active shadow. */
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .22);
}

/* Distinct active highlight when in collapsed mode.  Use a small colored dot
   adjacent to the icon rather than a full pill, matching the slim icon rail in
   the reference.  Preserve the existing background effect but adjust the
   shadow for more presence. */
.sidebar.collapsed .sidebar-item.active{
  background: var(--sidebar-active);
  border-color: var(--sidebar-active-border);
  box-shadow: 0 12px 30px rgba(var(--primary-rgb), .26);
  position: relative;
}
.sidebar.collapsed .sidebar-item.active::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary-2);
}
.sidebar-item.active .icon{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}
.sidebar-item.active .nav-caret,
.sidebar-item.active .icon{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.20);
}

/* Group + submenu */
.sidebar-group{ display: flex; flex-direction: column; gap: 6px; }
.sidebar-group.open > .sidebar-item .nav-caret{ transform: rotate(90deg); }

.submenu{
  /* Decrease indentation and spacing for submenus for a tidier look */
  margin-left: 18px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 4px;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height var(--transition) ease, opacity var(--transition) ease, transform var(--transition) ease;
}

.sidebar-group.open > .submenu{
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
}

.submenu a{
  text-decoration: none;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  /* Reduce padding and gap for compact submenu items */
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.submenu a::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}

/* Small connector line to mimic nested-menu rails (reference style) */
.submenu a::after{
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(255,255,255,.14);
  transform: translateY(-50%);
}

@media (hover:hover){
  .sidebar.collapsed .submenu a::after{ display: none; }
}

/* Flyout submenu when sidebar is collapsed (desktop hover like reference) */
@media (hover:hover){
  .sidebar.collapsed .sidebar-group{ position: relative; }
  .sidebar.collapsed .sidebar-group .submenu{
    position: absolute;
    left: calc(100% + 10px);
    top: 2px;
    width: 240px;
    margin-left: 0;
    padding: 10px;
    border-left: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(11,18,32,.98));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 48px rgba(0,0,0,.38);
    max-height: none;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }
  .sidebar.collapsed .sidebar-group:hover > .submenu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .sidebar.collapsed .sidebar-group:hover > .sidebar-item::after{
    /* Don't show tooltip when flyout is visible (avoid double popups) */
    opacity: 0;
  }
}

.submenu a:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.submenu a.active{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.96);
}

/* Footer user card */
.sidebar-footer{
  margin-top: auto;
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Hide the dedicated collapse button.  Users can now toggle collapsed
   mode by clicking the sidebar brand area or using the top hamburger
   button.  The footer collapse control no longer appears. */
#sidebarCollapse{ display:none !important; }

.sidebar-user{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.sidebar-user .avatar{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  flex: 0 0 40px;
}

.sidebar-user .avatar svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-user .meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-user #currentUser{
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user #currentRole{
  font-size: 12px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer .footer-actions{
  display: grid;
  gap: 8px;
}

.sidebar-footer .footer-btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
  text-decoration: none;
}
.sidebar-footer .footer-btn:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.sidebar-footer .footer-btn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-footer .footer-btn.danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.22);
  color: rgba(255,255,255,.86);
}