/* ============================================================
   Dramaly Admin — dark mode, konsisten dengan brand tokens
   situs publik (--bg, --accent, dst dari index.html existing)
   supaya admin terasa satu produk, bukan tool generik terpisah.
   ============================================================ */
:root{
  --bg:#0a0a0a;
  --bg-raised:#151513;
  --bg-card:#1a1a17;
  --accent:#D5FF40;
  --accent-dim:#c2ec2e;
  --text:#ffffff;
  --text-dim:#C0C2B8;
  --text-dimmer:#75766d;
  --border:#2a2a26;
  --danger:#ff5c5c;
  --warn:#ffb020;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:"Poppins", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea{font-family:inherit;}
input, select, textarea{
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
  border-radius:4px; padding:10px 12px; font-size:14px; width:100%;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent);}
button{cursor:pointer; border:none; border-radius:4px; font-weight:600;}

/* ---------- Login ---------- */
.login-view{min-height:100vh; display:flex; align-items:center; justify-content:center;}
.login-card{
  width:320px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:8px; padding:32px; display:flex; flex-direction:column; gap:12px;
}
.login-card h1{color:var(--accent); font-size:22px; font-weight:800;}
.login-card .sub{color:var(--text-dim); font-size:13px; margin-bottom:8px;}
.login-card button{background:var(--accent); color:#0a0a0a; padding:11px; font-size:14px;}
.login-card button:hover{background:var(--accent-dim);}
.error-text{color:var(--danger); font-size:12.5px; min-height:16px;}

/* ---------- App shell ---------- */
.app-view{display:flex; min-height:100vh;}
.sidebar{
  width:220px; flex:0 0 220px; background:var(--bg-card);
  border-right:1px solid var(--border); padding:24px 0; display:flex; flex-direction:column;
}
.sidebar .brand{color:var(--accent); font-weight:800; font-size:20px; padding:0 24px 24px;}
.sidebar nav{display:flex; flex-direction:column; gap:2px;}
.sidebar nav a{
  color:var(--text-dim); text-decoration:none; padding:11px 24px; font-size:14px; font-weight:500;
  border-left:3px solid transparent; cursor:pointer;
}
.sidebar nav a:hover{color:var(--text); background:rgba(255,255,255,.03);}
.sidebar nav a.active{color:var(--accent); border-left-color:var(--accent); background:rgba(213,255,64,.06);}
.sidebar .logout{margin-top:auto; padding:11px 24px; color:var(--text-dimmer); font-size:13px; cursor:pointer;}
.sidebar .logout:hover{color:var(--danger);}

.content{flex:1; padding:32px 40px; overflow-y:auto;}
.content h2{font-size:22px; font-weight:700; margin-bottom:20px;}

/* ---------- Dashboard cards ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:32px;}
.stat-card{background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:18px;}
.stat-card .label{color:var(--text-dim); font-size:12.5px; margin-bottom:6px;}
.stat-card .value{font-size:26px; font-weight:800; color:var(--accent);}

/* ---------- Table ---------- */
.toolbar{display:flex; gap:10px; margin-bottom:16px; align-items:center;}
.toolbar input[type="text"]{max-width:280px;}
.toolbar .spacer{flex:1;}
table{width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden;}
th, td{text-align:left; padding:12px 14px; font-size:13.5px; border-bottom:1px solid var(--border);}
th{color:var(--text-dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,.02);}
.badge{padding:3px 8px; border-radius:3px; font-size:11px; font-weight:700;}
.badge-active{background:rgba(213,255,64,.15); color:var(--accent);}
.badge-draft{background:rgba(255,176,32,.15); color:var(--warn);}
.badge-trash{background:rgba(255,92,92,.15); color:var(--danger);}
.row-actions{display:flex; gap:8px;}
.btn-sm{padding:6px 10px; font-size:12.5px; background:rgba(255,255,255,.06); color:var(--text);}
.btn-sm:hover{background:rgba(255,255,255,.12);}
.btn-sm.danger{color:var(--danger);}
.btn-sm.accent{background:var(--accent); color:#0a0a0a;}
.pagination{display:flex; gap:8px; margin-top:16px; justify-content:flex-end;}

/* ---------- Form ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px;}
.form-grid .full{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; color:var(--text-dim); font-weight:600;}
.field-help{font-size:11.5px; color:var(--text-dimmer);}
.form-actions{display:flex; gap:10px; margin-top:24px;}
.btn-primary{background:var(--accent); color:#0a0a0a; padding:11px 22px;}
.btn-primary:hover{background:var(--accent-dim);}
.btn-secondary{background:rgba(255,255,255,.08); color:#fff; padding:11px 22px;}

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--bg-card); border:1px solid var(--border);
  border-left:3px solid var(--accent); padding:12px 18px; border-radius:6px; font-size:13.5px; z-index:100;
}
.toast.error{border-left-color:var(--danger);}

@media (max-width:768px){
  .app-view{flex-direction:column;}
  .sidebar{width:100%; flex:none; flex-direction:row; overflow-x:auto; padding:12px;}
  .sidebar .brand{display:none;}
  .sidebar nav{flex-direction:row;}
  .sidebar .logout{display:none;}
  .content{padding:20px;}
  .form-grid{grid-template-columns:1fr;}
}