/* Styles für die Apps von Teil B: Vorschau (vw), Texteditor (ed), Eigenschaften (pp), Papierkorb (tr),
   Systemsteuerung (cp). Nur Variablen aus docs/FRONTEND.md, damit Hell und Dunkel funktionieren. */

/* --- gemeinsam --- */
.vw, .ed, .pp, .tr, .cp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ed-status .spacer, .tr-foot .spacer, .pp-foot .spacer, .cp-permhead .spacer { flex: 1; }
.tr-table tr.selected td, .cp-table tr.selected td, .pp-acl tr.selected td {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.tr-table th[data-key] { cursor: pointer; user-select: none; }
.tr-table th[aria-sort="ascending"]::after { content: " ▲"; font-size: 0.75em; color: var(--text-3); }
.tr-table th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.75em; color: var(--text-3); }
.tr-table .num, .cp-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Vorschau --- */
.vw { background: var(--base); outline: none; }
.vw:fullscreen { width: 100%; height: 100%; }
.vw-toolbar { flex-wrap: wrap; }
.vw-nav, .vw-zoom { display: flex; align-items: center; gap: 6px; }
.vw-zoom[hidden] { display: none; }
.vw-counter { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.vw-zoom-label { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.vw-stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vw-stage.is-image { display: block; cursor: grab; touch-action: none; user-select: none; }
.vw-stage.is-image.dragging { cursor: grabbing; }
.vw-img {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  opacity: 0; image-rendering: auto; -webkit-user-drag: none;
}
.vw-img.ready { opacity: 1; }
.vw-media { max-width: 100%; max-height: 100%; background: #000; }
.vw-stage.is-video .vw-media { width: 100%; height: 100%; object-fit: contain; }
.vw-audiobox {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(520px, 90%);
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.vw-audiobox .vw-media { width: 100%; background: none; }
.vw-audio-name { font-weight: 600; text-align: center; word-break: break-word; }
.vw-pdf { width: 100%; height: 100%; border: 0; background: var(--panel); }
.vw-msg { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* --- Texteditor --- */
.ed-toolbar { flex-wrap: wrap; }
.ed-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 18%, var(--raised));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--text);
}
.ed-main { position: relative; flex: 1; min-height: 0; }
.ed-ace { position: absolute; inset: 0; font-family: var(--mono); }
.ed-problem { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ed-status {
  display: flex; align-items: center; gap: 14px; padding: 4px 12px; min-height: 26px;
  border-top: 1px solid var(--border); background: var(--panel); color: var(--text-2); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Ace-Suchleiste an die Oberfläche anpassen */
.ed .ace_search {
  background: var(--panel); color: var(--text-2); border-color: var(--border);
  border-radius: 0 0 0 var(--radius-sm); font-family: var(--font);
}
.ed .ace_search_field, .ed .ace_search .ace_searchbtn, .ed .ace_search .ace_replacebtn {
  background: var(--field); color: var(--text); border-color: var(--border);
}
.ed .ace_search .ace_button { color: var(--text-2); border-color: var(--border); }
.ed .ace_search .ace_button:hover, .ed .ace_search .ace_searchbtn:hover { background: var(--raised); }
.ed .ace_search .ace_button.checked { border-color: var(--accent); color: var(--accent); }
.ed .ace_search_counter { color: var(--text-3); }

/* --- Eigenschaften --- */
.pp-tabs { padding: 0 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pp-panel { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.pp-panel[hidden] { display: none; }
.pp-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.pp-icon { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; }
.pp-icon svg { width: 48px; height: 48px; }
.pp-name { font-size: 16px; font-weight: 600; word-break: break-word; }
.pp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.pp-dl dt { color: var(--text-3); }
.pp-dl dd { margin: 0; word-break: break-word; }
.pp-mono { font-family: var(--mono); font-size: 12.5px; }
.pp-section { margin-bottom: 20px; }
.pp-section h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-2);
}
.pp-hint { margin: 6px 0 8px; font-size: 12.5px; }
.pp-matrixrow { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pp-matrix { width: auto; }
.pp-c { text-align: center; width: 1%; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.pp-octalfield { max-width: 110px; }
.pp-octal { font-family: var(--mono); width: 90px; text-align: center; letter-spacing: 1px; }
.pp-octal.invalid { border-color: var(--bad); }
.pp-acl td, .pp-acl th { vertical-align: middle; }
.pp-mask td { color: var(--text-3); font-style: italic; }
.pp-none { text-align: center; padding: 10px; }
.pp-actions { text-align: right; white-space: nowrap; }
.pp-acl { width: 100%; }
.pp-acl .pp-c { padding-left: 4px; padding-right: 4px; }
.pp-actions .btn { margin-left: 4px; padding: 2px 8px; font-size: 12px; }
.pp-aclform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pp-aclform .input { flex: 1; min-width: 140px; }
.pp-aclbits { display: inline-flex; gap: 10px; color: var(--text-2); font-family: var(--mono); }
.pp-aclbits label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.pp-foot {
  position: sticky; bottom: -16px; display: flex; align-items: center; gap: 12px;
  margin: 8px -16px -16px; padding: 12px 16px; background: var(--panel); border-top: 1px solid var(--border);
}
.pp-check, .cp-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pp-error, .cp-modal-error, .cp-warn {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--text);
}
.pp-error[hidden], .cp-modal-error[hidden] { display: none; }

/* --- Papierkorb --- */
.tr-list { flex: 1; min-height: 0; overflow: auto; outline: none; }
.tr-table { width: 100%; }
.tr-table tbody tr { cursor: default; user-select: none; }
.tr-check { width: 32px; text-align: center; }
.tr-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-icon { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; }
.tr-icon svg { width: 20px; height: 20px; }
.tr-foot {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; font-size: 12px;
  border-top: 1px solid var(--border); background: var(--panel);
}

/* --- Systemsteuerung --- */
.cp { position: relative; flex-direction: row; }
.cp-nav { flex-shrink: 0; width: 200px; overflow: auto; }
.cp-nav .list-item { width: 100%; text-align: left; }
.cp-content { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px; }
.cp-title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.cp-section > .toolbar { margin-bottom: 10px; }
.cp-table { width: 100%; }
.cp-table tbody tr { cursor: default; }
.cp-strong { font-weight: 600; }
.cp-mono { font-family: var(--mono); font-size: 12.5px; }
.cp-note { margin: 12px 0; color: var(--text-2); font-size: 13px; }
.cp-link { color: var(--accent); font-weight: 600; word-break: break-all; }
.cp-link:hover { text-decoration: underline; }
.cp-info { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 16px; }
.cp-info dt { color: var(--text-3); }
.cp-info dd { margin: 0; }

.cp-modal-backdrop {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--base) 55%, transparent);
}
.cp-modal {
  display: flex; flex-direction: column; width: min(640px, 100%); max-height: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cp-modal-head { padding: 14px 18px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--border-soft); }
.cp-modal-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; }
.cp-modal-error { margin: 0 18px 10px; }
.cp-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-soft); }
.cp-form { display: flex; flex-direction: column; gap: 12px; }
.cp-form p { margin: 0; }
.cp-permhead { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cp-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid var(--border);
}
.cp-switch button {
  border: 0; background: none; padding: 4px 12px; border-radius: calc(var(--radius-sm) - 3px); cursor: pointer;
  color: var(--text-2); font-size: 12.5px; font-weight: 600;
}
.cp-switch button:hover { color: var(--text); }
.cp-switch button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.cp-perms { width: 100%; }
.cp-c { text-align: center; width: 120px; }
.cp-c input { cursor: pointer; }

@media (max-width: 640px) {
  .cp { flex-direction: column; }
  .cp-nav { width: auto; display: flex; overflow-x: auto; }
  .cp-nav .list-item { width: auto; white-space: nowrap; }
  .pp-dl, .cp-info { grid-template-columns: 1fr; gap: 2px 0; }
  .pp-dl dd, .cp-info dd { margin-bottom: 8px; }
}