/* One visual language, taken from the score view, for every dashboard route. */
:root {
  --ah-ui-bg: #080b0e;
  --ah-ui-surface: #080b10e6;
  --ah-ui-raised: #10161d;
  --ah-ui-line: #ffffff14;
  --ah-ui-text: #e7eaf0;
  --ah-ui-muted: #8fa3ba;
  --ah-ui-accent: #4aa8ff;
  --ah-page-photo: url('challenge-garage.png');
  --ah-page-photo-position: center 48%;
}
:is(body.ah-app, body.ah-admin-app) {
  color: var(--ah-ui-text);
  background-color: var(--ah-ui-bg);
  /* Keep decorative negative layers in the page, without trapping Bootstrap dialogs. */
  isolation: isolate;
}
:is(body.ah-app:not(.ah-preauth):not(.ah-scoreboard-page), body.ah-admin-app) main {
  position: relative;
  isolation: auto;
  background: transparent;
  padding: clamp(16px, 2.2vh, 30px) clamp(20px, 2.2vw, 42px) 38px;
}
:is(body.ah-app:not(.ah-preauth):not(.ah-scoreboard-page), body.ah-admin-app) main::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(230px, 32vh, 330px);
  background: linear-gradient(0deg, #080b0e, #080b0e22 78%), linear-gradient(90deg, #080b0e99, #080b0e33), linear-gradient(#1f63c766, #1f63c766), var(--ah-page-photo) var(--ah-page-photo-position) / cover no-repeat;
  /* A light poster-blue hue cast keeps the photos close to the login poster. */
  background-blend-mode: normal, normal, color, normal;
  opacity: .85;
  pointer-events: none;
}
:is(body.ah-app:not(.ah-preauth), body.ah-admin-app) main > .container,
body.ah-admin-app main > .ah-users-page { max-width: none; }

/* Route imagery stays within the same dark automotive palette. */
body.ah-app:is([data-ah-route="/settings"], [data-ah-route="/user"], [data-ah-route="/users/me"]) {
  --ah-page-photo: url('ivi-cockpit.png');
  --ah-page-photo-position: center 48%;
}
body.ah-app:is([data-ah-route="/notifications"], [data-ah-route="/team"], [data-ah-route="/teams/me"]) {
  --ah-page-photo: url('ivi-driver-pov.png');
  --ah-page-photo-position: center 37%;
}
body.ah-admin-app {
  --ah-page-photo: url('ivi-cockpit.png');
  --ah-page-photo-position: center 48%;
}
body.ah-admin-app:is([data-ah-route="/admin/challenges"], [data-ah-route="/admin/users"], [data-ah-route="/admin/teams"]) { --ah-page-photo: url('challenge-garage.png'); }

/* Open, left-aligned headings replace the unrelated boxed title treatments. */
:is(body.ah-app:not(.ah-preauth), body.ah-admin-app) :is(.jumbotron, .ah-list-header, .ah-page-hero) {
  position: relative;
  min-height: clamp(150px, 20vh, 210px);
  padding: clamp(28px, 5vh, 56px) 12px 26px !important;
  margin: 0 0 20px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
:is(body.ah-app:not(.ah-preauth), body.ah-admin-app) :is(.jumbotron, .ah-list-header)::before { display: none !important; }
:is(.ah-app, .ah-admin-app) .jumbotron > .container { max-width: none; padding: 0; }
:is(body.ah-app:not(.ah-preauth), body.ah-admin-app) :is(.jumbotron h1, .ah-list-title h1, .ah-page-hero h1) {
  margin: 0;
  color: #f4f5f7;
  background: none;
  font: 800 clamp(30px, 4.2vh, 48px)/1.15 Arial, 'Pretendard', sans-serif !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left !important;
}
.ah-page-hero > p { margin: 15px 0 0; color: #aab2c5; font-size: 13px; line-height: 1.6; }
.ah-list-header { align-items: flex-end; }

/* Controls follow the score filter's shape, contrast, and focus treatment. */
:is(body.ah-app, body.ah-admin-app) :is(.form-control, .form-select, .custom-select, .input-group-text) {
  background: var(--ah-ui-raised) !important;
  border-color: #333b4a !important;
  border-radius: 6px !important;
  color: var(--ah-ui-text);
  box-shadow: none !important;
}
:is(body.ah-app, body.ah-admin-app) :is(.form-control, .form-select, .custom-select):focus { border-color: var(--ah-ui-accent) !important; box-shadow: 0 0 0 3px #4aa8ff1a !important; }
:is(body.ah-app, body.ah-admin-app) :is(.btn-secondary, .btn-outline-secondary, .page-link) { background: #10161d !important; border: 1px solid #333b4a !important; color: #bdccde; box-shadow: none !important; }
:is(body.ah-app, body.ah-admin-app) :is(.btn-primary, .btn-success) { background: #2a8ae8 !important; border-color: #4aa8ff !important; box-shadow: none !important; }
:is(body.ah-app, body.ah-admin-app) .btn { border-radius: 6px !important; }
:is(body.ah-app, body.ah-admin-app) .nav-pills .nav-link { color: #a8bacf; }
:is(body.ah-app, body.ah-admin-app) .nav-pills .nav-link.active { background: #4aa8ff1b; color: #d6f0ff; border-color: #4aa8ff80; }

/* Directory and admin tables use the ranking matrix's quiet header and rows. */
:is(body.ah-app, body.ah-admin-app) .table {
  border: 1px solid var(--ah-ui-line) !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #080b10c9 !important;
  color: #e3e8ef;
}
:is(body.ah-app, body.ah-admin-app) .table thead th { background: #0c1015 !important; border-bottom-color: #ffffff14 !important; color: #8fa3ba !important; font-size: 12px; font-weight: 500; letter-spacing: .045em; }
:is(body.ah-app, body.ah-admin-app) .table tbody :is(td, th) { border-bottom-color: #ffffff0c !important; color: #e3e8ef; font-size: 14px; }
:is(body.ah-app, body.ah-admin-app) .table tbody tr:nth-child(even) > :is(td, th) { background: #ffffff0b !important; }
:is(body.ah-app, body.ah-admin-app) .table tbody tr:hover > :is(td, th) { background: #4aa8ff12 !important; }
:is(body.ah-app, body.ah-admin-app) .table tbody tr:has(input:checked) > :is(td, th) { background: #4aa8ff26 !important; }
:is(body.ah-app, body.ah-admin-app) .table td > a { color: #e3e8ef; font-weight: 500; }
:is(body.ah-app, body.ah-admin-app) .table td > a:hover { color: #a8cfff; }

/* Notifications, profiles, settings, and operational panels use the same surface. */
:is(body.ah-app, body.ah-admin-app) :is(.card, .modal-content, .list-group-item, .config-section) {
  background: var(--ah-ui-surface) !important;
  border: 1px solid var(--ah-ui-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
:is(body.ah-app, body.ah-admin-app) :is(.card-header, .modal-header, .card-footer, .modal-footer) { background: #0c1015 !important; border-color: var(--ah-ui-line) !important; box-shadow: none !important; }
:is(body.ah-app, body.ah-admin-app) :is(.text-muted, .text-secondary) { color: #8fa3ba !important; }
body.ah-admin-app main > .bg-warning { padding-block: 8px !important; margin-bottom: 8px; border: 1px solid #9d7b4533; border-radius: 6px; }

/* The inspection workspace shares the ranking's open heading and matrix surfaces. */
body.ah-app .ah-workspace { border-color: var(--ah-ui-line); border-radius: 8px; box-shadow: none; }
body.ah-app .ah-workspace .ah-track-brief { background: #080b10e6; border-color: var(--ah-ui-line); }
body.ah-app .ah-track-identity h2 { color: #f4f5f7; font-weight: 600; letter-spacing: .015em; }
body.ah-app .ah-track-description { color: var(--ah-ui-muted); }
body.ah-app .ah-track-facts { border-color: #ffffff0c; }
body.ah-app .ah-track-problems { gap: 0; }
body.ah-app .ah-track-problem { background: transparent; border: 0; border-bottom: 1px solid #ffffff0c; border-radius: 0; padding-inline: 0; }
body.ah-app .ah-track-problem:hover { background: #4aa8ff12; border-color: #ffffff14; }
body.ah-app .ah-track-problem > b { color: #e3e8ef; }
body.ah-app .challenge-button { background: #080b10c9 !important; border-color: #ffffff14 !important; box-shadow: none !important; }
body.ah-app .challenge-button:hover { background: #4aa8ff1b !important; border-color: #4aa8ff80 !important; }
body.ah-app .ah-workspace .ah-map-legend { background: #080b10e6; border-color: #ffffff0c; }
@media (min-width: 1101px) {
  body.ah-app .ah-workspace { grid-template-rows: minmax(440px, auto) auto; }
  body.ah-app .ah-workspace :is(.ah-region-map, .ah-track-brief) { grid-row: 1; }
  body.ah-app .ah-workspace .ah-map-legend { grid-row: 2; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body.ah-app .ah-workspace { grid-template-rows: 420px auto auto; }
  body.ah-app .ah-workspace .ah-region-map { grid-row: 1; }
  body.ah-app .ah-workspace .ah-track-brief { grid-row: 2; }
  body.ah-app .ah-workspace .ah-map-legend { grid-row: 3; }
}
@media (max-width: 767px) {
  :is(body.ah-app:not(.ah-preauth), body.ah-admin-app) main { padding: 18px 12px 30px; }
  :is(body.ah-app:not(.ah-preauth), body.ah-admin-app) :is(.jumbotron, .ah-list-header, .ah-page-hero) { min-height: 138px; padding: 28px 6px 20px !important; }
}

/* Navigation uses the same scale, neutral surfaces, and blue focus as the board. */
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) {
  background: #080b10;
  border-right: 1px solid var(--ah-ui-line);
  box-shadow: none;
}
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 9px 12px !important;
  border: 1px solid transparent;
  border-radius: 6px !important;
  color: #8fa3ba;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .nav-link:hover {
  background: #ffffff07 !important;
  color: #e7eaf0;
}
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .nav-link[aria-current=page] {
  background: #4aa8ff14 !important;
  border-color: #4aa8ff2b;
  color: #d6f0ff;
}
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .nav-link i {
  flex: 0 0 18px;
  width: 18px;
  color: #778399;
  font-size: 14px;
  text-align: center;
}
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .nav-link[aria-current=page] i { color: #8bb8ef; }
.ah-nav-label { flex: 1; }
.ah-nav-badge { position: static; margin-left: auto; padding: 3px 5px; font: 500 9px Arial, sans-serif; }
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .dropdown-toggle::after { margin-left: auto; }
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .navbar-nav + .navbar-nav {
  border-top: 1px solid #ffffff0c;
  margin-top: 16px !important;
  padding-top: 16px;
}
:is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) .navbar-brand span {
  background: transparent;
  padding: 0;
  margin-top: 2px;
  color: #778399;
  font: 500 10px Arial, sans-serif;
  letter-spacing: .1em;
}
body.ah-app .ah-sidebar-collapse { margin: 18px 0 0 12px; color: #778399; }
@media (min-width: 768px) {
  :root { --ah-sidebar-width: 200px; }
  :is(body.ah-app, body.ah-admin-app) :is(.ah-sidebar, .ah-admin-sidebar) { padding: 20px 12px 16px; }
  :is(.ah-sidebar, .ah-admin-sidebar) .navbar-brand { display: flex; align-items: flex-start; padding: 4px 12px 22px; margin-bottom: 12px; }
  :is(.ah-sidebar, .ah-admin-sidebar) :is(.ah-logo, .ah-admin-logo) { width: 116px; height: 60px; }
  :is(.ah-sidebar, .ah-admin-sidebar) .navbar-collapse { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #243141 transparent; }
  :is(.ah-sidebar, .ah-admin-sidebar) .navbar-nav { gap: 3px; }
}
@media (min-width: 1500px) { :root { --ah-sidebar-width: 216px; } }
@media (max-width: 767px) {
  :is(.ah-sidebar, .ah-admin-sidebar) .navbar-brand { margin-bottom: 0; padding-bottom: 0; }
  :is(.ah-sidebar, .ah-admin-sidebar) .navbar-collapse { padding-block: 12px; }
}