/* Dateipfad: assets/css/bi-phasen-manage.css
   Event-Management › Termin-Umfrage & Save the Date (includes/manage/tab_umfrage.php, tab_savethedate.php)
   Mobile zuerst: alles einspaltig, ab 900px zwei Spalten. */

.pht-wrap { padding: 10px 0; display: flex; flex-direction: column; gap: 16px; }
.pht-wrap [hidden], .phm-modal [hidden] { display: none !important; }

/* Erklärung oben */
.pht-explain { background: var(--bg-body, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pht-explain-info { display: flex; gap: 14px; align-items: flex-start; }
.pht-explain-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; background: rgba(39, 113, 200, 0.12); color: var(--primary-color, #2771c8); }
.pht-explain-icon.is-violet { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.pht-explain h4 { margin: 0 0 3px; font-size: 0.98rem; color: var(--text-main, #0f172a); }
.pht-explain p { margin: 0; font-size: 0.82rem; color: var(--text-muted, #64748b); line-height: 1.5; }
.pht-explain .btn { align-self: stretch; justify-content: center; }

/* Stand: was sehen die Gäste gerade? */
.pht-state { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #ffffff); }
.pht-state-top { display: flex; gap: 12px; align-items: flex-start; }
.pht-state-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; background: var(--bg-body, #f1f5f9); color: var(--text-muted, #64748b); }
.pht-state-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted, #64748b); }
.pht-state-title { font-size: 1rem; font-weight: 800; color: var(--text-main, #0f172a); margin: 2px 0 3px; line-height: 1.3; }
.pht-state-text { font-size: 0.82rem; color: var(--text-muted, #64748b); line-height: 1.5; }
.pht-state-acts { display: flex; flex-direction: column; gap: 8px; }
.pht-state-acts .btn { justify-content: center; width: 100%; }
.pht-state.is-live { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.06); }
.pht-state.is-live .pht-state-icon { background: rgba(16, 185, 129, 0.15); color: #059669; }
.pht-state.is-wait { border-color: rgba(39, 113, 200, 0.35); background: rgba(39, 113, 200, 0.05); }
.pht-state.is-wait .pht-state-icon { background: rgba(39, 113, 200, 0.14); color: var(--primary-color, #2771c8); }
.pht-state.is-warn { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.07); }
.pht-state.is-warn .pht-state-icon { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.pht-state.is-violet { border-color: rgba(124, 58, 237, 0.35); background: rgba(124, 58, 237, 0.05); }
.pht-state.is-violet .pht-state-icon { background: rgba(124, 58, 237, 0.14); color: #7c3aed; }

/* Zahlen */
.pht-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pht-kpi { background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.pht-kpi span { display: block; font-size: 0.68rem; font-weight: 700; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pht-kpi b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-main, #0f172a); }

/* Boxen & Felder */
.pht-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pht-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pht-box { background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 18px; padding: 16px; min-width: 0; }
.pht-box-title { font-size: 0.95rem; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--text-main, #0f172a); flex-wrap: wrap; }
.pht-box-title .pht-count { margin-left: auto; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; background: var(--bg-body, #f1f5f9); color: var(--text-muted, #64748b); }
.pht-box-title .pht-count.is-full { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.pht-field { margin-bottom: 14px; }
.pht-field:last-child { margin-bottom: 0; }
.pht-field > label, .pht-label { display: block; font-size: 0.78rem; font-weight: 800; margin-bottom: 6px; color: var(--text-main, #0f172a); }
.pht-field .form-control { width: 100%; font-size: 16px; }
.pht-field textarea.form-control { min-height: 84px; resize: vertical; line-height: 1.45; }
.pht-hint { font-size: 0.72rem; color: var(--text-muted, #64748b); margin-top: 5px; line-height: 1.45; }
.pht-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pht-seg { display: flex; gap: 4px; background: var(--bg-body, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 3px; }
.pht-seg button { flex: 1; border: none; background: none; border-radius: 9px; padding: 8px 6px; font-size: 0.76rem; font-weight: 700; color: var(--text-muted, #64748b); cursor: pointer; font-family: inherit; line-height: 1.25;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; }
.pht-seg button.active { background: var(--bg-card, #ffffff); color: var(--text-main, #0f172a); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.pht-seg button:disabled { cursor: not-allowed; opacity: 0.6; }
.pht-seg button .fa-crown { color: #d97706; font-size: 0.7rem; }

/* Schalter-Zeilen */
.pht-toggles { display: flex; flex-direction: column; border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; overflow: hidden; }
.pht-tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: var(--bg-card, #ffffff); cursor: pointer; }
.pht-tg + .pht-tg { border-top: 1px solid var(--border-color, #e2e8f0); }
.pht-tg-txt { font-size: 0.84rem; font-weight: 700; color: var(--text-main, #0f172a); line-height: 1.35; }
.pht-tg-txt small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-muted, #64748b); margin-top: 2px; }
.pht-tg input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--primary-color, #2771c8); margin: 0; cursor: pointer; }
.pht-tg.is-locked { cursor: pointer; }
.pht-tg.is-locked input { pointer-events: none; opacity: 0.5; }
.pht-crown { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 800; color: #b45309; background: rgba(245, 158, 11, 0.14); padding: 2px 7px; border-radius: 20px; margin-left: 6px; vertical-align: 1px; }
/* «Extra» in deinem Paket enthalten (neutral) – ohne Zugang bleibt es gelb mit Schloss */
.pht-crown.is-extra { color: var(--primary-color, #2771c8); background: var(--primary-bg-light, rgba(39, 113, 200, 0.1)); }
.pht-crown i { font-size: 0.85em; }
.pht-bestand { font-size: 0.72rem; color: #047857; margin-top: 6px; line-height: 1.4; display: flex; gap: 6px; align-items: flex-start; }

/* Speichern */
.pht-savebar { position: sticky; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px; padding: 10px 10px 10px 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }
.pht-savebar-txt { font-size: 0.8rem; font-weight: 700; color: var(--text-muted, #64748b); display: flex; align-items: center; gap: 6px; min-width: 0; }
.pht-savebar.is-dirty .pht-savebar-txt { color: #b45309; }
.pht-savebar .btn { flex-shrink: 0; }

/* Eingetragene */
.pht-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pht-name { font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: var(--bg-body, #f1f5f9); border: 1px solid var(--border-color, #e2e8f0); color: var(--text-main, #0f172a); }
.pht-empty { font-size: 0.8rem; color: var(--text-muted, #64748b); line-height: 1.5; }

/* Termin-Umfrage: Termine bearbeiten */
.pht-opts { display: flex; flex-direction: column; gap: 10px; }
.pht-opt { border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 12px; background: var(--bg-body, #f8fafc); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.pht-opt-main { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; }
.pht-opt-main .pht-opt-date { grid-column: 1 / -1; }
.pht-opt-main .pht-opt-note { grid-column: 1 / -1; }
.pht-opt .form-control { font-size: 16px; padding: 9px 10px; min-width: 0; width: 100%; }
.pht-opt-lbl { display: block; font-size: 0.66rem; font-weight: 800; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.pht-opt-del { border: none; background: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--text-muted, #64748b); align-self: start; }
.pht-opt-del:hover { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.pht-opt-votes { grid-column: 1 / -1; font-size: 0.72rem; color: var(--text-muted, #64748b); display: flex; gap: 6px; align-items: center; }
.pht-add { border: 1.5px dashed var(--border-color, #cbd5e1); background: none; border-radius: 14px; padding: 12px; font-family: inherit; font-weight: 800; font-size: 0.84rem; color: var(--primary-color, #2771c8); cursor: pointer; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.pht-add:disabled { color: var(--text-muted, #94a3b8); cursor: not-allowed; }

/* Termin-Umfrage: Ergebnis */
.pht-res { display: flex; flex-direction: column; gap: 10px; }
.pht-res-row { border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 12px; background: var(--bg-card, #ffffff); display: flex; flex-direction: column; gap: 8px; }
.pht-res-row.is-best { border-color: rgba(16, 185, 129, 0.55); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08); }
.pht-res-row.is-chosen { border-color: var(--primary-color, #2771c8); box-shadow: 0 0 0 3px rgba(39, 113, 200, 0.1); }
.pht-res-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.pht-res-date { font-size: 0.88rem; font-weight: 800; color: var(--text-main, #0f172a); line-height: 1.35; }
.pht-res-date small { display: block; font-size: 0.74rem; font-weight: 600; color: var(--text-muted, #64748b); }
.pht-res-badge { font-size: 0.66rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; background: rgba(16, 185, 129, 0.14); color: #047857; display: inline-flex; gap: 4px; align-items: center; }
.pht-res-badge.is-chosen { background: rgba(39, 113, 200, 0.12); color: var(--primary-color, #2771c8); }
.pht-res-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--bg-body, #f1f5f9); }
.pht-res-bar i { display: block; height: 100%; }
.pht-res-bar .b-yes { background: #10b981; } .pht-res-bar .b-maybe { background: #f59e0b; } .pht-res-bar .b-no { background: #fda4af; }
.pht-res-nums { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.74rem; font-weight: 700; color: var(--text-muted, #64748b); }
.pht-res-nums span { display: inline-flex; align-items: center; gap: 5px; }
.pht-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pht-dot.d-yes { background: #10b981; } .pht-dot.d-maybe { background: #f59e0b; } .pht-dot.d-no { background: #fda4af; }
.pht-res-who { font-size: 0.74rem; color: var(--text-muted, #64748b); line-height: 1.5; overflow-wrap: anywhere; }
.pht-res-who b { color: var(--text-main, #0f172a); font-weight: 700; }
.pht-res-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pht-res-acts .btn { padding: 8px 12px; font-size: 0.8rem; flex: 1; justify-content: center; }
.pht-res-more { border: none; background: none; padding: 0; font-family: inherit; font-size: 0.74rem; font-weight: 700; color: var(--primary-color, #2771c8); cursor: pointer; text-align: left; }

.pht-note { font-size: 0.82rem; line-height: 1.5; border-radius: 12px; padding: 10px 12px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); color: #b45309; display: flex; gap: 8px; align-items: flex-start; }
.pht-note.is-info { background: rgba(39, 113, 200, 0.07); border-color: rgba(39, 113, 200, 0.25); color: var(--primary-color, #2771c8); }
.pht-note .btn-link { border: none; background: none; padding: 0; font: inherit; font-weight: 800; color: inherit; text-decoration: underline; cursor: pointer; }
.pht-loading { text-align: center; padding: 26px 0; color: var(--text-muted, #94a3b8); }

/* Hinweis-Fenster */
.phm-modal { position: fixed; inset: 0; z-index: 100060; background: rgba(15, 23, 42, 0.55); display: none; align-items: flex-end; justify-content: center; padding: 0; }
.phm-modal.is-open { display: flex; }
.phm-card { background: var(--bg-card, #ffffff); width: 100%; max-width: 460px; border-radius: 24px 24px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    max-height: 92vh; overflow-y: auto; }
.phm-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 14px; background: rgba(39, 113, 200, 0.12); color: var(--primary-color, #2771c8); }
.phm-icon.is-warn { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.phm-icon.is-danger { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.phm-icon.is-ok { background: rgba(16, 185, 129, 0.14); color: #059669; }
.phm-title { font-size: 1.15rem; font-weight: 900; color: var(--text-main, #0f172a); margin: 0 0 8px; }
.phm-text { font-size: 0.88rem; color: var(--text-muted, #64748b); line-height: 1.55; margin: 0 0 20px; text-align: left; }
.phm-text ul { margin: 8px 0 0; padding-left: 18px; }
.phm-text li { margin: 3px 0; }
.phm-acts { display: flex; gap: 10px; }
.phm-acts .btn { flex: 1; justify-content: center; }

@media (min-width: 640px) {
    .pht-explain { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .pht-explain-info { flex: 1; min-width: 260px; align-items: center; }
    .pht-explain .btn { align-self: center; }
    .pht-state-acts { flex-direction: row; flex-wrap: wrap; }
    .pht-state-acts .btn { width: auto; }
    .pht-opt-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
    .pht-opt-main .pht-opt-date { grid-column: auto; }
    .pht-res-acts .btn { flex: 0 0 auto; }
    .phm-modal { align-items: center; padding: 16px; }
    .phm-card { border-radius: 24px; padding: 26px 24px; }
}
@media (min-width: 900px) {
    .pht-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
body.dark-mode .pht-bestand { color: #6ee7b7; }
body.dark-mode .pht-note { color: #fbbf24; }