/* Panel admin. Token warna tiap tema didefinisikan di portal.css (dipakai bersama website publik). */

body.admin { background: var(--surface); color: var(--ink); }

/* Sidebar — Bootstrap's .offcanvas-lg forces a transparent background on wide screens, so override it explicitly. */
.sidebar { --bs-offcanvas-width: 260px; --bs-offcanvas-bg: var(--sidebar); width: 260px; background-color: var(--sidebar) !important; color: #fff; display: flex; flex-direction: column; }
@media (min-width: 992px) {
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; }
    .admin-main { margin-left: 260px; }
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.2rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .brand-mark { background: rgba(255,255,255,.08); color: var(--gold); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.sidebar-heading { text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; color: rgba(255,255,255,.45); font-weight: 700; padding: 1rem .75rem .4rem; }
.sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 8px; color: rgba(255,255,255,.78); font-weight: 500; font-size: .92rem; margin-bottom: 2px; }
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-link.active { background: var(--gold); color: var(--accent-ink); font-weight: 700; }
.sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); }

/* Topbar */
.admin-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; background: var(--panel); padding: .75rem 1.5rem; border-bottom: 1px solid var(--border); }
.admin-content { padding: 1.5rem; }
@media (min-width: 992px) { .admin-content { padding: 2rem; } }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }

/* Language switch: ID ⟷ EN */
.lang-switch label { display: flex; align-items: center; gap: .45rem; cursor: pointer; user-select: none; }
.lang-label { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; transition: color .2s; }
.lang-label.on { color: var(--heading); }
.lang-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--navy); transition: background .2s; }
.lang-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); transition: transform .2s; }
.lang-switch input:checked + .lang-track .lang-thumb { transform: translateX(18px); }
.lang-switch input:focus-visible + .lang-track { outline: 2px solid var(--gold); outline-offset: 2px; }

.theme-swatch { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(135deg, var(--a) 55%, var(--b) 55%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.dropdown-item.active, .dropdown-item:active { background: var(--panel-2); color: var(--heading); font-weight: 600; }

/* Panels */
.panel { background: var(--panel); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1px solid var(--border); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-header h2 { font-size: 1rem; margin: 0; }
.panel-body { padding: 1.25rem; }
.panel .border-top { border-color: var(--border) !important; }

.kpi { background: var(--panel); border-radius: 14px; border: 1px solid var(--border); padding: 1.2rem 1.25rem; display: flex; align-items: center; gap: 1rem; height: 100%; }
.kpi .ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent-text); font-size: 1.35rem; flex-shrink: 0; }
.kpi .val { font-size: 1.6rem; font-weight: 800; color: var(--heading); line-height: 1; }
.kpi .lbl { color: var(--muted); font-size: .82rem; font-weight: 500; }

.table-admin { margin: 0; --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--panel-2); --bs-table-hover-color: var(--ink); }
.table-admin thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; background: var(--panel-2); border-bottom-width: 1px; white-space: nowrap; }
.table-admin td { vertical-align: middle; }
.table-admin .thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; }
.table-admin .avatar-img { width: 40px; height: 48px; object-fit: cover; border-radius: 6px; }

.panel .list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--border); --bs-list-group-action-hover-bg: var(--panel-2); --bs-list-group-action-hover-color: var(--ink); }

.form-label { font-weight: 600; font-size: .9rem; }
.img-preview { max-height: 180px; border-radius: 10px; object-fit: cover; }
.bg-surface { background: var(--panel-2) !important; }

trix-editor { min-height: 320px; background: var(--bs-body-bg, #fff); border-radius: 8px; border-color: var(--bs-border-color) !important; }
trix-editor:focus { border-color: var(--gold) !important; outline: none; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--gold) 22%, transparent); }
trix-toolbar .trix-button-group--file-tools { display: none; }
trix-editor.is-invalid { border-color: var(--bs-danger) !important; }

.gallery-admin .card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.gallery-admin .card img { aspect-ratio: 4/3; object-fit: cover; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; }

/* Penyesuaian khusus tema Gelap */
html[data-theme="gelap"] .btn-light { --bs-btn-bg: #222c3b; --bs-btn-border-color: #2c394d; --bs-btn-color: #cfd7e3; --bs-btn-hover-bg: #2a3647; --bs-btn-hover-border-color: #364459; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #2a3647; --bs-btn-active-color: #fff; }
html[data-theme="gelap"] trix-toolbar .trix-button-group { background: #dfe4ea; border-color: #2c394d; }
html[data-theme="gelap"] .prose blockquote { background: var(--panel-2); }

.image-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; height: 140px; border-radius: 10px; border: 2px dashed var(--border); color: var(--muted); font-size: .85rem; }
.image-empty i { font-size: 1.8rem; }

/* Pratinjau identitas header (Tampilan Website) */
.brand-preview { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--border); }
.brand-preview img { height: 56px; width: auto; max-width: 64px; object-fit: contain; }
.brand-preview .lh-sm { padding-left: .8rem; border-left: 2px solid var(--gold); }
.bp-kicker { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.bp-title { font-size: 1.45rem; font-weight: 800; color: var(--heading); }
.bp-sub { font-size: .8rem; color: var(--muted); }

/* Logo header (Tampilan Website) */
.logo-slot { border: 1px solid var(--border); border-radius: 12px; padding: 1rem; background: var(--panel-2); height: 100%; }
.logo-slot-preview { height: 96px; display: grid; place-items: center; margin-bottom: .75rem; border-radius: 8px; background: var(--panel); }
.logo-slot-preview img { max-height: 72px; max-width: 80%; object-fit: contain; }

/* Pilihan tema website (Tampilan Website) */
.theme-option { display: block; cursor: pointer; padding: .9rem; border-radius: 14px; border: 2px solid var(--border); background: var(--panel); transition: border-color .15s, box-shadow .15s; height: 100%; }
.theme-option:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.btn-check:checked + .theme-option { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.btn-check:focus-visible + .theme-option { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-check { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); color: transparent; font-size: .85rem; }
.btn-check:checked + .theme-option .theme-check { background: var(--gold); border-color: var(--gold); color: var(--accent-ink); }

.theme-preview { display: block; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid rgba(0,0,0,.08); aspect-ratio: 16/10; }
.theme-preview > span { display: block; }
.tp-nav { display: flex !important; align-items: center; justify-content: space-between; height: 14%; padding: 0 8%; background: var(--card); }
.tp-logo { width: 12%; height: 50%; border-radius: 3px; background: var(--p); }
.tp-links { width: 40%; height: 22%; border-radius: 3px; background: color-mix(in srgb, var(--p) 25%, var(--card)); }
.tp-hero { height: 44%; padding: 6% 8%; background: var(--p); }
.tp-line { display: block; height: 9%; min-height: 5px; border-radius: 3px; background: rgba(255,255,255,.75); margin-bottom: 5%; }
.tp-btn { display: block; width: 22%; height: 16%; min-height: 8px; border-radius: 3px; background: var(--a); }
.tp-cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6%; padding: 6% 8%; height: 42%; }
.tp-cards span { border-radius: 4px; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); border-top: 3px solid var(--a); }

/* Penyesuaian khusus tema Militer */
html[data-theme="militer"] .btn-light { --bs-btn-bg: #f0ece1; --bs-btn-border-color: #e3ddcd; --bs-btn-hover-bg: #e7e1d2; --bs-btn-hover-border-color: #d9d1bd; }

/* Login */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1.1fr 1fr; } }
.auth-side { background: var(--navy); color: #fff; position: relative; overflow: hidden; display: none; }
@media (min-width: 992px) { .auth-side { display: flex; } }
.auth-side::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(201,162,39,.12); right: -140px; bottom: -140px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }

.current-file { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .85rem; padding: .5rem .75rem; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }