/* ui-messages.css – Statuspunkte, Modals, Toasts (global wiederverwendbar) */

.status-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#6b7280;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Alternativsteuerung per data-level, z. B. <span class="status-dot" data-level="ok"> */
.status-dot[data-level="ok"]   { background:#1f8b4c !important; }
.status-dot[data-level="warn"] { background:#b76e00 !important; }
.status-dot[data-level="fail"] { background:#d95757 !important; }
.status-ok{background:#1f8b4c!important}
.status-warn{background:#b76e00!important}
.status-fail{background:#d95757!important}

/* ---------- Modal Basis ---------- */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,18,.55);
  backdrop-filter:blur(2px);
  z-index:30000;
}

/* Ensure confirm/dialog (#alert) sits above other modals like preview */
#alert.modal{ z-index:30500; }

.modal[aria-hidden="false"]{display:flex!important}

.modal-card{
  width:min(980px,96vw);
  max-height:86vh; /* etwas kleiner als vorher */
  overflow:auto;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  padding:16px;
}
/* Größenklassen (von JS gesetzt: card.classList.add('is-sm'|'is-md'|'is-lg')) */
.modal-card.is-sm { width: min(420px, 96vw); }
.modal-card.is-md { width: min(640px, 96vw); }
.modal-card.is-lg { width: min(960px, 96vw); }


.modal-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

/* ---------- Logo im Modal ---------- */
.modal-head img,
.modal-card img.hc24-logo,
.modal-card .logo img{
  max-height:26px;
  height:26px;
  width:auto;
}

@media (max-width: 640px){
  .modal-head img,
  .modal-card img.hc24-logo,
  .modal-card .logo img{
    max-height:20px;
    height:20px;
  }
}

/* ---------- Überschrift im Dialog ---------- */
.modal-head .modal-title span,
.modal-head .modal-title{
  font-size:18px;
  font-weight:600;
  line-height:1.3;
}

/* Logo links, Titel rechts im Status-Dialog */
#statusModal .modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#statusModal .modal-head img{flex:0 0 auto;}
#statusModal .modal-head span{
  flex:1;
  text-align:right;
  font-size:18px;
  font-weight:600;
}

/* ---------- Systemstatus-Tabelle ---------- */
.modal-card table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin:12px 0;
}
.modal-card thead th,
.modal-card tbody td{
  padding:12px 16px;
}
.modal-card thead th{
  text-align:left;
  font-weight:400;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
.modal-card tbody tr + tr td{border-top:1px solid var(--border)}

/* Spalten-Ausrichtung */
.modal-card table th:nth-child(2),
.modal-card table td:nth-child(2){
  width:90px;
  text-align:center;
}
.modal-card table th:nth-child(3),
.modal-card table td:nth-child(3){
  width:90px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.modal-card td:nth-child(2) .status-dot{
  display:inline-block;
  vertical-align:middle;
}

/* ---------- Flexible Statusmeldungen ---------- */
#statusModal .status-body{
  padding:12px 4px;
  font-size:15px;
}
#statusModal .status-message p{
  margin:6px 0;
}

/* Ladebalken */
#statusModal .progress{
  height:6px;
  border-radius:4px;
  background:var(--border);
  overflow:hidden;
  margin-top:8px;
}
#statusModal .progress .bar{
  width:40%;
  height:100%;
  background:var(--ok);
  animation: loadAnim 1.2s infinite linear;
}
@keyframes loadAnim{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* Busy-Overlay (Progress-Dialog) */
.busy { /* Container existiert als #busy; sicher top-most */
  position: fixed;
  inset: 0;
  display: none;               /* per JS: flex */
  align-items: center;
  justify-content: center;
  background: rgba(10,12,18,.55);
  backdrop-filter: blur(2px);
  z-index: 31000;              /* above .modal and menu portal */
}
.busy .busy-bar {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.busy .busy-bar .bar {
  height: 100%;
  width: 0%;
  background: var(--ok);
  transition: width .25s ease;
}
/* Indeterminate-Animation, wenn JS .bar.indeterminate setzt */
.busy .busy-bar .bar.indeterminate {
  width: 40%;
  animation: hc24-indeterminate 1.4s infinite ease-in-out;
}
@keyframes hc24-indeterminate {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(60%); }
  100% { transform: translateX(160%); }
}



/* ---------- Toasts ---------- */
.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  padding:12px 16px;
  background:#111827;
  color:#fff;
  border-radius:10px;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s,transform .2s;
  z-index:9999;
  max-width:480px;
}
.toast.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* === Vereinheitlichter Kopf für ALLE Modale ============================== */
/* links Logo, rechts Titel; darunter Body, darunter Actions */
.modal-card .modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.modal-card .modal-head .modal-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
}
.modal-card .modal-head .modal-title img{ flex:0 0 auto; max-height:26px; height:26px; width:auto; }
.modal-card .modal-head .modal-title span{
  flex:1; text-align:right; font-size:18px; font-weight:600; line-height:1.3;
}

/* Toast-Farbrand nach Level (optional, harmoniert mit --ok|--warn|--err) */
.toast[data-level="ok"]   { border-left:4px solid var(--ok); }
.toast[data-level="warn"] { border-left:4px solid var(--warn); }
.toast[data-level="fail"] { border-left:4px solid var(--err); }