/* Karyan Admin Panel – Stylesheet */
:root {
  --navy: #1a1a1a; --navy-light: #2a2a2a; --gold: #b5651d;
  --white: #fff; --bg: #f1f5f9; --surface: #fff;
  --text: #1e293b; --muted: #64748b; --border: #e2e8f0;
  --success: #16a34a; --error: #dc2626; --warning: #d97706;
  --font: 'Inter', system-ui, sans-serif;
  --radius: 8px; --shadow: 0 1px 8px rgba(0,0,0,.08);
  --sidebar-w: 240px;
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* Sidebar */
.admin-sidebar {
  position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w);
  background:var(--navy); display:flex; flex-direction:column; z-index:100;
  overflow-y:auto;
}
.sidebar-brand {
  padding:24px 20px; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand h1 { font-size:16px; color:var(--gold); font-weight:700; }
.sidebar-brand span { font-size:11px; color:rgba(255,255,255,.35); display:block; margin-top:2px; }
.sidebar-nav { flex:1; padding:16px 0; }
.sidebar-nav a {
  display:flex; align-items:center; gap:12px;
  padding:11px 20px; color:rgba(255,255,255,.65);
  font-size:13.5px; font-weight:500; transition:background .15s, color .15s;
  border-left:3px solid transparent;
}
.sidebar-nav a:hover { background:rgba(255,255,255,.05); color:var(--white); }
.sidebar-nav a.active { background:rgba(201,168,76,.1); color:var(--gold); border-left-color:var(--gold); }
.sidebar-nav a svg { flex-shrink:0; opacity:.7; }
.sidebar-nav a.active svg { opacity:1; }
.sidebar-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer a { color:rgba(255,255,255,.4); font-size:12px; }
.sidebar-footer a:hover { color:var(--white); }

/* Main */
.admin-main { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.admin-topbar {
  background:var(--white); border-bottom:1px solid var(--border);
  padding:0 32px; height:60px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:18px; font-weight:700; color:var(--text); }
.topbar-actions { display:flex; align-items:center; gap:16px; }
.topbar-actions a { font-size:13px; color:var(--muted); }
.topbar-actions a:hover { color:var(--text); }
.admin-content { flex:1; padding:32px; }

/* Cards */
.card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); }
.card-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-header h2 { font-size:16px; font-weight:700; }
.card-body { padding:24px; }

/* Stats */
.stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
.stat-card { background:var(--surface); border-radius:var(--radius); padding:20px 24px; box-shadow:var(--shadow); border:1px solid var(--border); }
.stat-card .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.stat-card .value { font-size:28px; font-weight:700; color:var(--navy); }
.stat-card .delta { font-size:12px; color:var(--success); margin-top:4px; }

/* Table */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:12px 16px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border-bottom:2px solid var(--border); background:var(--bg); }
.data-table td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:13.5px; }
.data-table tr:hover td { background:#f8fafc; }
.data-table tr.unread td { background:#fffbeb; }

/* Badge */
.badge { display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.badge-new  { background:#fef3c7; color:#92400e; }
.badge-read { background:#f1f5f9; color:#64748b; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 18px; border-radius:var(--radius); font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:var(--font); transition:background .2s; }
.btn-primary { background:var(--navy); color:var(--white); }
.btn-primary:hover { background:var(--navy-light); }
.btn-gold { background:var(--gold); color:var(--navy); }
.btn-gold:hover { background:#dfc06a; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-danger { background:#fee2e2; color:var(--error); }
.btn-danger:hover { background:#fecaca; }

/* Forms */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:10px 14px; font-size:14px; font-family:var(--font);
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--white); color:var(--text); transition:border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.15); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-hint { font-size:12px; color:var(--muted); margin-top:4px; }

/* Alerts */
.alert { padding:12px 16px; border-radius:var(--radius); font-size:13px; margin-bottom:20px; }
.alert-success { background:#f0fdf4; color:var(--success); border:1px solid #bbf7d0; }
.alert-error   { background:#fef2f2; color:var(--error);   border:1px solid #fecaca; }

/* Pagination */
.pagination { display:flex; gap:4px; }
.page-btn { width:34px; height:34px; border-radius:var(--radius); border:1px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; font-family:var(--font); transition:background .15s; }
.page-btn:hover { background:var(--bg); }
.page-btn.active { background:var(--navy); color:var(--white); border-color:var(--navy); }

/* Login */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); }
.login-box { background:var(--white); border-radius:12px; padding:48px 40px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo { font-size:22px; font-weight:700; color:var(--navy); margin-bottom:6px; text-align:center; }
.login-logo span { color:var(--gold); }
.login-sub { text-align:center; font-size:13px; color:var(--muted); margin-bottom:32px; }

/* Responsive */
@media(max-width:1024px) { .stat-cards { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
  .admin-sidebar { transform:translateX(-100%); transition:transform .3s; }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-main { margin-left:0; }
  .form-row { grid-template-columns:1fr; }
}