/* ===========================================
   MATERIAL DARK THEME - Ext.NET 5.3.0 Aria
   Simplified Material Design (Google Dark)
   =========================================== */

/* ========= COLOR VARIABLES ========= */
:root {
    --mat-primary: #90caf9; /* Light Blue 200 */
    --mat-primary2: #1e88e5; /* Light Blue 200 */
    --mat-primary-dark: #42a5f5; /* Blue 400 */
    --mat-accent: #ffb74d; /* Orange 300 */
    --mat-warn: #ef5350; /* Red 400 */
    /* Surfaces */
    --mat-bg: #121212; /* app background */
    --mat-surface: #1e1e1e; /* cards, panels */
    --mat-header: #2a2a2a; /* headers, toolbars */
    --mat-border: #333;
    /* Typography */
    --mat-text: #e0e0e0;
    --mat-text-secondary: #9e9e9e;
    /* Style */
    --mat-radius: 6px;
    --mat-shadow: 0 2px 6px rgba(0,0,0,.7);
}

/* ========== GOOGLE MATERIAL FONT ========= */
body, .x-body {
    font-family: 'Roboto', 'Segoe UI', sans-serif !important;
    background: var(--mat-bg) !important;
    color: var(--mat-text) !important;
}

/* ========== PANEL / CARD ========= */
.x-panel, .x-window, .x-panel-default {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius) !important;
    border: 1px solid var(--mat-border) !important;
    box-shadow: var(--mat-shadow);
}

.x-panel-header, .x-window-header, .x-grid-header-ct, .x-toolbar {
    background: var(--mat-header) !important;
    color: var(--mat-text) !important;
    border: 1px solid var(--mat-border);
}

/* ========== FORM FIELD ========= */
.x-form-text, .x-form-field {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--mat-border) !important;
    color: var(--mat-text) !important;
    padding: 6px 4px;
    transition: border-color .25s, box-shadow .25s;
}

    .x-form-text:focus {
        border-bottom-color: var(--mat-primary) !important;
        box-shadow: 0 2px 0 0 var(--mat-primary) !important;
    }

.x-form-invalid-field {
    border-bottom-color: var(--mat-warn) !important;
    box-shadow: 0 2px 0 0 var(--mat-warn) !important;
}

/* ========== BUTTON ========= */
.x-btn {
    background: #2c2c2c !important;
    border-radius: var(--mat-radius) !important;
    border: 1px #fff inherit !important;
    color: var(--mat-text) !important;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: background .25s, transform .15s;
}

.x-btn-over {
    background: #3a3a3a !important;
    transform: translateY(-1px);
}

.x-btn:active {
    background: #444 !important;
    transform: scale(0.98);
}

/* Primary button */
.x-btn-primary {
    background: var(--mat-primary) !important;
    color: #000 !important;
}

    .x-btn-primary.x-btn-over {
        background: var(--mat-primary-dark) !important;
    }

/* Ripple effect */
.x-btn::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.25);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.x-btn:active::after {
    transform: scale(2);
    opacity: 1;
    transition: 0s;
}

/* ========== GRID ========= */
.x-grid, .x-grid-body {
    background: var(--mat-surface) !important;
    color: var(--mat-text) !important;
}

.x-grid-header-ct {
    background: var(--mat-header) !important;
    color: var(--mat-text-secondary) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--mat-border);
}

.x-grid-row {
    background: var(--mat-surface) !important;
    border-bottom: 1px solid var(--mat-border);
}

.x-grid-row-over {
    background: rgba(255,255,255,.05) !important;
}

.x-grid-row-selected {
    background: rgba(144,202,249,.2) !important;
}

/* ========== COMBOBOX / BOUNDLIST ========= */
.x-boundlist {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-shadow);
}

.x-boundlist-item {
    padding: 10px 14px;
    color: var(--mat-text);
}

.x-boundlist-item-over {
    background: rgba(255,255,255,.05) !important;
}

.x-boundlist-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
}

/ /* ============================
   Datepicker Dark Theme Fix
   ============================ */
/* Background utama */
.x-datepicker,
.x-datepicker-inner,
.x-datepicker-footer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Header bulan & navigasi */
.x-datepicker-header {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-bottom: 1px solid #444 !important;
}

.x-datepicker-prev,
.x-datepicker-next {
    background-color: #2a2a2a !important;
    color: #bbb !important;
}

    .x-datepicker-prev:hover,
    .x-datepicker-next:hover {
        background-color: #3a3a3a !important;
        color: #fff !important;
    }

/* Hari (S M T W T F S) */
.x-datepicker-inner th {
    background-color: #1e1e1e !important;
    color: #aaa !important;
    font-weight: 500 !important;
}

/* Tanggal default */
.x-datepicker-inner td a {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

/* Tanggal lain bulan (disabled look) */
.x-datepicker-inner td.x-datepicker-unselected a {
    color: #555 !important;
}

/* Tanggal terpilih */
.x-datepicker-inner td.x-datepicker-selected a {
    background-color: #1976d2 !important; /* biru redup */
    color: #fff !important;
    border-radius: 4px !important;
}

/* Hover tanggal */
.x-datepicker-inner td a:hover {
    background-color: #333 !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* Tombol Today */
.x-datepicker-footer .x-btn {
    background-color: #2a2a2a !important;
    color: #eee !important;
    border: 1px solid #555 !important;
    border-radius: 6px !important;
}

    .x-datepicker-footer .x-btn:hover {
        background-color: #3a3a3a !important;
        border-color: #1976d2 !important;
        color: #fff !important;
    }


/* ========== TAB PANEL ========= */
.x-tab {
    background: transparent !important;
    color: var(--mat-text-secondary) !important;
    border: none !important;
    padding: 8px 16px;
}

.x-tab-active {
    color: var(--mat-primary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--mat-primary) !important;
    transition: border-color .25s;
}

/* ========== MESSAGE BOX ========= */
.x-message-box, .x-window-body {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    color: var(--mat-text);
    box-shadow: var(--mat-shadow);
}

/* ========== TREELIST ========= */
.x-treelist {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-shadow);
    padding: 8px 0;
    font-family: 'Roboto', sans-serif;
}

.x-treelist-item {
    color: var(--mat-text) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background .2s, color .2s;
    border-radius: 0 var(--mat-radius) var(--mat-radius) 0;
    margin: 2px 4px;
    padding: 6px 10px;
}

    .x-treelist-item:hover {
        background: rgba(144,202,249,.15) !important;
        color: var(--mat-primary) !important;
    }

    .x-treelist-item-selected,
    .x-treelist-item.x-treelist-item-active {
        background: var(--mat-primary) !important;
        color: #000 !important;
        font-weight: 600;
    }

/* Ikon */
.x-treelist-item-icon {
    color: inherit !important;
    margin-right: 8px;
    font-size: 18px;
}

/* Expander arrow */
.x-treelist-item-expander {
    color: var(--mat-text-secondary) !important;
    opacity: .8;
    transition: transform .3s ease, color .3s;
    font-size: 16px;
}

.x-treelist-item:hover .x-treelist-item-expander {
    color: var(--mat-primary) !important;
    opacity: 1;
}

.x-treelist-item-expanded .x-treelist-item-expander {
    transform: rotate(90deg);
}

body.x-border-layout-ct,
div.x-border-layout-ct {
    background-color: var(--mat-bg) !important; /* pakai bg dari tema */
}

/* Trigger icon (DateField, ComboBox, dll.) */
.x-form-trigger {
    background: transparent !important;
    border: none !important;
    opacity: 0.8;
    transition: opacity .2s;
}

/* Kalender (date trigger) */
.x-form-date-trigger {
    filter: invert(1) brightness(200%) !important; /* paksa jadi putih */
}

/* Hover lebih jelas */
.x-form-trigger:hover {
    opacity: 1;
}
/* Grid container */
.x-grid,
.x-grid-body,
.x-grid-view,
.x-panel-body-default {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border-color: var(--mat-border) !important;
}

/* Header */
.x-grid-header-ct,
.x-column-header,
.x-column-header-inner {
    background-color: var(--mat-header) !important;
    color: var(--mat-text-secondary) !important;
    border-color: var(--mat-border) !important;
    font-weight: 600;
}

/* Header hover */
.x-column-header-over {
    background-color: rgba(255,255,255,.05) !important;
    color: var(--mat-primary) !important;
}

/* Rows */
.x-grid-row {
    background-color: var(--mat-surface) !important;
    border-bottom: 1px solid var(--mat-border) !important;
    transition: background .2s;
}

.x-grid-row-over {
    background-color: rgba(255,255,255,.05) !important;
}

.x-grid-row-selected {
    background-color: rgba(144,202,249,.15) !important;
    color: var(--mat-primary) !important;
}

/* Cell text */
.x-grid-cell-inner {
    color: var(--mat-text) !important;
}

/* Paging toolbar */
.x-toolbar.x-docked-bottom {
    background-color: var(--mat-header) !important;
    border-top: 1px solid var(--mat-border) !important;
}

/* Hapus border/outline biru bawaan */
.x-treelist-item-selected,
.x-treelist-item-selected:focus,
.x-treelist-item:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

    /* Style selected ala Material */
    .x-treelist-item-selected .x-treelist-item-text,
    .x-treelist-item-selected .x-treelist-item-icon {
        color: var(--mat-primary) !important;
    }

.x-treelist-item-selected {
    background-color: rgba(144, 202, 249, 0.15) !important; /* soft blue bg */
    border-radius: 8px; /* biar modern */
    transition: background 0.2s;
}

/* Header bulan/tahun */
.x-datepicker-header {
    background: var(--mat-header) !important;
    color: var(--mat-text) !important;
    border-bottom: 1px solid var(--mat-border) !important;
}

/* Tombol navigasi bulan (panah kiri/kanan) */
.x-datepicker-arrow {
    color: var(--mat-text-secondary) !important;
    opacity: .8;
    transition: color .2s, opacity .2s;
}

    .x-datepicker-arrow:hover {
        color: var(--mat-primary) !important;
        opacity: 1;
    }

/* Sel tanggal default */
.x-datepicker-inner .x-datepicker-cell {
    background: transparent !important;
    color: var(--mat-text-secondary) !important;
    border-radius: 50%;
    transition: background .2s, color .2s;
}

/* Hari aktif bulan ini */
.x-datepicker-inner .x-datepicker-active {
    color: var(--mat-text) !important;
}

/* Hover efek */
.x-datepicker-inner .x-datepicker-cell:hover {
    background: rgba(144,202,249,.15) !important;
    color: var(--mat-primary) !important;
}

/* Selected */
.x-datepicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
    font-weight: 600;
}

/* Hari ini */
.x-datepicker-today {
    border: 1px solid var(--mat-primary) !important;
    border-radius: 50% !important;
    font-weight: 600;
    color: var(--mat-primary) !important;
}

/* Month picker (popup pilih bulan/tahun) */
.x-monthpicker {
    background: var(--mat-surface) !important;
    border: 1px solid var(--mat-border) !important;
    border-radius: var(--mat-radius);
    color: var(--mat-text) !important;
}

.x-monthpicker-item {
    color: var(--mat-text) !important;
    border-radius: var(--mat-radius);
    padding: 6px 10px;
}

/* .x-monthpicker-item-hover {
    background: rgba(144,202,249,.15) !important;
    color: var(--mat-primary) !important;
} */

.x-monthpicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
    font-weight: 600;
}
/* Nama hari (Sun, Mon, Tue ...) */
.x-datepicker-inner th {
    background: var(--mat-header) !important;
    color: var(--mat-text-secondary) !important;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 1px solid var(--mat-border);
}

/* Cell hari non-aktif (tanggal dari bulan sebelumnya / setelahnya) */
.x-datepicker-cell .x-datepicker-disabled {
    color: #555 !important;
    background: transparent !important;
    opacity: 0.5;
}

/* Switch bulan/tahun (di tengah header) */
.x-datepicker-month,
.x-datepicker-year {
    color: var(--mat-text) !important;
    font-weight: 600;
    transition: color .2s;
}

    .x-datepicker-month:hover,
    .x-datepicker-year:hover {
        color: var(--mat-primary) !important;
    }
/* Footer DatePicker (bagian bawah) */
.x-datepicker-footer {
    background: var(--mat-header) !important;
    border-top: 1px solid var(--mat-border) !important;
    padding: 6px;
}

    /* Tombol di footer DatePicker */
    .x-datepicker-footer .x-btn {
        background: #2c2c2c !important;
        color: var(--mat-text) !important;
        border-radius: var(--mat-radius);
        transition: background .2s, transform .1s;
    }

    .x-datepicker-footer .x-btn-over {
        background: #3a3a3a !important;
        transform: translateY(-1px);
    }

    .x-datepicker-footer .x-btn:active {
        background: #444 !important;
        transform: scale(0.96);
    }
/* Default date cell */
.x-datepicker-date {
    border-radius: var(--mat-radius) !important; /* ganti bulat jadi rounded kotak */
    padding: 4px;
    transition: background .2s, color .2s;
}

    /* Hover */
    .x-datepicker-date:hover {
        background: rgba(144,202,249,.15) !important; /* soft blue */
        color: var(--mat-primary) !important;
    }

/* Selected */
.x-datepicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
    border-radius: var(--mat-radius) !important; /* pastikan kotak, bukan bulat */
}

/* Today marker */
.x-datepicker-today {
    border: 1px solid var(--mat-primary);
    border-radius: var(--mat-radius) !important;
}
/* TabBar container */
.x-tab-bar {
    background-color: var(--mat-header) !important;
    border: none !important;
    box-shadow: inset 0 -1px 0 var(--mat-border); /* garis bawah tipis */
}

/* Tab item default */
.x-tab {
    background: transparent !important;
    color: var(--mat-text-secondary) !important;
    border: none !important;
    padding: 8px 16px;
    font-weight: 500;
    transition: color .2s, border-color .2s;
}

    /* Hover */
    .x-tab:hover {
        color: var(--mat-primary) !important;
    }

/* Tab aktif */
.x-tab-active {
    color: var(--mat-primary) !important;
    border-bottom: 2px solid var(--mat-primary) !important;
    font-weight: 600;
}

/* Close button di tab */
.x-tab-close-btn {
    filter: invert(1) brightness(200%) !important; /* jadi putih */
    opacity: 0.7;
    transition: opacity .2s;
}

    .x-tab-close-btn:hover {
        opacity: 1;
    }
/*.x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
    border-style: solid;
    border-color: var(--mat-surface) !important;
}*/
.x-grid-item-selected {
    color: var(--mat-text) !important;
    background-color: var(--mat-primary2) !important;
}

/* AutoContainer (innerCt) */
.x-autocontainer-innerCt {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border-color: var(--mat-border) !important;
}

    /* Jika ada panel di dalam AutoContainer */
    .x-autocontainer-innerCt .x-panel-body-default {
        background-color: var(--mat-surface) !important;
        color: var(--mat-text) !important;
        border-color: var(--mat-border) !important;
    }

/* Label form field */
.x-form-item-label,
.x-form-item-label-inner,
.x-form-fieldlabel,
.x-label,
.x-form-cb-label {
    color: var(--mat-text) !important; /* warna teks utama */
}

    /* Label secondary / optional info */
    .x-form-item-label .x-form-item-label-text,
    .x-form-item-label em,
    .x-form-item-label span {
        color: var(--mat-text-secondary) !important;
        font-weight: bold;
    }
/* Global iframe fix */
iframe {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border: none !important;
}

    /* Khusus iframe kosong (tidak ada konten / about:blank) */
    iframe:empty {
        background-color: var(--mat-surface) !important;
    }

/* Untuk panel/tabpanel dengan iframe (misalnya Ext.NET Frame) */
.x-frame,
.x-iframe,
.x-iframe-body {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
}

/* ===========================================
   MATERIAL DARK THEME - Ext.NET 5.3.0 Aria
   Simplified Material Design (Google Dark)
   =========================================== */

/* ========= COLOR VARIABLES ========= */
:root {
    --mat-primary: #90caf9; /* Light Blue 200 */
    --mat-primary-dark: #42a5f5; /* Blue 400 */
    --mat-accent: #ffb74d; /* Orange 300 */
    --mat-warn: #ef5350; /* Red 400 */
    /* Surfaces */
    --mat-bg: #121212; /* app background */
    --mat-surface: #1e1e1e; /* cards, panels */
    --mat-header: #2a2a2a; /* headers, toolbars */
    --mat-border: #333;
    /* Typography */
    --mat-text: #e0e0e0;
    --mat-text-secondary: #9e9e9e;
    /* Style */
    --mat-radius: 6px;
    --mat-shadow: 0 2px 6px rgba(0,0,0,.7);
}

/* ========== GOOGLE MATERIAL FONT ========= */
body, .x-body {
    font-family: 'Roboto', 'Segoe UI', sans-serif !important;
    background: var(--mat-bg) !important;
    color: var(--mat-text) !important;
}

/* ========== PANEL / CARD ========= */
.x-panel, .x-window, .x-panel-default {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius) !important;
    border: 1px solid var(--mat-border) !important;
    box-shadow: var(--mat-shadow);
}

.x-panel-header, .x-window-header, .x-grid-header-ct, .x-toolbar {
    background: var(--mat-header) !important;
    color: var(--mat-text) !important;
    border: 1px solid var(--mat-border);
}

/* ========== FORM FIELD ========= */
.x-form-text, .x-form-field {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--mat-border) !important;
    color: var(--mat-text) !important;
    padding: 6px 4px;
    transition: border-color .25s, box-shadow .25s;
}

    .x-form-text:focus {
        border-bottom-color: var(--mat-primary) !important;
        box-shadow: 0 2px 0 0 var(--mat-primary) !important;
    }

.x-form-invalid-field {
    border-bottom-color: var(--mat-warn) !important;
    box-shadow: 0 2px 0 0 var(--mat-warn) !important;
}

/* ========== BUTTON ========= */
.x-btn {
    background: #2c2c2c !important;
    border-radius: var(--mat-radius) !important;
    border: 1px #fff inherit !important;
    color: var(--mat-text) !important;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: background .25s, transform .15s;
}

.x-btn-over {
    background: #3a3a3a !important;
    transform: translateY(-1px);
}

.x-btn:active {
    background: #444 !important;
    transform: scale(0.98);
}

/* Primary button */
.x-btn-primary {
    background: var(--mat-primary) !important;
    color: #000 !important;
}

    .x-btn-primary.x-btn-over {
        background: var(--mat-primary-dark) !important;
    }

/* Ripple effect */
.x-btn::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.25);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.x-btn:active::after {
    transform: scale(2);
    opacity: 1;
    transition: 0s;
}

/* ========== GRID ========= */
.x-grid, .x-grid-body {
    background: var(--mat-surface) !important;
    color: var(--mat-text) !important;
}

.x-grid-header-ct {
    background: var(--mat-header) !important;
    color: var(--mat-text-secondary) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--mat-border);
}

.x-grid-row {
    background: var(--mat-surface) !important;
    border-bottom: 1px solid var(--mat-border);
}

.x-grid-row-over {
    background: rgba(255,255,255,.05) !important;
}

.x-grid-row-selected {
    background: rgba(144,202,249,.2) !important;
}

/* ========== COMBOBOX / BOUNDLIST ========= */
.x-boundlist {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-shadow);
}

.x-boundlist-item {
    padding: 10px 14px;
    color: var(--mat-text);
}

.x-boundlist-item-over {
    background: rgba(255,255,255,.05) !important;
}

.x-boundlist-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
}

/* ========== DATE PICKER ========= */
.x-datepicker {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-shadow);
    color: var(--mat-text);
}

.x-datepicker-date {
    border-radius: 50% !important;
}

    .x-datepicker-date:hover {
        background: rgb(255, 0, 255) !important;
    }

.x-datepicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
}

.x-datepicker-today {
    border: 1px solid var(--mat-primary);
    border-radius: 50%;
}

/* ========== TAB PANEL ========= */
.x-tab {
    background: transparent !important;
    color: var(--mat-text-secondary) !important;
    border: none !important;
    padding: 8px 16px;
}

.x-tab-active {
    color: var(--mat-primary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--mat-primary) !important;
    transition: border-color .25s;
}

/* ========== MESSAGE BOX ========= */
.x-message-box, .x-window-body {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    color: var(--mat-text);
    box-shadow: var(--mat-shadow);
}

/* ========== TREELIST ========= */
.x-treelist {
    background: var(--mat-surface) !important;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-shadow);
    padding: 8px 0;
    font-family: 'Roboto', sans-serif;
}

.x-treelist-item {
    color: var(--mat-text) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background .2s, color .2s;
    border-radius: 0 var(--mat-radius) var(--mat-radius) 0;
    margin: 2px 4px;
    padding: 6px 10px;
}

    .x-treelist-item:hover {
        background: rgba(144,202,249,.15) !important;
        color: var(--mat-primary) !important;
    }

    .x-treelist-item-selected,
    .x-treelist-item.x-treelist-item-active {
        background: var(--mat-primary) !important;
        color: #000 !important;
        font-weight: 600;
    }

/* Ikon */
.x-treelist-item-icon {
    color: inherit !important;
    margin-right: 8px;
    font-size: 18px;
}

/* Expander arrow */
.x-treelist-item-expander {
    color: var(--mat-text-secondary) !important;
    opacity: .8;
    transition: transform .3s ease, color .3s;
    font-size: 16px;
}

.x-treelist-item:hover .x-treelist-item-expander {
    color: var(--mat-primary) !important;
    opacity: 1;
}

.x-treelist-item-expanded .x-treelist-item-expander {
    transform: rotate(90deg);
}

body.x-border-layout-ct,
div.x-border-layout-ct {
    background-color: var(--mat-header) !important; /* pakai bg dari tema */
}

/* Trigger icon (DateField, ComboBox, dll.) */
.x-form-trigger {
    background: transparent !important;
    border: none !important;
    opacity: 0.8;
    transition: opacity .2s;
}

/* Kalender (date trigger) */
.x-form-date-trigger {
    filter: invert(1) brightness(200%) !important; /* paksa jadi putih */
}

/* Hover lebih jelas */
.x-form-trigger:hover {
    opacity: 1;
}
/* Grid container */
.x-grid,
.x-grid-body,
.x-grid-view,
.x-panel-body-default {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border-color: var(--mat-border) !important;
}

/* Header */
.x-grid-header-ct,
.x-column-header,
.x-column-header-inner {
    background-color: var(--mat-header) !important;
    color: var(--mat-text-secondary) !important;
    border-color: var(--mat-border) !important;
    font-weight: 600;
}

/* Header hover */
.x-column-header-over {
    background-color: rgba(255,255,255,.05) !important;
    color: var(--mat-primary) !important;
}

/* Rows */
.x-grid-row {
    background-color: var(--mat-surface) !important;
    border-bottom: 1px solid var(--mat-border) !important;
    transition: background .2s;
}

.x-grid-row-over {
    background-color: rgba(255,255,255,.05) !important;
}

.x-grid-row-selected {
    background-color: rgba(144,202,249,.15) !important;
    color: var(--mat-primary) !important;
}

/* Cell text */
.x-grid-cell-inner {
    color: var(--mat-text) !important;
}

/* Paging toolbar */
.x-toolbar.x-docked-bottom {
    background-color: var(--mat-header) !important;
    border-top: 1px solid var(--mat-border) !important;
}

/* Hapus border/outline biru bawaan */
.x-treelist-item-selected,
.x-treelist-item-selected:focus,
.x-treelist-item:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

    /* Style selected ala Material */
    .x-treelist-item-selected .x-treelist-item-text,
    .x-treelist-item-selected .x-treelist-item-icon {
        color: var(--mat-primary) !important;
    }

.x-treelist-item-selected {
    background-color: rgba(144, 202, 249, 0.15) !important; /* soft blue bg */
    border-radius: 8px; /* biar modern */
    transition: background 0.2s;
}

/* Header bulan/tahun */
.x-datepicker-header {
    background: var(--mat-header) !important;
    color: var(--mat-text) !important;
    border-bottom: 1px solid var(--mat-border) !important;
}

/* Tombol navigasi bulan (panah kiri/kanan) */
.x-datepicker-arrow {
    color: var(--mat-text-secondary) !important;
    opacity: .8;
    transition: color .2s, opacity .2s;
}

    .x-datepicker-arrow:hover {
        color: var(--mat-primary) !important;
        opacity: 1;
    }

/* Sel tanggal default */
.x-datepicker-inner .x-datepicker-cell {
    background: transparent !important;
    color: var(--mat-text-secondary) !important;
    border-radius: 50%;
    transition: background .2s, color .2s;
}

/* Hari aktif bulan ini */
.x-datepicker-inner .x-datepicker-active {
    color: var(--mat-text) !important;
}

/* Hover efek */
.x-datepicker-inner .x-datepicker-cell:hover {
    background: rgba(144,202,249,.15) !important;
    color: var(--mat-primary) !important;
}

/* Selected */
.x-datepicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
    font-weight: 600;
}

/* Hari ini */
.x-datepicker-today {
    border: 1px solid var(--mat-primary) !important;
    border-radius: 50% !important;
    font-weight: 600;
    color: var(--mat-primary) !important;
}

/* Month picker (popup pilih bulan/tahun) */
.x-monthpicker {
    background: var(--mat-surface) !important;
    border: 1px solid var(--mat-border) !important;
    border-radius: var(--mat-radius);
    color: var(--mat-text) !important;
}

.x-monthpicker-item {
    color: var(--mat-text) !important;
    border-radius: var(--mat-radius);
    padding: 6px 10px;
}

.x-monthpicker-item-hover {
    background: #0D82DB !important;
    color: #0DDB69 !important;
    /* color: var(--mat-primary) !important; */
}

.x-monthpicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
    font-weight: 600;
}
/* Nama hari (Sun, Mon, Tue ...) */
.x-datepicker-inner th {
    background: var(--mat-header) !important;
    color: var(--mat-text-secondary) !important;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 1px solid var(--mat-border);
}

/* Cell hari non-aktif (tanggal dari bulan sebelumnya / setelahnya) */
.x-datepicker-cell .x-datepicker-disabled {
    color: #555 !important;
    background: transparent !important;
    opacity: 0.5;
}

/* Switch bulan/tahun (di tengah header) */
.x-datepicker-month,
.x-datepicker-year {
    color: var(--mat-text) !important;
    font-weight: 600;
    transition: color .2s;
}

    .x-datepicker-month:hover,
    .x-datepicker-year:hover {
        color: var(--mat-primary) !important;
    }
/* Footer DatePicker (bagian bawah) */
.x-datepicker-footer {
    background: var(--mat-header) !important;
    border-top: 1px solid var(--mat-border) !important;
    padding: 6px;
}

    /* Tombol di footer DatePicker */
    .x-datepicker-footer .x-btn {
        background: #2c2c2c !important;
        color: var(--mat-text) !important;
        border-radius: var(--mat-radius);
        transition: background .2s, transform .1s;
    }

    .x-datepicker-footer .x-btn-over {
        background: #3a3a3a !important;
        transform: translateY(-1px);
    }

    .x-datepicker-footer .x-btn:active {
        background: #444 !important;
        transform: scale(0.96);
    }
/* Default date cell */
.x-datepicker-date {
    border-radius: var(--mat-radius) !important; /* ganti bulat jadi rounded kotak */
    padding: 4px;
    transition: background .2s, color .2s;
}

    /* Hover */
    .x-datepicker-date:hover {
        background: rgba(144,202,249,.15) !important; /* soft blue */
        color: var(--mat-primary) !important;
    }

/* Selected */
.x-datepicker-selected {
    background: var(--mat-primary) !important;
    color: #000 !important;
    border-radius: var(--mat-radius) !important; /* pastikan kotak, bukan bulat */
}

/* Today marker */
.x-datepicker-today {
    border: 1px solid var(--mat-primary);
    border-radius: var(--mat-radius) !important;
}
/* TabBar container */
.x-tab-bar {
    background-color: var(--mat-header) !important;
    border: none !important;
    box-shadow: inset 0 -1px 0 var(--mat-border); /* garis bawah tipis */
}

/* Tab item default */
.x-tab {
    background: transparent !important;
    color: var(--mat-text-secondary) !important;
    border: none !important;
    padding: 8px 16px;
    font-weight: 500;
    transition: color .2s, border-color .2s;
}

    /* Hover */
    .x-tab:hover {
        color: var(--mat-primary) !important;
    }

/* Tab aktif */
.x-tab-active {
    color: var(--mat-primary) !important;
    border-bottom: 2px solid var(--mat-primary) !important;
    font-weight: 600;
}

/* Close button di tab */
.x-tab-close-btn {
    filter: invert(1) brightness(200%) !important; /* jadi putih */
    opacity: 0.7;
    transition: opacity .2s;
}

    .x-tab-close-btn:hover {
        opacity: 1;
    }

.x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
    border-style: solid;
    border-color: var(--mat-primary) !important;
}

.x-grid-with-row-lines .x-grid-item-selected + .x-grid-item {
    border-top-style: solid;
    border-top-color: var(--mat-primary) !important;
}

.x-grid-item-selected {
    color: #404040;
    background-color: var(--mat-surface) !important;
}

/* AutoContainer (innerCt) */
.x-autocontainer-innerCt {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border-color: var(--mat-border) !important;
}

    /* Jika ada panel di dalam AutoContainer */
    .x-autocontainer-innerCt .x-panel-body-default {
        background-color: var(--mat-surface) !important;
        color: var(--mat-text) !important;
        border-color: var(--mat-border) !important;
    }

/* Label form field */
.x-form-item-label,
.x-form-item-label-inner,
.x-form-fieldlabel,
.x-label,
.x-form-cb-label {
    color: var(--mat-text) !important; /* warna teks utama */
}

    /* Label secondary / optional info */
    .x-form-item-label .x-form-item-label-text,
    .x-form-item-label em,
    .x-form-item-label span {
        color: var(--mat-text-secondary) !important;
    }
/* Global iframe fix */
iframe {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border: none !important;
}

    /* Khusus iframe kosong (tidak ada konten / about:blank) */
    iframe:empty {
        background-color: var(--mat-surface) !important;
    }

/* Untuk panel/tabpanel dengan iframe (misalnya Ext.NET Frame) */
.x-frame,
.x-iframe,
.x-iframe-body {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
}

.x-menu-body-default {
    background: var(--mat-surface) !important;
}

/* ========================================
   Font Awesome icons - Dark Theme fix
   ======================================== */

/* Semua icon FA default */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
    color: var(--mat-text) !important; /* sesuaikan dengan teks utama */
    transition: color 0.2s;
}

    /* Hover efek untuk icon */
    .fa:hover,
    .fas:hover,
    .far:hover,
    .fal:hover,
    .fad:hover,
    .fab:hover {
        color: var(--mat-primary) !important; /* highlight saat hover */
        cursor: pointer;
    }

/* Tombol dengan icon FA */
.x-btn .fa,
.x-btn .fas,
.x-btn .far,
.x-btn .fal,
.x-btn .fad,
.x-btn .fab {
    color: var(--mat-text) !important;
}

/* Jika ingin icon di menu / boundlist */
.x-boundlist-item .fa,
.x-boundlist-item .fas,
.x-boundlist-item .far,
.x-boundlist-item .fal,
.x-boundlist-item .fad,
.x-boundlist-item .fab {
    color: var(--mat-text-secondary) !important;
}

/* Hover icon di list */
.x-boundlist-item-over .fa,
.x-boundlist-item-over .fas,
.x-boundlist-item-over .far,
.x-boundlist-item-over .fal,
.x-boundlist-item-over .fad,
.x-boundlist-item-over .fab {
    color: var(--mat-primary) !important;
}
/* Row selected full background */
/* Row selected dengan biru redup */
.x-grid-item-selected {
    background-color: rgba(30, 136, 229, 0.25) !important; /* biru redup transparan */
    color: var(--mat-text) !important; /* tetap pakai teks abu terang */
}

    /* Pastikan cell di dalam row juga ikut */
    .x-grid-item-selected .x-grid-cell {
        background-color: rgba(30, 136, 229, 0.25) !important;
        color: var(--mat-text) !important;
    }

/* Hilangkan border fokus biru bawaan */
.x-grid-cell-focused {
    box-shadow: none !important;
    border: none !important;
}

/* Background row expander biar ikut tema dark */
.x-grid-rowbody,
.x-grid-rowbody .x-grid-cell,
.x-grid-rowbody .x-panel,
.x-grid-rowbody .x-panel-body {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
    border-color: var(--mat-border) !important;
}
/* Warna cell spacer expander */
.x-grid-row-expander-spacer,
.x-grid-cell-special {
    background-color: var(--mat-surface) !important;
    border-color: var(--mat-border) !important;
}
/* Background rowbody agar tidak putih */
.x-grid-rowbody-tr td,
.x-grid-rowbody {
    background-color: var(--mat-surface) !important;
    color: var(--mat-text) !important;
}
/* Header bulan/tahun (title di atas kalender) */
.x-datepicker-month .x-btn-inner,
.x-datepicker-month .x-btn-button,
.x-datepicker-header .x-btn .x-btn-inner {
    color: #f0f0f0 !important; /* teks terang */
    font-weight: 500 !important;
}

/* Tombol Today agar terbaca */
.x-datepicker-footer .x-btn .x-btn-inner {
    color: #e0e0e0 !important;
    font-weight: 500 !important;
}

.x-datepicker-footer .x-btn:hover .x-btn-inner {
    color: #fff !important;
}
/* Tanggal bulan ini (current month) */
.x-datepicker-inner .x-datepicker-cell:not(.x-datepicker-prevday):not(.x-datepicker-nextday) .x-datepicker-date {
    color: #e0e0e0 !important; /* terang */
}

/* Tanggal bulan lalu & depan */
.x-datepicker-inner .x-datepicker-prevday .x-datepicker-date,
.x-datepicker-inner .x-datepicker-nextday .x-datepicker-date {
    color: #666 !important; /* redup */
}

/* Hari ini */
.x-datepicker-inner .x-datepicker-today .x-datepicker-date {
    border: 1px solid #4da3ff !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 4px;
}

/* Tanggal terpilih */
.x-datepicker-inner .x-datepicker-selected .x-datepicker-date {
    background-color: #3a6ea5 !important; /* biru redup */
    color: #fff !important;
    border-radius: 6px;
}



/* Tombol Today */
.x-datepicker-footer .x-btn-inner {
    color: #f5f5f5 !important;
}

/* ===== Month/Year Picker Dark Theme ===== */

/* Background utama */
.x-monthpicker,
.x-monthpicker-item,
.x-monthpicker-yearnav {
    background-color: #1e1e1e !important;
    color: #f0f0f0 !important;
}

/* Bulan & Tahun normal */
.x-monthpicker-item-inner {
    color: #e0e0e0 !important;
}

/* Bulan & Tahun disabled */
.x-monthpicker-item-disabled .x-monthpicker-item-inner {
    color: #666 !important;
}

/* Bulan & Tahun terpilih */
.x-monthpicker-item.x-monthpicker-selected .x-monthpicker-item-inner {
    background-color: #3a6ea5 !important; /* biru redup */
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
}

/* Navigasi tahun (» «) */
.x-monthpicker-yearnav button {
    background: transparent !important;
    color: #ccc !important;
    transition: color 0.2s ease;
}

    .x-monthpicker-yearnav button:hover {
        color: #4da3ff !important; /* biru saat hover */
    }

/* ===== Footer ===== */
.x-monthpicker-buttons {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333 !important;
    padding: 6px;
}

    /* Tombol OK / Cancel */
    .x-monthpicker-buttons .x-btn {
        background-color: #2a2a2a !important;
        border: 1px solid #444 !important;
        border-radius: 6px;
        transition: background 0.2s ease, transform 0.1s ease;
    }

        .x-monthpicker-buttons .x-btn:hover {
            background-color: #3a3a3a !important;
            transform: scale(1.05);
        }

    .x-monthpicker-buttons .x-btn-inner {
        color: #f5f5f5 !important;
        font-weight: 500;
    }
/* ==========================
   DARK THEME SCROLLBAR
   ========================== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a; /* jalur scrollbar */
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #444; /* warna default thumb */
    border-radius: 8px;
    border: 2px solid #1a1a1a; /* biar ada jarak */
    transition: background 0.2s ease;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #5a8fd8; /* biru redup saat hover */
    }

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

a.x-monthpicker-item-inner:hover {
    color: #fff !important;
    background-color: rgba(30, 136, 229, 0.40) !important;
}

.x-btn::after {
    pointer-events: none !important;
}

/* Jika Ext/Browser menggunakan input file overlay, pastikan bisa diklik */
.x-form-file, input[type="file"] {
    pointer-events: auto !important;
    z-index: 2 !important; /* pastikan berada di atas pseudo-element */
}

input[type="file"] {
    outline: 2px dashed rgba(255,255,255,0.15);
}