/* ===========================================================
   mitteilungen.css – High-contrast UI + mobile usability
   (Block 1 + Block 2 kombiniert; Block 2 hat Priorität)
   =========================================================== */

/* ---------- Container & Grundlayout ---------- */
.fancy-modal .modal-content{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.25);

  /* aus Block 2: Flex-Layout + Höhe begrenzen */
  display: flex;
  flex-direction: column;
  max-height: 92vh;           /* nie höher als Viewport */
}

/* ---------- Gradient Header mit Titel ---------- */
/* (du kannst die Farben hier später ersetzen – z.B. euer Gelb) */
.fancy-modal .modal-header.gradient{
  background: linear-gradient(135deg, #FFD200, #FFC107);
  color: #222;

  /* aus Block 1: Titel/Close nebeneinander */
  display:flex;
  align-items:center;
}
.fancy-modal .compact-header{ padding: 12px 16px; display:flex; align-items:center; gap:12px; }
.fancy-modal .modal-title-wrap{ font-weight: 800; font-size: 1.35rem; margin:0; white-space:normal; overflow:hidden; flex:1 1 auto; }
.fancy-modal .modal-header .close{ color:#222; opacity:.95; text-shadow:none; font-size:1.6rem; margin-left:auto; padding:6px 8px; line-height:1; }

/* ---------- Prominenter Info-Balken im Header ---------- */
.header-sub{
  background: linear-gradient(135deg, #FFD200, #FFC107);
  color:#222;
  padding:10px 16px 12px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.prominent-time{ display:flex; flex-direction:column; gap:4px; }
.prominent-time .time-display{ font-size:2.6rem; line-height:1; font-weight:900; letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.prominent-time .date-subtle{ font-size:1.05rem; opacity:.95; display:flex; align-items:center; gap:8px; color:#222; }
.prominent-time .fa{ opacity:.95; }

.house-highlight{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.18); padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.22); }
.house-highlight .fa{ color:#222; opacity:.95; }
.house-highlight .house-text{ font-size:1.3rem; font-weight:900; letter-spacing:.2px; color:#222; }

/* ---------- Body-Chips ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 16px 8px; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-size:.95rem; padding:7px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#0f172a; }
.chip .fa{ opacity:.7; }
.time-remaining{ color:#2e7d32; font-weight:700; }
.time-overdue{ color:#c62828; font-weight:700; }
.time-now{ color:#1565c0; font-weight:700; }

/* ---------- Map ---------- */
.mapbox{ width:100%; height:230px; margin:8px 16px 12px; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; }

/* ---------- Footer / Aktionen ---------- */
.modal-actions{ display:flex; justify-content:space-between; gap:12px; padding:8px 16px 16px; }
.modal-actions .btn{ border-radius:12px; padding:12px 16px; font-weight:800; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.modal-actions .btn.action-accept{ min-width:48%; }
.modal-actions .btn.action-reject{ min-width:48%; }

/* ---------- Toasts ---------- */
.toast-root{ position:fixed; right:16px; top:16px; z-index:1060; display:flex; flex-direction:column; gap:8px; }
.toast{ opacity:0; transform:translateY(-6px); transition:all .3s ease; padding:10px 14px; border-radius:12px; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.toast.show{ opacity:1; transform:translateY(0); }
.toast-info{ background:#2563eb; } .toast-success{ background:#16a34a; } .toast-error{ background:#dc2626; }

/* ---------- Spinner ---------- */
.spinner-overlay{ position:fixed; inset:0; background:rgba(255,255,255,.55); display:none; z-index:1030; pointer-events:none; }
.spinner-overlay.active{ display:grid; place-items:center; z-index:2000; pointer-events:auto; }
#spinner-overlay[hidden]{ display:none!important; }
.spinner{ width:44px; height:44px; border:4px solid #e5e7eb; border-top-color:#0ea5e9; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Mobile Tweaks (Block 1) ---------- */
@media (max-width:480px){
  .fancy-modal .modal-title-wrap{ font-size:1.15rem; }
  .prominent-time .time-display{ font-size:2.2rem; }
  .house-highlight .house-text{ font-size:1.15rem; }
}

/* ===========================================================
   AB HIER: Dominante Mobile-Usability & Zentrierung (Block 2)
   =========================================================== */

/* Dialog schmal + randnah (mobil) */
.fancy-modal .modal-dialog{
  margin:10px auto;
  width:auto;
  max-width:520px;
  float:none;                 /* falls Theme floats setzt */
}

/* kompakter Header */
.fancy-modal .modal-header{
  flex:0 0 auto;
  padding:10px 14px;
}

/* Body scrollt (nicht die Seite) */
.fancy-modal .modal-body{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px;
}

/* Footer immer sichtbar */
.fancy-modal .modal-footer{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  padding:10px 12px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -4px 10px rgba(0,0,0,.05);
  gap:8px;
}
.fancy-modal .modal-footer .btn{
  min-height:44px;
  width:50%;
  font-weight:600;
}

/* Karte im Modal begrenzen */
.fancy-modal .modal-body #map,
.fancy-modal .modal-body .leaflet-container{
  height:38vh !important;
  max-height:420px;
  min-height:220px;
  border-radius:8px;
}

/* Leaflet-Controls kompakt */
.fancy-modal .leaflet-control-zoom a{
  width:30px; height:30px; line-height:30px;
}

/* Z-Index: Modal über Floating-Buttons */
.fancy-modal, .fancy-modal .modal, .fancy-modal .modal-backdrop{ z-index:1060; }
.toast-root{ z-index:1070; }

/* Extra kompakt für sehr kleine Geräte */
@media (max-width:400px){
  .fancy-modal .modal-title{ font-size:16px; }
  .fancy-modal .modal-header{ padding:8px 12px; }
  .fancy-modal .modal-body{ padding:8px 10px; }
  .fancy-modal .modal-footer{ padding:8px 10px; }
  .fancy-modal .modal-footer .btn{ font-size:15px; }
}

/* ---------- Modal mittig ausrichten ---------- */
@media (min-height:540px){
  .fancy-modal .modal{
    display:flex !important;
    align-items:center;        /* vertikal mittig */
    justify-content:center;    /* horizontal mittig */
  }
  .fancy-modal .modal-dialog{ margin:0 auto; }
}
/* Fallback für Browser ohne Flex */
@supports not (align-items: center){
  .fancy-modal .modal{ text-align:center; }
  .fancy-modal .modal:before{
    content:'';
    display:inline-block;
    height:100vh;
    vertical-align:middle;
    margin-right:-4px;
  }
  .fancy-modal .modal-dialog{
    display:inline-block;
    text-align:left;
    vertical-align:middle;
    margin:0 auto;
  }
}

/* ---------- Header schlanker (dominiert) ---------- */
.fancy-modal .modal-header.gradient.compact-header{
  padding:8px 12px;            /* schlanker */
  min-height:0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.fancy-modal .modal-header .modal-title,
.fancy-modal .modal-header .modal-title-wrap{
  font-size:17px;
  line-height:1.2;
  font-weight:600;
  margin:0;
}
/* Close-Button fix: immer oben rechts im Header */
.fancy-modal .modal-header{ 
  position: relative;                /* Bezugspunkt */
}

.fancy-modal .modal-header .close{
  position: absolute;
  top: .5rem;                        /* an Padding anpassen */
  right: .5rem;
  margin: 0 !important;              /* überschreibt ältere Margins */
  padding: 2px 6px;
  line-height: 1;
  font-size: 1.6rem;                 /* wie gehabt */
  opacity: .6;
}
.fancy-modal .modal-header .close:hover{ opacity:.85; }
.fancy-modal .modal-header .close:hover{ opacity:.85; }
.fancy-modal .modal-header + .modal-body{ border-top:0; }

@media (max-width:420px){
  .fancy-modal .modal-header.gradient.compact-header{ padding:6px 10px; }
  .fancy-modal .modal-header .modal-title,
  .fancy-modal .modal-header .modal-title-wrap{ font-size:16px; }
  .fancy-modal .modal-header .close{ font-size:22px; padding:2px 4px; }
}
@media (min-width:992px){
  .fancy-modal .modal-header.gradient.compact-header{ padding:10px 14px; }
  .fancy-modal .modal-header .modal-title,
  .fancy-modal .modal-header .modal-title-wrap{ font-size:18px; }
}
/* === Buttons "Annehmen/Ablehnen": Text bei wenig Platz ausblenden === */

/* Schwelle 1: sehr schmale Geräte */
@media (max-width: 380px){
  .fancy-modal .modal-footer .btn.action-accept,
  .fancy-modal .modal-footer .btn.action-reject{
    /* Text verschwinden lassen, Icon behalten */
    font-size: 0;                 /* versteckt Text-Knoten */
    padding: 10px 12px;
    min-width: 54px;              /* gutes Touch-Ziel */
  }
  .fancy-modal .modal-footer .btn.action-accept i,
  .fancy-modal .modal-footer .btn.action-reject i{
    font-size: 20px;              /* Icon gut lesbar */
    margin: 0;                    /* kein Abstand für Text nötig */
  }
}

/* Schwelle 2: etwas breiter, aber noch knapp – Text schmaler */
@media (min-width: 381px) and (max-width: 460px){
  .fancy-modal .modal-footer .btn.action-accept,
  .fancy-modal .modal-footer .btn.action-reject{
    padding: 10px 12px;
    font-size: 0.9rem;            /* kleinerer Text statt komplett weg */
  }
  .fancy-modal .modal-footer .btn.action-accept i,
  .fancy-modal .modal-footer .btn.action-reject i{
    margin-right: 6px;
  }
}