/* ==========================================================================
   REAPER CONTROLE AO VIVO — styles.css
   Mesmo design "console de palco" do protótipo, adaptado para dados 100%
   reais vindos do REAPER via Web Remote (main.js / wwr_req). Sem dados
   simulados: cada elemento na tela corresponde a um comando real.
   ========================================================================== */
:root{
  --radius: .5rem;
  --background: #171a1d;
  --foreground: #f2f1ee;
  --panel: #1e2226;
  --panel-sunken: #14171a;
  --border: rgba(255,255,255,.10);

  --signal: #e0a940;
  --signal-foreground: #201a09;
  --transport: #55c98a;
  --transport-foreground: #0c2016;
  --mute: #c1272d;
  --solo: #f1c524;
  --warn: #e0c455;
  --muted-foreground: #8b9096;

  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --pad-unit: 58px;
  --pad-gap: 6px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body{
  background:var(--background); color:var(--foreground); font-family:var(--font);
  -webkit-tap-highlight-color:transparent; color-scheme:dark;
}
button{ font-family:inherit; touch-action:manipulation; user-select:none; cursor:pointer; }
select, input{ font-family:inherit; }
.tabular{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.label-caps{ font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted-foreground); }

.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4);
  padding:10px; display:flex; flex-direction:column; gap:8px;
}
.sunken{ background:var(--panel-sunken); border:1px solid rgba(0,0,0,.5); box-shadow:inset 0 2px 6px rgba(0,0,0,.45); border-radius:var(--radius); }
.press{ transition:transform .09s ease, background-color .12s ease, box-shadow .12s ease, color .12s ease; }
.press:active{ transform:scale(.96); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
.live-dot{ animation:pulse 1.3s ease-in-out infinite; }
.scroll-slim{ scrollbar-width:thin; }
.scroll-slim::-webkit-scrollbar{ width:8px; }
.scroll-slim::-webkit-scrollbar-thumb{ background:#2c3136; border-radius:999px; }

#app{ display:flex; flex-direction:column; gap:6px; height:100dvh; padding:6px; }

/* header */
#app-header{ display:flex; align-items:center; gap:10px; padding:8px 12px; flex:none; }
#app-header .logo{ width:32px; height:32px; border-radius:var(--radius); background:var(--signal); color:var(--signal-foreground); display:grid; place-items:center; font-weight:900; flex:none; }
#app-header h1{ margin:0; font-size:.8rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
#app-header p{ margin:0; font-size:.68rem; color:var(--muted-foreground); }
#conn-pill{ margin-left:auto; display:flex; align-items:center; gap:8px; padding:6px 12px; }
#conn-dot{ width:8px; height:8px; border-radius:999px; background:var(--muted-foreground); }
#conn-dot.ok{ background:var(--transport); }
#conn-dot.bad{ background:var(--mute); }
#refresh-btn{ width:36px; height:36px; border-radius:var(--radius); background:var(--panel-sunken); border:1px solid var(--border); color:var(--muted-foreground); flex:none; }

/* session bar */
#session-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:10px 12px; flex:none; }
#session-bar .stat{ line-height:1; }
#session-bar .stat .v{ display:block; margin-top:4px; font-size:.9rem; font-weight:700; }
#sb-region-chip{ display:flex; align-items:center; gap:8px; padding:6px 12px; }
#sb-region-dot{ width:10px; height:10px; border-radius:999px; flex:none; background:var(--muted-foreground); }
#sb-transport-dot{ width:10px; height:10px; border-radius:999px; background:var(--muted-foreground); }
#sb-transport{ display:flex; align-items:center; gap:8px; }

/* regions timeline */
#regions-panel{ flex:none; }
#regions-ruler{ position:relative; height:44px; border-radius:var(--radius); overflow:hidden; cursor:pointer; }
.region-block{ position:absolute; top:4px; bottom:4px; border-radius:3px; border:1px solid var(--border); padding:0 6px; display:flex; align-items:center; overflow:hidden; }
.region-block span{ font-size:10px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#regions-ruler .playhead{ position:absolute; top:0; bottom:0; width:2px; background:var(--signal); box-shadow:0 0 8px var(--signal); z-index:5; pointer-events:none; }
#regions-empty{ padding:14px; text-align:center; color:var(--muted-foreground); font-size:.75rem; }

/* layout principal */
#main-grid{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
@media (min-width:860px){
  #main-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); overflow:hidden; }
  .col{ display:flex; flex-direction:column; gap:6px; min-height:0; overflow-y:auto; }
}

/* transporte */
.transport-row{ display:flex; gap:6px; flex:none; }
.t-btn{ flex:1; height:52px; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel-sunken); box-shadow:inset 0 2px 6px rgba(0,0,0,.45); color:var(--muted-foreground); font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.t-btn svg{ width:18px; height:18px; }
.t-play{ flex:2; background:rgba(85,201,138,.15); color:var(--transport); box-shadow:inset 0 0 0 1px rgba(85,201,138,.55); border:none; }
.t-play.playing{ background:var(--transport); color:var(--transport-foreground); box-shadow:0 0 18px var(--transport); }
.toggle-btn{ height:44px; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel-sunken); box-shadow:inset 0 2px 6px rgba(0,0,0,.45); color:var(--muted-foreground); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; flex:1; }
.toggle-btn.on{ background:rgba(224,169,64,.18); border-color:rgba(224,169,64,.6); color:var(--foreground); box-shadow:none; }

/* mixer / faixas reais */
#tracks-list{ flex:1; min-height:120px; overflow-y:auto; }
.track-row{ display:flex; align-items:center; gap:8px; height:52px; border-bottom:1px solid rgba(255,255,255,.06); padding:0 4px; }
.track-row .stripe{ width:4px; align-self:stretch; border-radius:999px; background:#555; flex:none; }
.track-row .name{ width:34%; min-width:70px; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-row .fader-wrap{ flex:1; height:26px; border-radius:999px; position:relative; touch-action:none; }
.track-row .fader-fill{ position:absolute; inset:0; border-radius:999px; }
.track-row .fader-fill span{ display:block; height:100%; border-radius:999px; background:#5b6470; }
.track-row .fader-val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#eee; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.track-row .flags{ display:flex; gap:3px; flex:none; }
.flag-btn{ width:30px; height:30px; border-radius:5px; font-size:10px; font-weight:900; background:var(--panel-sunken); border:1px solid rgba(0,0,0,.5); color:var(--muted-foreground); }
.flag-btn.mute.on{ background:var(--mute); color:#fff; border-color:transparent; }
.flag-btn.solo.on{ background:var(--solo); color:#241d05; border-color:transparent; }
#tracks-empty{ padding:20px; text-align:center; color:var(--muted-foreground); font-size:.75rem; }

/* PAD GRID (tamanhos variáveis) */
.pad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--pad-unit),1fr));
  grid-auto-rows:var(--pad-unit); grid-auto-flow:dense; gap:var(--pad-gap);
}
.pad{
  position:relative; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--panel-sunken); box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  padding:8px; text-align:left; overflow:hidden; color:var(--foreground); min-width:0; min-height:0;
}
.pad .pad-name{ font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; line-height:1.15; word-break:break-word; }
.pad .pad-sub{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.85; }
.pad[data-size="P"]{ grid-column:span 1; grid-row:span 1; }
.pad[data-size="M"]{ grid-column:span 2; grid-row:span 1; }
.pad[data-size="G"]{ grid-column:span 2; grid-row:span 2; }
.pad[data-size="XG"]{ grid-column:span 3; grid-row:span 2; }
.pad[data-size="P"] .pad-name{ font-size:10px; }
.pad[data-size="G"] .pad-name, .pad[data-size="XG"] .pad-name{ font-size:14px; }
.pad[data-size="G"], .pad[data-size="XG"]{ align-items:center; justify-content:center; text-align:center; gap:4px; }
.pad.active{ box-shadow:0 0 0 1px var(--pad-color,var(--signal)), 0 0 16px color-mix(in oklab, var(--pad-color,var(--signal)) 55%, transparent); border-color:var(--pad-color,var(--signal)); background:color-mix(in oklab, var(--pad-color,var(--signal)) 88%, black 12%); color:#161311; }
.pad.missing{ opacity:.45; }
.pad-grid.edit-mode .pad{ cursor:grab; }
.pad-grid.edit-mode .pad::after{ content:"✎"; position:absolute; top:4px; right:4px; width:16px; height:16px; border-radius:4px; background:rgba(0,0,0,.5); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; }
.pad-grid.edit-mode .pad.drag-over{ outline:2px dashed var(--signal); outline-offset:2px; }
.pad-add{ border-radius:var(--radius); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted-foreground); background:transparent; font-size:1.2rem; }

.panel-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.edit-toggle{ display:flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel-sunken); color:var(--muted-foreground); font-size:.625rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.edit-toggle.on{ background:var(--signal); color:var(--signal-foreground); border-color:transparent; }

/* drawer editor de pad */
#backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; display:none; }
#backdrop.open{ display:block; }
#pad-editor{
  position:fixed; right:0; top:0; bottom:0; width:min(340px,92vw); z-index:91;
  background:var(--panel); border-left:1px solid var(--border); box-shadow:-8px 0 24px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:12px; padding:14px; overflow-y:auto;
  transform:translateX(100%); transition:transform .18s ease;
}
#pad-editor.open{ transform:translateX(0); }
#pad-editor h3{ margin:0; font-size:.9rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-foreground); }
.field input[type=text], .field select{ height:38px; border-radius:var(--radius); background:var(--panel-sunken); border:1px solid var(--border); color:var(--foreground); padding:0 10px; font-size:.82rem; box-shadow:inset 0 2px 6px rgba(0,0,0,.45); }
.field input[type=color]{ height:38px; width:100%; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel-sunken); padding:2px; }
.size-picker{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.size-opt{ height:36px; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel-sunken); color:var(--muted-foreground); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.size-opt.sel{ background:var(--signal); color:var(--signal-foreground); border-color:transparent; }
.editor-actions{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid var(--border); }
.editor-actions .row{ display:flex; gap:8px; }
.btn{ height:38px; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel-sunken); color:var(--foreground); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; flex:1; }
.btn.primary{ background:var(--signal); color:var(--signal-foreground); border-color:transparent; }
.btn.danger{ background:var(--mute); color:#fff; border-color:transparent; }
.close-x{ margin-left:auto; width:26px; height:26px; border-radius:6px; background:var(--panel-sunken); border:1px solid var(--border); color:var(--muted-foreground); }

#setup-banner{ display:none; padding:10px 14px; font-size:.75rem; color:var(--warn); border:1px solid rgba(224,196,85,.4); background:rgba(224,196,85,.08); border-radius:var(--radius); flex:none; }
#setup-banner.show{ display:block; }