/* ===== panel-shared.css =====
   Komponen UI yang dipakai BERSAMA oleh watermark-tool.php & video-editor.php
   (dan halaman kreatif lain di masa depan). Sebelumnya blok-blok ini di-
   copy-paste manual ke tiap halaman — setiap perbaikan di satu tempat (mis.
   redesain flat-grid, penyesuaian mobile) harus diulang manual di tempat lain
   dan gampang lupa/ketinggalan. Sekarang cukup di-@link sekali per halaman.

   CSS MENTAH biasa (BUKAN Tailwind) — aman dipakai apa adanya tanpa
   bergantung pada proses build apa pun (lihat catatan build statis Tailwind
   di watermark-tool.php). Muat file ini SEBELUM <style> khusus halaman,
   supaya override page-specific (kalau ada) tetap menang lewat urutan cascade.
*/

/* ===== Dropzone unggah berkas (drag file OS ke label / ke area kanvas) ===== */
.dropzone.is-drag { border-color: #c45c26; background: rgba(196, 92, 38, 0.08); }
.dropzone.is-full { opacity: .45; cursor: not-allowed; }
.dropzone.is-full:hover { border-color: rgba(20,17,14,.2); }
/* Panggung kanvas/video juga menerima drop berkas asli dari luar browser —
   lihat helper KreatifDragDrop di assets/js/shared/drag-drop.js. */
#stage.is-drag { border-color: #c45c26; background: rgba(196, 92, 38, 0.08); }

/* ===== Antrean foto (thumbnail #bgThumbs) — indikator sisipan saat drag-reorder.
       Dipakai watermark-tool.php untuk penanda posisi sebelum drop. ===== */
.qthumb.qthumb-drop-before { box-shadow: inset 3px 0 0 0 #C5A059, -3px 0 0 0 #C5A059; }
.qthumb.qthumb-drop-after  { box-shadow: inset -3px 0 0 0 #C5A059,  3px 0 0 0 #C5A059; }
.qthumb.dragging { opacity: 0.4; }
/* Indikator sisipan saat drag-reorder kartu slot kolase (#facilitySlotList). */
.fac-card.fac-card-drop-before { box-shadow: inset 3px 0 0 0 #C5A059, -3px 0 0 0 #C5A059; }
.fac-card.fac-card-drop-after  { box-shadow: inset -3px 0 0 0 #C5A059,  3px 0 0 0 #C5A059; }
.fac-card.dragging { opacity: 0.4; }

/* ===== Tab datar (mis. Foto/Elemen) ===== */
.side-tab { display:flex; align-items:center; justify-content:center; gap:.3rem; padding:.55rem .4rem;
    border-radius:.65rem; border:1px solid #E5E7EB; background:#F3F4F6; font-size:.72rem;
    font-weight:500; color:#374151; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; opacity:1; white-space:nowrap; }
.side-tab:hover { background:#E5E7EB; border-color:#D1D5DB; color:#374151; }
.side-tab.active { background:#fff; border:2px solid #2563EB; color:#2563EB; font-weight:700; box-shadow:none; }
.editor-tabs-wrapper { width:100%; overflow:visible; }
#tab-teks #addTextBtn { margin-top: 8px; }
#sidePanel { padding-bottom: 16px; }
#tab-foto, #tab-teks, #tab-shape, #tab-emoji, #tab-icon, #tab-warna, #tab-gaya, #tab-elemen { padding-bottom: 16px; }
@media (min-width: 1280px) {
    .editor-tabs-wrapper {
        width: 100%;
        overflow: visible;
        margin-bottom: 16px;
        gap: 12px;
    }
    .editor-tabs,
    .panel-shared__tabs,
    #sidePanel .grid.grid-cols-6,
    .grid.grid-cols-6 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .side-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        min-height: 2.8rem;
        padding: 8px 10px;
        gap: 6px;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1.1;
    }
    .side-tab .ic {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
    }
}
@media (min-width: 1200px) and (max-width: 1279px) {
    .editor-tabs-wrapper { width:100%; overflow:visible; margin-bottom:16px; gap:12px; }
    .editor-tabs,
    .panel-shared__tabs,
    #sidePanel .grid.grid-cols-6,
    .grid.grid-cols-6 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .side-tab {
        min-width: 64px;
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* ===== Accordion ===== */
.acc > .acc-head { display:flex; width:100%; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.65rem .8rem; background:#fff; border:1px solid rgba(20,17,14,.10); border-radius:.8rem;
    font-size:.78rem; font-weight:600; color:#131B2E; cursor:pointer; text-align:left; transition:border-color .15s; }
.acc > .acc-head:hover { border-color:rgba(197,160,89,.75); }
.acc .chev { transition:transform .18s; font-size:.62rem; color:#C5A059; flex-shrink:0; }
.acc.open > .chev, .acc.open > .acc-head .chev { transform:rotate(90deg); }
.acc.open > .acc-head { border-color:rgba(197,160,89,.85); }
.acc > .acc-body { display:none; padding-top:.55rem; }
.acc.open > .acc-body { display:block; }
.acc-nested { margin-top:.5rem; }

/* ===== Chip pill (filter/toggle kecil) ===== */
.chip { padding:.28rem .6rem; border-radius:999px; border:1px solid rgba(20,17,14,.12); background:#fff;
    font-size:.66rem; font-weight:600; color:#131B2E; cursor:pointer; transition:all .12s; }
.chip:hover { border-color:#c45c26; }
.chip.active { background:#c45c26; border-color:#c45c26; color:#fff; }

/* ===== Grid emoji/stiker ===== */
.stk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:.4rem;
    max-height:48vh; overflow-y:auto; padding:2px; }
/* Flat grid ala Figma/Canva: tanpa bingkai permanen, outline hanya
   muncul saat disentuh (hover/focus) — bukan kotak isian yang selalu
   tampak. border tetap "dipesan" transparan supaya ukuran tombol
   tidak melompat saat state berubah (tanpa itu border 1px yang
   muncul-hilang menggeser layout tetangganya tiap hover). */
.stk-btn { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
    background:transparent; border:1px solid transparent; border-radius:.6rem; cursor:pointer;
    transition:transform .1s, border-color .1s, background-color .1s; line-height:1; padding:0; }
.stk-btn:hover, .stk-btn:focus-visible { border-color:#C5A059; background:#fff; transform:scale(1.1); }
.stk-btn:active { transform:scale(.95); }

/* ===== Grid ikon flat (Alignment / Shape / Posisi & sejenisnya) — tanpa
   bingkai statis, sama seperti .stk-btn/.chip di atas. Ditulis sebagai CSS
   mentah, bukan utility Tailwind hover:/focus:, supaya tampilannya tidak
   diam-diam bergantung pada `npm run build:css` sudah dijalankan ulang
   dengan kelas terbaru ter-scan — tetap tampil benar walau build statis
   Tailwind di halaman terkait belum di-regenerasi. ===== */
/* .align-btn SENGAJA dipisah dari .shape-btn/.pin-btn (dulu satu selector
   gabungan) — grup itu masih memakai skema biru (#2563EB) dari mockup
   referensi/ awal, sedangkan Alignment sudah dipindah ke skema navy/gold
   resmi situs (commit "align navy/gold palette"). Karena keduanya sempat
   sama-sama menarget .align-btn dengan spesifisitas setara, aturan yang
   datang BELAKANGAN (grup biru) menang di cascade dan diam-diam menimpa
   warna navy/gold — itu sebabnya tombol Alignment kelihatan "biru lama"
   padahal source-nya sudah navy/gold. Sekarang .align-btn berdiri sendiri,
   satu-satunya sumber gaya untuk kelas ini. */
.align-btn { display:flex; align-items:center; justify-content:center; min-height:2.75rem;
    padding:.45rem .5rem; border-radius:.8rem; border:1px solid rgba(20,17,14,.10); background:#fff;
    color:#131B2E; box-shadow:0 1px 2px rgba(15,23,42,.04); cursor:pointer;
    transition:border-color .12s ease, background-color .12s ease, color .12s ease, transform .12s ease; }
.align-btn:hover, .align-btn:focus-visible { border-color:#c45c26; background:#fff; color:#131B2E; transform:translateY(-1px); }
.align-btn.active { background:#131B2E; border-color:#131B2E; color:#C5A059; box-shadow:none; }
.align-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }

.shape-btn, .pin-btn { display:flex; align-items:center; justify-content:center; min-height:2.75rem;
    border-radius:.8rem; border:1px solid #D1D5DB; background:#fff; color:#374151;
    box-shadow:0 1px 2px rgba(15,23,42,.04); cursor:pointer;
    transition:border-color .12s ease, background-color .12s ease, color .12s ease, transform .12s ease; }
.shape-btn { padding:.7rem .5rem; font-size:1.1rem; line-height:1; }
.pin-btn { padding:.45rem .5rem; }
.shape-btn:hover, .shape-btn:focus-visible, .pin-btn:hover, .pin-btn:focus-visible { border-color:#2563EB; background:#EFF6FF; color:#1D4ED8; transform:translateY(-1px); }
.shape-btn.active, .pin-btn.active { border:2px solid #2563EB; background:#DBEAFE; color:#1D4ED8; box-shadow:none; }

/* .text-format-toggle (Bold/Italic/Underline) — dulu tidak punya state
   ".active" sama sekali, jadi tercentang atau tidak kelihatan identik
   (cuma checkbox kecilnya yang berubah, wrapper labelnya tidak). Sekarang
   dapat state aktif navy/gold, SAMA seperti .align-btn.active — konsisten
   satu bahasa visual untuk semua toggle di Editor Teks. Kelas ".active"
   ditoggle dari JS (lihat buildTeksFormat() di watermark-tool.php), bukan
   cuma dari :has(:checked), supaya tetap identik walau browser lama.  */
.text-format-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.6rem;
    padding: 0.55rem 0.4rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(20,17,14,.10);
    background: #fff;
    color: #131B2E;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease, transform .12s ease;
}
.text-format-toggle:hover { border-color:#c45c26; transform:translateY(-1px); }
.text-format-toggle.active { background:#131B2E; border-color:#131B2E; color:#C5A059; }
.text-format-toggle input {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    accent-color: #c45c26;
}
.text-format-toggle.active input { accent-color: #C5A059; }

#addShapeBtn, .add-shape-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
    min-height:2.9rem; padding:.75rem 1rem; border-radius:.85rem; border:2px solid #2563EB; background:#EFF6FF;
    color:#1D4ED8; font-size:.9rem; font-weight:700; box-shadow:0 1px 2px rgba(37,99,235,.08); cursor:pointer;
    transition:background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease; }
#addShapeBtn:hover, .add-shape-btn:hover, #addShapeBtn:focus-visible, .add-shape-btn:focus-visible { background:#DBEAFE; border-color:#1D4ED8; color:#1E40AF; transform:translateY(-1px); }

.select-layer { display:inline-flex; align-items:center; justify-content:center; gap:.25rem;
    border-radius:999px; border:1px solid #111827; background:#111827; color:#fff;
    font-size:.72rem; font-weight:700; padding:.5rem .8rem; cursor:pointer; min-height:2.15rem;
    transition:background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease; }
.select-layer:hover, .select-layer:focus-visible { background:#1F2937; border-color:#1F2937; transform:translateY(-1px); }

.lower-layer, .raise-layer, .duplicate-layer { display:grid; place-items:center; border:1px solid #D1D5DB; background:#F9FAFB; color:#1F2937; }
.lower-layer:hover, .raise-layer:hover, .duplicate-layer:hover, .lower-layer:focus-visible, .raise-layer:focus-visible, .duplicate-layer:focus-visible { border-color:#2563EB; background:#EFF6FF; color:#1D4ED8; }

.delete-layer { display:grid; place-items:center; border:1px solid #FECACA; background:#FFF1F2; color:#B91C1C; }
.delete-layer:hover, .delete-layer:focus-visible { border-color:#DC2626; background:#FEE2E2; color:#991B1B; }
.pin-btn:hover, .pin-btn:focus-visible { border-color:#c45c26; background:#fff; color:#c45c26; }