/* JMP beheer: alleen wat de HMP UI-template niet heeft. Kleuren, radius en
   lijnen komen uit de tokens van hmp-ui.css, zodat het in beide thema's klopt. */

/* Dashboard */
.jmp-onair{display:grid;gap:8px}
[data-edition] .dash-progress-fill{transition:width .2s linear}

/* Luisterknoppen in de appbar: op smalle schermen alleen op het dashboard */
@media (max-width:1100px){.jmp-listen{display:none}}

/* Cue-editor: golfvorm */
.jmp-wave{display:grid;gap:6px;padding:0 10px}
.jmp-wave canvas{display:block;width:100%;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--inset);touch-action:none}
.jmp-wave-overview{height:48px;cursor:pointer}
.jmp-wave-detail{height:260px;cursor:crosshair}
.jmp-wave-detail:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.panel-toolbar input[type=number]{flex:none}

/* Versleepbare rijen (clocks, uren) */
.jmp-grip{width:24px;color:var(--muted);cursor:grab;text-align:center;user-select:none}
tr.jmp-dragging td{background:var(--panel-hi);opacity:.6}
tr[data-locked] td{color:var(--text-dim)}

/* Golfvorm-miniaturen (zelfde maatvoering als .thumb uit de template) */
.jmp-thumb{width:140px;height:40px;border:1px solid var(--line)}
.jmp-thumb-wide{width:100%;height:56px}
.jmp-regional td{vertical-align:top}
.jmp-regional .jmp-thumb{width:100%;max-width:460px;height:44px}
.jmp-regional-row{align-items:flex-start!important}
.jmp-regional-row .jmp-thumb{width:120px;flex-shrink:0}
.jmp-ms{width:96px!important;flex:none;padding:6px 8px}

/* Uur-editor: playlist links, beschikbare tracks rechts */
@media (min-width:961px){
  .jmp-hour{grid-template-columns:minmax(0,1fr) 420px}
  .jmp-library{position:sticky;top:calc(var(--appbar-h) + 14px);max-height:calc(100vh - var(--appbar-h) - 28px);max-height:calc(100dvh - var(--appbar-h) - 28px)}
}
.jmp-library-list{flex:1;min-height:160px;overflow-y:auto}
.jmp-lib-item{cursor:grab}
.jmp-lib-item .jmp-thumb{width:64px}
tr.jmp-drop-before td{box-shadow:inset 0 2px 0 var(--accent)}
tr.jmp-drop-after td{box-shadow:inset 0 -2px 0 var(--accent)}
#hourList.jmp-drop-here{outline:2px dashed var(--accent);outline-offset:-2px}
tr.jmp-added td{animation:jmp-added 1.4s ease-out}
@keyframes jmp-added{from{background:rgba(255,159,26,.3)}to{background:transparent}}
#hourList .row-actions{flex-wrap:nowrap}

/* De schil om de pagina's: alleen een kader dat het hele venster vult */
body.jmp-shell{display:block;height:100vh;height:100dvh;margin:0;overflow:hidden}
body.jmp-shell iframe{display:block;width:100%;height:100%;border:0}

/* "Draai hierna": de tracklijst in een slide-over */
.jmp-playnext{display:flex;flex-direction:column;gap:0;min-height:0}
.jmp-playnext .panel-toolbar{padding-left:0;padding-right:0}
.jmp-playnext .jmp-library-list{border:1px solid var(--line);border-radius:var(--radius-sm)}

/* Dashboard: de volgende items, elk op één regel met zijn golfvorm */
.jmp-up-row{display:grid;grid-template-columns:20px minmax(150px,240px) minmax(120px,1fr) 44px 110px 190px;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line-soft)}
.jmp-up-row[draggable=true]{cursor:grab}
.jmp-up-row .jmp-thumb{width:100%;height:40px}
.jmp-up-row .jmp-up-info{min-width:0}
.jmp-up-row .jmp-up-info strong,.jmp-up-row .jmp-up-info div{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jmp-up-row .row-actions{flex-wrap:nowrap;justify-content:flex-end}
.jmp-up-row.jmp-dragging{opacity:.5;background:var(--panel-hi)}
.jmp-up-row.jmp-drop-before{box-shadow:inset 0 2px 0 var(--accent)}
.jmp-up-row.jmp-drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:768px){
  .jmp-up-row{grid-template-columns:20px 1fr auto}
  .jmp-up-row .jmp-thumb{grid-column:1/-1;order:9}
}

/* Smalle schermen: een lange titel op één regel mag zijn kaart niet breder
   maken dan het scherm. Een rasterkolom is anders minstens zo breed als zijn
   breedste inhoud; zo krimpt hij mee en wordt de titel afgekapt. */
.auth-body,.jmp-onair{grid-template-columns:minmax(0,1fr)}
.upload-item{min-width:0}