:root {
    --nalara-navy: #123a7a;
    --nalara-blue: #1676d2;
    --nalara-teal: #19b8c7;
    --nalara-bg: #f5f7fb;
    --nalara-border: #e7eaf0;
    --nalara-text: #1f2937;
    --sidebar-width: 260px;
}

* { box-sizing: border-box; }
body { color: var(--nalara-text); background: var(--nalara-bg); }
a { color: var(--nalara-blue); text-decoration: none; }
a:hover { color: var(--nalara-navy); }
.btn-primary { --bs-btn-bg: var(--nalara-blue); --bs-btn-border-color: var(--nalara-blue); --bs-btn-hover-bg: var(--nalara-navy); --bs-btn-hover-border-color: var(--nalara-navy); }
.form-control, .form-select { border-color: #dfe3ea; min-height: 42px; }
.form-control:focus, .form-select:focus { border-color: rgba(22,118,210,.55); box-shadow: 0 0 0 .2rem rgba(22,118,210,.12); }
.card { border-radius: 16px; }
.alert { border-radius: 12px; }

.auth-body { min-height: 100vh; background: radial-gradient(circle at top right, rgba(25,184,199,.12), transparent 32%), var(--nalara-bg); display: grid; place-items: center; padding: 28px 16px; }
.auth-shell { width: min(100%, 480px); }
.auth-logo { max-width: 205px; max-height: 112px; object-fit: contain; }
.auth-card { border-radius: 20px; }
.status-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #dff7ed; color: #127a53; font-size: 28px; font-weight: 700; }

.app-shell { min-height: 100vh; }
.app-sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; padding: 22px 18px; background: #fff; border-right: 1px solid var(--nalara-border); display: flex; flex-direction: column; z-index: 20; }
.brand-link { display: block; text-align: center; padding: 4px 10px 18px; }
.sidebar-logo { width: 150px; max-height: 76px; object-fit: contain; }
.sidebar-user { display: flex; gap: 10px; align-items: center; padding: 14px 10px; border: 1px solid var(--nalara-border); border-radius: 14px; margin-bottom: 18px; }
.avatar-circle { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--nalara-navy), var(--nalara-teal)); display: grid; place-items: center; font-weight: 700; }
.min-w-0 { min-width: 0; }
.sidebar-nav { gap: 4px; }
.sidebar-nav .nav-link { color: #536076; border-radius: 11px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; }
.sidebar-nav .nav-link:hover { background: #f0f7ff; color: var(--nalara-navy); }
.sidebar-nav .nav-link i { width: 20px; font-size: 1.05rem; }
.nav-section { padding: 20px 12px 7px; color: #9aa3b2; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.sidebar-footer { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--nalara-border); }
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar { min-height: 72px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--nalara-border); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 28px; position: sticky; top: 0; z-index: 15; backdrop-filter: blur(8px); }
.app-content { padding: 28px; flex: 1; }
.app-footer { padding: 18px 28px; border-top: 1px solid var(--nalara-border); color: #7b8494; display: flex; justify-content: space-between; gap: 20px; font-size: .86rem; }
.mobile-menu-button { display: none; }
.page-heading { margin-bottom: 8px; }
.stat-card .card-body { padding: 22px; }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; background: #edf7ff; color: var(--nalara-blue); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 18px; }
.baseline-item, .preflight-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--nalara-border); border-radius: 12px; background: #fff; }
.table > :not(caption) > * > * { padding: .9rem 1rem; }
.table thead th { color: #727c8e; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; background: #fafbfc; white-space: nowrap; }
code { color: #5d3fd3; }

@media (max-width: 991.98px) {
    :root { --sidebar-width: 82px; }
    .app-sidebar { padding-left: 12px; padding-right: 12px; }
    .sidebar-logo { width: 54px; height: 54px; object-fit: cover; object-position: left; }
    .sidebar-user > div:last-child, .sidebar-nav .nav-link span, .nav-section, .sidebar-footer { display: none; }
    .sidebar-user { justify-content: center; border: 0; padding: 8px; }
    .sidebar-nav .nav-link { justify-content: center; padding: 12px; }
    .sidebar-nav .nav-link i { width: auto; font-size: 1.25rem; }
    .app-content, .app-topbar, .app-footer { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 575.98px) {
    :root { --sidebar-width: 0px; }
    .app-sidebar { display: none; }
    .mobile-menu-button { display: inline-flex; align-items: center; justify-content: center; }
    .app-main { margin-left: 0; }
    .app-topbar { position: static; flex-direction: column; align-items: stretch; }
    .app-topbar > .d-flex { width: 100%; }
    .app-topbar .form-select { width: 100%; }
    .app-content { padding: 18px 14px; }
    .app-footer { padding: 16px 14px; flex-direction: column; gap: 4px; }
}