/* ===== Modal (global) ===== */

/* Overlay */
.modal-overlay[hidden]{ display:none !important; }
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;               /* per JS auf flex setzen */
  align-items:center; justify-content:center;
  z-index:9999;
}
.modal-overlay.is-open{ display:flex; }

/* Dialog-Pane */
.modal{
  background:#0b1020; color:#e9f2ff;
  border-radius:14px; padding:1rem;
  width:min(560px,92vw);
  max-height:92vh; max-height:96dvh;
  overflow:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(91,140,255,.15);
}
.modal h3{ margin:.2rem 0 .6rem; color:#e9f2ff; }

/* Texte/Labels/Feedback */
.muted{ color:#9aa4bf; }
.err{ color:#f87171; }
.ok{  color:#34d399; }
.modal label{ display:block; font-size:.92rem; margin-top:.3rem; color:#cbd5e1; }

/* Inputs im Modal */
.modal input.input,
.modal select.input,
.modal textarea.input{
  width:100%;
  background:#0f1630; color:#e9f2ff;
  border:1px solid #243056; border-radius:10px;
  padding:.6rem .7rem;
}
.modal input.input::placeholder,
.modal textarea.input::placeholder{ color:#9aa4bf; opacity:1; }
.modal input.input:focus,
.modal select.input:focus,
.modal textarea.input:focus{
  outline:2px solid #5b8cff;
  outline-offset:2px;
  border-color:#5b8cff;
}

/* Listenbereiche */
.modal .list{
  background:#0f1630; border:1px solid #243056;
  border-radius:10px; padding:.5rem;
  max-height:40vh; overflow:auto;
}

/* Footer-Aktionen (zusammengeführt) */
.modal .modal-footer{
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
  margin-top:.8rem;
}

/* --- Date Picker (custom Icon, nativen Indicator ausblenden) --- */
.modal .input[type="date"]{ color-scheme:dark; }
.date-wrap{ position:relative; display:inline-block; width:100%; }
.date-wrap .calendar-btn{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  background:transparent; border:0; padding:0; line-height:0; cursor:pointer;
  color:rgba(255,255,255,.9); opacity:.95;
}
.date-wrap .calendar-btn svg{ width:18px; height:18px; display:block; fill:currentColor; }
.input[type="date"].has-calendar{ padding-right:2.2rem; }
/* native Indicator komplett aus, damit kein Doppel-Icon */
.modal .input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0 !important; pointer-events:none !important;
}
/* Fokus */
.modal .input[type="date"]:focus{
  outline:2px solid rgba(147,197,253,.65);
  outline-offset:2px;
}

/* modal.css (oder card.css) */
.modal fieldset.box{
  border:1px solid var(--border, rgba(255,255,255,.12));
  border-radius:10px;
  padding:.75rem .75rem .6rem;
}
.modal fieldset.box > legend{
  padding:0 .35rem;
  font-size:.95rem;
  opacity:.9;
}

/* Screenreader-only Text */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Readonly */
.modal--readonly input,
.modal--readonly select,
.modal--readonly textarea{ pointer-events:none; opacity:.85; }

/* === Light Theme =================================================== */
html[data-theme="light"] .modal{
  background:#ffffff; color:#0f172a;
  border:1px solid var(--border, #cbd5e1);
  box-shadow:0 12px 40px rgba(2,12,40,.12);
}
html[data-theme="light"] .modal h3{ color:var(--head, #0b1020); }
html[data-theme="light"] .modal .muted{ color:#475569; }
html[data-theme="light"] .modal .err{ color:#e5484d; }
html[data-theme="light"] .modal .ok{  color:#10b981; }
html[data-theme="light"] .modal label{ color:#334155; }

html[data-theme="light"] .modal input.input,
html[data-theme="light"] .modal select.input,
html[data-theme="light"] .modal textarea.input{
  width:100%;
  background: var(--modal-field-bg-light, #f5f6fb);
  color:#0f172a;
  border:1px solid var(--modal-bd-light, #e5e7eb);
  border-radius:10px; padding:.6rem .7rem;
}
html[data-theme="light"] .modal input.input::placeholder,
html[data-theme="light"] .modal textarea.input::placeholder{
  color:#6b7280; opacity:1;
}
html[data-theme="light"] .modal input.input:focus,
html[data-theme="light"] .modal select.input:focus,
html[data-theme="light"] .modal textarea.input:focus{
  outline:2px solid rgba(49,95,233,.55);
  outline-offset:2px;
  border-color:#315fe9;
}

/* Date-Icon-Farbe im Light-Theme */
html[data-theme="light"] .date-wrap .calendar-btn{ color:#334155; }

/* Listenbereiche in Light */
html[data-theme="light"] .modal .list{
  background:#f8fafc;
  border:1px solid var(--border, #cbd5e1);
  border-radius:10px; padding:.5rem;
  max-height:40vh; overflow:auto;
}

/* ==== Mail-Modal =================================================== */
.mail-modal .modal-head{
  display:flex; align-items:center; gap:.5rem;
  position:sticky; top:0; z-index:1; padding-bottom:.5rem;
  background:inherit; border-bottom:1px solid rgba(255,255,255,.08);
}
.mail-modal .modal-title{ margin:0; }
.mail-modal .modal-footer{
  display:flex; gap:.5rem; justify-content:flex-end;
  position:sticky; bottom:0; z-index:1; padding-top:.75rem;
  background:inherit; border-top:1px solid rgba(255,255,255,.08);
}
.mail-modal .modal-section{ display:flex; flex-direction:column; gap:.5rem; padding:.5rem 0; }
.mail-modal .label{ font-weight:600; }
.mail-modal .label-row{ display:flex; align-items:center; gap:.5rem; }
.mail-modal .subject-input{ width:100%; }
.mail-modal .to-list{ display:flex; flex-direction:column; gap:.35rem; }
.mail-modal .toolbar{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.mail-modal .file-list{ display:flex; flex-direction:column; gap:.35rem; max-height:46vh; overflow:auto; padding-right:.25rem; }

/* Datei-Zeile */
.file-row{
  display:grid; grid-template-columns:auto 1fr auto auto;
  gap:.5rem; align-items:center; padding:.5rem .5rem;
  border:1px solid #243056; border-radius:10px;
  background:#0f1630;
}
.file-row .f-ico{
  width:28px; height:28px; border-radius:.5rem;
  display:grid; place-items:center;
  font-size:.75rem; font-weight:700;
  background:#151b34; color:#e9f2ff; opacity:.95;
}
.file-row .f-name{ font-weight:600; }
.file-row .f-meta{ font-size:.875rem; opacity:.85; }

/* Chip-Toggles und kleine Buttons */
.chip-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; border-radius:999px;
  border:1px solid #243056; background:transparent; color:inherit;
  cursor:pointer; user-select:none;
}
.chip-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.chip-toggle.checked{ background:#152043; border-color:#3b5aa1; }
.chip{
  border:1px solid #243056; border-radius:999px;
  padding:.25rem .6rem; background:transparent; color:inherit; cursor:pointer;
}
.input-sm{ padding:.35rem .5rem; font-size:.95em; height:auto; }

/* Responsive Datei-Zeile */
@media (max-width:700px){
  .file-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "ico name"
      "ico meta"
      "tog togg";
  }
  .file-row .f-ico{ grid-area:ico; }
  .file-row .f-name{ grid-area:name; }
  .file-row .f-meta{ grid-area:meta; }
  .file-row .f-actions{ grid-area:tog; display:flex; gap:.5rem; margin-top:.25rem; }
}

/* Light-Theme Overrides für Mail-Modal */
html[data-theme="light"] .mail-modal .modal-head{ border-bottom:1px solid rgba(2,12,40,.08); }
html[data-theme="light"] .mail-modal .modal-footer{ border-top:1px solid rgba(2,12,40,.08); }

html[data-theme="light"] .file-row{
  background:#ffffff; border:1px solid var(--border, #cbd5e1);
  position:relative; overflow:hidden;
}
html[data-theme="light"] .file-row::before{
  content:""; position:absolute; inset:2px; border-radius:inherit;
  background: var(--modal-field-bg-light, #f5f6fb); z-index:0;
}
html[data-theme="light"] .file-row > *{ position:relative; z-index:1; }
html[data-theme="light"] .file-row .f-ico{ background:#eef2ff; color:#1e293b; }

html[data-theme="light"] .chip-toggle{ border:1px solid var(--modal-bd-light, #e5e7eb); }
html[data-theme="light"] .chip-toggle.checked{ background:#eef6ff; border-color:#bcd6ff; }
html[data-theme="light"] .chip{ border:1px solid var(--modal-bd-light, #e5e7eb); }

html[data-theme="light"] .mail-modal .file-list{
  background:#f7fbff; border-radius:10px; padding:.25rem;
}
html[data-theme="light"] .mail-modal .file-row{ background:#f3f8ff; border-color:#cfe0ff; }
html[data-theme="light"] .mail-modal .chip-toggle{ border-color:#cfe0ff; }
html[data-theme="light"] .mail-modal .chip-toggle.checked{ background:#eaf3ff; border-color:#bcd6ff; }

/* ===== Modal Größen-Varianten ===================================== */
.modal--verysmall{ width:min(36vw,320px); }
.modal--small{    width:min(36vw,480px); }
.modal--medium{   width:min(96vw,720px); }
.modal--large{    width:min(96vw,960px); }
.modal--verylarge{width:min(96vw,1200px); }

/* ===== Modal x Card-Farben Brücke ================================= */
:root{
  --modal-field-bg-light: var(--card-outer-bg, #f5f6fb);
  --modal-bd-light:       var(--card-bd, #e5e7eb);
}


/* ===== Mobile-Fixes ===== */
:root{
  --m-pad: 16px;           /* Außenabstand um den Dialog */
}

/* Overlay: oben ausrichten, scrollfähig, Safe-Area beachten */
@media (max-width: 640px){
  .modal-overlay{
    align-items:flex-start;
    justify-content:center;
    overflow:auto;
    /* Abstand inkl. Notch/Homebar */
    padding:
      calc(var(--m-pad) + env(safe-area-inset-top))
      calc(var(--m-pad) + env(safe-area-inset-right))
      calc(var(--m-pad) + env(safe-area-inset-bottom))
      calc(var(--m-pad) + env(safe-area-inset-left));
  }

  /* Dialog: volle Breite, aber mit Rand; Höhe auf sichtbare Fläche begrenzen */
  .modal{
    box-sizing:border-box;
    width:100%;
    max-width: 560px;              /* behält Desktopbreite als Obergrenze */
    border-radius:14px;
    /* sichere Max-Höhe inkl. Safe-Area; fallback für Browser ohne dvh */
    max-height: calc(100dvh - (var(--m-pad)*2)
                    - env(safe-area-inset-top)
                    - env(safe-area-inset-bottom));
    overflow:auto;
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen in iOS */
  }

  /* etwas kompaktere Überschrift auf sehr schmalen Geräten */
  .modal h3{
    font-size:1.1rem; line-height:1.25; word-break:break-word;
  }
}

/* Optional: Hintergrund-Scrollen sperren wenn Modal offen (per JS Klasse setzen)
   document.body.classList.toggle('has-modal', isOpen) */
body.has-modal{
  overflow:hidden;
  touch-action:none;
}
/* ===== Modal x Card-Toggle (Inline-SVG wie im Original) ============== */
/* Summary wie Card-Header layouten; Toggle nach rechts schieben */
.modal details > summary{
  display:flex !important; 
  align-items:center !important; 
  gap:.5rem;
  list-style:none;
}
.modal details > summary::-webkit-details-marker{ display:none; }
.modal details > summary::marker{ content:""; }
.modal details > summary.section-title::after{ content:none !important; }
.modal details > summary .card-toggle{ margin-left:auto; }           /* nach rechts schieben */

/* Zu = Pfeil nach rechts; Auf = nach unten (wie Original) */
.modal details > summary .chev{ transition: transform .18s ease; transform: rotate(-90deg); }
.modal details[open] > summary .chev{ transform: rotate(0); }