:root {
    --zk-background: #fff1ea;
    --zk-foreground: #5c2a17;
    --zk-card: #fffaf5;
    --zk-card-foreground: #4e1c0a;
    --zk-primary: #cc7455;
    --zk-primary-rgb: 204, 116, 85;
    --zk-primary-hover: #b8634a;
    --zk-primary-dark: #9e5f48;
    --zk-primary-foreground: #ffffff;
    --zk-secondary: #fdddcf;
    --zk-muted: #fbebe4;
    --zk-muted-foreground: #8c685c;
    --zk-accent: #fdddcf;
    --zk-border: #f0d8ce;
    --zk-destructive: #e7000b;
    --zk-chart-1: #cc7455;
    --zk-chart-2: #5c2a17;
    --zk-chart-3: #fbbea3;
    --zk-chart-4: #924d35;
    --zk-chart-5: #d58679;
    --zk-radius: 0.75rem;
    --zk-gradient: linear-gradient(135deg, #d4956e 0%, #c4866a 40%, #b87058 70%, #c4956a 100%);

    --zk-font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --zk-font-serif: 'Playfair Display', Georgia, serif;
    --zk-font-lato: 'Lato', sans-serif;

    --vz-primary: var(--zk-primary);
    --vz-primary-rgb: var(--zk-primary-rgb);
    --vz-font-sans-serif: var(--zk-font-sans);
    --vz-body-font-family: var(--zk-font-sans);
    --vz-body-bg: var(--zk-background);
    --vz-body-bg-rgb: 255, 241, 234;
    --vz-body-color: var(--zk-foreground);
    --vz-body-color-rgb: 92, 42, 23;
    --vz-link-color: var(--zk-primary);
    --vz-link-hover-color: var(--zk-primary-hover);
    --vz-border-color: var(--zk-border);
    --vz-card-bg: var(--zk-card);
    --vz-card-bg-custom: var(--zk-card);
    --vz-input-border: var(--zk-border);
    --vz-input-border-custom: var(--zk-border);
    --vz-dropdown-bg: var(--zk-card);
    --vz-dropdown-link-hover-bg: var(--zk-muted);
    --vz-dropdown-link-hover-color: var(--zk-foreground);
    --vz-modal-bg: var(--zk-card);
    --vz-light: var(--zk-muted);
    --vz-light-rgb: 251, 235, 228;

    --vz-vertical-menu-bg: var(--zk-card);
    --vz-vertical-menu-item-color: var(--zk-foreground);
    --vz-vertical-menu-item-hover-color: var(--zk-primary);
    --vz-vertical-menu-item-active-color: var(--zk-primary);
    --vz-vertical-menu-sub-item-color: var(--zk-muted-foreground);
    --vz-vertical-menu-sub-item-hover-color: var(--zk-primary);
    --vz-vertical-menu-sub-item-active-color: var(--zk-primary);
    --vz-vertical-menu-title-color: var(--zk-muted-foreground);

    --vz-header-bg: var(--zk-card);
    --vz-topbar-user-bg: var(--zk-muted);
    --vz-topbar-search-bg: var(--zk-muted);
    --vz-footer-bg: var(--zk-card);
    --vz-footer-color: var(--zk-muted-foreground);
}

[data-layout-mode=dark] {
    --zk-background: #0e0705;
    --zk-foreground: #f8ece6;
    --zk-card: #17100c;
    --zk-card-foreground: #f8ece6;
    --zk-secondary: #211815;
    --zk-muted: #211815;
    --zk-muted-foreground: #988d88;
    --zk-accent: #211815;
    --zk-border: #2d2420;
    --zk-chart-2: #7b4532;

    --vz-body-bg: var(--zk-background);
    --vz-body-bg-rgb: 14, 7, 5;
    --vz-body-color: var(--zk-foreground);
    --vz-body-color-rgb: 248, 236, 230;
    --vz-border-color: var(--zk-border);
    --vz-card-bg: var(--zk-card);
    --vz-card-bg-custom: var(--zk-card);
    --vz-input-border: var(--zk-border);
    --vz-input-border-custom: var(--zk-border);
    --vz-dropdown-bg: var(--zk-card);
    --vz-dropdown-link-hover-bg: var(--zk-muted);
    --vz-dropdown-link-hover-color: var(--zk-foreground);
    --vz-modal-bg: var(--zk-card);
    --vz-light: var(--zk-muted);
    --vz-light-rgb: 33, 24, 21;

    --vz-vertical-menu-bg: var(--zk-card);
    --vz-vertical-menu-item-color: var(--zk-foreground);
    --vz-vertical-menu-sub-item-color: var(--zk-muted-foreground);
    --vz-vertical-menu-title-color: var(--zk-muted-foreground);

    --vz-header-bg: var(--zk-card);
    --vz-topbar-user-bg: var(--zk-muted);
    --vz-topbar-search-bg: var(--zk-muted);
    --vz-footer-bg: var(--zk-card);
    --vz-footer-color: var(--zk-muted-foreground);
}

body {
    font-family: var(--zk-font-sans);
    background-color: var(--zk-background);
    color: var(--zk-foreground);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--zk-foreground);
}

.font-serif {
    font-family: var(--zk-font-serif);
}

.font-lato {
    font-family: var(--zk-font-lato);
}

.text-muted {
    color: var(--zk-muted-foreground) !important;
}

a {
    color: var(--zk-primary);
}

    a:hover {
        color: var(--zk-primary-hover);
    }

.text-primary { color: var(--zk-primary) !important; }
.bg-primary { background-color: var(--zk-primary) !important; }
.border-primary { border-color: var(--zk-primary) !important; }
.link-primary { color: var(--zk-primary) !important; }
.link-primary:hover, .link-primary:focus { color: var(--zk-primary-hover) !important; }
.bg-soft-primary { background-color: rgba(var(--zk-primary-rgb), .12) !important; }
.badge-soft-primary { color: var(--zk-primary); background-color: rgba(var(--zk-primary-rgb), .12); }
.text-bg-primary { color: #fff !important; background-color: var(--zk-primary) !important; }
.progress-bar { background-color: var(--zk-primary); }

.btn-primary {
    --vz-btn-bg: var(--zk-primary);
    --vz-btn-border-color: var(--zk-primary);
    --vz-btn-hover-bg: var(--zk-primary-hover);
    --vz-btn-hover-border-color: var(--zk-primary-hover);
    --vz-btn-active-bg: var(--zk-primary-dark);
    --vz-btn-active-border-color: var(--zk-primary-dark);
    color: var(--zk-primary-foreground);
    background-color: var(--zk-primary);
    border-color: var(--zk-primary);
    border-radius: var(--zk-radius);
    box-shadow: 0 4px 14px rgba(var(--zk-primary-rgb), .30);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
        color: var(--zk-primary-foreground) !important;
        background-color: var(--zk-primary-hover) !important;
        border-color: var(--zk-primary-hover) !important;
    }

    .btn-primary:disabled, .btn-primary.disabled {
        background-color: #d9a48a;
        border-color: #d9a48a;
        box-shadow: none;
    }

.btn-outline-primary {
    color: var(--zk-primary);
    border-color: var(--zk-primary);
    border-radius: var(--zk-radius);
}

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active {
        color: #fff !important;
        background-color: var(--zk-primary) !important;
        border-color: var(--zk-primary) !important;
    }

.btn-soft-primary {
    color: var(--zk-primary);
    background-color: rgba(var(--zk-primary-rgb), .12);
    border-color: transparent;
}

    .btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active {
        color: #fff !important;
        background-color: var(--zk-primary) !important;
    }

.btn-ghost-primary { color: var(--zk-primary); }
.btn-ghost-primary:hover, .btn-ghost-primary:focus { color: var(--zk-primary); background-color: rgba(var(--zk-primary-rgb), .1); }

.btn {
    border-radius: calc(var(--zk-radius) - 4px);
}

.btn-zakiah {
    position: relative;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    border: none;
    border-radius: var(--zk-radius);
    background: var(--zk-gradient);
    box-shadow: 0 4px 20px rgba(196, 134, 106, .45), 0 1px 4px rgba(120, 60, 30, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .btn-zakiah:hover, .btn-zakiah:focus {
        color: #fff;
        box-shadow: 0 6px 24px rgba(196, 134, 106, .55), 0 1px 4px rgba(120, 60, 30, .25);
    }

    .btn-zakiah:active {
        transform: scale(.98);
    }

    .btn-zakiah::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -75%;
        width: 4rem;
        opacity: .25;
        transform: skewX(-12deg);
        background: linear-gradient(90deg, transparent, #fff, transparent);
        animation: auth-shine 3s ease-in-out 1s infinite;
        pointer-events: none;
    }

    .btn-zakiah:disabled {
        background: #d9a48a;
        box-shadow: none;
    }

        .btn-zakiah:disabled::after {
            display: none;
        }

.form-control, .form-select {
    border-color: var(--zk-border);
    border-radius: calc(var(--zk-radius) - 2px);
}

    .form-control:focus, .form-select:focus {
        border-color: rgba(var(--zk-primary-rgb), .6);
        box-shadow: 0 0 0 .2rem rgba(var(--zk-primary-rgb), .18);
    }

.form-check-input:checked {
    background-color: var(--zk-primary);
    border-color: var(--zk-primary);
}

.form-check-input:focus {
    border-color: rgba(var(--zk-primary-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--zk-primary-rgb), .18);
}

.form-label {
    font-weight: 600;
}

.card {
    background-color: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: 0 1px 3px rgba(120, 60, 30, .06);
}

.card-header, .card-footer {
    background-color: transparent;
    border-color: var(--zk-border);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--zk-primary);
}

.nav-tabs .nav-link.active {
    color: var(--zk-primary);
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--zk-primary);
}

    .nav-tabs-custom .nav-item .nav-link::after {
        background: var(--zk-primary);
    }

.page-link {
    color: var(--zk-primary);
}

.page-item.active .page-link {
    background-color: var(--zk-primary);
    border-color: var(--zk-primary);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--zk-primary);
}

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

table.dataTable tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--zk-primary-rgb), .9);
}

.swal2-styled.swal2-confirm {
    background-color: var(--zk-primary) !important;
}

#page-topbar {
    background-color: var(--zk-card);
    border-bottom: 1px solid var(--zk-border);
    box-shadow: none;
}

.topbar-user {
    background-color: var(--zk-muted) !important;
}

.btn-topbar.btn-ghost-secondary {
    color: var(--zk-muted-foreground);
}

    .btn-topbar.btn-ghost-secondary:hover {
        color: var(--zk-primary);
        background-color: rgba(var(--zk-primary-rgb), .1);
    }

.hamburger-icon span {
    background-color: var(--zk-foreground);
}

.app-menu.navbar-menu {
    background: var(--zk-card);
    border-right: 1px solid var(--zk-border);
}

.navbar-menu .navbar-brand-box {
    background: var(--zk-card);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.25rem;
    height: 70px;
}

.zk-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    min-width: 0;
}

.zk-brand-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    background: #fff;
    border: 1px solid var(--zk-border);
}

    .zk-brand-icon img {
        max-width: 1.5rem;
        max-height: 1.5rem;
        object-fit: contain;
    }

.zk-brand-text {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.15;
    color: var(--zk-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .zk-brand-text small {
        display: block;
        font-weight: 400;
        font-size: .7rem;
        color: var(--zk-muted-foreground);
    }

.navbar-menu .navbar-nav .menu-title span {
    color: var(--zk-muted-foreground);
    letter-spacing: .08em;
}

.navbar-menu .navbar-nav {
    padding: 0 .25rem;
}

    .navbar-menu .navbar-nav .nav-link {
        border-radius: .5rem;
        margin: 2px 0;
        font-weight: 500;
    }

        .navbar-menu .navbar-nav .nav-link:hover {
            background-color: var(--zk-muted);
        }

        .navbar-menu .navbar-nav .nav-link.active,
        .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true] {
            color: var(--zk-primary) !important;
        }

        .navbar-menu .navbar-nav .nav-sm .nav-link.active {
            background-color: rgba(var(--zk-primary-rgb), .12);
            font-weight: 600;
        }

        .navbar-menu .navbar-nav .nav-sm .nav-link.zk-nav-sub {
            display: flex;
            align-items: center;
            font-family: var(--zk-font-sans);
        }

            .navbar-menu .navbar-nav .nav-sm .nav-link.zk-nav-sub:before {
                display: none;
            }

        .navbar-menu .navbar-nav .nav-link i.zk-nav-icon {
            display: inline-block;
            min-width: 1.5rem;
            margin-right: .25rem;
            font-size: 16px;
            line-height: 1;
            color: var(--zk-muted-foreground);
            transition: color .2s ease;
        }

        .navbar-menu .navbar-nav .nav-link.zk-nav-sub:hover i.zk-nav-icon,
        .navbar-menu .navbar-nav .nav-link.zk-nav-sub.active i.zk-nav-icon,
        .navbar-menu .navbar-nav .nav-link.zk-nav-sub[aria-expanded=true] i.zk-nav-icon {
            color: var(--zk-primary);
        }

        .navbar-menu .navbar-nav .nav-sm .nav-link.zk-nav-sub[data-bs-toggle=collapse]:after {
            margin-left: auto;
        }

[data-sidebar-size=lg] .navbar-menu .navbar-nav .nav-link {
    margin: 1px 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

[data-sidebar-size=lg] .navbar-menu .navbar-nav .nav-sm .nav-link {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
}

[data-sidebar-size=lg] .navbar-menu .navbar-nav .menu-title {
    padding-top: .5rem;
    padding-bottom: .25rem;
}

@media (min-width: 992px) {
    .app-menu.navbar-menu {
        padding-bottom: 0;
    }

        .app-menu.navbar-menu #scrollbar {
            height: calc(100% - 70px) !important;
        }
}

[data-sidebar-size=sm] .zk-brand-text,
[data-sidebar-size=sm] .navbar-brand-box #vertical-hover {
    display: none !important;
}

[data-sidebar-size=sm] .navbar-menu .navbar-brand-box {
    justify-content: center;
    padding: 0;
}

[data-sidebar-size=sm-hover] .app-menu:not(:hover) .zk-brand-text {
    display: none !important;
}

.page-content {
    background-color: var(--zk-background);
}

.footer {
    position: fixed;
    z-index: 1000;
    background-color: var(--zk-card);
    border-top: 1px solid var(--zk-border);
    color: var(--zk-muted-foreground);
}

.loader {
    background: rgba(255, 241, 234, .92) !important;
}

[data-layout-mode=dark] .loader {
    background: rgba(14, 7, 5, .92) !important;
}

.loader .logo_sby {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    background-color: var(--zk-card);
    transform: translate(-50%, -50%);
}

    .loader .logo_sby::before {
        border-top-color: var(--zk-primary);
        animation: auth-spin 1s linear infinite;
    }

    .loader .logo_sby::after {
        box-shadow: 0 4px 16px rgba(var(--zk-primary-rgb), .25);
    }

    .loader .logo_sby img {
        position: relative;
        max-width: 70px;
        max-height: 70px;
        object-fit: contain;
    }

#back-to-top {
    background-color: var(--zk-primary);
    border-color: var(--zk-primary);
}

.modal-content {
    border-radius: var(--zk-radius);
}

.modal-header.bg-soft-primary .modal-title {
    color: var(--zk-primary-dark);
}

.zk-submit {
    height: 2.75rem;
    width: 100%;
    font-size: 13px;
}

.zk-alert {
    border-radius: var(--zk-radius);
    padding: .75rem 1rem;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.zk-alert-error {
    background: rgba(231, 0, 11, .06);
    border: 1px solid rgba(231, 0, 11, .2);
    color: #b42318;
}

.zk-alert-info {
    background: rgba(196, 134, 106, .08);
    border: 1px solid rgba(196, 134, 106, .25);
    color: var(--zk-primary-dark);
}

.zk-access-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 15% 15%, rgba(var(--zk-primary-rgb), .10), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(var(--zk-primary-rgb), .08), transparent 40%),
        var(--zk-background);
}

.zk-access-shell {
    width: 100%;
    max-width: 30rem;
}

    .zk-access-shell.zk-access-shell-wide {
        max-width: 42rem;
    }

.zk-access-panel {
    position: relative;
    z-index: 10;
    margin: 0;
    border: 1px solid rgba(var(--zk-primary-rgb), .35);
    border-radius: calc(var(--zk-radius) + .25rem);
    box-shadow: 0 20px 40px -12px rgba(120, 60, 30, .18);
}

    .zk-access-panel .card-body {
        padding: 2.5rem 2rem;
    }

@media (min-width: 576px) {
    .zk-access-panel .card-body {
        padding: 2.5rem;
    }
}

.zk-access-logo {
    height: 3rem;
    max-width: 6rem;
    object-fit: contain;
}

.zk-access-title {
    margin-bottom: .5rem;
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    line-height: 1.2;
    color: var(--zk-foreground);
}

.zk-access-desc {
    text-align: center;
    font-family: var(--zk-font-lato);
    font-size: 14px;
    line-height: 1.6;
    color: var(--zk-muted-foreground);
}

.zk-access-footer {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--zk-muted-foreground);
}

.zk-access-copyright {
    position: relative;
    z-index: 1;
    margin: 1.25rem 0 0;
    text-align: center;
    font-family: var(--zk-font-lato);
    font-size: 11px;
    color: var(--zk-muted-foreground);
    opacity: .8;
}

.zk-store-trigger {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    height: 2.875rem;
    padding: 0 1rem;
    border: 1.5px solid rgba(var(--zk-primary-rgb), .3);
    border-radius: var(--zk-radius);
    background: #fff;
    color: var(--zk-foreground);
    font-size: 14px;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .zk-store-trigger:hover,
    .zk-store-trigger[aria-expanded=true] {
        border-color: rgba(var(--zk-primary-rgb), .7);
    }

    .zk-store-trigger[aria-expanded=true] {
        box-shadow: 0 0 0 .2rem rgba(var(--zk-primary-rgb), .15);
    }

    .zk-store-trigger > i {
        font-size: 1.1rem;
        color: var(--zk-muted-foreground);
    }

.zk-store-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

    .zk-store-value.is-placeholder {
        font-weight: 400;
        color: var(--zk-muted-foreground);
    }

.zk-store-menu {
    z-index: 1060;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    background: #fff;
    box-shadow: 0 16px 32px -8px rgba(120, 60, 30, .2);
}

.zk-store-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--zk-border);
}

    .zk-store-search i {
        color: var(--zk-muted-foreground);
    }

    .zk-store-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 14px;
        color: var(--zk-foreground);
    }

        .zk-store-search input::placeholder {
            color: var(--zk-muted-foreground);
        }

.zk-store-list {
    max-height: 16rem;
    overflow-y: auto;
    padding: .375rem;
}

.zk-store-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 0;
    border-radius: calc(var(--zk-radius) - 4px);
    background: transparent;
    color: var(--zk-foreground);
    font-size: 14px;
    text-align: left;
}

    .zk-store-option > i:first-child {
        color: var(--zk-muted-foreground);
    }

    .zk-store-option:hover,
    .zk-store-option:focus-visible {
        outline: 0;
        background: var(--zk-muted);
    }

    .zk-store-option .zk-store-check {
        visibility: hidden;
        color: var(--zk-primary);
    }

    .zk-store-option.active {
        background: rgba(var(--zk-primary-rgb), .12);
        color: var(--zk-primary-dark);
        font-weight: 600;
    }

        .zk-store-option.active > i:first-child,
        .zk-store-option.active .zk-store-check {
            visibility: visible;
            color: var(--zk-primary);
        }

.zk-store-empty {
    padding: 1rem;
    text-align: center;
    font-size: 13px;
    color: var(--zk-muted-foreground);
}

.zk-access-card {
    display: block;
    height: 100%;
    padding: 1.25rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--zk-primary);
    border-radius: calc(var(--zk-radius) - 2px);
    background: var(--zk-card);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .zk-access-card:hover, .zk-access-card:focus {
        background: var(--zk-muted);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--zk-primary-rgb), .18);
    }

    .zk-access-card img {
        display: block;
        width: 100%;
        max-width: 180px;
        height: 130px;
        margin: 0 auto;
        object-fit: contain;
    }

    .zk-access-card h2 {
        margin: 1rem 0 .5rem;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--zk-primary);
    }

    .zk-access-card p {
        margin: 0;
        font-size: 12px;
        line-height: 1.6;
        color: var(--zk-muted-foreground);
    }

.zk-context-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 22rem;
    padding: .375rem .75rem;
    border: 1px solid var(--zk-border);
    border-radius: 999px;
    background: var(--zk-card);
    color: var(--zk-foreground);
    font-size: 13px;
}

    .zk-context-btn:hover, .zk-context-btn[aria-expanded=true] {
        border-color: rgba(var(--zk-primary-rgb), .5);
        background: var(--zk-muted);
    }

    .zk-context-btn .zk-context-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        line-height: 1.2;
    }

        .zk-context-btn .zk-context-text small {
            display: block;
            font-size: 11px;
            color: var(--zk-muted-foreground);
        }

.zk-context-menu {
    min-width: 17rem;
}

    .zk-context-menu .dropdown-item.active,
    .zk-context-menu .dropdown-item:active {
        color: var(--zk-primary-dark);
        background-color: rgba(var(--zk-primary-rgb), .12);
    }

.dash-chart {
    position: relative;
    min-height: 350px;
}

    .dash-chart[data-loading=true]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: calc(var(--zk-radius) - 4px);
        background: linear-gradient(90deg, var(--zk-muted) 25%, rgba(var(--zk-primary-rgb), .08) 50%, var(--zk-muted) 75%);
        background-size: 200% 100%;
        animation: dash-shimmer 1.4s ease-in-out infinite;
    }

.dash-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    font-size: 13px;
}

@keyframes dash-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.placeholder {
    background-color: rgba(var(--zk-primary-rgb), .25);
}

.form-control.flatpickr-input[readonly] {
    background-color: #fff;
    cursor: pointer;
}

[data-layout-mode=dark] .form-control.flatpickr-input[readonly] {
    background-color: var(--zk-card);
}

.dash-filter-input,
.form-control.flatpickr-input.dash-filter-input[readonly] {
    background-color: var(--zk-muted) !important;
}

.table-light,
.table > thead.table-light > tr > th {
    --vz-table-bg: var(--zk-muted);
    background-color: var(--zk-muted) !important;
    color: var(--zk-muted-foreground) !important;
    border-color: var(--zk-border) !important;
}

.card-animate .avatar-title i {
    line-height: 1;
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-monthDropdown-months {
    background: var(--zk-primary) !important;
    fill: #fff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--zk-primary) !important;
    border-color: var(--zk-primary) !important;
}

.flatpickr-day.inRange {
    background: rgba(var(--zk-primary-rgb), .15) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 rgba(var(--zk-primary-rgb), .15), 5px 0 0 rgba(var(--zk-primary-rgb), .15) !important;
}

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

@keyframes auth-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes auth-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes auth-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes auth-float-b { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(8px, -12px); } 80% { transform: translate(-5px, 6px); } }
@keyframes auth-float-c { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.06); } }
@keyframes auth-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes auth-breathe { 0%, 100% { transform: scale(1); opacity: .15; } 50% { transform: scale(1.1); opacity: .28; } }
@keyframes auth-orb { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.12); opacity: .3; } }
@keyframes auth-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-shine { 0% { left: -75%; } 100% { left: 125%; } }

.auth-spin { animation: auth-spin 22s linear infinite; }
.auth-spin-rev { animation: auth-spin-rev 30s linear infinite; }
.auth-spin-slow { animation: auth-spin 40s linear infinite; }
.auth-float-a { animation: auth-float-a 7s ease-in-out infinite; }
.auth-float-b { animation: auth-float-b 10s ease-in-out infinite; }
.auth-float-c { animation: auth-float-c 6s ease-in-out infinite; }
.auth-breathe { animation: auth-breathe 7s ease-in-out infinite; }
.auth-orb { animation: auth-orb 8s ease-in-out infinite; }
.auth-gradient-bg { background-size: 400% 400%; animation: auth-gradient 10s ease infinite; }
.auth-fade-up-1 { animation: auth-fade-up .8s ease-out 0s both; }
.auth-fade-up-2 { animation: auth-fade-up .8s ease-out .15s both; }
.auth-fade-up-3 { animation: auth-fade-up .8s ease-out .3s both; }
.auth-fade-up-4 { animation: auth-fade-up .8s ease-out .45s both; }
.auth-fade-up-5 { animation: auth-fade-up .8s ease-out .6s both; }
.auth-fade-up-6 { animation: auth-fade-up .8s ease-out .75s both; }

@media (prefers-reduced-motion: reduce) {
    .auth-spin, .auth-spin-rev, .auth-spin-slow, .auth-float-a, .auth-float-b, .auth-float-c,
    .auth-breathe, .auth-orb, .auth-gradient-bg, .btn-zakiah::after {
        animation: none !important;
    }
}

.zk-page-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 0;
    height: 3px;
    opacity: 0;
    background: var(--zk-primary);
    box-shadow: 0 0 8px rgba(var(--zk-primary-rgb), .6);
    transition: width .2s ease, opacity .3s ease;
    pointer-events: none;
}

    .zk-page-progress.htmx-request {
        width: 80%;
        opacity: 1;
        transition: width 3s cubic-bezier(.1, .7, .3, 1), opacity .1s ease;
    }

.cursor-pointer,
.choices[data-type*=select-one],
.choices[data-type*=select-one] .choices__inner,
.choices[data-type*=select-one] .choices__item,
.choices__list--dropdown .choices__item--selectable {
    cursor: pointer !important;
}

.choices__inner {
    min-height: calc(1.5em + 1rem + 2px);
    border-color: var(--zk-border);
    border-radius: calc(var(--zk-radius) - 2px);
    background-color: var(--zk-card);
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: rgba(var(--zk-primary-rgb), .6);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    border-color: var(--zk-border);
    border-radius: calc(var(--zk-radius) - 2px);
    box-shadow: 0 10px 24px -8px rgba(120, 60, 30, .18);
    z-index: 1050;
}

    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: var(--zk-muted);
        color: var(--zk-primary-dark);
    }

.choices__list--dropdown:not(.is-active),
.choices__list[aria-expanded]:not(.is-active) {
    display: none;
}