@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --primary:    #0f172a;
  --primary-2:  #1e293b;
  --accent:     #6366f1;
  --accent-2:   #4f46e5;
  --accent-light: #e0e7ff;
  --success:    #22c55e;
  --warning:    #f59e0b;
  --error:      #ef4444;
  --surface:    #f8fafc;
  --border:     #e2e8f0;
  --text:       #0f172a;
  --text-muted: #64748b;
  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  20px;
  --gap:        8px;
}

* { margin:0; padding:0; box-sizing:border-box; outline:none; text-decoration:none; }
body { font-family:"Open Sans", sans-serif; font-size:15px; font-weight:400; line-height:1.6; color:var(--text); background:var(--surface); overflow-x:hidden; }
a { color:inherit; transition:.2s; }
img { max-width:100%; height:auto; display:block; }

/* ─── Layout ──────────────────────────────────────────── */
#main { display:flex; min-height:100vh; }
#sidebar { width:240px; flex:0 0 240px; background:var(--primary); color:rgba(255,255,255,.65); padding:28px 0; display:flex; flex-direction:column; gap:40px; position:sticky; top:0; height:100vh; overflow-y:auto; }
#content { flex:1; min-width:0; padding:28px; display:flex; flex-direction:column; gap:24px; }

/* ─── Sidebar ─────────────────────────────────────────── */
.sidebar-brand { padding:0 20px; display:flex; flex-direction:column; gap:4px; }
.sidebar-brand .logo-text { font-size:18px; font-weight:800; color:#fff; letter-spacing:-.4px; }
.sidebar-brand .logo-sub { font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.5; }

.sidebar-section { display:flex; flex-direction:column; gap:2px; }
.sidebar-section-title { font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.4; padding:0 20px; margin-bottom:4px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:9px 20px; color:rgba(255,255,255,.6); font-size:14px; font-weight:600; border-left:3px solid transparent; transition:.18s; }
.sidebar-item i { width:18px; text-align:center; }
.sidebar-item:hover, .sidebar-item.active { color:#fff; border-left-color:var(--accent); background:rgba(255,255,255,.04); }

.sidebar-footer { margin-top:auto; padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; }
.sidebar-footer .admin-name { color:#fff; font-weight:700; font-size:14px; }
.sidebar-footer .admin-role { margin-top:2px; font-size:11px; opacity:.5; text-transform:uppercase; letter-spacing:.06em; }
.sidebar-footer a.logout-link { display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:rgba(255,255,255,.5); font-size:13px; transition:.2s; }
.sidebar-footer a.logout-link:hover { color:var(--error); }

/* ─── Topbar ──────────────────────────────────────────── */
.topbar { display:flex; align-items:center; justify-content:space-between; }
.topbar h1 { font-size:22px; font-weight:800; color:var(--text); margin:0; }
.topbar .breadcrumb { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* ─── Cards ───────────────────────────────────────────── */
.card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:20px; }
.card-title { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.card-title i { color:var(--accent); }

/* ─── Stat cards ──────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
.stat-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:20px 20px 16px; display:flex; flex-direction:column; gap:6px; }
.stat-card .stat-label { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-card .stat-value { font-size:32px; font-weight:800; line-height:1; color:var(--text); }
.stat-card .stat-sub { font-size:12px; color:var(--text-muted); }
.stat-card .stat-icon { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:4px; }
.stat-card .stat-icon.purple { background:var(--accent-light); color:var(--accent); }
.stat-card .stat-icon.green  { background:#dcfce7; color:#16a34a; }
.stat-card .stat-icon.amber  { background:#fef3c7; color:#d97706; }
.stat-card .stat-icon.red    { background:#fee2e2; color:#dc2626; }

/* ─── Table ───────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th { text-align:left; padding:10px 12px; background:#f1f5f9; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); border-bottom:1px solid var(--border); }
tbody tr { border-bottom:1px solid var(--border); transition:.15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#f8fafc; }
tbody td { padding:11px 12px; vertical-align:middle; }

/* ─── Badges ──────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.4; gap:4px; }
.badge.active   { background:#dcfce7; color:#15803d; }
.badge.inactive { background:#fee2e2; color:#b91c1c; }
.badge.support  { background:#e0e7ff; color:#4338ca; }
.badge.superadmin { background:#fef3c7; color:#b45309; }
.badge.executed { background:#f1f5f9; color:#475569; }
.badge.pending  { background:#fef9c3; color:#854d0e; }
.badge.outdated { background:#fee2e2; color:#b91c1c; }
.badge.up-to-date { background:#dcfce7; color:#15803d; }

/* ─── Buttons ─────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius); font-size:14px; font-weight:700; border:none; cursor:pointer; transition:.2s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); }
.btn-sm { padding:6px 14px; font-size:13px; border-radius:var(--radius-sm); }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover { background:#f1f5f9; color:var(--text); }
.btn-danger { background:var(--error); color:#fff; }
.btn-danger:hover { background:#b91c1c; }

/* ─── Form ────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:13px; font-weight:700; color:var(--text); }
.form-group input, .form-group select, .form-group textarea {
  font-family:"Open Sans", sans-serif; font-size:15px; padding:10px 14px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff;
  color:var(--text); transition:.2s; width:100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.form-error { color:var(--error); font-size:13px; font-weight:600; }

/* ─── Login page ──────────────────────────────────────── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--primary); padding:20px; }
.login-box { background:#fff; border-radius:var(--radius-lg); padding:48px 44px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.login-box .login-brand { margin-bottom:32px; }
.login-box .login-brand .brand-name { font-size:20px; font-weight:800; color:var(--text); }
.login-box .login-brand .brand-sub { font-size:13px; color:var(--text-muted); margin-top:4px; }
.login-box h2 { font-size:24px; font-weight:800; color:var(--text); margin-bottom:24px; }
.login-box form { display:flex; flex-direction:column; gap:16px; }
.login-error { background:#fee2e2; color:#b91c1c; border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; font-weight:600; }
.login-footer { margin-top:16px; text-align:center; font-size:12px; color:var(--text-muted); }

/* ─── Alert ───────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.alert-error   { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.alert-info    { background:#e0e7ff; color:#3730a3; border:1px solid #c7d2fe; }

/* ─── Misc ────────────────────────────────────────────── */
.text-muted { color:var(--text-muted); }
.text-sm { font-size:13px; }
.mt-xs { margin-top:4px; }
.mt-sm { margin-top:8px; }
.mt-md { margin-top:16px; }
.mt-lg { margin-top:24px; }
.flex { display:flex; }
.gap-sm { gap:8px; }
.gap-md { gap:16px; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.w-full { width:100%; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  #sidebar { display:none; }
  #content { padding:16px; }
  .form-row, .grid-2, .grid-3, .stats-grid { grid-template-columns:1fr; }
}