:root {
    --navy: #10233F;
    --lemon: #D9EF54;
    --canvas: #F4F6F8;
    --line: #E3E8ED;
    --muted: #667589;
    --bs-body-bg: var(--canvas);
    --bs-body-color: var(--navy);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    --bs-border-color: var(--line);
}
body { background: var(--canvas); color: var(--navy); }
.text-muted, .text-secondary { color: var(--muted) !important; }

.app-sidebar { width: 230px; background: #fff; border-right: 1px solid var(--line); position: fixed; inset: 0 auto 0 0; padding: 24px 16px; z-index: 1030; }
.app-main { margin-left: 230px; }
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: .2px; padding: 0 8px 24px; display: block; color: var(--navy); text-decoration: none; }
.brand span { background: var(--lemon); padding: 0 6px; border-radius: 6px; }
.app-nav a { display: block; padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; color: var(--navy); text-decoration: none; font-weight: 500; }
.app-nav a:hover { background: var(--canvas); }
.app-nav a.active { background: var(--navy); color: #fff; }
.app-topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 32px; display: flex; justify-content: space-between; align-items: center; }
.app-content { padding: 32px; }

.card-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.card-panel.navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.status-card { cursor: pointer; transition: border-color .15s ease; }
.status-card:hover, .status-card:focus-visible { border-color: var(--navy); outline: 3px solid rgba(217, 239, 84, .65); outline-offset: 2px; }
.status-card.navy:hover, .status-card.navy:focus-visible { border-color: var(--lemon); }

.btn { border-radius: 12px; font-weight: 600; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: #0b182b; color: #fff; }
.btn-lemon { background: var(--lemon); color: var(--navy); border-color: var(--lemon); }
.btn-lemon:hover { background: #c9df3f; color: var(--navy); }
.form-control, .form-select { border-radius: 12px; border-color: var(--line); padding: .6rem .85rem; }
.form-control:focus { border-color: var(--navy); box-shadow: 0 0 0 .2rem rgba(217, 239, 84, .6); }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: 100%; max-width: 400px; }

@media (max-width: 991px) {
    .app-sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
    .app-main { margin-left: 0; }
    .app-nav { display: flex; gap: 4px; overflow-x: auto; }
    .brand { padding-bottom: 8px; }
    .app-content { padding: 16px; }
    .app-topbar { padding: 12px 16px; }
}