.p4q-app{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;box-sizing:border-box}
.p4q-app *{box-sizing:border-box}

/*
  FIT-MODUS: Wenn Videos geladen sind, wird die Oberfläche als "App" in der
  Viewport-Höhe dargestellt, sodass (typischerweise) alle 4 Fenster ohne Scrollen
  sichtbar bleiben. Bei sehr kleinen Viewports wird natürlich trotzdem eng –
  aber wir holen das Maximum heraus.
*/
.p4q-app.p4q-fit{
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.p4q-app.p4q-hide-config .p4q-config{display:none}

.p4q-app.p4q-fit .p4q-controls,
.p4q-app.p4q-fit .p4q-config{margin:0}

.p4q-app.p4q-fit .p4q-controls,
.p4q-app.p4q-fit .p4q-config{
  padding: 8px;
}

.p4q-app.p4q-fit .p4q-row{gap:8px}
.p4q-app.p4q-fit .p4q-hint{font-size:11px}

.p4q-app.p4q-fit .p4q-controls button,
.p4q-app.p4q-fit .p4q-controls select,
.p4q-app.p4q-fit .p4q-controls input[type=number],
.p4q-app.p4q-fit .p4q-config button,
.p4q-app.p4q-fit .p4q-config input[type=text]{padding:5px 8px}

.p4q-app.p4q-fit .p4q-grid{
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.p4q-app.p4q-fit .p4q-cell{min-height:0}

/* In Fit-Modus brauchen wir KEIN aspect-ratio; die Grid-Zelle gibt die Höhe vor */
.p4q-app.p4q-fit .p4q-frame{
  aspect-ratio: auto !important;
  height: 100% !important;
}

/* Vollbild-Overlay (maximiert die Arbeitsoberfläche; optional per Button) */
.p4q-app.p4q-fullscreen{
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: #fff;
  padding: 10px;
  border-radius: 0;
}
html.p4q-fullscreen-active, html.p4q-fullscreen-active body{overflow:hidden}
html.p4q-fullscreen-active #wpadminbar{display:none !important}
.p4q-controls,.p4q-config{padding:10px;border:1px solid #ddd;border-radius:10px;margin:0 0 10px 0;background:#fafafa}
/* Notes: docked side panel (shows active video next to notes) */
.p4q-notes{padding:10px;border:1px solid #ddd;border-radius:10px;margin:0;background:#fafafa}

/* When notes are open, dock the panel on the right and keep the active video visible */
.p4q-app.p4q-notes-open{--p4q-notes-w:min(520px, 40vw);padding-right:calc(var(--p4q-notes-w) + 20px)}

/* In docked mode we don't dim the videos with a backdrop */
.p4q-app.p4q-notes-open .p4q-notes-backdrop{display:none !important}

.p4q-notes-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999998}
.p4q-notes-backdrop.p4q-open{display:block}

/* Docked panel */
.p4q-notes-overlay{
  display:none;
  position:fixed;
  top:10px;
  right:10px;
  left:auto;
  transform:none;
  width:var(--p4q-notes-w, min(520px, 40vw));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:auto;
  z-index:9999999;
  box-shadow:0 16px 40px rgba(0,0,0,.25)
}
.p4q-app.p4q-notes-open .p4q-notes-overlay{display:block}

/* While notes are open, show only the active (master) cell in the grid */
.p4q-app.p4q-notes-open .p4q-grid{grid-template-columns:1fr;grid-template-rows:1fr}
.p4q-app.p4q-notes-open .p4q-cell:not(.p4q-active){display:none}
.p4q-app.p4q-notes-open .p4q-cell.p4q-active{min-height:0}
.p4q-app.p4q-notes-open .p4q-frame{aspect-ratio:auto !important;height:100% !important}

.p4q-notes-close{border-radius:8px;border:1px solid #ccc;padding:6px 10px;background:#fff;cursor:pointer}
.p4q-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.p4q-label{font-weight:600}
.p4q-hint{opacity:.8;font-size:12px}
.p4q-check{display:inline-flex;gap:6px;align-items:center;font-size:14px}
.p4q-offsets input{width:90px}
/* Offsets are collapsible */
.p4q-offsets{display:none}
.p4q-app.p4q-offsets-open .p4q-offsets{display:flex}
.p4q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p4q-cell{position:relative;background:#000;border-radius:12px;overflow:hidden;border:1px solid #222}
/* green highlight for active (master) cell */
.p4q-cell.p4q-active{border:3px solid #28a745;box-shadow:0 0 0 2px rgba(40,167,69,.25) inset}
.p4q-cell.p4q-active .p4q-badge{background:rgba(40,167,69,.85);color:#fff}
/* Panopto Quad: Embed soll die volle Zellenhöhe ausfüllen
   WICHTIG: Der Container braucht trotzdem eine Höhe. Standardmäßig geben wir
   eine 16:9-Höhe über aspect-ratio, damit nichts „zusammenklappt“. */
.p4q-frame{
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  /* sorgt für sichtbare Höhe (wie vorher), während das Panopto-Embed selbst 100% füllt */
  aspect-ratio: 16 / 9 !important;
}

/* das von Panopto erzeugte Wrapper-DIV auf volle Höhe ziehen */
.p4q-frame > div{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* iframe gegen Theme-Regeln (height:auto) absichern */
.p4q-frame iframe{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* Fallback falls aspect-ratio nicht unterstützt wird (nur relevant außerhalb Fit-Modus) */
@supports not (aspect-ratio: 16 / 9){
  .p4q-app:not(.p4q-fit) .p4q-frame{
    height: 0 !important;
    padding-top: 56.25% !important;
  }
}


.p4q-badge{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.85);color:#000;font-weight:700;font-size:12px;padding:4px 8px;border-radius:999px}
.p4q-status{margin-top:8px;font-size:13px;opacity:.9}
.p4q-status code,.p4q-config-status code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.p4q-controls button,.p4q-controls select,.p4q-controls input[type=number],
.p4q-config button,.p4q-config input[type=text]{border-radius:8px;border:1px solid #ccc;padding:6px 10px;background:#fff}
.p4q-controls button,.p4q-config button{cursor:pointer}
.p4q-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.p4q-config-grid label{display:flex;flex-direction:column;gap:6px}
.p4q-config-actions{gap:12px}
.p4q-config-status{margin-top:6px;font-size:13px}

/* Notizen */
.p4q-notes-head{align-items:baseline}
.p4q-notes-add{align-items:flex-start}
.p4q-note-text{min-width:260px;flex:1 1 420px;resize:vertical}
.p4q-codebar{width:100%;flex-direction:column;align-items:stretch}
.p4q-code-buttons{display:flex;flex-wrap:wrap;gap:8px}
.p4q-code-btn{position:relative;border:1px solid #ccc;border-radius:999px;padding:4px 10px;background:#fff;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px}
.p4q-code-btn::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:#111;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.p4q-code-btn:hover::after{opacity:1}
.p4q-code-addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.p4q-code-addrow label{display:flex;flex-direction:column;gap:6px}
.p4q-code-addrow input{border-radius:8px;border:1px solid #ccc;padding:6px 10px;background:#fff;min-width:220px}
.p4q-code-list{display:flex;flex-direction:column;gap:6px}
.p4q-code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid #eee;background:#fff;border-radius:10px;padding:6px 10px}
.p4q-code-row code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px}
.p4q-code-row button{border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;padding:4px 8px}
.p4q-notes-list{width:100%;background:#fff;border:1px solid #ddd;border-radius:10px;overflow:auto;max-height:220px;padding:6px}
.p4q-notes-table{width:100%;border-collapse:collapse;font-size:13px}
.p4q-notes-table th,.p4q-notes-table td{padding:6px 8px;border-bottom:1px solid #eee;vertical-align:top}
.p4q-notes-table th{position:sticky;top:0;background:#fff;font-weight:700}
.p4q-notes-table td small{opacity:.7}
.p4q-notes-table .p4q-note-del{border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;padding:4px 8px}
.p4q-export-text{width:100%;border-radius:10px;border:1px solid #ddd;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px}
.p4q-notes-status{margin-top:6px;font-size:13px;opacity:.9}

/* Codes UI */
.p4q-codebar{width:100%;background:#fff;border:1px dashed #ddd;border-radius:10px;padding:8px}
.p4q-code-buttons{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.p4q-code-btn{position:relative;border:1px solid #ccc;border-radius:999px;background:#fff;cursor:pointer;padding:4px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px}
.p4q-code-btn:hover{border-color:#999}
.p4q-code-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 6px);background:#111;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:2}
.p4q-code-btn[data-tip]:hover::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 2px);border:6px solid transparent;border-top-color:#111;pointer-events:none;z-index:2}
.p4q-code-addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;width:100%;margin-top:8px}
.p4q-code-addrow label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.p4q-code-addrow input{border-radius:8px;border:1px solid #ccc;padding:6px 10px;background:#fff;min-width:200px}
.p4q-code-list{width:100%;margin-top:8px}
.p4q-code-row{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px solid #eee}
.p4q-code-row code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.p4q-code-row button{border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;padding:4px 8px}

kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;border:1px solid #ccc;border-bottom-width:2px;border-radius:6px;padding:2px 6px;background:#fff}

/* Fit-Modus: Overlay bleibt, aber die Liste ist kompakter */
.p4q-app.p4q-fit .p4q-notes-list{max-height:200px}
.p4q-app.p4q-fit .p4q-export-text{max-height:200px;overflow:auto;resize:none}