/* corcho dashboard — dark monospace theme */

:root{
  /* vibrant palette — saturated accents + gradient/glow treatments */
  --bg:#0a0813; --bg2:#141021; --bg3:#1c1730; --bg4:#271d3f;
  --fg:#efeafc; --fg2:#a99fc7; --fg3:#7b7099;
  --border:#2b2444; --border2:#43386a;
  --accent:#a855f7; --accent2:#ec4899; --accent3:#06b6d4;
  --ok:#22e07a; --warn:#fbbf24; --err:#fb5a6a; --info:#22d3ee;
  --hover:#221a38;
  --grad:linear-gradient(135deg,#a855f7 0%,#ec4899 100%);
  --grad-cool:linear-gradient(135deg,#8b5cf6 0%,#06b6d4 100%);
  --glow:0 0 24px rgba(168,85,247,.45);
  --shadow:0 8px 32px rgba(0,0,0,0.55);
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:13px/1.45 var(--mono); height:100%; overflow:hidden;}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:var(--fg);
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:6px 8px; outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{font-family:var(--mono); resize:vertical}

#app{display:grid; grid-template-columns:220px 1fr; height:100vh; width:100vw}

/* ── sidebar ── */
#sidebar{background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:14px 10px}
#sidebar .logo{padding:6px 10px 18px; display:flex; align-items:center}
#sidebar .logo-dot{width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 0 20px rgba(163,113,247,.5)}
#tabs{display:flex; flex-direction:column; gap:2px; flex:1}
#tabs a{display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-radius:6px; color:var(--fg2); font-size:13px; cursor:pointer}
#tabs a .i{display:inline-block; width:22px; font-size:15px; line-height:1;
  text-align:center; filter:saturate(0.85)}
#tabs a:hover{background:var(--hover); color:var(--fg); text-decoration:none}
#tabs a.active{background:var(--bg3); color:var(--fg); border-left:2px solid var(--accent); padding-left:10px}
#tabs a .badge{margin-left:auto; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:0 6px; font-size:10px; color:var(--fg2); min-width:18px; text-align:center}

#sidebar .foot{margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px}
.ws-pill{display:flex; align-items:center; gap:8px; padding:6px 8px;
  background:var(--bg); border-radius:4px; font-size:11px; color:var(--fg2)}
.ws-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--err)}
.ws-pill.ok .dot{background:var(--ok); box-shadow:0 0 6px var(--ok)}
.ws-pill.warn .dot{background:var(--warn)}

/* ── main panel ── */
#main{overflow-y:auto; padding:20px 24px}
#main h1{margin:0 0 4px; font-size:18px; color:var(--fg); font-weight:600}
#main h2{margin:24px 0 10px; font-size:14px; color:var(--fg2); font-weight:600;
  text-transform:uppercase; letter-spacing:1px}
#main .sub{color:var(--fg2); font-size:12px; margin-bottom:14px}

/* ── tile grid ── */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-bottom:18px}
.tile{background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:14px 16px}
.tile .lbl{color:var(--fg2); font-size:11px; text-transform:uppercase; letter-spacing:1px}
.tile .val{font-size:24px; color:var(--fg); margin-top:4px}
.tile .meta{color:var(--fg2); font-size:11px; margin-top:6px}
.tile.ok   .val{color:var(--ok)}
.tile.warn .val{color:var(--warn)}
.tile.err  .val{color:var(--err)}

/* ── tables ── */
table.t{width:100%; border-collapse:collapse; background:var(--bg2);
  border:1px solid var(--border); border-radius:6px; overflow:hidden; font-size:12px}
table.t th{background:var(--bg3); color:var(--fg2); text-align:left;
  padding:8px 10px; border-bottom:1px solid var(--border);
  text-transform:uppercase; font-size:10px; letter-spacing:1px; font-weight:600;
  cursor:pointer; user-select:none}
table.t th.sortable:hover{background:var(--bg4)}
table.t th .arr{color:var(--accent); margin-left:4px; font-size:8px}
table.t td{padding:8px 10px; border-bottom:1px solid var(--border)}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover{background:var(--hover); cursor:default}
table.t tbody tr.clickable{cursor:pointer}
table.t tbody tr.clickable:hover{background:var(--bg3)}
table.t td.num{text-align:right; font-variant-numeric:tabular-nums}
table.t td.actions{text-align:right; white-space:nowrap}
table.t td .small{font-size:11px; color:var(--fg2)}

/* ── badges / chips ── */
.badge2{display:inline-block; padding:1px 8px; border-radius:10px;
  font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
  background:var(--bg); border:1px solid var(--border); color:var(--fg2)}
.badge2.ok       {background:rgba(63,185,80,0.15); color:var(--ok); border-color:rgba(63,185,80,0.4)}
.badge2.dead     {background:rgba(248,81,73,0.15); color:var(--err); border-color:rgba(248,81,73,0.4)}
.badge2.warn     {background:rgba(210,153,34,0.15); color:var(--warn); border-color:rgba(210,153,34,0.4)}
.badge2.info     {background:rgba(163,113,247,0.15); color:var(--info); border-color:rgba(163,113,247,0.4)}
.badge2.refresh-only{background:rgba(210,153,34,0.15); color:var(--warn); border-color:rgba(210,153,34,0.4)}
.badge2.detached {background:rgba(163,113,247,0.15); color:var(--accent); border-color:rgba(163,113,247,0.4)}
.badge2.banned   {background:rgba(210,153,34,0.15); color:var(--warn); border-color:rgba(210,153,34,0.4)}
.badge2.paused   {background:var(--bg3); color:var(--fg2)}

/* ── buttons ── */
button{background:var(--bg3); border:1px solid var(--border); color:var(--fg);
  padding:6px 12px; border-radius:5px; cursor:pointer; font-size:12px;
  transition:all .12s}
button:hover{background:var(--bg4); border-color:var(--border2)}
button:disabled{opacity:0.4; cursor:not-allowed}
button.primary{background:var(--accent2); border-color:var(--accent2); color:#fff}
button.primary:hover{background:var(--accent); border-color:var(--accent)}
button.danger{background:rgba(248,81,73,0.15); border-color:var(--err); color:var(--err)}
button.danger:hover{background:var(--err); color:#fff}
button.warn{background:rgba(210,153,34,0.15); border-color:var(--warn); color:var(--warn)}
button.warn:hover{background:var(--warn); color:#000}
button.ok{background:rgba(63,185,80,0.15); border-color:var(--ok); color:var(--ok)}
button.ok:hover{background:var(--ok); color:#000}
button.ghost{background:transparent; border-color:var(--border); color:var(--fg2)}
button.ghost:hover{background:var(--hover); color:var(--fg)}
button.sm{font-size:11px; padding:3px 8px}

.actbar{display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.actbar input[type=text], .actbar input[type=search]{flex:0 1 260px; padding:6px 10px}
.actbar select{padding:6px 10px}
.actbar .sep{flex:1}

/* ── modal ── */
#modal-root{position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:20px}
#modal-root.show{display:flex; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px)}
#modal-root .box{background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; max-width:760px; width:100%; max-height:90vh; overflow:auto;
  box-shadow:var(--shadow)}
#modal-root .head{padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center}
#modal-root .head h2{margin:0; font-size:14px; text-transform:none; letter-spacing:0}
#modal-root .body{padding:16px 18px}
#modal-root .foot{padding:12px 18px; border-top:1px solid var(--border);
  display:flex; gap:8px; justify-content:flex-end}
.modal-close{background:none; border:none; color:var(--fg2); font-size:20px; cursor:pointer}

/* ── toasts ── */
#toasts{position:fixed; top:14px; right:14px; z-index:200;
  display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{background:var(--bg3); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:10px 14px; border-radius:4px; box-shadow:var(--shadow); min-width:200px;
  max-width:380px; pointer-events:auto; animation:tin .2s ease-out}
.toast.ok  {border-left-color:var(--ok)}
.toast.err {border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
.toast .title{font-size:12px; font-weight:600; margin-bottom:2px}
.toast .body{font-size:12px; color:var(--fg2); word-break:break-word}
@keyframes tin{from{transform:translateX(20px); opacity:0} to{transform:none; opacity:1}}

/* ── login ── */
#login-overlay{position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center; background:var(--bg)}
#login-overlay .box{background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:24px 28px; width:360px; box-shadow:var(--shadow)}
#login-overlay h1{margin:0 0 14px; font-size:16px; color:var(--accent)}
#login-overlay input{width:100%; margin-bottom:10px}
#login-overlay button{width:100%; padding:9px}
#login-overlay .err{color:var(--err); font-size:11px; min-height:1em; margin-top:4px}

/* ── logs / events / pre ── */
pre.log{background:linear-gradient(180deg,#0b0812,#090711);
  border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; font-size:12px; line-height:1.65; color:#c3b8dc;
  max-height:calc(100vh - 220px); overflow:auto; white-space:pre-wrap;
  word-break:break-word; box-shadow:inset 0 0 40px rgba(0,0,0,.45)}

.event-row{padding:6px 10px; border-bottom:1px solid var(--border);
  font-size:11px; display:grid; grid-template-columns:80px 130px 1fr; gap:10px;
  align-items:start}
.event-row .t{color:var(--fg3)}
.event-row .k{color:var(--accent); font-weight:600; font-size:10px;
  letter-spacing:.5px; text-transform:uppercase}
.event-row.err  .k{color:var(--err)}
.event-row.warn .k{color:var(--warn)}
.event-row.ok   .k{color:var(--ok)}
.event-row .m{color:var(--fg); word-break:break-word}

/* ── small utils ── */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.col{display:flex; flex-direction:column; gap:8px}
.muted{color:var(--fg2)}
.dim  {color:var(--fg3)}
.mono {font-family:var(--mono)}
.right{text-align:right}
.pre  {white-space:pre-wrap; font-family:var(--mono); font-size:11px}
hr    {border:none; border-top:1px solid var(--border); margin:14px 0}
.kv   {display:grid; grid-template-columns:140px 1fr; gap:6px 12px; font-size:12px}
.kv .k{color:var(--fg2)}
.kv .v{color:var(--fg); word-break:break-all}
.spinner{display:inline-block; width:12px; height:12px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite;
  vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.drop{border:2px dashed var(--border); border-radius:8px; padding:32px; text-align:center;
  color:var(--fg2); transition:all .15s}
.drop.drag{border-color:var(--accent); background:rgba(163,113,247,0.05); color:var(--fg)}
.copy-btn{cursor:pointer; padding:2px 6px; border:1px solid var(--border); border-radius:3px;
  font-size:10px; background:var(--bg3); color:var(--fg2)}
.copy-btn:hover{color:var(--fg)}

/* ── tab content scrolling ── */
#main > .tab{padding-bottom:60px}

/* ── progress bar ── */
.prog{height:8px; background:var(--bg3); border-radius:4px; overflow:hidden;
  margin-top:6px; border:1px solid var(--border)}
.prog > .bar{height:100%; background:var(--accent); transition:width .2s; width:0%}
.prog.ok > .bar{background:var(--ok)}

/* ── filter chips ── */
.chip-row{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:3px 10px; border:1px solid var(--border); border-radius:14px;
  font-size:11px; color:var(--fg2); cursor:pointer; background:var(--bg2)}
.chip.active{background:var(--accent2); border-color:var(--accent2); color:#fff}
.chip:hover{background:var(--bg3)}
.chip.active:hover{background:var(--accent)}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:var(--bg4); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}
::-webkit-scrollbar-track{background:transparent}

/* ═══ VIBRANT redesign ═══════════════════════════════════════════════ */
/* full-page smooth gradient wash (bottom-anchored glow, not a top square) */
body{background:
  radial-gradient(900px 500px at 100% 110%, rgba(6,182,212,.10), transparent 60%),
  radial-gradient(900px 500px at 0% 110%, rgba(236,72,153,.10), transparent 60%),
  var(--bg)}
#app{background:transparent}

/* sidebar: deep gradient + right edge glow line */
#sidebar{background:linear-gradient(180deg,#15111f 0%,#0c0916 100%);
  border-right:1px solid transparent;
  box-shadow:1px 0 0 rgba(168,85,247,.18), 8px 0 40px rgba(168,85,247,.05)}
#tabs a{transition:all .14s; border-radius:9px; font-weight:500}
#tabs a:hover{background:rgba(168,85,247,.08); color:var(--fg)}
#tabs a.active{color:#fff; padding-left:12px; border-left:none;
  background:linear-gradient(90deg, rgba(168,85,247,.28), rgba(236,72,153,.10));
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.35), 0 2px 16px rgba(168,85,247,.22)}
#tabs a.active .i{filter:saturate(1.2) drop-shadow(0 0 6px rgba(168,85,247,.6))}
#tabs a .badge{background:var(--grad); border:none; color:#fff; font-weight:700;
  box-shadow:0 2px 8px rgba(236,72,153,.35)}
#sidebar .logo{padding:2px 6px 14px}

/* headings: gradient text for h1 */
#main h1{font-size:22px; font-weight:800; letter-spacing:-.3px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; width:fit-content}

/* tiles / stat cards: gradient surface, glowing top edge, big gradient number */
.tile, .d-hero .stat{position:relative; overflow:hidden;
  background:linear-gradient(180deg,#181227,#0f0b1c) !important;
  border:1px solid var(--border) !important; border-radius:14px !important;
  box-shadow:0 6px 24px rgba(0,0,0,.4); transition:transform .14s, box-shadow .14s}
.tile::before, .d-hero .stat::before{content:""; position:absolute; inset:0 0 auto 0;
  height:2px; background:var(--grad); opacity:.9}
.tile:hover, .d-hero .stat:hover{transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(168,85,247,.18)}
.tile .val, .d-hero .stat .val{font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent}
.tile.ok .val{background:linear-gradient(135deg,#22e07a,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tile.warn .val{background:linear-gradient(135deg,#fbbf24,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tile.err .val{background:linear-gradient(135deg,#fb5a6a,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.d-hero .stat.ok{border-left:none}
.d-hero .stat.warn{border-left:none}
.d-hero .stat.err{border-left:none}

/* resource bars → vibrant gradient fill + glow */
.d-resources{background:linear-gradient(180deg,#181227,#0f0b1c) !important;
  border:1px solid var(--border) !important; border-radius:14px !important}
.d-resources .res .bar > div{background:var(--grad) !important;
  box-shadow:0 0 12px rgba(168,85,247,.5)}
.d-resources .res.warn .bar > div{background:linear-gradient(90deg,#fbbf24,#fb5a6a) !important}
.d-svc-strip .svc-cell{background:linear-gradient(180deg,#181227,#0f0b1c) !important;
  border:1px solid var(--border) !important; border-radius:10px !important}

/* tables: gradient header, glowing sort arrows, hover tint */
table.t{border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.35); border-color:var(--border)}
table.t th{background:linear-gradient(180deg,#1e1735,#161022);
  border-bottom:1px solid var(--border2); color:var(--fg2)}
table.t th .arr{color:var(--accent2)}
table.t td{border-bottom:1px solid rgba(255,255,255,.035)}
table.t tbody tr{transition:background .12s}
table.t tbody tr:hover{background:linear-gradient(90deg, rgba(168,85,247,.10), transparent)}

/* buttons: primary = vivid gradient + glow; others get subtle life */
button{border-radius:9px; transition:all .14s}
button.primary{background:var(--grad); border:none; color:#fff; font-weight:700;
  box-shadow:0 4px 18px rgba(168,85,247,.4)}
button.primary:hover{filter:brightness(1.12); box-shadow:0 6px 24px rgba(236,72,153,.5); transform:translateY(-1px)}
button.ghost:hover{border-color:var(--accent); color:var(--fg)}

/* inputs: rounder + glowing focus ring */
input,select,textarea{border-radius:9px; transition:border-color .14s, box-shadow .14s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(168,85,247,.2), var(--glow)}

/* badges: pill + saturated tints */
.badge2{border-radius:999px; padding:2px 10px; font-weight:700}
.badge2.info,.badge2.detached{background:rgba(168,85,247,.16); color:#c99bff; border-color:rgba(168,85,247,.45)}
.badge2.ok{background:rgba(34,224,122,.16); color:#5ff3a2; border-color:rgba(34,224,122,.45)}
.badge2.dead{background:rgba(251,90,106,.16); color:#ff8f9b; border-color:rgba(251,90,106,.45)}

/* ws status pill glow */
.ws-pill.ok .dot{box-shadow:0 0 10px var(--ok)}

/* cards / modals: rounder + deep shadow + gradient top edge */
.card{border-radius:16px; position:relative; overflow:hidden}
#modal-root .box{border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(168,85,247,.15)}
#modal-root.show{background:rgba(6,4,14,.7)}

/* scrollbar: gradient thumb */
::-webkit-scrollbar-thumb{background:var(--grad); border-radius:8px}
::-webkit-scrollbar-thumb:hover{filter:brightness(1.2)}

/* toasts: subtle glow */
#toasts .toast{border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.5)}

/* per-line log coloring (rendered by system.js as spans) */
.log .l-err{color:#ff8f9b} .log .l-warn{color:#fbbf24}
.log .l-ok{color:#5ff3a2}  .log .l-ts{color:var(--accent2)}
.log .l-dim{color:var(--fg3)}