:root { --navy: #172554; --blue: #2563eb; --surface: #f4f7fb; }
body { background: var(--surface); color: #1e293b; font-family: Inter, system-ui, sans-serif; }
.app-shell { min-height: 100vh; display: flex; }.sidebar { width: 250px; background: var(--navy); color: #cbd5e1; }.brand { color: white; font-size: 1.4rem; font-weight: 700; }.section-label { color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }.sidebar .nav-link { color: #cbd5e1; border-radius: .5rem; padding: .7rem .8rem; }.sidebar .nav-link:hover,.sidebar .nav-link.active { background: #28417d; color: white; }.content { flex: 1; min-width: 0; }.topbar { background: white; border-bottom: 1px solid #e2e8f0; }.card { border: 0; border-radius: .8rem; box-shadow: 0 2px 10px rgba(15,23,42,.05); }.table > :not(caption) > * > * { padding: .85rem .75rem; vertical-align: middle; }.action-buttons .btn { padding: .25rem .5rem; } .empty-state { padding: 3rem; color: #64748b; }.clickable-row { cursor: pointer; }.clickable-row:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.mobile-cards { display: none; }
@media(max-width: 767px) { .sidebar { position: fixed; z-index: 1040; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease-in-out; box-shadow: 4px 0 18px rgba(15,23,42,.2); }.sidebar.mobile-open { transform: translateX(0); }.content { width: 100%; }.topbar { position: sticky; top: 0; z-index: 1030; }.container-fluid { padding: 1rem!important; }.desktop-table { display: none; }.mobile-cards { display: block; }.mobile-card { padding: 1rem; border-bottom: 1px solid #e2e8f0; }.mobile-card:last-child { border-bottom: 0; }.mobile-card-details { color: #64748b; font-size: .875rem; }.mobile-card-details > div + div { margin-top: .35rem; }.action-buttons { white-space: nowrap; } }