/* =========================
   Base + Layout
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:#f6f7f9;
  color:#111;
}

.container{ max-width:980px; margin:14px auto; padding:0 12px; }

.card{
  background:#fff;
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}

h2,h3{ margin:0 0 10px 0; }
.muted{ font-size:13px; opacity:.75; line-height:1.4; }

/* =========================
   Top navigation
   ========================= */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:#111;
  color:#fff;
}
.right{ display:flex; gap:10px; flex-wrap:wrap; }
.link{ color:#fff; text-decoration:none; font-size:14px; opacity:.9; }
.link:hover{ opacity:1; }

/* =========================
   Forms / Inputs
   ========================= */
label{
  display:block;
  font-size:12px;
  opacity:.8;
  margin:0 0 4px 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:16px;
  background:#fff;
  color:#111;
}

textarea{ min-height:110px; resize:vertical; }

button[type="submit"]{
  padding:12px;
  border-radius:12px;
  border:0;
  background:#111;
  color:#fff;
  cursor:pointer;
}
form button[type="submit"]{ margin-top:14px; }

/* Checkbox / Radio */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  border:1px solid #bbb;
  border-radius:4px;
  background:#fff;
  vertical-align:middle;
}

/* =========================
   Grid
   ========================= */
.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.grid > *{ min-width:0; }
.grid .full{ grid-column:1/-1; }

@media(max-width:980px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================
   Alerts
   ========================= */
.error{ background:#ffe3e3; padding:10px; border-radius:10px; }
.notice{ background:#e8f5e9; padding:10px; border-radius:10px; }

/* =========================
   Row helpers
   ========================= */
.rowwrap{ display:flex; gap:8px; flex-wrap:wrap; }

/* =========================
   Pills (a + button unified)
   ========================= */
.pill{
  -webkit-appearance:none;
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  width:auto;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;

  border:1px solid #ddd;
  background:#fff;
  color:#111;

  font-size:13px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.pill:hover{ background:#f3f4f6; }

/* Primary – Mint (Link + Button) */
.pill.primary{
  background:#f0f7f4;
  border-color:#bfe3d0;
  color:#14532d;
}
.pill.primary:hover{
  background:#dcf1e8;
}

/* Danger */
.pill.danger{
  border-color:#f0b4b4;
  background:#fff;
}
.pill.danger:hover{ background:#ffecec; }

/* ABGESAGT: rot, nicht klickbar */
.pill.cancelled{
  border-color:#f0b4b4;
  background:#ffecec;
  color:#b00020;
  pointer-events:none;
  cursor:default;
}

/* IMPORTANT: button.pill must not be full width */
button.pill{
  width:auto !important;
  padding:7px 11px !important;
  border-radius:999px !important;

  border:1px solid #ddd;
  background:#fff;
  color:#111;

  font-size:13px !important;
  line-height:1 !important;
  margin:0 !important;

  -webkit-appearance:none;
  appearance:none;
}

/* button primary = mint (wie .pill.primary) */
button.pill.primary{
  background:#f0f7f4 !important;
  border-color:#bfe3d0 !important;
  color:#14532d !important;
}
button.pill.primary:hover{
  background:#dcf1e8 !important;
  border-color:#bfe3d0 !important;
  color:#14532d !important;
  filter:none !important;
}

/* button danger */
button.pill.danger{
  border-color:#f0b4b4 !important;
  background:#fff !important;
}
button.pill.danger:hover{ background:#ffecec !important; }

/* =========================
   Lookup
   ========================= */
.lookup{
  margin-top:8px;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.lookup-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  border-top:1px solid #f1f1f1;
  background:#fff;
  cursor:pointer;
}
.lookup-item:first-child{ border-top:0; }
.lookup-item:hover{ background:#f6f7f9; }
.lookup-phone{ margin-left:8px; opacity:.7; font-size:13px; }
.lookup-empty{ padding:10px 12px; opacity:.7; font-size:14px; }

/* =========================
   Price box
   ========================= */
.pricebox{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#fafafa;
}
.pricebox .total{ margin-top:6px; font-size:18px; font-weight:800; }

/* =========================
   Date + Time – height sync + iOS safe
   ========================= */
:root{ --dt-height: 42px; }

.dt-row{
  display:flex;
  gap:8px;
  align-items:stretch !important;
}
.dt-row input[type="date"]{ flex:1; min-width:0; }
.dt-row select,
.dt-row input[type="time"]{ width:110px; min-width:110px; }

.dt-row input[type="date"],
.dt-row input[type="time"],
.dt-row select{
  height:var(--dt-height) !important;
  min-height:var(--dt-height) !important;
  max-height:var(--dt-height) !important;

  padding:0 10px !important;
  line-height:var(--dt-height) !important;

  font-family:-apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:16px !important;
  box-sizing:border-box !important;
}

/* Safari/iOS date quirks */
.dt-row input[type="date"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative;
  padding-right:38px !important;
}
.dt-row input[type="date"]::-webkit-datetime-edit{
  padding:0 !important;
  line-height:var(--dt-height) !important;
}
.dt-row input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  margin:0 !important;
  padding:0 !important;
  height:18px;
  width:18px;
  opacity:.7;
}

/* =========================
   Calendar list (index.php)
   ========================= */
.dayhdr{
  margin-top:10px;
  margin-bottom:10px;
  padding-top:10px;
  border-top:1px solid #eee;
  font-weight:800;
}

.calrow{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-top:1px dashed #eee;
}
.calleft{ width:230px; opacity:.9; min-width:0; }
.calright{ flex:1; min-width:0; }

@media(max-width:760px){
  .calrow{ flex-direction:column; }
  .calleft{ width:auto; }
}

.cal-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.cal-actions form{
  display:inline-flex;
  align-items:center;
  margin:0 !important;
  padding:0 !important;
}
.cal-actions .push-right{ margin-left:auto !important; }

/* Cancelled calendar rows */
.is-cancelled{ opacity:.82; }
.is-cancelled .calleft,
.is-cancelled .calright > *:not(.cal-actions){
  text-decoration:line-through;
}
.is-cancelled .cal-actions,
.is-cancelled .cal-actions *{
  text-decoration:none !important;
}

/* =========================
   Badges (base)
   ========================= */
.badge{
  display:inline-flex;
  align-items:center;

  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  line-height:1;

  border-radius:999px;
  border:1px solid #ddd;

  white-space:nowrap;
  margin-left:8px;
}

/* ONLY pickup/delivery badge right aligned */
.badge.pickup,
.badge.delivery,
.badge.abholung,
.badge.lieferung{
  float:right;
  margin-left:12px;
  margin-top:2px;
}
.calright::after,
.listtitle::after,
.ev::after{
  content:"";
  display:block;
  clear:both;
}

/* Pickup = green */
.badge.pickup,
.badge.abholung{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

/* Delivery = yellow */
.badge.delivery,
.badge.lieferung{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#92400e;
}

/* Inaktiv = red */
.badge.inaktiv{
  background:#ffecec;
  border-color:#f0b4b4;
  color:#b00020;
  font-weight:800;
}

/* Cancelled badge */
.badge.cancelled{
  background:#ffecec;
  border-color:#f0b4b4;
  color:#b00020;
  font-weight:800;
}

/* If cancelled -> force pickup/delivery badge red (strike stays allowed) */
.is-cancelled .badge.pickup,
.is-cancelled .badge.abholung,
.is-cancelled .badge.delivery,
.is-cancelled .badge.lieferung{
  background:#ffecec !important;
  border-color:#f0b4b4 !important;
  color:#b00020 !important;
  text-decoration:line-through;
}

/* =========================
   MACHINE LIST (INDEX)
   ========================= */
.machinebox{ margin-top:8px; }
.machinehdr .rowwrap{ margin-top:16px; }

.machineplain{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.machineplain .catsep{
  margin-top:24px;
  margin-bottom:14px;
  font-weight:700;
  opacity:.85;
}

/* Row: checkbox + text */
.machineplain label.mrow{
  display:grid !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  gap:14px;

  align-items:center !important;

  padding:14px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;

  font-size:16px;
  line-height:1.35;
  opacity:1;
}

.machineplain label.mrow input.mcheck{
  align-self:center !important;
  margin:0 !important;
}

/* Wrap long names (nicht "anywhere", sonst iPhone Buchstaben-Wrap) */
.machineplain .mtext{
  overflow-wrap:break-word;
  word-break:break-word;
}
.machineplain .mprice{ opacity:.75; font-size:13px; }

/* Checkbox: Standard eher klein (Desktop) */
.machineplain input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Touch-Geräte: Checkbox größer (iPhone/iPad) */
@media (hover: none) and (pointer: coarse){
  .machineplain input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    transform:scale(1.25) !important;
    transform-origin:center;
  }
}

/* iOS/Safari Touch: noch minimal größer */
@supports (-webkit-touch-callout: none){
  @media (hover: none) and (pointer: coarse){
    .machineplain input[type="checkbox"]{
      transform:scale(1.35) !important;
    }
  }
}

/* Desktop / iPad quer: 2 Spalten */
@media (min-width: 980px){
  .machineplain{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .machineplain .catsep{
    grid-column: 1 / -1;
    margin-top:18px;
    margin-bottom:8px;
  }
  .machineplain label.mrow{ margin:0; }
}

/* iPad (optional): auch 2 Spalten */
@media (min-width: 760px) and (max-width: 979px){
  .machineplain{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .machineplain .catsep{ grid-column:1/-1; }
}

/* =========================
   INVENTORY spacing
   ========================= */
.row{ padding:18px 0; }
.rowhead{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.row-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row-sub{
  margin:10px 0 14px;
  font-size:13px;
  opacity:.85;
  line-height:1.35;
}

/* =========================
   Customers list (nice cards per customer)
   ========================= */
.customerlist{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.customeritem{
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
  padding:14px;
}
.customeritem .listtitle{
  font-weight:800;
  line-height:1.25;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
}
.customeritem .listsub{
  margin-top:6px;
  font-size:13px;
  opacity:.85;
  line-height:1.35;
}
.customeritem .listsub + .listsub{ margin-top:6px; }
.customeritem .actions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.customeritem .actions .push-right{ margin-left:auto; }

/* =========================
   Star rating (fix: no full-width buttons)
   ========================= */
.stars{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  width:fit-content;
}
.stars .star{
  -webkit-appearance:none;
  appearance:none;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  padding:2px 4px !important;
  border:0 !important;
  border-radius:8px;

  background:transparent !important;

  font-size:22px;
  line-height:1;
  cursor:pointer;

  opacity:.35;
  color:#111;
}
.stars .star:hover{ opacity:.9; }

.stars[data-value="1"] .star[data-star="1"]{ opacity:1; }
.stars[data-value="2"] .star[data-star="1"],
.stars[data-value="2"] .star[data-star="2"]{ opacity:1; }
.stars[data-value="3"] .star[data-star="1"],
.stars[data-value="3"] .star[data-star="2"],
.stars[data-value="3"] .star[data-star="3"]{ opacity:1; }
.stars[data-value="4"] .star[data-star="1"],
.stars[data-value="4"] .star[data-star="2"],
.stars[data-value="4"] .star[data-star="3"],
.stars[data-value="4"] .star[data-star="4"]{ opacity:1; }
.stars[data-value="5"] .star[data-star="1"],
.stars[data-value="5"] .star[data-star="2"],
.stars[data-value="5"] .star[data-star="3"],
.stars[data-value="5"] .star[data-star="4"],
.stars[data-value="5"] .star[data-star="5"]{ opacity:1; }

.stars[data-value="1"] .star{ color:#b00020; }
.stars[data-value="2"] .star{ color:#b85c00; }
.stars[data-value="3"] .star{ color:#7a6b00; }
.stars[data-value="4"] .star{ color:#0a5a22; }
.stars[data-value="5"] .star{ color:#0a5a22; }

.stars .star-clear{
  font-size:18px;
  opacity:.6;
  margin-left:4px;
}
.stars .star-clear:hover{ opacity:1; }

/* =========================
   DELIVERY TYPE SELECT – badge colors
   (du setzt am <select> je nach Zustand:
   class="delivery-pickup" oder class="delivery-delivery")
   ========================= */
select.delivery-pickup,
select.delivery-delivery{
  font-weight:600;
  border-width:1px;
}

select.delivery-pickup{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

select.delivery-delivery{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#92400e;
}

select.delivery-pickup:focus,
select.delivery-delivery:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,0.04);
}

/* =========================
   MOBILE FIX: Kalender als 1-Spalten Agenda
   (verhindert "Buchstaben untereinander")
   ========================= */
@media (max-width: 900px){
  .calgrid{
    grid-template-columns: 1fr !important;
    gap:10px !important;
  }

  .calgrid .dow{ display:none !important; }
  .calgrid .day.is-empty{ display:none !important; }

  .day{
    min-height:auto !important;
    padding:10px !important;
  }

  .ev{
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
  }

  .ev-left{ width:100% !important; min-width:0 !important; }

  /* Text normal umbrechen */
  .ev-title,
  .ev-sub{
    word-break:normal !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }

  /* Buttons kompakter */
  .ev-actions{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:flex-start !important;
  }
  .ev-actions .pill{
    width:auto !important;
    padding:6px 10px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}
/* =========================
   Kalender: Desktop = Buttons untereinander
   Mobile (1-Spalte) = Buttons dürfen nebeneinander
   + Text Overflow Fix
   ========================= */

/* Grundsätzlich: nichts darf aus der Event-Card rauslaufen */
.ev{
  max-width:100% !important;
  overflow:hidden !important;
  align-items:stretch !important;
}
.ev-left{
  min-width:0 !important;
  max-width:100% !important;
}

/* Text: normal umbrechen (kein "Buchstaben-Stacking") */
.ev-title,
.ev-sub{
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}

/* Desktop / iPad / alles > 760px:
   Buttons untereinander, damit rechts nix abgeschnitten wird */
@media (min-width: 901px){
  .ev{
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:6px !important;
  }

  .ev-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }

  .ev-actions .pill{
    width:auto !important;
    max-width:100% !important;
    white-space:nowrap !important;
  }
}

/* Mobile 1-Spalte (dein Agenda-Mode):
   Buttons dürfen nebeneinander + umbrechen */
@media (max-width: 900px){
  .ev{
    flex-direction:column !important;
    gap:6px !important;
  }

  .ev-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:flex-start !important;
    align-items:center !important;
  }

  .ev-actions .pill{
    width:auto !important;
    max-width:100% !important;
    padding:6px 10px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}

/* =========================
   Autofill (Safari/Chrome) – blau/gelb entfernen
   ========================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#111 !important;
  -webkit-box-shadow:0 0 0px 1000px #fff inset !important;
  box-shadow:0 0 0px 1000px #fff inset !important;
  transition: background-color 999999s ease-in-out 0s;
}

/* Account – Admin User Actions */
.user-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:14px;
}

.user-admin-box{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fafafa;
}

.user-admin-box h4{
  margin:0 0 8px 0;
  font-size:14px;
  font-weight:800;
}

@media(max-width:760px){
  .user-admin-grid{
    grid-template-columns:1fr;
  }
}

/* ===== account.php (ausgelagert aus <style>) ===== */

/* Autofill: blau/gelb entfernen */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#111 !important;
  -webkit-box-shadow:0 0 0px 1000px #fff inset !important;
  box-shadow:0 0 0px 1000px #fff inset !important;
  transition: background-color 999999s ease-in-out 0s;
}

.acc-sep{ margin-top:10px; border-top:1px solid #eee; padding-top:10px; }

.acc-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.acc-actions .push-right{ margin-left:auto; }

.user-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.user-admin-box{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fafafa;
}
@media(max-width:760px){
  .user-admin-grid{ grid-template-columns:1fr; }
}

/* Inline live validation UI */
.field-ok{ border-color:#a7f3d0 !important; background:#ecfdf5 !important; }
.field-bad{ border-color:#f0b4b4 !important; background:#ffecec !important; }
.hint{ margin-top:6px; font-size:13px; opacity:.85; line-height:1.35; }

/* ===== Rolle: Betrachter Badge rot (Farbton wie danger) ===== */
.badge.role-viewer{
  background:#fff5f5;
  border:1px solid #f0b4b4;
  color:#b00;
}
/* ===== Rollen-Badges ===== */

/* Viewer = rot (wie danger) */
.badge.role-viewer{
  background:#fff5f5;
  border:1px solid #f0b4b4;
  color:#b00;
}

/* Staff = gelb */
.badge.role-staff{
  background:#fff7cc;
  border:1px solid #f2d36b;
  color:#7a5a00;
}

/* =========================================================
   CALENDER_VIEW (Month Grid) – GLOBAL STYLES
   (diese Klassen fehlen dir aktuell in style.css)
   ========================================================= */

/* Wrapper */
.calwrap{ display:grid; gap:12px; }

/* iPhone Safe-Area: verhindert "rechts abgeschnitten" durch Notch/Insets */
.card.calwrap{
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  overflow-x: hidden;
  max-width: 100%;
}

/* Top bar (Prev/Today/Next + Filter) */
.calnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  min-width:0;
}
.calnav .left,
.calnav .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}

/* Filterbar */
.filterbar form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:0;
  min-width:0;
  max-width:100%;
}
.filterbar .muted{ margin:0; }
.filterbar select,
.filterbar a.pill,
.filterbar button.pill{
  height:40px;
  line-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  width:auto;
  margin:0;
  vertical-align:middle;
  min-width:0;
  max-width:100%;
}
.filterbar select{
  line-height:normal; /* iOS */
  padding:0 10px;
  max-width: 100%;
}

/* Month grid */
.calgrid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
}
.dow{
  font-size:12px;
  opacity:.75;
  font-weight:800;
  padding:0 2px;
  text-align:center;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Day cell */
.day{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  background:#fff;
  min-height:110px;
  overflow:hidden;
  min-width:0;
}
.day.is-empty{ background:#fafafa; }
.day.is-today{ border:2px solid #d11; }

.daynum{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  margin-bottom:6px;
  font-weight:800;
  min-width:0;
}
.daynum > div{ min-width:0; }
.daynum small{
  font-weight:700;
  opacity:.65;
  flex:0 0 auto;
  white-space:nowrap;
}

/* Event card inside day */
.ev{
  border:1px solid #eee;
  border-radius:12px;
  padding:8px 10px;
  margin-top:8px;
  background:#fff;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  min-width:0;
}
.ev-left{
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
}
.ev-title{ font-weight:800; line-height:1.2; }
.ev-sub{ font-size:12px; opacity:.8; line-height:1.25; margin-top:2px; }

/* Actions area (Buttons) */
.ev-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  margin-left:auto;
}
.ev-actions .pill{ white-space:nowrap; width:auto; }

/* smaller devices */
@media (max-width: 760px){
  .calgrid{ gap:8px; }
  .day{ min-height:95px; padding:9px; }
  .ev{ padding:8px; }
}
@media (max-width: 430px){
  .calgrid{ gap:6px; }
  .day{ padding:7px; min-height:88px; border-radius:12px; }
  .dow{ font-size:11px; }
  .daynum{ margin-bottom:5px; }
  .daynum small{ font-size:11px; }
  .ev{ padding:7px; border-radius:10px; }
  .ev-title{ font-size:12px; }
  .ev-sub{ font-size:11px; }
  .ev-actions .pill{ height:34px; line-height:34px; }
}
@media (max-width: 360px){
  .calgrid{ gap:5px; }
  .day{ padding:6px; }
  .dow{ font-size:10px; }
  .daynum small{ font-size:10px; }
  .ev-actions .pill{ height:32px; line-height:32px; }
}
/* =========================================================
   DARK MODE (minimal-invasiv)
   Auto via OS setting: prefers-color-scheme: dark
   -> DIESEN BLOCK ans ENDE deiner style.css kopieren
   ========================================================= */

@media (prefers-color-scheme: dark){

  /* Base */
  body{
    background:#0b0d10;
    color:#e9eef5;
  }

  /* Top nav bleibt dunkel, aber etwas “ruhiger” */
  .top{
    background:#0a0c10;
    color:#e9eef5;
  }
  .link{ color:#e9eef5; opacity:.92; }
  .link:hover{ opacity:1; }

  /* Cards / surfaces */
  .card,
  .day,
  .ev,
  .customeritem,
  .lookup,
  .lookup-item,
  .stars,
  .pricebox,
  .user-admin-box,
  .machineplain label.mrow{
    background:#11151b;
    color:#e9eef5;
    border-color:#263041;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
  }

  /* Subtle surfaces */
  .day.is-empty,
  .pricebox,
  .user-admin-box{
    background:#0f1319;
  }

  /* Headings + muted text: lieber echte Farbe statt opacity */
  .muted,
  label,
  .row-sub,
  .lookup-phone,
  .lookup-empty,
  .dow,
  .ev-sub,
  .calleft{
    color:#b9c3d3 !important;
    opacity:1 !important;
  }

  /* Separators / borders */
  .dayhdr,
  .calrow,
  .lookup,
  .lookup-item,
  .customeritem,
  .machineplain label.mrow,
  .day:not(.is-today),
.ev{
  border-color:#263041 !important;
}

  /* Inputs */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    background:#0f1319;
    color:#e9eef5;
    border-color:#2b364a;
  }
  input::placeholder,
  textarea::placeholder{
    color:#93a0b5;
  }

  /* Checkbox / Radio */
  input[type="checkbox"],
  input[type="radio"]{
    background:#0f1319;
    border-color:#2b364a;
  }

  /* Submit button */
  button[type="submit"]{
    background:#e9eef5;
    color:#0b0d10;
  }

  /* Pills */
  .pill,
  button.pill{
    background:#0f1319 !important;
    color:#e9eef5 !important;
    border-color:#2b364a !important;
  }
  .pill:hover,
  button.pill:hover{
    background:#141a22 !important;
  }

  /* Primary pill (mint) */
  .pill.primary,
  button.pill.primary{
    background:#0f241a !important;
    border-color:#1f5a3c !important;
    color:#bff0d5 !important;
  }
  .pill.primary:hover,
  button.pill.primary:hover{
    background:#133021 !important;
  }

  /* Danger pill */
  .pill.danger,
  button.pill.danger{
    border-color:#6a2a2a !important;
    background:#161014 !important;
    color:#ffd6d6 !important;
  }
  .pill.danger:hover,
  button.pill.danger:hover{
    background:#1d1217 !important;
  }

  /* Cancelled pill/badge (deutlich dunkler) */
  .pill.cancelled,
  .badge.cancelled{
    background:#1a0b0e !important;
    border-color:#6b2a33 !important;
    color:#ffd6d6 !important;
  }

  /* Alerts */
  .error{
    background:#2a1416;
    color:#ffd6d6;
  }
  .notice{
    background:#13261a;
    color:#c9f3da;
  }

  /* Badges base */
  .badge{
    background:#0f1319;
    border-color:#2b364a;
    color:#e9eef5;
  }

  /* Pickup / Delivery badges */
  .badge.pickup,
  .badge.abholung{
    background:#0f241a;
    border-color:#1f5a3c;
    color:#bff0d5;
  }
  .badge.delivery,
  .badge.lieferung{
    background:#2a200f;
    border-color:#6b4a19;
    color:#ffe2b8;
  }

  /* Inaktiv badge */
  .badge.inaktiv{
    background:#1a0b0e;
    border-color:#6b2a33;
    color:#ffd6d6;
  }

  /* Calendar today border */
  .day.is-today{
    border-color:#ff4d4d;
  }

  /* Lookup hover */
  .lookup-item:hover{
    background:#141a22;
  }

  /* Select delivery color variants */
  select.delivery-pickup{
    background:#0f241a;
    border-color:#1f5a3c;
    color:#bff0d5;
  }
  select.delivery-delivery{
    background:#2a200f;
    border-color:#6b4a19;
    color:#ffe2b8;
  }
  select.delivery-pickup:focus,
  select.delivery-delivery:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(255,255,255,0.06);
  }

  /* ===== CANCELLED / ABGESAGT: ganze Box dunkler + Text klar ===== */

  /* komplette abgesagte Event-Box (Month view) */
  .is-cancelled.ev,
  .is-cancelled .ev{
    background:#06090f !important;
    border-color:#55242a !important;
    box-shadow:0 12px 28px rgba(0,0,0,.55) !important;
  }

  /* NICHT per opacity “ausgrauen” – macht Text unlesbar */
  .is-cancelled{ opacity:1 !important; }

  .is-cancelled .calleft,
  .is-cancelled .calright,
  .is-cancelled .ev-title,
  .is-cancelled .ev-sub{
    color:#e6edf7 !important;
    opacity:1 !important;
  }

  /* Strike-through sichtbar, aber nicht matschig */
  .is-cancelled .calleft,
  .is-cancelled .calright > *:not(.cal-actions),
  .is-cancelled .ev-title,
  .is-cancelled .ev-sub{
    text-decoration-color:#93a0b5 !important;
  }

  /* cancelled pickup/delivery (du forcest die ja rot) -> dunkelrot */
  .is-cancelled .badge.pickup,
  .is-cancelled .badge.abholung,
  .is-cancelled .badge.delivery,
  .is-cancelled .badge.lieferung{
    background:#1a0b0e !important;
    border-color:#6b2a33 !important;
    color:#ffd6d6 !important;
    text-decoration-color:#93a0b5 !important;
  }

  /* Autofill in dark (sonst bleibt weiß) */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color:#e9eef5 !important;
    -webkit-box-shadow:0 0 0px 1000px #0f1319 inset !important;
    box-shadow:0 0 0px 1000px #0f1319 inset !important;
    transition: background-color 999999s ease-in-out 0s;
  }


    /* =========================================================
     CANCELLED / ABGESAGT: schraffiert (wirkt heller, bleibt dark)
     gilt für: customeritem, listrow, month-view ev
     ========================================================= */

  /* listrow soll wie eine kleine Card wirken (nur wenn du es willst) */
  .listrow{
    border-radius:12px;
    padding:12px;
    border:1px solid #263041;
    background:#11151b;
  }

  /* Schraffur: 2 Layer (Basis + diagonale Streifen) */
  .customeritem.is-cancelled,
  .listrow.is-cancelled,
  .is-cancelled.ev,
  .is-cancelled .ev{
    border-color:#55242a !important;

    /* Basis etwas heller als #04060a, aber nicht “hell” */
    background-color:#0f141c !important;

    /* Diagonale Streifen: sehr subtil */
    background-image:
      repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 8px,
        rgba(0,0,0,0.00) 8px,
        rgba(0,0,0,0.00) 16px
      ) !important;

    box-shadow:0 12px 28px rgba(0,0,0,.55) !important;
  }

  /* Text in cancelled: nicht ausgrauen */
  .customeritem.is-cancelled,
  .listrow.is-cancelled,
  .is-cancelled{
    opacity:1 !important;
  }

  .customeritem.is-cancelled .muted,
  .listrow.is-cancelled .muted,
  .customeritem.is-cancelled .listsub,
  .listrow.is-cancelled .listsub,
  .is-cancelled .ev-sub{
    color:#c6d0de !important;
    opacity:1 !important;
  }

  .customeritem.is-cancelled .listtitle,
  .listrow.is-cancelled .listtitle,
  .is-cancelled .ev-title{
    color:#eef3fb !important;
  }

  /* Strike-through sichtbar */
  .is-cancelled .calleft,
  .is-cancelled .calright > *:not(.cal-actions),
  .is-cancelled .ev-title,
  .is-cancelled .ev-sub{
    text-decoration-color:#93a0b5 !important;
  }
}

/* =========================
   DARK MODE – Inputs dunkler + Placeholder kontrastreicher
   (ans ENDE der style.css)
   ========================= */
@media (prefers-color-scheme: dark){

  /* Inputs: Hintergrund dunkler, Border etwas klarer */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    background:#0a0e13 !important;   /* dunkler als #0f1319 */
    border-color:#334159 !important; /* etwas mehr Kontrast */
    color:#e9eef5 !important;
  }

  /* Placeholder: sichtbar, aber nicht grell */
  input::placeholder,
  textarea::placeholder{
    color:#aab6c9 !important;        /* deutlich lesbarer */
    opacity:1 !important;            /* wichtig für iOS/Safari */
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder{
    color:#aab6c9 !important;
    opacity:1 !important;
  }

  /* Select (iOS): Text/Arrow wirkt sonst manchmal "washed" */
  select{
    color:#e9eef5 !important;
  }

  /* Focus: etwas klarer, ohne "Neon" */
  input:focus,
  select:focus,
  textarea:focus{
    outline:none !important;
    border-color:#465a7a !important;
    box-shadow:0 0 0 2px rgba(255,255,255,0.06) !important;
  }

  /* Autofill in Dark: darf NICHT wieder hell werden */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color:#e9eef5 !important;
    -webkit-box-shadow:0 0 0px 1000px #0a0e13 inset !important;
    box-shadow:0 0 0px 1000px #0a0e13 inset !important;
  }
}

/* Maintenance checklist: checkbox rechts */
.maint-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.maint-row .maint-title{
  flex:1;
  min-width:0;
}
.maint-row .maint-done{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}