/* ── Kolaborator (v1.4.2) ─────────────────────────────────────────────── */

.ae-db-wrap { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; color: var(--es-ink, #15171a); } /* v1.8.12: tetapkan warna teks dasar (samakan .katalis-account), sebelumnya tidak diset sama sekali sehingga ikut warna default tema yg lebih terang/abu, bukan hitam pekat spt di Akun */

.ae-db-card {
    background: #fff;
    border: 1px solid var(--es-line, #e7e9ee);
    border-radius: 8px; /* v1.8.11: disamakan dgn radius panel halaman Akun (.katalis-account__panel), sebelumnya 14px */
    padding: 32px;
}
:root[data-theme="dark"] .ae-db-card { background: #1e2128; border-color: #2a2d38; }
/* v1.8.12: warna teks dasar Dark Mode (samakan :root[data-theme="dark"] .katalis-account { color:#e8eaf0 }) */
:root[data-theme="dark"] .ae-db-wrap,
:root[data-theme="dark"] .ae-db-dashboard { color: #e8eaf0; }

.ae-db-card--centered { text-align: center; padding: 48px 32px; }

.ae-db-header { margin-bottom: 24px; }
.ae-db-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.ae-db-sub { color: var(--es-muted, #8a9099); margin: 0; font-size: 14px; line-height: 1.6; }
:root[data-theme="dark"] .ae-db-sub { color: #9ea3b0; }

/* v1.8.11: judul halaman DALAM dashboard (Dashboard/Edit Toko/Produk Saya/
   Pesanan Masuk/Saldo/Bantuan — h1 di dalam .ae-db-main) disamakan dgn pola
   .katalis-account__heading milik halaman Akun: 18px/600 (sebelumnya ikut
   .ae-db-title umum 22px/700) + garis bawah pemisah. TIDAK menyentuh h2
   .ae-db-title di halaman status berdiri sendiri (Daftar/Pending/Ditolak/
   Toko Tidak Ditemukan) karena halaman itu tidak sebanding dgn Akun. */
.ae-db-main .ae-db-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--es-bg-soft, #f5f6f8); }
.ae-db-main .ae-db-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
:root[data-theme="dark"] .ae-db-main .ae-db-header { border-bottom-color: #232735; }

.ae-db-meta { font-size: 13px; color: var(--es-muted, #8a9099); margin: 16px 0; }

.ae-db-icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(227,30,37,.08); color: var(--es-primary, #e31e25);
}
.ae-db-icon svg { width: 30px; height: 30px; }
.ae-db-icon--pending  { background: #fef3c7; color: #92400e; }
.ae-db-icon--approved { background: #d1fae5; color: #065f46; }
.ae-db-icon--rejected { background: #fee2e2; color: #991b1b; }
:root[data-theme="dark"] .ae-db-icon--pending  { background: rgba(217,119,6,.15); color: #fbbf24; }
:root[data-theme="dark"] .ae-db-icon--approved { background: rgba(22,163,74,.15); color: #4ade80; }
:root[data-theme="dark"] .ae-db-icon--rejected { background: rgba(220,38,38,.15); color: #fca5a5; }

.ae-db-section { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--es-line, #e7e9ee); }
.ae-db-section:last-of-type { border-bottom: none; }
:root[data-theme="dark"] .ae-db-section { border-color: #2a2d38; }
.ae-db-section__title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.ae-db-section__desc { font-size: 12px; color: var(--es-muted, #8a9099); margin: -8px 0 14px; }

.ae-db-required { color: var(--es-primary, #e31e25); }

.ae-db-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--es-muted, #8a9099); margin: 8px 0 20px; cursor: pointer; }
.ae-db-checkbox input { margin-top: 3px; }
:root[data-theme="dark"] .ae-db-checkbox { color: #9ea3b0; }

.ae-db-alert { padding: 14px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 20px; line-height: 1.6; } /* v1.8.11: disamakan dgn radius .katalis-auth__alert, sebelumnya 10px */
.ae-db-alert--success { background: #d1fae5; color: #065f46; }
.ae-db-alert--error   { background: #fee2e2; color: #991b1b; }
:root[data-theme="dark"] .ae-db-alert--success { background: rgba(22,163,74,.15); color: #4ade80; }
:root[data-theme="dark"] .ae-db-alert--error   { background: rgba(220,38,38,.15); color: #fca5a5; }
/* v1.9.4: kotak info (mis. "Produk ini sudah TAYANG...", "Edit Produk")
   sebelumnya latar+teks biru solid — dilaporkan pemilik toko via
   tangkapan layar halaman "Edit Produk", masih terasa "warna-warni".
   Sekarang latar netral + teks warna teks biasa (bukan lagi biru),
   light maupun dark mode. */
.ae-db-alert--info    { background: var(--es-bg-soft, #f5f6f8); color: var(--es-ink, #15171a); border: 1px solid var(--es-line, #e7e9ee); }

/* v1.9.4: REVISI v1.9.3 — latar badge sudah netral, tapi teks masih
   dibedakan warna per status (hijau/kuning/merah), masih terasa
   "warna-warni" — dilaporkan pemilik toko via tangkapan layar halaman
   "Produk Saya"/"Edit Produk". Sekarang teks juga diseragamkan (sama
   abu-abu dgn var(--ke-ink-soft) milik Kontributor EPOCHSTREAM), status
   cukup dibedakan lewat labelnya sendiri ("Aktif / Tayang"/"Menunggu
   Review"/"Ditolak"), bukan lagi lewat warna apa pun. */
.ae-db-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--es-bg-soft, #f5f6f8); border: 1px solid var(--es-line, #e7e9ee); color: var(--es-muted, #8a9099); }

:root[data-theme="dark"] .ae-db-alert--info { background: var(--es-bg-soft, #1a1d24); color: #e8eaf0; border-color: #2a2d38; }
:root[data-theme="dark"] .ae-db-badge {
    background: var(--es-bg-soft, #1a1d24);
    border-color: #2a2d38;
    color: #9ea3b0;
}

.ae-btn--outline { background: transparent; border: 1px solid var(--es-line, #e7e9ee); color: inherit; }

/* v1.8.11: tombol (.ae-btn, dipakai bersama seluruh plugin SHOP) DI DALAM
   halaman Kolaborator disamakan dgn pola .katalis-account__btn milik
   halaman Akun — radius 6px & font-weight 600 (sebelumnya ikut radius 8px/
   font-weight 700 milik .ae-btn umum). Sengaja DIBATASI ke dalam .ae-db-wrap/
   .ae-db-dashboard saja (bukan ubah .ae-btn langsung di shop.css) supaya
   tombol di halaman Toko/Checkout/dll TIDAK ikut berubah. */
.ae-db-wrap .ae-btn,
.ae-db-dashboard .ae-btn { border-radius: 6px; font-weight: 600; }

/* ── Dashboard layout (v1.5.3) — sidebar kiri + konten kanan, dipakai di
   5 halaman dashboard kolaborator (dashboard/produk-form/produk/pesanan/saldo).
   Pola & class meniru "ke-wrap--dashboard" milik plugin Kontributor,
   di-prefix ulang "se-kb-" supaya plugin ini tetap mandiri. ────────────── */

.ae-db-dashboard {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
    max-width: var(--es-maxw, 1200px);
    margin: 0 auto;
    padding: 32px 16px 48px;
    box-sizing: border-box;
    color: var(--es-ink, #15171a); /* v1.8.12: tetapkan warna teks dasar (samakan .katalis-account), sebelumnya tidak diset sama sekali sehingga ikut warna default tema yg lebih terang/abu, bukan hitam pekat spt di Akun */
}
.ae-db-main { min-width: 0; }
.ae-db-main > .ae-db-card { margin: 0; padding: 24px; }

.ae-db-sidebar {
    background: #fff;
    border: 1px solid var(--es-line, #e7e9ee);
    border-radius: 8px; /* v1.8.11: disamakan dgn radius .katalis-account__sidebar, sebelumnya 14px */
    overflow: hidden;
    position: sticky;
    top: 20px;
    margin: 0;
}
:root[data-theme="dark"] .ae-db-sidebar { background: #1e2128; border-color: #2a2d38; }

.ae-db-sidebar__profile { display: flex; gap: 12px; padding: 18px; border-bottom: 1px solid var(--es-line, #e7e9ee); align-items: center; }
:root[data-theme="dark"] .ae-db-sidebar__profile { border-color: #2a2d38; }
.ae-db-sidebar__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--es-bg-soft, #f5f6f8); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--es-primary, #e31e25); font-size: 14px; flex-shrink: 0; }
.ae-db-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
:root[data-theme="dark"] .ae-db-sidebar__avatar { background: var(--es-bg-soft, #1a1d24); color: #fff; }
.ae-db-sidebar__user { font-size: 12px; line-height: 1.4; min-width: 0; }
.ae-db-sidebar__user b { display: block; font-size: 13px; color: var(--es-ink, #15171a); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .ae-db-sidebar__user b { color: #e8eaf0; }
.ae-db-sidebar__user span { color: var(--es-muted, #8a9099); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-db-sidebar__id { color: var(--es-primary, #e31e25) !important; }
:root[data-theme="dark"] .ae-db-sidebar__id { color: #6b7280 !important; }

.ae-db-nav { display: flex; flex-direction: column; padding: 0; margin: 0; gap: 0; }
.ae-db-nav__item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 14px; color: var(--es-ink, #15171a); text-decoration: none; border-bottom: 1px solid var(--es-bg-soft, #f5f6f8); transition: background .15s; }
:root[data-theme="dark"] .ae-db-nav__item { color: var(--es-ink, #e8eaf0); border-bottom-color: #232735; }
.ae-db-nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.ae-db-nav__item:hover { background: var(--es-bg-soft, #f5f6f8); color: var(--es-ink, #15171a); }
:root[data-theme="dark"] .ae-db-nav__item:hover { background: var(--es-bg-soft, #1a1d24); color: var(--es-ink, #e8eaf0); }
.ae-db-nav__item.active { background: none; color: var(--es-primary, #e31e25); font-weight: 600; }
.ae-db-nav__item.active svg { color: var(--es-primary, #e31e25); }
/* v1.8.11: disamakan dgn pola .katalis-account__nav-item.is-active milik Akun
   di Dark Mode — latar SOLID penuh baris warna merah gelap (sebelumnya latar
   merah transparan tipis rgba(227,30,37,.12)). */
:root[data-theme="dark"] .ae-db-nav__item.active { background: var(--es-primary-dark, #b01419); color: #fff; }
/* v1.8.13: FIX — ikon menu aktif "hilang" di Dark Mode: warna ikon tetap
   merah (var(--es-primary)) sementara latar item aktif di atas jadi SOLID
   merah juga (v1.8.11), jadi ikon merah-di-atas-merah tidak terlihat sama
   sekali. Disamakan dgn :root[data-theme="dark"] .katalis-account__nav-item.is-active svg
   milik Akun — ikon ikut jadi putih di Dark Mode. */
:root[data-theme="dark"] .ae-db-nav__item.active svg { color: #fff; }
.ae-db-nav__sep { height: 1px; background: var(--es-line, #e7e9ee); width: 100%; margin: 0; }
:root[data-theme="dark"] .ae-db-nav__sep { background: #2a2d38; }
.ae-db-nav__item--back { color: var(--es-muted, #8a9099); font-size: 12px; }
.ae-db-nav__item--back:hover { background: var(--es-bg-soft, #f5f6f8); color: var(--es-ink, #15171a); }
:root[data-theme="dark"] .ae-db-nav__item--back { color: #9ea3b0; }
:root[data-theme="dark"] .ae-db-nav__item--back:hover { background: var(--es-bg-soft, #1a1d24); color: #e8eaf0; }
/* v1.8.11: disamakan dgn pola .katalis-account__nav-item--logout milik Akun —
   item "Keluar" TIDAK diberi warna teks sendiri (ikut warna teks menu biasa,
   sebelumnya #ef4444 merah + hover pink berbeda sendiri), cukup ditandai
   garis pemisah di atasnya; hover ikut aturan umum .ae-db-nav__item:hover. */
.ae-db-nav__item--logout { border-top: 2px solid var(--es-ink, #15171a); border-bottom: none; }
:root[data-theme="dark"] .ae-db-nav__item--logout { border-top-color: #e8eaf0; }

@media (max-width: 768px) {
    .ae-db-dashboard { grid-template-columns: 1fr; }
    .ae-db-sidebar { position: static; }
    .ae-db-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ae-db-nav__item { border-bottom: none; border-right: 1px solid var(--es-bg-soft, #f5f6f8); white-space: nowrap; flex-shrink: 0; padding: 12px 16px; font-size: 13px; }
    :root[data-theme="dark"] .ae-db-nav__item { border-right-color: #232735; }
    .ae-db-nav__sep { display: none; }
    .ae-db-nav__item--logout { border-top: none; border-left: 2px solid var(--es-ink, #15171a); }
    :root[data-theme="dark"] .ae-db-nav__item--logout { border-left-color: #e8eaf0; }
}
@media (max-width: 600px) {
    .ae-db-dashboard { padding: 32px 8px 48px; }
    .ae-db-card { padding: 20px 16px; }
    .ae-db-title { font-size: 19px; }
}

/* ── Profil Singkat (Dashboard) & Edit Saya (v1.5.4) ─────────────────── */

/* v1.8.11: dibungkus kotak border+radius (meniru .katalis-account__sub-card
   milik Akun), sebelumnya daftar polos tanpa bingkai luar — baris di dalamnya
   tetap dipisah garis tipis seperti semula. */
.ae-db-profile-summary { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; padding: 16px; }
:root[data-theme="dark"] .ae-db-profile-summary { border-color: #2a2d38; background: var(--es-bg-soft, #1a1d24); }
.ae-db-profile-summary__row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--es-line, #e7e9ee); }
.ae-db-profile-summary__row:last-child { border-bottom: none; padding-bottom: 0; }
.ae-db-profile-summary__row:first-child { padding-top: 0; }
:root[data-theme="dark"] .ae-db-profile-summary__row { border-color: #2a2d38; }
.ae-db-profile-summary__row span { color: var(--es-muted, #8a9099); flex-shrink: 0; }
.ae-db-profile-summary__row b { text-align: right; font-weight: 600; }

/* v2.3.9: "Rincian Produk"/"Alamat Pengiriman"/"Kontak Pembeli" di Pesanan Masuk
   (pesanan-detail.php) — meniru persis .katalis-account__sub-card/__order-row
   milik halaman "Pesanan Saya" Dashboard Pembeli, supaya kedua dashboard terasa
   satu keluarga visual (sebelumnya di sini pakai <table> polos, beda pola). */
.ae-db-subcard { border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; padding: 4px 16px; }
:root[data-theme="dark"] .ae-db-subcard { border-color: #2a2d38; background: var(--es-bg-soft, #1a1d24); }
.ae-db-subcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--es-line, #e7e9ee); }
.ae-db-subcard__row:last-child { border-bottom: none; }
:root[data-theme="dark"] .ae-db-subcard__row { border-color: #2a2d38; }
.ae-db-subcard__row--total { font-weight: 700; }

.ae-db-form-msg { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 600; }

/* v1.8.13: FIX — field readonly (Nama Lengkap, Email di "Edit Toko") sebelumnya
   inline style background:#f9fafb;color:#6b7280 hardcode TANPA varian dark
   mode, jadi tampil sebagai kotak putih terang mencolok di tengah form gelap
   (dilaporkan pemilik toko). Disamakan dgn pola .katalis-account__form
   input[readonly] milik Akun — dipindah jadi class/selector di sini
   (kolaborator.css) supaya otomatis ikut dark mode, inline style di
   edit-saya.php dihapus. */
.ae-db-form input[readonly] { background: var(--es-bg-soft, #f5f6f8) !important; color: var(--es-muted, #8a9099) !important; cursor: not-allowed; }
:root[data-theme="dark"] .ae-db-form input[readonly] { background: var(--es-bg-soft, #1a1d24) !important; color: #6b7280 !important; border-color: #2a2d38 !important; }

/* ── Bantuan (v1.5.4) ─────────────────────────────────────────────────── */

.ae-db-help-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ae-db-help-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; /* v1.8.11: disamakan dgn radius .katalis-account__sub-card, sebelumnya 10px */
    color: inherit; text-decoration: none; font-size: 14px; font-weight: 600;
}
.ae-db-help-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--es-primary, #e31e25); }
.ae-db-help-item:hover { background: var(--es-bg-soft, #f5f6f8); }
:root[data-theme="dark"] .ae-db-help-item { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-db-help-item:hover { background: var(--es-bg-soft, #1a1d24); }
.ae-db-help-item--wa svg { color: #16a34a; }

/* ── Etalase Publik Toko Kolaborator (v1.5.4) ────────────────────────── */

.ae-db-toko-header {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--es-line, #e7e9ee);
}
:root[data-theme="dark"] .ae-db-toko-header { border-color: #2a2d38; }
.ae-db-toko-header__avatar {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(227,30,37,.08);
    color: var(--es-primary, #e31e25); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.ae-db-toko-header__text { flex: 1 1 260px; min-width: 0; }
.ae-db-toko-header__bio { color: var(--es-muted, #8a9099); font-size: 14px; line-height: 1.6; margin: 6px 0 0; }
:root[data-theme="dark"] .ae-db-toko-header__bio { color: #9ea3b0; }
.ae-db-toko-header__meta { color: var(--es-muted, #8a9099); font-size: 12px; margin: 8px 0 0; }

/* ── Kartu Statistik Dashboard — 3 kolom atas + 3 kolom bawah (v1.5.8) ── */

.ae-db-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin: 20px 0 28px;
}
.ae-db-stats-grid .ae-db-stat {
    border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; padding: 14px; text-align: center; /* v1.8.11: disamakan dgn radius .katalis-account__sub-card, sebelumnya 10px */
}
:root[data-theme="dark"] .ae-db-stats-grid .ae-db-stat { border-color: #2a2d38; }
.ae-db-stat__value { font-size: 22px; font-weight: 700; }
.ae-db-stat__label { font-size: 12px; color: var(--es-muted, #8a9099); margin-top: 2px; }
@media (max-width: 640px) {
    .ae-db-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .ae-db-stats-grid { grid-template-columns: 1fr; }
}

/* ── Logo/Foto Toko — upload & preview (v1.5.8) ──────────────────────── */

.ae-db-logo-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ae-db-logo-field__preview {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--es-line, #e7e9ee); background: var(--es-bg-soft, #f5f6f8); flex-shrink: 0;
}
:root[data-theme="dark"] .ae-db-logo-field__preview { border-color: #2a2d38; background: var(--es-bg-soft, #1a1d24); }
.ae-db-logo-field__controls { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ae-db-logo-field__hint { font-size: 12px; color: var(--es-muted, #8a9099); text-align: left; }
.ae-db-logo-field__remove { font-size: 12px; color: var(--es-primary, #e31e25); display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; cursor: pointer; width: auto; text-align: left; margin-top: 2px; }
.ae-db-logo-field__remove input[type="checkbox"] { margin: 0; flex-shrink: 0; }

/* ── Media Sosial Toko — input di form (v1.5.8) ──────────────────────── */

.ae-db-social-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* ── Atribut Produk — form Tambah/Edit Produk (v1.7.5) ───────────────── */

.ae-db-atribut-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-bottom: 8px; }
.ae-db-atribut-row--last { margin-bottom: 0; }
.ae-db-atribut-row input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: #fff; color: inherit;
}
:root[data-theme="dark"] .ae-db-atribut-row input { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }

/* ── Galeri Foto Tambahan — form Tambah/Edit Produk (v1.7.5) ─────────── */

.ae-db-gallery-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ae-db-gallery-preview__item { width: 78px; text-align: center; cursor: pointer; }
.ae-db-gallery-preview__item img {
    width: 78px; height: 78px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--es-line, #e7e9ee); display: block; margin-bottom: 4px;
}
:root[data-theme="dark"] .ae-db-gallery-preview__item img { border-color: #2a2d38; }
.ae-db-gallery-preview__remove { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: #ef4444; }
.ae-db-gallery-preview__remove input { width: auto; margin: 0; }

/* ── "Produk Saya" — grid kartu produk (v1.7.6) ──────────────────────
   Meniru pola kartu di halaman utama Toko (.ae-kelas-card di shop.css)
   supaya kolaborator langsung familier, tapi disesuaikan: bukan tautan
   ke halaman produk (kolaborator sedang MENGELOLA, bukan membeli), jadi
   badge Status + tombol Edit ditaruh eksplisit di body kartu, bukan
   overlay di foto. 3 kartu per baris di desktop, 2 di tablet & mobile —
   dipaksa eksplisit (bukan auto-fill) sesuai permintaan, supaya jumlah
   kolom selalu bisa diprediksi di layar mana pun. */
.ae-db-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; }
.ae-db-product-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; overflow: hidden; background: #fff; /* v1.8.11: disamakan dgn radius .katalis-account__sub-card, sebelumnya 10px */
}
:root[data-theme="dark"] .ae-db-product-card { background: #1e2128; border-color: #2a2d38; }
.ae-db-product-card__thumb { position: relative; aspect-ratio: 1 / 1; background: var(--es-bg-soft, #f5f6f8); overflow: hidden; }
.ae-db-product-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-db-product-card__thumb--placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eceef2, #f7f8fa); }
:root[data-theme="dark"] .ae-db-product-card__thumb { background: var(--es-bg-soft, #1a1d24); }
:root[data-theme="dark"] .ae-db-product-card__thumb--placeholder { background: linear-gradient(135deg, var(--es-bg-soft, #1a1d24), #1e2128); }
.ae-db-product-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ae-db-product-card__title {
    font-size: 14px; font-weight: 600; margin: 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.4em * 2);
}
:root[data-theme="dark"] .ae-db-product-card__title { color: #e8eaf0; }
.ae-db-product-card__price { font-weight: 700; color: var(--es-primary, #e31e25); font-size: 15px; }
.ae-db-product-card__reason { font-size: 12px; color: #991b1b; }
.ae-db-product-card__edit { display: block; text-align: center; margin-top: auto; padding: 8px 14px; font-size: 13px; }

@media (max-width: 980px) {
    .ae-db-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 380px) {
    .ae-db-product-grid { gap: 8px; }
    .ae-db-product-card__body { padding: 10px; gap: 6px; }
    .ae-db-product-card__title { font-size: 13px; }
    .ae-db-product-card__price { font-size: 13px; }
}
.ae-db-social-row:last-child { margin-bottom: 0; }
.ae-db-social-row__icon {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center; background: var(--es-bg-soft, #f5f6f8);
    border: 1px solid var(--es-line, #e7e9ee); color: var(--es-muted, #8a9099);
}
:root[data-theme="dark"] .ae-db-social-row__icon { background: var(--es-bg-soft, #1a1d24); border-color: #2a2d38; color: #9ea3b0; }
.ae-db-social-row__icon svg { width: 18px; height: 18px; }
.ae-db-social-row input { flex: 1; min-width: 0; }

/* ── Media Sosial Toko — tampilan etalase publik (v1.5.8) ────────────── */

.ae-db-toko-header__logo {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--es-line, #e7e9ee);
}
:root[data-theme="dark"] .ae-db-toko-header__logo { border-color: #2a2d38; }
.ae-db-toko-social { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.ae-db-toko-social a {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--es-bg-soft, #f5f6f8); border: 1px solid var(--es-line, #e7e9ee); color: var(--es-muted, #8a9099);
    transition: background .15s, color .15s;
}
:root[data-theme="dark"] .ae-db-toko-social a { background: var(--es-bg-soft, #1a1d24); border-color: #2a2d38; color: #9ea3b0; }
.ae-db-toko-social a:hover { background: var(--es-primary, #e31e25); color: #fff; border-color: var(--es-primary, #e31e25); }
.ae-db-toko-social a svg { width: 17px; height: 17px; }

/* ── v1.6.6: lebar Dashboard Kolaborator disamakan dengan tema ──────────────
   Penyebab lama: .ae-db-dashboard memakai max-width TETAP 1100px sehingga
   tidak pernah ikut kontainer tema (--es-maxw) walau kolom Page Builder sudah
   diset lebar 3. Sekarang ikut variabel tema; di dalam kontainer/kolom tema
   batas & padding sendiri dilepas supaya tidak menyempit dua kali. */
.es-container .ae-db-dashboard,
.es-pb-col .ae-db-dashboard,
.es-page-builder-output .ae-db-dashboard,
.es-container .ae-db-wrap,
.es-pb-col .ae-db-wrap,
.es-page-builder-output .ae-db-wrap{max-width:none;padding-left:0;padding-right:0}

/* v1.6.7 — Jarak vertikal dashboard diseragamkan dengan plugin lain (32px atas, 48px bawah). */
.ae-db-dashboard,
.es-container .ae-db-dashboard,
.es-pb-col .ae-db-dashboard,
.es-page-builder-output .ae-db-dashboard{margin-top:0;margin-bottom:0;padding-top:32px;padding-bottom:48px}

/* ── v1.7.3 — kotak Varian (SE\Variants::render_fields()) & field Tiket/Sewa
   dipakai ULANG dari editor Admin di form Tambah/Edit Produk Kolaborator
   (produk-form.php), tapi markup Admin itu ditulis mengasumsikan CSS admin
   (.ae-meta-grid/.ae-meta-full dari <style> inline class-cpt-produk.php,
   dan class WP core .widefat/.button dari wp-admin) — tidak ada di frontend.
   Style di bawah ini MENIRU tampilan admin box tsb dengan bahasa visual
   dashboard Kolaborator yang sudah ada, supaya tidak tampil polos/rusak. */
.ae-db-varian-section .ae-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ae-db-varian-section .ae-meta-full { grid-column: 1 / -1; }
.ae-db-varian-section .ae-meta-hint,
.ae-db-varian-section .ae-db-hint { color: var(--es-muted, #8a9099); font-size: 12px; font-weight: 400; margin-top: 4px; }
:root[data-theme="dark"] .ae-db-varian-section .ae-meta-hint,
:root[data-theme="dark"] .ae-db-varian-section .ae-db-hint { color: #9ea3b0; }
.ae-db-varian-section label { font-size: 13px; }
.ae-db-varian-section hr { border: none; border-top: 1px solid var(--es-line, #e7e9ee); margin: 20px 0; }
:root[data-theme="dark"] .ae-db-varian-section hr { border-color: #2a2d38; }
.ae-db-varian-section input[type="text"],
.ae-db-varian-section input[type="number"] {
    width: 100%; padding: 9px 12px; border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px;
    font-size: 14px; background: #fff; color: inherit; box-sizing: border-box;
}
:root[data-theme="dark"] .ae-db-varian-section input[type="text"],
:root[data-theme="dark"] .ae-db-varian-section input[type="number"] { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }
.ae-db-varian-section table.widefat {
    width: 100%; border-collapse: collapse; margin-top: 10px;
    border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px; overflow: hidden;
}
:root[data-theme="dark"] .ae-db-varian-section table.widefat { border-color: #2a2d38; }
.ae-db-varian-section table.widefat th,
.ae-db-varian-section table.widefat td { padding: 8px 10px; text-align: left; vertical-align: middle; }
.ae-db-varian-section table.widefat thead th {
    background: var(--es-bg-soft, #f5f6f8); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--es-line, #e7e9ee);
}
:root[data-theme="dark"] .ae-db-varian-section table.widefat thead th { background: var(--es-bg-soft, #1a1d24); border-color: #2a2d38; }
.ae-db-varian-section table.widefat.striped tbody tr:nth-child(odd) { background: var(--es-bg-soft, #f5f6f8); }
:root[data-theme="dark"] .ae-db-varian-section table.widefat.striped tbody tr:nth-child(odd) { background: var(--es-bg-soft, #1a1d24); }
.ae-db-varian-section table.widefat td input[type="text"],
.ae-db-varian-section table.widefat td input[type="number"] { padding: 6px 8px; }
.ae-db-varian-section .button {
    display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--es-line, #e7e9ee);
    background: #fff; color: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
:root[data-theme="dark"] .ae-db-varian-section .button { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }
.ae-db-varian-section .button:hover { border-color: var(--es-primary, #e31e25); color: var(--es-primary, #e31e25); }
.ae-db-varian-section .button-secondary { margin-left: 8px; }

/* Tabel varian (stok/resolusi/tiket) bisa lebih lebar dari layar mobile —
   dibungkus wrap-nya sendiri (#se-varian-*-wrap) diberi scroll horizontal
   supaya tabelnya tidak memaksa seluruh halaman melebar (v1.7.5). Sejak
   v1.7.7 scroll horizontal ini praktis tidak pernah kepakai lagi di layar
   ≤640px karena tabelnya sendiri sudah ditumpuk jadi kartu (lihat blok
   .ae-varian-stack di bawah) — wrapper overflow-x tetap dipertahankan
   sebagai jaring pengaman untuk lebar layar di antara breakpoint. */
.ae-db-varian-section #se-varian-fisik-wrap,
.ae-db-varian-section #se-varian-resolusi-wrap,
.ae-db-varian-section #se-varian-tiket-wrap { overflow-x: auto; }

/* ── Baris Atribut Varian (Ukuran/Warna, dst.) — Nama + Opsi + Hapus
   (v1.7.7). Baris ini dirender JS (Variants::render_fields(), fungsi
   renderAtributRows()) sebagai <div class="se-varian-attrow"> berisi 2
   input + 1 tombol; sebelumnya lebar/susunannya cuma inline style flex
   tetap (nama 180px + opsi mengisi sisa + tombol Hapus), jadi di layar
   sempit ketiganya berebut satu baris (ketumpuk/kepotong). Sekarang
   diberi kelas supaya bisa ditumpuk 1 kotak per baris lewat media query
   di bawah, konsisten dengan pola .ae-db-atribut-row di tempat lain. */
/* v2.2.5: jarak antar kolom/baris varian diperlebar — sebelumnya kolom-kolom
   di kotak Varian terasa mepet sekali (gap 8px & sel tabel nyaris tanpa
   padding). */
.ae-db-varian-section .ae-varian-attrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ae-db-varian-section .ae-varian-attrow .ae-attr-nama { width: 200px; flex-shrink: 0; }
.ae-db-varian-section .ae-varian-attrow .ae-attr-opsi { flex: 1 1 auto; min-width: 0; }
.ae-db-varian-section .ae-varian-attrow .ae-attr-remove { flex-shrink: 0; }
.ae-db-varian-section table.widefat.ae-varian-stack th,
.ae-db-varian-section table.widefat.ae-varian-stack td { padding: 12px 14px; vertical-align: middle; }
.ae-db-varian-section #se-varian-atribut-list { margin: 14px 0 4px; }


/* ── Tabel Varian (Stok/Resolusi/Tiket/Grafis) ditumpuk 1 kotak per baris
   di layar mobile (v1.7.7). Sebelumnya di layar ≤640px tabel ini cuma
   diberi scroll horizontal (lihat blok wrapper di atas) — kolom-kolomnya
   tetap berdampingan sempit, jadi tetap sulit diketik lewat HP (kolom
   Nama/Harga/Harga Coret/Kuota/dst. saling berebut ruang). Sekarang tiap
   baris (<tr>) tabel widefat DIUBAH jadi kartu block, tiap kolom (<td>)
   jadi 1 baris penuh sendiri dengan label kolom di atasnya (diambil dari
   atribut data-label yang ditambahkan di kolom <td> JS-nya masing-masing:
   Variants::render_fields() untuk header th statis, dan renderResoRows()/
   renderTiketRows()/generateStokTable()/renderGrafisRows() untuk tiap
   <td> yang dibuat ulang tiap kali baris berubah) — supaya kolaborator
   tetap tahu kolom mana yang sedang diisi walau sudah ditumpuk vertikal.
   TIDAK berlaku untuk tipe Ebook (tipe ini memang tidak punya tabel
   varian sama sekali, se_varian_ebook* tidak ada). */
@media (max-width: 640px) {
    .ae-db-varian-section .ae-meta-grid { grid-template-columns: 1fr; }
    .ae-db-atribut-row { grid-template-columns: 1fr; }

    .ae-db-varian-section .ae-varian-attrow { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 22px; }
    .ae-db-varian-section .ae-varian-attrow .ae-attr-nama,
    .ae-db-varian-section .ae-varian-attrow .ae-attr-opsi { width: 100%; }
    .ae-db-varian-section .ae-varian-attrow .ae-attr-remove { width: 100%; padding: 10px 14px; }


    .ae-db-varian-section table.widefat.ae-varian-stack,
    .ae-db-varian-section table.widefat.ae-varian-stack tbody,
    .ae-db-varian-section table.widefat.ae-varian-stack tr,
    .ae-db-varian-section table.widefat.ae-varian-stack td { display: block; width: 100%; }
    .ae-db-varian-section table.widefat.ae-varian-stack thead { display: none; }
    .ae-db-varian-section table.widefat.ae-varian-stack tr {
        border-bottom: 8px solid var(--es-bg-soft, #f5f6f8);
        padding: 16px 14px 6px;
    }
    :root[data-theme="dark"] .ae-db-varian-section table.widefat.ae-varian-stack tr { border-bottom-color: var(--es-bg-soft, #1a1d24); }
    .ae-db-varian-section table.widefat.ae-varian-stack tr:last-child { border-bottom: none; }
    .ae-db-varian-section table.widefat.ae-varian-stack.striped tbody tr:nth-child(odd) { background: transparent; }
    .ae-db-varian-section table.widefat.ae-varian-stack td {
        padding: 0 0 16px; border: none;
    }

    .ae-db-varian-section table.widefat.ae-varian-stack td[data-label]::before {
        content: attr(data-label);
        display: block; font-size: 11px; font-weight: 700; color: var(--es-muted, #8a9099); margin-bottom: 4px;
    }
    /* Beberapa input tabel (mis. Stok, Batas Sisi Terpanjang) punya inline
       style="width:100px" bawaan (ditulis JS untuk tampilan tabel desktop) —
       inline style menang atas aturan biasa di stylesheet manapun, jadi
       perlu !important supaya tetap melebar penuh sekali ditumpuk. */
    .ae-db-varian-section table.widefat.ae-varian-stack td input[type="text"],
    .ae-db-varian-section table.widefat.ae-varian-stack td input[type="number"] { width: 100% !important; }
    :root[data-theme="dark"] .ae-db-varian-section table.widefat.ae-varian-stack td[data-label]::before { color: #9ea3b0; }
    .ae-db-varian-section table.widefat.ae-varian-stack td:empty,
    .ae-db-varian-section table.widefat.ae-varian-stack td[data-label=""] { padding-bottom: 4px; }
    .ae-db-varian-section table.widefat.ae-varian-stack .ae-reso-remove,
    .ae-db-varian-section table.widefat.ae-varian-stack .ae-tiket-remove,
    .ae-db-varian-section table.widefat.ae-varian-stack .ae-grafis-remove {
        width: 100%; padding: 10px 14px; font-size: 0; color: transparent; position: relative;
    }
    .ae-db-varian-section table.widefat.ae-varian-stack .ae-reso-remove::after,
    .ae-db-varian-section table.widefat.ae-varian-stack .ae-tiket-remove::after,
    .ae-db-varian-section table.widefat.ae-varian-stack .ae-grafis-remove::after {
        content: "Hapus baris ini"; font-size: 13px; font-weight: 600; color: #ef4444;
    }
}

/* ── Pesanan Masuk — badge tipe produk per item & panel "Lihat Detail" (v2.3.5) ──
   Badge tipe produk pakai ikon SVG (Admin_Icons, currentColor) supaya otomatis
   ikut warna teks & Dark Mode — BUKAN emoji. Palet & border disamakan persis
   dengan .ae-db-badge (branding konsisten satu keluarga visual). ────────────── */
.ae-db-order__item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--es-bg-soft, #f5f6f8);
}
.ae-db-order__item:last-child { border-bottom: none; }
:root[data-theme="dark"] .ae-db-order__item { border-bottom-color: #232735; }

.ae-db-item-type {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 700;
    background: var(--es-bg-soft, #f5f6f8); border: 1px solid var(--es-line, #e7e9ee);
    color: var(--es-muted, #8a9099); white-space: nowrap;
}
.ae-db-item-type svg { flex-shrink: 0; }
:root[data-theme="dark"] .ae-db-item-type {
    background: var(--es-bg-soft, #1a1d24); border-color: #2a2d38; color: #9ea3b0;
}

.ae-db-order__detail { margin: 4px 0 0; }
.ae-db-order__detail-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--es-primary, #e31e25);
    list-style: none; user-select: none;
}
.ae-db-order__detail-toggle::-webkit-details-marker { display: none; }
.ae-db-order__detail-toggle::marker { content: ""; }
.ae-db-order__detail-chevron { display: inline-flex; transition: transform .15s; }
.ae-db-order__detail[open] .ae-db-order__detail-chevron { transform: rotate(180deg); }

.ae-db-order__detail-body {
    margin-top: 10px; padding: 12px 14px; border-radius: 8px;
    background: var(--es-bg-soft, #f5f6f8); border: 1px solid var(--es-line, #e7e9ee);
    display: flex; flex-direction: column; gap: 10px;
}
:root[data-theme="dark"] .ae-db-order__detail-body {
    background: var(--es-bg-soft, #1a1d24); border-color: #2a2d38;
}

.ae-db-detail-row {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--es-ink, #15171a); line-height: 1.6;
}
:root[data-theme="dark"] .ae-db-detail-row { color: #e8eaf0; }
.ae-db-detail-row__icon {
    flex-shrink: 0; margin-top: 1px; color: var(--es-primary, #e31e25);
}

/* ── Pesanan Masuk — daftar ringkas (v2.3.8) ────────────────────────────
   Tampilan daftar disamakan dengan "Pesanan Saya" milik Dashboard Pembeli
   (katalis-account__order-*, plugin Kontributor EPOCHSTREAM) — ditulis
   ulang mandiri di sini dengan prefix se-kb- sendiri (bukan reuse class
   Kontributor), murni meniru struktur visualnya: 1 baris ringkas per order
   (nomor + badge, tanggal/jumlah produk/pembeli, link "Lihat Detail").
   Detail lengkap tiap order sekarang di halaman TERPISAH (pesanan-detail.php),
   isinya paritas penuh dengan meta box Admin — BUKAN lagi panel <details>
   yang mengembang di tempat seperti v2.3.5–v2.3.7. ─────────────────────── */
.ae-db-order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ae-db-order-item { border: 1px solid var(--es-line, #e7e9ee); border-radius: 10px; padding: 16px; }
:root[data-theme="dark"] .ae-db-order-item { border-color: #2a2d38; }

.ae-db-order-item__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ae-db-order-item__number { font-weight: 700; color: var(--es-ink, #15171a); text-decoration: none; }
.ae-db-order-item__number:hover { text-decoration: underline; }
:root[data-theme="dark"] .ae-db-order-item__number { color: #e8eaf0; }

.ae-db-order-item__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--es-muted, #8a9099); margin-bottom: 12px; }
:root[data-theme="dark"] .ae-db-order-item__meta { color: #9ea3b0; }

.ae-db-order-item__actions { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ae-db-order-item__link { font-size: 13px; font-weight: 600; color: var(--es-primary, #e31e25); text-decoration: none; }
.ae-db-order-item__link:hover { text-decoration: underline; }

.ae-db-back-link { display: inline-block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--es-primary, #e31e25); text-decoration: none; }
.ae-db-back-link:hover { text-decoration: underline; }

/* ── Pagination — Produk Saya & Pesanan Masuk (v2.4.3) ───────────────────
   Dipakai lewat helper se_render_pagination() (includes/class-pagination-
   helper.php). Meniru pola visual .ke-pagination milik menu "Artikel Saya"
   plugin Kontributor EPOCHSTREAM, ditulis ulang mandiri prefix "se-" sendiri
   (bukan reuse class/CSS Kontributor) — sama seperti CSS pagination yang
   dicetak inline oleh class-account-orders.php untuk menu "Pesanan Saya"
   pembeli (halaman itu tidak memuat file CSS ini, jadi disalin persis di
   sana; kalau salah satu diubah, samakan juga yang lain). ─────────────── */
.ae-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 24px; }
.ae-page-btn { padding: 6px 12px; border: 1px solid var(--es-line, #e7e9ee); border-radius: 4px; font-size: 13px; text-decoration: none; color: var(--es-ink, #15171a); }
.ae-page-btn.active { background: var(--es-primary, #e31e25); color: #fff; border-color: var(--es-primary, #e31e25); }
.ae-page-btn--nav { font-weight: 600; }
.ae-page-dots { padding: 6px 4px; font-size: 13px; color: var(--es-muted, #8a9099); }
:root[data-theme="dark"] .ae-page-btn { background: var(--es-bg-soft, #1a1d24); border-color: #2a2d38; color: #9ea3b0; }
:root[data-theme="dark"] .ae-page-btn.active { background: var(--es-primary, #e31e25); border-color: var(--es-primary, #e31e25); color: #fff; }

/* ── Gate "belum login" (v2.4.4) ──────────────────────────────────────────
   Disamakan dengan pola .ke-not-contributor pada plugin Kontributor supaya
   satu ekosistem: ikon garis polos 40px (tanpa lingkaran merah), jarak antar
   teks 12px, subjudul dibatasi 420px, hint italic, lalu tombol. */
.ae-db-card--gate { padding: 40px 48px; }
.ae-db-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0 4px;
    gap: 12px;
}
.ae-db-gate__icon { display: flex; align-items: center; justify-content: center; color: var(--es-ink, #15171a); }
.ae-db-gate__icon svg { width: 40px; height: 40px; display: block; }
.ae-db-gate__title { font-size: 18px; font-weight: 700; margin: 0; color: var(--es-ink, #15171a); }
.ae-db-gate__sub   { font-size: 14px; color: var(--es-muted, #8a9099); margin: 0; line-height: 1.6; max-width: 420px; }
.ae-db-gate__hint  { font-size: 13px; color: var(--es-muted, #8a9099); margin: 0; font-style: italic; }
.ae-db-gate .ae-btn { margin-top: 4px; }

/* Dark mode */
:root[data-theme="dark"] .ae-db-gate__icon,
:root[data-theme="dark"] .ae-db-gate__title { color: #e8eaf0; }
:root[data-theme="dark"] .ae-db-gate__sub,
:root[data-theme="dark"] .ae-db-gate__hint { color: #9ea3b0; }

@media (max-width: 640px) {
    .ae-db-card--gate { padding: 24px 16px; }
    .ae-db-gate__sub { max-width: none; }
}

/* ==========================================================================
   Editor konten Deskripsi (wp_editor / TinyMCE) di form Tambah/Edit Produk.
   Disamakan dengan pola yang dipakai plugin Kontributor.
   ========================================================================== */

/* Field .ae-form-row punya aturan "input/textarea/select { width:100% }"
   untuk field biasa. Tombol quicktags (tab "Kode") adalah <input
   type="button"> di dalam wp_editor, jadi ikut kena width:100% itu dan
   membuatnya menumpuk satu tombol per baris. Kecualikan tombol-tombol
   toolbar quicktags & TinyMCE dari aturan lebar penuh tsb supaya tampil
   sejajar seperti biasa. */
.ae-form-row .wp-editor-wrap input[type="button"],
.ae-form-row .quicktags-toolbar input.button,
.ae-form-row .mce-btn button {
    width: auto;
}
.ae-form-row .wp-editor-wrap,
.ae-form-row .wp-editor-container { width: 100%; }
.ae-form-row textarea.wp-editor-area { font-family: inherit; font-size: 14px; }

/* Dark mode — bingkai editor (tab Visual/Kode, toolbar, border) disamakan
   dengan dark mode, sama seperti di plugin Kontributor. Area tulis di
   dalam iframe TinyMCE sengaja dibiarkan putih (standar semua editor
   WYSIWYG WordPress, termasuk di wp-admin — tidak bisa diubah lewat CSS
   halaman ini karena berjalan dalam dokumen iframe terpisah). */
:root[data-theme="dark"] .ae-form-row textarea.wp-editor-area {
    background: #1e2128;
    color: #e8eaf0;
}
:root[data-theme="dark"] .ae-form-row .wp-editor-wrap { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-form-row .wp-editor-tabs { background: #1e2128; }
:root[data-theme="dark"] .ae-form-row .wp-editor-tabs .wp-switch-editor {
    background: #1e2128;
    border-color: #2a2d38;
    color: #9ea3b0;
}
:root[data-theme="dark"] .ae-form-row .wp-editor-tabs .wp-switch-editor.switch-tmce,
:root[data-theme="dark"] .ae-form-row .html-active .wp-switch-editor.switch-html {
    background: #262a35;
    color: #e8eaf0;
}
:root[data-theme="dark"] .ae-form-row .wp-editor-container { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-form-row .mce-toolbar-grp,
:root[data-theme="dark"] .ae-form-row .mce-statusbar,
:root[data-theme="dark"] .ae-form-row .quicktags-toolbar {
    background: #1e2128 !important;
    border-color: #2a2d38 !important;
}
:root[data-theme="dark"] .ae-form-row .mce-btn button,
:root[data-theme="dark"] .ae-form-row .mce-ico,
:root[data-theme="dark"] .ae-form-row .mce-path-item,
:root[data-theme="dark"] .ae-form-row .quicktags-toolbar input.button {
    color: #e8eaf0 !important;
}
:root[data-theme="dark"] .ae-form-row .mce-btn.mce-active button { background: #2a2d38 !important; }

/* Dropdown "Paragraf" (mce-listbox) di toolbar, dan menu popup-nya —
   dirender MENGAMBANG DI LUAR iframe TinyMCE, jadi bisa dijangkau CSS
   halaman biasa. */
:root[data-theme="dark"] .ae-form-row .mce-listbox,
:root[data-theme="dark"] .ae-form-row .mce-listbox button {
    background: #1e2128 !important;
    border-color: #2a2d38 !important;
    color: #e8eaf0 !important;
}
:root[data-theme="dark"] .ae-form-row .mce-listbox .mce-caret { border-top-color: #e8eaf0 !important; }
:root[data-theme="dark"] .mce-floatpanel { background: #1e2128 !important; border-color: #2a2d38 !important; }
:root[data-theme="dark"] .mce-menu {
    background: #1e2128 !important;
    border-color: #2a2d38 !important;
}
:root[data-theme="dark"] .mce-menu-item { background: transparent !important; }
:root[data-theme="dark"] .mce-menu-item .mce-text,
:root[data-theme="dark"] .mce-menu-item .mce-ico {
    color: #e8eaf0 !important;
}
:root[data-theme="dark"] .mce-menu-item:hover,
:root[data-theme="dark"] .mce-menu-item.mce-selected {
    background: #2a2d38 !important;
}
:root[data-theme="dark"] .mce-menu-item-separator { border-color: #2a2d38 !important; }
:root[data-theme="dark"] .mce-shortcut { color: #9ea3b0 !important; }

/* ════════════════════════════════════════════════════════════════
   Dashboard Aksarify — tambahan di atas fondasi kolaborator.css
   (SHOP by EPOCHSTREAM). Yang baru cuma: judul kelompok menu di
   sidebar (karena menunya dikelompokkan per peran: Belajar vs
   Mengajar) dan beberapa komponen khas LMS.
   ════════════════════════════════════════════════════════════════ */

.ae-db-nav__group-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--es-muted,#6b7280);padding:14px 12px 6px}
.ae-db-nav__group:first-child .ae-db-nav__group-label{padding-top:4px}

.ae-db-kelas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.ae-db-kelas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.ae-db-kelas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.ae-db-kelas-card{border:1px solid var(--es-line,#e5e7eb);border-radius:6px;overflow:hidden;background:var(--es-bg,#fff);display:flex;flex-direction:column}
.ae-db-kelas-card__thumb{aspect-ratio:16/10;background:var(--es-bg-soft,#f3f4f6)}
.ae-db-kelas-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ae-db-kelas-card__body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.ae-db-kelas-card__title{font-size:13.5px;font-weight:600;line-height:1.4;margin:0;color:var(--es-ink,#15171a)}
.ae-db-kelas-card__meta{font-size:11.5px;color:var(--es-muted,#6b7280)}
.ae-db-kelas-card__actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}

.ae-db-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ae-db-table th,.ae-db-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--es-line,#e5e7eb)}
.ae-db-table th{font-size:12px;font-weight:600;color:var(--es-muted,#6b7280);background:var(--es-bg-soft,#f9fafb)}
.ae-db-table-wrap{overflow-x:auto;border:1px solid var(--es-line,#e5e7eb);border-radius:6px}
.ae-db-table-wrap .ae-db-table{min-width:640px}

.ae-db-modul-editor .ae-db-modul{border:1px solid var(--es-line,#e5e7eb);border-radius:6px;padding:14px;margin-bottom:12px;background:var(--es-bg-soft,#f9fafb)}
.ae-db-modul__head{display:flex;gap:8px;margin-bottom:10px}
.ae-db-modul__head input{flex:1}
.ae-db-materi{border:1px solid var(--es-line,#e5e7eb);border-radius:6px;padding:12px;margin-bottom:10px;background:var(--es-bg,#fff)}
.ae-db-materi__row{display:grid;grid-template-columns:2fr 1fr 110px auto;gap:8px;margin-bottom:8px}
@media(max-width:640px){.ae-db-materi__row{grid-template-columns:1fr}}

/* Varian badge status kelas milik pengajar (aktif/pending/revisi/rejected).
   Latar sengaja netral & teks satu warna — mengikuti keputusan di SHOP by
   EPOCHSTREAM v1.9.3/v1.9.4 yang menyeragamkan badge supaya tidak warna-warni. */
.ae-db-badge--aktif,.ae-db-badge--pending,.ae-db-badge--revisi,.ae-db-badge--rejected{background:var(--es-bg-soft,#f3f4f6);border:1px solid var(--es-line,#e5e7eb);color:var(--es-muted,#6b7280)}

/* Editor Materi Pembelajaran di form kelas. */
.ae-db-matpel__item{border:1px solid var(--es-line,#e5e7eb);border-radius:8px;padding:10px;margin-bottom:10px}
.ae-db-matpel__row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.ae-db-matpel__row input[type=text]{flex:1}
.ae-db-matpel__item textarea{width:100%}