/*
|--------------------------------------------------------------------------
| E-APBDES GELGEL — Tokopedia Inspired Theme
|--------------------------------------------------------------------------
*/

:root {
    --brand-primary: #03ac0e;
    --brand-primary-hover: #028a0b;
    --brand-primary-active: #027a09;
    --brand-secondary: #42b549;

    --brand-soft: #e8f7e9;
    --brand-soft-2: #f0faf1;
    --brand-soft-3: #d9f3dc;

    --app-background: #f6f7f8;
    --surface: #ffffff;
    --surface-secondary: #fafafa;

    --text-primary: #212121;
    --text-secondary: #6d7588;
    --text-muted: #9aa0ad;

    --border-color: #e5e7eb;
    --border-soft: #edf0f2;

    --success: #03ac0e;
    --warning: #f59e0b;
    --danger: #dc2626;
    --info: #2563eb;

    --shadow-soft:
        0 2px 10px rgba(33, 33, 33, 0.05);

    --shadow-card:
        0 6px 20px rgba(33, 33, 33, 0.07);

    --shadow-green:
        0 8px 24px rgba(3, 172, 14, 0.16);
}

/* ==========================================================
   GLOBAL
   ========================================================== */

html,
body {
    background: var(--app-background) !important;
    color: var(--text-primary) !important;
}

body,
button,
input,
select,
textarea,
table {
    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif !important;
}

a {
    color: var(--brand-primary) !important;
}

a:hover {
    color: var(--brand-primary-hover) !important;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar,
.app-sidebar,
.main-sidebar,
#sidebar,
aside.sidebar {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow:
        4px 0 18px rgba(33, 33, 33, 0.04) !important;
}

.sidebar-header,
.sidebar-brand,
.brand-area,
.app-brand {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

.sidebar-header h1,
.sidebar-header h2,
.sidebar-brand strong,
.brand-area strong,
.app-brand strong {
    color: var(--text-primary) !important;
}

.sidebar-header p,
.sidebar-brand span,
.brand-area span,
.app-brand span {
    color: var(--text-secondary) !important;
}

.sidebar-section-title,
.menu-group-title,
.nav-section-title,
.sidebar-label {
    color: var(--text-muted) !important;
}

.sidebar a,
.sidebar button,
.sidebar .nav-link,
.app-sidebar a,
.app-sidebar button,
.menu-item {
    color: #414755 !important;
    background: transparent !important;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar .nav-link:hover,
.app-sidebar a:hover,
.app-sidebar button:hover,
.menu-item:hover {
    color: var(--brand-primary-hover) !important;
    background: var(--brand-soft-2) !important;
}

.sidebar .active,
.sidebar a.active,
.sidebar button.active,
.sidebar .nav-link.active,
.app-sidebar .active,
.menu-item.active {
    color: var(--brand-primary-hover) !important;
    background: var(--brand-soft) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar .active svg,
.sidebar a.active svg,
.sidebar button.active svg,
.sidebar .nav-link.active svg {
    color: var(--brand-primary) !important;
    fill: currentColor;
}

.sidebar-collapse-button,
.sidebar-toggle,
.menu-toggle {
    color: var(--brand-primary) !important;
    background: var(--brand-soft) !important;
    border-color: var(--brand-soft-3) !important;
}

/* ==========================================================
   TOPBAR
   ========================================================== */

.topbar,
.app-header,
.main-header,
header.topbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow:
        0 2px 12px rgba(33, 33, 33, 0.04) !important;
    backdrop-filter: blur(10px);
}

.topbar h1,
.topbar h2,
.page-title,
.header-title {
    color: var(--text-primary) !important;
}

.breadcrumb,
.breadcrumb a,
.page-subtitle {
    color: var(--text-secondary) !important;
}

/* ==========================================================
   AVATAR DAN PROFIL
   ========================================================== */

.avatar,
.profile-avatar,
.user-avatar,
.avatar-button,
.profile-button {
    background:
        linear-gradient(
            145deg,
            var(--brand-primary),
            var(--brand-secondary)
        ) !important;

    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-green) !important;
}

/* ==========================================================
   BUTTON
   ========================================================== */

.btn-primary,
.button-primary,
button.primary,
.action-primary,
.fab-primary,
.sticky-action .primary {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            var(--brand-primary),
            var(--brand-secondary)
        ) !important;

    border-color: var(--brand-primary) !important;
    box-shadow: var(--shadow-green) !important;
}

.btn-primary:hover,
.button-primary:hover,
button.primary:hover,
.action-primary:hover,
.fab-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--brand-primary-hover),
            var(--brand-primary)
        ) !important;

    border-color: var(--brand-primary-hover) !important;
}

.btn-secondary,
.button-secondary,
button.secondary {
    color: var(--brand-primary-hover) !important;
    background: var(--brand-soft) !important;
    border-color: var(--brand-soft-3) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
button.secondary:hover {
    background: var(--brand-soft-3) !important;
}

.btn-outline,
.button-outline {
    color: var(--brand-primary-hover) !important;
    background: #ffffff !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline:hover,
.button-outline:hover {
    background: var(--brand-soft) !important;
}

/* ==========================================================
   DASHBOARD HERO
   ========================================================== */

.hero-card,
.dashboard-hero,
.summary-hero,
.budget-hero,
.primary-summary-card {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #03ac0e 0%,
            #29b933 55%,
            #42b549 100%
        ) !important;

    border: 0 !important;
    box-shadow: var(--shadow-green) !important;
}

.hero-card *,
.dashboard-hero *,
.summary-hero *,
.budget-hero *,
.primary-summary-card * {
    color: inherit;
}

.hero-card .chip,
.dashboard-hero .chip,
.summary-hero .chip {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

/* ==========================================================
   CARD DAN PANEL
   ========================================================== */

.card,
.panel,
.content-card,
.stat-card,
.summary-card,
.module-card,
.resource-card,
.empty-state,
.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-soft) !important;
}

.card:hover,
.module-card:hover,
.resource-card:hover {
    border-color: #cdebd0 !important;
    box-shadow: var(--shadow-card) !important;
}

.card-title,
.panel-title,
.module-card h3,
.module-card h4,
.stat-card strong {
    color: var(--text-primary) !important;
}

.card-subtitle,
.panel-subtitle,
.stat-label,
.stat-card small,
.metadata {
    color: var(--text-secondary) !important;
}

/* ==========================================================
   TABEL
   ========================================================== */

.table-wrapper,
.data-table-wrapper {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-soft) !important;
}

table {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

table thead,
.data-table thead {
    background: #f4f7f5 !important;
}

table th,
.data-table th {
    color: #4b5563 !important;
    background: #f4f7f5 !important;
    border-color: var(--border-color) !important;
}

table td,
.data-table td {
    color: var(--text-primary) !important;
    border-color: var(--border-soft) !important;
}

table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) {
    background: #fcfdfc !important;
}

table tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--brand-soft-2) !important;
}

/* ==========================================================
   INPUT DAN FORM
   ========================================================== */

input,
select,
textarea,
.form-control,
.form-select {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    border-color: #d8dde3 !important;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover {
    border-color: #a8dbae !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow:
        0 0 0 3px rgba(3, 172, 14, 0.12) !important;
    outline: none !important;
}

label,
.form-label {
    color: var(--text-primary) !important;
}

/* ==========================================================
   TAB DAN PAGINATION
   ========================================================== */

.tab-button.active,
.tabs .active,
.nav-tab.active {
    color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary) !important;
    background: var(--brand-soft) !important;
}

.pagination .active,
.pagination button.active {
    color: #ffffff !important;
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.pagination button:hover {
    color: var(--brand-primary-hover) !important;
    background: var(--brand-soft) !important;
}

/* ==========================================================
   STATUS DAN BADGE
   ========================================================== */

.badge-success,
.status-success,
.status-approved,
.status-completed,
.status-active {
    color: #087716 !important;
    background: #ddf6df !important;
    border-color: #b8e9bd !important;
}

.badge-warning,
.status-warning,
.status-pending,
.status-submitted {
    color: #9a6700 !important;
    background: #fff5d6 !important;
    border-color: #f7df96 !important;
}

.badge-danger,
.status-danger,
.status-rejected,
.status-returned {
    color: #b42318 !important;
    background: #feeceb !important;
    border-color: #f8c6c3 !important;
}

.badge-info,
.status-info,
.status-verified {
    color: #175cd3 !important;
    background: #e8f1ff !important;
    border-color: #bfd4fb !important;
}

.badge-neutral,
.status-draft,
.status-locked {
    color: #4b5563 !important;
    background: #f1f3f5 !important;
    border-color: #dde1e6 !important;
}

/* ==========================================================
   NOTIFIKASI
   ========================================================== */

.notification-count,
.notification-badge {
    color: #ffffff !important;
    background: #ef4444 !important;
}

.notification-item:hover {
    background: var(--brand-soft-2) !important;
}

.notification-item.unread {
    background: var(--brand-soft) !important;
    border-left-color: var(--brand-primary) !important;
}

/* ==========================================================
   MODAL
   ========================================================== */

.modal-overlay,
.dialog-backdrop {
    background: rgba(33, 33, 33, 0.46) !important;
}

.modal-header,
.dialog-header {
    background: var(--surface) !important;
    border-bottom-color: var(--border-color) !important;
}

.modal-footer,
.dialog-footer {
    background: #fafafa !important;
    border-top-color: var(--border-color) !important;
}

/* ==========================================================
   LOGIN DAN SPLASH
   ========================================================== */

.login-page,
.auth-page,
.splash-screen,
.startup-screen {
    background:
        linear-gradient(
            155deg,
            #ffffff 0%,
            #f5fbf6 55%,
            #e7f7e9 100%
        ) !important;
}

.login-card,
.auth-card,
.splash-card {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-card) !important;
}

.login-title,
.auth-title,
.splash-title {
    color: var(--text-primary) !important;
}

.login-subtitle,
.auth-subtitle,
.splash-subtitle {
    color: var(--text-secondary) !important;
}

.loader,
.spinner,
.loading-spinner {
    border-color: #d8efda !important;
    border-top-color: var(--brand-primary) !important;
}

/* ==========================================================
   MOBILE
   ========================================================== */

.bottom-navigation,
.mobile-bottom-nav,
.bottom-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow:
        0 -4px 16px rgba(33, 33, 33, 0.06) !important;
}

.bottom-navigation .active,
.mobile-bottom-nav .active,
.bottom-nav .active {
    color: var(--brand-primary-hover) !important;
    background: var(--brand-soft) !important;
}

.mobile-drawer,
.drawer {
    background: var(--surface) !important;
}

/* ==========================================================
   PROGRESS
   ========================================================== */

.progress,
.progress-track {
    background: #e4ece6 !important;
}

.progress-bar,
.progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--brand-primary),
            var(--brand-secondary)
        ) !important;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

* {
    scrollbar-color: #b8dcbc #f1f3f5;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #f1f3f5;
}

*::-webkit-scrollbar-thumb {
    background: #b8dcbc;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #8acb91;
}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection {
    color: #ffffff;
    background: var(--brand-primary);
}


/* EAPBDES TOKOPEDIA ALIGNMENT START */

/* Identitas pada sidebar putih */
.sidebar .sidebar-brand,
.sidebar-brand {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.sidebar-brand strong,
.sidebar-brand-copy strong {
    color: #212121 !important;
    font-weight: 700 !important;
}

.sidebar-brand small,
.sidebar-brand-copy small {
    color: #6d7588 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.sidebar .nav-group-label {
    color: #9aa0ad !important;
}

.sidebar .nav-group-toggle,
.sidebar .group-label,
.sidebar .nav-chevron {
    color: #59616f !important;
}

/* Kartu APBDes pada dashboard */
.hero {
    background:
        linear-gradient(
            135deg,
            #03ac0e 0%,
            #20b92e 56%,
            #42b549 100%
        ) !important;

    border: 0 !important;

    box-shadow:
        0 14px 34px rgba(3, 172, 14, 0.18) !important;
}

.hero h2,
.hero p,
.hero .eyebrow {
    color: #ffffff !important;
}

.hero .eyebrow {
    opacity: 0.92 !important;
}

.hero-chip {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Grafik progres di dalam hero */
.hero-progress {
    background:
        conic-gradient(
            #ffffff var(--progress, 0%),
            rgba(255, 255, 255, 0.30) 0
        ) !important;
}

.hero-progress::after {
    background:
        linear-gradient(
            145deg,
            #079f12,
            #27bb34
        ) !important;
}

.hero-progress strong {
    color: #ffffff !important;
}

/* Kartu statistik agar lebih selaras */
.stat-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow:
        0 5px 18px rgba(33, 33, 33, 0.055) !important;
}

.stat-card:hover {
    border-color: #c8eacb !important;
    box-shadow:
        0 8px 24px rgba(3, 172, 14, 0.08) !important;
}

/* EAPBDES TOKOPEDIA ALIGNMENT END */