/* U12F U-Untersuchungen Tool – Styles (scoped) */

.u12f-u-tool{
  --u12f-primary: var(--ast-global-color-0, #0170b9);
  --u12f-text:    var(--ast-global-color-3, #1a1a1a);
  --u12f-muted:   var(--ast-global-color-2, #555);
  --u12f-bg:      var(--ast-global-color-4, #ffffff);
  --u12f-border:  rgba(0,0,0,0.10);
  --u12f-soft:    rgba(1,112,185,0.06);
  --u12f-radius:  18px;

  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--u12f-text);
  margin: 22px 0;
  width: 100%;
  max-width: 100%;
}

.u12f-u-tool,
.u12f-u-tool *,
.u12f-u-tool *::before,
.u12f-u-tool *::after{ box-sizing: border-box; }

.u12f-u-tool h1,
.u12f-u-tool h2,
.u12f-u-tool h3,
.u12f-u-tool p{ margin: 0; }

.u12f-u-tool .u12f-shell{
  background: var(--u12f-soft);
  border: 1px solid rgba(1,112,185,0.14);
  border-radius: 22px;
  padding: 14px;
}

.u12f-u-tool .u12f-card{
  background: var(--u12f-bg);
  border: 1px solid var(--u12f-border);
  border-radius: var(--u12f-radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  padding: 22px;
  width: 100%;
  max-width: 100%;
}

.u12f-u-tool .u12f-header{
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.u12f-u-tool .u12f-title{
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.2;
}

.u12f-u-tool .u12f-subtitle{
  color: var(--u12f-muted);
  line-height: 1.55;
  font-size: 0.88rem;
}

/* Form */
.u12f-u-tool .u12f-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}

.u12f-u-tool .u12f-field{
  display: grid;
  gap: 8px;
}

.u12f-u-tool .u12f-label{
  font-weight: 900;
  font-size: 0.95rem;
  opacity: 0.92;
}

.u12f-u-tool input[type="text"],
.u12f-u-tool input[type="date"]{
  width: 100%;
  border: 1px solid var(--u12f-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: var(--u12f-text);
  outline: none;
  min-height: 44px;
  font-size: 0.95rem;
  line-height: 1.2;
}

.u12f-u-tool input[type="text"]:focus,
.u12f-u-tool input[type="date"]:focus{
  border-color: rgba(1,112,185,0.45);
  box-shadow: 0 0 0 3px rgba(1,112,185,0.12);
}

.u12f-u-tool .u12f-actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.u12f-u-tool .u12f-btn{
  width: 100%;
  border: 1px solid var(--u12f-border);
  background: #fff;
  color: var(--u12f-text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
  line-height: 1;
  font-size: 0.95rem;
  transition: filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.u12f-u-tool .u12f-btn:not(.u12f-btn-primary):hover{
  background: rgba(0,0,0,0.03);
}

.u12f-u-tool .u12f-btn-primary{
  border-color: rgba(1,112,185,0.35);
  background: var(--u12f-primary);
  color: #fff;
}

.u12f-u-tool .u12f-btn-primary:hover{
  background: var(--u12f-primary);
  color: #fff;
  filter: brightness(0.95);
}

/* Output */
.u12f-u-tool .u12f-alert{
  border: 1px solid rgba(185, 28, 28, 0.22);
  background: rgba(185, 28, 28, 0.08);
  padding: 10px 12px;
  border-radius: 12px;
  color: #7f1d1d;
  font-weight: 900;
  margin: 0 0 12px;
}

.u12f-u-tool .u12f-result-head{
  background: var(--u12f-soft);
  border: 1px solid rgba(1,112,185,0.12);
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 12px;
  font-weight: 900;
  font-size: 0.98rem;
}

.u12f-u-tool .u12f-table-wrap{
  border: 1px solid var(--u12f-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  max-width: 100%;
}

.u12f-u-tool table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.92rem;
}

.u12f-u-tool th:nth-child(1),
.u12f-u-tool td:nth-child(1){ width: clamp(52px, 10vw, 76px); }

.u12f-u-tool th:nth-child(3),
.u12f-u-tool td:nth-child(3){ width: clamp(150px, 24vw, 220px); }

.u12f-u-tool th:nth-child(4),
.u12f-u-tool td:nth-child(4){ width: clamp(120px, 18vw, 170px); }

.u12f-u-tool th,
.u12f-u-tool td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
}

.u12f-u-tool td:nth-child(2),
.u12f-u-tool td:nth-child(3){
  overflow-wrap: anywhere;
  hyphens: auto;
}

.u12f-u-tool thead th{
  background: #f7f7f7;
  text-align: left;
  font-size: 0.82rem;
  color: var(--u12f-muted);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.u12f-u-tool tbody tr:last-child td{ border-bottom: 0; }

.u12f-u-tool .u12f-u-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  font-weight: 900;
  font-size: 0.90rem;
}

/* WICHTIG: Desktop darf ggf. leicht kürzen, Mobile NICHT */
.u12f-u-tool .u12f-badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.90em;
  line-height: 1.1;
}

.u12f-u-tool .u12f-badge--due{
  background: rgba(46,125,50,0.12);
  border-color: rgba(46,125,50,0.18);
}
.u12f-u-tool .u12f-badge--soon{
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.22);
}
.u12f-u-tool .u12f-badge--past{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}

/* Highlight nächste Untersuchung (Desktop) */
.u12f-u-tool tr.u12f-next td{
  border-top: 2px solid var(--u12f-primary);
  border-bottom: 2px solid var(--u12f-primary);
  background: var(--u12f-soft);
}
.u12f-u-tool tr.u12f-next td:first-child{
  border-left: 2px solid var(--u12f-primary);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.u12f-u-tool tr.u12f-next td:last-child{
  border-right: 2px solid var(--u12f-primary);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.u12f-u-tool .u12f-note{
  margin: 16px 0 0;
  color: var(--u12f-muted);
  font-size: 0.90rem;
  line-height: 1.55;
}

/* ========= Mobile: Card-Ansicht – robust gegen fremdes Table/Flex-CSS ========= */
/* (Breakpoints bewusst etwas höher, damit wirklich jedes Handy greift) */
@media (max-width: 680px){

  .u12f-u-tool .u12f-table-wrap{
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .u12f-u-tool thead{ display: none !important; }

  .u12f-u-tool table,
  .u12f-u-tool tbody,
  .u12f-u-tool tr,
  .u12f-u-tool td{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .u12f-u-tool tbody tr{
    background: #fff;
    border: 1px solid var(--u12f-border);
    border-radius: 14px;
    margin: 0 0 12px;
    overflow: hidden;
  }
  .u12f-u-tool tbody tr:last-child{ margin-bottom: 0; }

  /* Jede Zeile: Label oben, Inhalt darunter */
  .u12f-u-tool td{
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 12px;
    overflow: visible !important;     /* verhindert Abschneiden */
  }
  .u12f-u-tool td:last-child{ border-bottom: 0; }

  .u12f-u-tool td::before{
    content: attr(data-label);
    display: block !important;
    margin: 0 0 6px;
    font-weight: 900;
    color: var(--u12f-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* WICHTIG: falls irgendwo noch alte Regeln aktiv sind */
  .u12f-u-tool td > *{
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
  }

  /* U-Zeile als „Kopfzeile“: Pill rechts, Label weg */
  .u12f-u-tool td[data-label="U"]{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    background: rgba(0,0,0,0.02);
    padding: 10px 12px;
  }
  .u12f-u-tool td[data-label="U"]::before{ display: none !important; }

  /* Status-Badge: auf Mobile NIE kürzen */
  .u12f-u-tool .u12f-badge{
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Mobile Highlight: ganzer Card-Rahmen statt Zell-Rahmen */
  .u12f-u-tool tbody tr.u12f-next{
    border: 2px solid var(--u12f-primary);
    background: var(--u12f-soft);
  }
  .u12f-u-tool tbody tr.u12f-next td{
    background: transparent;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
  .u12f-u-tool tbody tr.u12f-next td:last-child{
    border-bottom: 0 !important;
  }
}