/* ═══════════════════════════════════════════════════════════════
   UI POLISH LAYER — Penghalusan Visual & Motion (additif)
   ─────────────────────────────────────────────────────────────────
   Dimuat SETELAH main.css / backstage.css / meter.css.
   Prinsip:
   • Identitas warna biru (#1e3c72 → #2a5298) DIPERTAHANKAN.
   • Hanya menghaluskan: tipografi, elevasi, radius, easing,
     micro-interactions, scrollbar, dan focus states.
   • Override yang menyentuh properti milik media-query mobile di
     main.css dibungkus @media (min-width: 769px) agar layout
     mobile tidak rusak (media query TIDAK menambah spesifisitas;
     file yang dimuat terakhir menang).
   • prefers-reduced-motion sudah ditangani global di main.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens yang diperhalus ── */
:root {
    /* Font stack modern lintas-platform (tanpa dependensi network) */
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-mono: 'Roboto Mono', 'SF Mono', Consolas, 'Courier New', monospace;

    /* Elevasi berlapis ala industri (ambient + key light) */
    --e-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --e-2: 0 2px 4px -2px rgba(16,24,40,.06), 0 4px 10px -2px rgba(16,24,40,.12);
    --e-3: 0 4px 6px -2px rgba(16,24,40,.05), 0 12px 24px -4px rgba(16,24,40,.14);
    --e-pop: 0 8px 8px -4px rgba(16,24,40,.04), 0 22px 40px -6px rgba(16,24,40,.18);

    /* Ring fokus / aksen */
    --ring-primary: 0 0 0 3px rgba(42,82,152,.20);

    /* Border netral lebih lembut */
    --border-soft: #e4e8ef;
}

/* ── 2. Tipografi & rendering ── */
body {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Komponen yang meng-hardcode Arial di main.css → samakan */
.cable-panel, .comp-tooltip, .cable-color-menu,
.cable-ctx-menu, .meter-panel { font-family: var(--font-ui); }

::selection { background: rgba(42,82,152,.18); }

/* ── 3. Scrollbar halus & konsisten (semua panel) ── */
* { scrollbar-width: thin; scrollbar-color: #c2cbd8 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #c2cbd8; border-radius: 8px;
    border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #9fadc0; background-clip: content-box; }

/* ── 4. Focus ring konsisten untuk keyboard navigation ── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-accent, #1971c2);
    outline-offset: 2px;
}

/* ── 5. App entrance — fade halus saat halaman dimuat ── */
@keyframes uiAppFadeIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: uiAppFadeIn .35s ease-out; }

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
@media (min-width: 769px) {
    .header {
        padding: 12px 24px;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.07),
                    0 2px 14px rgba(15,30,60,.28);
    }
    .header-title { font-size: 1.35em; letter-spacing: .2px; }
}
.exercise-label, .score-display { backdrop-filter: blur(6px); }
.hdr-btn {
    backdrop-filter: blur(6px);
    transition: background var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.hdr-btn:hover { box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.hdr-btn:active { transform: translateY(0) scale(.97); }
.hdr-about-btn:active, .user-avatar-btn:active { transform: scale(.94); }

/* ═══════════════════════════════════════════
   SIDEBAR & KARTU KOMPONEN
   ═══════════════════════════════════════════ */
@media (min-width: 769px) {
    .sidebar {
        border-right: 1px solid var(--border-soft);
        box-shadow: 4px 0 18px -8px rgba(15,30,60,.08);
    }
    .sidebar-section { border-bottom: 1px solid #eef1f6; }
}

/* Judul seksi: hairline gradient sebagai aksen (gantikan garis tebal) */
.sidebar-section h3 {
    border-bottom: none;
    position: relative;
    padding-bottom: 8px;
    letter-spacing: .25px;
    font-weight: 700;
}
.sidebar-section h3::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--c-primary, #2a5298) 0%, rgba(42,82,152,.06) 85%);
}

/* Kartu komponen: elevasi lembut + preview yang "hidup" saat hover */
.component-card {
    border-color: var(--border-soft);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.component-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -8px rgba(42,82,152,.26);
}
.component-card:active {
    transform: translateY(-1px) scale(.985);
    transition-duration: .08s;
}
.card-preview svg { transition: transform .28s var(--ease-spring); }
.component-card:hover .card-preview svg { transform: scale(1.07); }

/* Tab collapse sidebar */
.sidebar-toggle-btn { border-radius: 0 12px 12px 0; }
.sidebar-toggle-btn:active { background: #16315f; }

/* Sidebar kanan: kurva lebih elegan (mobile pakai !important sendiri) */
.right-sidebar {
    transition: width .32s cubic-bezier(.22,1,.36,1),
                min-width .32s cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════════
   TOOLBAR & TOOL BUTTONS
   ═══════════════════════════════════════════ */
@media (min-width: 769px) {
    .toolbar {
        background: linear-gradient(180deg, #f8fafd 0%, #eef2f8 100%);
        border-top: 1px solid #dfe5ee;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
                    0 -4px 16px -6px rgba(15,30,60,.10);
        padding: 11px 20px;
    }
    .tool-btn {
        border-color: #d5dce7;
        box-shadow: 0 1px 2px rgba(16,24,40,.06);
    }
    .tool-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px -6px rgba(42,82,152,.30);
    }
    .tool-btn:active {
        transform: translateY(-1px) scale(.96);
        box-shadow: 0 2px 6px rgba(16,24,40,.12);
        transition-duration: .08s;
    }
}
.tool-icon { transition: transform .22s var(--ease-spring); }
.tool-btn:hover .tool-icon { transform: scale(1.12); }
.tool-btn.active { box-shadow: var(--ring-primary), var(--e-1); }
.tool-btn.success { box-shadow: 0 0 0 3px rgba(81,207,102,.16), var(--e-1); }

/* ═══════════════════════════════════════════
   ZOOM CONTROLS — efek kaca (glassmorphism halus)
   ═══════════════════════════════════════════ */
.zoom-drawer-toggle {
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border-color: rgba(165,178,196,.5);
    box-shadow: 0 2px 10px rgba(16,24,40,.14);
    transition: background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.zoom-drawer-toggle:active { transform: scale(.96); }
.zoom-panel {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border-color: rgba(165,178,196,.45);
    box-shadow: var(--e-3);
    animation-duration: .2s;
}
.zoom-btn { background: transparent; transition: background .15s, color .15s; }
.zoom-btn:hover { background: rgba(42,82,152,.08); color: var(--c-accent); }
.zoom-btn:active { background: rgba(42,82,152,.14); }

/* ═══════════════════════════════════════════
   PANEL DOCK KANAN (cable panel, analysis)
   ═══════════════════════════════════════════ */
.cable-panel { border-color: var(--border-soft); box-shadow: var(--e-3); }
.analysis-panel { box-shadow: var(--e-pop); }
.cp-mode-btn, .cp-seg-btn, .cp-act-btn {
    transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
                color .16s var(--ease-out), transform .1s var(--ease-out),
                box-shadow .16s var(--ease-out);
}
.cp-mode-btn:active, .cp-seg-btn:active, .cp-act-btn:active { transform: scale(.96); }

/* ═══════════════════════════════════════════
   KOMPONEN DI KANVAS
   ═══════════════════════════════════════════ */
/* Pop-in halus saat komponen ditempatkan */
@keyframes uiCompDropIn {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: none; }
}
.placed-component { animation: uiCompDropIn .18s var(--ease-out); }

/* Seleksi & powered: glow lebih lembut dan berlapis */
.placed-component.selected {
    filter: drop-shadow(0 0 2px rgba(42,82,152,.9))
            drop-shadow(0 0 12px rgba(42,82,152,.45));
}
.placed-component.powered {
    filter: drop-shadow(0 0 3px rgba(81,207,102,.85))
            drop-shadow(0 0 16px rgba(81,207,102,.40));
}

/* Kontrol komponen (hapus/skala/rotasi): pop spring saat muncul.
   Catatan: display toggle tetap milik main.css — animasi re-run
   otomatis tiap kali elemen berubah display none→block. */
@keyframes uiCtrlPop {
    from { opacity: 0; transform: scale(.55); }
    to   { opacity: 1; transform: scale(1); }
}
.placed-component:hover .delete-btn,
.placed-component:hover .scale-btn { animation: uiCtrlPop .18s var(--ease-spring); }

/* Terminal: spring scale agar terasa hidup */
.terminal {
    transition: transform .18s var(--ease-spring),
                background .15s, border-color .15s, box-shadow .18s;
}

/* ═══════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════ */
.comp-tooltip {
    transform: translateY(5px);
    transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
    box-shadow: 0 14px 32px -8px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(20,33,61,.96);
}
.comp-tooltip.visible { transform: translateY(0); }

/* ═══════════════════════════════════════════
   MODAL & OVERLAY
   ═══════════════════════════════════════════ */
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiModalPop {
    from { opacity: 0; transform: translateY(16px) scale(.95); }
    to   { opacity: 1; transform: none; }
}

/* Modal generik (skor latihan, gamifi detail, dsb) */
.modal { background: rgba(10,18,35,.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal.active { animation: uiFadeIn .22s ease both; }
.modal.active .modal-content { animation: uiModalPop .3s cubic-bezier(.22,1,.36,1) both; }
.modal-content { box-shadow: var(--e-pop); }

/* Laporan & overlay lain: backdrop blur ringan */
.laporan-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.laporan-overlay.active { animation: uiFadeIn .22s ease both; }
.levelup-overlay.active { animation: uiFadeIn .25s ease both; }

/* Recent files modal */
.rm-panel { box-shadow: var(--e-pop); animation: uiModalPop .28s cubic-bezier(.22,1,.36,1) both; }
.rm-row { transition: background .14s var(--ease-out), transform .14s var(--ease-out); }
.rm-row:active { transform: scale(.99); }

/* About modal & help panel: bayangan lebih dalam, durasi tetap */
.about-modal { box-shadow: var(--e-pop), 0 0 0 1px rgba(255,255,255,.06); }
.help-panel { box-shadow: -12px 0 40px -10px rgba(0,0,0,.30); }

/* ═══════════════════════════════════════════
   MENU KONTEKS & PANEL MELAYANG
   ═══════════════════════════════════════════ */
.comp-ctx-menu, .cable-color-menu, .cable-ctx-menu {
    box-shadow: var(--e-3), 0 0 0 1px rgba(16,24,40,.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255,255,255,.95);
}
.ctx-item, .ccm-item { transition: background .12s var(--ease-out), color .12s var(--ease-out); }
.export-panel, .paper-settings-panel { box-shadow: var(--e-pop); }
.scale-toolbar {
    box-shadow: var(--e-3);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    background: rgba(255,255,255,.92);
}

/* ═══════════════════════════════════════════
   TOAST / NOTIFIKASI
   ═══════════════════════════════════════════ */
.toast-card {
    box-shadow: 0 2px 6px rgba(16,24,40,.08),
                0 10px 30px -8px rgba(16,24,40,.28);
}
.toast-locate-btn { transition: background .15s, transform .12s var(--ease-out); }
.toast-locate-btn:active { transform: scale(.96); }
.toast-close { transition: color .15s, transform .12s var(--ease-out); }
.toast-close:active { transform: scale(.9); }

/* ── Notifikasi pill (NotificationManager): redefinisi keyframes.
   Jarak tempuh 400px → 56px + fade — gerak pendek terasa lebih cepat
   dan profesional. Nama keyframe sama; definisi terakhir menang. ── */
@keyframes slideIn {
    from { transform: translateX(56px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(40px); opacity: 0; }
}

/* ═══════════════════════════════════════════
   TOMBOL AKSI UMUM — press feedback konsisten
   ═══════════════════════════════════════════ */
.modal-btn:active,
.ar-btn:active,
.sp-start-btn:active,
.exp-btn:active,
.psp-size-btn:active,
.psp-orient-btn:active,
.bs-hdr-expand:active,
.stb-preset:active,
.stb-step:active { transform: scale(.97); }

.sp-start-btn { transition: opacity .15s, transform .12s var(--ease-out), box-shadow .2s var(--ease-out); }
.sp-start-btn:hover { box-shadow: 0 6px 16px -4px rgba(30,60,114,.45); opacity: 1; }

/* ═══════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════ */
input[type="range"] { accent-color: var(--c-accent, #1971c2); }
.ptb-input { border-radius: 3px; }

/* ═══════════════════════════════════════════
   PROGRESS & DATA-VIZ — easing lebih ekspresif
   ═══════════════════════════════════════════ */
.fuzzy-bar-fill,
.gd-level-fill,
.ar-rubric-bar-fill,
.fp-progress-fill { transition-timing-function: cubic-bezier(.22,1,.36,1); }
.gamifi-xp-fill { transition: width .8s cubic-bezier(.22,1,.36,1); }

/* ═══════════════════════════════════════════
   BACKSTAGE (File Manager) — penghalusan ringan
   ═══════════════════════════════════════════ */
.bs-back, .bs-panel { font-family: var(--font-ui); }
@keyframes bsSlideIn {
    from { transform: translateX(-32px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes bsSlideOut {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-24px); opacity: 0; }
}
#backstageOverlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ═══════════════════════════════════════════
   MOBILE-SPECIFIC POLISH (aman, hanya menambah)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .tool-grid-card { transition: background .15s, border-color .15s, transform .12s var(--ease-spring); }
    .tool-more-sheet { box-shadow: 0 -10px 44px -8px rgba(0,0,0,.24); }
}