:root {
  --navy: #0b2545;
  --navy-hover: #122f5c;
  --navy-line: #3a5480;
  --gold: #c9a227;
  --maroon: #7a1f2b;
  --maroon-hover: #64192a;
  --border: #d7dce3;
  --stripe: #f7f8fa;
  --bs-body-color: #1f2937;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 4px;
}

body {
  background-color: #f1f3f6;
}

.app-navbar {
  background-color: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.app-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.app-navbar .btn-outline-light {
  border-color: var(--navy-line);
  color: #dbe4f3;
}

.app-navbar .btn-outline-light:hover {
  background-color: var(--navy-hover);
  border-color: var(--gold);
  color: #fff;
}

h4 {
  color: var(--navy);
  font-weight: 700;
}

.login-body {
  background: var(--navy);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrapper {
  width: 100%;
  max-width: 380px;
  padding: 1rem;
}

.login-card {
  border: none;
  border-top: 4px solid var(--gold);
  border-radius: 4px;
}

.login-card h4 {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.card {
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: none;
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 4px 4px 0 0 !important;
  color: var(--navy);
}

.card-header .fw-bold,
.card-header.fw-bold {
  color: var(--navy);
}

.table {
  --bs-table-striped-bg: var(--stripe);
}

.table > thead.table-light > tr > th {
  background-color: var(--navy);
  color: #fff;
  border-color: var(--navy-line);
  font-weight: 700;
}

.table > tbody > tr:nth-child(even) > td {
  background-color: var(--stripe);
}

.table-hover > tbody > tr:hover > td {
  background-color: #e8edf5;
}

.table td, .table th {
  vertical-align: middle;
  font-size: 0.9rem;
}

.nav-tabs {
  border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
  color: #4b5563;
  font-weight: 600;
  border-radius: 0;
  border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--navy);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

.btn {
  border-radius: 3px;
  font-weight: 600;
}

.btn-primary,
.btn-success {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-hover);
  --bs-btn-hover-border-color: var(--navy-hover);
  --bs-btn-active-bg: var(--navy-hover);
  --bs-btn-active-border-color: var(--navy-hover);
  --bs-btn-disabled-bg: var(--navy);
  --bs-btn-disabled-border-color: var(--navy);
}

.btn-warning {
  --bs-btn-color: #8a6d00;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #5f4b00;
  --bs-btn-hover-bg: #faf3d9;
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-color: #5f4b00;
  --bs-btn-active-bg: #f3e7b3;
  --bs-btn-active-border-color: var(--gold);
}

.btn-danger {
  --bs-btn-bg: var(--maroon);
  --bs-btn-border-color: var(--maroon);
  --bs-btn-hover-bg: var(--maroon-hover);
  --bs-btn-hover-border-color: var(--maroon-hover);
  --bs-btn-active-bg: var(--maroon-hover);
  --bs-btn-active-border-color: var(--maroon-hover);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
}

.btn-outline-danger {
  --bs-btn-color: var(--maroon);
  --bs-btn-border-color: var(--maroon);
  --bs-btn-hover-bg: var(--maroon);
  --bs-btn-hover-border-color: var(--maroon);
  --bs-btn-active-bg: var(--maroon);
  --bs-btn-active-border-color: var(--maroon);
}

.badge {
  border-radius: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.badge.bg-success {
  background-color: #1a7a3d !important;
}

.badge.bg-secondary {
  background-color: #6b7280 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--navy-line);
  box-shadow: 0 0 0 0.2rem rgba(11, 37, 69, 0.15);
}

.modal-content {
  border-radius: 4px;
  border: none;
  border-top: 4px solid var(--gold);
}

.modal-header {
  color: var(--navy);
}

.info-row input {
  font-size: 0.85rem;
}

.btn-toggle-section i {
  transition: transform 0.2s;
}

.btn-toggle-section.collapsed i {
  transform: rotate(180deg);
}

.maglib-count-badge {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45em 0.8em;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.35);
}

.maglib-count-badge .maglib-count {
  font-size: 1.05rem;
  margin-right: 0.15em;
}