/* Jembatan kelas lama (Bootstrap, template, halaman yang belum dimigrasi) ke mg-tokens.css.
   Dimuat paling akhir di app.html. !important dipakai karena harus menang atas template
   dan style scoped halaman. Hanya berlaku di layar agar label & dokumen cetak tidak berubah. */
body {
    --bs-body-bg: var(--mg-bg);
    --bs-body-color: var(--mg-text);
    --bs-border-color: var(--mg-border);
    --bs-link-color: var(--mg-primary);
    --bs-font-sans-serif: var(--mg-font);
}

@media screen {
    /* ===== Dasar ===== */
    html, body {
        background-color: var(--mg-bg) !important;
    }
    body {
        background-image: radial-gradient(var(--mg-bg-dot) 1px, transparent 1px) !important;
        background-size: 22px 22px !important;
        color: var(--mg-text) !important;
        font-family: var(--mg-font) !important;
        letter-spacing: normal !important;
    }
    #sidebar, #sidebar a, #sidebar span, #sidebar h6, #sidebar p, .footer-wrapper p, .form-label { letter-spacing: normal !important; }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        color: var(--mg-text);
        font-family: var(--mg-font);
    }
    a { color: var(--mg-primary); }
    a:hover { color: var(--mg-primary-text); }
    /* dark/main.css memaksa `body.dark a` transparan dan berwarna tetap; kartu & tombol berupa tautan harus tetap utuh. */
    body.dark a.mg-card { background: var(--mg-surface); color: inherit; }
    body.dark a.mg-btn { color: var(--mg-text-2); }
    body.dark a.mg-btn:hover { background: var(--mg-surface-hover); color: var(--mg-text); }
    body.dark a.mg-btn--primary { background: var(--mg-primary-strong); color: #fff; }
    body.dark a.mg-btn--primary:hover { background: var(--mg-primary); color: #fff; }
    body.dark a.mg-btn--soft { background: var(--mg-primary-soft); color: var(--mg-primary-text); }
    .text-muted, .text-secondary { color: var(--mg-text-faint) !important; }
    code, kbd, pre, samp { font-family: var(--mg-font-num); }
    :focus-visible { outline: 2px solid var(--mg-primary-strong); outline-offset: 2px; }
    input[type="checkbox"], input[type="radio"] { accent-color: var(--mg-primary-strong); }
    * { scrollbar-color: var(--mg-border-strong) transparent; }

    /* ===== Shell baru: lindungi dari gaya Bootstrap & template ===== */
    .mg-sidebar__search, body.dark .mg-sidebar__search {
        display: flex !important;
        flex-wrap: nowrap;
        height: 38px;
        margin: 12px 0 4px !important;
    }
    .mg-sidebar__search kbd, .mg-topbar__search kbd {
        background: transparent !important;
        box-shadow: none !important;
        color: var(--mg-text-faint) !important;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ===== Shell: header ===== */
    .layout-boxed .header-container,
    body.dark .layout-boxed .header-container,
    .header-container,
    .header-container .navbar,
    body.dark .header-container .navbar {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    .header-container header.header,
    body.dark .header-container header.header {
        margin-top: 8px !important;
        background: var(--mg-surface) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-lg) !important;
        box-shadow: none !important;
    }
    .header-container .search-bar input,
    .header-container .search-form-control,
    body.dark .header-container .search-bar input {
        background: var(--mg-surface-sunken) !important;
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-md) !important;
        color: var(--mg-text) !important;
    }
    .header-container svg, .header-container .nav-link { color: var(--mg-text-muted) !important; }
    .header-container .badge-secondary,
    .header-container .badge {
        background: transparent !important;
        border: 1px solid var(--mg-border-strong) !important;
        border-radius: 6px !important;
        color: var(--mg-text-faint) !important;
        font-family: var(--mg-font-num);
        font-weight: 500;
    }

    /* ===== Shell: sidebar ===== */
    .sidebar-wrapper, .sidebar-wrapper #sidebar,
    body.dark .sidebar-wrapper, body.dark .sidebar-wrapper #sidebar,
    .sidebar-theme, body.dark .sidebar-theme, #sidebar ul.menu-categories,
    body.dark #sidebar ul.menu-categories {
        background: var(--mg-surface-solid) !important;
    }
    .sidebar-wrapper, body.dark .sidebar-wrapper {
        border-right: 1px solid var(--mg-border) !important;
        box-shadow: none !important;
    }
    .sidebar-wrapper .shadow-bottom { display: none !important; }
    #sidebar .theme-text a, #sidebar .theme-text .nav-link,
    body.dark #sidebar .theme-text a {
        color: var(--mg-text) !important;
        font-family: var(--mg-font);
        font-weight: 600 !important;
        letter-spacing: 0.02em;
    }
    #sidebar .btn-toggle, #sidebar .btn-toggle svg { color: var(--mg-text-faint) !important; }
    #sidebar .profile-info, body.dark #sidebar .profile-info,
    #sidebar .profile-info .user-info, body.dark #sidebar .profile-info .user-info {
        background: transparent !important;
    }
    #sidebar .profile-info .user-info { border: 1px solid var(--mg-border) !important; border-radius: var(--mg-r-md) !important; }
    #sidebar .profile-info h6, body.dark #sidebar .profile-info h6 { color: var(--mg-text) !important; }
    #sidebar .profile-info p, body.dark #sidebar .profile-info p { color: var(--mg-text-faint) !important; }
    #sidebar .avatar-placeholder {
        background: var(--mg-primary-soft) !important;
        border-radius: var(--mg-r-sm) !important;
        color: var(--mg-primary) !important;
    }
    #sidebar ul.menu-categories li.menu > a.dropdown-toggle,
    body.dark #sidebar ul.menu-categories li.menu > a.dropdown-toggle {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: var(--mg-r-sm) !important;
        box-shadow: none !important;
        color: var(--mg-text-muted) !important;
        transition: background .15s, border-color .15s, color .15s;
    }
    #sidebar ul.menu-categories li.menu > a.dropdown-toggle span,
    body.dark #sidebar ul.menu-categories li.menu > a.dropdown-toggle span { color: inherit !important; font-weight: 500; }
    #sidebar ul.menu-categories li.menu > a.dropdown-toggle svg,
    body.dark #sidebar ul.menu-categories li.menu > a.dropdown-toggle svg { color: inherit !important; fill: none !important; stroke: currentColor !important; }
    #sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover,
    body.dark #sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover {
        background: var(--mg-surface-hover) !important;
        color: var(--mg-text) !important;
    }
    #sidebar ul.menu-categories li.menu.active > a.dropdown-toggle,
    #sidebar ul.menu-categories li.menu > a.dropdown-toggle[aria-expanded="true"],
    body.dark #sidebar ul.menu-categories li.menu.active > a.dropdown-toggle,
    body.dark #sidebar ul.menu-categories li.menu > a.dropdown-toggle[aria-expanded="true"] {
        background: var(--mg-primary-soft) !important;
        border-color: var(--mg-primary-border) !important;
        color: var(--mg-primary-text) !important;
    }
    #sidebar ul.menu-categories ul.submenu > li > a,
    body.dark #sidebar ul.menu-categories ul.submenu > li > a { color: var(--mg-text-faint) !important; }
    #sidebar ul.menu-categories ul.submenu > li > a:hover,
    #sidebar ul.menu-categories ul.submenu > li.active > a,
    body.dark #sidebar ul.menu-categories ul.submenu > li > a:hover,
    body.dark #sidebar ul.menu-categories ul.submenu > li.active > a { color: var(--mg-primary) !important; }
    #sidebar ul.menu-categories ul.submenu > li > a::before,
    body.dark #sidebar ul.menu-categories ul.submenu > li > a::before { background-color: var(--mg-border-strong) !important; }

    /* ===== Area konten & footer ===== */
    .middle-content { padding-top: 12px; }
    /* Tepi konten sejajar topbar: pembungkus halaman lama tidak boleh menambah jarak samping. */
    .mg-shell__content > .middle-content > :is(.container-fluid, .container, .page-container, .dashboard-container:not(.fullscreen), .p-6, .layout-px-spacing, .partner-console, .partner-orders) {
        max-width: none;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .main-container, #content, .main-content, body.dark .main-container, body.dark #content { background: transparent !important; }
    .footer-wrapper p, .footer-wrapper a, body.dark .footer-wrapper p { color: var(--mg-text-faint) !important; }

    /* ===== Panel ===== */
    .card, .widget, .statbox, .widget-content-area, .table-container, .datatable-container,
    body.dark .card, body.dark .widget, body.dark .statbox, body.dark .widget-content-area {
        background: var(--mg-surface) !important;
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-lg) !important;
        box-shadow: none !important;
        color: var(--mg-text);
    }
    .widget-content-area .card, .card .card, .table-container .datatable-container,
    body.dark .widget-content-area .card, body.dark .card .card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .card-header, .card-footer, body.dark .card-header, body.dark .card-footer,
    .widget-header, body.dark .widget-header {
        background: transparent !important;
        border-color: var(--mg-border) !important;
        color: var(--mg-text) !important;
    }

    /* ===== Tabel ===== */
    .table, body.dark .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--mg-text);
        --bs-table-border-color: var(--mg-border);
        --bs-table-hover-bg: var(--mg-surface-hover);
        --bs-table-hover-color: var(--mg-text);
        --bs-table-striped-bg: var(--mg-surface-hover);
        --bs-table-striped-color: var(--mg-text);
        color: var(--mg-text) !important;
    }
    table thead th, .table > thead > tr > th, body.dark .table > thead > tr > th, .datatable-container th {
        background: var(--mg-surface-sunken) !important;
        border-color: var(--mg-border) !important;
        color: var(--mg-text-faint) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    table tbody td, .table > tbody > tr > td, body.dark .table > tbody > tr > td, .datatable-container td {
        background-color: transparent !important;
        border-color: var(--mg-border) !important;
        color: var(--mg-text);
    }
    table tbody tr:hover > td, .table-hover > tbody > tr:hover > *, body.dark .table > tbody > tr:hover > td {
        background-color: var(--mg-surface-hover) !important;
    }

    /* ===== Form ===== */
    .form-control, .form-select,
    body.dark .form-control, body.dark .form-select,
    body.dark .modal-content .form-control, body.dark .modal-content .form-select {
        background-color: var(--mg-surface-sunken) !important;
        border: 1px solid var(--mg-border-strong) !important;
        border-radius: var(--mg-r-md) !important;
        color: var(--mg-text) !important;
    }
    .form-control:focus, .form-select:focus,
    body.dark .form-control:focus, body.dark .form-select:focus,
    body.dark .modal-content .form-control:focus, body.dark .modal-content .form-select:focus {
        border-color: var(--mg-primary-strong) !important;
        box-shadow: 0 0 0 3px var(--mg-primary-soft) !important;
        color: var(--mg-text) !important;
    }
    .form-control::placeholder, body.dark .form-control::placeholder, body.dark .modal-content .form-control::placeholder { color: var(--mg-text-faint) !important; opacity: 1; }
    .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--mg-surface-hover) !important; color: var(--mg-text-faint) !important; }
    select option { background: var(--mg-surface-solid); color: var(--mg-text); }
    label, .form-label, body.dark label, body.dark .form-label, body.dark .modal-content .form-label { color: var(--mg-text-muted) !important; }
    .input-group-text, body.dark .input-group-text {
        background: var(--mg-surface-sunken) !important;
        border-color: var(--mg-border-strong) !important;
        color: var(--mg-text-faint) !important;
    }

    /* ===== Tombol ===== */
    .btn { border-radius: var(--mg-r-md) !important; font-family: var(--mg-font); font-weight: 600; }
    .btn-primary, body.dark .btn-primary {
        background: var(--mg-primary-strong) !important;
        border: 1px solid var(--mg-primary-border) !important;
        box-shadow: var(--mg-primary-glow) !important;
        color: #FFFFFF !important;
    }
    .btn-primary:hover, body.dark .btn-primary:hover { background: var(--mg-primary) !important; color: #FFFFFF !important; transform: none !important; }
    .btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark,
    body.dark .btn-secondary, body.dark .btn-light, body.dark .btn-outline-secondary, body.dark .btn-outline-primary, body.dark .btn-outline-dark {
        background: transparent !important;
        border: 1px solid var(--mg-border-strong) !important;
        box-shadow: none !important;
        color: var(--mg-text-muted) !important;
    }
    .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover,
    body.dark .btn-secondary:hover, body.dark .btn-light:hover, body.dark .btn-outline-secondary:hover, body.dark .btn-outline-primary:hover, body.dark .btn-outline-dark:hover {
        background: var(--mg-surface-hover) !important;
        color: var(--mg-text) !important;
    }
    .btn-success, .btn-outline-success, body.dark .btn-success, body.dark .btn-outline-success {
        background: var(--mg-success-soft) !important;
        border: 1px solid var(--mg-success-border) !important;
        box-shadow: none !important;
        color: var(--mg-success-text) !important;
    }
    .btn-warning, .btn-outline-warning, body.dark .btn-warning, body.dark .btn-outline-warning {
        background: var(--mg-warning-soft) !important;
        border: 1px solid var(--mg-warning-border) !important;
        box-shadow: none !important;
        color: var(--mg-warning-text) !important;
    }
    .btn-danger, .btn-outline-danger, body.dark .btn-danger, body.dark .btn-outline-danger {
        background: var(--mg-danger-soft) !important;
        border: 1px solid var(--mg-danger-border) !important;
        box-shadow: none !important;
        color: var(--mg-danger-text) !important;
    }

    /* ===== Tab status Orders ===== */
    .status-tabs, body.dark .status-tabs {
        background: var(--mg-surface) !important;
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-lg) !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    .status-tab, body.dark .status-tab {
        background: transparent !important;
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-sm) !important;
        box-shadow: none !important;
        color: var(--mg-text-muted) !important;
        font-family: var(--mg-font);
        transform: none !important;
    }
    .status-tab:hover, body.dark .status-tab:hover { background: var(--mg-surface-hover) !important; color: var(--mg-text) !important; }
    .status-tab.active, body.dark .status-tab.active {
        background: var(--mg-primary-soft) !important;
        border-color: var(--mg-primary-border) !important;
        color: var(--mg-primary-text) !important;
    }
    .tab-count, .status-tab.active .tab-count, body.dark .tab-count {
        background: transparent !important;
        color: inherit !important;
        font-family: var(--mg-font-num);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }
    .page-title, body.dark .page-title { color: var(--mg-text) !important; font-weight: 600 !important; -webkit-text-fill-color: currentColor; background: none !important; }
    .badge-count, body.dark .badge-count {
        background: var(--mg-primary-soft) !important;
        border: 1px solid var(--mg-primary-border) !important;
        color: var(--mg-primary-text) !important;
        font-family: var(--mg-font-num);
        font-weight: 500 !important;
    }

    /* ===== Dashboard (gudang, brand, partner) ===== */
    .dashboard-container { background: transparent !important; }
    .dashboard-container.fullscreen { background: var(--mg-bg) !important; }
    .welcome-header, .stat-card, .status-card, .panel, .summary-card, .summary-loading, .fa-card, .fa-panel, .fa-loading {
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        background: var(--mg-surface) !important;
        border-color: var(--mg-border) !important;
        border-radius: var(--mg-r-lg) !important;
        box-shadow: none !important;
    }
    .status-card:hover { border-color: var(--mg-primary-border) !important; transform: none !important; }
    .brand-item, .location-item, .target-item { background: var(--mg-surface-hover) !important; border-color: var(--mg-border) !important; }
    .brand-item:hover { background: var(--mg-primary-soft) !important; }
    .location-status { background: var(--mg-surface-hover) !important; }
    .stat-icon { background: var(--mg-surface-hover) !important; }
    .status-icon { background: var(--mg-primary-soft) !important; color: var(--mg-primary) !important; }
    .status-icon.pending { background: var(--mg-warning-soft) !important; color: var(--mg-warning-text) !important; }
    .status-icon.out-of-stock { background: var(--mg-danger-soft) !important; color: var(--mg-danger-text) !important; }
    .status-icon.picked, .status-icon.ready, .status-icon.shipped { background: var(--mg-success-soft) !important; color: var(--mg-success-text) !important; }
    .welcome-content h1, .stat-value, .section-header h2, .status-value, .panel-header h3, .brand-name, .alert-product,
    .warehouse-name, .storage-values .total, .location-code, .summary-header h2, .summary-value, .fa-header h2, .fa-value,
    .fa-panel h3, .stage-time, .target-meta b, .target-pct, .fa-table td { color: var(--mg-text) !important; }
    .welcome-content p, .stat-label, .last-update, .status-label, .brand-stats, .storage-label, .storage-percentage, .location-details,
    .summary-period, .summary-period .vs, .summary-loading, .summary-label, .compare-tag, .compare-base, .summary-breakdown, .trend-neutral,
    .fa-period, .fa-period .vs, .fa-loading, .fa-empty, .fa-label, .fa-foot, .stage-share, .fa-note, .daily-label, .target-meta,
    .target-title, .target-number, .target-foot, .fa-table th, .stage-name, .daily-value, .target-key, .monthly-legend { color: var(--mg-text-faint) !important; }
    .stat-value, .status-value, .summary-value, .fa-value, .target-pct, .location-percent, .brand-orders, .storage-values {
        font-family: var(--mg-font-num);
        font-variant-numeric: tabular-nums;
    }
    .status-footer, .view-all, .brand-orders, .location-percent, .storage-values .current { color: var(--mg-primary) !important; }
    .view-all:hover { color: var(--mg-primary-text) !important; }
    .trend-up, .target-status.ok { color: var(--mg-success-text) !important; }
    .trend-down, .target-status.bad, .alert-info { color: var(--mg-danger-text) !important; }
    .btn-fullscreen, .btn-refresh {
        background: transparent !important;
        border: 1px solid var(--mg-border-strong) !important;
        border-radius: var(--mg-r-md) !important;
        color: var(--mg-text-muted) !important;
    }
    .btn-fullscreen:hover, .btn-refresh:hover { background: var(--mg-surface-hover) !important; color: var(--mg-text) !important; }
    .action-button, .brand-rank { background: var(--mg-primary-strong) !important; border-radius: var(--mg-r-sm) !important; color: #FFFFFF !important; }
    .action-button:hover { background: var(--mg-primary) !important; }
    .alert-item { background: var(--mg-danger-soft) !important; border-color: var(--mg-danger-border) !important; }
    .progress-bar-container, .progress-bar-container-sm, .stage-bar, .target-track, .divider { background: var(--mg-border) !important; }
    .progress-bar, .progress-bar-sm, .daily-bar, .target-achieved, .legend-box.achieved, .legend-box.current, .monthly-bar.current { background: var(--mg-primary-strong) !important; }
    .target-projected, .legend-box.projected { background: var(--mg-primary-border) !important; }
    .legend-box.previous, .monthly-bar.previous { background: var(--mg-border-strong) !important; }
    .panel-header, .summary-breakdown, .fa-foot, .target-foot, .fa-table th, .fa-table td { border-color: var(--mg-border) !important; }
    .data-table thead { background: var(--mg-surface-sunken) !important; }

    /* ===== Filter chip Orders ===== */
    .platform-summary-chip, .rss-chip {
        background: transparent !important;
        border: 1px solid var(--mg-border-strong) !important;
        color: var(--mg-text-muted) !important;
        min-height: 36px;
    }
    .platform-summary-chip:hover, .rss-chip:hover { background: var(--mg-surface-hover) !important; color: var(--mg-text) !important; transform: none !important; }
    .platform-summary-chip.active, .rss-chip.active {
        background: var(--mg-primary-soft) !important;
        border-color: var(--mg-primary-border) !important;
        box-shadow: none !important;
        color: var(--mg-primary-text) !important;
    }
    .rss-chip strong, .rss-chip.active strong, .platform-summary-chip strong {
        background: transparent !important;
        color: inherit !important;
        font-family: var(--mg-font-num);
    }
    .rss-title, .platform-filter-label { color: var(--mg-text-faint) !important; }
    .platform-filter-wrap { background: var(--mg-surface) !important; border-color: var(--mg-border) !important; border-radius: var(--mg-r-lg) !important; box-shadow: none !important; }
    .table-cell .btn-sm { white-space: nowrap; }
    @media (max-width: 768px) {
        .header-with-actions, .header-actions { flex-wrap: wrap; }
    }

    /* ===== Kelas yang dipakai banyak halaman ===== */
    .info-section, .data-preview, .filter-section, .form-section, .summary-box, .total-item-box, .details-row, .image-upload-section {
        background: var(--mg-surface-sunken) !important;
        border-color: var(--mg-border) !important;
        color: var(--mg-text);
    }
    .details-table, .item-table { background: transparent !important; border-color: var(--mg-border) !important; color: var(--mg-text) !important; }
    .sheet-tabs button { background: transparent !important; border-color: var(--mg-border) !important; color: var(--mg-text-muted) !important; }
    .sheet-tabs button.active { background: var(--mg-primary-soft) !important; border-color: var(--mg-primary-border) !important; color: var(--mg-primary-text) !important; }
    .status-default { background: var(--mg-surface-hover) !important; color: var(--mg-text-muted) !important; }
    .badge-warning, .status-badge-warning { background: var(--mg-warning-soft) !important; color: var(--mg-warning-text) !important; }
    .status-badge-danger { background: var(--mg-danger-soft) !important; color: var(--mg-danger-text) !important; }
    .badge-bundle { background: var(--mg-primary-soft) !important; color: var(--mg-primary-text) !important; }
    code { background: var(--mg-surface-hover) !important; color: var(--mg-text) !important; }

    /* ===== Teks berwarna & alert Bootstrap ===== */
    .text-primary { color: var(--mg-primary) !important; }
    .text-success { color: var(--mg-success-text) !important; }
    .text-warning { color: var(--mg-warning-text) !important; }
    .text-danger { color: var(--mg-danger-text) !important; }
    .text-dark, body.dark .text-dark { color: var(--mg-text) !important; }
    .bg-white, .bg-light, body.dark .bg-white, body.dark .bg-light { background-color: var(--mg-surface-sunken) !important; color: var(--mg-text); }
    .alert, body.dark .alert { border-radius: var(--mg-r-md) !important; }
    .alert-info, .alert-primary, .alert-secondary, .alert-light,
    body.dark .alert-info, body.dark .alert-primary, body.dark .alert-secondary, body.dark .alert-light {
        background: var(--mg-primary-soft) !important;
        border: 1px solid var(--mg-primary-border) !important;
        color: var(--mg-primary-text) !important;
    }
    .alert-success, body.dark .alert-success { background: var(--mg-success-soft) !important; border: 1px solid var(--mg-success-border) !important; color: var(--mg-success-text) !important; }
    .alert-warning, body.dark .alert-warning { background: var(--mg-warning-soft) !important; border: 1px solid var(--mg-warning-border) !important; color: var(--mg-warning-text) !important; }
    .alert-danger, body.dark .alert-danger { background: var(--mg-danger-soft) !important; border: 1px solid var(--mg-danger-border) !important; color: var(--mg-danger-text) !important; }

    /* ===== Modal & dropdown ===== */
    .modal-content, body.dark .modal-content {
        background: var(--mg-surface-solid) !important;
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-lg) !important;
        color: var(--mg-text);
    }
    .modal-header, .modal-footer, body.dark .modal-content .modal-header, body.dark .modal-content .modal-footer {
        background: transparent !important;
        border-color: var(--mg-border) !important;
    }
    .modal-title, body.dark .modal-content .modal-title { color: var(--mg-text) !important; }
    .dropdown-menu, body.dark .dropdown-menu {
        background: var(--mg-surface-solid) !important;
        border: 1px solid var(--mg-border) !important;
        border-radius: var(--mg-r-md) !important;
        box-shadow: var(--mg-shadow-pop) !important;
    }
    .dropdown-item, body.dark .dropdown-item { color: var(--mg-text-muted) !important; }
    .dropdown-item:hover, body.dark .dropdown-item:hover { background: var(--mg-surface-hover) !important; color: var(--mg-text) !important; }

    /* ===== Paginasi ===== */
    .page-link, body.dark .page-link {
        background: transparent !important;
        border-color: var(--mg-border) !important;
        color: var(--mg-text-muted) !important;
    }
    .page-item.active .page-link, body.dark .page-item.active .page-link {
        background: var(--mg-primary-strong) !important;
        border-color: var(--mg-primary-strong) !important;
        color: #FFFFFF !important;
    }

    /* ===== Datatable ($lib/Datatable) ===== */
    .datatable-container, .datatable-container .datatable { font-family: var(--mg-font) !important; }
    .datatable-container .datatable-header, .datatable-container .pagination-container {
        background: transparent !important;
        border-color: var(--mg-border) !important;
    }
    .datatable-container .search-input, .datatable-container .page-size-select, .datatable-container .jump-input {
        background: var(--mg-surface-sunken) !important;
        border: 1px solid var(--mg-border-strong) !important;
        border-radius: var(--mg-r-md) !important;
        color: var(--mg-text) !important;
    }
    .datatable-container .search-input:focus { border-color: var(--mg-primary-strong) !important; box-shadow: 0 0 0 3px var(--mg-primary-soft) !important; }
    .datatable-container .search-input::placeholder { color: var(--mg-text-faint); opacity: 1; }
    .datatable-container .search-icon, .datatable-container .ellipsis, .datatable-container .sort-icon { color: var(--mg-text-faint) !important; }
    .datatable-container .sort-icon.active { color: var(--mg-primary) !important; }
    .datatable-container .info-text, .datatable-container .pagination-info, .datatable-container .page-info,
    .datatable-container .records-info, .datatable-container .page-size-container, .datatable-container .jump-to-page,
    .datatable-container .loading-cell, .datatable-container .empty-cell { color: var(--mg-text-faint) !important; }
    .datatable-container thead, .datatable-container .table-header { background: transparent !important; }
    .datatable-container .table-header:hover { background: var(--mg-surface-hover) !important; }
    .datatable-container .table-row, .datatable-container .table-row:nth-child(even) { background: transparent !important; }
    .datatable-container .table-row:hover, .datatable-container .table-row:nth-child(even):hover { background: var(--mg-surface-hover) !important; }
    .datatable-container .table-cell { border-color: var(--mg-border) !important; color: var(--mg-text) !important; }
    .datatable-container .pagination-btn {
        background: transparent !important;
        border: 1px solid var(--mg-border-strong) !important;
        color: var(--mg-text-muted) !important;
    }
    .datatable-container .pagination-btn:hover:not(:disabled) { background: var(--mg-surface-hover) !important; }
    .datatable-container .pagination-btn.active {
        background: var(--mg-primary-strong) !important;
        border-color: var(--mg-primary-strong) !important;
        color: #FFFFFF !important;
    }

    /* ===== Isi baris order ===== */
    .tracking-id, .order-id { font-family: var(--mg-font-num) !important; font-variant-numeric: tabular-nums; }
    .order-id, .shipping-provider, .items-list, .items-list li, .sub-item { color: var(--mg-text) !important; }
    .order-date, .tracking-id, .label-text, .platform-status, .order-info small { color: var(--mg-text-faint) !important; }
    .items-list li { border-color: var(--mg-border) !important; }

    .status-badge {
        background: var(--mg-primary-soft) !important;
        border: 1px solid var(--mg-primary-border) !important;
        border-radius: 999px !important;
        color: var(--mg-primary-text) !important;
        font-weight: 600 !important;
    }
    .status-pending, .status-returning {
        background: var(--mg-warning-soft) !important;
        border-color: var(--mg-warning-border) !important;
        color: var(--mg-warning-text) !important;
    }
    .status-ready-ship, .status-shipped, .status-delivered {
        background: var(--mg-success-soft) !important;
        border-color: var(--mg-success-border) !important;
        color: var(--mg-success-text) !important;
    }
    .status-cancelled, .status-returned {
        background: var(--mg-danger-soft) !important;
        border-color: var(--mg-danger-border) !important;
        color: var(--mg-danger-text) !important;
    }

    .sla-badge { background: var(--mg-surface-hover) !important; border-color: var(--mg-border-strong) !important; color: var(--mg-text-muted); }
    .sla-badge .sla-status, .sla-badge .sla-time { color: var(--mg-text-muted) !important; }
    .sla-overdue, .sla-critical { background: var(--mg-danger-soft) !important; border-color: var(--mg-danger-border) !important; }
    .sla-overdue .sla-status, .sla-critical .sla-status, .sla-overdue .sla-time, .sla-critical .sla-time { color: var(--mg-danger-text) !important; }
    .sla-warning { background: var(--mg-warning-soft) !important; border-color: var(--mg-warning-border) !important; }
    .sla-warning .sla-status, .sla-warning .sla-time { color: var(--mg-warning-text) !important; }
    .sla-ontime { background: var(--mg-success-soft) !important; border-color: var(--mg-success-border) !important; }
    .sla-ontime .sla-status, .sla-ontime .sla-time { color: var(--mg-success-text) !important; }

    @media (prefers-reduced-motion: reduce) {
        * { transition: none !important; animation-duration: 0.01ms !important; }
    }
}