/* =========================================================
   Digitalantrag Next – SAUBERER NEUSTART
   ========================================================= */
/* =========================
   Theme-Schutz (Prod-Theme)
   ========================= */
.da-next-scope,
.da-next-scope *{ box-sizing: border-box; }

.da-next-scope table{ margin: 0; }
.da-next-scope button,
.da-next-scope input,
.da-next-scope textarea{ font: inherit; }

/* Meldungsboxen (Error/Success) – wie im alten CSS */
#form-message, .mitglied-message{
  display: none;
  padding: 1em;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 1em;
}

#form-message.error, .mitglied-message.error{
  display: block;
  color: #b00020;
  background: #fde7eb;
  border: 1px solid #f5c2c7;
}

#form-message.success, .mitglied-message.success{
  display: block;
  color: #0a6b00;
  background: #e6f8e5;
  border: 1px solid #b9e2b7;
}

/* =========================
   Formular
   ========================= */
#mitglied-form p { margin-bottom: 1em; }

#mitglied-form input,
#mitglied-form textarea{
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* =========================
   Tabellen-Wrapper
   ========================= */

/* Grundsätzlich */
.da-table-wrap{
  margin: 16px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Mobile: Scroll erlaubt */
@media (max-width: 1023px){
  .da-table-wrap{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    max-width: 100% !important;

    /* DAS ist für Touch entscheidend */
    touch-action: pan-x !important;
  }
}

/* Desktop: breiter als WP-Container, aber begrenzt & zentriert */
@media (min-width: 1024px){
  .da-table-wrap{
    overflow-x: visible;
    max-width: 1700px;          /* <= 34" Monitor */
    width: calc(100% + 200px);  /* ragt moderat aus Container */
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   Tabelle – AUTO LAYOUT
   ========================= */
.da-next-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);

  /* DAS ist entscheidend */
  table-layout: auto;
  display: table;
  color: inherit;
}


/* =========================
   Header
   ========================= */
.da-next-table thead th{
  background: #f6f7f8;
  padding: 12px 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #e2e2e2;

  white-space: nowrap;     /* NIE senkrecht */
  word-break: normal;
}


/* =========================
   Zellen
   ========================= */
.da-next-table tbody td{
  padding: 12px 10px;
  vertical-align: top;
  border-bottom: 1px solid #efefef;

  /* Text bricht normal, niemals buchstabenweise */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.da-next-table tbody tr:nth-child(even) td{
  background: #fafafa;
}

.da-next-table tbody tr:last-child td{
  border-bottom: 0;
}


/* =========================
   Sinnvolle Defaults pro Spaltentyp
   (KEINE festen Breiten!)
   ========================= */

/* Nummer */
.da-next-table td:nth-child(1){
  white-space: nowrap;
}

/* Menge + Preis: kompakt */
.da-next-table td:nth-child(5),
.da-next-table td:nth-child(6){
  white-space: nowrap;
}

/* Datum: darf umbrechen */
.da-next-table td:nth-child(7){
  color: #666;
}


/* =========================
   Grüner Status-Streifen
   ========================= */
.da-next-row-approved td:first-child{
  border-left: 6px solid #1e8e3e;
}
.da-next-row-rejected td:first-child{
  border-left: 6px solid #d93025;
}
.da-next-row-tied td:first-child{
  border-left: 6px solid #9aa0a6;
}

/* =========================
   Ergebnis-Badge (Angenommen/Abgelehnt/Gleichstand)
   ========================= */
.da-next-badge{
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid rgba(0,0,0,0.15);
  white-space: nowrap;
}

.da-next-badge-approved{
  background: #e6f4ea;
  color: #137333;
  border-color: rgba(19,115,51,0.35);
}

.da-next-badge-rejected{
  background: #fce8e6;
  color: #a50e0e;
  border-color: rgba(165,14,14,0.35);
}

.da-next-badge-tied{
  background: #f1f3f4;
  color: #5f6368;
  border-color: rgba(95,99,104,0.35);
}
/* =========================
   Beschreibung – + Button
   ========================= */
.da-desc-preview{ display: inline; }

.da-desc-expand{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
color: #000;
  font-size: 0;
}

.da-desc-expand::before{
  content: "+";
  font-size: 18px;
  font-weight: 700;
  color: #000;
}


/* =========================
   Modal
   ========================= */
   /* Modal-Header wieder korrekt ausrichten */
#da-desc-modal .da-desc-modal-header{
  display: flex;
  align-items: flex-start;
    overflow: visible;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f5f5f5;
}
#da-desc-modal .da-desc-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
}

#da-desc-modal .da-desc-modal-panel{
  position: fixed;
  top: 10%;
  left: 50%;
   display: flex;
     overflow: hidden;  
  transform: translateX(-50%);
  width: min(900px, 92vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

#da-desc-modal .da-desc-modal-text{
  flex: 1 1 auto;          /* <-- wichtig: nimmt Höhe ein */
  min-height: 380px;       /* <-- verhindert 3-Zeilen-Problem */
  width: 100%;
  resize: none;            /* <-- Resizing zurück */
  overflow: auto;          /* <-- Scrollen im Feld */
  box-sizing: border-box;
      resize: none;
  overflow: auto;
}

#da-desc-modal .da-desc-modal-close{
  background: none;
  border: 0;
  font-size: 20px;
    color: #000;
  cursor: pointer;
}
#da-desc-modal .da-desc-modal-title{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; 
}

#da-desc-modal .da-desc-modal-subtitle{
  font-size: 14px;
  font-weight: 600;
  color: #444;
  line-height: 1.2;
  white-space: normal;       /* Mobile darf umbrechen */
  overflow: visible;         /* nicht clippen */
}