/* ========================================
   ADMIN CLEAN UI — Stripe-Inspired Theme
   admin-style.css
   ======================================== */

/* ---------- CSS Variables ---------- */
:root {
  --sidebar-bg: #ffffff;
  --sidebar-border: #e6e8eb;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 0px;
  --brand-bg: #f7f8fa;
  --brand-color: #3c4257;
  --nav-color: #4f566b;
  --nav-color-hover: #1a1f36;
  --nav-bg-hover: #f7f8fa;
  --nav-active-bg: #eef0fb;
  --nav-active-color: #635bff;
  --nav-icon-color: #8792a2;
  --nav-font: 0.8125rem;
  --nav-font-sm: 0.75rem;
  --accent: #635bff;
  --accent-hover: #5147e5;
  --topbar-bg: #ffffff;
  --topbar-shadow: 0 1px 3px rgba(0,0,0,.06);
  --radius: 6px;
  --transition: 150ms ease;
  --treeview-border: #e6e8eb;
  --treeview-bg: #fafbfc;
  --section-label: #8792a2;
}

/* ========================================
   TOPBAR
   ======================================== */
.main-header.navbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  box-shadow: var(--topbar-shadow) !important;
  padding: 0 0.875rem !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

.navbar-brand-text {
  color: var(--brand-color) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

.navbar-brand-text:hover {
  color: var(--accent) !important;
}

/* Pushmenu toggle */
.navbar-nav .nav-link[data-widget="pushmenu"] {
  color: var(--nav-icon-color) !important;
  font-size: 1rem !important;
  padding: 0.375rem 0.5rem !important;
  border-radius: var(--radius) !important;
  transition: all var(--transition) !important;
}

.navbar-nav .nav-link[data-widget="pushmenu"]:hover {
  color: var(--nav-color-hover) !important;
  background: var(--nav-bg-hover) !important;
}

/* Fullscreen button */
.fullscreen-btn {
  background: transparent !important;
  color: var(--nav-icon-color) !important;
  border-radius: var(--radius) !important;
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--sidebar-border) !important;
  transition: all var(--transition) !important;
  margin-right: 0.5rem !important;
  font-size: 0.8rem !important;
}

.fullscreen-btn:hover {
  background: var(--nav-bg-hover) !important;
  color: var(--nav-color-hover) !important;
  border-color: #d1d5db !important;
}

/* User dropdown */
.user-dropdown {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border: none !important;
  transition: all var(--transition) !important;
}

.user-dropdown:hover {
  background: var(--accent-hover) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 1px 4px rgba(99,91,255,.25) !important;
}

/* Top-bar dropdown menu */
.navbar .dropdown-menu {
  border-radius: var(--radius) !important;
  border: 1px solid var(--sidebar-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  padding: 0.25rem 0 !important;
  margin-top: 0.375rem !important;
  min-width: 180px !important;
}

.navbar .dropdown-item {
  padding: 0.5rem 0.875rem !important;
  font-size: 0.8125rem !important;
  color: var(--nav-color) !important;
  transition: all var(--transition) !important;
  border-radius: 0 !important;
}

.navbar .dropdown-item:hover {
  background: var(--nav-bg-hover) !important;
  color: var(--nav-color-hover) !important;
}

.navbar .dropdown-divider {
  margin: 0.25rem 0 !important;
  border-color: var(--sidebar-border) !important;
}

/* Navbar alignment */
.navbar-nav {
  align-items: center !important;
}

.navbar-nav.ml-auto {
  gap: 0.375rem !important;
}

/* ========================================
   SIDEBAR — Stripe Clean Style
   ======================================== */
.main-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: none !important;
  width: var(--sidebar-width) !important;
  min-height: 100vh !important;
  transition: width var(--transition), margin-left var(--transition) !important;
  overflow: hidden !important;
}

/* Brand / Role header */
.brand-link {
  background: var(--brand-bg) !important;
  color: var(--brand-color) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  padding: 0.625rem 1rem !important;
  text-align: left !important;
  box-shadow: none !important;
  min-height: 50px !important;
  max-height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

.brand-link .brand-role-text {
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04rem !important;
  text-transform: uppercase !important;
  color: var(--section-label) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sidebar scrollable area */
.sidebar {
  padding: 0.5rem 0.625rem !important;
  height: calc(100vh - 50px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Nav items */
.nav-sidebar .nav-item {
  margin-bottom: 1px !important;
}

.nav-sidebar .nav-item > .nav-link {
  color: var(--nav-color) !important;
  border-radius: var(--radius) !important;
  padding: 0.4375rem 0.75rem !important;
  font-weight: 500 !important;
  font-size: var(--nav-font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 1px solid transparent !important;
  transition: all var(--transition) !important;
  line-height: 1.4 !important;
}

.nav-sidebar .nav-item > .nav-link:hover {
  background: var(--nav-bg-hover) !important;
  color: var(--nav-color-hover) !important;
  border-color: transparent !important;
}

.nav-sidebar .nav-item > .nav-link.active {
  background: var(--nav-active-bg) !important;
  color: var(--nav-active-color) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Dashboard link — subtle accent */
.nav-sidebar .nav-item > .nav-link.nav-home {
  background: var(--nav-active-bg) !important;
  color: var(--nav-active-color) !important;
  font-weight: 600 !important;
}

.nav-sidebar .nav-item > .nav-link.nav-home:hover {
  background: #e4e2fd !important;
  color: var(--accent) !important;
}

/* Icons */
.nav-sidebar .nav-link .nav-icon {
  margin-right: 0.5rem !important;
  font-size: 0.75rem !important;
  width: 1rem !important;
  text-align: center !important;
  color: var(--nav-icon-color) !important;
  transition: color var(--transition) !important;
}

.nav-sidebar .nav-link.active .nav-icon {
  color: var(--nav-active-color) !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
  color: var(--nav-color-hover) !important;
}

/* Sub-menu / Treeview */
.nav-treeview {
  background: var(--treeview-bg) !important;
  border-radius: var(--radius) !important;
  margin: 2px 0 4px 0 !important;
  padding: 0.25rem 0 !important;
  border-left: 2px solid var(--accent) !important;
  box-shadow: none !important;
}

.nav-treeview .nav-link {
  padding: 0.3125rem 0.75rem 0.3125rem 1.75rem !important;
  font-size: var(--nav-font-sm) !important;
  color: var(--nav-color) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  border: none !important;
  font-weight: 400 !important;
}

.nav-treeview .nav-link:hover {
  background: #eef0f3 !important;
  color: var(--nav-color-hover) !important;
}

.nav-treeview .nav-link.active {
  background: var(--nav-active-bg) !important;
  color: var(--nav-active-color) !important;
  font-weight: 600 !important;
}

/* Menu open parent */
.nav-sidebar .menu-open > .nav-link {
  background: var(--nav-bg-hover) !important;
  color: var(--nav-active-color) !important;
  border-color: transparent !important;
}

/* Chevron */
.nav-sidebar .right {
  transition: transform var(--transition) !important;
  font-size: 0.625rem !important;
  color: var(--nav-icon-color) !important;
}

.nav-sidebar .menu-open > .nav-link > p > .right,
.nav-sidebar .menu-open > .nav-link > .right {
  transform: rotate(-90deg) !important;
}

/* Sidebar text */
.nav-sidebar p {
  margin: 0 !important;
  line-height: 1.35 !important;
  font-weight: inherit !important;
  font-size: inherit !important;
}

/* Scrollbar — ultra thin */
.sidebar::-webkit-scrollbar {
  width: 3px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* ========================================
   CONTENT WRAPPER
   ======================================== */
.content-wrapper {
  background: #f6f8fa !important;
}

/* ========================================
   MAIN FOOTER
   ======================================== */
.main-footer {
  background: var(--topbar-bg) !important;
  border-top: 1px solid var(--sidebar-border) !important;
  font-size: 0.75rem !important;
  color: var(--nav-icon-color) !important;
  padding: 0.625rem 1rem !important;
}

/* ========================================
   COLLAPSED SIDEBAR OVERRIDES
   Fully hide sidebar when collapsed
   (override AdminLTE sidebar-mini behaviour)
   ======================================== */

/* ── Desktop (≥992px) ── */
.sidebar-collapse .main-sidebar,
.sidebar-collapse .main-sidebar.elevation-4,
.sidebar-collapse .main-sidebar .brand-link,
.sidebar-collapse .main-sidebar .sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar.elevation-4,
.sidebar-mini.sidebar-collapse .main-sidebar .brand-link,
.sidebar-mini.sidebar-collapse .main-sidebar .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  left: -1px !important;
}

/* Kill the hover fly-out that sidebar-mini creates */
.sidebar-collapse .main-sidebar:hover,
.sidebar-collapse .main-sidebar:hover .brand-link,
.sidebar-collapse .main-sidebar:hover .sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar:hover,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  box-shadow: none !important;
}

/* Push content, header & footer flush left */
.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-header,
.sidebar-collapse .main-footer,
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-header,
.sidebar-mini.sidebar-collapse .main-footer {
  margin-left: 0 !important;
}

/* ── Mobile / Tablet (≤991px) ── */
@media (max-width: 991.98px) {
  /* When open on mobile, slide in at full width */
  .main-sidebar {
    width: var(--sidebar-width) !important;
    transform: translateX(-100%) !important;
    transition: transform var(--transition) !important;
    position: fixed !important;
    z-index: 1038 !important;
    visibility: visible !important;
  }

  /* AdminLTE adds sidebar-open on mobile to reveal it */
  .sidebar-open .main-sidebar {
    transform: translateX(0) !important;
    visibility: visible !important;
    width: var(--sidebar-width) !important;
  }

  .sidebar-open .main-sidebar .brand-link,
  .sidebar-open .main-sidebar .sidebar {
    width: var(--sidebar-width) !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* Collapsed on mobile = slide off-screen */
  .sidebar-collapse .main-sidebar {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
  }

  /* Content always flush on mobile */
  .content-wrapper,
  .main-header,
  .main-footer {
    margin-left: 0 !important;
  }
}

/* ── Flash-prevention helper (set on <html> before body renders) ── */
.sidebar-restore-collapsed .main-sidebar,
.sidebar-restore-collapsed .main-sidebar.elevation-4,
.sidebar-restore-collapsed .sidebar-mini .main-sidebar,
.sidebar-restore-collapsed .sidebar-mini .main-sidebar.elevation-4 {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  border: none !important;
  box-shadow: none !important;
  left: -1px !important;
}
.sidebar-restore-collapsed .content-wrapper,
.sidebar-restore-collapsed .main-header,
.sidebar-restore-collapsed .main-footer,
.sidebar-restore-collapsed .sidebar-mini .content-wrapper,
.sidebar-restore-collapsed .sidebar-mini .main-header,
.sidebar-restore-collapsed .sidebar-mini .main-footer {
  margin-left: 0 !important;
}

@media (max-width: 576px) {
  :root {
    --nav-font: 0.75rem;
    --nav-font-sm: 0.6875rem;
  }

  .main-header.navbar {
    padding: 0 0.5rem !important;
  }

  .brand-link {
    padding: 0.5rem 0.75rem !important;
  }

  .brand-link .brand-role-text {
    font-size: 0.6875rem !important;
  }

  .sidebar {
    padding: 0.375rem 0.5rem !important;
  }

  .nav-sidebar .nav-item > .nav-link {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
  }

  .user-dropdown {
    padding: 0.3125rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .mobile-responsive {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 400px) {
  .mobile-responsive {
    font-size: 0.6875rem !important;
  }

  .navbar-brand-text {
    font-size: 0.8125rem !important;
  }

  .user-dropdown {
    font-size: 0.6875rem !important;
    padding: 0.25rem 0.4375rem !important;
  }
}

/* ========================================
   PERSIST STATES — helper classes
   ======================================== */
/* Fullscreen icon swap — handled by AdminLTE + JS */
body.fullscreen-active .fullscreen-btn .fas {
  font-size: inherit;
}