/* AIS brand theme on top of Bootstrap 5.3. Colours sampled from the AIS logo. */
:root {
  --ais-red: #ea2429;
  --ais-blue: #0d67b1;
  --ais-blue-dark: #0a5291;
  --ais-blue-darker: #084577;
  --ais-blue-tint: #e7f0f8;
  --ais-ink: #231f20;

  --bs-primary: var(--ais-blue);
  --bs-primary-rgb: 13, 103, 177;
  --bs-link-color: var(--ais-blue);
  --bs-link-color-rgb: 13, 103, 177;
  --bs-link-hover-color: var(--ais-blue-dark);
  --bs-link-hover-color-rgb: 10, 82, 145;
  --bs-body-color: var(--ais-ink);
  --bs-border-color: #e1e5eb;
  --bs-focus-ring-color: rgba(13, 103, 177, .25);
  --ais-page-bg: #f5f7fa;
}

/* page tint set on body only: --bs-body-bg also colours cards and inputs, which stay white */
body { background: var(--ais-page-bg); }

/* buttons and form controls in brand blue */
.btn-primary {
  --bs-btn-bg: var(--ais-blue);
  --bs-btn-border-color: var(--ais-blue);
  --bs-btn-hover-bg: var(--ais-blue-dark);
  --bs-btn-hover-border-color: var(--ais-blue-dark);
  --bs-btn-active-bg: var(--ais-blue-darker);
  --bs-btn-active-border-color: var(--ais-blue-darker);
  --bs-btn-disabled-bg: var(--ais-blue);
  --bs-btn-disabled-border-color: var(--ais-blue);
  --bs-btn-focus-shadow-rgb: 13, 103, 177;
}
.btn-outline-primary {
  --bs-btn-color: var(--ais-blue);
  --bs-btn-border-color: var(--ais-blue);
  --bs-btn-hover-bg: var(--ais-blue);
  --bs-btn-hover-border-color: var(--ais-blue);
  --bs-btn-active-bg: var(--ais-blue-dark);
  --bs-btn-active-border-color: var(--ais-blue-dark);
  --bs-btn-focus-shadow-rgb: 13, 103, 177;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #86b3d8;
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--ais-blue); border-color: var(--ais-blue); }

/* header: white bar with the AIS mark and a red brand stripe */
.ais-navbar {
  background: #fff;
  border-bottom: 3px solid var(--ais-red);
  box-shadow: 0 1px 3px rgba(35, 31, 32, .06);
}
.ais-navbar .navbar-brand { display: flex; align-items: center; gap: .75rem; padding: 0; }
.ais-navbar .navbar-brand img { height: 36px; width: auto; }
.ais-navbar .brand-text {
  border-left: 1px solid var(--bs-border-color);
  padding-left: .75rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ais-ink);
  line-height: 1.1;
}
.ais-navbar .brand-text small { display: block; font-weight: 400; font-size: .72rem; color: #6c757d; }
.ais-navbar .nav-link { color: var(--ais-ink); font-weight: 500; border-bottom: 2px solid transparent; }
.ais-navbar .nav-link:hover { color: var(--ais-blue); }
.ais-navbar .nav-link.active { color: var(--ais-blue); border-bottom-color: var(--ais-blue); }
@media (max-width: 1199.98px) {
  .ais-navbar .nav-link.active { border-bottom-color: transparent; }
}

/* menu group: a tinted band with a small label; Uploads sits apart from the pages it feeds */
.nav-group { background: var(--ais-blue-tint); border-radius: .5rem; padding: .15rem .5rem; }
.nav-group-label {
  display: block;
  padding-top: .25rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ais-blue-darker);
}
.nav-group-split { border-top: 1px solid #bcd3e8; }
@media (min-width: 1200px) {
  .ais-navbar .navbar-collapse > .navbar-nav { align-items: center; }
  .nav-link { white-space: nowrap; }
  .nav-group { display: flex; align-items: center; gap: .5rem; margin: 0 .5rem; }
  .nav-group-label { padding-top: 0; }
  .nav-group-split { border-top: 0; border-left: 1px solid #bcd3e8; margin-left: .25rem; padding-left: .25rem; }
}

/* cards */
.card { border-color: var(--bs-border-color); }
a.card { transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--ais-blue); box-shadow: 0 2px 8px rgba(13, 103, 177, .12); }
.stat-card { border-left: 3px solid var(--ais-blue); }

/* tables */
.table > thead th { color: #495057; font-weight: 600; background: var(--ais-blue-tint); }

/* login */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; border-top: 3px solid var(--ais-red); }
.login-card .logo { width: 150px; height: auto; display: block; margin: 0 auto 1rem; }

/* 2FA QR code on the user login-details page: white quiet zone, fixed size */
.qr-code svg { display: block; width: 280px; max-width: 100%; height: auto; background: #fff; shape-rendering: crispEdges; }