/* ✍️ Tagesbericht – Erstellen & Ansicht (Design 4, Blue Accent) */

.wr-page{max-width:1120px;margin:0 auto;padding:16px 14px 28px;}

/* Sticky action bar */
.wr-top{
  position:sticky;
  top:calc(var(--wr-navh,92px) + 8px);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:16px;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.wr-title{display:flex;flex-direction:column;gap:2px}
.wr-title h1{margin:0;font-size:1.15rem;letter-spacing:.2px}
.wr-sub{opacity:.8;font-size:.95rem}

.wr-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Buttons */
.wr-btn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(226,232,240,.95);box-shadow:none}
.wr-btn:hover{background:rgba(255,255,255,.09)}
.wr-btn:disabled{opacity:.45;cursor:not-allowed}

.wr-btn-primary{
  background: var(--active-blue, linear-gradient(120deg, rgba(37,99,235,.9), rgba(59,130,246,.9)));
  border-color: rgba(59,130,246,.55);
  color:#fff;
  box-shadow: 0 0 10px rgba(59,130,246,.35);
}
.wr-btn-primary:hover{filter:brightness(1.05)}
.wr-btn-danger{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
  color: rgba(254,226,226,.95);
}
.wr-btn-danger:hover{background: rgba(239,68,68,.16)}

/* Cards / Sections */
.wr-card{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.wr-card h2{margin:0 0 10px 0;font-size:1.05rem}
.wr-help{opacity:.72;font-size:.95rem;margin-top:2px}

/* Inputs */
.wr-field{display:flex;flex-direction:column;gap:6px}
.wr-field label{opacity:.85;font-size:.95rem}
.wr-input, .wr-textarea, .wr-select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.95);
}
.wr-textarea{min-height:110px;resize:vertical}
.wr-input:focus, .wr-textarea:focus, .wr-select:focus{
  outline:2px solid rgba(59,130,246,.85);
  outline-offset:2px;
}

/* Grid */
.wr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wr-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width: 900px){.wr-grid3{grid-template-columns:1fr}}
@media (max-width: 800px){.wr-grid2{grid-template-columns:1fr}}

/* Pills (view mode) */
.wr-pill{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.95);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Selection buttons inside cards */
.wr-card .nav-btn.active{
  background: linear-gradient(180deg, rgba(34,197,94,.92), rgba(22,163,74,.78));
  border-color: rgba(74,222,128,.65);
  color:#f0fdf4;
  box-shadow: 0 0 0 2px rgba(34,197,94,.18), 0 8px 18px rgba(22,163,74,.18);
}

/* Small helpers */
.wr-muted{opacity:.78;font-size:.95rem}
.wr-msg{margin-top:10px}
.wr-msg.error{color:#ff6b6b}
.wr-hide{display:none !important}

/* Task blocks */
.wr-task{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.wr-task h3{margin:0 0 8px 0;font-size:1.0rem}
.wr-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ===== Design-4 Finish: Blue headings, better buttons, dark selects ===== */
.wr-top h1,
.wr-card h2,
.wr-card .wr-section-title{
  color: var(--accent, #3b82f6);
}

.wr-help{ color: var(--muted-2, rgba(255,255,255,.7)); }

/* Inline date hint (nur im Edit) */
.wr-inlinehint{
  margin-top:6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted-2, rgba(255,255,255,.75));
}

/* Buttons */
.wr-btn,
.wr-top .nav-btn,
.wr-card .nav-btn{
  border-radius: 14px !important;
  border: 1px solid var(--border, rgba(255,255,255,.14)) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text, rgba(255,255,255,.92)) !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.wr-btn:hover,
.wr-top .nav-btn:hover,
.wr-card .nav-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(37,99,235,.45) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.wr-btn:disabled,
.wr-top .nav-btn:disabled,
.wr-card .nav-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.wr-btn.wr-primary{
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(37,99,235,.72)) !important;
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.18);
}
.wr-btn.wr-primary:hover{
  border-color: rgba(96,165,250,.70) !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.24);
}

.wr-btn.wr-danger{
  background: linear-gradient(180deg, rgba(239,68,68,.92), rgba(239,68,68,.68)) !important;
  border-color: rgba(239,68,68,.55) !important;
  box-shadow: 0 10px 24px rgba(239,68,68,.16);
}
.wr-btn.wr-danger:hover{ border-color: rgba(252,165,165,.7) !important; }

.wr-btn.wr-ghost{
  background: rgba(255,255,255,.05) !important;
}

/* Inputs + Select (dark, passend zum Theme) */
.wr-input,
.wr-card input,
.wr-card textarea,
.wr-card select{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 10px 12px !important;
  outline: none;
}
.wr-card select{
  color-scheme: dark;
}
.wr-card select option,
.wr-card select optgroup{
  background-color: #0b1f3a;
  color: #e5e7eb;
}

/* View cleaner: disabled Inputs wirken wie Anzeige */
.wr-card input:disabled,
.wr-card textarea:disabled,
.wr-card select:disabled{
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.86) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Runde Cards erzwingen (falls irgendwo überschrieben) */
.wr-top, .wr-card{
  border-radius: 18px !important;
}

/* Fahrer/Beifahrer Radios im Dark besser sichtbar */
.wr-card input[type="radio"]{
  accent-color: var(--accent, #3b82f6);
}


/* --- Fahrzeug Picker (Design 4, blau) --- */
.wrveh-overlay{
  position:fixed; inset:0; z-index:9999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.wrveh-modal{
  width:min(980px, 96vw);
  max-height:min(88vh, 920px);
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(16,23,36,.86);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
}
.wrveh-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wrveh-title{ font-weight:700; color:#e8f0ff; letter-spacing:.2px; }
.wrveh-tabs{
  display:flex; gap:8px; padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:auto;
}
.wrveh-tab{
  white-space:nowrap;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(240,247,255,.92);
  cursor:pointer;
}
.wrveh-tab.active{
  border-color: rgba(74,222,128,.65);
  box-shadow: 0 0 0 2px rgba(34,197,94,.22);
  background: rgba(34,197,94,.16);
  color: #f0fdf4;
}
.wrveh-body{ padding:14px; overflow:auto; }
.wrveh-list{ display:flex; flex-direction:column; gap:14px; }
.wrveh-group-title{
  font-weight:700;
  color: rgba(191,219,254,.95);
  margin: 2px 0 8px 2px;
}
.wrveh-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}
.wrveh-item{
  display:flex; gap:10px; align-items:center;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(245,249,255,.95);
  text-align:left;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.wrveh-item:hover{ transform: translateY(-1px); border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.10); }
.wrveh-item.active{ border-color: rgba(74,222,128,.65); box-shadow: 0 0 0 2px rgba(34,197,94,.22); background: rgba(34,197,94,.12); }
.wrveh-icon{
  width:42px; height:42px; border-radius:12px;
  object-fit: contain;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}
.wrveh-icon.ph{ display:inline-block; width:42px; height:42px; border-radius:12px; background: rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.14); }
.wrveh-item-label{ font-weight:700; line-height:1.1; word-break: break-word; }
.wrveh-empty{ padding:14px; color: rgba(255,255,255,.7); }
.wrveh-rented{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px;
}
.wrveh-subtitle{ font-weight:700; margin-bottom:8px; color: rgba(240,247,255,.9); }
.wrveh-check{ display:flex; align-items:center; gap:10px; color: rgba(240,247,255,.88); margin-bottom:8px; }
.wrveh-actions{ margin-top:10px; display:flex; justify-content:flex-end; }


/* --- Vehicle pills + changes --- */
.wr-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.wr-vehIcon{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
}
.wr-pillText{ font-weight:700; letter-spacing:.2px; }

.wr-vehChangeRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.wr-vehChangeRow:first-child{ border-top:0; padding-top:0; }
.wr-vehChangeLeft{ display:flex; flex-direction:column; gap:6px; }
.wr-vehChangeRight{ display:flex; align-items:center; gap:10px; }
.wr-time{ max-width:140px; }

.wr-btnDanger{
  border-color: rgba(255,90,90,.35) !important;
}
.wr-btnDanger:hover{
  box-shadow:0 0 0 3px rgba(255,90,90,.12);
}


/* --- Kompakter Fahrzeugblock --- */
.wr-vehCompact{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.wr-vehCompactMain{
  min-width:min(320px, 100%);
  flex:1 1 320px;
}


/* Save toast */
.wr-toast{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(74,222,128,.42);
  background: linear-gradient(180deg, rgba(22,163,74,.96), rgba(21,128,61,.92));
  color: #f0fdf4;
  box-shadow: 0 16px 42px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
  font-weight: 800;
  letter-spacing: .2px;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
}
.wr-toast.show{
  animation: wrToastIn .18s ease-out forwards;
}
.wr-toast.hide{
  animation: wrToastOut .26s ease-in forwards;
}
@keyframes wrToastIn{
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wrToastOut{
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(.98); }
}



/* ===== Fahrzeug-Picker / Übersicht Fix ===== */
body.wr-modal-open{
  overflow:hidden !important;
}

.wrveh-overlay{
  z-index: 2147483647;
  pointer-events:auto;
}

.wrveh-modal{
  position:relative;
  z-index:2147483647;
}

.wrveh-body{
  overscroll-behavior: contain;
}

.wrveh-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

.wrveh-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height: 200px;
  padding:16px 14px;
  text-align:center;
}

.wrveh-icon{
  width:84px;
  height:84px;
  border-radius:16px;
}

.wrveh-icon.ph{
  width:84px;
  height:84px;
  border-radius:16px;
}

.wrveh-item-label{
  font-size:14px;
  font-weight:800;
  line-height:1.15;
}

.wrveh-roleRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
}

.wrveh-role{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:rgba(240,247,255,.95);
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}

.wrveh-role:hover{
  background:rgba(255,255,255,.12);
}

.wrveh-role.active,
.wrveh-item.active .wrveh-role{
  background: linear-gradient(180deg, rgba(34,197,94,.92), rgba(22,163,74,.78));
  border-color: rgba(74,222,128,.65);
  color:#f0fdf4;
}

.wr-pill-vehicle{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:260px;
  white-space:normal;
}

.wr-pillBody{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.wr-pillSub{
  opacity:.82;
  font-size:.95rem;
  font-weight:700;
}

.wr-vehIcon{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:contain;
}

.wr-vehChangeLeft .wr-pill-vehicle{
  min-width:0;
}

.wr-vehCompactMain:empty,
#wr-stdVehDisplay:empty,
#wr-vehMetaView:empty{
  display:none;
}