/* ============================================================
   VERGI Osnabrück — portal.css
   Ergänzung zu assets/css/vergi.css. Ausschließlich Tokens des
   Designsystems; keine neuen Farben, Radien oder Schriftgrößen.
   ============================================================ */

/* Die Marketing-Seiten reservieren unten Platz für die mobile Aktionsleiste —
   im Portal gibt es die nicht. */
body.is-portal { padding-bottom: 0; }

/* ---------- Hinweise ---------- */
.pnote {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 400; line-height: 1.5;
}
.pnote .i { margin-top: 2px; }
.pnote--success  { background: var(--status-success-bg);  color: var(--status-success);  border-color: rgba(63,99,80,.18); }
.pnote--warning  { background: var(--status-warning-bg);  color: var(--status-warning);  border-color: rgba(156,117,36,.18); }
.pnote--critical { background: var(--status-critical-bg); color: var(--status-critical); border-color: rgba(152,66,59,.18); }
.pnote--info     { background: var(--sand-050);           color: var(--sand-800);        border-color: var(--line-hairline); }
.plogin__box .pnote { margin-top: var(--space-6); }

/* ---------- Seitennavigation ---------- */
.pnav__count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--sand-500); color: var(--navy-900);
  font-size: var(--fs-3xs); font-weight: 500;
}
.pnav__link.is-active .pnav__count { background: var(--sand-400); }
.pside--firm .pside__ws { color: var(--sand-500); }
.pside__avatar--light {
  background: var(--sand-100); color: var(--navy-700);
  width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; flex: 0 0 auto;
}

.panel__action { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Kopfzeile über den Listen ---------- */
.ptoolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.psearch {
  position: relative; display: flex; align-items: center;
  min-width: 260px; flex: 0 1 320px;
}
.psearch .i {
  position: absolute; left: 14px; color: var(--text-faint); pointer-events: none;
}
.psearch input {
  width: 100%; height: var(--control-h-sm); padding: 0 14px 0 38px;
  border: var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--white); font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--text-strong); outline: 0;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.psearch input:focus { border-color: var(--navy-600); }
.psearch input::placeholder { color: var(--text-faint); }

/* Filter-Chips sind Links, keine Buttons — Zustand bleibt in der URL. */
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
a.chip:hover { border-color: var(--line-accent); color: var(--text-strong); }
a.chip.is-active:hover { color: var(--text-on-navy); }

.ptabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Tabellen ---------- */
.ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptd-sub {
  display: block; margin-top: 2px;
  font-size: var(--fs-3xs); font-weight: 300; color: var(--text-faint);
}
.ptable td .btn--sm { margin-right: var(--space-2); }
.ptable form { margin: 0; }
.ppager { display: inline-flex; align-items: center; gap: var(--space-3); }
.ppager .ibtn { margin: 0; }
a.ibtn { text-decoration: none; }
.ibtn--inverse {
  background: transparent; border-color: rgba(255,255,255,.28); color: var(--text-on-navy-muted);
}
.ibtn--inverse:hover { border-color: #fff; color: #fff; }

/* Auswahlfeld direkt in einer Zeile (Statuswechsel in der Kanzleiansicht) */
.pinline select {
  height: var(--control-h-sm); padding: 0 32px 0 12px;
  border: var(--border-hairline); border-radius: var(--radius-sm);
  background-color: var(--white); font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--text-body); appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566E8C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ---------- Leerzustände ---------- */
.pempty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-12) var(--space-6); text-align: center;
}
.pempty .i { color: var(--sand-400); }
.pempty p { font-size: var(--fs-sm); font-weight: 300; color: var(--text-muted); max-width: 34ch; }

/* ---------- Definitionslisten (Stammdaten) ---------- */
.pdefs { margin: 0; display: flex; flex-direction: column; }
.pdef {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5);
  padding: var(--space-4) 0; border-bottom: var(--border-hairline);
}
.pdef:last-child { border-bottom: 0; padding-bottom: 0; }
.pdef:first-child { padding-top: 0; }
.pdef dt { font-size: var(--fs-xs); color: var(--text-muted); }
.pdef dd { margin: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--text-strong); }

/* ---------- Upload ---------- */
.pupload__actions {
  margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap;
}
.pupload .btn { margin-top: 0; }
.pupload--wide { padding: var(--space-10); }
.pupload__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.pupload__fields {
  margin-top: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
}
.pupload__field { display: flex; flex-direction: column; gap: 8px; }
.pupload__field span {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-on-navy);
}
.pupload__field input {
  height: var(--control-h); padding: 0 var(--space-4);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  background: rgba(255,255,255,.06); color: var(--text-on-navy);
  font-family: var(--font-sans); font-size: var(--fs-sm); outline: 0;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.pupload__field input::placeholder { color: var(--text-on-navy-muted); }
.pupload__field input:focus { border-color: var(--sand-500); background: rgba(255,255,255,.10); }

.pupload.is-dragover {
  outline: 2px dashed var(--sand-500); outline-offset: -8px;
  background: var(--navy-700);
}

/* Warteschlange der ausgewählten Dateien */
.pqueue { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.pqueue li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--text-on-navy);
}
.pqueue .i { color: var(--sand-500); flex: 0 0 auto; }
.pqueue__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqueue__size { color: var(--text-on-navy-muted); flex: 0 0 auto; }
.pqueue__x {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-on-navy-muted); display: grid; place-items: center;
}
.pqueue__x:hover { color: #fff; }
.pqueue li.is-error { border-color: rgba(152,66,59,.55); }
.pqueue li.is-error .pqueue__size { color: var(--brick-100); }

/* Fortschritt während der Übertragung */
.pprogress {
  margin-top: var(--space-5); height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.pprogress span {
  display: block; height: 100%; width: 0;
  background: var(--sand-500);
  transition: width var(--dur) var(--ease-standard);
}

/* ---------- Nachrichten ---------- */
.pthread__badge {
  display: inline-flex; align-items: center; margin-top: var(--space-3);
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--status-warning-bg); color: var(--status-warning);
  font-size: var(--fs-3xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.pconv__new { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.pconv__body { overflow-y: auto; max-height: 60vh; }
.pmessages .panel { align-self: stretch; }

/* ---------- Anmeldung ---------- */
.plogin__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.plogin__langs { display: flex; gap: var(--space-4); font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; }
.plogin__langs a { color: var(--text-on-navy-muted); }
.plogin__langs a[aria-current] { color: var(--sand-500); }
.plogin__langs a:hover { color: var(--sand-500); }

/* ---------- Dateifeld im hellen Formular ---------- */
.field input[type="file"] {
  height: auto; padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs); color: var(--text-body);
}
.field input[type="file"]::file-selector-button {
  margin-right: var(--space-4); height: var(--control-h-sm); padding: 0 14px;
  border: var(--border-hairline); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-strong);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--sand-050); }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .pprogress span, .pnav__link, .chip { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pupload__fields { grid-template-columns: 1fr; }
  .pdef { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 960px) {
  .pside { position: static; }
  .pnav__count { margin-left: var(--space-2); }
  .pconv__body { max-height: none; }
}
@media (max-width: 768px) {
  .ptoolbar { flex-direction: column; align-items: stretch; }
  .psearch { flex: 1 1 auto; min-width: 0; }
  .pfilters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); }
  .pfilters .chip { flex: 0 0 auto; }
  .pupload--wide { padding: var(--space-8); }
  .ptop__actions { width: 100%; }
  .ptop__actions .btn { flex: 1; }
  .ptop__actions form { flex: 1; display: flex; }
  .ptop__actions form .btn { width: 100%; }
}