/* ═══════════════════════════════════════════════
   ImageSign — Layout
   Schwarze Seitenleiste, Inhalt über die volle Breite.
   Die invertierte Fläche ist das tragende Gestaltungsmittel.
   ═══════════════════════════════════════════════ */

:root {
  --side-w: 232px;
  --side-w-sm: 64px;
  --top-h: 60px;
}

.shell {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100vh;
}
.shell.wide { grid-template-columns: var(--side-w-sm) 1fr; }

/* ─── Seitenleiste ─── */
.side {
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.side-head {
  padding: var(--s5) var(--s5) var(--s6);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.side-logo { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--white); }
.side-logo > span:last-child { display: block; min-width: 0; }
.side-logo-type { display: block; }
.side-logo-mark {
  width: 30px; height: 30px;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.side-logo-mark svg { width: 18px; height: 18px; color: var(--black); }
.side-logo-type { line-height: 1; letter-spacing: -.3px; font-size: 15px; }
.side-logo-type strong { font-weight: 700; }
.side-logo-type span { font-weight: 200; }
.side-claim {
  font-size: 7px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .24em;
  color: rgba(255,255,255,.4);
  margin-top: 3px;
}

.side-nav { flex: 1; padding: var(--s4) 0; overflow-y: auto; }

.side-group { margin-bottom: var(--s5); }
.side-group-label {
  font-size: 8px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255,255,255,.35);
  padding: 0 var(--s5) var(--s2);
}

.side-link {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s5);
  font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
  position: relative;
}
.side-link:hover { color: var(--white); background: rgba(255,255,255,.05); }
.side-link.active {
  color: var(--white);
  background: rgba(255,255,255,.08);
  border-left-color: var(--white);
  font-weight: 500;
}
.side-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.side-link.active svg { opacity: 1; }
.side-link .count {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.45);
}
.side-link.active .count { color: var(--white); }

.side-foot { border-top: 1px solid rgba(255,255,255,.1); padding: var(--s3) var(--s4); }

.ws-pick {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%;
  padding: 9px var(--s3);
  background: rgba(255,255,255,.06);
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 400;
  color: var(--white);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ws-pick:hover { background: rgba(255,255,255,.12); }
.ws-pick .label { font-size: 7px; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.45); display: block; margin-bottom: 1px; }
.ws-pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-user {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  margin-top: var(--s2);
  background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.side-user:hover { background: rgba(255,255,255,.06); }
.side-user .avatar { width: 28px; height: 28px; background: var(--white); color: var(--black); font-size: 11px; }
.side-user .who { flex: 1; min-width: 0; }
.side-user .who strong { display: block; font-size: 12px; font-weight: 500; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .who small { display: block; font-size: 10px; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Abdunkelung hinter dem ausgefahrenen Menü.
   Muss immer aus dem Raster genommen sein, sonst belegt sie eine Spalte. */
.side-scrim {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.5);
  z-index: 150;
  display: none;
}

/* ─── Hauptbereich ─── */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--g-bg); }

.topbar {
  height: var(--top-h);
  background: var(--white);
  border-bottom: 1px solid var(--g-line);
  display: flex; align-items: center;
  padding: 0 var(--s6);
  gap: var(--s4);
  position: sticky; top: 0; z-index: 90;
}
.topbar .title { flex: 1; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: var(--s2); }

.content { flex: 1; padding: var(--s6); min-width: 0; }
.content.narrow { max-width: 820px; }

/* ─── Werkzeugleiste ─── */
.toolbar {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.toolbar .search { margin-left: auto; }
.toolbar-sep { width: 1px; height: 22px; background: var(--g-line); margin: 0 var(--s1); }

.view-toggle { display: flex; border: 1px solid var(--g-line); background: var(--white); }
.view-toggle button {
  width: 32px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--g-label);
  transition: background .12s, color .12s;
}
.view-toggle button:hover { color: var(--black); }
.view-toggle button.active { background: var(--black); color: var(--white); }
.view-toggle button svg { width: 14px; height: 14px; }

.breadcrumb {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--g-label);
  margin-bottom: var(--s4);
}
.breadcrumb a { color: var(--g-label); text-decoration: none; }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb .sep { opacity: .4; }

/* ─── Raster ─── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
}
.grid.lg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ─── Liste ─── */
.list { background: var(--white); border: 1px solid var(--g-line); }
.list-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--black);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--g-label);
}
.list-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--g-line-lt);
  cursor: pointer;
  transition: background .1s;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--g-bg); }
.list-row.selected { background: var(--g-line-lt); }
.list-thumb {
  width: 48px; height: 30px;
  background: var(--g-line-lt);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-thumb svg { width: 15px; height: 15px; color: var(--black); opacity: .25; }
/* Der Name hat Vorrang: Er behält seinen Platz, die festen Spalten
   weichen zuerst. Sonst schrumpft die wichtigste Spalte auf null. */
.col-name { flex: 1 1 auto; min-width: 140px; font-size: 15px; font-weight: 500; }
.col { font-size: 14px; color: var(--g-mid); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col.w-sm { flex-basis: 90px; }
.col.w-md { flex-basis: 130px; }
.col.w-lg { flex-basis: 180px; }
.col.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Auf schmalen Flächen die entbehrlichen Spalten ausblenden */
@media (max-width: 1000px) {
  .list-head .col.w-lg, .list-row .col.w-lg { display: none; }
}
@media (max-width: 760px) {
  .list-head .col.w-md:not(:last-of-type), .list-row .col.w-md:not(:last-of-type) { display: none; }
}

/* ─── Mehrfachauswahl ─── */
.pick { width: 15px; height: 15px; accent-color: var(--black); cursor: pointer; flex-shrink: 0; }

.bulkbar {
  position: sticky; bottom: var(--s5);
  margin: var(--s5) auto 0;
  width: fit-content;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--black); color: var(--white);
  z-index: 80;
  animation: slideUp .15s ease;
}
.bulkbar .n { font-size: 15px; font-weight: 600; }
.bulkbar .lbl { font-size: 14px; color: rgba(255,255,255,.7); }
.bulkbar button {
  padding: 6px 12px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
  background: none; border: 1px solid rgba(255,255,255,.3);
  color: var(--white); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bulkbar button:hover { border-color: var(--white); background: rgba(255,255,255,.1); }
.bulkbar button.danger:hover { background: var(--status-off); border-color: var(--status-off); }

/* ─── Kennzahlen ─── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }

.stat {
  background: var(--white);
  border: 1px solid var(--g-line);
  padding: var(--s5);
}
.stat.invert { background: var(--black); color: var(--white); border-color: var(--black); }
.stat-label {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--g-label);
  margin-bottom: var(--s3);
}
.stat.invert .stat-label { color: rgba(255,255,255,.5); }
.stat-value { font-size: 35px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.stat-value em { font-weight: 200; font-style: normal; }
.stat-sub { font-size: 13px; color: var(--g-mid); margin-top: var(--s2); }
.stat.invert .stat-sub { color: rgba(255,255,255,.6); }

.stat-bar { height: 3px; background: var(--g-line); margin-top: var(--s3); }
.stat-bar span { display: block; height: 100%; background: var(--black); }
.stat.invert .stat-bar { background: rgba(255,255,255,.2); }
.stat.invert .stat-bar span { background: var(--white); }

/* ─── Abschnitte ─── */
.section { margin-bottom: var(--s8); }
.section-head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--black);
}
.section-head h2 { font-size: 17px; font-weight: 500; letter-spacing: -.2px; flex: 1; }
.section-head a { font-size: 13px; font-weight: 500; color: var(--g-mid); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; }
.section-head a:hover { color: var(--black); }

/* ─── Detailseiten: Bildschirm und Gruppe ─── */

.detail-bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: var(--white);
  border-bottom: 1px solid var(--g-line);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.detail-preview {
  width: 84px; height: 50px;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.detail-preview svg { width: 22px; height: 22px; color: rgba(255,255,255,.28); }
.detail-preview.portrait { width: 38px; height: 62px; }

.detail-title { flex: 1; min-width: 180px; }
.detail-title h1 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.detail-title .meta { margin-top: 3px; }

.detail-actions { display: flex; align-items: center; gap: var(--s1); flex-shrink: 0; }

/* ─── Bereiche ─── */
.panel {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--white);
}
.panel + .panel { border-left: 1px solid var(--g-line); }

.panel-head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--g-line);
  display: flex; align-items: center; gap: var(--s3);
  flex-shrink: 0;
  min-height: 61px;
}
.panel-head h2 {
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  flex: 1; min-width: 0;
}

.panel-note {
  padding: var(--s2) var(--s5);
  border-bottom: 1px solid var(--g-line);
  background: var(--g-bg);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--g-label);
  text-align: center;
  flex-shrink: 0;
}

.panel-body { flex: 1; overflow-y: auto; min-height: 0; }
.panel-foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--g-line);
  flex-shrink: 0;
  background: var(--g-bg);
}

/* ─── Playlist-Einträge ─── */
.pl-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--g-line-lt);
  background: var(--white);
  transition: background .1s;
}
.pl-item:last-child { border-bottom: none; }
.pl-item:hover { background: var(--g-bg); }
.pl-item { transition: background .12s, transform .12s; }
.pl-item.dragging { opacity: .35; transform: scale(.985); }
/* Einfügemarke: ein Strich oberhalb des Ziels, mit kleinem Punkt am Rand */
.pl-item.drag-over { position: relative; }
.pl-item.drag-over::before {
  content: ''; position: absolute; left: var(--s3); right: var(--s3); top: -1px;
  height: 2px; background: var(--black); z-index: 1;
}
.pl-item.drag-over::after {
  content: ''; position: absolute; left: var(--s2); top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--black); z-index: 1;
}

/* Ziel beim Ziehen aus der Bibliothek */
.panel-body.drop-target { box-shadow: inset 0 0 0 2px var(--black); background: var(--g-bg); }
.lib-row[draggable="true"] { cursor: grab; }
.lib-row[draggable="true"]:active { cursor: grabbing; }
.lib-row.dragging { opacity: .4; }
.lib-row:hover .lib-add::before { content: 'Ziehen oder '; font-weight: 300; color: var(--g-label); }

.pl-handle {
  color: var(--g-line); cursor: grab; flex-shrink: 0;
  display: flex; align-items: center;
  transition: color .12s;
}
.pl-item:hover .pl-handle { color: var(--g-label); }
.pl-handle:active { cursor: grabbing; }
.pl-handle svg { width: 14px; height: 14px; }

.pl-thumb {
  width: 60px; height: 36px;
  background: var(--g-line-lt); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-thumb svg { width: 16px; height: 16px; color: var(--black); opacity: .25; }

.pl-info { flex: 1; min-width: 0; }
.pl-name {
  font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-type {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--g-label); margin-top: 2px;
}

.pl-duration { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pl-duration .label { font-size: 9px; letter-spacing: .16em; margin-bottom: 3px; }
.pl-duration input {
  width: 48px; padding: 5px 4px; text-align: center;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  border: 1px solid var(--g-line); outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s;
}
.pl-duration input:hover { border-color: var(--g-label); }
.pl-duration input:focus { border-color: var(--black); }

/* ─── Bibliothek ─── */
.lib-tabs { background: var(--white); padding: 0 var(--s5); border-bottom: 1px solid var(--g-line); flex-shrink: 0; }
.lib-tabs .tabs { border-bottom: none; }

/* Apps in der Bibliothek */
.app-thumb { background: var(--black) !important; color: var(--white); display: flex; align-items: center; justify-content: center; }
.app-thumb svg { width: 22px; height: 22px; color: var(--white) !important; stroke: var(--white); }
.app-row .lib-meta { white-space: normal; line-height: 1.4; }
.app-multi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
.app-more { margin-top: var(--s2); }
.app-more summary { cursor: pointer; font-size: 13px; color: var(--g-mid); margin-bottom: var(--s4); }
.app-more summary:hover { color: var(--black); }

/* Pfadleiste der Bibliothek: Alle Inhalte › Ordner › Unterordner */
.lib-path {
  display: flex; align-items: center; gap: var(--s1);
  padding: var(--s2) var(--s4);
  background: var(--g-bg); border-bottom: 1px solid var(--g-line);
  font-size: 13px; flex-shrink: 0; min-width: 0; overflow: hidden;
}
.lib-path button {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 400; color: var(--g-mid);
  white-space: nowrap;
}
.lib-path button:hover { color: var(--black); text-decoration: underline; }
.lib-path .lib-path-up { display: inline-flex; padding: 2px; margin-right: var(--s1); }
.lib-path .lib-path-up svg { width: 16px; height: 16px; }
.lib-path-sep { color: var(--g-label); }
.lib-path-current { font-weight: 500; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lib-row {
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 1px solid var(--g-line-lt);
  background: var(--white);
  cursor: pointer;
  transition: background .1s;
}
.lib-row:last-child { border-bottom: none; }
.lib-row:hover { background: var(--g-bg); }

.lib-thumb {
  width: 72px; height: 46px;
  background: var(--g-line-lt); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib-thumb svg { width: 20px; height: 20px; color: var(--black); opacity: .22; }

.lib-body { flex: 1; min-width: 0; padding: var(--s2) 0; }
.lib-name {
  font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-meta {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--g-label); margin-top: 2px;
}

/* Die Hinzufügen-Marke erscheint erst beim Überfahren —
   sonst konkurriert sie mit dem Namen um Aufmerksamkeit. */
.lib-add {
  flex-shrink: 0;
  padding: 5px 12px;
  margin-right: var(--s4);
  font-size: 13px; font-weight: 500;
  color: var(--g-label);
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity .12s, color .12s, border-color .12s;
}
.lib-row:hover .lib-add { opacity: 1; color: var(--black); border-color: var(--g-line); }

/* ─── Anmeldung ─── */
.auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  padding: var(--s6);
}
.auth-box { background: var(--white); width: 100%; max-width: 380px; padding: var(--s10); }
.auth-head { margin-bottom: var(--s8); }

/* ─── Einstellungszeilen ─── */
.setting-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--g-line);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { flex: 1; }
.setting-label strong { display: block; font-size: 15px; font-weight: 500; }
.setting-label small { font-size: 13px; font-weight: 300; color: var(--g-label); }

/* ─── Betriebszeiten ─── */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--g-label); text-align: left;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--black);
}
.hours-table td {
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--g-line-lt);
  font-size: 14px;
}
.hours-table input[type=time] {
  padding: 5px 8px;
  font-family: 'Poppins', sans-serif; font-size: 14px;
  border: 1px solid var(--g-line); outline: none; width: 104px;
}
.hours-table input[type=time]:focus { border-color: var(--black); }

/* ─── Mitglieder ─── */
.member {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  background: var(--white);
  border: 1px solid var(--g-line);
  margin-bottom: -1px;
}
.member-avatar {
  width: 34px; height: 34px;
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; flex-shrink: 0;
}

/* ─── Berichtstabelle ─── */
.report-table { width: 100%; border-collapse: collapse; background: var(--white); }
.report-table th {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--g-label); text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--black);
}
.report-table th.num, .report-table td.num { text-align: right; }
.report-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--g-line-lt);
  font-size: 15px;
}
.report-table td.num { font-variant-numeric: tabular-nums; font-weight: 500; }
.report-table tr:hover td { background: var(--g-bg); }
.bar { height: 3px; background: var(--black); margin-top: 4px; }

/* ─── Responsiv ─── */
@media (max-width: 1100px) {
  .detail { grid-template-columns: 1fr; }
  .panel + .panel { border-left: none; border-top: 1px solid var(--g-line); }
  .panel { max-height: 55vh; }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; inset: 0 auto 0 0;
    width: var(--side-w);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .side.open { transform: none; }
  .side-scrim.open { display: block; }
  .menu-btn { display: flex !important; }
  .content { padding: var(--s4); }
  .topbar { padding: 0 var(--s4); }
}

.menu-btn { display: none; }

/* Detailseiten füllen die Fläche ohne Innenabstand */
.content.bleed { padding: 0; display: flex; flex-direction: column; }
.content.bleed .detail,
.content.bleed .detail-wrap { flex: 1; min-height: 0; }