:root{
  --red:#dc2626; --red-dark:#991b1b; --black:#0f0f0f; --sidebar:#111827; --sidebar-2:#0b1220;
}
*{box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f3f4f6;margin:0;color:#111}

/* Login */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#111 0%,#dc2626 100%);padding:20px}
.login-card{background:#fff;padding:32px;border-radius:14px;width:100%;max-width:400px}
.login-logo{max-width:120px}

/* App layout */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--sidebar);color:#cbd5e1;display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:1030;transition:transform .2s}
.sidebar .brand{display:flex;gap:10px;align-items:center;padding:16px;border-bottom:1px solid #1f2937;background:var(--sidebar-2)}
.sidebar .brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.brand-title{font-weight:700;color:#fff;font-size:14px}
.brand-sub{font-size:11px;color:#94a3b8}
.menu{display:flex;flex-direction:column;padding:10px}
.menu a{color:#cbd5e1;text-decoration:none;padding:10px 14px;border-radius:8px;margin-bottom:2px;font-size:14px}
.menu a:hover{background:#1f2937;color:#fff}
.menu a.active{background:var(--red);color:#fff}

.main{margin-left:240px;flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;padding:12px 20px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}
.content{padding:20px;flex:1}
.footer{border-top:1px solid #e5e7eb;background:#fff}

/* Cards */
.stat-card{background:#fff;border-left:4px solid var(--red);padding:18px;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.stat-card .num{font-size:28px;font-weight:700;color:var(--black)}
.stat-card .label{color:#6b7280;font-size:13px;text-transform:uppercase;letter-spacing:.5px}

.btn-danger,.btn-primary{background:var(--red);border-color:var(--red)}
.btn-danger:hover,.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.text-danger{color:var(--red)!important}
.badge-program{background:var(--red);color:#fff;margin:2px;display:inline-block}

@media (max-width: 768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .main{margin-left:0}
}

@media print{
  .sidebar,.topbar,.footer,.no-print{display:none!important}
  .main{margin:0}
  .content{padding:0}
}