@charset "UTF-8";

.introjs-tooltip {
    background-color: var(--bs-card-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #e4e6ef) !important;
    border-radius: var(--bs-card-border-radius, 0.75rem) !important;
    box-shadow: var(--bs-box-shadow, 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05));
    padding: var(--bs-card-spacer-y, 1.25rem) var(--bs-card-spacer-x, 1.25rem);
    font-family: var(--bs-font-sans-serif, 'Inter', sans-serif);
}

.introjs-tooltip-header {
    position: relative;
    min-height: 1.5em;
}

.introjs-tooltip-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-gray-900, #181c32);
    margin-bottom: 0.5rem;
}


.introjs-tooltiptext {
    font-size: 1rem;
    color: var(--bs-gray-600, #7e8299);
}


.introjs-button {
    border-radius: var(--bs-btn-border-radius, 0.5rem);
    font-size: var(--bs-btn-font-size, 0.875rem);
    padding: var(--bs-btn-padding-y, 0.5rem) var(--bs-btn-padding-x, 1rem);
    font-weight: var(--bs-btn-font-weight, 500);
    transition: background-color 0.2s, color 0.2s;
    text-shadow: none;
}

.introjs-nextbutton,
.introjs-prevbutton,
.introjs-donebutton {
    background-color: var(--bs-primary, #1B84FF);
    color: var(--bs-btn-color, #fff);
    text-shadow: none;
    /* border: none; */
}

.introjs-nextbutton:hover,
.introjs-prevbutton:hover,
.introjs-donebutton:hover {
    background-color: var(--bs-primary-dark, #3d96ff);
    color: var(--bs-btn-hover-color, #fff);

    .introjs-skipbutton {
        color: var(--bs-gray-600, #7e8299);
        background: transparent;
        border: none;
    }
}

html[data-bs-theme="dark"] .ck-content {
    background-color: var(--bs-body-bg);
    /* atau var(--bs-body-bg) jika kamu pakai CSS variable Bootstrap */
    color: #5c5c5c;
    /* atau var(--bs-body-color) */
}

/* toolbar dasar */
html[data-bs-theme="dark"] .ck.ck-toolbar {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid #444;
}

/* tombol toolbar saat aktif / hover */
html[data-bs-theme="dark"] .ck.ck-button.ck-on,
html[data-bs-theme="dark"] .ck.ck-button:hover {
    background-color: #3a3a4a;
}

/* dropdown list, panel, placeholder, dll—sesuaikan selector berikut jika perlu */
html[data-bs-theme="dark"] .ck-dropdown__panel,
html[data-bs-theme="dark"] .ck-balloon-panel {
    background-color: var(--bs-body-bg);
    color: #e0e0e0;
}

html[data-bs-theme="dark"] .ck.ck-button svg {
    fill: #e0e0e0;
}

/* Custom rounded untuk semua popup */
.swal2-popup {
    border-radius: 1.75rem !important;
}

/* Atau spesifik untuk class sweet-alerts */
.sweet-alerts {
    border-radius: 1.75rem !important;
}

.btn {
    border-radius: 1rem !important;
}

.form-control {
    border-radius: 1rem !important;
}

.form-select-sm {
    border-radius: 1rem !important;
}