/* Sandbox Africa Phase 46: final admin contrast, table and metadata polish. */
:root {
    --sa-ink: #071225;
    --sa-ink-2: #0f172a;
    --sa-muted: #64748b;
    --sa-line: rgba(15, 23, 42, .10);
    --sa-card: rgba(255,255,255,.88);
    --sa-sidebar: #071225;
    --sa-sidebar-2: #0a1830;
    --sa-cyan: #06b6d4;
    --sa-blue: #2563eb;
    --sa-violet: #7c3aed;
}

/* Admin shell: keep the left sidebar truly dark. Earlier legacy theme wrappers were washing it grey. */
body.sa-admin-body .sa-admin-shell > :first-child,
body.sa-admin-body .sa-admin-shell > .sa-admin-sidebar,
body.sa-admin-body .sa-admin-shell > .sandbox-admin-sidebar,
body.sa-admin-body .sa-admin-shell > .admin-sidebar,
body.sa-admin-body .sa-admin-shell > .left-sidebar,
body.sa-admin-body .sa-admin-shell > .main-sidebar,
body.sa-admin-body .sa-admin-shell > .vertical-menu,
body.sa-admin-body .sa-admin-shell > #sidebar,
body.sa-admin-body .sa-admin-shell > #admin-sidebar {
    background: radial-gradient(circle at 16% 0%, rgba(37,99,235,.28), transparent 26%), linear-gradient(180deg, var(--sa-sidebar) 0%, var(--sa-sidebar-2) 100%) !important;
    background-color: var(--sa-sidebar) !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 22px 0 70px rgba(2,6,23,.18) !important;
    overflow: hidden !important;
}
body.sa-admin-body .sa-admin-shell > :first-child :where(.sidebar-wrapper,.sidebar-content,.sidebar-menu,.sidebar-body,.sidebar-nav,.sa-sidebar-nav,.simplebar-wrapper,.simplebar-mask,.simplebar-offset,.simplebar-content-wrapper,.simplebar-content,nav,ul,li,.menu,.metismenu,.navbar-nav,.accordion,.menu-area,.menu-section,.sa-sidebar-scroll) {
    background: transparent !important;
    background-color: transparent !important;
    color: #f8fbff !important;
}
body.sa-admin-body .sa-admin-shell > :first-child :where(a,.nav-link,.menu-link,.sidebar-link,button) {
    color: rgba(248,251,255,.94) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}
body.sa-admin-body .sa-admin-shell > :first-child :where(.nav-title,.menu-title,.sidebar-title,.sa-sidebar-section-title,.section-title,small,.text-muted) {
    color: #8ee7ff !important;
    opacity: 1 !important;
}
body.sa-admin-body .sa-admin-shell > :first-child :where(.active,.mm-active) > a,
body.sa-admin-body .sa-admin-shell > :first-child :where(a.active,.nav-link.active,.menu-link.active,.sidebar-link.active) {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 48%, #06b6d4 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 18px 38px rgba(6,182,212,.22) !important;
}
body.sa-admin-body .sa-admin-shell > :first-child :where(a:hover,.nav-link:hover,.menu-link:hover,.sidebar-link:hover) {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
}
body.sa-admin-body .sa-admin-shell > :first-child img {
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Keep in-page setting panels readable. Broad legacy sidebar rules previously hit internal settings sidebars. */
body.sa-admin-body .sa-admin-main aside,
body.sa-admin-body .sa-admin-content aside,
body.sa-admin-body .setting-sidebar,
body.sa-admin-body .settings-sidebar,
body.sa-admin-body .settings-nav,
body.sa-admin-body .setting-menu,
body.sa-admin-body .nav-pills,
body.sa-admin-body .settings-tabs {
    color: var(--sa-ink) !important;
}
body.sa-admin-body .sa-admin-main aside :where(a,button,.nav-link,.menu-link,.tab-link),
body.sa-admin-body .sa-admin-content aside :where(a,button,.nav-link,.menu-link,.tab-link),
body.sa-admin-body .setting-sidebar :where(a,button,.nav-link,.menu-link,.tab-link),
body.sa-admin-body .settings-sidebar :where(a,button,.nav-link,.menu-link,.tab-link),
body.sa-admin-body .settings-tabs :where(a,button,.nav-link,.menu-link,.tab-link) {
    color: var(--sa-ink) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}
body.sa-admin-body .setting-sidebar .active,
body.sa-admin-body .settings-sidebar .active,
body.sa-admin-body .settings-tabs .active,
body.sa-admin-body .nav-pills .active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sa-violet), var(--sa-blue), var(--sa-cyan)) !important;
}

/* Hero readability: dark/gradient hero headings must be white. */
.sa-hero,
.sa-admin-hero,
.sandbox-admin-hero,
[class*="sa-hero"] {
    background: radial-gradient(circle at 0 0, rgba(124,58,237,.42), transparent 26%), linear-gradient(135deg, #211246 0%, #0b3142 52%, #58713e 100%) !important;
    color: #ffffff !important;
}
.sa-hero :where(h1,h2,h3,p,.sa-title,.sa-subtitle,.sa-kicker,strong,span),
.sa-admin-hero :where(h1,h2,h3,p,.sa-title,.sa-subtitle,.sa-kicker,strong,span),
.sandbox-admin-hero :where(h1,h2,h3,p,.sa-title,.sa-subtitle,.sa-kicker,strong,span) {
    color: #ffffff !important;
    text-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}
.sa-hero .btn,
.sa-admin-hero .btn,
.sandbox-admin-hero .btn {
    background: #ffffff !important;
    color: var(--sa-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
}

/* Global modern table system: requested style applied platform-wide. */
.sa-table-wrap,
.table-responsive,
.dataTables_wrapper,
body.sa-admin-body .card:has(table),
body.sandbox-portal-body .card:has(table) {
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 28px !important;
    box-shadow: 0 26px 70px rgba(15,23,42,.08) !important;
    overflow: hidden !important;
}
.sa-table-wrap table,
.sa-modern-table,
body.sa-admin-body table,
body.sandbox-portal-body table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}
.sa-table-wrap table thead,
.sa-modern-table thead,
body.sa-admin-body table thead,
body.sandbox-portal-body table thead {
    background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.82)) !important;
}
.sa-table-wrap table th,
.sa-modern-table th,
body.sa-admin-body table th,
body.sandbox-portal-body table th {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 18px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    white-space: nowrap !important;
}
.sa-table-wrap table td,
.sa-modern-table td,
body.sa-admin-body table td,
body.sandbox-portal-body table td {
    color: var(--sa-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
    padding: 18px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15,23,42,.06) !important;
    background: rgba(255,255,255,.70) !important;
}
.sa-table-wrap table tr:last-child td,
.sa-modern-table tr:last-child td,
body.sa-admin-body table tr:last-child td,
body.sandbox-portal-body table tr:last-child td {
    border-bottom: 0 !important;
}
.sa-table-wrap table tbody tr:hover td,
.sa-modern-table tbody tr:hover td,
body.sa-admin-body table tbody tr:hover td,
body.sandbox-portal-body table tbody tr:hover td {
    background: rgba(239,246,255,.92) !important;
}
.sa-table-wrap table td strong,
.sa-modern-table td strong,
body.sa-admin-body table td strong,
body.sandbox-portal-body table td strong {
    display: block !important;
    color: var(--sa-ink) !important;
    font-weight: 900 !important;
}
.sa-table-wrap table td small,
.sa-modern-table td small,
body.sa-admin-body table td small,
body.sandbox-portal-body table td small {
    display: block !important;
    color: var(--sa-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}
.sa-badge,
.badge,
table .badge,
table .sa-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(37,99,235,.10) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37,99,235,.16) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
.sa-empty,
table .sa-empty,
.dataTables_empty {
    min-height: 96px !important;
    border: 1px dashed rgba(100,116,139,.26) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(248,250,252,.95), rgba(255,255,255,.78)) !important;
    color: #64748b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    padding: 28px !important;
    font-weight: 700 !important;
}
.sa-empty strong { color: var(--sa-ink) !important; font-weight: 900 !important; }
.sa-empty span { color: #64748b !important; }
.sa-progress-text { font-weight: 900 !important; color: #2563eb !important; }

/* Form and card polish for old settings/gateway/profile surfaces. */
body.sa-admin-body :where(.card,.card-body,.white-box,.box,.panel,.settings-card,.form-card),
body.sandbox-portal-body :where(.card,.card-body,.white-box,.box,.panel,.settings-card,.form-card) {
    border-radius: 28px !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 24px 64px rgba(15,23,42,.07) !important;
}
body.sa-admin-body :where(input,select,textarea,.form-control,.form-select),
body.sandbox-portal-body :where(input,select,textarea,.form-control,.form-select) {
    border-radius: 18px !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    color: var(--sa-ink) !important;
    background: rgba(255,255,255,.92) !important;
    font-weight: 750 !important;
    min-height: 48px !important;
}
body.sa-admin-body :where(label,.form-label),
body.sandbox-portal-body :where(label,.form-label) {
    color: var(--sa-ink) !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}
body.sa-admin-body :where(.btn-primary,.primary-btn,.theme-btn),
body.sandbox-portal-body :where(.btn-primary,.primary-btn,.theme-btn) {
    background: linear-gradient(135deg, var(--sa-violet), var(--sa-blue), var(--sa-cyan)) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    box-shadow: 0 18px 38px rgba(37,99,235,.22) !important;
}

/* DataTables controls match modern table cards. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 999px !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    padding: 10px 14px !important;
    background: #fff !important;
    color: var(--sa-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    background: #fff !important;
    color: var(--sa-ink) !important;
    font-weight: 800 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, var(--sa-violet), var(--sa-blue), var(--sa-cyan)) !important;
    color: #fff !important;
}

@media (max-width: 991px) {
    .sa-table-wrap,
    .table-responsive,
    .dataTables_wrapper { overflow-x: auto !important; }
    .sa-table-wrap table th,
    .sa-table-wrap table td,
    body.sa-admin-body table th,
    body.sa-admin-body table td { padding: 14px 16px !important; }
}