:root {
  --brand-950: #3c0618;
  --brand-900: #570923;
  --brand-800: #6f102f;
  --brand-700: #8a1538;
  --brand-600: #a21d48;
  --brand-100: #f0d5de;
  --brand-50: #fbf1f4;
  --brand-gold: #d88aa2;
  --brand-gold-soft: #f9e8ed;
  --admin-surface: #f7f3f4;
  --admin-card: #fff;
  --admin-text: #28171d;
  --admin-muted: #806a72;
  --admin-border: #eadde1;
  --admin-shadow: 0 13px 38px rgba(87, 9, 35, .075);
}

html {
  background: var(--admin-surface) !important;
}

body.has-admin-sidebar {
  min-height: 100dvh !important;
  width: 100% !important;
  overflow-x: clip !important;
  color: var(--admin-text) !important;
  background:
    radial-gradient(circle at 7% 0, rgba(138, 21, 56, .08), transparent 23rem),
    linear-gradient(180deg, #fffdfd, var(--admin-surface)) !important;
  font-family: Cairo, Tahoma, Arial, sans-serif !important;
  font-size: .94rem !important;
}

/* Admin Shell V3: every legacy page gets the same remaining-width column.
   The old pages mix fixed sidebars with flex children, so margin alone makes
   some .main elements intrinsic-width and leaves half the screen empty. */
body[data-admin-shell="3"] .admin-shell-app {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 100dvh !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-admin-shell="3"] .admin-shell-main {
  position: relative !important;
  width: calc(100% - var(--admin-sidebar-width)) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 100dvh !important;
  flex: 0 0 auto !important;
  margin: 0 var(--admin-sidebar-width) 0 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body[data-admin-shell="3"] .admin-shell-main > :is(.header, .hdr) {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body[data-admin-shell="3"] .admin-shell-content,
body[data-admin-shell="3"] .admin-shell-main > #mainContent,
body[data-admin-shell="3"] .admin-shell-main > .content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(18px, 2.2vw, 34px) !important;
  box-sizing: border-box !important;
}

body[data-admin-shell="3"] .admin-shell-main-direct {
  padding: clamp(18px, 2.2vw, 34px) !important;
}

body[data-admin-shell="3"] :is(.table-card, .table-wrap, .tc, .dash-shell, .page-shell) {
  min-width: 0 !important;
  max-width: none !important;
}

body.has-admin-sidebar .main,
body.has-admin-sidebar .main-body,
body.has-admin-sidebar .mn {
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin-right: var(--admin-sidebar-width) !important;
  background: transparent !important;
}

body.has-admin-sidebar .header,
body.has-admin-sidebar .hdr {
  position: sticky !important;
  z-index: 80 !important;
  top: 0 !important;
  min-height: 76px !important;
  padding: 12px clamp(16px, 2.7vw, 34px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(138, 21, 56, .08) !important;
  background: rgba(255, 253, 253, .9) !important;
  box-shadow: 0 8px 28px rgba(60, 6, 24, .04) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

body.has-admin-sidebar .hdr-title,
body.has-admin-sidebar .hdr-page-title,
body.has-admin-sidebar #hdrT {
  color: var(--brand-950) !important;
  font-size: clamp(.96rem, 1.6vw, 1.08rem) !important;
  font-weight: 800 !important;
}

body.has-admin-sidebar .hdr-bc,
body.has-admin-sidebar .hdr-breadcrumb {
  color: var(--admin-muted) !important;
  font-size: .68rem !important;
}

body.has-admin-sidebar .hdr-ico,
body.has-admin-sidebar .hdr-icon,
body.has-admin-sidebar .hdr-icon-btn,
body.has-admin-sidebar .mobile-toggle,
body.has-admin-sidebar .mob-toggle {
  min-width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--brand-800) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 7px 18px rgba(18, 72, 62, .055) !important;
}

body.has-admin-sidebar .hdr-ubtn,
body.has-admin-sidebar .hdr-userbtn,
body.has-admin-sidebar .hdr-user-btn {
  min-height: 42px !important;
  color: var(--brand-950) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 7px 18px rgba(18, 72, 62, .055) !important;
}

body.has-admin-sidebar .mobile-toggle,
body.has-admin-sidebar .mob-toggle {
  display: none !important;
}

body.has-admin-sidebar .hdr-uav,
body.has-admin-sidebar .hdr-user-av {
  color: var(--brand-950) !important;
  background: linear-gradient(145deg, #f5d98f, var(--brand-gold)) !important;
}

body.has-admin-sidebar .content,
body.has-admin-sidebar #mainContent {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: clamp(18px, 2.8vw, 34px) !important;
  background: transparent !important;
}

body.has-admin-sidebar :is(.card, .panel, .box, .stat-card, .table-wrap, .table-card, .dash-panel) {
  border-color: var(--admin-border) !important;
  background-color: var(--admin-card) !important;
  box-shadow: var(--admin-shadow) !important;
}

body.has-admin-sidebar :is(.card, .panel, .box, .stat-card, .table-card) {
  border-radius: 18px !important;
}

body.has-admin-sidebar table {
  color: var(--admin-text) !important;
}

body.has-admin-sidebar table thead th,
body.has-admin-sidebar .tbl th {
  color: var(--brand-800) !important;
  border-color: var(--admin-border) !important;
  background: var(--brand-50) !important;
  font-weight: 800 !important;
}

body.has-admin-sidebar table tbody td,
body.has-admin-sidebar .tbl td {
  border-color: #edf2f0 !important;
}

body.has-admin-sidebar table tbody tr:hover td,
body.has-admin-sidebar .tbl tr:hover td {
  background: #f8fbfa !important;
}

body.has-admin-sidebar :is(input, select, textarea) {
  border-color: var(--admin-border) !important;
  border-radius: 11px !important;
  background-color: #fff !important;
  outline: 0 !important;
}

body.has-admin-sidebar :is(input, select, textarea):focus {
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 3px rgba(138, 21, 56, .12) !important;
}

body.has-admin-sidebar :is(.btn-primary, .primary, button.primary) {
  color: #fff !important;
  border-color: var(--brand-700) !important;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900)) !important;
  box-shadow: 0 9px 21px rgba(138, 21, 56, .18) !important;
}

body.has-admin-sidebar :is(.btn, button):not(.sb-overlay, .sb-logout) {
  font-family: inherit !important;
}

body.has-admin-sidebar :is(.badge, .chip, .tag) {
  border-color: rgba(138, 21, 56, .15) !important;
}

/* Dashboard visual system */
body.has-admin-sidebar .dash-shell {
  --dash-ink: var(--brand-950) !important;
  --dash-accent: var(--brand-700) !important;
  --dash-accent-2: var(--brand-600) !important;
  --dash-soft: var(--brand-50) !important;
  --dash-card: #fff !important;
  --dash-line: var(--admin-border) !important;
  --dash-gold: var(--brand-gold) !important;
  --dash-shadow: var(--admin-shadow) !important;
  gap: 18px !important;
}

body.has-admin-sidebar .dash-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(22px, 3.4vw, 42px) !important;
  border: 1px solid rgba(216, 174, 85, .2) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 7% 15%, rgba(216, 174, 85, .22), transparent 22rem),
    linear-gradient(140deg, #fff 0, #f3faf7 55%, #eef7f3 100%) !important;
  box-shadow: 0 22px 55px rgba(18, 72, 62, .1) !important;
}

body.has-admin-sidebar .dash-hero::before {
  inset: auto auto -85px -60px !important;
  width: 260px !important;
  height: 260px !important;
  border: 1px solid rgba(23, 98, 85, .1) !important;
  border-radius: 50% !important;
  background: rgba(216, 174, 85, .06) !important;
}

body.has-admin-sidebar .dash-kicker {
  color: var(--brand-700) !important;
  font-weight: 800 !important;
}

body.has-admin-sidebar .dash-title {
  color: var(--brand-950) !important;
  font-size: clamp(1.42rem, 2vw, 1.9rem) !important;
  letter-spacing: -.035em !important;
}

body.has-admin-sidebar .dash-sub,
body.has-admin-sidebar .dash-focus-note {
  color: var(--admin-muted) !important;
  font-size: .8rem !important;
}

body.has-admin-sidebar .dash-btn {
  min-height: 42px !important;
  color: var(--brand-800) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .88) !important;
}

body.has-admin-sidebar .dash-btn.primary {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900)) !important;
}

body.has-admin-sidebar .dash-focus-card,
body.has-admin-sidebar .dash-pulse,
body.has-admin-sidebar .dash-metrics,
body.has-admin-sidebar .dash-grid > * {
  border-color: var(--admin-border) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 28px rgba(18, 72, 62, .06) !important;
}

body.has-admin-sidebar .dash-focus-card {
  position: relative !important;
  overflow: hidden !important;
}

body.has-admin-sidebar .dash-focus-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-700)) !important;
}

body.has-admin-sidebar .dash-focus-value,
body.has-admin-sidebar .dash-pulse-title,
body.has-admin-sidebar .dash-p-num {
  color: var(--brand-950) !important;
}

body.has-admin-sidebar .dash-focus-value,
body.has-admin-sidebar .dash-p-num,
body.has-admin-sidebar .stat-num,
body.has-admin-sidebar .today-delivery-card .tdc-value {
  font-size: clamp(1.35rem, 2vw, 1.62rem) !important;
  line-height: 1.15 !important;
}

body.has-admin-sidebar .dash-chip {
  color: var(--brand-700) !important;
  border-color: rgba(31, 122, 104, .16) !important;
  background: var(--brand-50) !important;
}

body.has-admin-sidebar .dash-p-bar {
  background: #e8f0ed !important;
}

body.has-admin-sidebar .dash-p-fill {
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-700)) !important;
}

body.has-admin-sidebar .stat-card::before {
  background: linear-gradient(180deg, var(--brand-gold), var(--brand-700)) !important;
}

@media (max-width: 980px) {
  body[data-admin-shell="3"] .admin-shell-main {
    width: 100% !important;
    margin-right: 0 !important;
  }

  body.has-admin-sidebar .main,
  body.has-admin-sidebar .main-body,
  body.has-admin-sidebar .mn {
    margin-right: 0 !important;
  }

  body.has-admin-sidebar .header,
  body.has-admin-sidebar .hdr {
    min-height: 68px !important;
  }

  body.has-admin-sidebar .mobile-toggle,
  body.has-admin-sidebar .mob-toggle {
    display: grid !important;
  }
}

@media (max-width: 620px) {
  body.has-admin-sidebar .content,
  body.has-admin-sidebar #mainContent {
    padding: 14px !important;
  }

  body.has-admin-sidebar .header,
  body.has-admin-sidebar .hdr {
    padding: 10px 13px !important;
  }

  body.has-admin-sidebar .dash-hero {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  body.has-admin-sidebar .hdr-search,
  body.has-admin-sidebar .hdr-uname,
  body.has-admin-sidebar .hdr-user-info {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-admin-sidebar *,
  body.has-admin-sidebar *::before,
  body.has-admin-sidebar *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}