/* ============================================
   HRIS PT Ayoe Indotama Textile - App Styles
   ============================================ */

/* FEAT-LAPORAN-PAYROLL-SCROLL-001: Scroll container tabel laporan (~10 row default) */
.report-table-scroll-container {
    max-height: 540px; /* ~10 row × 48px row-height + 60px header */
    overflow-y: auto;
    overflow-x: auto;
}

/* FEAT-LAPORAN-PAYROLL-COLS-001: Width kolom No narrow + currency columns nowrap right-aligned */
/* CSS trick: width:1% + white-space:nowrap → kolom minimize ke content width (override MudTable auto distribute) */
.payroll-report-table .mud-table-cell.col-no,
.payroll-report-table th.col-no,
.payroll-report-table td.col-no {
    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.payroll-report-table .mud-table-cell.col-currency,
.payroll-report-table th.col-currency,
.payroll-report-table td.col-currency {
    min-width: 140px !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* FEAT-MEMO-WYSIWYG-QUILL-001: Quill editor wrapper styling */
.quill-editor-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    overflow: hidden;
}
.quill-editor-wrapper:focus-within {
    border-color: var(--mud-palette-primary, #1976D2);
    border-width: 2px;
}
.quill-editor-wrapper .ql-toolbar {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background: #fafafa;
}
.quill-editor-wrapper .ql-container {
    border: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}
.quill-editor-wrapper .ql-editor {
    min-height: 180px;
    padding: 12px 15px;
}

/* Global Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #212121;
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Loading Splash Screen */
.loading-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1A237E 0%, #1976D2 100%);
    color: white;
    gap: 2rem;
}

.loading-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.loading-title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: white;
}

.loading-subtitle {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.05em;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.loading-spinner .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
    color: white !important;
}

.loading-spinner p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin: 0;
}

/* Blazor Error UI */
#blazor-error-ui {
    background: #D32F2F;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
    font-size: 0.875rem;
}

#blazor-error-ui .reload {
    color: white;
    font-weight: bold;
    margin-left: 0.5rem;
    text-decoration: underline;
    cursor: pointer;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 1rem;
    color: white;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #BDBDBD;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9E9E9E;
}

/* Main Layout Content */
.main-content {
    padding: 1.5rem;
    min-height: calc(100vh - 64px);
}

/* Under Construction Card */
.under-construction-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-primary-light);
    padding-bottom: 1rem;
}

/* Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Transitions */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Login Page */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #1A237E 0%, #1976D2 60%, #42A5F5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.login-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2rem 1rem;
    background: linear-gradient(135deg, #1A237E, #1976D2);
    color: white;
}

.login-logo-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

/* Notification Badge */
.notification-badge {
    position: relative;
    display: inline-block;
}

/* ============================================
   Sprint 14 - FE-049: Responsive Design Audit
   Sprint 14 - FE-050: Empty/Error/Loading States
   ============================================ */

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 200px;
}

.empty-state-icon {
    font-size: 4rem !important;
    width: 4rem !important;
    height: 4rem !important;
    opacity: 0.4;
}

.empty-state-title {
    color: #424242;
    font-weight: 500 !important;
}

.empty-state-subtitle {
    max-width: 360px;
    line-height: 1.6;
}

/* ── Error State ─────────────────────────────────────────────────────────── */
.error-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 200px;
}

.error-state-icon {
    font-size: 4rem !important;
    width: 4rem !important;
    height: 4rem !important;
    opacity: 0.7;
}

.error-state-message {
    max-width: 400px;
    line-height: 1.6;
}

/* ── Loading State ──────────────────────────────────────────────────────── */
.loading-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 200px;
}

/* ── Page Header Polish ──────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header-actions {
    flex-shrink: 0;
}

/* ── Responsive Design: Mobile First ────────────────────────────────────── */
@media (max-width: 960px) {
    /* Tabel - horizontal scroll di mobile */
    .mud-table-container {
        overflow-x: auto;
    }

    /* Card grid: 1 kolom di mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Page header: stack vertikal di mobile */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    .main-content {
        padding: 0.75rem;
    }

    /* Stats grid: 1 kolom di layar kecil */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Form fields: full width di mobile */
    .form-grid {
        display: flex !important;
        flex-direction: column;
    }

    /* Tombol aksi: full width di mobile */
    .action-buttons-mobile {
        width: 100%;
    }

    .action-buttons-mobile .mud-button-root {
        width: 100%;
        justify-content: center;
    }

    /* Dialog: hampir full screen di mobile */
    .mud-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Table: sembunyikan kolom non-esensial di mobile */
    .col-hide-mobile {
        display: none !important;
    }

    /* Reduce padding di card */
    .mud-card-content {
        padding: 1rem !important;
    }
}

/* ── Browser Compatibility (FE-051) ─────────────────────────────────────── */
/* Safari: fix flexbox gap */
@supports not (gap: 1rem) {
    .d-flex > * + * {
        margin-left: 0.5rem;
    }
    .d-flex.flex-column > * + * {
        margin-top: 0.5rem;
    }
}

/* Firefox: custom scrollbar */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: #BDBDBD transparent;
    }
}

/* Webkit scrollbar style (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #BDBDBD;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9E9E9E;
}

/* Edge (legacy): fallback untuk CSS variables */
@supports not (--css: variables) {
    .main-content {
        background-color: #F5F5F5;
    }
}

/* Print styles */
@media print {
    .mud-drawer,
    .mud-appbar,
    .page-header-actions,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #e0e0e0;
    }

    body {
        font-size: 12px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }
}

/* PF-012: Fix MudSelect popover z-index saat berada di dalam custom overlay dialog
   MudBlazor popover default ~1300, custom overlay pakai z-index 9998-9999
   PopoverClass="dialog-select-popover" pada MudSelect Role di Settings/Users.razor
   Target .mud-popover langsung karena popover di-render via portal terpisah */
.dialog-select-popover .mud-popover,
.mud-popover.dialog-select-popover {
    z-index: 10000 !important;
}

/* Fallback: target semua popover yang dibuka saat overlay custom aktif */
.mud-popover-provider .dialog-select-popover {
    z-index: 10000 !important;
}

/* BUG-ROLES-TOOLTIP-001: Fix MudTooltip tampil di belakang custom overlay dialog
   Roles.razor pakai pattern custom overlay (MudOverlay z-index:9998 + div z-index:9999)
   bukan MudDialog standar. MudTooltip di-render via MudPopoverProvider sebagai portal
   di luar DOM tree — default z-index popover ~1300 sehingga tertimpa overlay.
   Override z-index tooltip/popover ke 10000 agar selalu muncul di atas overlay. */
.mud-popover-provider .mud-popover[class*="mud-tooltip"],
.mud-popover-provider .mud-tooltip-root {
    z-index: 10000 !important;
}

/* MudBlazor v6+: tooltip popover menggunakan class mud-popover-open di provider */
.mud-popover-provider .mud-popover:has(.mud-tooltip) {
    z-index: 10000 !important;
}

/* Fallback universal: semua popover (tooltip, select, autocomplete) harus di atas overlay custom */
.mud-popover-provider .mud-popover {
    z-index: 10000 !important;
}

/* ============================================
   Phase 4a: Component Restyle — HumaGo Design System
   9 Mei 2026
   Pure CSS overrides — JANGAN ubah Razor markup
   ============================================ */

/* === BUTTON === */
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    border-radius: var(--radius-button, 12px);
    padding: 10px 20px;
    text-transform: none;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background-color: #1D4ED8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}
/* Disabled state untuk SEMUA button variant — consistent style */
.mud-button-root:disabled,
.mud-button-root.mud-disabled,
.mud-button-root[disabled] {
    background-color: #F1F5F9 !important;
    color: #94A3B8 !important;
    border-color: #E2E8F0 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}
.mud-button-root:disabled .mud-icon-root,
.mud-button-root.mud-disabled .mud-icon-root,
.mud-button-root[disabled] .mud-icon-root {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
}
body.dark-mode .mud-button-root:disabled,
body.dark-mode .mud-button-root.mud-disabled,
body.dark-mode .mud-button-root[disabled] {
    background-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
body.dark-mode .mud-button-root:disabled .mud-icon-root,
body.dark-mode .mud-button-root.mud-disabled .mud-icon-root,
body.dark-mode .mud-button-root[disabled] .mud-icon-root {
    color: rgba(255,255,255,0.3) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.3) !important;
}
.mud-button-root.mud-button-outlined.mud-button-outlined-primary {
    border-radius: var(--radius-button, 12px);
    border-color: var(--color-primary);
    color: var(--color-primary);
    padding: 10px 20px;
    text-transform: none;
    font-weight: 500;
}
.mud-button-root.mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: rgba(37, 99, 235, 0.05);
}
.mud-button-root.mud-button-text {
    text-transform: none;
    font-weight: 500;
}
.mud-icon-button {
    border-radius: 10px;
    transition: all 0.2s ease;
}

/* === CARD === */
.mud-card {
    border-radius: var(--radius-card, 16px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #F1F5F9;
    transition: box-shadow 0.2s ease;
}
.mud-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
}
.mud-card-header {
    padding: 20px 20px 0 20px;
}
.mud-card-content {
    padding: 16px 20px;
}
.mud-card-actions {
    padding: 12px 20px 16px 20px;
}

/* === PAPER (alternative card surface) === */
.mud-paper {
    border-radius: 12px;
}
.mud-paper.mud-elevation-0 {
    box-shadow: none !important;
}

/* Dark mode card */
body.dark-mode .mud-card {
    background-color: #1E293B;
    border-color: rgba(255,255,255,0.12);
}

/* === INPUT FIELD === */
.mud-input-control .mud-input-outlined {
    border-radius: var(--radius-input, 10px) !important;
}
.mud-input-control .mud-input-outlined fieldset {
    border-color: #E2E8F0 !important;
    transition: border-color 0.2s ease;
}
.mud-input-control .mud-input-outlined:hover fieldset {
    border-color: #CBD5E1 !important;
}
.mud-input-control .mud-input-outlined.mud-focused fieldset {
    border-color: var(--color-primary) !important;
    border-width: 2px !important;
}
.mud-input-control .mud-input-outlined .mud-input-slot {
    min-height: 44px;
    padding: 8px 14px;
}
.mud-input-control .mud-input-label-outlined {
    color: #64748B;
}
.mud-input-control .mud-input-label-outlined.mud-focused {
    color: var(--color-primary);
}
/* Dense input: override min-height to stay compact */
.mud-input-control.mud-input-control-margin-dense .mud-input-outlined .mud-input-slot,
.mud-input-control .mud-input-outlined.mud-input-adorned-start .mud-input-slot {
    min-height: 38px !important;
    padding: 4px 12px !important;
}
.mud-input-control.mud-input-control-margin-dense .mud-input-outlined .mud-input-slot {
    min-height: 36px !important;
    padding: 3px 10px !important;
}

/* Helper text */
.mud-input-helper-text {
    color: #64748B;
    font-size: 12px;
    margin-top: 4px;
}
.mud-input-helper-text.mud-input-error {
    color: var(--color-error, #EF4444);
}

/* Dark mode input */
body.dark-mode .mud-input-control .mud-input-outlined fieldset {
    border-color: rgba(255,255,255,0.18) !important;
}
body.dark-mode .mud-input-control .mud-input-outlined:hover fieldset {
    border-color: #475569 !important;
}

/* === TABLE === */
.mud-table-container {
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #E2E8F0;
    max-width: 100%;
}
/* MudDataGrid responsive horizontal scroll */
.mud-data-grid {
    overflow-x: auto;
    max-width: 100%;
}
/* hg-data-card jangan block table scroll horizontal */
.hg-data-card {
    overflow-x: auto;
}
.mud-table-root .mud-table-head .mud-table-row {
    background-color: #F8FAFC;
}
.mud-table-root .mud-table-head .mud-table-cell {
    color: #64748B;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid #E2E8F0;
}
.mud-table-root .mud-table-body .mud-table-row {
    transition: background-color 0.15s ease;
}
.mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: #F1F5F9 !important;
}
.mud-table-root .mud-table-body .mud-table-cell {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #0F172A;
}
.mud-table-pagination {
    border-top: 1px solid #E2E8F0;
    padding: 8px 16px;
}

/* Dark mode table */
body.dark-mode .mud-table-container {
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .mud-table-root .mud-table-head .mud-table-row {
    background-color: #1E293B;
}
body.dark-mode .mud-table-root .mud-table-head .mud-table-cell {
    color: #FFFFFF;
    border-bottom-color: rgba(255,255,255,0.12);
}
body.dark-mode .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: #1E293B !important;
}
body.dark-mode .mud-table-root .mud-table-body .mud-table-cell {
    color: #F1F5F9;
    border-bottom-color: rgba(255,255,255,0.12);
}

/* === CHIP / BADGE === */
.mud-chip {
    border-radius: 8px;
    font-weight: 500;
    height: 24px;
    font-size: 12px;
    padding: 0 10px;
    text-transform: none;
}
.mud-chip.mud-chip-color-success {
    background-color: rgba(20, 184, 166, 0.1);
    color: #0D9488;
    border: 1px solid rgba(20, 184, 166, 0.2);
}
.mud-chip.mud-chip-color-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.mud-chip.mud-chip-color-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #B91C1C;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.mud-chip.mud-chip-color-info,
.mud-chip.mud-chip-color-primary {
    background-color: rgba(37, 99, 235, 0.1);
    color: #1E40AF;
    border: 1px solid rgba(37, 99, 235, 0.2);
}
.mud-chip.mud-chip-color-default {
    background-color: #F1F5F9;
    color: #64748B;
    border: 1px solid #E2E8F0;
}

/* Variant filled (solid bg) */
.mud-chip.mud-chip-filled {
    border: none;
    color: white;
}
.mud-chip.mud-chip-filled.mud-chip-color-primary { background-color: var(--color-primary); }
.mud-chip.mud-chip-filled.mud-chip-color-success { background-color: var(--color-success); }
/* Warning filled: amber bg — needs dark text to stay readable in light mode */
.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background-color: var(--color-warning);
    color: #92400E !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-warning .mud-chip-icon,
.mud-chip.mud-chip-filled.mud-chip-color-warning .mud-chip-content {
    color: #92400E !important;
}
body.dark-mode .mud-chip.mud-chip-filled.mud-chip-color-warning {
    color: #FCD34D !important;
}
body.dark-mode .mud-chip.mud-chip-filled.mud-chip-color-warning .mud-chip-icon,
body.dark-mode .mud-chip.mud-chip-filled.mud-chip-color-warning .mud-chip-content {
    color: #FCD34D !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-error   { background-color: var(--color-error); }
/* Info filled: blue bg + white text — fix invisibility di light mode */
.mud-chip.mud-chip-filled.mud-chip-color-info {
    background-color: var(--color-info, #2563EB);
    color: white !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-info .mud-chip-icon,
.mud-chip.mud-chip-filled.mud-chip-color-info .mud-chip-content {
    color: white !important;
}

/* Default filled: slate-200 bg + dark text — fix invisibility (text white di bg light = invisible) */
.mud-chip.mud-chip-filled.mud-chip-color-default {
    background-color: #E2E8F0;
    color: #0F172A !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-default .mud-chip-icon,
.mud-chip.mud-chip-filled.mud-chip-color-default .mud-chip-content {
    color: #0F172A !important;
}
body.dark-mode .mud-chip.mud-chip-filled.mud-chip-color-default {
    background-color: rgba(255,255,255,0.12);
    color: #FFFFFF !important;
}
body.dark-mode .mud-chip.mud-chip-filled.mud-chip-color-default .mud-chip-icon,
body.dark-mode .mud-chip.mud-chip-filled.mud-chip-color-default .mud-chip-content {
    color: #FFFFFF !important;
}

/* Dark mode outlined chip default */
body.dark-mode .mud-chip.mud-chip-color-default {
    background-color: rgba(255,255,255,0.08);
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.16);
}

/* Dark mode outlined chip info — pastikan readable di bg dark */
body.dark-mode .mud-chip.mud-chip-color-info,
body.dark-mode .mud-chip.mud-chip-color-primary {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
    border-color: rgba(59, 130, 246, 0.3);
}

/* === DIALOG === */
.mud-dialog {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
.mud-dialog-title {
    padding: 20px 24px 12px 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.mud-dialog-content {
    padding: 12px 24px;
}
.mud-dialog-actions {
    padding: 16px 24px;
    border-top: 1px solid #F1F5F9;
}

body.dark-mode .mud-dialog-actions {
    border-top-color: rgba(255,255,255,0.12);
}

/* === TABS — HumaGo Brand Gradient === */
.mud-tabs .mud-tabs-tabbar-content .mud-tab {
    text-transform: none;
    font-weight: 500;
    color: #64748B;
    padding: 12px 20px;
    transition: color 0.2s ease;
}
/* Tab active text — gradient brand via background-clip */
.mud-tabs .mud-tabs-tabbar-content .mud-tab.mud-tab-active {
    background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #14B8A6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
}
/* Tab active icon — solid primary (icon tidak support gradient via clip) */
.mud-tabs .mud-tabs-tabbar-content .mud-tab.mud-tab-active .mud-icon-root {
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB;
}
/* Slider/indicator — gradient brand */
.mud-tabs .mud-tabs-tabbar-content .mud-tab-slider {
    background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #14B8A6 100%) !important;
    height: 3px;
    border-radius: 2px 2px 0 0;
}

/* === FORM === */
.mud-form-group {
    margin-bottom: 16px;
}
.mud-input-control + .mud-input-control {
    margin-top: 16px;
}

/* Stat card untuk dashboard */
.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
    margin-bottom: 12px;
}

/* === END Phase 4a === */

/* ============================================
   Phase 5 (9 Mei 2026): HumaGo Mockup Implementation
   Tailwind augment — JANGAN ubah preflight global
   ============================================ */

/* Login page — split asymmetric */
.humago-login-wrapper {
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}
.humago-login-form-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #F8FAFC;
    position: relative;
}
@media (min-width: 1024px) {
    .humago-login-form-panel { width: 60%; }
}
.humago-login-brand-panel {
    display: none;
    background: linear-gradient(135deg, #0F172A 0%, #1e1b4b 40%, #0F172A 100%);
    background-size: 300% 300%;
    animation: brand-panel-shift 10s ease infinite;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .humago-login-brand-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40%; }
}
@keyframes brand-panel-shift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.humago-login-input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 40px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #0F172A;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: Inter, sans-serif;
    outline: none;
}
.humago-login-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.humago-login-btn {
    width: 100%;
    height: 44px;
    background: linear-gradient(135deg, #2563EB, #0F172A);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: Inter, sans-serif;
}
.humago-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.humago-login-btn:active { transform: translateY(0); }
.humago-login-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
.humago-logo-float { animation: humago-float 6s ease-in-out infinite; }
@keyframes humago-float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

.humago-dot-pattern {
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Dashboard mockup stat cards */
.hg-stat-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #F1F5F9;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 180px;
}
.hg-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.hg-sparkline { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Stat card sparkline: taller on wider screens */
.hg-stat-card svg.hg-sparkline-chart {
    height: 48px !important;
}

/* Stats grid: 4 columns on md+ screens */
@media (min-width: 960px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Dashboard activity + approval queue */
.hg-activity-card,
.hg-approval-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #F1F5F9;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Dashboard welcome header */
.hg-welcome-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.hg-welcome-title {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
.hg-welcome-subtitle {
    font-size: 0.875rem;
    color: #64748B;
    margin-top: 4px;
}

/* Compact MudSelect filter inline di card time-bound */
.hg-card-period-filter .mud-input-control {
    margin: 0 !important;
}
.hg-card-period-filter .mud-select .mud-input-control-input-container,
.hg-card-period-filter .mud-input-outlined .mud-input-slot {
    min-height: 34px !important;
    height: 34px !important;
}
/* Force flex center untuk slot + reset padding semua child input */
.hg-card-period-filter .mud-select .mud-input-slot {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.hg-card-period-filter .mud-select .mud-input-slot input,
.hg-card-period-filter .mud-select .mud-input-slot .mud-select-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 0.8125rem;
    display: flex !important;
    align-items: center !important;
}
/* Dropdown chevron icon position */
.hg-card-period-filter .mud-input-adornment-end {
    margin-right: 4px;
}

/* Dark mode overrides */
body.dark-mode .hg-stat-card,
body.dark-mode .hg-activity-card,
body.dark-mode .hg-approval-card {
    background: #1E293B;
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .hg-welcome-title { color: #F1F5F9; }
body.dark-mode .hg-welcome-subtitle { color: #FFFFFF; }

/* Topbar glassmorphism */
.topbar-humago {
    backdrop-filter: blur(12px) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}
body.dark-mode .topbar-humago {
    background: rgba(15, 23, 42, 0.90) !important;
}

/* === Phase 5: Restyle .page-header to match HumaGo mockup style === */
/* Override existing page-header so all existing pages get new look without code changes */
.page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    border-bottom: none !important;
}
/* Page-header h5 MudText -> look like hg-welcome-title */
.page-header .mud-typography-h5 {
    font-family: 'Inter Tight', Inter, sans-serif !important;
    font-size: 1.625rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
/* Page-header body2 MudText -> subtitle */
.page-header .mud-typography-body2 {
    font-size: 0.875rem !important;
    color: #64748B !important;
    margin-top: 4px !important;
}
body.dark-mode .page-header .mud-typography-h5 {
    color: #F1F5F9 !important;
}
body.dark-mode .page-header .mud-typography-body2 {
    color: #FFFFFF !important;
}

/* === END Phase 5 === */

/* ============================================
   Sidebar custom HTML+Tailwind — rebuild (9 Mei 2026)
   ============================================ */

/* Hilangkan underline default <a> di NavLink sidebar (semua state) */
.sidebar-link,
.sidebar-link:link,
.sidebar-link:visited,
.sidebar-link:hover,
.sidebar-link:focus,
.sidebar-link:active,
.sidebar-link.active {
    text-decoration: none !important;
}

/* Active state: gradient brand */
.sidebar-link.active {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #14B8A6 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.sidebar-link.active span {
    color: white !important;
}
.sidebar-link.active svg {
    stroke: white !important;
}

/* Hover state untuk non-active */
.sidebar-link:not(.active):hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}
.sidebar-link:not(.active):hover .sidebar-link-icon {
    color: #0F172A !important;
}

/* Sidebar nav scrollbar */
aside nav::-webkit-scrollbar {
    width: 4px;
}
aside nav::-webkit-scrollbar-track {
    background: transparent;
}
aside nav::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 2px;
}

/* Dark mode sidebar */
body.dark-mode aside {
    background: #0F172A !important;
    border-right-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .sidebar-link:not(.active) {
    color: #FFFFFF !important;
}
body.dark-mode .sidebar-link:not(.active):hover {
    background-color: #1E293B !important;
    color: #F1F5F9 !important;
}
body.dark-mode aside [style*="border-bottom"] {
    border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode aside button {
    background: #1E293B !important;
    border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .sidebar-link:not(.active) span {
    color: #FFFFFF;
}

/* UserProfileMiniCard dark mode */
body.dark-mode aside > div:last-child > div {
    background: #1E293B !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Topbar dark mode */
body.dark-mode .topbar-humago {
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode header [style*="background: rgba(255,255,255"] {
    background: rgba(15, 23, 42, 0.92) !important;
}

/* main-content padding override for new flex layout */
.main-content {
    padding: 0;
    min-height: unset;
}

/* Sidebar section label: no underline */
.sidebar-section-label {
    text-decoration: none !important;
    user-select: none;
}

/* Sidebar search autocomplete */
.sidebar-search-autocomplete .mud-input-outlined fieldset {
    border-color: #E2E8F0 !important;
    border-radius: 10px !important;
}
.sidebar-search-autocomplete .mud-input-outlined.mud-focused fieldset {
    border-color: #2563EB !important;
}
.sidebar-search-autocomplete .mud-input-slot {
    min-height: 36px !important;
    padding: 4px 8px !important;
    font-size: 0.8125rem;
}
body.dark-mode .sidebar-search-autocomplete .mud-input-outlined fieldset {
    border-color: rgba(255,255,255,0.18) !important;
}
body.dark-mode .sidebar-search-autocomplete .mud-input-slot {
    color: #F1F5F9;
    background: transparent;
}

/* === END Sidebar rebuild === */

/* ============================================
   CRUD Pages Polish — Phase 7 (9 Mei 2026)
   hg-filter-card: filter row container
   hg-data-card:   data table/grid container
   hg-page-wrapper: replaces MudContainer MaxWidth px-0
   ============================================ */

.hg-filter-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #F1F5F9;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 1rem;
}

/* === Compact filter inputs inside .hg-filter-card / .hg-page-filter ===
   Applies consistent 38px height for ALL input/select in filter rows,
   regardless of whether Margin="Margin.Dense" is set on the component. */
.hg-filter-card .mud-input-control,
.hg-page-filter .mud-input-control {
    margin: 0 !important;
}
/* Target ALL input slots inside filter card — not only dense */
.hg-filter-card .mud-input-outlined .mud-input-slot,
.hg-filter-card .mud-select .mud-input-control-input-container,
.hg-page-filter .mud-input-outlined .mud-input-slot,
.hg-page-filter .mud-select .mud-input-control-input-container {
    min-height: 38px !important;
    height: 38px !important;
}
.hg-filter-card .mud-input-slot,
.hg-page-filter .mud-input-slot {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.hg-filter-card .mud-input-slot input,
.hg-filter-card .mud-input-slot .mud-select-input,
.hg-page-filter .mud-input-slot input,
.hg-page-filter .mud-input-slot .mud-select-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 0.8125rem;
    display: flex !important;
    align-items: center !important;
}
/* === End compact filter inputs === */

.hg-data-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #F1F5F9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: visible;
    padding: 20px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Remove inner MudPaper shadow when inside hg-data-card */
.hg-data-card .mud-paper {
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Konsisten button height di MudMenu + MudButton (kasus action button row Payroll Detail dsb.) */
.mud-menu > .mud-button-root,
.mud-menu .mud-menu-activator {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.hg-page-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* Stats row wrapper */
.hg-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 600px) {
    .hg-stats-row { grid-template-columns: repeat(4, 1fr); }
}

/* Stat card inside MudGrid/MudPaper — accent-left style polish */
.hg-stat-accent {
    background: white;
    border-radius: 16px;
    border: 1px solid #F1F5F9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hg-stat-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Dark mode */
body.dark-mode .hg-filter-card,
body.dark-mode .hg-data-card,
body.dark-mode .hg-stat-accent {
    background: #1E293B;
    border-color: rgba(255,255,255,0.12);
}

/* Page header subtitle fix: when page-header contains 2 MudText inline
   (no inner div wrapper), stack them vertically */
.page-header > .mud-typography-h5 + .mud-typography-body2 {
    margin-top: -0.75rem;
}

/* === Action button standardization ===
   .hg-action-btn  — explicit class for new buttons
   .rounded-btn    — applied via Class="!rounded-btn" on existing buttons
   Both enforce uniform 40px height across all list-page header action buttons. */
.hg-action-btn,
.rounded-btn {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: var(--mud-default-borderradius, 12px) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* === End action button standardization === */

/* ============================================================
   Issue Fix — 9 Mei 2026: Filter row + header button + table
   ============================================================ */

/* Issue 1: Filter row button (Reset Filter) sama height dengan input/dropdown.
   .hg-filter-card MudButton — enforce 38px agar match compact input di filter. */
.hg-filter-card .mud-button-root {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Issue 2: Header action buttons (Tambah, Export, dll.) di .hg-welcome-header.
   Enforce 40px — lebih besar dari filter row karena ini CTA utama halaman. */
.hg-welcome-header .mud-button-root {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Issue 4: MudDataGrid consistency — target bersama MudTable rules yang sudah ada. */
.mud-data-grid {
    border-radius: 0 !important;
}
.mud-data-grid .mud-data-grid-header-row {
    background-color: #F8FAFC;
}
.mud-data-grid .mud-data-grid-header-cell {
    color: #64748B;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid #E2E8F0;
}
.mud-data-grid .mud-data-grid-row {
    transition: background-color 0.15s ease;
}
.mud-data-grid .mud-data-grid-row:hover {
    background-color: #F1F5F9 !important;
}
.mud-data-grid .mud-data-grid-cell {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #0F172A;
}

/* Dark mode MudDataGrid */
body.dark-mode .mud-data-grid .mud-data-grid-header-row {
    background-color: #1E293B;
}
body.dark-mode .mud-data-grid .mud-data-grid-header-cell {
    color: #FFFFFF;
    border-bottom-color: rgba(255,255,255,0.12);
}
body.dark-mode .mud-data-grid .mud-data-grid-row:hover {
    background-color: rgba(255,255,255,0.05) !important;
}
body.dark-mode .mud-data-grid .mud-data-grid-cell {
    color: #F1F5F9;
    border-bottom-color: rgba(255,255,255,0.06);
}

/* === END Issue Fix 9 Mei 2026 === */

/* === END CRUD Pages Polish Phase 7 === */

/* ============================================
   Dark Mode Comprehensive Overrides (9 Mei 2026)
   Applied via body.dark-mode class toggled by
   MainLayout.razor + localStorage humago-theme
   ============================================ */

/* Base background + text */
body.dark-mode {
    background-color: #0F172A !important;
    color: #F1F5F9 !important;
}

/* Common utility color overrides */
body.dark-mode .text-dark,
body.dark-mode [style*="color: #0F172A"],
body.dark-mode [style*="color:#0F172A"] {
    color: #F1F5F9 !important;
}
body.dark-mode .text-slate-500,
body.dark-mode [style*="color: #64748B"],
body.dark-mode [style*="color:#64748B"] {
    color: #FFFFFF !important;
}
body.dark-mode .text-slate-600,
body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#475569"] {
    color: #CBD5E1 !important;
}
body.dark-mode .bg-white,
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color:white"] {
    background-color: #1E293B !important;
}
body.dark-mode .bg-canvas,
body.dark-mode [style*="background: #F8FAFC"],
body.dark-mode [style*="background:#F8FAFC"],
body.dark-mode [style*="background-color: #F8FAFC"],
body.dark-mode [style*="background-color:#F8FAFC"] {
    background-color: #0F172A !important;
}
body.dark-mode .border-slate-200,
body.dark-mode [style*="border-color: #E2E8F0"],
body.dark-mode [style*="border: 1px solid #E2E8F0"] {
    border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .border-slate-100,
body.dark-mode [style*="border-color: #F1F5F9"],
body.dark-mode [style*="border: 1px solid #F1F5F9"] {
    border-color: rgba(255,255,255,0.12) !important;
}

/* Page wrapper */
body.dark-mode .hg-page-wrapper {
    background-color: #0F172A;
}

/* Filter + data cards already handled via .hg-filter-card/.hg-data-card rules above */

/* Main layout background */
body.dark-mode > div.flex,
body.dark-mode div[style*="background: #F8FAFC"] {
    background-color: #0F172A !important;
}

/* Content area */
body.dark-mode main {
    background-color: #0F172A !important;
}

/* Welcome header text in dark mode */
body.dark-mode .hg-welcome-title {
    color: #F1F5F9 !important;
}
body.dark-mode .hg-welcome-subtitle {
    color: #FFFFFF !important;
}

/* Stat card number in dark mode */
body.dark-mode .hg-stat-card span[style*="color:#0F172A"],
body.dark-mode .hg-stat-card span[style*="color: #0F172A"] {
    color: #F1F5F9 !important;
}

/* Activity + approval cards text */
body.dark-mode .hg-activity-card h2,
body.dark-mode .hg-approval-card h2 {
    color: #F1F5F9 !important;
}
body.dark-mode .hg-activity-card [style*="color: #0F172A"],
body.dark-mode .hg-approval-card [style*="color: #0F172A"] {
    color: #F1F5F9 !important;
}
body.dark-mode [style*="border-bottom: 1px solid #F8FAFC"] {
    border-bottom-color: rgba(255,255,255,0.12) !important;
}

/* UserProfileMiniCard */
body.dark-mode .user-profile-mini-card {
    background: #1E293B !important;
    border-top-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .user-profile-mini-card [style*="color: #0F172A"] {
    color: #F1F5F9 !important;
}
body.dark-mode .user-profile-mini-card [style*="color: #64748B"] {
    color: #FFFFFF !important;
}

/* MudBlazor surface components */
body.dark-mode .mud-paper,
body.dark-mode .mud-paper-outlined {
    background-color: #1E293B !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #F1F5F9 !important;
}
body.dark-mode .mud-input-control .mud-input-slot {
    color: #F1F5F9 !important;
    background-color: transparent !important;
}
body.dark-mode .mud-input-label {
    color: #FFFFFF !important;
}
body.dark-mode .mud-select-input {
    color: #F1F5F9 !important;
}

/* Tabs in dark mode — pertahankan gradient brand */
body.dark-mode .mud-tabs .mud-tabs-tabbar {
    background-color: #1E293B !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .mud-tabs .mud-tab {
    color: #FFFFFF !important;
}
/* Tab active dark mode — gradient brand lebih cerah (variant) */
body.dark-mode .mud-tabs .mud-tabs-tabbar-content .mud-tab.mud-tab-active {
    background: linear-gradient(90deg, #3B82F6 0%, #A78BFA 50%, #2DD4BF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.dark-mode .mud-tabs .mud-tabs-tabbar-content .mud-tab.mud-tab-active .mud-icon-root {
    color: #3B82F6 !important;
    -webkit-text-fill-color: #3B82F6 !important;
}
/* Slider dark mode — gradient lebih cerah variant */
body.dark-mode .mud-tabs .mud-tabs-tabbar-content .mud-tab-slider {
    background: linear-gradient(90deg, #3B82F6 0%, #A78BFA 50%, #2DD4BF 100%) !important;
}

/* Topbar user dropdown in dark mode */
body.dark-mode .mud-menu-paper,
body.dark-mode .mud-popover-paper {
    background-color: #1E293B !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #F1F5F9 !important;
}
body.dark-mode .mud-menu-item:hover {
    background-color: #0F172A !important;
}

/* TopBar user name/role text */
body.dark-mode .user-avatar-button span[style*="color: #0F172A"] {
    color: #F1F5F9 !important;
}
body.dark-mode .user-avatar-button span[style*="color: #64748B"] {
    color: #FFFFFF !important;
}

/* === END Dark Mode Overrides === */

/* ============================================
   Report Page — UI Fixes (11 Mei 2026)
   Issue 1: MudTabs scroll arrow alignment
   Issue 4: MudDatePicker adornment alignment dalam hg-filter-card
   ============================================ */

/* Issue 1: Tab scroll arrow — color & disabled state (minimum invasive, no layout change) */
.mud-tabs .mud-tabs-toolbar-scroll-button,
.mud-tabs-scroll-button {
    color: #FFFFFF !important;
    padding: 5px !important;
}
.mud-tabs .mud-tabs-toolbar-scroll-button .mud-icon-root,
.mud-tabs-scroll-button .mud-icon-root {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
/* Override CSS disabled button global di dalam tab — transparent bg */
.mud-tabs .mud-button-root:disabled,
.mud-tabs .mud-button-root.mud-disabled,
.mud-tabs .mud-button-root[disabled] {
    background-color: transparent !important;
}
.mud-tabs .mud-tabs-toolbar-scroll-button:hover:not(:disabled):not([disabled]):not(.mud-disabled) {
    background-color: rgba(37, 99, 235, 0.08) !important;
}
/* Disabled state — semi-transparent slate, readable di any tab bg */
.mud-tabs .mud-tabs-toolbar-scroll-button:disabled,
.mud-tabs .mud-tabs-toolbar-scroll-button[disabled],
.mud-tabs .mud-tabs-toolbar-scroll-button.mud-disabled {
    color: rgba(148, 163, 184, 0.5) !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}
.mud-tabs .mud-tabs-toolbar-scroll-button:disabled .mud-icon-root,
.mud-tabs .mud-tabs-toolbar-scroll-button[disabled] .mud-icon-root,
.mud-tabs .mud-tabs-toolbar-scroll-button.mud-disabled .mud-icon-root {
    color: rgba(148, 163, 184, 0.5) !important;
    -webkit-text-fill-color: rgba(148, 163, 184, 0.5) !important;
}

body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button,
body.dark-mode .mud-tabs-scroll-button {
    color: #FFFFFF !important;
}
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button .mud-icon-root,
body.dark-mode .mud-tabs-scroll-button .mud-icon-root {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button:hover:not(:disabled):not([disabled]):not(.mud-disabled) {
    background-color: rgba(147, 197, 253, 0.1) !important;
}
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button:disabled,
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button[disabled],
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button.mud-disabled {
    color: rgba(255, 255, 255, 0.25) !important;
    background-color: transparent !important;
}
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button:disabled .mud-icon-root,
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button[disabled] .mud-icon-root,
body.dark-mode .mud-tabs .mud-tabs-toolbar-scroll-button.mud-disabled .mud-icon-root {
    color: rgba(255, 255, 255, 0.25) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.25) !important;
}

/* Issue 4: DatePicker adornment icon di dalam hg-filter-card — center vertical */
.hg-filter-card .mud-input-adornment-end,
.hg-filter-card .mud-input-adornment-start,
.hg-page-filter .mud-input-adornment-end,
.hg-page-filter .mud-input-adornment-start {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
/* Pastikan icon button di adornment DatePicker tidak memperbesar row height */
.hg-filter-card .mud-input-adornment-end .mud-icon-button,
.hg-filter-card .mud-input-adornment-start .mud-icon-button {
    padding: 4px !important;
}

/* === END Report Page Fixes === */

/* ============================================
   Table Footer Standar (hg-table-footer)
   Digunakan di semua halaman list untuk
   konsistensi pagination footer.
   ============================================ */
.hg-table-footer {
    border-top: 1px solid #F1F5F9;
    background-color: #FFFFFF;
    flex-wrap: wrap;
    gap: 8px;
}
.hg-table-footer .mud-select-input {
    font-size: 13px;
}
.hg-table-footer .mud-pagination-item {
    border-radius: 8px;
    min-width: 32px;
    height: 32px;
}
.hg-table-footer .mud-pagination-item.mud-chip-text-primary {
    background-color: var(--mud-palette-primary, #2563EB);
    color: white;
}
body.dark-mode .hg-table-footer {
    border-top-color: rgba(255,255,255,0.06);
    background-color: #1E293B;
}
.hg-table-footer-count {
    color: #64748B;
}
body.dark-mode .hg-table-footer-count {
    color: #FFFFFF;
}
.hg-table-footer-page-size-label {
    color: #64748B;
    white-space: nowrap !important;
    line-height: 36px !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
}
.hg-table-footer-count {
    flex-shrink: 1;
    min-width: 0;
}
/* Outer flex container — gap + wrap untuk container sempit */
.hg-table-footer.d-flex {
    row-gap: 0.75rem;
}
body.dark-mode .hg-table-footer-page-size-label {
    color: #FFFFFF;
}
/* Page size dropdown — force compact + center vertical untuk semua child */
.hg-table-footer .mud-input-control {
    margin: 0 !important;
}

/* ============================================
   Compact MudMenuItem — kurangin gap icon-label
   9 Mei 2026 — Issue 2 fix
   ============================================ */
.mud-list-item.mud-menu-item {
    padding: 6px 14px !important;
    min-height: 34px !important;
    gap: 8px !important;
    column-gap: 8px !important;
}
/* Override MudBlazor default min-width 56px → 35px untuk semua list item icon */
.mud-list-item-icon {
    min-width: 35px !important;
}

/* Force value center vertical di semua MudSelect Outlined + Margin.Dense */
.mud-select.mud-input-control .mud-input-outlined .mud-input-slot {
    display: flex !important;
    align-items: center !important;
}
.mud-select.mud-input-control .mud-input-outlined .mud-select-input {
    display: flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

/* Role permission parent accordion — outer wrapper */
.role-perm-parent-accordion .mud-expand-panel {
    border: 1px solid #E2E8F0;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.role-perm-parent-accordion .mud-expand-panel-header {
    padding: 8px 14px !important;
    min-height: 38px !important;
    background-color: #F8FAFC;
}
.role-perm-parent-accordion .mud-expand-panel-content {
    padding: 10px !important;
}
body.dark-mode .role-perm-parent-accordion .mud-expand-panel {
    border-color: rgba(255,255,255,0.12);
}
body.dark-mode .role-perm-parent-accordion .mud-expand-panel-header {
    background-color: rgba(255,255,255,0.04);
}

/* Role permission accordion — compact untuk card role */
.role-perm-accordion .mud-expand-panel {
    border: 1px solid #F1F5F9;
    border-radius: 8px !important;
    margin-bottom: 4px;
    box-shadow: none !important;
}
.role-perm-accordion .mud-expand-panel-header {
    padding: 6px 12px !important;
    min-height: 32px !important;
}
.role-perm-accordion .mud-expand-panel-content {
    padding: 8px 12px !important;
}
body.dark-mode .role-perm-accordion .mud-expand-panel {
    border-color: rgba(255,255,255,0.08);
    background-color: transparent;
}

/* Filter card MudSelect: force label always shrink supaya tidak overlap dengan display value (kasus value default "" yang match MudSelectItem "Semua X") */
.hg-filter-card .mud-select .mud-input-label-outlined,
.hg-page-filter .mud-select .mud-input-label-outlined {
    top: 0 !important;
    transform: translate(14px, -7px) scale(0.75) !important;
    transform-origin: top left !important;
    background-color: #FFFFFF;
    padding: 0 4px;
    z-index: 1;
}
body.dark-mode .hg-filter-card .mud-select .mud-input-label-outlined,
body.dark-mode .hg-page-filter .mud-select .mud-input-label-outlined {
    background-color: #1E293B;
}
.mud-list-item.mud-menu-item .mud-list-item-icon,
.mud-list-item.mud-menu-item .mud-nav-link-icon-default,
.mud-menu-item .mud-list-item-icon {
    min-width: 35px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}
.mud-list-item.mud-menu-item .mud-list-item-text {
    margin: 0 !important;
    padding-left: 0 !important;
}
.mud-list-item.mud-menu-item .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}
/* === END Compact MudMenuItem === */
.hg-table-footer .mud-input-control .mud-input-outlined,
.hg-table-footer .mud-input-outlined .mud-input-slot,
.hg-table-footer .mud-input-control-input-container {
    min-height: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
}
.hg-table-footer .mud-select .mud-input-slot input,
.hg-table-footer .mud-select .mud-select-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}
.hg-table-footer .mud-input-adornment-end {
    margin-right: 4px;
    display: flex;
    align-items: center;
}
/* Label "Per halaman:" — match height 36px untuk align dengan dropdown */
.hg-table-footer-page-size-label {
    line-height: 36px !important;
    display: inline-flex;
    align-items: center;
}