/* ===== ADMIN PANEL STYLESHEET ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --gold: #8B6914;
  --gold-l: #D4A017;
  --green: #2C5F2E;
  --sidebar-bg: #0E0C06;
  --sidebar-w: 240px;
  --bg: #F5F0E8;
  --card: #FFFFFF;
  --border: #E5DDD0;
  --text: #1A1208;
  --muted: #7A6A50;
  --danger: #c0392b;
  --success: #27ae60;
  --radius: 8px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); }

/* LAYOUT */
.admin-wrap { display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar { width:var(--sidebar-w); background:var(--sidebar-bg); position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:100; display:flex; flex-direction:column; }
.sidebar-logo { padding:24px 20px; border-bottom:1px solid rgba(255,255,255,0.07); }
.sidebar-logo .s-name { font-size:1rem; font-weight:600; color:#fff; }
.sidebar-logo .s-sub  { font-size:0.7rem; color:rgba(255,255,255,0.4); margin-top:2px; }
.sidebar-logo .s-badge { font-size:0.65rem; background:var(--gold); color:#fff; padding:2px 8px; border-radius:4px; margin-top:8px; display:inline-block; }
nav.sidebar-nav { flex:1; padding:16px 0; }
nav.sidebar-nav a { display:flex; align-items:center; gap:10px; padding:11px 20px; color:rgba(255,255,255,0.5); font-size:0.83rem; font-weight:500; transition:background 0.2s,color 0.2s; text-decoration:none; }
nav.sidebar-nav a:hover { background:rgba(255,255,255,0.05); color:#fff; }
nav.sidebar-nav a.active { background:rgba(139,105,20,0.2); color:var(--gold-l); border-right:3px solid var(--gold-l); }
nav.sidebar-nav .nav-section { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.2); padding:12px 20px 6px; }
.sidebar-footer { padding:20px; border-top:1px solid rgba(255,255,255,0.07); }
.sidebar-footer a { color:rgba(255,255,255,0.4); font-size:0.78rem; text-decoration:none; display:block; }
.sidebar-footer a:hover { color:#fff; }

/* MAIN */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; }
.topbar { background:var(--card); border-bottom:1px solid var(--border); padding:0 28px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:90; }
.topbar h1 { font-size:1.05rem; font-weight:600; color:var(--text); }
.topbar-right { display:flex; align-items:center; gap:16px; }
.admin-badge { background:var(--gold); color:#fff; font-size:0.72rem; padding:4px 12px; border-radius:100px; font-weight:600; }

.page-body { padding:28px; flex:1; }

/* CARDS */
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-header h2 { font-size:0.95rem; font-weight:600; }
.card-body { padding:20px; }

/* STAT CARDS */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; }
.stat-icon { font-size:1.6rem; margin-bottom:12px; }
.stat-val { font-size:1.8rem; font-weight:600; color:var(--text); line-height:1; }
.stat-lbl { font-size:0.75rem; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.06em; }

/* TABLES */
.data-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.data-table th { text-align:left; padding:10px 14px; background:var(--bg); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:600; }
.data-table td { padding:12px 14px; border-top:1px solid var(--border); vertical-align:middle; }
.data-table tr:hover td { background:#fdfaf4; }
.badge { display:inline-block; font-size:0.7rem; padding:3px 10px; border-radius:100px; font-weight:600; }
.badge-green { background:#d4edda; color:#155724; }
.badge-red { background:#f8d7da; color:#721c24; }
.badge-gold { background:#fff3cd; color:#856404; }

/* FORMS */
.form-grid { display:grid; gap:18px; }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.fgroup label { display:block; font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.fgroup input, .fgroup textarea, .fgroup select { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:0.88rem; color:var(--text); background:#fff; transition:border-color 0.2s; outline:none; }
.fgroup input:focus, .fgroup textarea:focus, .fgroup select:focus { border-color:var(--gold); }
.fgroup textarea { resize:vertical; min-height:90px; }
.form-hint { font-size:0.72rem; color:var(--muted); margin-top:4px; }

/* BUTTONS */
.btn-sm { padding:7px 16px; border-radius:var(--radius); font-size:0.78rem; font-weight:600; border:1.5px solid transparent; cursor:pointer; transition:all 0.2s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-primary { background:var(--gold); color:#fff; border-color:var(--gold); }
.btn-primary:hover { background:var(--gold-l); border-color:var(--gold-l); }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { opacity:0.85; }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-success { background:var(--success); color:#fff; border-color:var(--success); }

/* ALERTS */
.alert { padding:12px 16px; border-radius:var(--radius); font-size:0.85rem; margin-bottom:16px; }
.alert-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.alert-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }

/* IMAGE PREVIEW */
.img-preview { width:64px; height:64px; border-radius:8px; object-fit:cover; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }

/* TOGGLE */
.toggle { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.toggle input { display:none; }
.toggle-track { width:40px; height:22px; border-radius:11px; background:var(--border); transition:background 0.2s; position:relative; }
.toggle input:checked + .toggle-track { background:var(--success); }
.toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform 0.2s; }
.toggle input:checked + .toggle-track::after { transform:translateX(18px); }
.toggle-lbl { font-size:0.82rem; font-weight:500; }

/* RESPONSIVE */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .main-content { margin-left:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-grid-2 { grid-template-columns:1fr; }
}

/* LOGIN PAGE */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sidebar-bg); }
.login-box { background:#1A1208; border:1px solid rgba(139,105,20,0.3); border-radius:16px; padding:48px 40px; width:100%; max-width:400px; text-align:center; }
.login-box .logo-mark { width:60px; height:60px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; margin:0 auto 20px; font-weight:700; }
.login-box h1 { color:#fff; font-size:1.4rem; margin-bottom:4px; }
.login-box .sub { color:rgba(255,255,255,0.4); font-size:0.85rem; margin-bottom:32px; }
.login-box .fgroup label { color:rgba(255,255,255,0.6); }
.login-box .fgroup input { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.1); color:#fff; }
.login-box .fgroup input:focus { border-color:var(--gold); }
.login-box .fgroup input::placeholder { color:rgba(255,255,255,0.25); }
.login-btn { width:100%; padding:12px; border-radius:var(--radius); background:var(--gold); color:#fff; font-size:0.95rem; font-weight:600; border:none; cursor:pointer; margin-top:8px; transition:background 0.2s; }
.login-btn:hover { background:var(--gold-l); }
.login-error { background:rgba(220,53,69,0.15); border:1px solid rgba(220,53,69,0.3); color:#ff8080; border-radius:var(--radius); padding:10px 14px; font-size:0.83rem; margin-bottom:16px; }