/**
 * components-ipad.css — Wiederverwendbare UI-Bausteine im iPad-App-Stil.
 * Namespace `ip-` (kollidiert NICHT mit bestehender Modul-CSS, Migration Seite für Seite).
 * Alle Farben/Maße über die Tokens aus theme-ipad.css. Visual-only.
 *
 * Tint-Modifier (auf Summary-Card / Pill / Icon-Chip): .tint-blue .tint-green
 * .tint-amber .tint-purple .tint-slate .tint-red  +  .filled (voller Tint, weißer Text).
 */

/* ============================================================
   CARD
   ============================================================ */
.ip-card {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ip-card + .ip-card { margin-top: var(--gap-grid); }

.ip-page-title { font-size: var(--fs-title); font-weight: var(--fw-title); color: var(--navy); }
.ip-page-subtitle { font-size: var(--fs-caption); color: var(--slate); margin-top: 2px; }

/* Tabellenziffern überall für Beträge */
.ip-num { font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* ============================================================
   SUMMARY-CARDS
   ============================================================ */
.ip-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}
.ip-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ip-icon-chip {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-chip);
  font-size: 16px; line-height: 1;
}
.ip-summary-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ip-summary-label {
  font-size: var(--fs-caption2);
  font-weight: var(--fw-caption2);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
}
.ip-summary-value {
  font-size: var(--fs-headline);
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Tints für Icon-Chip */
.ip-icon-chip.tint-blue   { color: var(--blue);   background: var(--blue-bg); }
.ip-icon-chip.tint-green  { color: var(--green);  background: var(--green-bg); }
.ip-icon-chip.tint-amber  { color: var(--amber);  background: var(--amber-bg); }
.ip-icon-chip.tint-purple { color: var(--purple); background: var(--purple-bg); }
.ip-icon-chip.tint-slate  { color: var(--slate);  background: rgba(71,85,105,.12); }
.ip-icon-chip.tint-red    { color: var(--red);    background: var(--color-error-bg); }

/* Gefüllte Headline-Karte (z.B. Remaining) */
.ip-summary-card.filled { border: none; }
.ip-summary-card.filled .ip-summary-label { color: rgba(255,255,255,.85); }
.ip-summary-card.filled .ip-summary-value { color: #fff; }
.ip-summary-card.filled.tint-green { background: var(--green); }
.ip-summary-card.filled.tint-red   { background: var(--red); }
.ip-summary-card.filled.tint-amber { background: var(--amber); }
.ip-summary-card.filled.tint-blue  { background: var(--blue); }
.ip-summary-card.filled .ip-icon-chip { background: rgba(255,255,255,.18); color: #fff; }

@media (max-width: 720px) {
  .ip-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.ip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.ip-pill.tint-gold   { color: var(--brand-gold); background: var(--brand-gold-18); }
.ip-pill.tint-blue   { color: var(--blue);   background: var(--blue-bg); }
.ip-pill.tint-green  { color: var(--green);  background: var(--green-bg); }
.ip-pill.tint-amber  { color: var(--amber-text); background: var(--amber-bg); }
.ip-pill.tint-purple { color: var(--purple); background: var(--purple-bg); }
.ip-pill.tint-slate  { color: var(--slate);  background: rgba(71,85,105,.12); }
.ip-pill.tint-red    { color: var(--red);    background: var(--color-error-bg); }

/* ============================================================
   PROGRESS-BAR
   ============================================================ */
.ip-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(71,85,105,.18);
  overflow: hidden;
}
.ip-progress > .ip-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-gold);
  transition: width var(--transition-normal);
}
.ip-progress.over > .ip-progress-fill { background: var(--red); }

/* ============================================================
   ACCORDION
   ============================================================ */
.ip-accordion { display: flex; flex-direction: column; gap: var(--gap-grid); }
.ip-acc {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ip-acc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.ip-acc-chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.ip-acc.open .ip-acc-chevron { transform: rotate(90deg); }
.ip-acc-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ip-acc-summary {            /* rechtsbündiger Summen-Block in Header-Zeile */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}
.ip-acc-body { padding: 0 16px 14px; }
.ip-acc:not(.open) .ip-acc-body { display: none; }
.ip-acc.excluded { opacity: .75; }

/* ============================================================
   TABELLE (fixe Spaltenbreiten, Kopf + Zeilen fluchten)
   ============================================================ */
.ip-table { width: 100%; border-collapse: collapse; }
.ip-table thead th {
  font-size: var(--fs-caption2);
  font-weight: var(--fw-caption2);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
  text-align: left;
  padding: 8px 10px;
  background: var(--nested-bg);
}
.ip-table thead th:first-child { border-top-left-radius: var(--radius-nested); }
.ip-table thead th:last-child  { border-top-right-radius: var(--radius-nested); }
.ip-table tbody td {
  padding: 10px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-subheadline);
  color: var(--color-text);
  vertical-align: middle;
}
.ip-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ip-table tbody tr.clickable { cursor: pointer; }
.ip-table tbody tr.clickable:hover { background: var(--nested-bg); }

/* ============================================================
   SERVICE-CARD (liturgischer Farbstreifen)
   ============================================================ */
.ip-service-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ip-lit-stripe {
  flex: 0 0 var(--lit-stripe-w);
  width: var(--lit-stripe-w);
  border-radius: var(--lit-stripe-r);
  background: var(--slate);            /* Fallback; echte Farbe inline via --lit-color */
  background: var(--lit-color, var(--slate));
}
.ip-service-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ip-service-title { font-size: var(--fs-headline); font-weight: 600; color: var(--navy); }
.ip-service-sub { font-size: var(--fs-subheadline); color: var(--slate); }
.ip-service-cantor { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--brand-gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-nested);
  font-size: var(--fs-subheadline);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ip-btn-primary { background: var(--brand-gold); color: #fff; }
.ip-btn-primary:hover { background: var(--brand-gold-86); }
.ip-btn-secondary { background: var(--card-bg); color: var(--navy); border-color: var(--hairline); }
.ip-btn-secondary:hover { background: var(--nested-bg); }

/* ============================================================
   VOLLBILD-MODAL (Detail-Ansicht)
   ============================================================ */
.ip-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,23,42,.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
}
.ip-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}
.ip-modal-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 56px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--hairline);
}
.ip-modal-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-headline);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip-modal-done {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius-nested);
  background: var(--brand-gold);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.ip-modal-done:hover { background: var(--brand-gold-86); }
.ip-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--pad-content);
}

/* ============================================================
   MODALE ZUR CONTENT-FLÄCHE ZENTRIEREN (Sidebar ausgeklammert)
   Overlays sind fixed+inset:0+flex-center → left auf Sidebar-Breite ziehen,
   dann zentriert flex innerhalb der Content-Fläche. --sidebar-w wird von
   .app-container vererbt. Modul-CSS lädt später → !important.
   (loading-overlay bleibt absichtlich Vollbild; dynamic-layout-dialog ist Vollbild.)
   ============================================================ */
.budget-modal, .bp-calc-popup-modal,
.archive-modal, .wl-modal,
.auto-assign-modal,
.payments-modal, .privat-modal, .vac-modal,
.reason-prompt-overlay,
.daymarker-backdrop, .sub-picker-overlay,
.hcr-modal-backdrop, .yc-dialog-backdrop,
.ai-rep-overlay,
.occ-files-modal {
  left: var(--sidebar-w, 0px) !important;
}

/* ============================================================
   STANDARD-MODAL über den modal-manager (einheitlich).
   Ein Box-Modal, das via modalManager.open() geöffnet wird, trägt .mm-modal
   und zentriert sich auf die CONTENT-Fläche (Sidebar zählt nicht).
   modal-manager liefert Backdrop + ESC + Scroll-Lock + Stacking.
   ============================================================ */
.mm-modal {
  position: fixed;
  top: 50%;
  left: calc(var(--sidebar-w, 0px) + (100vw - var(--sidebar-w, 0px)) / 2);
  transform: translate(-50%, -50%);
  display: none;
  z-index: 1000;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  color: var(--color-text);
  max-height: 92vh;
  overflow: hidden;
}
.mm-modal.modal-active { display: flex; flex-direction: column; }

/* Native <dialog>, die über den modal-manager laufen (statt showModal/[open]):
   per .modal-active sichtbar machen + mittig auf die Content-Fläche zentrieren.
   Datums-Popups escapen in den body (z 999999) → erscheinen über dem Dialog (kein Top-Layer). */
dialog.modal-active:not(.dynamic-layout-dialog):not(.confirm-dialog-backdrop) {
  display: block;
  position: fixed;
  top: 50%;
  left: calc(var(--sidebar-w, 0px) + (100vw - var(--sidebar-w, 0px)) / 2);
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-height: 92vh;
  margin: 0;
}