/*
 * sibakul-ui-standard.css
 * Shared UI/UX standards for active /umkm Laravel pages.
 * Loaded after legacy page CSS so it can normalize common Bootstrap elements
 * without changing page logic.
 */

:root {
    --sib-ui-font: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --sib-ui-green: #16a34a;
    --sib-ui-green-dark: #15803d;
    --sib-ui-green-soft: #f0fdf4;
    --sib-ui-yellow: #eab308;
    --sib-ui-ink: #0f172a;
    --sib-ui-muted: #64748b;
    --sib-ui-line: #e2e8f0;
    --sib-ui-page: #f8fafc;
    --sib-ui-card: #ffffff;
    --sib-ui-danger: #dc2626;
    --sib-ui-warning: #d97706;
    --sib-ui-info: #0284c7;
    --sib-ui-success: #16a34a;
    --sib-ui-radius-sm: 6px;
    --sib-ui-radius-md: 8px;
    --sib-ui-radius-lg: 12px;
    --sib-ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sib-ui-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --sib-ui-focus: 0 0 0 0.2rem rgba(22, 163, 74, 0.18);
}

body.sb-app,
body.sb-public,
body.sb-dashboard,
body.sb-olahdata,
body.sb-tm {
    font-family: var(--sib-ui-font);
    color: var(--sib-ui-ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.sb-dashboard,
body.sb-olahdata,
body.sb-tm {
    background: var(--sib-ui-page);
}

body.sb-app *,
body.sb-app *::before,
body.sb-app *::after,
body.sb-public *,
body.sb-public *::before,
body.sb-public *::after,
body.sb-dashboard *,
body.sb-dashboard *::before,
body.sb-dashboard *::after,
body.sb-olahdata *,
body.sb-olahdata *::before,
body.sb-olahdata *::after,
body.sb-tm *,
body.sb-tm *::before,
body.sb-tm *::after {
    box-sizing: border-box;
}

body.sb-dashboard .main-content,
body.sb-olahdata .main-content {
    padding-top: 24px;
    padding-bottom: 96px;
}

body.sb-dashboard #mainContent,
body.sb-olahdata #mainContent {
    min-width: 0;
}

body.sb-app h1,
body.sb-public h1,
body.sb-dashboard h1,
body.sb-olahdata h1,
body.sb-tm h1 {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-app h2,
body.sb-public h2,
body.sb-dashboard h2,
body.sb-olahdata h2,
body.sb-tm h2 {
    font-size: clamp(1.35rem, 2vw, 1.875rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-app h3,
body.sb-public h3,
body.sb-dashboard h3,
body.sb-olahdata h3,
body.sb-tm h3,
body.sb-app h4,
body.sb-public h4,
body.sb-dashboard h4,
body.sb-olahdata h4,
body.sb-tm h4 {
    letter-spacing: 0;
    font-weight: 700;
}

body.sb-app .card,
body.sb-public .card,
body.sb-dashboard .card,
body.sb-olahdata .card,
body.sb-tm .card,
body.sb-app .modern-card,
body.sb-dashboard .dashboard-card,
body.sb-olahdata .dashboard-card {
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: var(--sib-ui-radius-lg) !important;
    box-shadow: var(--sib-ui-shadow-sm) !important;
}

body.sb-app .card:hover,
body.sb-public .card:hover,
body.sb-dashboard .card:hover,
body.sb-olahdata .card:hover,
body.sb-tm .card:hover {
    transform: none !important;
}

body.sb-app .card-header,
body.sb-public .card-header,
body.sb-dashboard .card-header,
body.sb-olahdata .card-header,
body.sb-tm .card-header {
    border-bottom-color: var(--sib-ui-line);
    font-weight: 700;
}

body.sb-app .btn,
body.sb-public .btn,
body.sb-dashboard .btn,
body.sb-olahdata .btn,
body.sb-tm .btn {
    border-radius: var(--sib-ui-radius-md);
    font-weight: 700;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    letter-spacing: 0;
}

body.sb-app .btn-sm,
body.sb-public .btn-sm,
body.sb-dashboard .btn-sm,
body.sb-olahdata .btn-sm,
body.sb-tm .btn-sm {
    min-height: 34px;
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
}

body.sb-app .btn-primary,
body.sb-public .btn-primary,
body.sb-dashboard .btn-primary,
body.sb-olahdata .btn-primary,
body.sb-tm .btn-primary,
body.sb-app .btn-success,
body.sb-public .btn-success,
body.sb-dashboard .btn-success,
body.sb-olahdata .btn-success,
body.sb-tm .btn-success {
    background: var(--sib-ui-green);
    border-color: var(--sib-ui-green);
    color: #fff;
}

body.sb-app .btn-primary:hover,
body.sb-public .btn-primary:hover,
body.sb-dashboard .btn-primary:hover,
body.sb-olahdata .btn-primary:hover,
body.sb-tm .btn-primary:hover,
body.sb-app .btn-success:hover,
body.sb-public .btn-success:hover,
body.sb-dashboard .btn-success:hover,
body.sb-olahdata .btn-success:hover,
body.sb-tm .btn-success:hover {
    background: var(--sib-ui-green-dark);
    border-color: var(--sib-ui-green-dark);
    color: #fff;
}

body.sb-app .btn-outline-primary,
body.sb-public .btn-outline-primary,
body.sb-dashboard .btn-outline-primary,
body.sb-olahdata .btn-outline-primary,
body.sb-tm .btn-outline-primary,
body.sb-app .btn-outline-success,
body.sb-public .btn-outline-success,
body.sb-dashboard .btn-outline-success,
body.sb-olahdata .btn-outline-success,
body.sb-tm .btn-outline-success {
    color: var(--sib-ui-green);
    border-color: var(--sib-ui-green);
    background: transparent;
}

body.sb-app .btn-outline-primary:hover,
body.sb-public .btn-outline-primary:hover,
body.sb-dashboard .btn-outline-primary:hover,
body.sb-olahdata .btn-outline-primary:hover,
body.sb-tm .btn-outline-primary:hover,
body.sb-app .btn-outline-success:hover,
body.sb-public .btn-outline-success:hover,
body.sb-dashboard .btn-outline-success:hover,
body.sb-olahdata .btn-outline-success:hover,
body.sb-tm .btn-outline-success:hover {
    background: var(--sib-ui-green);
    border-color: var(--sib-ui-green);
    color: #fff;
}

body.sb-app .form-label,
body.sb-public .form-label,
body.sb-dashboard .form-label,
body.sb-olahdata .form-label,
body.sb-tm .form-label,
body.sb-app label,
body.sb-public label,
body.sb-dashboard label,
body.sb-olahdata label,
body.sb-tm label {
    font-weight: 700;
    color: #334155;
}

body.sb-app .form-control,
body.sb-public .form-control,
body.sb-dashboard .form-control,
body.sb-olahdata .form-control,
body.sb-tm .form-control,
body.sb-app .form-select,
body.sb-public .form-select,
body.sb-dashboard .form-select,
body.sb-olahdata .form-select,
body.sb-tm .form-select {
    border-color: #cbd5e1;
    border-radius: var(--sib-ui-radius-md);
    min-height: 40px;
    font-size: 0.95rem;
}

body.sb-app .form-control:focus,
body.sb-public .form-control:focus,
body.sb-dashboard .form-control:focus,
body.sb-olahdata .form-control:focus,
body.sb-tm .form-control:focus,
body.sb-app .form-select:focus,
body.sb-public .form-select:focus,
body.sb-dashboard .form-select:focus,
body.sb-olahdata .form-select:focus,
body.sb-tm .form-select:focus {
    border-color: var(--sib-ui-green);
    box-shadow: var(--sib-ui-focus);
}

body.sb-dashboard .table,
body.sb-olahdata .table,
body.sb-tm .table {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #f0fdf4;
    border-color: var(--sib-ui-line);
    font-size: 0.92rem;
}

body.sb-dashboard .table thead th,
body.sb-olahdata .table thead th,
body.sb-tm .table thead th {
    background: #ecfdf5 !important;
    color: #14532d !important;
    border-bottom: 1px solid #bbf7d0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.sb-dashboard .table td,
body.sb-olahdata .table td,
body.sb-tm .table td {
    vertical-align: middle;
}

body.sb-dashboard .badge.bg-primary,
body.sb-olahdata .badge.bg-primary,
body.sb-tm .badge.bg-primary {
    background-color: var(--sib-ui-green) !important;
}

body.sb-dashboard .alert,
body.sb-olahdata .alert,
body.sb-tm .alert,
body.sb-app .alert,
body.sb-public .alert {
    border-radius: var(--sib-ui-radius-lg);
    border-width: 1px;
}

body.sb-dashboard .modal-content,
body.sb-olahdata .modal-content,
body.sb-tm .modal-content,
body.sb-app .modal-content,
body.sb-public .modal-content {
    border: 0;
    border-radius: var(--sib-ui-radius-lg);
    box-shadow: var(--sib-ui-shadow-md);
}

body.sb-dashboard .modal-header,
body.sb-olahdata .modal-header,
body.sb-tm .modal-header,
body.sb-app .modal-header,
body.sb-public .modal-header {
    border-bottom-color: var(--sib-ui-line);
}

body.sb-dashboard .page-header-umkm,
body.sb-olahdata .page-header-umkm,
body.sb-dashboard .page-header-modern,
body.sb-olahdata .page-header-modern,
body.sb-dashboard .header-section,
body.sb-olahdata .header-section {
    background: linear-gradient(135deg, var(--sib-ui-green), var(--sib-ui-green-dark)) !important;
    border-radius: var(--sib-ui-radius-lg) !important;
    color: #fff !important;
    box-shadow: var(--sib-ui-shadow-sm) !important;
}

body.sb-dashboard .page-header-umkm,
body.sb-olahdata .page-header-umkm,
body.sb-dashboard .page-header-modern,
body.sb-olahdata .page-header-modern,
body.sb-dashboard .header-section,
body.sb-olahdata .header-section,
body.sb-dashboard .sib-page-header,
body.sb-olahdata .sib-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding: 1rem 1.25rem;
}

body.sb-dashboard .page-header-umkm h1,
body.sb-dashboard .page-header-umkm h2,
body.sb-dashboard .page-header-umkm h3,
body.sb-dashboard .page-header-umkm h4,
body.sb-olahdata .page-header-umkm h1,
body.sb-olahdata .page-header-umkm h2,
body.sb-olahdata .page-header-umkm h3,
body.sb-olahdata .page-header-umkm h4,
body.sb-dashboard .page-header-modern h1,
body.sb-dashboard .page-header-modern h2,
body.sb-dashboard .page-header-modern h3,
body.sb-dashboard .page-header-modern h4,
body.sb-olahdata .page-header-modern h1,
body.sb-olahdata .page-header-modern h2,
body.sb-olahdata .page-header-modern h3,
body.sb-olahdata .page-header-modern h4,
body.sb-dashboard .header-section h1,
body.sb-dashboard .header-section h2,
body.sb-dashboard .header-section h3,
body.sb-dashboard .header-section h4,
body.sb-olahdata .header-section h1,
body.sb-olahdata .header-section h2,
body.sb-olahdata .header-section h3,
body.sb-olahdata .header-section h4,
body.sb-dashboard .sib-page-header h1,
body.sb-dashboard .sib-page-header h2,
body.sb-dashboard .sib-page-header h3,
body.sb-dashboard .sib-page-header h4,
body.sb-olahdata .sib-page-header h1,
body.sb-olahdata .sib-page-header h2,
body.sb-olahdata .sib-page-header h3,
body.sb-olahdata .sib-page-header h4 {
    margin: 0;
    color: inherit;
}

body.sb-dashboard .sib-toolbar,
body.sb-olahdata .sib-toolbar,
body.sb-dashboard .sib-filter-bar,
body.sb-olahdata .sib-filter-bar,
body.sb-dashboard .filter-card,
body.sb-olahdata .filter-card,
body.sb-dashboard .filter-section,
body.sb-olahdata .filter-section {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--sib-ui-radius-lg);
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-dashboard .sib-toolbar > *,
body.sb-olahdata .sib-toolbar > *,
body.sb-dashboard .sib-filter-bar > *,
body.sb-olahdata .sib-filter-bar > *,
body.sb-dashboard .filter-card > *,
body.sb-olahdata .filter-card > *,
body.sb-dashboard .filter-section > *,
body.sb-olahdata .filter-section > * {
    min-width: 0;
}

body.sb-dashboard .sib-section-head,
body.sb-olahdata .sib-section-head,
body.sb-dashboard .afiliator-card-head,
body.sb-olahdata .afiliator-card-head,
body.sb-dashboard .card-title-row,
body.sb-olahdata .card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

body.sb-dashboard .sib-section-head h1,
body.sb-dashboard .sib-section-head h2,
body.sb-dashboard .sib-section-head h3,
body.sb-dashboard .sib-section-head h4,
body.sb-dashboard .sib-section-head h5,
body.sb-dashboard .sib-section-head h6,
body.sb-olahdata .sib-section-head h1,
body.sb-olahdata .sib-section-head h2,
body.sb-olahdata .sib-section-head h3,
body.sb-olahdata .sib-section-head h4,
body.sb-olahdata .sib-section-head h5,
body.sb-olahdata .sib-section-head h6,
body.sb-dashboard .afiliator-card-head h1,
body.sb-dashboard .afiliator-card-head h2,
body.sb-dashboard .afiliator-card-head h3,
body.sb-dashboard .afiliator-card-head h4,
body.sb-dashboard .afiliator-card-head h5,
body.sb-dashboard .afiliator-card-head h6,
body.sb-olahdata .afiliator-card-head h1,
body.sb-olahdata .afiliator-card-head h2,
body.sb-olahdata .afiliator-card-head h3,
body.sb-olahdata .afiliator-card-head h4,
body.sb-olahdata .afiliator-card-head h5,
body.sb-olahdata .afiliator-card-head h6 {
    margin: 0;
}

body.sb-dashboard .table-responsive,
body.sb-olahdata .table-responsive,
body.sb-tm .table-responsive {
    border: 1px solid var(--sib-ui-line);
    border-radius: var(--sib-ui-radius-lg);
    background: #fff;
}

body.sb-dashboard .table-responsive > .table,
body.sb-olahdata .table-responsive > .table,
body.sb-tm .table-responsive > .table {
    margin-bottom: 0;
}

body.sb-dashboard .sib-action-group,
body.sb-olahdata .sib-action-group,
body.sb-dashboard .afiliator-card-actions,
body.sb-olahdata .afiliator-card-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

body.sb-dashboard .sib-action-group .btn,
body.sb-olahdata .sib-action-group .btn,
body.sb-dashboard .table .btn,
body.sb-olahdata .table .btn,
body.sb-tm .table .btn {
    white-space: nowrap;
}

body.sb-dashboard .sib-empty-state,
body.sb-olahdata .sib-empty-state,
body.sb-dashboard .empty-state,
body.sb-olahdata .empty-state,
body.sb-dashboard .overview-empty,
body.sb-olahdata .overview-empty,
body.sb-dashboard .pb-empty,
body.sb-olahdata .pb-empty {
    padding: 2rem 1.25rem !important;
    text-align: center;
    color: var(--sib-ui-muted);
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: var(--sib-ui-radius-lg);
}

body.sb-dashboard .sib-empty-state i,
body.sb-olahdata .sib-empty-state i,
body.sb-dashboard .empty-state i,
body.sb-olahdata .empty-state i,
body.sb-dashboard .pb-empty i,
body.sb-olahdata .pb-empty i {
    display: block;
    margin-bottom: 0.65rem;
    color: #94a3b8;
    font-size: 2rem;
}

body.sb-dashboard .sib-empty-state p,
body.sb-olahdata .sib-empty-state p,
body.sb-dashboard .empty-state p,
body.sb-olahdata .empty-state p,
body.sb-dashboard .overview-empty p,
body.sb-olahdata .overview-empty p,
body.sb-dashboard .pb-empty p,
body.sb-olahdata .pb-empty p {
    margin-bottom: 0;
}

body.sb-dashboard .sib-stat-grid,
body.sb-olahdata .sib-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.875rem;
}

body.sb-dashboard .sib-stat-card,
body.sb-olahdata .sib-stat-card {
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--sib-ui-radius-lg);
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-dashboard .sib-muted,
body.sb-olahdata .sib-muted,
body.sb-tm .sib-muted,
body.sb-app .sib-muted,
body.sb-public .sib-muted {
    color: var(--sib-ui-muted);
}

body.sb-public {
    background: #fff;
}

body.sb-public .af-topbar,
body.sb-public .cc-topbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

body.sb-public .af-topbar a,
body.sb-public .cc-topbar a {
    color: #475569;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
}

body.sb-public .af-topbar a:hover,
body.sb-public .cc-topbar a:hover {
    color: var(--sib-ui-green);
    background: var(--sib-ui-green-soft);
}

body.sb-public .af-hero,
body.sb-public .cc-hero {
    background: linear-gradient(135deg, var(--sib-ui-green) 0%, var(--sib-ui-green-dark) 100%);
    color: #fff;
    padding-top: 48px;
    padding-bottom: 48px;
}

body.sb-public .af-hero h1,
body.sb-public .cc-hero h1 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.12;
}

body.sb-public .af-hero p,
body.sb-public .cc-hero p {
    font-size: 1rem;
    line-height: 1.7;
}

body.sb-public .af-hero-cta,
body.sb-public .cc-hero-cta {
    min-height: 44px;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

body.sb-public .cc-tab-btn {
    min-height: 40px;
}

body.sb-public .af-body,
body.sb-public .cc-body {
    max-width: 1180px;
}

body.sb-public .af-search,
body.sb-public .cc-search {
    padding: 0.75rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-public .af-search input,
body.sb-public .cc-search input {
    min-height: 44px;
    border-color: #cbd5e1;
}

body.sb-public .af-search button,
body.sb-public .cc-search button {
    min-height: 44px;
    border-radius: 12px;
    background: var(--sib-ui-green);
}

body.sb-public .af-card,
body.sb-public .cc-card,
body.sb-public .produk-card,
body.sb-public .profile-card,
body.sb-public .co-card {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-public .af-card:hover,
body.sb-public .cc-card:hover,
body.sb-public .produk-card:hover {
    box-shadow: var(--sib-ui-shadow-md);
}

body.sb-public .af-empty,
body.sb-public .cc-empty {
    color: var(--sib-ui-muted);
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}

body.sb-public .af-paging a,
body.sb-public .cc-paging a {
    border-radius: 10px;
}

body.sb-public .af-paging a.active,
body.sb-public .cc-paging a.active {
    background: var(--sib-ui-green);
    border-color: var(--sib-ui-green);
}

body.sb-dashboard a:not(.btn),
body.sb-olahdata a:not(.btn),
body.sb-tm a:not(.btn),
body.sb-app a:not(.btn),
body.sb-public a:not(.btn) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
    body.sb-app .btn,
    body.sb-public .btn,
    body.sb-dashboard .btn,
    body.sb-olahdata .btn,
    body.sb-tm .btn {
        min-height: 44px;
    }

    body.sb-app input,
    body.sb-public input,
    body.sb-dashboard input,
    body.sb-olahdata input,
    body.sb-tm input,
    body.sb-app select,
    body.sb-public select,
    body.sb-dashboard select,
    body.sb-olahdata select,
    body.sb-tm select,
    body.sb-app textarea,
    body.sb-public textarea,
    body.sb-dashboard textarea,
    body.sb-olahdata textarea,
    body.sb-tm textarea {
        font-size: 16px !important;
    }

    body.sb-dashboard .page-header-umkm,
    body.sb-olahdata .page-header-umkm,
    body.sb-dashboard .page-header-modern,
    body.sb-olahdata .page-header-modern,
    body.sb-dashboard .header-section,
    body.sb-olahdata .header-section,
    body.sb-dashboard .sib-page-header,
    body.sb-olahdata .sib-page-header,
    body.sb-dashboard .sib-section-head,
    body.sb-olahdata .sib-section-head,
    body.sb-dashboard .afiliator-card-head,
    body.sb-olahdata .afiliator-card-head,
    body.sb-dashboard .card-title-row,
    body.sb-olahdata .card-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    body.sb-dashboard .sib-toolbar,
    body.sb-olahdata .sib-toolbar,
    body.sb-dashboard .sib-filter-bar,
    body.sb-olahdata .sib-filter-bar,
    body.sb-dashboard .filter-card,
    body.sb-olahdata .filter-card,
    body.sb-dashboard .filter-section,
    body.sb-olahdata .filter-section {
        align-items: stretch;
    }

    body.sb-public .af-search,
    body.sb-public .cc-search {
        flex-direction: column;
    }

    body.sb-public .af-search button,
    body.sb-public .cc-search button {
        width: 100%;
    }
}

/* Olah-data global standardization */
body.sb-olahdata {
    --primary-color: var(--sib-ui-green);
    --primary-hover: var(--sib-ui-green-dark);
    --secondary-color: #64748b;
    --secondary-hover: #475569;
    --danger-color: var(--sib-ui-danger);
    --danger-hover: #b91c1c;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --success-color: var(--sib-ui-green);
    --success-hover: var(--sib-ui-green-dark);
    --info-color: var(--sib-ui-info);
    --info-hover: #0369a1;
    --accent-color: var(--sib-ui-yellow);
    --text-color: var(--sib-ui-ink);
    --light-bg: var(--sib-ui-page);
    --card-bg: #fff;
    --border-color: var(--sib-ui-line);
    --shadow-sm: var(--sib-ui-shadow-sm);
    --shadow-md: var(--sib-ui-shadow-sm);
    --shadow-lg: var(--sib-ui-shadow-md);
    --radius-sm: var(--sib-ui-radius-sm);
    --radius-md: var(--sib-ui-radius-md);
    --radius-lg: var(--sib-ui-radius-lg);
    min-width: 0 !important;
    max-width: none !important;
    background: var(--sib-ui-page) !important;
    box-shadow: none !important;
    overflow-x: hidden;
}

body.sb-olahdata .main-content {
    width: 100%;
    max-width: 1440px;
    padding: 24px clamp(16px, 3vw, 40px) 96px;
}

body.sb-olahdata #mainContent > .d-flex:first-child,
body.sb-olahdata #mainContent > .d-flex.justify-content-between:first-child,
body.sb-olahdata .page-toolbar,
body.sb-olahdata .page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem !important;
    padding: 0.25rem 0;
}

body.sb-olahdata #mainContent > .d-flex:first-child h1,
body.sb-olahdata #mainContent > .d-flex:first-child h2,
body.sb-olahdata #mainContent > .d-flex:first-child h3,
body.sb-olahdata #mainContent > .d-flex:first-child h4,
body.sb-olahdata #mainContent > .d-flex:first-child h5 {
    margin-bottom: 0;
    color: var(--sib-ui-ink);
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-olahdata #mainContent > .d-flex:first-child h4,
body.sb-olahdata #mainContent > .d-flex:first-child h5 {
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
}

body.sb-olahdata .sib-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

body.sb-olahdata .sib-page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--sib-ui-ink);
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-olahdata .sib-page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--sib-ui-muted);
    font-size: 0.92rem;
}

body.sb-olahdata .sib-page-actions,
body.sb-olahdata .sib-card-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.sb-olahdata .sib-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body.sb-olahdata .sib-filter-card .card-body {
    padding: 1rem !important;
}

body.sb-olahdata .navbar,
body.sb-olahdata .mobile-footer {
    max-width: none;
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-olahdata .olahdata-app-footer {
    position: relative;
    margin-top: 0;
    padding: 2.25rem 0 2.35rem;
    overflow: hidden;
    color: #f8fafc;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(234, 179, 8, 0.12)),
        linear-gradient(135deg, #0f172a 0%, #14532d 58%, #2f5f24 100%);
    border-top: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.sb-olahdata .olahdata-app-footer::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: 0.35;
}

body.sb-olahdata .olahdata-app-footer > .container {
    position: relative;
    z-index: 1;
}

body.sb-olahdata .olahdata-app-footer h5 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
}

body.sb-olahdata .olahdata-app-footer p,
body.sb-olahdata .olahdata-app-footer small {
    line-height: 1.55;
}

body.sb-olahdata .olahdata-app-footer .text-muted {
    color: rgba(241, 245, 249, 0.76) !important;
}

body.sb-olahdata .olahdata-app-footer a {
    color: #fde68a;
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: 2px;
}

body.sb-olahdata .olahdata-app-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

body.sb-olahdata .olahdata-app-footer img {
    max-width: 210px;
    height: auto;
    padding: 0.45rem 0.65rem;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}

body.sb-olahdata .olahdata-app-footer .row {
    row-gap: 1rem;
}

body.sb-olahdata .olahdata-app-footer .col-md-4 {
    min-width: 0;
}

body.sb-olahdata .olahdata-app-footer hr {
    border-color: rgba(255, 255, 255, 0.22) !important;
    opacity: 1 !important;
}

body.sb-olahdata .olahdata-app-footer .bi {
    color: #bbf7d0 !important;
}

body.sb-olahdata .page-title,
body.sb-olahdata .section-title {
    color: var(--sib-ui-ink);
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-olahdata .page-title {
    margin-bottom: 1rem;
    font-size: clamp(1.35rem, 2vw, 1.875rem);
}

body.sb-olahdata .section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

body.sb-olahdata .card-section,
body.sb-olahdata .chart-card,
body.sb-olahdata .info-card,
body.sb-olahdata .metric-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: var(--sib-ui-radius-lg) !important;
    box-shadow: var(--sib-ui-shadow-sm) !important;
}

body.sb-olahdata .chart-card,
body.sb-olahdata .info-card,
body.sb-olahdata .metric-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

body.sb-olahdata .card-header-custom,
body.sb-olahdata .card-section > .card-header,
body.sb-olahdata .chart-card > .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--sib-ui-line) !important;
    color: var(--sib-ui-ink) !important;
    font-weight: 800;
}

body.sb-olahdata .card-header-custom h1,
body.sb-olahdata .card-header-custom h2,
body.sb-olahdata .card-header-custom h3,
body.sb-olahdata .card-header-custom h4,
body.sb-olahdata .card-header-custom h5,
body.sb-olahdata .card-header-custom h6,
body.sb-olahdata .card-header h1,
body.sb-olahdata .card-header h2,
body.sb-olahdata .card-header h3,
body.sb-olahdata .card-header h4,
body.sb-olahdata .card-header h5,
body.sb-olahdata .card-header h6 {
    color: var(--sib-ui-ink);
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-olahdata .summary-card,
body.sb-olahdata .stats-card {
    position: relative;
    min-height: 112px;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--sib-ui-radius-lg);
    background: #fff !important;
    color: var(--sib-ui-ink) !important;
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-olahdata .summary-card.bg-primary,
body.sb-olahdata .stats-card.bg-primary {
    border-left: 4px solid var(--sib-ui-green);
}

body.sb-olahdata .summary-card.bg-success,
body.sb-olahdata .stats-card.bg-success {
    border-left: 4px solid var(--sib-ui-success);
}

body.sb-olahdata .summary-card.bg-warning,
body.sb-olahdata .stats-card.bg-warning {
    border-left: 4px solid var(--sib-ui-warning);
}

body.sb-olahdata .summary-card.bg-danger,
body.sb-olahdata .stats-card.bg-danger {
    border-left: 4px solid var(--sib-ui-danger);
}

body.sb-olahdata .summary-card.bg-info,
body.sb-olahdata .stats-card.bg-info {
    border-left: 4px solid var(--sib-ui-info);
}

body.sb-olahdata .summary-card.text-white,
body.sb-olahdata .stats-card.text-white,
body.sb-olahdata .summary-card.text-white *,
body.sb-olahdata .stats-card.text-white * {
    color: var(--sib-ui-ink) !important;
}

body.sb-olahdata .filter-card .card-body,
body.sb-olahdata .filter-section,
body.sb-olahdata .card.mb-3 > .card-body:has(form.row) {
    background: #fff !important;
}

body.sb-olahdata .filter-section form,
body.sb-olahdata .filter-card form,
body.sb-olahdata .card.mb-3 > .card-body > form.row {
    width: 100%;
}

body.sb-olahdata .card.mb-3 > .card-body:has(form.row) {
    padding: 1rem !important;
}

body.sb-olahdata .form-label-sm,
body.sb-olahdata .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.25;
}

body.sb-olahdata .form-control-sm,
body.sb-olahdata .form-select-sm {
    min-height: 38px;
    border-radius: var(--sib-ui-radius-md);
    font-size: 0.9rem;
}

body.sb-olahdata .nav-tabs {
    gap: 0.4rem;
    border-bottom: 1px solid var(--sib-ui-line) !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0;
}

body.sb-olahdata .nav-tabs .nav-link,
body.sb-olahdata .nav-tabs-custom .nav-link {
    min-height: 42px;
    white-space: nowrap;
    border: 1px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    border-radius: var(--sib-ui-radius-md) var(--sib-ui-radius-md) 0 0 !important;
    color: #475569 !important;
    background: transparent !important;
    font-weight: 800 !important;
    padding: 0.65rem 0.9rem !important;
}

body.sb-olahdata .nav-tabs .nav-link:hover,
body.sb-olahdata .nav-tabs-custom .nav-link:hover {
    color: var(--sib-ui-green) !important;
    border-bottom-color: #bbf7d0 !important;
}

body.sb-olahdata .nav-tabs .nav-link.active,
body.sb-olahdata .nav-tabs-custom .nav-link.active,
body.sb-olahdata .tab-diajukan .nav-link.active,
body.sb-olahdata .tab-verified .nav-link.active,
body.sb-olahdata .tab-rejected .nav-link.active {
    color: var(--sib-ui-green) !important;
    background: #fff !important;
    border-color: var(--sib-ui-line) var(--sib-ui-line) #fff !important;
    border-bottom-color: var(--sib-ui-green) !important;
}

body.sb-olahdata .nav-tabs .badge,
body.sb-olahdata .nav-tabs-custom .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    min-height: 1.35rem;
    padding: 0.2rem 0.45rem !important;
    border-radius: 999px;
    font-size: 0.72rem !important;
    font-weight: 800;
}

body.sb-olahdata .dashboard-menu-item {
    display: flex !important;
    width: 100%;
    height: 100%;
    min-height: 176px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--sib-ui-ink);
    background: #fff;
    border-color: rgba(226, 232, 240, 0.9) !important;
    border-radius: var(--sib-ui-radius-lg) !important;
    box-shadow: var(--sib-ui-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sb-olahdata .dashboard-menu-item:hover {
    color: var(--sib-ui-green);
    border-color: #bbf7d0 !important;
    box-shadow: var(--sib-ui-shadow-md);
    transform: none;
}

body.sb-olahdata .siomset-dashboard {
    display: grid;
    gap: 1rem;
}

body.sb-olahdata .siomset-hero {
    position: relative;
    overflow: hidden;
    margin: -0.25rem -0.25rem 0;
    padding: 1.25rem;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 45%),
        linear-gradient(135deg, #0f172a 0%, #14532d 55%, #2f6b27 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}

body.sb-olahdata .siomset-hero::after {
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    pointer-events: none;
    content: "";
    background: radial-gradient(circle, rgba(250, 204, 21, 0.24), transparent 62%);
}

body.sb-olahdata .siomset-hero-copy,
body.sb-olahdata .siomset-toolbar {
    position: relative;
    z-index: 1;
}

body.sb-olahdata .siomset-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    color: #bbf7d0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.sb-olahdata .siomset-hero h4 {
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.15;
}

body.sb-olahdata .siomset-hero small {
    color: rgba(241, 245, 249, 0.82);
}

body.sb-olahdata .siomset-toolbar {
    padding: 0.55rem;
    color: rgba(241, 245, 249, 0.88);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    backdrop-filter: blur(6px);
}

body.sb-olahdata .siomset-toolbar .form-label {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.28rem 0.58rem;
    color: #f8fafc !important;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}

body.sb-olahdata .siomset-toolbar .form-select {
    width: 150px;
    color: #0f172a;
    background-color: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.28);
}

body.sb-olahdata .siomset-updated strong {
    color: #fff;
}

body.sb-olahdata .siomset-deadline {
    margin-top: 0 !important;
    border-width: 1px !important;
    border-radius: 12px !important;
    box-shadow: var(--sib-ui-shadow-sm);
}

body.sb-olahdata .siomset-kpi-grid {
    margin-bottom: 0.35rem !important;
}

body.sb-olahdata .siomset-kpi {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

body.sb-olahdata .siomset-kpi::after {
    position: absolute;
    top: -35px;
    right: -35px;
    width: 120px;
    height: 120px;
    content: "";
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

body.sb-olahdata .siomset-kpi .card-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

body.sb-olahdata .siomset-kpi-primary {
    background: linear-gradient(135deg, #0d6efd, #1559d6) !important;
}

body.sb-olahdata .siomset-kpi-success {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

body.sb-olahdata .siomset-kpi-danger {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
}

body.sb-olahdata .siomset-kpi-compliance {
    color: var(--sib-ui-ink);
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    border: 1px solid rgba(125, 211, 252, 0.8) !important;
}

body.sb-olahdata .siomset-dashboard .card-section {
    overflow: hidden;
    border-radius: 14px !important;
}

body.sb-olahdata .siomset-dashboard .card-header-custom {
    background: linear-gradient(180deg, #fff, #f8fafc);
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

body.sb-olahdata .siomset-dashboard .card-header-custom h5 {
    font-size: 1.02rem;
}

body.sb-olahdata .siomset-dashboard .border.rounded-3 {
    background: #f8fafc;
    border-color: rgba(203, 213, 225, 0.85) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body.sb-olahdata .siomset-dashboard canvas {
    max-height: 320px;
}

body.sb-olahdata .menu-grid {
    align-items: stretch;
}

body.sb-olahdata .menu-grid > [class*="col"] {
    display: flex;
}

body.sb-olahdata .dashboard-menu-item .icon-wrapper {
    flex: 0 0 44px;
    margin-bottom: 0.75rem !important;
}

body.sb-olahdata .dashboard-menu-item h6 {
    display: flex;
    min-height: 2.65em;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.45rem !important;
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-align: center;
}

body.sb-olahdata .dashboard-menu-item small {
    display: -webkit-box;
    min-height: 4.25em;
    overflow: hidden;
    line-height: 1.42;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 575.98px) {
    body.sb-olahdata .dashboard-menu-item {
        min-height: 164px;
    }

    body.sb-olahdata .dashboard-menu-item small {
        min-height: 3.95em;
    }
}

body.sb-olahdata .btn-group {
    gap: 0.35rem;
    flex-wrap: wrap;
}

body.sb-olahdata .btn-group > .btn {
    border-radius: var(--sib-ui-radius-md) !important;
}

body.sb-olahdata .btn-verif,
body.sb-olahdata .table .btn-verif,
body.sb-olahdata .table .btn.btn-sm,
body.sb-olahdata .table button.btn {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.9rem !important;
}

body.sb-olahdata .btn-secondary,
body.sb-olahdata .btn-outline-secondary:hover {
    background-color: #64748b;
    border-color: #64748b;
    color: #fff;
}

body.sb-olahdata .btn-warning {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #111827;
}

body.sb-olahdata .btn-danger {
    background-color: var(--sib-ui-danger);
    border-color: var(--sib-ui-danger);
    color: #fff;
}

body.sb-olahdata .btn-info {
    background-color: var(--sib-ui-info);
    border-color: var(--sib-ui-info);
    color: #fff;
}

body.sb-olahdata .pagination {
    gap: 0.25rem;
}

body.sb-olahdata .page-link {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem !important;
    border-radius: var(--sib-ui-radius-md) !important;
    color: var(--sib-ui-green);
    border-color: var(--sib-ui-line);
    font-weight: 700;
    font-size: 0.86rem !important;
}

body.sb-olahdata .page-item.active .page-link {
    background: var(--sib-ui-green);
    border-color: var(--sib-ui-green);
    color: #fff;
}

body.sb-olahdata .page-item.disabled .page-link {
    color: #94a3b8;
}

body.sb-olahdata .paging-info,
body.sb-olahdata .paging-info-inner,
body.sb-olahdata [id^="pagingInfo"] {
    color: var(--sib-ui-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

body.sb-olahdata [id^="pagingNav"] .pagination .page-link,
body.sb-olahdata .paging-nav .pagination .page-link,
body.sb-olahdata .paging-nav-inner .pagination .page-link,
body.sb-olahdata .paging-wrapper nav .pagination .page-link {
    min-width: 34px;
    min-height: 34px;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.86rem !important;
}

body.sb-olahdata .table-responsive {
    overflow-x: auto;
}

body.sb-olahdata .table {
    min-width: 920px;
    color: #1f2937;
}

body.sb-olahdata .table > :not(caption) > * > * {
    padding: 0.75rem;
}

body.sb-olahdata .table-sm > :not(caption) > * > * {
    padding: 0.55rem 0.65rem;
}

body.sb-olahdata .table-bordered > :not(caption) > * {
    border-width: 0;
}

body.sb-olahdata .table-bordered > :not(caption) > * > * {
    border-color: var(--sib-ui-line);
}

body.sb-olahdata .table tbody strong {
    color: var(--sib-ui-ink);
    font-weight: 800;
}

body.sb-olahdata .table small {
    line-height: 1.45;
}

body.sb-olahdata .table td.text-center,
body.sb-olahdata .table th.text-center {
    text-align: center !important;
}

body.sb-olahdata .table tbody tr:hover > * {
    background: var(--sib-ui-green-soft) !important;
}

body.sb-olahdata .status-badge,
body.sb-olahdata .badge {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0;
}

body.sb-olahdata .tab-section-header {
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 0.45rem !important;
}

body.sb-olahdata .tab-section-header h5 {
    flex: 1 1 220px;
    min-width: 0;
    line-height: 1.3;
}

body.sb-olahdata .tab-section-header .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    max-width: 100%;
    min-height: 1.8rem;
    padding: 0.42rem 0.72rem !important;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

body.sb-olahdata .tab-section-header .badge.bg-secondary,
body.sb-olahdata .tab-section-header .badge.text-secondary {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

body.sb-olahdata .card-header .tab-section-header + p,
body.sb-olahdata .card-header .tab-section-header + .text-muted {
    max-width: 780px;
    line-height: 1.45;
}

body.sb-olahdata .prestasi-score-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
}

body.sb-olahdata .prestasi-score-header > div {
    flex: 1 1 auto;
    min-width: 0;
}

body.sb-olahdata .prestasi-score-action {
    flex: 0 0 auto;
    margin-left: auto;
}

body.sb-olahdata .level-result-badge,
body.sb-olahdata .confidence-result-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px;
    min-height: 28px;
    padding: 0.36rem 0.72rem !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

body.sb-olahdata .level-result-badge {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.36) !important;
}

body.sb-olahdata .confidence-result-badge.is-high {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid rgba(34, 197, 94, 0.38) !important;
}

body.sb-olahdata .confidence-result-badge.is-medium {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid rgba(249, 115, 22, 0.32) !important;
}

body.sb-olahdata .status-badge {
    padding: 0.38rem 0.65rem !important;
    font-size: 0.74rem !important;
}

body.sb-olahdata .badge.bg-success,
body.sb-olahdata .badge.bg-primary {
    background: var(--sib-ui-green) !important;
}

body.sb-olahdata .badge.bg-danger {
    background: var(--sib-ui-danger) !important;
}

body.sb-olahdata .badge.bg-warning {
    background: #f59e0b !important;
    color: #111827 !important;
}

body.sb-olahdata .badge.bg-secondary {
    background: #64748b !important;
}

body.sb-olahdata .tab-section-header .badge.bg-primary,
body.sb-olahdata .tab-section-header .badge.text-primary {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

body.sb-olahdata .tab-section-header .badge.bg-success,
body.sb-olahdata .tab-section-header .badge.text-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

body.sb-olahdata .tab-section-header .badge.bg-danger,
body.sb-olahdata .tab-section-header .badge.text-danger {
    background: #fff1f2 !important;
    color: #be123c !important;
    border: 1px solid rgba(244, 63, 94, 0.28);
}

body.sb-olahdata .tab-section-header .badge.bg-warning,
body.sb-olahdata .tab-section-header .badge.text-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid rgba(245, 158, 11, 0.32);
}

body.sb-olahdata .tab-section-header .badge.bg-dark,
body.sb-olahdata .tab-section-header .badge.text-dark {
    background: #f8fafc !important;
    color: #1f2937 !important;
    border: 1px solid rgba(100, 116, 139, 0.32);
}

body.sb-olahdata .tab-section-header .badge.bg-ungu,
body.sb-olahdata .tab-section-header .badge.text-purple {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(139, 92, 246, 0.28);
}

body.sb-olahdata .tab-section-header .badge.bg-orange,
body.sb-olahdata .tab-section-header .badge.text-orange {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid rgba(249, 115, 22, 0.28);
}

body.sb-olahdata .dashboard-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 112px;
    min-height: 32px;
    padding: 0.42rem 0.82rem !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    flex-shrink: 0;
    box-shadow: none !important;
}

body.sb-olahdata .dashboard-status-badge.is-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.38) !important;
}

body.sb-olahdata .dashboard-status-badge.is-danger {
    background: #fff1f2 !important;
    color: #be123c !important;
    border: 1px solid rgba(244, 63, 94, 0.34) !important;
}

body.sb-olahdata .dashboard-status-badge.is-muted {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid rgba(100, 116, 139, 0.34) !important;
}

body.sb-olahdata .alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

body.sb-olahdata .alert-success {
    background: var(--sib-ui-green-soft);
    border-color: #bbf7d0;
    color: #14532d;
}

body.sb-olahdata .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}

body.sb-olahdata .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #7f1d1d;
}

body.sb-olahdata .table td[colspan].text-muted,
body.sb-olahdata .table td[colspan].text-center {
    padding: 2rem 1rem !important;
    color: var(--sib-ui-muted) !important;
}

@media (max-width: 575.98px) {
    body.sb-olahdata .tab-section-header {
        align-items: stretch !important;
    }

    body.sb-olahdata .tab-section-header .badge {
        width: 100%;
    }
}

body.sb-olahdata .text-purple {
    color: var(--sib-ui-green) !important;
}

body.sb-olahdata .bg-ungu {
    background: var(--sib-ui-green-soft) !important;
}

body.sb-olahdata .chart-container {
    min-height: 260px;
}

body.sb-olahdata canvas {
    max-width: 100%;
}

@media (max-width: 959px) {
    html body.sb-olahdata {
        min-width: 0 !important;
    }

    body.sb-olahdata .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 560px) {
    body.sb-public .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    body.sb-public .hero-stats .stat-card {
        min-width: 0 !important;
        width: 100% !important;
        padding: 16px 8px !important;
    }

    body.sb-public .hero-stats .stat-number {
        font-size: 24px !important;
    }

    body.sb-public .hero-stats .stat-label {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    body.sb-public .flow-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.sb-public .flow-step {
        min-width: 0 !important;
        padding: 18px 12px !important;
        border-radius: 16px !important;
    }

    body.sb-public .flow-step strong {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 16px !important;
        border-radius: 11px !important;
    }

    body.sb-public .flow-step h4 {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    body.sb-public .flow-step p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }
}