:root { --hopkins: #47618e; --hopkins-dark: #2f4468; }
.bg-hopkins { background-color: var(--hopkins); }
.text-hopkins { color: var(--hopkins); }
.btn-hopkins, .btn-hopkins:hover, .btn-hopkins:focus, .btn-hopkins:active { background-color: rgb(240, 168, 2); border-color: rgb(240, 168, 2); color: #fff; }
.btn-hopkins:hover { filter: brightness(0.92); }
.card-header.bg-hopkins { color: #fff; }
.navbar .nav-link.active { font-weight: 600; text-decoration: underline; }
.photo-thumb { max-height: 200px; border: 2px solid #658ebb; cursor: pointer; }
.table-sm td, .table-sm th { font-size: .85rem; }
.login-card { max-width: 420px; }
.dialog-body { background: #fff; }

/* Header + table header theme */
:root { --header-bg: #0c4481; --header-fg: #fff; }
.navbar.bg-hopkins { background-color: var(--header-bg) !important; }
.navbar.bg-hopkins, .navbar.bg-hopkins .navbar-brand, .navbar.bg-hopkins .nav-link,
.navbar.bg-hopkins .dropdown-toggle, .navbar.bg-hopkins .navbar-text,
.navbar.bg-hopkins .nav-link.active, .navbar.bg-hopkins .nav-link:hover, .navbar.bg-hopkins .nav-link:focus { color: var(--header-fg) !important; }
.table > thead, .table > thead > tr > th, .table > thead > tr > td {
    --bs-table-bg: var(--header-bg); --bs-table-color: var(--header-fg);
    background-color: var(--header-bg) !important; color: var(--header-fg) !important; }
.table > thead a, .table > thead a:hover, .table > thead a:visited { color: var(--header-fg) !important; }

:root { --filter-btn: rgb(240, 168, 2); }
.btn.btn-filter, .btn.btn-filter:hover, .btn.btn-filter:focus, .btn.btn-filter:active { background-color: var(--filter-btn); border-color: var(--filter-btn); color: #fff; }
.btn.btn-filter:hover { filter: brightness(0.92); }

.navbar-logo { height: 52px; width: auto; }
.navbar.bg-hopkins { padding-top: 5.5px; padding-bottom: 5.5px; }
.navbar.bg-hopkins .navbar-brand { padding-top: 0; padding-bottom: 0; }
@media (max-width: 419.98px) { .navbar.bg-hopkins .navbar-brand { margin-right: 0; gap: .25rem !important; } .navbar.bg-hopkins .navbar-brand span { font-size: .7rem; } }
@media (max-width: 359.98px) { .navbar.bg-hopkins > .container, .navbar.bg-hopkins > .container-fluid { padding-left: .5rem; padding-right: .5rem; } .navbar.bg-hopkins .navbar-toggler { padding: .25rem .4rem; } .navbar.bg-hopkins .navbar-brand span { font-size: .65rem; } }