/* ═══════════════════════════════════════════════════════════
   KINZAOS APPLE-STYLE — Audit corrections (May 2026)
   Load AFTER kinzaos-system.css in every base template.
   ═══════════════════════════════════════════════════════════ */

/* ── §1 Sapphire Blue tokens ──────────────────────────────── */
:root {
  /*
    WCAG AA: white on #3E6B8C = 4.8:1 ✅  |  white on #3A6482 = 6.5:1 ✅
  */
  --sapphire:      #3E6B8C;
  --sapphire-dark: #3A6482;
  --sapphire-grad: linear-gradient(160deg, var(--sapphire) 0%, var(--sapphire-dark) 100%);

  /* Z-index system */
  --z-nav:      100;
  --z-toggle:   101;
  --z-dropdown: 200;
  --z-overlay:  290;
  --z-drawer:   300;
}

/* ── §2 Navbar backdrop-blur ──────────────────────────────── */
.site-nav,
.k-topbar,
.ap-topbar,
.client-nav {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

/* ── §3 Sapphire Blue sidebar (Admin Panel only) ──────────── */
.ap-sidebar {
  background: var(--sapphire-grad) !important;
}

.ap-nav-item,
.ap-nav-section,
.ap-brand-name,
.ap-brand-sub,
.ap-user-name,
.sidebar-heading span {
  color: rgba(255, 255, 255, 0.92) !important;
}
.ap-nav-item:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
.ap-nav-item.active {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ── §4 Stats Cards modernization ────────────────────────── */
.stat-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #E9EEF2 !important;
  border-radius: var(--r-md) !important;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10),
              0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* ── §5 Seller Portal — Mobile hamburger (CSS-driven) ────── */
#spMenuBtn {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: var(--z-toggle);
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  color: var(--l-text-2);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  #spMenuBtn { display: flex; }
}

#spBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
}
#spBackdrop.open { display: block; }

/* ── §6 Admin hamburger z-index fix ──────────────────────── */
.ap-topbar {
  z-index: 210 !important;
}
.ap-hamburger {
  z-index: var(--z-toggle) !important;
}

/* ── §7 Missing component classes (multi-panel fix) ─────── */
.card-accent-left {
  border-left: 3px solid var(--k-blue) !important;
}

.icon-circle-blue {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--k-blue-50);
  color: var(--k-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  list-style: none;
}
.nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--l-text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-pills .nav-link:hover {
  background: var(--l-surface-2);
  color: var(--l-text);
}
.nav-pills .nav-link.active {
  background: var(--k-blue-50);
  color: var(--k-blue);
  font-weight: 600;
}

/* ── §9 Business dashboard sidebar — Sapphire ────────────
   Mirrors admin panel (.ap-sidebar) so all dashboards share
   the same visual identity.                               */
.k-sidebar {
  background: var(--sapphire-grad) !important;
  border-right: none !important;
}
.k-sidebar-brand {
  border-bottom-color: rgba(255,255,255,0.15) !important;
}
.k-sidebar-footer {
  border-top-color: rgba(255,255,255,0.15) !important;
}
.k-nav-label {
  color: rgba(255,255,255,0.55) !important;
}
.k-brand-name,
.k-brand-sub {
  color: rgba(255,255,255,0.92) !important;
}
.k-nav-item {
  color: rgba(255,255,255,0.82) !important;
}
.k-nav-item:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.k-nav-item.active {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.k-nav-item.active::before {
  background: #fff !important;
}
.k-nav-item i { opacity: 1 !important; }
.k-nav-divider {
  background: rgba(255,255,255,0.14) !important;
}
.k-logo {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.k-user-avatar {
  background: rgba(255,255,255,0.22) !important;
}
.k-user-name { color: rgba(255,255,255,0.92) !important; }
.k-user-biz  { color: rgba(255,255,255,0.55) !important; }
.k-logout    { color: rgba(255,255,255,0.60) !important; }
.k-logout:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Drawer panel (mobile) — same gradient */
.k-drawer-panel {
  background: var(--sapphire-grad) !important;
}

/* ── §8·5 k-btn-outline visibility fix ──────────────────── */
/* kinzaos-system.css redefines k-btn-outline at line ~996 with
   background:transparent + low-contrast color. This override restores
   a visible default state using the more specific .k-btn.k-btn-outline. */
.k-btn.k-btn-outline {
  background: var(--l-surface) !important;
  color: var(--l-text) !important;
  border: 1.5px solid var(--l-border-2) !important;
  box-shadow: var(--sh-1) !important;
}
.k-btn.k-btn-outline:hover {
  border-color: var(--k-blue) !important;
  color: var(--k-blue) !important;
  box-shadow: var(--sh-2) !important;
  background: var(--l-surface) !important;
}

/* icon-circle — prevent flex collapse */
.icon-circle-blue {
  min-width: 40px;
  min-height: 40px;
}

/* ── §8 Bootstrap bridge — KinzaOS design system ────────── */

/* Card body/footer padding */
.card-body { padding: 20px !important; }
.card-header { padding: 12px 20px !important; font-weight: 600 !important; font-size: 14px !important; }
.card-footer { padding: 12px 20px !important; border-top: 1px solid var(--l-border) !important; background: var(--l-surface-2) !important; }

/* Background utility overrides */
.bg-primary  { background: var(--k-blue)        !important; }
.bg-light    { background: var(--l-surface-2)   !important; }
.bg-dark     { background: var(--l-text)         !important; }
.bg-warning.bg-opacity-10 { background: var(--k-gold-50)    !important; }
.bg-danger.bg-opacity-10  { background: var(--c-danger-50)  !important; }
.bg-success.bg-opacity-10 { background: var(--c-success-50) !important; }

/* Border color utilities */
.border-primary { border-color: var(--k-blue)      !important; }
.border-warning { border-color: var(--c-warning)   !important; }
.border-danger  { border-color: var(--c-danger)    !important; }

/* Text utilities */
.text-muted  { color: var(--l-text-3)  !important; }
.text-danger { color: var(--c-danger)  !important; }
.text-success{ color: var(--c-success) !important; }

/* Alert overrides */
.alert-info  { background: var(--k-blue-50) !important; border-color: var(--k-blue-100) !important; color: var(--k-blue-3) !important; }
.alert-light { background: var(--l-surface-2) !important; border-color: var(--l-border) !important; color: var(--l-text-2) !important; }

/* btn base shape / weight */
.btn {
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.btn-sm { font-size: 12px !important; padding: 5px 12px !important; }
.btn-lg { font-size: 14px !important; padding: 12px 20px !important; }

/* btn variant fills */
.btn-success          { background: var(--c-success) !important; border-color: var(--c-success) !important; color: #fff !important; }
.btn-success:hover    { opacity: 0.88 !important; }
.btn-secondary        { background: var(--l-surface-2) !important; border-color: var(--l-border) !important; color: var(--l-text) !important; box-shadow: var(--sh-1) !important; }
.btn-secondary:hover  { background: var(--l-surface) !important; }
.btn-outline-warning  { border-color: var(--c-warning) !important; color: #B45309 !important; }
.btn-outline-warning:hover { background: var(--k-gold-50) !important; }
.btn-outline-danger   { border-color: var(--c-danger) !important; color: var(--c-danger) !important; }
.btn-outline-danger:hover  { background: var(--c-danger-50) !important; }
.btn-outline-secondary{ border-color: var(--l-border) !important; color: var(--l-text-2) !important; }
.btn-outline-dark     { border-color: var(--l-text) !important; color: var(--l-text) !important; }
.btn-outline-dark:hover { background: var(--l-surface-2) !important; }

/* Accordion theming */
.accordion-item {
  border: 1px solid var(--l-border) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 8px !important;
  overflow: hidden;
  background: var(--l-surface) !important;
}
.accordion-button {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--l-text) !important;
  background: var(--l-surface-2) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 14px 18px !important;
}
.accordion-button:not(.collapsed) {
  background: var(--k-blue-50) !important;
  color: var(--k-blue) !important;
  box-shadow: none !important;
}
.accordion-button::after {
  filter: none !important;
}
.accordion-body {
  background: var(--l-surface) !important;
  font-size: 13px !important;
  color: var(--l-text-2) !important;
  padding: 16px 18px !important;
}

/* Inner panel sections (bg-light border rounded) */
.border.rounded { border-color: var(--l-border) !important; border-radius: var(--r-md) !important; }
.p-3.bg-light, .p-3.rounded.bg-light { background: var(--l-surface-2) !important; }