:host,
:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --tblr-bg-surface-secondary: var(--tblr-gray-100);
    --tblr-border-color: #ced4da;
    --tblr-shadow-input: 0 2px 2px rgba(var(--tblr-body-color-rgb), 0.1);

    --bs-body-bg: #f9fafb;
    --bs-border-width: 1px;
}

.ti {
    --tblr-icon-size: 1.25rem;
    width: var(--tblr-icon-size);
    height: var(--tblr-icon-size);
    font-size: var(--tblr-icon-size);
}

.btn-icon .ti {
    width: var(--tblr-btn-icon-size);
    height: var(--tblr-btn-icon-size);
    min-width: var(--tblr-btn-icon-size);
    font-size: var(--tblr-btn-icon-size);
    margin: none;
    vertical-align: bottom;
    color: var(--tblr-btn-icon-color);
}

a:hover:has(.ti) {
    text-decoration: none;
}

.btn-floating-right {
    position: fixed;
    z-index: 1030;
    bottom: 1rem;
    right: 1rem;
    box-shadow: var(--tblr-shadow-dropdown);
}

.form-control.is-invalid {
    border-color: var(--tblr-form-invalid-border-color);
    padding-right: 1.375rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.53125rem center;
    background-size: 0.8125rem 0.8125rem;
}

.col-form-label,
.datagrid-title,
.form-label {
    font-weight: var(--tblr-font-weight-black);
}

.ts-wrapper {
    display: flex;
    min-height: calc(1.8em + 0.75rem + var(--bs-border-width) * 2);
}

.datagrid-title {
    font-size: 0.875rem;
    font-weight: var(--tblr-font-weight-medium);
    letter-spacing: normal;
    text-transform: none;
    line-height: 1rem;
    color: var(--tblr-black);
    margin-bottom: 0.25rem;
}

.tempus-dominus-widget .calendar-header {
    display: grid;
    font-weight: 700;
    grid-template-areas: "a a a";
    margin-bottom: 10px;
    justify-content: space-between;
}
.avatar-xl {
    --tblr-avatar-size: 8rem;
}

.steps {
    --tblr-steps-padding: 2rem;
    --tblr-steps-item-size: 1.5rem;
    margin-left: 1rem;
    padding-left: 0px;
    counter-reset: step;
    border-left: none;
    margin-bottom: 2rem;
}

[x-cloak] {
    display: none !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.5625rem 3rem 0.5625rem 1rem !important;
    border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
    box-shadow: var(--tblr-shadow-input) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.badge {
    user-select: text !important;
}

/* Atur warna highlight saat teks di-blok */
.badge::selection {
    background-color: #0054a6; /* Warna biru gelap (bisa diganti sesuai tema) */
    color: #ffffff; /* Warna teks jadi putih saat di-blok */
}

/* Support untuk browser Firefox (terkadang perlu ini) */
.badge::-moz-selection {
    background-color: #0054a6;
    color: #ffffff;
}

.badge-verified {
    background-color: #d1fae5;
    color: #047857;
    font-weight: 600;
}

.badge-order {
    background-color: #fef3c7;
    color: #b45309;
    font-weight: 600;
}

.badge-racikan {
    background-color: #ede9fe;
    color: #7c3aed;
    font-weight: 600;
}

.badge-non-racikan {
    background-color: #dbeafe;
    color: #2563eb;
    font-weight: 600;
}

.badge-manual {
    background-color: #f3e8ff; /* purple-100 */
    color: #7c3aed; /* purple-600 */
    font-weight: 600;
}

.badge-master {
    background-color: #dbeafe; /* blue-100 */
    color: #1d4ed8; /* blue-700 */
    font-weight: 600;
}

.datagrid {
    --tblr-datagrid-padding: 1rem;
    --tblr-datagrid-item-width: 10rem;
    display: grid;
    grid-gap: var(--tblr-datagrid-padding);
    grid-template-columns: repeat(
        auto-fit,
        minmax(var(--tblr-datagrid-item-width), 1fr)
    );
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    border-radius: calc(0.25rem - 1px); /* Menyesuaikan border-radius card */
}

@media (min-width: 768px) {
    .sticky-desktop {
        position: -webkit-sticky;
        position: sticky;
        top: 90px; /* Jarak dari navbar sticky Anda */
        z-index: 10;
    }
}