/* ===================================================
   Admin Dashboard Refresh v2 – Full Redesign
   - Darker background (slate-200 tone) for contrast
   - Larger stat cards, 4-per-row layout
   - Fixed shortcut icons visibility
   - Datetime moved below header
   - Cleaner header buttons
   =================================================== */

/* ── Background / Layout ─────────────────────────── */
.ui-modern,
.ui-modern .content-wrapper,
.ui-modern main {
  background: #e8edf5; /* slightly darker than before for contrast */
}

/* ── Sidebar ──────────────────────────────────────── */
.ui-modern .admin-sidebar {
  background: #fbfdff;
  border-inline-end: 1px solid #dbe5f2;
}
.ui-modern .admin-sidebar__shell { background: #fbfdff; }
.ui-modern .admin-sidebar__brand {
  border-bottom: 1px solid #dde7f4;
  min-height: 72px;
}
.ui-modern .sidebar-link {
  border-radius: 14px;
  border: 1px solid transparent;
  transition: .2s ease;
  min-height: 44px;
  padding-inline: .8rem !important;
}
.ui-modern .sidebar-link:hover {
  background: #f3f8ff;
  border-color: #d8e6fc;
}
.ui-modern .sidebar-link.active {
  background: #e6f1ff;
  border-color: #c8dcff;
  color: #1d4ed8;
  box-shadow: 0 10px 20px rgba(59, 130, 246, .12);
}
.ui-modern .sidebar-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f5ff;
  border: 1px solid #dae6fc;
  color: #3356a6;
}
.ui-modern .sidebar-nav-icon svg { width: 16px; height: 16px; }
.ui-modern .sidebar-sublink { padding: .5rem .75rem; font-size: .92em; }
.ui-modern .sidebar-accordion > summary .drop_down {
  width: 18px; height: 18px; border-radius: 999px;
  background: #f2f6ff; color: #5b77b7 !important; padding: 2px;
}
.ui-modern .sidebar-row-indicator {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid #d4e2fa; background: #f8fbff; position: relative;
}
.ui-modern .sidebar-row-indicator::before {
  content: ""; position: absolute; inset: 5px 4px 5px 6px;
  border-top: 1.5px solid #8ba7de; border-right: 1.5px solid #8ba7de;
  transform: rotate(45deg);
}
.ui-modern .sidebar-accordion ul {
  margin-inline-start: 10px;
  padding-inline-start: 12px !important;
  border-inline-start: 1px dashed #cddcf6 !important;
}
.ui-modern .sidebar-child-bullet { width: 7px; height: 7px; border-radius: 999px; background: #87a6e8; }
.ui-modern .admin-sidebar__badge {
  background: #f1f6ff; border: 1px solid #d5e2f7; border-radius: 10px; padding: .45rem .6rem;
}

/* ── Topbar ───────────────────────────────────────── */
.ui-modern .admin-topbar {
  background: rgba(255, 255, 255, .97);
  border-color: #c8d8ef;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
}
.ui-modern .admin-topbar .tw-px-5 > .tw-flex {
  position: relative;
  min-height: 52px;
}

/* Header buttons - cleaner, more visible on slightly darker bg */
.ui-modern .admin-topbar-btn,
.ui-modern .admin-topbar-lang,
.ui-modern .header_notifications .dropdown-toggle {
  background: #1e40af !important;
  border: 1px solid #1d3fa8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, .25) !important;
  border-radius: 10px !important;
}
.ui-modern .admin-topbar-btn:hover,
.ui-modern .admin-topbar-lang:hover,
.ui-modern .header_notifications .dropdown-toggle:hover {
  background: #1d4ed8 !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 64, 175, .35) !important;
  transform: translateY(-1px);
}

/* Datetime strip BELOW header - full-width bar */
.ui-modern .admin-topbar-datetime {
  display: none !important; /* hide from topbar */
}

/* New datetime bar below topbar */
.admin-datetime-bar {
  background: linear-gradient(90deg, #1e3a8a 0%, #1e40af 100%);
  color: #bfdbfe;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid #1d4ed8;
  letter-spacing: .01em;
}
.admin-datetime-bar i { color: #93c5fd; font-size: .8rem; }
.admin-datetime-bar #admin_topbar_datetime_clone { color: #e0f2fe; }

/* ── Dashboard Background ─────────────────────────── */
.dashboard-home {
  --dash-bg: #e8edf5;
  --dash-surface: #ffffff;
  --dash-soft: #f1f5fb;
  --dash-ink: #0f172a;
  --dash-muted: #64748b;
  --dash-border: #cdd8ec;
  --dash-accent: #1e40af;
  --dash-radius: 18px;
  background: var(--dash-bg);
  padding-bottom: 1.5rem;
}
.dashboard-home .select2-container { width: 100% !important; }

/* ── Hero Card ────────────────────────────────────── */
.dashboard-home .dashboard-hero {
  border-radius: var(--dash-radius);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1e40af 100%);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.dashboard-home .dashboard-hero::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 45%),
             radial-gradient(circle at left center, rgba(96,165,250,.12), transparent 38%);
}
.dashboard-home .dashboard-hero__eyebrow { color:#7dd3fc; font-weight:800; }
.dashboard-home .dashboard-hero__name { color:#f8fafc; font-size: 1.7rem; }
.dashboard-home .dashboard-hero__subtitle { color:rgba(226,232,240,.75); }
.dashboard-home .dashboard-chip {
  border-radius:999px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); color:#e0f2fe;
  font-size:.72rem; padding:.24rem .65rem; font-weight:700;
}
.dashboard-home .dashboard-hero__controls {
  border:1px solid rgba(255,255,255,.15); border-radius:16px;
  background:rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.dashboard-home .dashboard-hero__controls label { color: rgba(226,232,240,.85) !important; }
.dashboard-home .date-filter-btn {
  border:1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.92) !important;
  color: #1e3a8a !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.2);
  font-weight: 700;
}
.dashboard-home .date-filter-btn:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
}

/* ── Section titles ───────────────────────────────── */
.dashboard-home .dashboard-section { margin-top: 1.2rem; }
.dashboard-home .dashboard-shortcuts { margin-top:.25rem; padding-top:.25rem; }
.dashboard-home .dashboard-block-title h2 {
  margin:0; color:#0f172a; font-weight:800; font-size: 1.05rem;
}
.dashboard-home .dashboard-shortcuts__desc,
.dashboard-home .dashboard-block-title p { color:#6b7280; font-size:.76rem; margin: .15rem 0 0; }

/* ===================================================
   STAT CARDS  – 4-per-row, bigger, more visual
   =================================================== */
.dashboard-home .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .95rem;
}

.dashboard-home .stat-card {
  border-radius: 16px;
  border: 1px solid #d4e0f4;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
  padding: 18px 16px 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 110px;
}
.dashboard-home .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

/* Colored left accent bar */
.dashboard-home .stat-card::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #93c5fd, #3b82f6);
  border-radius: 0 3px 3px 0;
}

/* Icon circle - top right */
.dashboard-home .stat-card .stat-card__icon {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dashboard-home .stat-card .stat-card__icon svg { width: 1.2rem; height: 1.2rem; }

/* KPI labels */
.dashboard-home .stat-card .tw-text-sm,
.dashboard-home .stat-card p.tw-text-sm {
  color: #64748b;
  font-size: .73rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.dashboard-home .stat-card .tw-text-2xl,
.dashboard-home .stat-card p.tw-text-2xl {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

/* Remove old pseudo-text "مقارنة بالفترة السابقة" */
.dashboard-home .stat-card .tw-flex-1::after { display: none; }

/* Color variants for the accent bar */
.dashboard-home .stat-card.stat-card--sell::after    { background: linear-gradient(180deg, #6ee7b7, #10b981); }
.dashboard-home .stat-card.stat-card--net::after     { background: linear-gradient(180deg, #c4b5fd, #7c3aed); }
.dashboard-home .stat-card.stat-card--invoice::after { background: linear-gradient(180deg, #fde68a, #f59e0b); }
.dashboard-home .stat-card.stat-card--purchase::after{ background: linear-gradient(180deg, #7dd3fc, #0ea5e9); }
.dashboard-home .stat-card.stat-card--return-sales::after { background: linear-gradient(180deg, #fca5a5, #ef4444); }
.dashboard-home .stat-card.stat-card--expense::after  { background: linear-gradient(180deg, #fda4af, #f43f5e); }
.dashboard-home .stat-card.stat-card--return-sales::after { background: linear-gradient(180deg, #fdba74, #f97316); }
.dashboard-home .stat-card.stat-card--purchase-due::after { background: linear-gradient(180deg, #fcd34d, #eab308); }
.dashboard-home .stat-card.stat-card--purchase-return::after { background: linear-gradient(180deg, #fda4af, #e11d48); }

/* Icon background colors matching accent */
.dashboard-home .stat-card__icon--sales    { background: #d1fae5; color: #065f46; }
.dashboard-home .stat-card__icon--net      { background: #ede9fe; color: #5b21b6; }
.dashboard-home .stat-card__icon--invoice  { background: #fef3c7; color: #92400e; }
.dashboard-home .stat-card__icon--purchase { background: #e0f2fe; color: #0369a1; }
.dashboard-home .stat-card__icon--return-sales  { background: #fee2e2; color: #991b1b; }
.dashboard-home .stat-card__icon--expense  { background: #ffe4e6; color: #9f1239; }
.dashboard-home .stat-card__icon--return-sales  { background: #ffedd5; color: #c2410c; }
.dashboard-home .stat-card__icon--purchase-due  { background: #fef9c3; color: #854d0e; }
.dashboard-home .stat-card__icon--purchase-return { background: #fce7f3; color: #9d174d; }

/* ===================================================
   SHORTCUT CARDS – Fix icons visibility
   =================================================== */
.dashboard-home .dashboard-shortcuts__grid {
  gap: .85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-home .quick-action {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  backdrop-filter: blur(10px);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem 1rem !important;
  transition: .2s ease;
  position: relative;
  text-decoration: none !important;
  gap: .65rem;
}
.dashboard-home .quick-action:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.45);
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.15));
  box-shadow: 0 16px 28px rgba(15,23,42,.18);
}

/* Icon – always visible white circle */
.dashboard-home .quick-action__icon {
  order: -1;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .9);
  color: #1e40af;
  box-shadow: 0 6px 16px rgba(15,23,42,.15);
  flex-shrink: 0;
}
.dashboard-home .quick-action__icon svg,
.dashboard-home .quick-action__icon i {
  width: 1.3rem;
  height: 1.3rem;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #1e40af;
}
.dashboard-home .quick-action__icon i { font-size: 1.3rem; line-height: 1; }
.dashboard-home .quick-action__icon svg[fill="none"] { fill: none; stroke: currentColor; }

/* Hide the small subtitle, show the main name clearly */
.dashboard-home .quick-action > div p:first-child {
  display: none;
}
.dashboard-home .quick-action > div p:last-child,
.dashboard-home .quick-action__label {
  display: block !important;
  color: #000000 !important;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: static !important;
  inset: unset !important;
}

/* ── Action Cards ─────────────────────────────────── */
.dashboard-action-card {
  background: #fff;
  border: 1px solid #d4e0f4;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
.dashboard-action-card__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #dbeafe; color: #1d4ed8; border:1px solid #bfdbfe;
  font-size: 1.1rem;
}
.dashboard-action-card__title { margin:0; font-weight:700; color:#0f172a; }
.dashboard-action-card__meta  { margin:.1rem 0 0; color:#64748b; font-size:.82rem; }
.dashboard-action-card__count { margin:0; font-size:1.35rem; font-weight:800; color:#1e3a8a; }
.dashboard-action-card__btn {
  display:inline-block; margin-top:.35rem;
  border:1px solid #bfdbfe; background:#eff6ff;
  color:#1e40af; border-radius:999px; padding:.22rem .8rem;
  font-size:.78rem; font-weight:700; text-decoration: none;
}
.dashboard-action-card__btn:hover { background: #dbeafe; color: #1d4ed8; }

/* ── Chart Cards ──────────────────────────────────── */
.dashboard-chart-card {
  border-radius: 16px;
  border: 1px solid #d4e0f4;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
}
.dashboard-chart-card__title { margin:0 0 .8rem; font-size:.95rem; font-weight:700; color:#334155; }

/* ── Static metric cards (from blade components) ──── */
.dashboard-static-card {
  border: 1px solid #d4e0f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.dashboard-static-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .11);
}
.dashboard-static-card__body { padding: 1rem 1.1rem .9rem; position: relative; }
.dashboard-static-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.dashboard-static-card__icon {
  width: 2.4rem; height: 2.4rem; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dae4f8;
}
.dashboard-static-card__icon svg { width: 1.1rem; height: 1.1rem; }
.dashboard-static-card__title {
  margin: .6rem 0 .25rem; font-size: .78rem; font-weight: 600;
  color: #64748b; line-height: 1.2;
}
.dashboard-static-card__value {
  margin: 0; font-size: 1.65rem; font-weight: 800; color: #0f172a; line-height: 1.1;
}
.dashboard-static-card__range { font-size: .68rem; color: #94a3b8; }
.dashboard-static-card__comparison { margin-top: .25rem; min-height: 1.15rem; }
.dashboard-static-card__comparison-label { font-size: .67rem; color: #64748b; }
.dashboard-static-card__trend {
  font-size: .66rem; font-weight: 700; border-radius: 999px; padding: .14rem .45rem; line-height: 1;
}
.dashboard-static-card__trend--up   { background: #dcfce7; color: #15803d; }
.dashboard-static-card__trend--down { background: #fee2e2; color: #b91c1c; }
.dashboard-static-card__trend--flat { background: #f1f5f9; color: #475569; }

.dashboard-static-card__accent { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: #94a3b8; }
.dashboard-static-card--sell .dashboard-static-card__accent     { background: #10b981; }
.dashboard-static-card--purchase .dashboard-static-card__accent { background: #0ea5e9; }
.dashboard-static-card--return .dashboard-static-card__accent   { background: #ef4444; }
.dashboard-static-card--dues .dashboard-static-card__accent     { background: #f59e0b; }
.dashboard-static-card--expense .dashboard-static-card__accent  { background: #f43f5e; }
.dashboard-static-card--net .dashboard-static-card__accent      { background: #7c3aed; }

/* ── Hide secondary tables section ───────────────── */
.dashboard-home--secondary {
  display: none !important;
}

/* ── Tables general ───────────────────────────────── */
.dashboard-home .dashboard-table-wrap table thead th {
  color: #475569; background: #f1f6ff;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1280px) {
  .dashboard-home .dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .dashboard-home .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-home .dashboard-shortcuts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ui-modern .topbar-group-right { padding-inline-start: 0; }
  .dashboard-home .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-home .dashboard-shortcuts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-home .quick-action { min-height: 100px; }
}

@media (max-width: 480px) {
  .dashboard-home .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-home .dashboard-shortcuts__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1360px) {
  .ui-modern .topbar-group-right .topbar-low-priority { display: none !important; }
}

/* ── Support page (unchanged) ─────────────────────── */
.support-profile-page { direction: rtl; }
.support-hero {
  background: #fff; border: 1px solid #dbe7f8; border-radius: 16px;
  padding: 16px; display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.support-hero__identity { display: flex; align-items: center; gap: 12px; }
.support-hero__logo {
  width: 58px; height: 58px; border-radius: 12px;
  object-fit: cover; border: 1px solid #d6e3f7;
}
.support-hero__logo--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef4ff; color: #3357c4; font-size: 22px;
}
.support-hero__title { margin: 0; font-size: 1.35rem; font-weight: 800; }
.support-hero__subtitle { margin: 2px 0; color: #475569; }
.support-hero__desc { margin: 0; color: #64748b; }
.support-hero__selector { min-width: 260px; }
.support-cta-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 12px;
}
.support-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 11px; padding: 10px 12px;
  border: 1px solid #d8e5f7; background: #fff; color: #0f172a; font-weight: 700;
}
.support-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,23,42,.08); }
.support-card {
  background: #fff; border: 1px solid #dbe7f8; border-radius: 14px;
  padding: 12px; margin-bottom: 12px;
}
.support-card h4 { margin-top: 0; margin-bottom: 10px; font-size: 1.02rem; font-weight: 800; }
.support-social-list { display: flex; flex-wrap: wrap; gap: 10px; color: #475569; }
.support-empty-state {
  border: 1px dashed #c9d9f0; background: #f7fbff; border-radius: 14px;
  text-align: center; padding: 24px 12px; color: #5f6f86;
}

/* ===================================================
   KPI GRADIENT CARDS  – inspired by colorful stat cards
   Font: Outfit (loaded via css.blade) for numbers
   =================================================== */

/* Load Outfit for numbers */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Base card */
.kpi-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 140px;
  cursor: default;
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.kpi-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* Inner content */
.kpi-card__inner {
  position: relative;
  z-index: 2;
  padding: 1.1rem 1.2rem .95rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top row: label + icon */
.kpi-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.kpi-card__label {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  line-height: 1.3;
  flex: 1;
  letter-spacing: .02em;
}
.kpi-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3);
}
.kpi-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: #ffffff;
}

/* Big number */
.kpi-card__value {
  font-family: 'Outfit', 'Cairo', system-ui, sans-serif !important;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin: .55rem 0 .3rem;
  letter-spacing: -.02em;
}

/* Sub label */
.kpi-card__sub {
  font-size: .68rem;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  margin: 0;
  letter-spacing: .03em;
}

/* Decorative wavy lines overlay (SVG background) */
.kpi-card__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .12;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.6) 0px,
    rgba(255,255,255,.6) 1px,
    transparent 1px,
    transparent 18px
  );
  pointer-events: none;
}

/* ── Color variants ── */
.kpi-card--sell {
  background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
}
.kpi-card--net {
  background: linear-gradient(135deg, #7f5af0 0%, #c471ed 100%);
}
.kpi-card--dues {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}
.kpi-card--purchase {
  background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
}
.kpi-card--return-sell {
  background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
}
.kpi-card--purchase-due {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}
.kpi-card--return-purchase {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.kpi-card--expense {
  background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%);
}

/* ── Hero controls: location + filter in one row ── */
.dashboard-home .dashboard-hero__controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: .6rem .75rem !important;
  flex-wrap: nowrap !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  width: fit-content;
  margin-inline-start: auto;
}
.dashboard-home .dashboard-hero__controls .select2-container {
  min-width: 180px !important;
  max-width: 220px !important;
}
.dashboard-home .dashboard-hero__controls .select2-selection--single {
  background: rgba(255,255,255,.9) !important;
  border-radius: 10px !important;
  min-height: 34px !important;
  border: none !important;
}
.dashboard-home .date-filter-btn {
  background: rgba(255,255,255,.92) !important;
  color: #1e3a8a !important;
  border: none !important;
  border-radius: 10px !important;
  white-space: nowrap;
  font-weight: 700;
  padding: .42rem .85rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.dashboard-home .date-filter-btn:hover {
  background: #fff !important;
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kpi-card { min-height: 115px; }
  .kpi-card__value { font-size: 1.35rem; }
}