/*
 * Dokumentenlenkung / DMS (alle Labs), auf den Tokens aus design.css.
 *
 * Eigene Gattung: eine Ablage, aufgebaut wie eine Dokumentbibliothek. Kopf mit Ablage,
 * Suche und Konto; Befehlsleiste (Ansicht, Sortieren, Status); die Bibliothek als Liste
 * oder Kacheln; das geoeffnete Dokument rechts als Blatt Papier auf grauem Tisch.
 * Signatur: Registerbraun (#8a7d63), dieselbe Familie wie das Dokument.
 *
 * --sp-akz ist das Registerbraun abgedunkelt: als Text auf Weiss und auf --sp-soft
 * mindestens 4,5:1.
 */

.dms {
  --papier: #f4f2ed;
  --register: #8a7d63;
  --kante: #e2ddd2;
  --sp-akz: color-mix(in srgb, var(--accent, #8a7d63) 70%, #2b2418);
  --sp-soft: color-mix(in srgb, var(--accent, #8a7d63) 12%, white);
  --sp-cols: 44px minmax(220px, 3fr) minmax(130px, 1.3fr) 72px 118px 104px minmax(130px, 1.4fr);

  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ds-bg-surface);
  font-family: var(--font-sans);
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Kopf: Ablage, Suche, Konto ---------- */
.dms-head {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--ds-head-h);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: var(--ds-bg-surface);
  border-bottom: 1px solid var(--ds-border-subtle);
  flex-shrink: 0;
}
.dms-mark {
  width: 32px; height: 32px; border-radius: var(--r-m);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--register); color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  flex-shrink: 0;
}
.dms-mark svg { width: 18px; height: 18px; }
.dms-brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dms-name { font-size: var(--fs-l); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--ds-text); white-space: nowrap; }
.dms-sub { font-size: var(--fs-s); color: var(--ds-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-search {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 0 1 440px; height: 34px; margin: 0 0 0 auto; padding: 0 var(--sp-3);
  background: var(--ds-bg-muted); border: 1px solid transparent; border-radius: var(--r-s);
  color: var(--ds-text-3);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.sp-search:hover { background: var(--ds-bg-active); }
.sp-search:focus-within { background: var(--ds-bg-surface); border-color: var(--sp-akz); box-shadow: 0 0 0 3px rgba(138, 125, 99, 0.18); }
.sp-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.dms .dms-search {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; outline: none;
  font-family: inherit; font-size: var(--fs-m); color: var(--ds-text);
}
.dms-search::placeholder { color: var(--ds-text-3); }
.sp-user { display: inline-flex; margin-left: var(--sp-2); flex-shrink: 0; }

/* ---------- Befehlsleiste ---------- */
.dms .ds-cmd svg { color: var(--sp-akz); }
.dms .ds-cmd[aria-pressed="true"] { background: var(--sp-soft); color: var(--sp-akz); }
.dms-status { font-size: var(--fs-s); color: var(--ds-text-3); padding-right: var(--sp-1); white-space: nowrap; }

/* ---------- Bibliothek und Vorschau ---------- */
.dms-split { display: flex; flex: 1; min-height: 0; }
.dms-list {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--ds-bg-surface);
  container-type: inline-size; container-name: splib;
}
.dms-split.mit-vorschau .dms-list { flex: 0 0 clamp(360px, 40%, 640px); border-right: 1px solid var(--ds-border-subtle); }

.sp-titel { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-2); flex-shrink: 0; }
.sp-titel h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--ds-text); }
.sp-filterchip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 4px 0 10px; border-radius: var(--r-pill);
  background: var(--sp-soft); color: var(--sp-akz); font-size: var(--fs-s); font-weight: var(--fw-semibold);
}
.sp-chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.sp-chip-x:hover { background: rgba(0, 0, 0, 0.06); }
.sp-chip-x svg { width: 12px; height: 12px; }

/* Spaltenkopf und Zeilen teilen dieselben Spalten (--sp-cols) */
.sp-thead {
  display: grid; grid-template-columns: var(--sp-cols); align-items: center;
  height: 38px; margin: 0 var(--sp-3); flex-shrink: 0;
  border-bottom: 1px solid var(--ds-border);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2);
}
.sp-th { display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 var(--sp-2); min-width: 0; white-space: nowrap; }
.sp-th.sp-c-ic { justify-content: center; color: var(--ds-icon); }
.sp-th.sp-c-ic svg { width: 15px; height: 15px; }
.sp-th[data-dsort] { cursor: pointer; user-select: none; border-radius: var(--r-xs); }
.sp-th[data-dsort]:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.sp-th[data-dsort]:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.sp-th.sortiert { color: var(--ds-text); }
.sp-th-pfeil { display: inline-flex; color: var(--sp-akz); }
.sp-th-pfeil svg { width: 13px; height: 13px; }

.dms-items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-4); }
.dms .dms-item {
  display: grid; grid-template-columns: var(--sp-cols); align-items: center;
  width: 100%; min-height: 48px; height: auto; margin: 0; padding: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--ds-border-subtle); border-radius: 0;
  text-align: left; cursor: pointer;
  font-family: inherit; font-size: var(--fs-m); font-weight: var(--fw-regular); color: var(--ds-text);
  box-shadow: none;
  transition: background var(--dur-1) var(--ease);
}
.dms .dms-item > span { padding: 0 var(--sp-2); min-width: 0; }
.dms .dms-item:hover { background: var(--ds-bg-hover); }
.dms .dms-item:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.dms .dms-item.aktiv, .dms .dms-item.aktiv:hover { background: var(--sp-soft); box-shadow: inset 3px 0 0 var(--sp-akz); }

.dms-item .sp-c-ic { display: flex; justify-content: center; }
.sp-file {
  width: 28px; height: 32px; border-radius: 3px 9px 3px 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sp-soft); color: var(--sp-akz);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #8a7d63) 28%, white);
}
.sp-file svg { width: 16px; height: 16px; }
.dms-item .sp-c-name { display: flex; flex-direction: column; gap: 1px; }
.dms-item-title {
  font-size: var(--fs-m); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dms .dms-item:hover .dms-item-title { text-decoration: underline; text-decoration-color: var(--ds-border-strong); text-underline-offset: 2px; }
.sp-c-name .dms-item-az { display: none; font-size: var(--fs-xs); color: var(--ds-text-3); }
.dms-item .sp-c-az { font-size: var(--fs-s); color: var(--ds-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dms-item .sp-c-fass { font-size: var(--fs-s); color: var(--ds-text-2); }
.dms-item .sp-c-dat { font-size: var(--fs-s); color: var(--ds-text-2); white-space: nowrap; }
.dms-item .sp-c-own { font-size: var(--fs-s); color: var(--ds-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-kachel-meta { display: none; }

/* Der Lenkungsstand ist die eine Angabe, wegen der man hinsehen muss */
.dms-badge.ds-pill { flex-shrink: 0; }
.dms-badge.alt { background: #efece6; color: #5f574b; }
.dms-badge.alt::before { background: #9b927f; }

/* Abgeloeste Fassung: in der Liste zurueckgenommen wie im DMS, nicht versteckt. */
.dms .dms-item.alt { background: #fbfaf7; }
.dms .dms-item.alt .dms-item-title { color: var(--ds-text-3); }
.dms .dms-item.alt .sp-file { background: var(--ds-bg-muted); color: var(--ds-gray-600); box-shadow: inset 0 0 0 1px var(--ds-border); }

.dms-empty .ds-empty-v3 { min-height: 220px; }

/* Schmale Bibliothek (neben der Vorschau oder im kleinen Fenster) */
@container splib (max-width: 860px) {
  .sp-thead, .dms-items { --sp-cols: 44px minmax(200px, 3fr) minmax(120px, 1.3fr) 64px 112px 96px; }
  .sp-c-own { display: none !important; }
}
@container splib (max-width: 660px) {
  .sp-thead, .dms-items { --sp-cols: 44px minmax(0, 1fr) 108px 92px; }
  .sp-c-az, .sp-c-fass { display: none !important; }
  .sp-c-name .dms-item-az { display: block; }
  .dms .dms-items:not(.is-kacheln) .dms-item { padding: 5px 0; }
}
@container splib (max-width: 440px) {
  .sp-thead, .dms-items { --sp-cols: 44px minmax(0, 1fr) 104px; }
  .sp-c-dat { display: none !important; }
}

/* ---------- Kachelansicht ---------- */
.dms.sp-kacheln .sp-thead { display: none; }
.dms-items.is-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3);
  align-content: start; padding: var(--sp-2) var(--sp-5) var(--sp-5);
}
.dms .is-kacheln .dms-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  min-height: 168px; padding: var(--sp-4);
  background: var(--ds-bg-surface); border: 1px solid var(--ds-border); border-radius: var(--r-m);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dms .is-kacheln .dms-item > span { padding: 0; width: 100%; }
.dms .is-kacheln .dms-item:hover { background: var(--ds-bg-surface); border-color: var(--ds-border-strong); box-shadow: var(--sh-2); }
.dms .is-kacheln .dms-item.aktiv { border-color: var(--sp-akz); box-shadow: inset 0 0 0 1px var(--sp-akz); background: var(--sp-soft); }
.dms .is-kacheln .dms-item.alt { background: #fbfaf7; }
.dms .is-kacheln .sp-c-ic { justify-content: flex-start; margin-bottom: var(--sp-1); }
.dms .is-kacheln .sp-file { width: 40px; height: 46px; border-radius: 4px 12px 4px 4px; }
.dms .is-kacheln .sp-file svg { width: 22px; height: 22px; }
.dms .is-kacheln .dms-item-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dms .is-kacheln .sp-c-name .dms-item-az { display: block; margin-top: 2px; }
.dms .is-kacheln .sp-c-az, .dms .is-kacheln .sp-c-fass, .dms .is-kacheln .sp-c-dat, .dms .is-kacheln .sp-c-own { display: none !important; }
.dms .is-kacheln .sp-c-stat { margin-top: auto; }
.dms .is-kacheln .sp-kachel-meta { display: block; font-size: var(--fs-xs); color: var(--ds-text-3); }

/* ---------- Vorschau: Blatt auf dem Tisch ---------- */
.dms-view {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: #ebe8e2;
}
.sp-prev-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-2) 0 var(--sp-4); flex-shrink: 0;
  background: var(--ds-bg-surface); border-bottom: 1px solid var(--ds-border-subtle);
}
.sp-prev-file { display: inline-flex; color: var(--sp-akz); }
.sp-prev-file svg { width: 17px; height: 17px; }
.sp-prev-name { flex: 1; min-width: 0; font-size: var(--fs-m); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-prev-zu { margin-left: var(--sp-1); }
.sp-prev-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-6) var(--sp-6) var(--sp-10); }

/* Im DMS liegt das Dokument als Blatt mit Schatten auf dem Tisch */
.doc.doc-imDms {
  max-width: 860px; margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(43, 36, 24, 0.10), 0 10px 30px -14px rgba(43, 36, 24, 0.35);
  overflow: hidden;
}

/* Fassungen desselben Dokuments: Verlauf mit Punkten unter dem Kopf */
.dms-versionen { padding: var(--sp-4) var(--sp-10) var(--sp-4); border-bottom: 1px solid #ece7dc; background: #fcfbf9; }
.dms-versionen-l {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.dms-versionen-l svg { width: 14px; height: 14px; }
.sp-hist { list-style: none; margin: 0; padding: 0; position: relative; }
.sp-hist::before { content: ''; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: var(--kante); }
.sp-hist li + li { margin-top: 2px; }
.dms-version {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; height: auto; margin: 0; padding: 6px var(--sp-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-m);
  font-family: inherit; font-size: var(--fs-s); font-weight: var(--fw-regular); color: var(--ds-text);
  text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.dms-version:hover { background: var(--ds-bg-hover); }
.dms-version.hier { cursor: default; background: var(--sp-soft); border-color: color-mix(in srgb, var(--accent, #8a7d63) 30%, white); }
.sp-hist-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 3px solid var(--ds-gray-400);
  position: relative; z-index: 1;
}
.sp-hist-dot.ok { border-color: var(--ds-ok-dk); }
.sp-hist-dot.entw { border-color: var(--ds-warn-dk); }
.sp-hist-dot.alt { border-color: #9b927f; }
.sp-hist-dot.nw { border-color: var(--ds-info); }
.sp-hist-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-hist-txt strong { font-size: var(--fs-s); font-weight: var(--fw-semibold); }
.sp-hist-txt > span { color: var(--ds-text-3); }
.sp-hist-txt .mono { font-size: var(--fs-xs); }


/* Bibliotheken (Vorgaben, Nachweise und Berichte, Verträge, Vorfälle) links neben der Liste */
.dms-nav { flex: 0 0 212px; border-right: 1px solid var(--ds-border-subtle); overflow-y: auto; }
.dms-split.mit-vorschau .dms-nav { flex-basis: 188px; }
.dms-item-bib { display: none; font-size: var(--fs-xs); color: var(--ds-text-3); }
.dms-alle .sp-c-name .dms-item-bib { display: block; }

/* ---------- Schmales Fenster (zwei Fenster nebeneinander) ----------
   Die Bibliotheken bleiben erreichbar: als Leiste ueber der Liste statt als Spalte links.
   Neben der Vorschau gilt das schon ab 1080 px, damit Liste und Blatt Platz haben. Unter
   760 px liegt die geoeffnete Vorschau ueber der Liste (Schliessen fuehrt zurueck), wie
   eine Dokumentbibliothek im schmalen Fenster. Massstab ist das Fenster (wz). */
@container wz (max-width: 1080px) {
  .dms-split.mit-nav.mit-vorschau { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .dms-split.mit-nav.mit-vorschau .dms-nav {
    grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2px;
    padding: 6px var(--sp-3); border-right: 0; border-bottom: 1px solid var(--ds-border-subtle);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  }
  .dms-split.mit-nav.mit-vorschau .dms-nav .ds-navhead { display: none; }
  .dms-split.mit-nav.mit-vorschau .dms-nav .ds-navitem { flex: 0 0 auto; width: auto; height: 32px; }
  .dms-split.mit-nav.mit-vorschau .dms-nav .ds-navitem::before { display: none; }
  .dms-split.mit-nav.mit-vorschau .dms-nav .ds-navitem.is-on { box-shadow: inset 0 -2px 0 var(--sp-akz); }
  .dms-split.mit-nav.mit-vorschau .dms-list, .dms-split.mit-nav.mit-vorschau .dms-view { min-height: 0; }
  .dms-split.mit-nav.mit-vorschau { grid-template-columns: clamp(300px, 40%, 560px) minmax(0, 1fr); }
}
@container wz (max-width: 760px) {
  .dms-split.mit-nav { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .dms-split.mit-nav .dms-nav {
    grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2px;
    padding: 6px var(--sp-3); border-right: 0; border-bottom: 1px solid var(--ds-border-subtle);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  }
  .dms-split.mit-nav .dms-nav .ds-navhead { display: none; }
  .dms-split.mit-nav .dms-nav .ds-navitem { flex: 0 0 auto; width: auto; height: 32px; }
  .dms-split.mit-nav .dms-nav .ds-navitem::before { display: none; }
  .dms-split.mit-nav .dms-nav .ds-navitem.is-on { box-shadow: inset 0 -2px 0 var(--sp-akz); }
  .dms-split.mit-nav .dms-list, .dms-split.mit-nav .dms-view { min-height: 0; }
  .dms-split.mit-nav, .dms-split.mit-nav.mit-vorschau { grid-template-columns: minmax(0, 1fr); }
}
@container wz (max-width: 760px) {
  .dms-split { position: relative; }
  .dms-split.mit-vorschau .dms-view { position: absolute; inset: 0; z-index: 3; }
  .sp-prev-scroll { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .dms-versionen { padding: var(--sp-3) var(--sp-4); }
}
/* Kopf: Suche nimmt den freien Platz, der Ablagename kuerzt sich */
@container wz (max-width: 760px) {
  .dms-head { gap: var(--sp-2); }
  .dms-brand { flex: 0 1 auto; }
  .dms-name { overflow: hidden; text-overflow: ellipsis; }
  .sp-search { flex: 1 1 200px; }
}