:root {
    --blue-900: #073b7a;
    --blue-800: #075aa8;
    --blue-700: #0d6efd;
    --blue-100: #eaf3ff;
    --blue-50: #f5f9ff;
    --dark: #14213d;
    --muted: #6c757d;
    --border: #dce7f5;
    --body: #f4f8fd;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--body); color: var(--dark); }
a { text-decoration: none; }

.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 20%, rgba(13,110,253,.18), transparent 25%),
        radial-gradient(circle at 80% 0%, rgba(0,180,216,.22), transparent 25%),
        linear-gradient(135deg, #e9f4ff 0%, #f8fbff 50%, #dbeeff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-wrapper { width: 100%; max-width: 450px; }
.login-card { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; padding: 36px; }
.brand-badge { width: 76px; height: 76px; border-radius: 24px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--blue-700), #00a6fb); color:white; font-size: 34px; box-shadow: 0 20px 30px rgba(13,110,253,.25); }
.login-info { background: var(--blue-100); color: var(--blue-900); padding: 12px 16px; border-radius: 16px; font-size: 14px; }
.login-footer { position: fixed; bottom: 16px; color: var(--blue-900); font-size: 13px; text-align:center; width: 100%; }

.app-shell { min-height: 100vh; padding-left: 280px; display: flex; flex-direction: column; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; background: linear-gradient(180deg, var(--blue-900), var(--blue-800)); color: white; z-index: 1040; overflow-y: auto; box-shadow: 8px 0 32px rgba(7,59,122,.18); }
.sidebar-brand { display:flex; align-items:center; gap: 14px; padding: 24px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sidebar-logo { width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size: 24px; }
.brand-title { font-weight: 800; letter-spacing: .8px; line-height: 1; }
.sidebar-brand small { opacity: .78; letter-spacing: 3px; }
.sidebar-menu { padding: 14px; }
.sidebar-menu a { display:flex; align-items:center; gap: 12px; color: rgba(255,255,255,.86); padding: 12px 14px; border-radius: 16px; margin-bottom: 6px; transition: .2s; }
.sidebar-menu a i { width: 22px; font-size: 18px; }
.sidebar-menu a:hover, .sidebar-menu a.active { background: rgba(255,255,255,.15); color: #fff; transform: translateX(3px); }
.sidebar-menu .logout-link:hover { background: rgba(255, 82, 82, .25); }
.menu-label { color: rgba(255,255,255,.54); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 18px 12px 8px; }

.topbar { min-height: 92px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 18px 28px; position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(12px); }
.topbar h1 { font-size: 24px; font-weight: 800; margin: 0; color: var(--blue-900); }
.topbar p { margin: 4px 0 0; color: var(--muted); }
.topbar-user { display:flex; align-items:center; gap: 12px; background: var(--blue-50); border: 1px solid var(--border); padding: 9px 12px; border-radius: 18px; }
.avatar { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, var(--blue-700), #00a6fb); color: white; display:flex; align-items:center; justify-content:center; }

.content-area { flex: 1; padding: 28px; }
.card-modern { border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 14px 35px rgba(7,59,122,.07); background: #fff; }
.stat-card { border: 1px solid var(--border); border-radius: 24px; padding: 22px; background: linear-gradient(135deg, #fff, var(--blue-50)); box-shadow: 0 14px 35px rgba(7,59,122,.07); height: 100%; }
.stat-icon { width: 52px; height: 52px; border-radius: 18px; background: var(--blue-100); color: var(--blue-700); display:flex; align-items:center; justify-content:center; font-size: 25px; }
.stat-label { color: var(--muted); font-size: 14px; }
.stat-value { font-weight: 800; font-size: 26px; color: var(--blue-900); }

.table { vertical-align: middle; }
.table thead th { background: var(--blue-100); color: var(--blue-900); border-color: var(--border); white-space: nowrap; }
.table tbody td { border-color: #edf3fb; }
.form-control, .form-select { border-radius: 14px; border-color: var(--border); padding: 10px 14px; }
.form-control:focus, .form-select:focus { border-color: var(--blue-700); box-shadow: 0 0 0 .2rem rgba(13,110,253,.12); }
.btn { border-radius: 14px; font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, var(--blue-700), #0096c7); border: 0; }
.badge-soft { background: var(--blue-100); color: var(--blue-900); border-radius: 999px; padding: 6px 10px; }
.badge-danger-soft { background: #ffe8e8; color: #b42318; border-radius: 999px; padding: 6px 10px; }

.app-footer { text-align:center; padding: 18px 28px; color: var(--muted); border-top: 1px solid var(--border); background: #fff; font-size: 13px; }
.print-header { display:none; }
.signature-box { height: 110px; border-bottom: 1px solid #333; margin-top: 54px; }

@media (max-width: 991.98px) {
    .app-shell { padding-left: 0; }
    .sidebar { transform: translateX(-100%); transition: .25s ease; }
    .sidebar.show { transform: translateX(0); }
    .topbar { padding: 14px 18px; }
    .content-area { padding: 18px; }
}

@media print {
    body { background: #fff !important; }
    .sidebar, .topbar, .app-footer, .no-print, .btn, .alert { display: none !important; }
    .app-shell { padding-left: 0 !important; }
    .content-area { padding: 0 !important; }
    .card-modern { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
    .print-header { display:block; text-align:center; margin-bottom: 18px; }
    .table thead th { background: #eaeaea !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}