:root {
  --app-navy: #10243e;
  --app-blue: #1c4e80;
  --app-accent: #f2a71b;
  --app-bg: #f4f6f9;
}

body {
  background: var(--app-bg);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.app-navbar {
  background: linear-gradient(90deg, var(--app-navy), var(--app-blue));
}

.app-navbar .nav-link {
  color: #dbe6f2;
  font-weight: 500;
}

.app-navbar .nav-link.active {
  color: #fff;
  border-bottom: 2px solid var(--app-accent);
}

.table thead {
  background: var(--app-navy);
  color: #fff;
}

.card {
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.summary-card {
  background: #fff;
  border-radius: .5rem;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  border-left: 4px solid var(--app-accent);
}

.summary-card .value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--app-navy);
}

.summary-card .label {
  color: #6c757d;
  font-size: .8rem;
  text-transform: uppercase;
}

.zysk-dodatni { color: #157347; font-weight: 600; }
.zysk-ujemny { color: #b02a37; font-weight: 600; }

.action-btn {
  cursor: pointer;
  margin-right: .4rem;
}

.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Okna szczegółów (Trasa/Pojazd/Kierowca/Naczepa) - 20% większe niż standardowe modal-xl (1140px) */
.modal-xl-powiekszony {
  max-width: 1368px;
}

/* Rozwijane listy "używane historycznie" - żeby nie zajmowały dużo miejsca */
.szczegoly-rozwijana summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--app-blue);
  user-select: none;
}
.szczegoly-rozwijana summary::-webkit-details-marker {
  color: var(--app-blue);
}
.szczegoly-rozwijana[open] summary {
  margin-bottom: .4rem;
}

body.menu-lewo .brand-logo,
body.menu-prawo .brand-logo {
  height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* ---------- Logowanie ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-navy), var(--app-blue));
}

.login-card {
  background: #fff;
  border-radius: .75rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.nav-user-box {
  margin-left: auto;
}

/* ---------- Układ menu: góra (domyślny) ---------- */
body.menu-gora #mainNavbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ---------- Układ menu: lewy / prawy bok ---------- */
body.menu-lewo #appShell,
body.menu-prawo #appShell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

body.menu-prawo #appShell {
  flex-direction: row-reverse;
}

body.menu-lewo #mainNavbar,
body.menu-prawo #mainNavbar {
  flex: 0 0 240px;
  max-width: 240px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-items: stretch;
}

body.menu-lewo #mainNavbar .container-fluid,
body.menu-prawo #mainNavbar .container-fluid {
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

body.menu-lewo #mainNavbar .navbar-collapse,
body.menu-prawo #mainNavbar .navbar-collapse {
  flex-direction: column;
  align-items: stretch;
  display: flex !important;
}

body.menu-lewo #mainNavbar .navbar-nav,
body.menu-prawo #mainNavbar .navbar-nav {
  flex-direction: column;
  width: 100%;
}

body.menu-lewo #mainNavbar .navbar-toggler,
body.menu-prawo #mainNavbar .navbar-toggler {
  display: none;
}

body.menu-lewo #mainNavbar .nav-user-box,
body.menu-prawo #mainNavbar .nav-user-box {
  margin-left: 0;
  margin-top: auto;
  flex-direction: column;
  align-items: stretch !important;
  padding-top: 1rem;
}

body.menu-lewo #app,
body.menu-prawo #app {
  flex: 1 1 auto;
  min-width: 0;
}