/* Animasi & kelas kustom di luar Tailwind. */

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

.db-btn-spinner {
    display: inline-block;
    width: 1rem; height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: db-spin .6s linear infinite;
    vertical-align: -2px;
}
@keyframes db-spin { to { transform: rotate(360deg); } }

.db-fade-enter { opacity: 0; transform: translateY(4px); }
.db-fade-enter-active { transition: opacity .2s ease, transform .2s ease; }
.db-fade-leave-active { transition: opacity .15s ease; }
.db-fade-leave-to { opacity: 0; }

/* ============================================================
   Media Library modal (wp.media) di editor Kreator /dasbor.
   Modal mendapat class .wp-core-ui via JS saat open agar rule
   core ber-prefix .wp-core-ui ikut aktif, lalu kita skin ke
   style dasbor: Inter, rounded, brand green via var admin WP,
   dark mode via html.dark.
   Catatan: media-views.css dicetak SETELAH store.css (footer)
   → selector override sengaja lebih spesifik (.media-modal.wp-core-ui).
   ============================================================ */

/* Aksen — core membaca var --wp-admin-theme-color* → petakan ke brand. */
.media-modal,
.media-modal .media-frame {
    --wp-admin-theme-color: rgb(var(--db-p-600));
    --wp-admin-theme-color-darker-10: rgb(var(--db-p-700));
    --wp-admin-theme-color-darker-20: rgb(var(--db-p-800));
    --wp-admin-theme-color--rgb: var(--db-p-600);
}

.media-modal,
.media-modal .media-frame {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Kontainer — rounded-xl ala .card + backdrop selaras gray-950. */
.media-modal.wp-core-ui .media-modal-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgb(3 7 18 / .45);
}
.media-modal-backdrop { background: #030712; opacity: .65; }

.media-modal.wp-core-ui .media-frame-title h1 { font-size: 20px; font-weight: 700; }
.media-modal.wp-core-ui .media-menu .media-menu-item,
.media-modal.wp-core-ui .media-router .media-menu-item { font-weight: 600; }

/* Tombol — radius selaras .btn-*. Warna ikut var di atas. */
.media-modal.wp-core-ui .media-button { border-radius: 10px; font-weight: 600; }
.media-modal.wp-core-ui .media-toolbar-primary > .media-button { min-height: 38px; padding: 0 18px; }

/* Input & select — radius + fokus brand. */
.media-modal.wp-core-ui input[type=text],
.media-modal.wp-core-ui input[type=search],
.media-modal.wp-core-ui input[type=url],
.media-modal.wp-core-ui input[type=email],
.media-modal.wp-core-ui input[type=number],
.media-modal.wp-core-ui input[type=password],
.media-modal.wp-core-ui select,
.media-modal.wp-core-ui textarea {
    border-color: #d1d5db;
    border-radius: 10px;
}
.media-modal.wp-core-ui input:focus,
.media-modal.wp-core-ui select:focus,
.media-modal.wp-core-ui textarea:focus {
    border-color: rgb(var(--db-p-500));
    box-shadow: 0 0 0 2px rgb(var(--db-p-500) / .25);
}

/* Kartu attachment — rounded + ring pilihan brand. */
.media-modal.wp-core-ui .attachment-preview { border-radius: 10px; }
.media-modal.wp-core-ui .attachment .thumbnail { border-radius: 10px; }
.media-modal.wp-core-ui .attachment .thumbnail:after { border-radius: 10px; }
.media-modal.wp-core-ui .attachment.details {
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px rgb(var(--db-p-600));
}

.media-modal.wp-core-ui .media-progress-bar,
.media-modal.wp-core-ui .media-progress-bar div { border-radius: 9999px; }

/* ============================ Dark mode ============================ */

/* Region — satu warna card (#111827), sidebar/strip lebih gelap. */
.dark .media-modal.wp-core-ui .media-modal-content { background: #111827; }
.dark .media-modal.wp-core-ui .media-frame-title,
.dark .media-modal.wp-core-ui .media-frame-content,
.dark .media-modal.wp-core-ui .media-frame-menu,
.dark .media-modal.wp-core-ui .media-menu,
.dark .media-modal.wp-core-ui .attachments-browser .media-toolbar,
.dark .media-modal.wp-core-ui .media-frame-toolbar .media-toolbar,
.dark .media-modal.wp-core-ui .media-router .active,
.dark .media-modal.wp-core-ui .media-embed,
.dark .media-modal.wp-core-ui .edit-media-header,
.dark .media-modal.wp-core-ui .image-details .column-settings,
.dark .media-modal.wp-core-ui .upload-ui { background: #111827; }
.dark .media-modal.wp-core-ui .media-sidebar,
.dark .media-modal.wp-core-ui .attachment-details,
.dark .media-modal.wp-core-ui .media-selection { background: #0b1120; }

/* Teks. */
.dark .media-modal.wp-core-ui,
.dark .media-modal.wp-core-ui h1,
.dark .media-modal.wp-core-ui h2,
.dark .media-modal.wp-core-ui h3,
.dark .media-modal.wp-core-ui label,
.dark .media-modal.wp-core-ui .setting,
.dark .media-modal.wp-core-ui .attachment-info,
.dark .media-modal.wp-core-ui .media-menu .media-menu-item,
.dark .media-modal.wp-core-ui .media-router .media-menu-item,
.dark .media-modal.wp-core-ui .upload-ui h2,
.dark .media-modal.wp-core-ui .drag-drop-inside p,
.dark .media-modal.wp-core-ui .empty { color: #e5e7eb; }
.dark .media-modal.wp-core-ui .media-modal-close { color: #9ca3af; }
.dark .media-modal.wp-core-ui .media-modal-close:hover,
.dark .media-modal.wp-core-ui .media-modal-close:active { color: rgb(var(--db-p-400)); }
.dark .media-modal.wp-core-ui .media-frame-title .suggested-dimensions,
.dark .media-modal.wp-core-ui .attachment-info .details,
.dark .media-modal.wp-core-ui .describe-toggle-on { color: #9ca3af; }

/* Border. */
.dark .media-modal.wp-core-ui .media-toolbar,
.dark .media-modal.wp-core-ui .media-frame-toolbar .media-toolbar,
.dark .media-modal.wp-core-ui .media-sidebar,
.dark .media-modal.wp-core-ui .media-router,
.dark .media-modal.wp-core-ui .media-menu .separator,
.dark .media-modal.wp-core-ui .attachment-info,
.dark .media-modal.wp-core-ui .media-selection,
.dark .media-modal.wp-core-ui .edit-media-header { border-color: #1f2937; }

/* Kartu attachment. */
.dark .media-modal.wp-core-ui .attachment-preview { background: #1f2937; }
.dark .media-modal.wp-core-ui .attachment .filename { background: rgb(17 24 39 / .85); }
.dark .media-modal.wp-core-ui .attachment .filename div { color: #e5e7eb; }
.dark .media-modal.wp-core-ui .selected.attachment {
    box-shadow: inset 0 0 0 5px #111827, inset 0 0 0 7px #4b5563;
}
.dark .media-modal.wp-core-ui .attachment.details {
    box-shadow: inset 0 0 0 3px #111827, inset 0 0 0 7px rgb(var(--db-p-500));
}
.dark .media-modal.wp-core-ui .attachment.details .check,
.dark .media-modal.wp-core-ui .attachment.selected .check {
    background: rgb(var(--db-p-500));
    box-shadow: 0 0 0 1px #111827, 0 0 0 2px rgb(var(--db-p-500));
}

/* Input & select. */
.dark .media-modal.wp-core-ui input[type=text],
.dark .media-modal.wp-core-ui input[type=search],
.dark .media-modal.wp-core-ui input[type=url],
.dark .media-modal.wp-core-ui input[type=email],
.dark .media-modal.wp-core-ui input[type=number],
.dark .media-modal.wp-core-ui input[type=password],
.dark .media-modal.wp-core-ui select,
.dark .media-modal.wp-core-ui textarea {
    background: #030712;
    border-color: #374151;
    color: #f3f4f6;
}
.dark .media-modal.wp-core-ui input::placeholder,
.dark .media-modal.wp-core-ui textarea::placeholder { color: #6b7280; }

/* Tombol netral (Cancel dll) — primary ikut var, dipaksa ulang agar kontras. */
.dark .media-modal.wp-core-ui .media-button {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}
.dark .media-modal.wp-core-ui .media-button:hover { background: #374151; color: #fff; }
.dark .media-modal.wp-core-ui .media-button.button-primary {
    background: rgb(var(--db-p-600));
    border-color: rgb(var(--db-p-600));
    color: #fff;
}
.dark .media-modal.wp-core-ui .media-button.button-primary:hover {
    background: rgb(var(--db-p-700));
    border-color: rgb(var(--db-p-700));
    color: #fff;
}

/* Link. */
.dark .media-modal.wp-core-ui a { color: rgb(var(--db-p-400)); }
.dark .media-modal.wp-core-ui a:hover,
.dark .media-modal.wp-core-ui a:active { color: rgb(var(--db-p-300)); }
.dark .media-modal.wp-core-ui a.button { color: #e5e7eb; }
.dark .media-modal.wp-core-ui a.button-primary,
.dark .media-modal.wp-core-ui a.button-primary:hover { color: #fff; }
.dark .media-modal.wp-core-ui .delete-attachment,
.dark .media-modal.wp-core-ui .unbind-attachment { color: #f87171; }

/* Uploader. */
.dark .media-modal.wp-core-ui .uploader-window { background: rgb(3 7 18 / .9); }
.dark .media-modal.wp-core-ui .uploader-window .media-progress-bar div { background: #111827; }
.dark .media-modal.wp-core-ui .media-progress-bar { background: #374151; }
.dark .media-modal.wp-core-ui .upload-errors .upload-error {
    background: #1f2937;
    color: #fca5a5;
    border-color: #7f1d1d;
}

/* A11y: label .screen-reader-text di dalam modal — rule penyembunyi
   normalnya ada di wp-admin/css/common.css yang tidak di-load di
   frontend, sehingga label ikut ter-render. Scoped ke modal. */
.media-modal.wp-core-ui .screen-reader-text,
.media-modal.wp-core-ui .screen-reader-text span,
.media-modal.wp-core-ui .ui-helper-hidden-accessible {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* Ukuran modal — core memakai inset 30px (nyaris fullscreen).
   Diperkecil jadi kotak terpusat max 980x620, tetap responsif. */
.media-modal.wp-core-ui {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 980px);
    height: min(84vh, 620px);
}

/* Select .form-input — hilangkan appearance bawaan browser
   (padding internal native yang membuat teks menjorok ke kanan),
   lalu chevron SVG sendiri selaras icon set. */
select.form-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1.25rem;
}
.dark select.form-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
}

/* Kartu collapsible — .db-card-head diklik → .db-collapsed pada
   .db-collapsible menyembunyikan semua sibling setelah head. */
.db-card-head { cursor: pointer; -webkit-user-select: none; user-select: none; }
.db-collapsed > .db-card-head ~ * { display: none !important; }
.db-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #9ca3af;
    transition: color .12s;
}
.db-collapse-btn:hover { color: #374151; }
.dark .db-collapse-btn:hover { color: #d1d5db; }
.db-collapse-btn svg { transition: transform .15s ease; }
.db-collapsed .db-collapse-btn svg { transform: rotate(-90deg); }

/* Drag sort blok materi — grip handle + ghost state. */
.db-materi-drag {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    color: #9ca3af;
    cursor: grab;
    touch-action: none;
}
.db-materi-drag:hover { color: #6b7280; }
.dark .db-materi-drag:hover { color: #d1d5db; }
.db-materi-drag:active { cursor: grabbing; }
.db-materi-block.db-dragging { opacity: .4; }

/* Native controls ikut tema gelap — icon date picker, scrollbar,
   dropdown arrow bawaan dirender terang oleh UA. */
.dark { color-scheme: dark; }