/* ============================================================
   GLOBAL CSS — Design System
   Primary: #0e2037  |  Surface: #f0f3f8  |  Card: #ffffff
   ============================================================ */

/* ============================
   DESIGN TOKENS
   ============================ */
:root,
[data-theme="theme-default"] {
    /* ─── Brand palette ─── */
    --primary: #0e2037;
    --primary-dark: #091525;
    /* hover/active darken */
    --primary-light: #1a3459;
    /* gradient pair */
    --primary-rgb: 14, 32, 55;

    /* ─── Semantic colors ─── */
    --c-success: #10b981;
    --c-warning: #f59e0b;
    --c-danger: #ef4444;
    --c-info: #3b82f6;

    /* ─── Surface & type ─── */
    --c-surface: #f0f3f8;
    --c-card: #ffffff;
    --c-border: #dde3ed;
    --c-ink: #0e2037;
    --c-ink-mid: #4a5568;
    --c-ink-light: #8a94a6;

    /* ─── Radius ─── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-pill: 9999px;

    /* ─── Shadow ─── */
    --shadow-sm: 0 1px 4px rgba(var(--primary-rgb), .06), 0 4px 16px rgba(var(--primary-rgb), .05);
    --shadow-md: 0 4px 12px rgba(var(--primary-rgb), .08), 0 12px 32px rgba(var(--primary-rgb), .10);
    --shadow-lg: 0 8px 24px rgba(var(--primary-rgb), .10), 0 24px 56px rgba(var(--primary-rgb), .12);

    /* ─── Sidebar ─── */
    --sidebar-bg: #0e2037;
    --sidebar-text: rgba(255, 255, 255, 0.78);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.12);
    --sidebar-active-color: #ffffff;
    --sidebar-heading: rgba(255, 255, 255, 0.50);
    --sidebar-border: rgba(255, 255, 255, 0.10);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);

    --transition: all .22s cubic-bezier(.4, 0, .2, 1);

    /* ─── Aliases (compat) ─── */
    --c-primary: #0e2037;
    /* sama dengan --primary */
    --c-primary-2: #1a3459;
    /* sama dengan --primary-light */
    --c-accent: #0e2037;
    --c-accent-2: #1a3459;
    --radius-card: 18px;
    /* sama dengan --radius-xl */
}


/* ============================
   GLOBAL PAGE
   ============================ */
body {
    background: var(--c-surface) !important;
}


/* ============================
   BUTTON OVERRIDE
   ============================ */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), .28) !important;
}

/* Pisah :focus dari :active — focus pakai outline, bukan warna gelap */
.btn-primary:focus-visible {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .30) !important;
}

.btn-primary:active {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

/* ============================
   SIDEBAR
   ============================ */
.layout-menu.menu-vertical.menu.bg-menu-theme {
    background-color: var(--sidebar-bg) !important;
}

.layout-menu .menu-link,
.layout-menu .menu-icon {
    color: var(--sidebar-text) !important;
    transition: var(--transition);
}

.layout-menu .menu-link:hover,
.layout-menu .menu-icon:hover {
    color: var(--sidebar-text-hover) !important;
    background: var(--sidebar-hover-bg) !important;
}

.layout-menu .menu-item.active>.menu-link,
.layout-menu .menu-item.open>.menu-toggle {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-color) !important;
}

.layout-menu .menu-header-text {
    color: var(--sidebar-heading) !important;
}

.layout-menu .menu-inner-shadow {
    display: none !important;
}

/* Sidebar — logo / brand area */
.layout-menu .app-brand {
    padding-top: 10px !important;
    min-height: 76px !important;
    align-items: center !important;
}

.layout-menu .app-brand-logo {
    margin-top: 4px !important;
}

.layout-menu .app-brand-text {
    margin-top: 10px !important;
}

.layout-menu .app-brand .app-brand-text,
.layout-menu .app-brand .menu-text,
.layout-menu .app-brand .fw-bold,
.layout-menu .app-brand .demo,
.layout-menu .app-brand-link {
    color: #ededed !important;
}

.layout-menu .app-brand-link:hover .app-brand-text,
.layout-menu .app-brand-link:hover .menu-text {
    color: #ededed !important;
}

/* Sidebar — toggle icon */
.layout-menu .layout-menu-toggle {
    color: #ffffff !important;
    background: transparent !important;
}

.layout-menu .layout-menu-toggle svg {
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.layout-menu .layout-menu-toggle path {
    fill: #ffffff !important;
}

.layout-menu .layout-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}


/* ============================
   NAVBAR
   ============================ */
.layout-navbar.navbar-detached {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(var(--primary-rgb), .08);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 35px rgba(var(--primary-rgb), .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1040 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Top accent stripe - disabled */
.layout-navbar.navbar-detached::before {
    display: none;
}

.layout-navbar .navbar-nav-right {
    width: 100%;
    justify-content: flex-end;
}

.layout-navbar .nav-link {
    border-radius: var(--radius-pill);
    color: #334155 !important;
    min-height: 42px;
    transition: var(--transition);
}

.layout-navbar .nav-link:hover {
    background: rgba(var(--primary-rgb), .06);
    color: var(--primary) !important;
    transform: translateY(-1px);
}

.layout-navbar .btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Profile pill */
.layout-navbar .profile-pill {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .32rem .72rem .32rem .35rem;
    border: 1px solid rgba(var(--primary-rgb), .08);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .90);
    transition: var(--transition);
}

.layout-navbar .profile-pill:hover {
    background: #ffffff;
    border-color: rgba(var(--primary-rgb), .16);
    transform: translateY(-1px);
}

/* Enhanced Profile Pill - Navbar */
.profile-pill--enhanced {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .25rem .5rem .25rem .25rem;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(var(--primary-rgb), .02) 100%);
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.profile-pill--enhanced:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(var(--primary-rgb), .04) 100%);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .12);
    transform: translateY(-1px);
}

.profile-pill--enhanced .avatar {
    width: 38px;
    height: 38px;
}

.profile-pill--enhanced .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* Avatar Status Indicator */
.layout-navbar .avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
}

.layout-navbar .profile-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-ink);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.1;
}

.layout-navbar .profile-role {
    display: block;
    margin-top: 2px;
    color: var(--c-ink-mid);
    font-size: .72rem;
    line-height: 1.1;
}

.layout-navbar .profile-trigger .ri-arrow-down-s-line {
    color: var(--c-ink-light);
    font-size: 1.2rem;
}

.layout-navbar .avatar.avatar-online {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08);
}

/* Navbar dropdown */
.layout-navbar .dropdown-menu {
    position: absolute !important;
    z-index: 1060 !important;
    border: none;
    border-radius: var(--radius-lg);
    padding: 8px;
    box-shadow: 0 18px 45px rgba(var(--primary-rgb), .16);
    background: #ffffff;
    min-width: 260px;
}

.layout-navbar .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

.layout-navbar .dropdown-item {
    border-radius: var(--radius-md);
    color: #334155;
    padding: 10px 12px;
    transition: var(--transition);
}

.layout-navbar .dropdown-item:hover {
    background: var(--c-surface);
    color: var(--primary);
    transform: translateX(2px);
}

.layout-navbar .dropdown-divider {
    margin: .5rem 0;
    background: rgba(var(--primary-rgb), .08);
}

.layout-navbar .btn-danger {
    border-radius: var(--radius-md);
}

/* No-sidebar layout */
.no-sidebar .layout-page,
.no-sidebar .content-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.no-sidebar .layout-overlay,
.no-sidebar .drag-target {
    display: none !important;
}

/* Responsive navbar */
@media (max-width: 1199.98px) {
    .layout-navbar .profile-pill {
        padding: .35rem;
    }

    .layout-navbar .profile-name,
    .layout-navbar .profile-role,
    .layout-navbar .profile-trigger .ri-arrow-down-s-line {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .layout-navbar.navbar-detached {
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
}


/* ============================
   DATATABLES
   ============================ */

/* Wrapper controls */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_filter label {
    font-size: 0;
}

/* hide "Search:" text */
.dataTables_wrapper .dataTables_filter input {
    font-size: 14px;
}

.dataTables_wrapper .dataTables_length select, 
.dataTables_wrapper .dataTables_filter input{
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    box-shadow: none;
    color: var(--c-ink);
    transition: var(--transition);
}

.dataTables_wrapper .dataTables_length select:focus, 
.dataTables_wrapper .dataTables_filter input:focus
{
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10);
}

.dataTables_wrapper .dataTables_filter label {
    font-weight: 500;
    color: var(--c-ink-mid);
}

/* Table base */
table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Header */
table.dataTable thead th {
    background: #f4f6fa;
    color: var(--c-ink);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 10px;
    border-bottom: 2px solid var(--c-border);
    white-space: nowrap;
    transition: var(--transition);
}

table.dataTable thead th:hover {
    background: var(--c-border);
    cursor: pointer;
}

table.dataTable thead th:not(:last-child) {
    border-right: 1px solid var(--c-border);
}

table.dataTable thead {
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), .04);
}

/* Sort icon */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    right: 8px;
    opacity: .6;
}

/* Body rows */
table.dataTable tbody tr {
    background: #ffffff;
    transition: var(--transition);
}

table.dataTable tbody tr:nth-child(even) {
    background: #fafbfd;
}

table.dataTable tbody tr:hover {
    background: #f0f3f8;
}

table.dataTable tbody tr.selected {
    background: #e3eaf5 !important;
}

table.dataTable tbody td {
    padding: 10px;
    font-size: 13px;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-border);
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 16px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px !important;
    margin: 0 2px;
    font-size: 12px;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--c-border) !important;
    background: #ffffff !important;
    color: var(--c-ink) !important;
    transition: var(--transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-surface) !important;
    border-color: var(--c-ink-light) !important;
    color: var(--c-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-weight: 600;
    background: var(--c-surface) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    background: var(--c-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}

/* Processing spinner */
.dataTables_processing:after {
    display: none !important;
}

.dataTables_processing:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--c-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: dt-spin 1s linear infinite;
    margin-top: 80px;
}

.dataTables_wrapper .dataTables_processing div {
    display: none !important;
}

@keyframes dt-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================
   SWEETALERT2
   ============================ */
.swal2-container {
    z-index: 99999 !important;
}

.swal2-popup {
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    width: 380px !important;
}

.swal2-icon {
    transform: scale(.70);
    margin: 6px auto 0 !important;
}

.swal2-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--c-ink) !important;
    margin-top: 4px !important;
}

.swal-text {
    font-size: 13px !important;
    color: var(--c-ink-mid) !important;
    margin-top: 6px !important;
}

.swal2-actions {
    margin-top: 12px !important;
    gap: 8px;
}

.swal2-confirm {
    background-color: var(--c-accent) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
}

.swal2-cancel {
    background-color: var(--c-danger) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
}

/* ============================
   SIDEBAR SUBMENU ARROW OVERRIDE
   ============================ */
/* Menargetkan arrow dengan spesifisitas lebih tinggi menggunakan .layout-menu */
.layout-menu .menu-item .menu-link.menu-toggle::after {
    border-color: var(--c-card) !important;
    color: var(--c-card) !important;
    opacity: 0.7 !important;
    transition: var(--transition) !important;
}

/* Saat menu terbuka (open) atau aktif, buat arrow menjadi putih pekat */
.layout-menu .menu-item.open > .menu-link.menu-toggle::after,
.layout-menu .menu-item.active > .menu-link.menu-toggle::after {
    border-color: var(--c-card) !important;
    color: var(--c-card) !important;
    opacity: 1 !important;
}

/* Saat hover, buat arrow lebih terang */
.layout-menu .menu-item .menu-link.menu-toggle:hover::after {
    opacity: 1 !important;
    border-color: var(--c-card) !important;
}


/* Custom Modern Styling */
.card-custom {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card-custom:hover {
    box-shadow: var(--shadow-md);
}

.stat-card {
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--c-border);
    background: var(--c-card);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.filter-section {
    background: var(--c-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
}

.text-primary-custom {
    color: var(--primary);
}

.text-muted-custom {
    color: var(--c-ink-mid);
}
/* ============================
   SELECT2 — TIP Design System
   ============================ */

/* ── Container ── */
.select2-container {
    width: 100% !important;
}

/* ── Selection box ── */
.select2-container--default .select2-selection--single {
    height: 44px !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--c-card) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 36px 0 10px !important;
    box-sizing: border-box !important;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* ── Rendered text ── */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding: 0 !important;
    color: var(--c-ink, inherit) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Placeholder ── */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--c-ink-light, #adb5bd) !important;
}

/* ── Arrow wrapper — sembunyikan bawaan ── */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    width: 24px !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* ── Arrow custom (chevron) ── */
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}

/* Arrow rotate saat open */
.select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow::after {
    transform: rotate(-135deg) translateY(-2px);
}

/* ── Clear button ── */
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    font-size: 1rem;
    line-height: 1;
    color: #adb5bd;
    transition: color .15s ease;
    z-index: 1;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--c-danger, #dc3545);
}

/* ── Focus state ── */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10) !important;
    outline: none !important;
}

/* ── Dropdown panel ── */
.select2-dropdown {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    background: var(--c-card) !important;
    overflow: hidden;
}

/* ── Search input di dropdown ── */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: .4rem .65rem !important;
    font-size: .875rem !important;
    color: var(--c-ink) !important;
    background: var(--c-surface) !important;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10) !important;
}

/* ── Hasil dropdown ── */
.select2-container--default .select2-results__option {
    padding: .5rem .85rem !important;
    font-size: .875rem !important;
    color: var(--c-ink) !important;
    transition: background .12s ease;
}

.select2-container--default .select2-results__option--highlighted {
    background: rgba(var(--primary-rgb), .08) !important;
    color: var(--primary) !important;
}

.select2-container--default .select2-results__option--selected {
    background: rgba(var(--primary-rgb), .12) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* ── Disabled ── */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--c-surface) !important;
    opacity: .65;
    cursor: not-allowed;
}


/* ============================
   FLATPICKR
   ============================ */

/* Override readonly transparent dari template */
input[readonly].flatpickr-input,
input.flatpickr-input[readonly],
.form-control[readonly].flatpickr-input,
.card input[readonly].flatpickr-input,
form input[readonly].flatpickr-input,
.tab-pane-content input[readonly].flatpickr-input,
.form-section-body input[readonly].flatpickr-input,
.card-body input[readonly].flatpickr-input {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--c-ink) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--c-ink) !important;
    cursor: pointer !important;
}

/* State focus & active */
input.flatpickr-input:focus,
input.flatpickr-input.active,
input[readonly].flatpickr-input:focus,
input[readonly].flatpickr-input.active {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10) !important;
    outline: none !important;
}

/* Kalender popup */
.flatpickr-calendar {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--c-border) !important;
    font-family: inherit !important;
    overflow: hidden;
}

/* Header bulan */
.flatpickr-months .flatpickr-month {
    background: var(--primary) !important;
    color: #fff !important;
    fill: #fff !important;
    height: 44px !important;
}

.flatpickr-current-month {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding-top: 8px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
    outline: none !important;
}

.flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-weight: 700 !important;
}

.flatpickr-current-month input.cur-year:focus {
    background: rgba(255,255,255,.15) !important;
}

/* Arrow navigasi */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #fff !important;
    fill: #fff !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #fff !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #fff !important;
}

/* Header hari */
.flatpickr-weekdays {
    background: var(--primary) !important;
}

span.flatpickr-weekday {
    background: var(--primary) !important;
    color: rgba(255,255,255,.75) !important;
    font-weight: 700 !important;
    font-size: .78rem !important;
}

/* Hari-hari */
.flatpickr-day {
    border-radius: var(--radius-md) !important;
    color: var(--c-ink) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    transition: all .15s ease !important;
}

.flatpickr-day:hover {
    background: rgba(var(--primary-rgb), .08) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.flatpickr-day.today {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.flatpickr-day.today:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--c-ink-light) !important;
    opacity: .4 !important;
}

/* Input wrapper jika flatpickr buat wrapper */
.flatpickr-wrapper {
    width: 100% !important;
    display: block !important;
}

.flatpickr-wrapper input {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

* .flatpickr-input {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Fix warna teks flatpickr readonly */
input.flatpickr-input[readonly],
input[readonly].flatpickr-input {
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Flatpickr calendar background fix */
.flatpickr-calendar {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.flatpickr-calendar.open {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Inner container */
.flatpickr-innerContainer {
    background: #ffffff !important;
}

.flatpickr-rContainer {
    background: #ffffff !important;
}

.flatpickr-days {
    background: #ffffff !important;
    border-left: 1px solid var(--c-border) !important;
    border-right: 1px solid var(--c-border) !important;
}

.dayContainer {
    background: #ffffff !important;
}