/* ============================================================
   CONTEX Shipping — Broker-Postfach
   Ergänzungen zu style.css (Basis aus dem Einlagerungsmanagement)
   ============================================================ */

:root {
  --gelb: #B45309;
  --gelb-bg: #FEF3C7;
  --gruen: #047857;
  --gruen-bg: #D1FAE5;
  --violett: #6D28D9;
  --violett-bg: #EDE9FE;
}

/* ── Hilfsklassen ── */
.mb-3 { margin-bottom: var(--space-3); }
.p-4 { padding: var(--space-4); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
a.text-accent { text-decoration: underline; }

/* ── Login ── */
.auth-view { display: none; }
.auth-view.active { display: block; }
.auth-links { text-align: center; margin-top: var(--space-5); font-size: var(--font-size-sm); }
.auth-link { background: none; border: none; color: var(--color-contex-blue-dark); font-size: var(--font-size-sm); text-decoration: underline; padding: 0; }
.auth-success { display: none; background: var(--gruen-bg); color: var(--gruen); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.auth-success.visible { display: block; }
.pw-feld { position: relative; }
.pw-feld .form-input { padding-right: 40px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; opacity: .55; font-size: 16px; padding: 4px; }
.pw-toggle:hover { opacity: 1; }

/* ── Header-Navigation ── */
.brand-sub { font-weight: 400; color: rgba(255,255,255,0.6); }
.main-nav { display: flex; gap: var(--space-1); margin-left: var(--space-6); }
.nav-link { color: rgba(255,255,255,0.75); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; padding: 6px 12px; border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--transition), color var(--transition); }
.nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-link.active { background: rgba(107,180,208,0.18); color: #fff; box-shadow: inset 0 -2px 0 var(--color-contex-blue); }
.nav-count { background: var(--color-contex-blue); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--radius-full); padding: 0 7px; line-height: 18px; min-width: 18px; text-align: center; }
.nav-count-rot { background: var(--color-contex-red); }

.aktualisiert { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ── Tabellen ── */
.data-table tbody tr:not(.klickbar) { cursor: default; }
.data-table tbody tr.klickbar:focus { outline: 2px solid var(--color-contex-blue); outline-offset: -2px; }
.data-table td { vertical-align: top; }
.zelle-titel { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.zelle-typen { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.zelle-schmal { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fehler-text { max-width: 520px; white-space: pre-wrap; margin-top: 2px; }

/* ── Badges: Mail-Typen ── */
.typ-anfrage         { background: #E0F2FE; color: #0369A1; }
.typ-angebot         { background: var(--violett-bg); color: var(--violett); }
.typ-gegenangebot    { background: var(--gelb-bg); color: var(--gelb); }
.typ-fixture         { background: var(--gruen-bg); color: var(--gruen); }
.typ-update          { background: #E8F4F9; color: #2C7A99; }
.typ-schiffsposition { background: #CCFBF1; color: #0F766E; }
.typ-operativ        { background: #F3F4F6; color: #374151; }
.typ-rechnung        { background: #FDE8E8; color: #B91C1C; }
.typ-sonstiges       { background: #F3F4F6; color: #6B7280; }

/* ── Badges: Mail-Status ── */
.mstatus-zugeordnet { background: var(--gruen-bg); color: var(--gruen); }
.mstatus-fehler     { background: var(--color-contex-red-light); color: var(--color-contex-red); }
.mstatus-neu, .mstatus-anhaenge_verarbeitet, .mstatus-extrahiert, .mstatus-eingebettet { background: #E8F4F9; color: #2C7A99; }

/* ── Badges: Zuordnung & Konfidenz ── */
.zuo-auto      { background: #E8F4F9; color: #2C7A99; }
.zuo-vorschlag { background: var(--gelb-bg); color: var(--gelb); }
.zuo-manuell   { background: var(--gruen-bg); color: var(--gruen); }
.zuo-offen     { background: #F3F4F6; color: #6B7280; }
.konf-hoch     { background: var(--gruen-bg); color: var(--gruen); }
.konf-mittel   { background: var(--gelb-bg); color: var(--gelb); }
.konf-niedrig  { background: #F3F4F6; color: #6B7280; }

/* ── Vorgangsdetail ── */
.vorgang-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-5); }
.vorgang-layout { display: flex; flex-direction: column; gap: var(--space-5); }
.vorgang-layout .detail-sidebar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.vorgang-layout .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .vorgang-layout .detail-sidebar { grid-template-columns: 1fr; }
  .vorgang-layout .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.abschnitt-titel { font-size: var(--font-size-base); font-weight: 600; }
.beteiligter { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-sm); }
.beteiligter:last-of-type { border-bottom: none; }

.hinweis-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
.hinweis-gelb { background: var(--gelb-bg); border-color: #FCD34D; color: #78350F; }

/* Mail-Liste im Vorgang: kompakte Zeilen, aufklappbar */
.mail-liste { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mail-zeile { border-bottom: 1px solid var(--color-border-light); border-left: 3px solid transparent; }
.mail-zeile:last-child { border-bottom: none; }
.mail-zeile.mail-offen { border-left-color: #F59E0B; }
.mail-zeile.aufgeklappt { background: #FBFCFD; }
.mail-markiert { box-shadow: inset 0 0 0 2px rgba(107,180,208,.6); }
.mail-zeile-kopf { width: 100%; display: grid; grid-template-columns: 14px 118px 112px minmax(120px, 190px) 1fr auto; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: none; border: none; text-align: left; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.mail-zeile-kopf:hover { background: rgba(107,180,208,.06); }
.mail-zeile-kopf:focus-visible { outline: 2px solid var(--color-contex-blue); outline-offset: -2px; }
.mz-pfeil { color: var(--color-text-muted); transition: transform var(--transition); font-size: 12px; }
.aufgeklappt .mz-pfeil { transform: rotate(90deg); color: var(--color-contex-blue); }
.mz-datum { color: var(--color-text-secondary); font-size: var(--font-size-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mz-von { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mz-betreff { min-width: 0; display: flex; flex-direction: column; }
.mz-betreff b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-kurz { font-size: var(--font-size-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-info { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }
.mz-anh { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.mail-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); padding: var(--space-2) var(--space-5) var(--space-5) calc(var(--space-4) + 26px); }
.mail-detail-seite { border-left: 1px solid var(--color-border-light); padding-left: var(--space-5); min-width: 0; }
.mail-detail .mail-text { max-height: 520px; background: #fff; }
@media (max-width: 1100px) {
  .mail-detail { grid-template-columns: 1fr; padding-left: var(--space-4); }
  .mail-detail-seite { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border-light); padding-top: var(--space-4); }
}
@media (max-width: 760px) {
  .mail-zeile-kopf { grid-template-columns: 14px auto 1fr; grid-template-areas: "p typ datum" "p von von" "p betreff betreff" "p info info"; row-gap: 4px; }
  .mz-pfeil { grid-area: p; align-self: start; margin-top: 4px; }
  .mz-typ { grid-area: typ; } .mz-datum { grid-area: datum; text-align: right; }
  .mz-von { grid-area: von; } .mz-betreff { grid-area: betreff; } .mz-info { grid-area: info; }
  .mz-info:empty { display: none; }
}
.mail-zusammenfassung { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }

.fakten { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fakt { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 4px 10px; display: flex; flex-direction: column; min-width: 0; }
.fakt-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 600; }
.fakt-wert { font-size: var(--font-size-sm); font-weight: 500; }
.parteien { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.partei { font-size: var(--font-size-xs); background: #fff; border: 1px dashed var(--color-border); border-radius: var(--radius-full); padding: 2px 10px; }
.abm-tabelle { margin-top: var(--space-3); border-collapse: collapse; font-size: var(--font-size-xs); width: auto; }
.abm-tabelle th { text-align: left; color: var(--color-text-muted); font-weight: 600; padding: 2px 12px 2px 0; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.abm-tabelle td { padding: 2px 12px 2px 0; border-top: 1px solid var(--color-border-light); font-variant-numeric: tabular-nums; }

.anhang-liste { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); align-items: center; }
.anhang { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 3px 10px; font-size: var(--font-size-xs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang:hover { border-color: var(--color-contex-blue); }

.mail-aktionen { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mail-begruendung { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ── Mailtext-Dialog ── */
.mail-meta-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-4); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.mail-meta-grid > span:nth-child(odd) { color: var(--color-text-muted); }
.mail-meta-grid > *:nth-child(even) { word-break: break-word; }
.tab-leiste { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.mail-text { white-space: pre-wrap; word-break: break-word; font-family: var(--font-family); font-size: var(--font-size-sm); background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-4); max-height: 55vh; overflow: auto; line-height: 1.5; }
.verlauf-teil + .verlauf-teil { margin-top: var(--space-3); }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(47,47,47,.45); z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--space-4) var(--space-4); overflow-y: auto; }
.modal { background: var(--color-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; display: flex; flex-direction: column; max-height: 88vh; }
.modal-breit { max-width: 760px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-light); }
.modal-title { font-size: var(--font-size-lg); font-weight: 600; word-break: break-word; }
.modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--color-text-muted); padding: 0 4px; }
.modal-close:hover { color: var(--color-text-primary); }
.modal-body { padding: var(--space-5) var(--space-6); overflow-y: auto; }
.modal-error { margin: 0 var(--space-6) var(--space-3); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border-light); background: var(--color-bg); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* Zuordnen-Dialog */
.zuo-abschnitt + .zuo-abschnitt { margin-top: var(--space-5); }
.zuo-titel { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.zuo-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; margin-bottom: var(--space-2); transition: border-color var(--transition), background-color var(--transition); }
.zuo-option:hover { border-color: var(--color-contex-blue); }
.zuo-option:has(input:checked) { border-color: var(--color-contex-blue); background: var(--color-contex-blue-light); }
.zuo-option input[type=radio] { margin-top: 4px; accent-color: var(--color-contex-blue); }
.zuo-option-text { flex: 1; min-width: 0; font-size: var(--font-size-sm); }

/* ── Prüfliste ── */
.pruef-liste { display: flex; flex-direction: column; gap: var(--space-4); }
.pruef-karte { display: grid; grid-template-columns: 1fr 32px minmax(220px, 300px); grid-template-areas: "mail pfeil vorschlag" "text text text" "aktionen aktionen aktionen"; gap: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-left: 4px solid #F59E0B; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); transition: opacity .3s; }
.pruef-mail { grid-area: mail; min-width: 0; }
.pruef-pfeil { grid-area: pfeil; align-self: center; font-size: 22px; color: var(--color-text-muted); text-align: center; }
.pruef-vorschlag { grid-area: vorschlag; background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3); }
.pruef-vorgang { font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
.pruef-vorgang:hover { color: var(--color-contex-blue-dark); text-decoration: underline; }
.pruef-aktionen { grid-area: aktionen; display: flex; gap: var(--space-2); flex-wrap: wrap; border-top: 1px solid var(--color-border-light); padding-top: var(--space-3); }
.pruef-text { grid-area: text; min-width: 0; }
.pruef-erledigt { opacity: .35; }
@media (max-width: 760px) {
  .pruef-karte { grid-template-columns: 1fr; grid-template-areas: "mail" "vorschlag" "text" "aktionen"; }
  .pruef-pfeil { display: none; }
}

/* ── Mobil ── */
@media (max-width: 900px) {
  .main-nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  .page-header { height: auto; padding: var(--space-2) 0; }
  .page-header .container { flex-wrap: wrap; }
  .header-username { display: none; }
  .table-wrapper { overflow-x: auto; }
}