/* Reversible Bootstrap trial layer for the existing server-rendered interface. */
:root {
  --bs-primary: #ec1b2d;
  --bs-primary-rgb: 236, 27, 45;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-color: #dee2e6;
  --bs-border-radius: .375rem;
  --bs-border-radius-lg: .5rem;
}

body { font-family: var(--bs-body-font-family); background: #f8f9fa; }
header { min-height: 72px; border-bottom-color: var(--bs-border-color); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .04); }
main { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(36px, 5vw, 60px); }
footer { border-top-color: var(--bs-border-color); background: #fff; }

.card, .auth-card, .hero {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .045);
}
.hero { border-left: .35rem solid var(--bs-primary); }

form { gap: .9rem; }
label { gap: .35rem; font-weight: 500; }
input, select, textarea {
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  border-color: #ced4da;
  border-radius: var(--bs-border-radius);
  line-height: 1.5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
input:focus, select:focus, textarea:focus {
  border-color: #f38b96;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}
button, .button {
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  border: 1px solid var(--bs-primary);
  border-radius: var(--bs-border-radius);
  background: var(--bs-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 .08rem .12rem rgba(0, 0, 0, .08);
}
button:hover, .button:hover { background: #c91526; border-color: #bd1222; }
button:focus-visible, .button:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .32); }
button:disabled { opacity: .65; box-shadow: none; }

.alert { border: 1px solid var(--bs-border-color); border-left-width: .35rem; border-radius: var(--bs-border-radius); box-shadow: 0 .06rem .12rem rgba(0, 0, 0, .03); }
.alert.success { background: #d1e7dd; color: #0f5132; border-color: #badbcc; border-left-color: #198754; }
.alert.error { background: #f8d7da; color: #842029; border-color: #f5c2c7; border-left-color: #dc3545; }

.table-scroll { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
table { margin-bottom: 0; }
th, td { padding: .75rem; border-bottom-color: var(--bs-border-color); }
th { background: #f8f9fa; color: #495057; font-weight: 600; letter-spacing: .03em; }
tbody tr:nth-child(even) td { background: rgba(248, 249, 250, .65); }
tbody tr:last-child td { border-bottom: 0; }

.badge { background: #e9ecef; border-radius: 50rem; color: #343a40; font-weight: 600; }
.nav-management-menu { border-color: var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.nav-management-menu a { border-radius: .25rem; }
.nav-management-menu a:hover { background: #f8f9fa; }

@media (max-width: 600px) {
  .card, .auth-card { border-radius: var(--bs-border-radius); }
  .table-scroll { border-radius: var(--bs-border-radius); }
}