/* ── Farzad UI Sidebar — Matches app.farzad.ai design ───────────────── */
/* All selectors use #main-wrapper[data-*] specificity to beat style.min.css */

:root {
  --fz-accent: #6366f1;
  --fz-surface: #ffffff;
  --fz-surface-hover: #f8fafc;
  --fz-bg: #f1f5f9;
  --fz-text-primary: #0f172a;
  --fz-text-secondary: #64748b;
  --fz-text-muted: #94a3b8;
  --fz-border: #e2e8f0;
}

/* ── Page background ─────────────────────────────────────────────── */
body {
  background: var(--fz-bg) !important;
}

/* ── Left Sidebar Container ──────────────────────────────────────── */
/* Beat: #main-wrapper[data-layout=vertical][data-sidebar-position=fixed] .left-sidebar */
#main-wrapper .left-sidebar,
#main-wrapper[data-layout="vertical"] .left-sidebar,
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .left-sidebar,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .left-sidebar,
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .left-sidebar {
  position: fixed !important;
  left: 12px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 240px !important;
  height: auto !important;
  background: var(--fz-surface) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  z-index: 50 !important;
  border: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: none !important;
  padding-top: 0 !important;
}

/* Kill skin background colors */
#main-wrapper .left-sidebar[data-sidebarbg="skin1"],
#main-wrapper .left-sidebar[data-sidebarbg="skin2"],
#main-wrapper .left-sidebar[data-sidebarbg="skin3"],
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin1"],
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"],
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"],
#main-wrapper[data-layout="horizontal"] .left-sidebar[data-sidebarbg="skin1"],
#main-wrapper[data-layout="horizontal"] .left-sidebar[data-sidebarbg="skin2"],
#main-wrapper[data-layout="horizontal"] .left-sidebar[data-sidebarbg="skin3"] {
  background: var(--fz-surface) !important;
}

/* Kill mini-sidebar hover width */
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .left-sidebar:hover {
  width: 240px !important;
}

/* ── Logo Area ───────────────────────────────────────────────────── */
.left-sidebar .fz-logo {
  padding: 28px 24px 24px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.left-sidebar .fz-logo img {
  height: 32px;
  width: auto;
}

/* ── Scrollable Nav ──────────────────────────────────────────────── */
#main-wrapper .left-sidebar .scroll-sidebar {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 16px !important;
  height: auto !important;
}

/* Thin scrollbar */
.scroll-sidebar::-webkit-scrollbar {
  width: 4px;
}
.scroll-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-sidebar::-webkit-scrollbar-thumb {
  background: var(--fz-border);
  border-radius: 4px;
}

/* ── Sidebar Nav Reset ───────────────────────────────────────────── */
/* Beat: #main-wrapper[data-layout=vertical][data-sidebartype=full] .left-sidebar .sidebar-nav */
#main-wrapper .left-sidebar .sidebar-nav,
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .left-sidebar .sidebar-nav,
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebarnav {
  padding: 0 !important;
}

#sidebarnav > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Nav Dividers ────────────────────────────────────────────────── */
#sidebarnav > li.fz-divider {
  padding: 8px 0 !important;
}

#sidebarnav > li.fz-divider > div {
  border-top: 1px solid var(--fz-border);
}

/* ── Open App Button ─────────────────────────────────────────────── */
#sidebarnav > li.fz-open-app {
  margin-bottom: 8px !important;
  padding: 0 !important;
}

#sidebarnav > li.fz-open-app > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: var(--fz-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  transition: opacity 0.15s !important;
  opacity: 1 !important;
}

#sidebarnav > li.fz-open-app > a:hover {
  opacity: 0.9 !important;
  color: #fff !important;
}

#sidebarnav > li.fz-open-app > a i,
#sidebarnav > li.fz-open-app > a svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: #fff !important;
}

/* ── Parent Nav Items ────────────────────────────────────────────── */
/* Beat: #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin2] .sidebar-nav ul .sidebar-item .sidebar-link */
#main-wrapper .sidebar-nav ul .sidebar-item,
#main-wrapper[data-layout="vertical"] .left-sidebar .sidebar-nav ul .sidebar-item {
  margin: 2px 0 !important;
}

#main-wrapper .sidebar-nav ul .sidebar-item > .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin1"] .sidebar-nav ul .sidebar-item .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fz-text-secondary) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
}

#main-wrapper .sidebar-nav ul .sidebar-item > .sidebar-link:hover,
#main-wrapper[data-layout="vertical"] .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link:hover,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item .sidebar-link.active,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item .sidebar-link.active {
  background: var(--fz-surface-hover) !important;
  color: var(--fz-text-primary) !important;
  opacity: 1 !important;
}

/* Active state — accent bg + white text (like app.farzad.ai) */
#main-wrapper .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
#main-wrapper .sidebar-nav ul .sidebar-item.active > .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item.selected,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item.selected {
  background: var(--fz-accent) !important;
  background-color: var(--fz-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.3) !important;
}

#main-wrapper .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
#main-wrapper .sidebar-nav ul .sidebar-item.selected > .sidebar-link svg,
#main-wrapper .sidebar-nav ul .sidebar-item.active > .sidebar-link i,
#main-wrapper .sidebar-nav ul .sidebar-item.active > .sidebar-link svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* Icons */
#main-wrapper .sidebar-nav ul .sidebar-item > .sidebar-link i,
#main-wrapper .sidebar-nav ul .sidebar-item > .sidebar-link svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* Hide the arrow — replace with chevron SVG */
#main-wrapper .sidebar-nav .has-arrow::after,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav .has-arrow::after,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav .has-arrow::after {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: auto !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.2s ease !important;
  position: static !important;
  float: none !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

#main-wrapper .sidebar-nav .has-arrow[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* ── Sub-menu (first-level) ──────────────────────────────────────── */
#main-wrapper .sidebar-nav ul .sidebar-item .first-level,
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .left-sidebar .sidebar-nav ul .sidebar-item .first-level {
  padding: 2px 0 4px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

#main-wrapper .sidebar-nav ul .sidebar-item .first-level .sidebar-item {
  margin: 1px 0 !important;
}

/* Beat the full specificity chain for sub-item links */
#main-wrapper .sidebar-nav ul .sidebar-item .first-level > .sidebar-item > .sidebar-link,
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .left-sidebar .sidebar-nav ul .sidebar-item .first-level > .sidebar-item > .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item .first-level .sidebar-link,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item .first-level .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px 8px 44px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--fz-text-secondary) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  opacity: 1 !important;
}

#main-wrapper .sidebar-nav ul .sidebar-item .first-level > .sidebar-item > .sidebar-link:hover,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin2"] .sidebar-nav ul .sidebar-item .first-level .sidebar-link:hover,
#main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg="skin3"] .sidebar-nav ul .sidebar-item .first-level .sidebar-link:hover {
  background: var(--fz-surface-hover) !important;
  color: var(--fz-text-primary) !important;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
#main-wrapper .topbar,
#main-wrapper[data-layout="vertical"] .topbar,
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .topbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 264px !important;
  z-index: 40 !important;
  background: var(--fz-bg) !important;
  padding: 0 !important;
  width: auto !important;
}

/* Kill all topbar skin backgrounds */
#main-wrapper .topbar[data-navbarbg],
#main-wrapper .topbar[data-navbarbg="skin1"],
#main-wrapper .topbar[data-navbarbg="skin2"],
#main-wrapper .topbar[data-navbarbg="skin3"],
#main-wrapper .topbar[data-navbarbg="skin6"] {
  background: var(--fz-bg) !important;
}

#main-wrapper .topbar .top-navbar,
#main-wrapper .topbar .top-navbar[data-navbarbg] {
  background: transparent !important;
  padding: 20px 24px 16px !important;
  min-height: auto !important;
  border-radius: 0 !important;
}

/* Kill topbar skin color overrides */
.topbar .navbar-collapse[data-navbarbg],
.topbar .navbar-collapse[data-navbarbg="skin6"],
.topbar .navbar-collapse[data-navbarbg="skin3"] {
  background: transparent !important;
}

/* Hide the original topbar brand/logo */
#main-wrapper .topbar .navbar-header,
.topbar .top-navbar .navbar-header,
.topbar .top-navbar .navbar-header[data-logobg],
.topbar .top-navbar .navbar-header[data-logobg="skin1"],
.topbar .top-navbar .navbar-header[data-logobg="skin2"],
.topbar .top-navbar .navbar-header[data-logobg="skin3"] {
  display: none !important;
}

/* Greeting text */
.topbar .navbar-nav.float-left .nav-item .text-white,
.topbar .navbar-nav.float-left .nav-item > div {
  color: var(--fz-text-primary) !important;
}

.topbar .navbar-nav.float-left .nav-item .font-weight-bold {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--fz-text-primary) !important;
  line-height: 1.3 !important;
}

.topbar .navbar-nav.float-left .nav-item .text-white-50,
.topbar .navbar-nav.float-left .nav-item small {
  color: var(--fz-text-muted) !important;
  font-size: 14px !important;
}

/* Right topbar controls — card container like app */
.topbar .navbar-nav.float-right {
  background: var(--fz-surface) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 0 !important;
}

.topbar .navbar-nav.float-right .nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

.topbar .navbar-nav.float-right .nav-link {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--fz-surface-hover) !important;
  color: var(--fz-text-muted) !important;
  padding: 0 !important;
  transition: all 0.15s !important;
}

.topbar .navbar-nav.float-right .nav-link:hover {
  color: var(--fz-text-primary) !important;
  background: var(--fz-border) !important;
}

.topbar .navbar-nav.float-right .nav-link i,
.topbar .navbar-nav.float-right .nav-link svg {
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.topbar .navbar-nav.float-right .btn-outline-light {
  border-radius: 20px !important;
  border-color: var(--fz-border) !important;
  color: var(--fz-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  background: transparent !important;
}

.topbar .navbar-nav.float-right .btn-outline-light:hover {
  background: var(--fz-surface-hover) !important;
  color: var(--fz-text-primary) !important;
  border-color: var(--fz-text-muted) !important;
}

/* ── Page Wrapper ────────────────────────────────────────────────── */
/* Beat: #main-wrapper[data-layout=vertical][data-sidebartype=full] .page-wrapper */
#main-wrapper .page-wrapper,
#main-wrapper[data-layout="vertical"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="full"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="mini-sidebar"] .page-wrapper {
  margin-left: 264px !important;
  padding-top: 80px !important;
  min-height: 100vh !important;
  background: transparent !important;
  transition: none !important;
}

/* Also override the navbar-collapse and topbar margin-left */
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .topbar .top-navbar .navbar-collapse,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="full"] .topbar .top-navbar .navbar-collapse,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-collapse {
  margin-left: 0 !important;
}

/* ── Content area ────────────────────────────────────────────────── */
.page-wrapper > .container-fluid,
.page-wrapper > .page-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px 32px !important;
}

/* Negative-margin variant (dashboard 4) */
.page-wrapper > .container-fluid.negative-margin {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  border-radius: 16px !important;
  border: 1px solid var(--fz-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  background: var(--fz-surface) !important;
}

.card-body {
  padding: 20px !important;
}

/* ── Breadcrumb area ─────────────────────────────────────────────── */
.page-breadcrumb {
  padding: 0 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer {
  background: transparent !important;
  border: none !important;
  color: var(--fz-text-muted) !important;
  margin-left: 264px !important;
}

/* ── User Dropdown ───────────────────────────────────────────────── */
.topbar .dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid var(--fz-border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important;
  background: var(--fz-surface) !important;
  padding: 8px !important;
}

.topbar .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--fz-text-secondary) !important;
}

.topbar .dropdown-item:hover {
  background: var(--fz-surface-hover) !important;
  color: var(--fz-text-primary) !important;
}

/* ── Sidebar Footer ──────────────────────────────────────────────── */
.left-sidebar .fz-sidebar-footer {
  padding: 16px;
  flex-shrink: 0;
}

.left-sidebar .fz-sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fz-text-muted);
  text-decoration: none;
  transition: all 0.15s;
}

.left-sidebar .fz-sidebar-footer a:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.left-sidebar .fz-sidebar-footer a i,
.left-sidebar .fz-sidebar-footer a svg {
  width: 20px;
  height: 20px;
}

/* ── Collapse (Bootstrap override) ───────────────────────────────── */
.sidebar-nav .collapse {
  transition: height 0.2s ease !important;
}

/* ── Mobile responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #main-wrapper .left-sidebar,
  #main-wrapper[data-layout="vertical"] .left-sidebar,
  #main-wrapper[data-layout="vertical"][data-sidebartype="full"] .left-sidebar,
  #main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .left-sidebar {
    left: -260px !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    transition: left 0.2s ease !important;
  }

  #main-wrapper.show-sidebar .left-sidebar {
    left: 0 !important;
  }

  #main-wrapper .topbar,
  #main-wrapper[data-layout="vertical"] .topbar {
    left: 0 !important;
    padding: 12px 16px !important;
  }

  #main-wrapper .page-wrapper,
  #main-wrapper[data-layout="vertical"][data-sidebartype="full"] .page-wrapper,
  #main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .page-wrapper {
    margin-left: 0 !important;
    padding-top: 70px !important;
  }

  .footer {
    margin-left: 0 !important;
  }
}

/* ── Kill the customizer panel and its toggle button ─────────────── */
.service-panel,
.service-panel-toggle,
a.service-panel-toggle,
.customizer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The right-side settings aside panel */
#main-wrapper > aside:not(.left-sidebar) {
  display: none !important;
}

/* ── Create-btn override ─────────────────────────────────────────── */
.create-btn,
.btn.create-btn {
  background: var(--fz-accent) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Hide the hide-menu class items on mini-sidebar (prevent flash) */
#main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .hide-menu {
  display: inline !important;
}

#main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .has-arrow::after {
  display: inline-block !important;
}