/* Console di regia. Tema scuro non per gusto: si usa in una stanza al buio,
   accanto allo schermo dei giocatori. */

:root {
    --bg:        #0d0d12;
    --bg-2:      #14141c;
    --bg-3:      #1c1c27;
    --line:      #282836;
    --text:      #e6e6ee;
    --muted:     #8a8aa0;
    --accent:    #6f8cff;
    --ok:        #46c07a;
    --warn:      #e0a33a;
    --bad:       #e05555;
    --radius:    8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
h1 small { font-size: .6em; color: var(--muted); font-weight: 400; }
h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-bottom: .5rem; }
hr { border: none; border-top: 1px solid var(--line); margin: .85rem 0; }
.muted { color: var(--muted); }
.hint { color: var(--warn); font-size: .82rem; margin-top: .2rem; }
kbd {
    display: inline-block; padding: 0 .3em; margin-left: .4em;
    border: 1px solid rgba(255,255,255,.22); border-radius: 4px;
    font: inherit; font-size: .78em; opacity: .7;
}

/* --------------------------------------------------------------- controlli */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-3);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.btn:hover:not(:disabled) { background: #24243244; border-color: #3d3d52; }
.btn:disabled { opacity: .38; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #08080f; font-weight: 600; }
.btn.primary:hover { background: #8199ff; border-color: #8199ff; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #5a2a2a; color: #f0a5a5; }
.btn.danger:hover:not(:disabled) { background: #2a1414; }
.btn.danger.on { background: var(--bad); border-color: var(--bad); color: #160606; font-weight: 600; }
.btn.wide { width: 100%; }

input[type=text], input[type=password], select {
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
input.wide { width: 100%; }
select { width: 100%; }

input[type=range] { width: 100%; accent-color: var(--accent); }

.check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segbtn {
    flex: 1; padding: .42rem .5rem;
    border: none; background: transparent; color: var(--muted);
    font: inherit; cursor: pointer;
}
.segbtn.on { background: var(--accent); color: #08080f; font-weight: 600; }

/* ------------------------------------------------------------------ topbar */

.topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.brand { font-weight: 700; letter-spacing: .22em; font-size: .8rem; color: var(--muted); }
.topbar-actions { margin-left: auto; display: flex; gap: .5rem; }

.sala { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ok); }
.sala .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.sala.offline { color: var(--muted); }
.sala.offline .dot { background: #454558; box-shadow: none; }

/* ------------------------------------------------------------------ layout */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 0;
}

.pane { min-height: 0; display: flex; flex-direction: column; }
.pane.controls {
    border-left: 1px solid var(--line);
    background: var(--bg-2);
    padding: 1rem;
    overflow-y: auto;
}

.pane-head {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: .3rem; }
.tab {
    padding: .4rem .9rem;
    border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--muted);
    font: inherit; cursor: pointer;
}
.tab.active { background: var(--bg-3); border-color: var(--line); color: var(--text); }

.upload-btn { position: relative; overflow: hidden; margin-left: auto; }
.upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 100px; }

/* ---------------------------------------------------------------- libreria */

.dropzone { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; }
.dropzone .drop-overlay {
    position: absolute; inset: .5rem;
    display: none; place-items: center;
    border: 2px dashed var(--accent); border-radius: 12px;
    background: rgba(111,140,255,.09);
    font-weight: 600; pointer-events: none;
}
.dropzone.over .drop-overlay { display: grid; }

.empty { color: var(--muted); text-align: center; padding: 3rem 1rem; }
.empty em { color: var(--text); font-style: normal; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .7rem;
}
/* I brani non hanno niente da mostrare: tile larghe e basse, ne stanno piu'
   sotto gli occhi in una lista che puo' diventare lunga. */
.grid.kind-audio { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid.kind-audio .thumb { aspect-ratio: 16 / 5; }

.tile {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease;
}
.tile:hover { border-color: #4a4a63; transform: translateY(-2px); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.thumb {
    aspect-ratio: 16 / 10;
    background: #0a0a0e center/cover no-repeat;
}
.thumb.audio { display: grid; place-items: center; font-size: 1.9rem; color: #43435c; }

.tile-name {
    display: flex; align-items: baseline; gap: .4rem;
    padding: .4rem .55rem;
    font-size: .8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-name .dur { margin-left: auto; color: var(--muted); font-size: .74rem; }

/* Cornice blu = in preparazione, cornice verde = in onda. */
.tile.staged { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tile.onair { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.tile.onair::after {
    content: "IN ONDA";
    position: absolute; top: .4rem; left: .4rem;
    padding: .1rem .35rem; border-radius: 4px;
    background: var(--ok); color: #05140b;
    font-size: .6rem; font-weight: 700; letter-spacing: .07em;
}

.ready {
    position: absolute; top: .4rem; right: .4rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: #55556e;
    box-shadow: 0 0 0 2px rgba(0,0,0,.5);
}
.ready.all { background: var(--ok); }
.ready.partial { background: var(--warn); }
.ready.none { background: #55556e; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.tile-tools {
    position: absolute; bottom: 1.9rem; right: .35rem;
    display: none; gap: .25rem;
}
.tile:hover .tile-tools, .tile:focus-within .tile-tools { display: flex; }
.tile-tools button {
    width: 24px; height: 24px;
    border: 1px solid var(--line); border-radius: 5px;
    background: rgba(10,10,16,.85); color: var(--muted);
    font-size: .75rem; cursor: pointer;
}
.tile-tools button:hover { color: var(--text); border-color: #55556e; }

/* --------------------------------------------------------------- caricamenti */

.uploads { border-top: 1px solid var(--line); max-height: 30vh; overflow-y: auto; }
.uploads:empty { display: none; }
.up-row {
    display: grid; grid-template-columns: 1fr 120px 150px;
    align-items: center; gap: .7rem;
    padding: .35rem 1rem;
    font-size: .8rem;
    border-bottom: 1px solid #1a1a24;
}
.up-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-bar { height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 140ms linear; }
.up-msg { color: var(--muted); text-align: right; }
.up-row.ok .up-bar i { background: var(--ok); }
.up-row.bad .up-bar i { background: var(--bad); }
.up-row.bad .up-msg { color: #f0a5a5; text-align: right; white-space: normal; }

/* --------------------------------------------------------------- controlli */

.onair { margin-bottom: .7rem; }
.onair-img {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #07070b center/cover no-repeat;
    position: relative;
}
.onair-img.blackout::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.86);
    border-radius: inherit;
}
.onair-title { margin-top: .4rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.row { display: grid; gap: .25rem; margin-bottom: .6rem; }
.row > label:first-child { font-size: .78rem; color: var(--muted); }
.row:has(input[type=range]) { grid-template-columns: 1fr auto; align-items: center; }
.row:has(input[type=range]) > label { grid-column: 1 / -1; }
.row output { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); min-width: 3.4em; text-align: right; }
.row.buttons { display: flex; gap: .4rem; }
.row.buttons .btn { flex: 1; }
.row.buttons .btn.ghost { flex: 0 0 auto; min-width: 2.6rem; }

.audio-now {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .6rem; margin-bottom: .6rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg);
    font-size: .84rem;
}
.audio-now .note { color: var(--accent); }
.audio-now span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ go bar */

.gobar {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}
/* Contenitore dei due slot di preparazione. NON chiamarlo .staged: quella
   classe e' il modificatore di stato delle tile, e un display:flex qui
   finirebbe per sfasciare il layout delle miniature preparate. */
.staging { display: flex; gap: .7rem; flex: 1; min-width: 0; }

.staged-slot {
    flex: 1; min-width: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg);
}
.slot-label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.slot-body { display: flex; align-items: center; gap: .55rem; min-height: 34px; font-size: .82rem; }
.slot-thumb {
    width: 52px; height: 32px; flex: none;
    border-radius: 4px; background: #0a0a0e center/cover no-repeat;
}
.slot-thumb.audio { display: grid; place-items: center; color: #43435c; }
.slot-text { min-width: 0; display: grid; }
.slot-text strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ready-label { font-size: .7rem; color: var(--muted); }
.ready-label.all { color: var(--ok); }
.ready-label.partial { color: var(--warn); }
.slot-x {
    margin-left: auto; flex: none;
    width: 22px; height: 22px;
    border: 1px solid var(--line); border-radius: 5px;
    background: transparent; color: var(--muted);
    cursor: pointer; font-size: .7rem;
}
.slot-x:hover { color: var(--text); }

.btn.go {
    flex: none;
    padding: .95rem 1.6rem;
    background: var(--ok); border-color: var(--ok); color: #05140b;
    font-weight: 700; letter-spacing: .06em;
}
.btn.go:hover:not(:disabled) { background: #5ad48c; border-color: #5ad48c; }
.btn.go.waiting { background: var(--warn); border-color: var(--warn); color: #1a1204; }

/* ------------------------------------------------------------------- varie */

.toast {
    position: fixed; bottom: 5.5rem; left: 50%;
    transform: translate(-50%, 1rem);
    padding: .6rem 1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-3);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 500;
    max-width: min(80vw, 40rem);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: #5a2a2a; color: #f0a5a5; }

.dlg {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-2); color: var(--text);
    padding: 1.4rem; max-width: 34rem; width: 90vw;
}
.dlg::backdrop { background: rgba(0,0,0,.6); }
.dlg h2 { margin-bottom: .5rem; }
.dlg p { margin-bottom: .7rem; }

/* ------------------------------------- pagine semplici (install / login) --- */

body.page-plain {
    display: block;
    overflow: auto;
    padding: 3rem 1rem;
}
.card {
    max-width: 46rem; margin: 0 auto;
    padding: 1.8rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-2);
}
.card.narrow { max-width: 22rem; }
.card p { margin-bottom: .8rem; }
.card h2 { margin: 1.4rem 0 .6rem; }

.checks { width: 100%; border-collapse: collapse; }
.checks td { padding: .5rem .4rem; border-bottom: 1px solid #1c1c26; vertical-align: top; }
.checks .mark { width: 1.6rem; font-weight: 700; text-align: center; }
.checks tr.ok .mark { color: var(--ok); }
.checks tr.warn .mark { color: var(--warn); }
.checks tr.bad .mark { color: var(--bad); }
.checks .muted { font-size: .8rem; word-break: break-all; }

.msg {
    padding: .6rem .8rem; border-radius: var(--radius);
    border: 1px solid var(--line);
}
.msg.bad { border-color: #5a2a2a; background: #201010; color: #f0a5a5; }
.msg.warn { border-color: #5a4520; background: #201a0d; color: #e8c283; }

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
    .pane.controls { border-left: none; border-top: 1px solid var(--line); max-height: 45vh; }
    .gobar { flex-wrap: wrap; }
    .btn.go { width: 100%; }
}