body { background: #f4f6fb; font-family: 'Segoe UI', system-ui, sans-serif; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a237e, #3949ab); }
.login-card { width: 380px; }
.sidebar { width: 200px; min-height: calc(100vh - 56px); }
.sidebar .nav-link { border-radius: 8px; margin-bottom: 2px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.15); }
.kpi-card { border-left: 4px solid #3949ab; }
.kpi-card .kpi-num { font-size: 1.9rem; font-weight: 700; color: #1a237e; }
.kpi-card .kpi-label { color: #666; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }
.table th { font-size: .8rem; text-transform: uppercase; color: #666; }
.badge-conf { background: #e8eaf6; color: #283593; }
.alert-row td { vertical-align: middle; }
.upload-drop { border: 2px dashed #3949ab; border-radius: 12px; padding: 2rem; text-align: center; color: #3949ab; cursor: pointer; background: #eef1ff; }
.upload-drop:hover { background: #e3e8ff; }

/* Mobile: off-canvas sidebar */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 1040;
    width: 220px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.25); }
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 1035;
    background: rgba(0,0,0,.45);
  }
  #sidebar-backdrop.show { display: block; }
  main { padding: 1rem !important; }
}
@media (min-width: 768px) { #sidebar-backdrop { display: none; } }

/* Prevent wide tables from stretching the layout on small screens */
main { min-width: 0; }
.card { overflow-x: auto; }
html, body { overflow-x: hidden; }