/* ============================================================
   Shoplyus — Tenant Admin Custom Sidebar & Topbar Theme
   ============================================================ */

/* ── Sidebar background ───────────────────────────────────── */
.dark .fi-sidebar {
  background-color: #0f1a0c !important;
  border-right-color: #1e2b1a !important;
}
.fi-sidebar {
  background-color: #f4f8f3 !important;
  border-right-color: #ccd9ca !important;
}

/* ── Sidebar header (logo/brand area) ─────────────────────── */
.dark .fi-sidebar-header {
  background-color: #0a1508 !important;
  border-bottom-color: #1e2b1a !important;
}
.fi-sidebar-header {
  background-color: #eaf2e8 !important;
  border-bottom-color: #ccd9ca !important;
}
.fi-sidebar-header .fi-logo {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ── Top bar ──────────────────────────────────────────────── */
.dark .fi-topbar,
.dark .fi-topbar nav {
  background-color: #0f1a0c !important;
  border-bottom-color: #1e2b1a !important;
}
.fi-topbar,
.fi-topbar nav {
  background-color: #f4f8f3 !important;
  border-bottom-color: #ccd9ca !important;
}

/* ── Main content area ────────────────────────────────────── */
.dark .fi-main {
  background-color: #111d0f !important;
}

/* ── Navigation group labels ──────────────────────────────── */
.fi-nav-group-label span,
.fi-nav-group > button > span:first-child {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}
.dark .fi-nav-group-label span,
.dark .fi-nav-group > button > span:first-child {
  color: #4a6a48 !important;
}
.fi-nav-group-label span,
.fi-nav-group > button > span:first-child {
  color: #6a8c68 !important;
}

/* ── Navigation group toggle button ───────────────────────── */
.dark .fi-nav-group > button:hover {
  background-color: transparent !important;
}
.fi-nav-group {
  padding-top: 4px !important;
}
.fi-nav-group + .fi-nav-group {
  border-top-width: 1px !important;
}
.dark .fi-nav-group + .fi-nav-group {
  border-top-color: #1e2b1a !important;
}
.fi-nav-group + .fi-nav-group {
  border-top-color: #d4e4d1 !important;
}

/* ── Nav item button ──────────────────────────────────────── */
.fi-nav-item > a,
.fi-nav-item > button {
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  transition: background-color 0.15s, color 0.15s !important;
}

/* ── Nav item: hover ──────────────────────────────────────── */
.dark .fi-nav-item > a:hover,
.dark .fi-nav-item > button:hover {
  background-color: rgba(74, 222, 128, 0.08) !important;
}
.fi-nav-item > a:hover,
.fi-nav-item > button:hover {
  background-color: rgba(22, 163, 74, 0.08) !important;
}

/* ── Nav item: active ─────────────────────────────────────── */
.dark .fi-nav-item-active > a,
.dark .fi-nav-item-active > button,
.dark .fi-nav-item > a[aria-current="page"],
.dark [data-active] .fi-nav-item > a {
  background-color: rgba(74, 222, 128, 0.14) !important;
}
.fi-nav-item-active > a,
.fi-nav-item-active > button,
.fi-nav-item > a[aria-current="page"] {
  background-color: rgba(22, 163, 74, 0.12) !important;
}

/* ── Nav item: active icon color ─────────────────────────── */
.dark .fi-nav-item-active .fi-nav-item-icon,
.dark .fi-nav-item > a[aria-current="page"] .fi-nav-item-icon {
  color: #4ade80 !important;
}
.fi-nav-item-active .fi-nav-item-icon,
.fi-nav-item > a[aria-current="page"] .fi-nav-item-icon {
  color: #16a34a !important;
}

/* ── Nav item: active label color ────────────────────────── */
.dark .fi-nav-item-active .fi-nav-item-label,
.dark .fi-nav-item > a[aria-current="page"] .fi-nav-item-label {
  color: #4ade80 !important;
  font-weight: 600 !important;
}
.fi-nav-item-active .fi-nav-item-label,
.fi-nav-item > a[aria-current="page"] .fi-nav-item-label {
  color: #16a34a !important;
  font-weight: 600 !important;
}

/* ── Nav item: icon (default) ─────────────────────────────── */
.dark .fi-nav-item-icon {
  color: #5a7a58 !important;
}
.fi-nav-item-icon {
  color: #6a8c68 !important;
}

/* ── Nav item: label (default) ───────────────────────────── */
.dark .fi-nav-item-label {
  color: #b8d0b8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.fi-nav-item-label {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ── Sidebar footer / user menu ───────────────────────────── */
.dark .fi-sidebar-footer {
  border-top-color: #1e2b1a !important;
  background-color: #0a1508 !important;
}
.fi-sidebar-footer {
  border-top-color: #ccd9ca !important;
  background-color: #eaf2e8 !important;
}

/* ── Page heading area ────────────────────────────────────── */
.dark .fi-header {
  background-color: #111d0f !important;
  border-bottom-color: #1e2b1a !important;
}