:root {
    --accent: #3563e9;
    --accent-dark: #274bb5;
    --border: #e7eaef;
    --header: #1b2130;
}

body { background: #f4f6f9; color: #232a36; }

.portal-nav { background: var(--header) !important; }
.navbar-brand { font-weight: 700; letter-spacing: .2px; }
.navbar-brand .fw-light { opacity: .65; }
.navbar .nav-link { color: #c5ccda; border-radius: 7px; padding: .4rem .75rem; }
.navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.14); }

main.container { max-width: 980px; }

/* Cards */
.card { border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.card-header {
    background: #fff; border-bottom: 1px solid #eef0f3; font-weight: 600;
    border-radius: 12px 12px 0 0 !important; padding: .8rem 1rem;
}
h1, .h4 { font-weight: 700; }

/* Forms */
.form-label { font-weight: 500; font-size: .88rem; color: #414a5a; margin-bottom: .25rem; }
.form-control, .form-select { border-radius: 8px; border-color: #dbe0e8; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(53,99,233,.15); }
.form-control::placeholder { color: #aab2c0; }

/* Buttons */
.btn { border-radius: 8px; }
.btn-primary { background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }
main.container a:not(.btn) { color: var(--accent); }
main.container a:not(.btn):hover { color: var(--accent-dark); }

/* Tables */
.table { --bs-table-bg: transparent; }
.table > thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; border-bottom: 2px solid var(--border); font-weight: 600;
}
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.list-group-item { border-color: var(--border); }
.alert { border: none; border-radius: 10px; }

/* Responsive: let wide tables scroll on phones instead of breaking the layout */
@media (max-width: 767px) {
    .table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }
}