/* Super admin pages inside the staff sidebar layout: make the admin widgets (KPI tiles, charts, tabs, lists, cards)
   look like the rest of the 7 Colors staff screens (BitAgrix stat cards: white, rounded, coloured top edge, round icon). */
.sa-page .content-wrapper { padding-top: 1.6rem; }
.sa-page .content-wrapper > .d-flex:first-child h3 { font-family: var(--kh-display, inherit); font-weight: 400; font-size: 2rem; color: var(--kh-heading); }

/* KPI tiles -> stat cards */
.sa-page .kpi-tile { background: var(--bs-card-bg, #fffdf7); border: 1px solid var(--kh-border, #e2d9c3); border-radius: 18px; padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 10px 24px -20px rgba(35, 31, 28, .45); position: relative; overflow: hidden; min-height: 120px; transition: transform .15s, box-shadow .15s; color: var(--kh-heading); }
.sa-page .kpi-tile::before { inset: 0 0 auto 0; width: auto; height: 4px; background: var(--c, #4b8b2a); }
.sa-page a.kpi-tile:hover, .sa-page .kpi-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(35, 31, 28, .55); }
.sa-page .kpi-tile .kpi-l { font-size: .95rem; opacity: 1; color: var(--kh-muted); align-items: flex-start; }
.sa-page .kpi-tile .kpi-l i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #4b8b2a) 16%, transparent); color: var(--c, #4b8b2a); font-size: 1.3rem; flex: 0 0 auto; }
.sa-page .kpi-tile .kpi-v { font-size: 1.9rem; font-weight: 700; color: var(--kh-heading); margin-top: -.6rem; }
.sa-page .kpi-tile small { color: var(--kh-muted); opacity: 1; }

/* Cards and section labels */
.sa-page .card { border-radius: 18px; border: 1px solid var(--kh-border, #e2d9c3); box-shadow: 0 10px 24px -22px rgba(35, 31, 28, .45); }
.sa-page .cc-card h5, .sa-page .card h5, .sa-page .card h6 { font-weight: 700; color: var(--kh-heading); }
.sa-page .cc-sec { color: var(--kh-muted); opacity: 1; font-weight: 600; }
.sa-page .cc-note { color: var(--kh-muted); opacity: 1; }

/* Tabs and filter pills */
.sa-page .md-tabs .nav-link, .sa-page .tc-tabs .nav-link { background: var(--bs-card-bg, #fffdf7); color: var(--kh-heading); border: 1px solid var(--kh-border, #e2d9c3); padding: .45rem 1rem; }
.sa-page .md-tabs .nav-link.active, .sa-page .tc-tabs .nav-link.active { background: var(--kh-primary, #3d8b2f); border-color: var(--kh-primary, #3d8b2f); color: #fff; }
.sa-page .mod-chip.active, .sa-page .mod-tab.active { background: var(--kh-primary, #3d8b2f); border-color: var(--kh-primary, #3d8b2f); color: #fff; }
.sa-page #cc-range .btn.active { background: var(--kh-primary, #3d8b2f); border-color: var(--kh-primary, #3d8b2f); }
.sa-page .ch-tabs button.on { background: var(--kh-primary, #3d8b2f); border-color: var(--kh-primary, #3d8b2f); }

/* Long lists scroll inside their card instead of stretching the page */
.sa-page .table-responsive { max-height: 68vh; overflow-y: auto; }
.sa-page .table-responsive thead th { position: sticky; top: 0; background: var(--bs-card-bg, #fffdf7); z-index: 1; }
.sa-page .bn-list, .sa-page .ad-grid, .sa-page #ss-list { max-height: 72vh; overflow-y: auto; padding-right: .3rem; }

/* Breathing room */
.sa-page .row.g-3 { --bs-gutter-y: 1.1rem; --bs-gutter-x: 1.1rem; }
.sa-page .btn { border-radius: 999px; }
.sa-page .modal-content { border-radius: 20px; }
.sa-page .admin-stat-label { color: var(--kh-muted); }

/* Old dark-template leftovers inside page content */
.sa-page .text-white-50 { color: var(--kh-muted) !important; }
.sa-page .bg-dark { background: var(--kh-soft, #ece5d2) !important; color: var(--kh-heading) !important; }