/* eLab - site styles on top of Bootstrap 5.3 (mobile first). */
:root {
  --elab-brand: #1f4e79;
  --elab-brand-2: #24639c;
  --elab-accent: #5cc3a0;
  --elab-available: #198754;
  --elab-in-use: #dc3545;
  --elab-maintenance: #fd7e14;
  --elab-booked-soon: #ffc107;
  --elab-out-of-order: #6f1d1b;
  --elab-elsewhere: #4f86c0; /* booked in another system: >= 3:1 on light and dark cards */
  --elab-radius: .75rem;
  /* Filled primary elements with white text (selected buttons, badges): 8.7:1 light, 5.3:1 dark. */
  --elab-primary-fill: #1f4e79;
  --bs-primary: #1f4e79;
  --bs-primary-rgb: 31, 78, 121;
  --bs-link-color: #1f5f99;
  --bs-link-color-rgb: 31, 95, 153;
  --bs-link-hover-color: #163a5c;
}
[data-bs-theme="dark"] {
  --elab-primary-fill: #2f6fa8;
  --bs-primary: #5aa2e0;
  --bs-primary-rgb: 90, 162, 224;
  --bs-link-color: #7cb7ec;
  --bs-link-color-rgb: 124, 183, 236;
  --bs-link-hover-color: #a9d0f3;
}

.btn-primary {
  --bs-btn-bg: var(--elab-brand);
  --bs-btn-border-color: var(--elab-brand);
  --bs-btn-hover-bg: #163a5c;
  --bs-btn-hover-border-color: #163a5c;
  --bs-btn-active-bg: #12304c;
  --bs-btn-active-border-color: #12304c;
  --bs-btn-disabled-bg: var(--elab-brand);
  --bs-btn-disabled-border-color: var(--elab-brand);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #2f6fa8;
  --bs-btn-border-color: #2f6fa8;
  --bs-btn-hover-bg: #3a82c3;
  --bs-btn-hover-border-color: #3a82c3;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--elab-primary-fill);
  --bs-btn-hover-border-color: var(--elab-primary-fill);
  --bs-btn-active-bg: var(--elab-primary-fill);
  --bs-btn-active-border-color: var(--elab-primary-fill);
}
/* White text on the light dark-mode primary (#5aa2e0) would be 2.7:1. */
.text-bg-primary { background-color: var(--elab-primary-fill) !important; }

/* Navigation ----------------------------------------------------------------- */
/* Link text is at least 5:1 on both ends of the gradient (Bootstrap's .55 white is about 3:1). */
.navbar.app-navbar {
  --bs-navbar-color: rgba(255, 255, 255, .85);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, .5);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background: linear-gradient(90deg, var(--elab-brand), var(--elab-brand-2));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.app-navbar .nav-link.active { font-weight: 600; }
/* Right-hand group (Ideas, dark mode, account): in the top bar on every screen size. */
.app-navbar-right { gap: .125rem; }
.app-navbar-right .nav-link { padding: .5rem .625rem; }
.app-navbar .nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.25rem;
  line-height: 1;
}
.app-navbar .nav-icon.active { color: #fff; background: rgba(255, 255, 255, .14); border-radius: .5rem; }
.app-navbar .nav-icon-badge {
  position: absolute;
  top: .25rem;
  right: 0;
  font-size: .65rem;
  padding: .2em .45em;
  border: 1px solid rgba(255, 255, 255, .8);
}

/* Brand: solar-cell logo, name and tagline (base.html shows the tagline only where it fits). */
.app-brand { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.app-brand-logo { flex-shrink: 0; }
.app-brand-name { font-weight: 600; }
.app-brand-tagline {
  margin-left: .125rem;
  padding-left: .625rem;
  border-left: 1px solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .85);
  font-size: .8125rem;
  white-space: nowrap;
}
/* Signed in on a phone: a smaller tagline beside the name; too tight below 375 px. */
@media (max-width: 767.98px) {
  .app-brand-tagline--compact { padding-left: .5rem; font-size: .75rem; }
}
@media (max-width: 374.98px) {
  .app-brand-tagline--compact { display: none !important; }
}
/* Theme colours keep the skip link readable in dark mode too. */
.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .5rem 1rem;
  border-radius: .5rem;
  background: var(--bs-body-bg);
  color: var(--bs-link-color);
  box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Layout helpers ------------------------------------------------------------------ */
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.page-header h1 { margin: 0; margin-right: auto; font-size: 1.5rem; }
.page-header .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.card { border-radius: var(--elab-radius); }
.card-header:first-child { border-radius: calc(var(--elab-radius) - 1px) calc(var(--elab-radius) - 1px) 0 0; }
.stat-card .display-6 { font-weight: 600; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state > .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* Status colours ------------------------------------------------------------------- */
.tool-status .bi { margin-right: .15rem; }
.status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
.status-dot.available { background: var(--elab-available); }
.status-dot.in-use { background: var(--elab-in-use); }
.status-dot.maintenance { background: var(--elab-maintenance); }
.status-dot.booked-soon { background: var(--elab-booked-soon); }
.status-dot.out-of-order { background: var(--elab-out-of-order); }
.status-dot.elsewhere { background: var(--elab-elsewhere); }
/* The dark red out-of-order dot needs a light ring on dark cards (3:1 for non-text indicators). */
[data-bs-theme="dark"] .status-dot.out-of-order { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
/* Training sessions (the same purple as on the booking calendar) */
.booking-status-training { background-color: #6f42c1; color: #fff; }

/* Booking rules (tool page and booking form: bookings/_rule_items.html) */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li { display: flex; gap: .6rem; padding: .35rem 0; }
.rule-list li + li { border-top: 1px solid var(--bs-border-color-translucent); }
.rule-list .bi { color: var(--bs-secondary-color); }

/* Tables: stack nicely on phones ------------------------------------------------------ */
.table-responsive { border-radius: var(--elab-radius); }
.table > :not(caption) > * > * { vertical-align: middle; }

/* Forms ------------------------------------------------------------------------------- */
/* Empty fields and unticked boxes are recognised by their border: 3:1 or more in both themes
   (Bootstrap's #dee2e6 is 1.3:1 on white). Focus, checked and invalid states keep their colours. */
.form-control, .form-select, .form-check-input, .input-group-text { border-color: #8c959f; }
.field-checkboxselectmultiple ul, .field-radioselect ul { list-style: none; padding-left: 0; margin: 0; }
.field-checkboxselectmultiple label, .field-radioselect label { display: flex; gap: .5rem; align-items: center; padding: .2rem 0; }
.form-label { font-weight: 500; }

/* Touch devices: comfortable tap targets ----------------------------------------------------- */
@media (pointer: coarse) {
  .btn, .form-control, .form-select { min-height: 44px; }
  a.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
  .btn-sm { min-height: 38px; }
  .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
}

/* Small screens ----------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .page-header h1 { font-size: 1.3rem; width: 100%; }
  .page-header .actions { width: 100%; }
  .page-header .actions .btn { flex: 1 1 auto; }
  main.container-xl { padding-left: .75rem; padding-right: .75rem; }
}

.auth-page main { max-width: 100%; }
.app-footer { background: var(--bs-tertiary-bg); }

/* Grey outline buttons on the light-grey card headers: Bootstrap's #6c757d is 4.4:1 there. */
.card-header .btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a; }

/* Dark mode: Bootstrap keeps light-mode colours for outline buttons, which are too
   faint on dark backgrounds (WCAG AA needs 4.5:1 for button text). The only copy of
   these rules: app stylesheets don't override them. */
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .card-header .btn-outline-secondary {
  --bs-btn-color: #ced4da;
  --bs-btn-border-color: #8c959f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #8c959f;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5c636a;
  --bs-btn-active-border-color: #8c959f;
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #f1aeb5;
  --bs-btn-border-color: #ea868f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b02a37;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #b02a37;
}