/* global */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

:root {
  --confirmed-absent: #bf0000; /*absent*/
  --need-human-review: #ffa500; /*check*/
  --detected-present: #5bca5f; /*present*/
  --confirmed-present: rgb(74, 63, 222); /*confirmed*/
  --unusable-picture: #6c757d; /*unusable*/
  --unchecked: #e7e7e7; /*unchecked*/
  --selected: #4058ff;
  --selected-hover: #2595bee0;
  --unselected: #04325f;
  --nav-background: #95d2e8;
  --inferred-color: #f2e497;
}

/* navbar (shared) */
.app-navbar {
  background-color: var(--nav-background);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0;
  min-height: 48px;
}

/* On mobile the collapse is first in the DOM (needed for desktop layout),
   so push it below the controls row with order */
.app-navbar .navbar-collapse {
  order: 10;
}

@media (min-width: 921px) {
  .app-navbar .navbar-collapse {
    order: 0;
  }
}

.app-navbar-brand {
  font-weight: 700;
  letter-spacing: 0.05em;
}

.app-navbar .navbar-toggler {
  border: none;
  padding: 0.2rem 0.4rem;
  box-shadow: none;
}

.app-navbar .navbar-toggler-icon {
  width: 1.2em;
  height: 1.2em;
}

.app-navbar .nav-link {
  color: var(--unselected);
  padding-bottom: calc(0.5rem - 3px);
  border-bottom: 3px solid transparent;
}

.app-navbar .nav-link.active {
  font-weight: 600;
  border-bottom-color: var(--unselected);
}

/* ── Shared sidebar panel ─────────────────────────────────── */

.sidebar-panel {
  width: 250px;
  flex-shrink: 0;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  padding: 0.6rem 0.9rem 0.3rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}

.sidebar-item.sidebar-selected {
  background-color: #e6eeff;
}

.sidebar-item.sidebar-selected:hover {
  background-color: #c5d0ff;
}

.sidebar-item.detected-present {
  border-left-color: var(--detected-present);
}
.sidebar-item.need-human-review {
  border-left-color: var(--need-human-review);
}
.sidebar-item.confirmed-present {
  border-left-color: var(--confirmed-present);
}
.sidebar-item.confirmed-absent {
  border-left-color: var(--confirmed-absent);
}
.sidebar-item.unusable-picture {
  border-left-color: var(--unusable-picture);
}
.sidebar-item.unchecked {
  border-left-color: var(--unchecked);
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}
.status-dot.has-count {
  width: auto;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
  padding: 0 5px;
}

.sidebar-item.need-human-review .status-dot {
  background-color: var(--need-human-review);
}
.sidebar-item.confirmed-present .status-dot {
  background-color: var(--confirmed-present);
}
.sidebar-item.confirmed-absent .status-dot {
  background-color: var(--confirmed-absent);
}
.sidebar-item.unusable-picture .status-dot {
  background-color: var(--unusable-picture);
}

/* Sub-bar: sits below the navbar on pages with a sidebar, mobile only */
.sub-bar {
  display: none;
  align-items: center;
  height: 40px;
  padding: 0 0.5rem;
  background-color: var(--nav-background);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Sidebar toggle button — hidden on desktop */
.sidebar-toggle {
  display: none;
}

/* Mobile backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 88px 0 0 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 99;
}

.sidebar-backdrop.sidebar-open {
  display: block;
}

/* Matches the navbar expanded breakpoint (921px) — use instead of d-lg-* in navbar */
@media (min-width: 921px) {
  .d-none.d-navbar-expanded-block {
    display: block !important;
  }
}

/* Shift navbar collapse from Bootstrap's 992px breakpoint to 920px */
@media (min-width: 921px) and (max-width: 991.98px) {
  .app-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .app-navbar .navbar-toggler {
    display: none;
  }
}

/* Mobile: sidebar becomes a slide-in drawer below 920px */
@media (max-width: 920px) {
  .sub-bar {
    display: flex;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  .sidebar-panel {
    position: fixed;
    top: 88px;
    left: -320px;
    height: calc(100vh - 88px);
    z-index: 100;
    transition: left 0.25s ease;
    box-shadow: none;
  }

  .sidebar-panel.sidebar-open {
    left: 0;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }
}

/* ── End shared sidebar ───────────────────────────────────── */

/* ── Train pass alert banner ──────────────────────────────── */

.tp-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.tp-alert-passes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tp-alert-btn.detected-present {
  background-color: var(--detected-present);
  border-color: var(--detected-present);
  color: #fff;
}

.tp-alert-btn.need-human-review {
  background-color: var(--need-human-review);
  border-color: var(--need-human-review);
  color: #fff;
}

.tp-alert-dismiss {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── End train pass alert banner ──────────────────────────── */

/* ── Train pass header (shared: systemview + carview) ────── */

.tp-header {
  padding: 0.75rem 1.25rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.tp-header-title {
  text-align: left;
}

/* ── End train pass header ────────────────────────────────── */

/* ── status box ───────────────────────────────────────────── */
.status-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.status-ok {
  background-color: var(--bs-success);
}

.status-error {
  background-color: var(--bs-danger);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.status-item + .status-item {
  padding-left: 0.6rem;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.status-label {
  white-space: nowrap;
}

.status-detail-dropdown {
  min-width: min(420px, calc(100vw - 1rem));
}

@media (max-width: 920px) {
  .status-detail-dropdown {
    position: fixed !important;
    transform: none !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    min-width: unset;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .status-detail-dropdown.show {
    animation: status-slidedown 0.2s ease;
  }

  @keyframes status-slidedown {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ── End status box ────────────────────────────────────────── */

/* ── user panel ────────────────────────────────────────────── */

.user-panel-dropdown {
  min-width: 160px;
}

/* ── End user panel ─────────────────────────────────────────── */

/* shared class to change the text colour of inferred tags */
.inferred-tag {
  color: var(--inferred-color);
}

/* ── Dark mode overrides ──────────────────────────────────────── */
[data-bs-theme="dark"] {
  --nav-background: var(--bs-body-bg);
  --unselected: #95d2e8;
  --selected: #6b7fff;
  --selected-hover: rgba(107, 127, 255, 0.7);
  --unchecked: #4a4a4a;
}

[data-bs-theme="dark"] .sidebar-item.sidebar-selected {
  background-color: #1e2a4a;
}

[data-bs-theme="dark"] .sidebar-item.sidebar-selected:hover {
  background-color: #2a3860;
}

[data-bs-theme="dark"] .cv-car-item:hover,
[data-bs-theme="dark"] .sv-tp-item:hover {
  background-color: rgba(107, 127, 255, 0.12);
}

[data-bs-theme="dark"] .cv-spring-selected {
  stroke: var(--selected);
}

/* Bogie toggle PNG icon is dark — invert it on the dark sub-bar */
[data-bs-theme="dark"] #cv-bogie-toggle img {
  filter: invert(1) brightness(1.8);
}

/* Bogie SVGs have hardcoded dark fill/stroke colours — keep them on white */
[data-bs-theme="dark"] .cv-bogie-svg {
  background-color: #fff;
  border-radius: 4px;
}
/* ── End dark mode overrides ──────────────────────────────────── */