/* TradeHub – Compliance (Dossier pro Produkt)
   Hinweis: bewusst nur minimale, view-spezifische Styles.
   Bestehende Variablen/Klassen aus index.html werden genutzt. */

#viewCompliance{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* Filter & Suche */
#viewCompliance .compFilters{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.3fr;
  gap:12px;
}

@media(max-width:1200px){
  #viewCompliance .compFilters{ grid-template-columns: 1fr 1fr; }
}

/* Desktop: gleiche Flex-Column-Logik wie bei den anderen Views */
@media (min-width:981px){
  #viewCompliance{
    flex:1;
    min-width:0;
    overflow:hidden;
  }
  #viewCompliance .listCard{
    flex:1;
    min-height:0;
    overflow:hidden;
  }
  #viewCompliance .listCard .table{
    flex:1;
    min-height:0;
    overflow:auto;
  }
}

/* Empty-State innerhalb der List-Card */
#viewCompliance .compEmpty{
  padding:14px 14px;
  border:1px dashed var(--bd);
  border-radius:14px;
  color:var(--mut);
  margin-bottom:10px;
}

/* Picker im Modal */
.compPickList{
  border:1px solid var(--bd);
  border-radius:12px;
  overflow:auto;
  max-height:220px;
  background:rgba(255,255,255,.02);
}
html[data-theme=light] .compPickList{ background:rgba(0,0,0,.02); }

.compPickRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:9px 10px;
  border-bottom:1px solid var(--bd);
  cursor:pointer;
  user-select:none;
}
.compPickRow:last-child{ border-bottom:none; }

.compPickRow:hover{ background:rgba(255,255,255,.03); }
html[data-theme=light] .compPickRow:hover{ background:rgba(0,0,0,.03); }

.compPickRow input{ margin-top:2px; }

.compPickRow .t{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.compPickRow .t .l1{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compPickRow .t .l2{
  font-size:12px;
  color:var(--mut);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Anforderungsliste */
.compReqList{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
@media(max-width:720px){
  .compReqList{ grid-template-columns:1fr; }
}

.compReq{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:9px 10px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  user-select:none;
}
html[data-theme=light] .compReq{ background:rgba(0,0,0,.02); }

.compReq:hover{ background:rgba(255,255,255,.03); }
html[data-theme=light] .compReq:hover{ background:rgba(0,0,0,.03); }

.compReq input{
  margin-top:2px;
  flex:0 0 auto;

  /* Slightly larger tickboxes (native) for better usability */
  width:18px;
  height:18px;
}

.compReq.inline{
  border-radius:12px;
  padding:9px 12px;
}
/* Produkt-Picker im Modal: Suche + Ergebnisliste untereinander (professioneller, mehr Übersicht) */
.compProdPicker{ margin-top:6px; }
.compProdList{ max-height:260px; }

/* Selected row highlight */
.compPickRow.sel{
  background:rgba(59,130,246,.08);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.22);
}
html[data-theme=light] .compPickRow.sel{
  background:rgba(29,78,216,.06);
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.16);
}

/* Modal: Labels wie in Bestellungen (grau statt hellblau) */
#mCompliance .dlg label:not(.btn):not(.chip):not(.compReq):not(.compPickRow){
  color:rgba(226,232,240,.78);
  font-size:12px;
  font-weight:600;
  letter-spacing:.25px;
  margin-bottom:6px;
}
html[data-theme=light] #mCompliance .dlg label:not(.btn):not(.chip):not(.compReq):not(.compPickRow){
  color:rgba(15,23,42,.72);
}


/* Info/Lock-Hinweis im Produkt-Picker */
.compLockHint{
  padding:8px 10px;
  border:1px dashed var(--bd);
  border-radius:12px;
  background:rgba(59,130,246,.06);
  color:var(--mut);
}
html[data-theme=light] .compLockHint{
  background:rgba(29,78,216,.04);
}
/* Modal: Notiz-Karte (gleiches Design wie „Dokumente“ + Textarea füllt die Höhe) */
#mCompliance .compNoteCard{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  height:100%;
  min-height:0;
}
#mCompliance .compNoteCard .compNoteArea{
  flex:1;
  min-height:220px;
  margin-top:10px;
  resize:vertical;
}

/* ------------------------------------------------------------
   Compliance Dossier – UI Polish (requested)
   ------------------------------------------------------------ */

/* Remove the extra accent line on the inner cards inside the Dossier modal
   (it looked like a "double line" together with the card border).
   Keep the main modal accent line (handled globally on .dlg::before). */
#mCompliance .compCard.pad::before{
  content:none !important;
  display:none !important;
}
#mCompliance .compCard.pad{
  padding-top:14px !important; /* reset main-card padding-top override */
}

/* Requirements: use neutral text color (checkbox can stay accent-blue) */
#mCompliance .compReq{
  color:rgba(226,232,240,.88);
  font-weight:600;
}
html[data-theme=light] #mCompliance .compReq{
  color:rgba(15,23,42,.82);
}

/* Section titles (Aus Produkt / Anforderungen / Dokumente / Notiz)
   → gleiche Optik wie bei „Zolldokumente“ (bold + leicht größer) */
#mCompliance .secTitle{
  font-size:16px;
  font-weight:700;
}

/* Ensure consistent spacing between the section cards inside the grouped wrappers.
   (Fixes missing gaps between "Aus Produkt" ↔ "Anforderungen" and "Dokumente" ↔ "Notiz") */
#mCompliance .compGrid2{
  display:flex;
  flex-direction:column;
  gap:14px;
}