/* Admin panel — memakai token yang sama dengan style.css */
body.admin{ background:var(--bg); min-height:100vh; }

/* Login */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{
  width:100%; max-width:380px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:40px 34px;
  box-shadow:var(--shadow-card);
}
/* Tombol kembali ke beranda (halaman login admin) */
.login-mark{ width:40px; height:40px; margin-bottom:20px; }
/* Tombol kembali ke beranda (halaman login admin) */
.btn-back-home svg{ transition:transform .2s var(--ease); }
.btn-back-home:hover svg{ transform:translateX(-3px); }
.login-card h1{ font-size:1.35rem; }
.login-card p.sub{ color:var(--text-mid); font-size:.86rem; margin-top:8px; }
.login-card form{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.login-error{ margin-top:16px; padding:11px 14px; border-radius:var(--radius-sm); background:rgba(220,80,80,.08); border:1px solid #c94040; color:#c94040; font-size:.84rem; }

/* Shell */
.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.admin-side{ background:var(--surface); border-right:1px solid var(--line); padding:26px 20px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.admin-side .brand{ font-size:1rem; margin-bottom:36px; color:var(--accent-text); }
.admin-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1; }
.admin-nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); font-size:.88rem; color:var(--text-mid); transition:background .2s, color .2s; }
.admin-nav a.active, .admin-nav a:hover{ background:var(--elevated); color:var(--text-hi); }
.admin-nav svg{ width:17px; height:17px; }
.admin-side .logout-link{ font-size:.84rem; color:var(--text-low); padding:10px 12px; }
.admin-side .logout-link:hover{ color:#c94040; }

.admin-main{ padding:34px 40px; max-width:100%; overflow-x:auto; }
.admin-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
.admin-header h1{ font-size:1.5rem; }
.admin-header p{ color:var(--text-mid); margin-top:6px; font-size:.88rem; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px; }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-card); }
.stat-card span{ font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-low); }
.stat-card strong{ display:block; font-family:var(--font-display); font-size:1.7rem; margin-top:8px; }
@media (max-width:980px){ .stat-row{ grid-template-columns:1fr 1fr; } }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap; }
.panel-head h2{ font-size:1rem; }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-row select, .filter-row input{ background:var(--surface); border:1px solid var(--line-strong); color:var(--text-hi); padding:8px 12px; border-radius:var(--radius-sm); font-size:.84rem; font-family:inherit; }

table.orders-table{ width:100%; border-collapse:collapse; min-width:900px; }
.orders-table th{ text-align:left; font-family:var(--font-display); font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-low); padding:13px 22px; border-bottom:1px solid var(--line); white-space:nowrap; }
.orders-table td{ padding:15px 22px; border-bottom:1px solid var(--line); font-size:.87rem; vertical-align:top; }
.orders-table tr:last-child td{ border-bottom:none; }
.orders-table tr:hover{ background:var(--elevated); }
.cell-name strong{ display:block; }
.cell-name span{ color:var(--text-low); font-size:.8rem; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:.74rem; font-weight:600; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge.baru{ background:var(--accent-2-dim); color:var(--accent-2-hover); } .badge.baru::before{ background:var(--accent-2); }
.badge.dihubungi{ background:var(--accent-dim); color:var(--accent-text); } .badge.dihubungi::before{ background:var(--accent-text); }
.badge.diproses{ background:var(--accent-2-dim); color:var(--accent-2-hover); } .badge.diproses::before{ background:var(--accent-2); }
.badge.selesai{ background:var(--accent-dim); color:var(--accent-text); } .badge.selesai::before{ background:var(--accent-text); }
.badge.dibatalkan{ background:rgba(220,80,80,.1); color:#c94040; } .badge.dibatalkan::before{ background:#c94040; }

.status-select{ background:var(--surface); border:1px solid var(--line-strong); color:var(--text-hi); padding:7px 10px; border-radius:var(--radius-sm); font-size:.8rem; font-family:inherit; }
.row-actions{ display:flex; gap:8px; }
.icon-btn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text-mid); transition:color .2s, border-color .2s; }
.icon-btn:hover{ color:var(--accent-text); border-color:var(--accent-text); }
.icon-btn svg{ width:15px; height:15px; }

.empty-state{ padding:56px 24px; text-align:center; color:var(--text-mid); }
.empty-state svg{ width:40px; height:40px; color:var(--text-low); margin-bottom:14px; }

/* modal detail */
.modal-backdrop{ position:fixed; inset:0; background:rgba(20,20,30,.5); display:none; align-items:center; justify-content:center; z-index:200; padding:24px; }
.modal-backdrop.open{ display:flex; }
.modal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); max-width:500px; width:100%; padding:30px; max-height:86vh; overflow-y:auto; box-shadow:var(--shadow-card); }
.modal-card h3{ font-size:1.1rem; margin-bottom:18px; }
.modal-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.87rem; }
.modal-row span:first-child{ color:var(--text-low); }
.modal-row span:last-child{ text-align:right; max-width:60%; }
.modal-close{ margin-top:22px; }

@media (max-width:900px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-side{ position:relative; height:auto; flex-direction:row; align-items:center; padding:14px 18px; }
  .admin-side .brand{ margin-bottom:0; margin-right:auto; }
  .admin-nav{ flex-direction:row; }
  .admin-main{ padding:22px; }
}