/* ===== SCOPED ONLY TO THIS SIDEBAR ===== */
.app-sidebar{
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --bg: #ffffff;
  --icon: #989fa8;
  --text: #4b5563;
  --pill: #34a853;
  --pill-text: #ffffff;
  --hover: rgba(0,0,0,.06);
  --radius: 14px;
  --easing: cubic-bezier(.2,.6,.2,1);
  --dur: .28s;
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid rgba(0,0,0,.06);
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition:
    width var(--dur) var(--easing),
    box-shadow var(--dur) var(--easing),
    transform var(--dur) var(--easing);
  z-index: 1000;
      margin-top: 100px;
}
/* Toggle button */
.app-sidebar .sidebar-toggle{
  align-self: flex-end; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.app-sidebar .sidebar-toggle:hover{ background: var(--hover); }

/* Menu container */
.app-sidebar .sidebar-menu{
  display: flex; flex-direction: column; gap: 15px; margin-top: 4px;
}

/* Menu items */
.app-sidebar .menu-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0px 10px 10px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  transition:
    background var(--dur) var(--easing),
    color var(--dur) var(--easing),
    transform var(--dur) var(--easing);
  border: 0;
  background: none;
  width: 100%; text-align: left;
}
.app-sidebar .menu-item i{
  font-size: 18px; 
  text-align: center;
  color: var(--icon);
  transition: color var(--dur), transform var(--dur);
}
.app-sidebar .menu-item .label{
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--dur), transform var(--dur), max-width var(--dur);
  opacity: 1; transform: translateX(0); max-width: 100%;
  line-height: normal;
}
.app-sidebar .menu-item:hover{ background: var(--hover); transform: translateX(2px); }
.app-sidebar .menu-item:hover i{ transform: translateX(2px); }

/* Active item */
.app-sidebar .menu-item.is-active{
  background: var(--pill);
  color: var(--pill-text);
  box-shadow: 0 6px 20px rgba(52,168,83,.25);
}
.app-sidebar .menu-item.is-active i{ color: var(--pill-text); }

/* Submenu group */
.app-sidebar .menu-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Parent with caret */
.app-sidebar .menu-parent{
  display:flex;                /* ⬅ add this */
  align-items:center;          /* ⬅ add this */
  justify-content:space-between;
  gap:10px;
}
.app-sidebar .menu-parent .submenu-toggle{
  background: transparent;
  border: 0;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-sidebar .menu-parent .submenu-toggle .caret{
  margin-left: 0; /* caret already aligned at the end */
}

.app-sidebar .menu-parent .caret{
  margin-left:auto;
  transition:transform var(--dur) var(--easing);
  opacity:.9;
}

/* Submenu container */
.app-sidebar .submenu{
  overflow:hidden;
  max-height:0;
  opacity:0;
  padding-left:40px;
  transform-origin:top;
  transition:
    max-height var(--dur) var(--easing),
    opacity var(--dur) var(--easing);
}

/* Submenu items */
.app-sidebar .submenu-item{
  display:block;
  padding:8px 10px;
  border-radius:calc(var(--radius) - 4px);
  color:var(--text);
  text-decoration:none;
  transition:background var(--dur) var(--easing), color var(--dur) var(--easing);
}
.app-sidebar .submenu-item:hover{
  background:var(--hover);
}
.app-sidebar .submenu-item.is-active{
  background:rgba(52,168,83,.15); /* light pill tint */
  color:#2d7f3d;
}

/* Open state (matches .menu-item.is-active colors) */
.app-sidebar .menu-group[data-open="true"] .submenu{
  opacity:1;
  max-height:300px; /* enough for your 2 items; increase if needed */
}
.app-sidebar .menu-group[data-open="true"] .menu-parent{
  background:var(--pill);
  color:var(--pill-text);
  box-shadow:0 6px 20px rgba(52,168,83,.25);
}
.app-sidebar .menu-group[data-open="true"] .menu-parent i{
  color:var(--pill-text);
}
.app-sidebar .menu-group[data-open="true"] .menu-parent .caret{
  transform:rotate(180deg);
}


/* Collapsed state */
.app-sidebar[data-state="collapsed"]{
  width: var(--sidebar-w-collapsed);
}
.app-sidebar[data-state="collapsed"] .sidebar-toggle{ align-self: center; }
.app-sidebar[data-state="collapsed"] .menu-item{ justify-content: center; }
.app-sidebar[data-state="collapsed"] .menu-item .label{
  opacity: 0; transform: translateX(-6px);
  max-width: 0; pointer-events: none;
}

/* Tooltip */
.app-sidebar[data-state="collapsed"] .menu-item:hover::after{
  content: attr(aria-label);
  position: absolute; left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: #111; color:#fff;
  font-size: 12px; padding:6px 8px;
  border-radius: 8px; white-space: nowrap;
  opacity: 1; pointer-events: none;
}
.app-sidebar .menu-item::after{ opacity: 0; transition: opacity var(--dur); }

 

/* Sidebar layout wrapper */
.sidebar-wrapper{ display: flex; width: 100%; }
.sidebar-wrapper .sidebar-content{
  flex: 1;
  padding: 40px;
  background: #f9fafb;
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  transition: margin-left 0.3s ease;
}
@media(max-width:768px){
  .sidebar-wrapper .sidebar-content{
    margin-left: var(--sidebar-w-collapsed);
  }
}

/* Message box */
/* .sidebar-message{ display:flex; align-items:center; justify-content:center; min-height:80vh; text-align:center; }*/
.sidebar-message .construction{
  background:#fff; padding:40px 60px; border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  animation: fadeIn .3s ease;
}
.sidebar-message .construction i{
  font-size:36px; color:#fbbc05; margin-bottom:10px;
}
.sidebar-message .construction h2{ margin:10px 0 6px; font-size:20px; color:#2f313f; }
.sidebar-message .construction p{ font-size:15px; color:#6b7280; }

/* Live sidebar width (set from JS). Fallback = collapsed */
:root{
  --current-sidebar-w: var(--sidebar-w-collapsed, 72px);
}

/* Apply offset to content (and directly to .sidebar-message if you want) */
.sidebar-wrapper .sidebar-content,
.sidebar-message{
  /*margin-left: var(--current-sidebar-w);*/
  transition: margin-left var(--dur, .28s) var(--easing, cubic-bezier(.2,.6,.2,1));
}

/* Mobile: force collapsed look */
 
.sidebar-wrapper .sidebar-content{ margin-left: var(--current-sidebar-w); }


@keyframes fadeIn{
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
} 
 

/* Submenu items */
.app-sidebar .submenu-item{
  display:block;
  padding:8px 10px;
  border-radius:calc(var(--radius) - 4px);
  color:var(--text);
  text-decoration:none;
  transition:background var(--dur) var(--easing), color var(--dur) var(--easing);
}
.app-sidebar .submenu-item:hover{
  background:var(--hover);
}
.app-sidebar .submenu-item.is-active{
  background:rgba(52,168,83,.15);
  color:#2d7f3d;
}


/* Prevent body from scrolling when drawer is open */
body.sidebar-open{
  overflow: hidden;
}

@media (max-width: 768px){
  .app-sidebar .menu-item i{
        text-align: justify !important;
  }
}

[data-state="collapsed"] .submenu {
    opacity: 0;
  }
/*  [data-state="collapsed"] button.submenu-toggle{ 
        display: none !important;
            width: 0;
  }*/

/* Base layout for parent row */
.app-sidebar .menu-parent {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
}

/* Inner link inside parent - no extra padding */
.app-sidebar .menu-parent > a.menu-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Mobile / collapsed: stack icon + arrow so they fit in the pill */
.app-sidebar[data-state="collapsed"]  .menu-parent {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 8px;
}

/* Center icon only, hide label in collapsed mode */
.app-sidebar[data-state="collapsed"]  .menu-parent > a.menu-item {
  flex: 0;
  justify-content: center;
}

.app-sidebar[data-state="collapsed"]  .menu-parent > a.menu-item .label {
  display: none;
}

/* Arrow below icon, still inside the pill */
.app-sidebar[data-state="collapsed"]  .menu-parent .submenu-toggle {
  border: none;
  background: transparent;
  padding: 0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-sidebar[data-state="collapsed"]  .menu-parent .submenu-toggle .caret {
  font-size: 0.75rem;
}

/* ------------------------- header menu ------------- */
/* Hide all normal menu items on mobile */
@media (max-width: 768px) {
    #navbarSupportedContent .navbar-nav > li:not(.show-only-on-mobile) {
        display: none !important;
    }

    /* Ensure dropdown menu is visible on toggle */
    #navbarSupportedContent .dropdown-menu {
        display: block !important;
        position: static;
        float: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding-left: 0;
    }

    #navbarSupportedContent .dropdown-menu .dropdown-item {
        padding-left: 0;
    }
}
/* Only affect the mobile navbar menu */
@media (max-width: 768px) {

  /* Container spacing inside the collapsed navbar */
  .mobile-only-menu {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  /* Card-style menu */
  .mobile-nav-list {
    margin: 0;
    padding: 0.35rem 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
  }

  .mobile-nav-list li {
    margin: 0;
  }

  /* Divider between sections */
  .mobile-nav-list .mobile-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.25rem 0;
  }

  /* Links – minimalist, full-width tap targets */
  .mobile-nav-list .dropdown-item {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    color: #111827;
    display: block;
    border-radius: 0; /* all shaping handled by the card */
  }

  .mobile-nav-list .dropdown-item:hover,
  .mobile-nav-list .dropdown-item:focus {
    background: #f3f4f6;
    color: #111827;
  }

  .mobile-nav-list .dropdown-item.text-danger {
    color: #b91c1c;
  }

  .mobile-nav-list .dropdown-item.text-danger:hover {
    background: #fef2f2;
  }

  /* Smooth fade + slight slide when navbar opens */
  #navbar .mobile-only-menu {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  }

  #navbar.show .mobile-only-menu {
    opacity: 1;
    transform: translateY(0);
  }
}