/* ==========================================================================
   Rescuefleet-Ops custom.css  (mit DRK-Farbwelt)
   ========================================================================== */

/* 1) Design Tokens */
:root {
  /* Primärpalette (DRK) */
  --drk-red: #e60005;
  /* DRK-Rot */
  --drk-red-60: #eb8264;
  /* 60% */
  --drk-red-30: #fac3af;
  /* 30% */

  /* Blaupalette */
  --rf-darkblue: #002d55;
  /* Dunkelblau */
  --rf-lightblue: #ebf5ff;
  /* Hellblau */
  --rf-blue-30: #b4c3d7;
  /* Blau 30% */
  --rf-blue-60: #698caf;
  /* Blau 60% */

  /* Neutrals */
  --rf-white: #ffffff;
  --rf-black: #000000;
  --rf-gray-50: #7f7f7f;

  /* Bootstrap Theme-Overrides */
  --bs-primary: var(--drk-red);
  --bs-secondary: var(--rf-darkblue);
  --bs-info: var(--rf-lightblue);
  --bs-success: #2e7d32;
  /* neutral belassen */
  --bs-warning: #d97706;
  /* neutral belassen */
  --bs-danger: var(--drk-red);
  --bs-light: #f8fafc;
  --bs-dark: #0f172a;

  /* Oberflächen */
  --rf-surface: #ffffff;
  --rf-surface-alt: #f5f7fb;
  --rf-border: #e5e7eb;
  --rf-container-x: 1rem;
  /* Basis-Padding seitlich */
  --rf-tap-min: 44px;
  /* Apple/Google Tap Target Guideline */
  --rf-font-base: clamp(14px, 3.5vw, 16px);
}

/* 2) Grundauftritt */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--drk-red);
  text-underline-offset: 2px;
}

a:hover {
  color: #b80004;
  text-decoration-thickness: 2px;
}

/* 3) Buttons (Primary = DRK-Rot) */
.btn-primary {
  --bs-btn-bg: var(--drk-red);
  --bs-btn-border-color: var(--drk-red);
  --bs-btn-hover-bg: color-mix(in oklab, var(--drk-red), white 12%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--drk-red), white 12%);
  --bs-btn-active-bg: color-mix(in oklab, var(--drk-red), white 6%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--drk-red), white 6%);
  --bs-btn-hover-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--drk-red);
  --bs-btn-border-color: var(--drk-red);
  --bs-btn-hover-bg: var(--drk-red);
  --bs-btn-hover-border-color: var(--drk-red);
  --bs-btn-active-bg: #cc0005;
  --bs-btn-active-border-color: #cc0005;
  --bs-btn-hover-color: #fff;
}

/* Subtle hover transitions without forcing dark/black */
.btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* 4) Badges / Chips in CI */
.badge-drk {
  background: var(--drk-red-30);
  color: #7a0017;
}

.badge-blue {
  background: var(--rf-blue-30);
  color: #0f2a45;
}

.badge-dark {
  background: var(--rf-darkblue);
  color: #fff;
}

.badge-light {
  background: var(--rf-lightblue);
  color: #0f2a45;
}

/* 5) Karten & Sektionen */
.card {
  border-radius: .85rem;
}

.card.border-0.shadow-sm {
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
}

.section-soft {
  background: var(--rf-surface-alt);
  border: 1px solid var(--rf-border);
  border-radius: 1rem;
}

/* 6) Navigation / Brand */
.navbar-brand img {
  height: 28px;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--drk-red);
}

/* 7) Avatar (Initialen) – DRK Verlauf */
.avatar-circle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--drk-red) 0%, #ff3345 100%);
}

.avatar-circle.sm {
  width: 28px;
  height: 28px;
  font-size: .8rem;
}

.avatar-circle.lg {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

/* 8) Tabellen & Formulare kompakter */
.table.rf-compact> :not(caption)>*>* {
  padding: .45rem .65rem;
}

.form-control,
.form-select {
  padding: .5rem .75rem;
}

.form-text {
  font-size: .8rem;
  color: #6b7280;
}

/* 9) Schicht-Statusleiste (unter der Nav) */
.shift-statusbar {
  padding: .75rem .9rem;
  border-radius: 1rem;
  background: var(--rf-darkblue);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
}

.shift-statusbar .meta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: .9rem;
}

.shift-statusbar .progress-wrap {
  margin-top: .5rem;
  background: rgba(255, 255, 255, .2);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.shift-statusbar .progress-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--rf-blue-60), var(--drk-red));
  width: var(--pct, 0%);
  transition: width .3s ease;
}

.shift-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: .6rem;
  font-size: .8rem;
  font-weight: 600;
}

.shift-pill.active {
  background: var(--rf-blue-30);
  color: #0f2a45;
}

.shift-pill.upcoming {
  background: var(--rf-lightblue);
  color: #0f2a45;
}

.shift-pill.ended {
  background: var(--drk-red-30);
  color: #7a0017;
}

/* 10) Alerts im DRK-Look */
.alert.rf {
  border: 0;
  border-left: 4px solid var(--drk-red);
  box-shadow: 0 6px 22px rgba(2, 6, 23, .08);
}

.alert.rf-info {
  border-left-color: var(--rf-blue-60);
}

.alert.rf-dark {
  border-left-color: var(--rf-darkblue);
}

/* 11) Utilities */
.text-drk {
  color: var(--drk-red) !important;
}

.text-darkblue {
  color: var(--rf-darkblue) !important;
}

.text-blue-60 {
  color: var(--rf-blue-60) !important;
}

.text-blue-30 {
  color: var(--rf-blue-30) !important;
}

.text-gray-50 {
  color: var(--rf-gray-50) !important;
}

.bg-drk {
  background: var(--drk-red) !important;
  color: #fff !important;
}

.bg-drk-soft {
  background: var(--drk-red-30) !important;
}

.bg-darkblue {
  background: var(--rf-darkblue) !important;
  color: #fff !important;
}

.bg-lightblue {
  background: var(--rf-lightblue) !important;
}

.bg-blue-30 {
  background: var(--rf-blue-30) !important;
}

.bg-blue-60 {
  background: var(--rf-blue-60) !important;
}

.border-subtle {
  border: 1px solid var(--rf-border) !important;
}

.rounded-2xl {
  border-radius: 1rem !important;
}

.shadow-soft {
  box-shadow: 0 10px 30px rgba(2, 6, 23, .10) !important;
}

.truncate-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 12) Tiles (Schnellzugriffe) */
.app-tile {
  display: block;
  position: relative;
  border: 0;
  border-radius: 1rem;
  padding: 1.1rem 1rem;
  background: #fff;
  box-shadow: 0 6px 20px rgba(2, 6, 23, .06);
}

.app-tile:hover {
  transform: translateY(-1px);
  transition: .2s ease;
}

.app-tile .icon-chip {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: .6rem;
  background: var(--rf-lightblue);
  color: var(--rf-darkblue);
}

/* 13) Footer/Bottom-Bar */
.bottom-bar {
  background: #fff;
  border-top: 1px solid var(--rf-border);
  padding: .6rem .9rem;
}

/* Inputs: DRK-Fokus */
.form-control:focus {
  border-color: var(--drk-red);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--drk-red), white 80%);
}

/* Roter Button: kein dunkles Hover, Weiß bleibt Weiß */
.btn[style*="--drk-red"] {
  --bs-btn-hover-bg: var(--drk-red);
  --bs-btn-hover-border-color: var(--drk-red);
  --bs-btn-hover-color: var(--rf-white);
}

@media (max-width: 767.98px) {
  body {
    font-size: var(--rf-font-base);
    line-height: 1.45;
  }

  .container,
  .container-fluid,
  .max-w-7xl {
    padding-left: var(--rf-container-x);
    padding-right: var(--rf-container-x);
  }
}

/* Links: bessere Lesbarkeit / Fokus */
@media (hover: none) and (pointer: coarse) {
  a:hover {
    color: var(--drk-red);
    text-decoration-thickness: 2px;
  }

  /* kein dunkleres Hover auf Touch */
}

/* Buttons: größere Tap-Fläche, harmonische Höhen */
@media (max-width: 575.98px) {
  .btn {
    min-height: var(--rf-tap-min);
    padding: .6rem .9rem;
    font-weight: 600;
    border-radius: .9rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: .45rem .7rem;
  }
}

/* Formulare: größere Felder, klare Labels */
@media (max-width: 575.98px) {

  .form-control,
  .form-select {
    min-height: var(--rf-tap-min);
    padding: .65rem .9rem;
    font-size: 1rem;
    border-radius: .85rem;
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .form-text {
    font-size: .85rem;
  }
}

/* Navbar / Branding */
@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 24px;
  }

  .navbar .nav-link {
    padding: .6rem .75rem;
    font-size: 1rem;
  }

  .navbar-toggler {
    padding: .45rem .6rem;
  }

  .offcanvas,
  .offcanvas-body {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* Karten / Sektionen dichter, aber fingerfreundlich */
@media (max-width: 767.98px) {
  .card {
    border-radius: 1rem;
  }

  .card .card-body {
    padding: 1rem;
  }

  .section-soft {
    border-radius: 1rem;
  }
}

/* Tabellen: horizontales Scrollen statt Quetschen */
@media (max-width: 767.98px) {

  .table-responsive,
  .table-wrap,
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table.rf-compact> :not(caption)>*>* {
    padding: .6rem .75rem;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }
}

/* Avatar / Icon Chips etwas größer für Tap */
@media (max-width: 575.98px) {
  .avatar-circle {
    width: 40px;
    height: 40px;
    font-size: .95rem;
  }

  .avatar-circle.sm {
    width: 32px;
    height: 32px;
    font-size: .85rem;
  }

  .app-tile .icon-chip {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Schnellzugriffe (Tiles) – 2er Grid auf XS, klare Targets */
@media (max-width: 575.98px) {
  .app-tile {
    padding: 1rem .9rem;
    border-radius: 1rem;
  }

  .row.g-3,
  .row.g-4 {
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .6rem;
  }
}

/* Schicht-Statusleiste: kompakter, gute Kontraste, keine Weiß-auf-Weiß-Fallen */
@media (max-width: 767.98px) {
  .shift-statusbar {
    padding: .7rem .8rem;
  }

  .shift-statusbar .meta {
    gap: .5rem;
    font-size: .95rem;
  }

  .shift-statusbar .progress-wrap {
    height: 10px;
  }

  .shift-pill {
    font-size: .85rem;
    padding: .3rem .6rem;
  }
}

/* Bottom-Bar: Safe-Area für iOS & Sticky */
@supports (padding: max(0px)) {
  .bottom-bar {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    z-index: 1030;
    backdrop-filter: saturate(120%) blur(8px);
  }
}

/* Alerts: etwas mehr Innenabstand auf kleinen Screens */
@media (max-width: 575.98px) {
  .alert.rf {
    padding: .85rem 1rem;
  }
}

/* Utilities: Truncates + Abstände */
@media (max-width: 575.98px) {

  .truncate-1,
  .truncate-2 {
    -webkit-line-clamp: 1;
  }

  /* auf Handy meist nur eine Zeile */
  .mb-xs-2 {
    margin-bottom: .5rem !important;
  }

  .mb-xs-3 {
    margin-bottom: .75rem !important;
  }
}

/* Fokus-Styles (sichtbar, aber soft im DRK-Look) */
@media (max-width: 991.98px) {

  .form-control:focus,
  .btn:focus,
  .nav-link:focus,
  .app-tile:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--drk-red), white 80%);
  }
}

/* Präferenz: reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Dunkelmodus-Vorbereitung (optional, falls body.dark genutzt wird) */
@media (max-width: 767.98px) {
  body.dark .bottom-bar {
    background: #0b1220;
    border-top-color: rgba(255, 255, 255, .08);
  }

  body.dark .app-tile {
    background: #0f172a;
    box-shadow: none;
  }
}

/* Form Icon Alignment (z. B. Font Awesome innerhalb Eingabefeldern) */
@media (max-width: 575.98px) {
  .input-with-icon {
    position: relative;
  }

  .input-with-icon .fa,
  .input-with-icon .fa-solid,
  .input-with-icon .fa-regular {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .8;
  }

  .input-with-icon .form-control {
    padding-left: 2.2rem;
  }
}

/* Kleinere Helferklassen */
@media (max-width: 575.98px) {
  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
  }
}

/* Shiftbar – kompakter auf Mobile, klare Reihenfolge */
@media (max-width: 575.98px) {
  .shiftbar {
    padding: .55rem .7rem !important;
  }

  .shiftbar .title-line {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: .1rem;
  }

  .shiftbar .subtle {
    opacity: .85;
  }

  .shiftbar .meta-line {
    font-size: .95rem;
    margin-top: .15rem;
  }

  .shiftbar .countdown {
    font-variant-numeric: tabular-nums;
  }
}

/* etwas kompakter allgemein unter der Leiste */
@media (max-width: 575.98px) {
  header[role="banner"] .p-6 {
    padding: 1rem !important;
  }

  .content-container {
    padding: 1rem !important;
  }
}