/* ============================================================
   ADMIN — Halaman login & panel admin (tab, tabel, form)
   ============================================================ */

/* ---------- Login ---------- */
.login-card{max-width:400px; margin:56px auto; background:#fff; border:1px solid var(--border); border-radius:12px; padding:32px;}
.login-card h1{font-size:22px; margin-bottom:4px;}
.login-card .sub{color:var(--ink2); font-size:14px; margin-bottom:22px;}

/* ---------- Kepala panel ---------- */
.admin-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:32px 0 20px; flex-wrap:wrap;}
.admin-top h1{font-size:24px;}

/* ---------- Tab ---------- */
.tabs{display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:24px;}
.tabs button{background:none; border:none; padding:10px 16px; font-size:15px; font-weight:600; color:var(--ink2); border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs button.active{color:var(--green-dark); border-bottom-color:var(--green);}

/* ---------- Panel & tabel ---------- */
.admin-panel{background:#fff; border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:24px;}
.admin-panel h2{font-size:18px; margin-bottom:16px;}
.list-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
table.admin{width:100%; border-collapse:collapse; font-size:14.5px;}
table.admin th{text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink2); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;}
table.admin td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.admin tr:last-child td{border-bottom:none;}
.row-thumb{width:64px; height:44px; object-fit:cover; border-radius:6px; background:var(--soft2);}
.row-ph{width:64px; height:44px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;}
.row-actions{display:flex; gap:8px; white-space:nowrap;}
.table-scroll{overflow-x:auto;}

/* ---------- Form admin ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
.form-grid .full{grid-column:1/-1;}
.form-actions{display:flex; gap:10px; margin-top:6px;}
.imgprev{margin-top:10px; max-height:140px; border-radius:8px; border:1px solid var(--border);}

@media (max-width:560px){
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- Kelola kategori (di form berita) ---------- */
.kat-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.kat-item{display:inline-flex; align-items:center; gap:6px; background:var(--green-soft); color:var(--green-dark); border:1px solid #CFE3D7; border-radius:999px; padding:4px 6px 4px 12px; font-size:13px; font-weight:600;}
.kat-x{border:none; background:transparent; color:var(--green-dark); font-size:15px; line-height:1; width:20px; height:20px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.kat-x:hover{background:#D64545; color:#fff;}
.kat-add{display:flex; gap:8px; margin-top:10px;}
.kat-add input{flex:1; min-width:0;}

/* ---------- Toolbar format isi berita ---------- */
.rte-bar{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px; border:1px solid #D8DFE8; border-bottom:none; border-radius:8px 8px 0 0; background:#F4F6F9;}
.rte-font{padding:6px 8px; border:1px solid #D8DFE8; border-radius:6px; background:#fff; font-size:13.5px;}
.rte-btn{min-width:34px; height:32px; padding:0 8px; border:1px solid #D8DFE8; border-radius:6px; background:#fff; cursor:pointer; font-size:13.5px;}
.rte-btn:hover{background:var(--green-soft); border-color:var(--green);}
.rte-sep{width:1px; height:22px; background:#D8DFE8; margin:0 4px;}
.editor{min-height:190px; border:1px solid #D8DFE8; border-radius:0 0 8px 8px; background:#fff; padding:12px 14px; font-size:15px; line-height:1.7; overflow:auto;}
.editor:focus{outline:2px solid var(--green); outline-offset:-1px;}
.editor:empty::before{content:attr(data-ph); color:#96A39B;}
.editor p{margin:0 0 10px;}

/* ----- Kategori: pilih langsung via klik (bisa banyak) ----- */
.kat-selected{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:2px 0 8px; padding:9px 12px; background:#F4F6F9; border:1px dashed #C7D3E0; border-radius:10px;}
.kat-sel-label{font-size:.82rem; font-weight:700; color:#51637a; flex:none;}
.kat-sel-chips{display:inline-flex; flex-wrap:wrap; gap:6px;}
.kat-item{cursor:pointer; user-select:none;}
.kat-item:hover{border-color:var(--green); color:var(--green);}
.kat-on{background:var(--green); color:#fff; border-color:var(--green);}
.kat-on:hover{background:var(--green-dark); border-color:var(--green-dark); color:#fff;}
.kat-on .kat-x{color:#fff;}
.hint-inline{font-size:.8rem; color:#8a97a5; font-style:italic;}

/* ----- Input tanggal nonaktif (absolut) ----- */
.field input[disabled]{background:#F0F3F6; color:#6b7683; cursor:not-allowed;}

/* ----- Toolbar editor: baris bisa melipat + ikon SVG ----- */
.rte-bar{flex-wrap:wrap;}
.rte-btn svg{width:14px; height:14px; fill:currentColor; display:block;}
.rte-btn sub,.rte-btn sup{font-size:.62em;}

/* ----- Daftar di dalam editor & isi berita ----- */
.editor ul,.editor ol{margin:8px 0; padding-left:26px;}
.editor li{margin:3px 0;}

/* Dropdown List di toolbar editor: inline, tidak melebar penuh */
.field .rte-bar select.rte-font{width:auto; min-width:118px; padding:5px 9px; font-size:13.5px; border:1px solid var(--border); border-radius:8px; background:#fff; height:30px;}

/* ---------- Mode admin: sembunyikan kerangka situs publik ---------- */
body.admin-mode .topstrip,
body.admin-mode header.site,
body.admin-mode footer.site,
body.admin-mode .to-top{display:none;}
body.admin-mode #app{min-height:100vh; padding-top:28px;}

/* ---------- Tombol aksi kepala panel ---------- */
.admin-actions{display:flex; gap:10px; align-items:center; flex:none;}

/* ---------- Dialog konfirmasi keluar ---------- */
.confirm-overlay{position:fixed; inset:0; background:rgba(15,25,40,.55); display:flex; align-items:center; justify-content:center; z-index:300; padding:24px;}
.confirm-box{background:#fff; border-radius:12px; padding:24px 26px; max-width:360px; width:100%; box-shadow:var(--shadow-md); text-align:center;}
.confirm-box p{font-size:15px; font-weight:600; margin-bottom:18px;}
.confirm-actions{display:flex; gap:10px; justify-content:center;}
.confirm-actions .btn{min-width:90px;}