/* Mini Sidebar Layout - Topbar responsive behavior */

/* ============================================
   LARGE DEVICES (xl and above: >= 1300px)
   Show mini sidebar with icons
   ============================================ */
@media (min-width: 1300px) {
  /* When sidebar is in FULL mode (expanded) - topbar and page-wrapper adjust */
  [data-sidebartype="full"] .side-mini-panel ~ .page-wrapper .topbar {
    width: calc(100% - 320px);
    margin-left: 0;
    transition: width 0.2s ease-in;
  }

  [data-sidebartype="full"] .side-mini-panel ~ .page-wrapper {
    margin-left: 320px;
    transition: margin-left 0.2s ease-in;
  }

  /* When sidebar is in MINI mode (collapsed) - topbar and page-wrapper adjust */
  [data-sidebartype="mini-sidebar"] .side-mini-panel ~ .page-wrapper .topbar {
    width: calc(100% - 80px);
    margin-left: 0;
    transition: width 0.2s ease-in;
  }

  [data-sidebartype="mini-sidebar"] .side-mini-panel ~ .page-wrapper {
    margin-left: 80px;
    transition: margin-left 0.2s ease-in;
  }
}

/* ============================================
   SMALL/MEDIUM DEVICES (< 1300px)
   Hide sidebar completely, show hamburger in topbar
   ============================================ */
@media (max-width: 1299px) {
  /* Hide the entire mini sidebar on small devices */
  .side-mini-panel {
    left: -320px !important;
    transition: left 0.3s ease-in-out;
  }

  /* Show sidebar when show-sidebar class is added */
  #main-wrapper.show-sidebar .side-mini-panel {
    left: 0 !important;
  }

  /* Topbar takes full width on small devices */
  .page-wrapper .topbar {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Page wrapper has no left margin on small devices */
  .page-wrapper {
    margin-left: 0 !important;
  }

  /* Ensure hamburger icon in topbar is visible on mobile */
  .topbar .sidebartoggler {
    display: flex !important;
  }
}

/* Smooth transitions for all layout changes */
.page-wrapper,
.topbar {
  transition: all 0.2s ease-in;
}