/* mikrotik-tool — UI single-viewport, tematizada por CSS custom properties.
   As cores vêm de themes.js (--bg, --fg, --accent, ...). */
:root{
  --mono: ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
  --sans: system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r: 8px;
}
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  font-family:var(--sans); background:var(--bg); color:var(--fg);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.dim{ color:var(--dim) }
b{ font-weight:600 }
.hidden{ display:none !important }

.app{ height:100vh; display:flex; flex-direction:column; overflow:hidden }

/* ===== Header ===== */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 16px; background:var(--bg2); border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px }
.logo{ color:var(--accent); font-size:20px; filter:drop-shadow(0 0 6px var(--accent)) }
.title{ font-weight:700; letter-spacing:.3px; font-size:16px }
.shield{
  margin-left:6px; font-size:11px; color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent);
  padding:2px 8px; border-radius:99px; white-space:nowrap;
}
.bar-right{ display:flex; align-items:center; gap:12px }
.meta{ font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.5px }
.theme{ display:flex; align-items:center; gap:6px; font-size:11px }
select,input,textarea,button{ font-family:inherit; color:var(--fg) }
select,.token{
  background:var(--bg3); border:1px solid var(--border); color:var(--fg);
  border-radius:6px; padding:5px 8px; font-size:12px; outline:none;
}
.token{ width:150px; font-family:var(--mono) }
select:focus,input:focus,textarea:focus{ border-color:var(--accent) }

/* ===== Main grid ===== */
.grid{
  flex:1; display:grid; grid-template-columns:380px 1fr; gap:14px;
  padding:14px; overflow:hidden;
}
.panel{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:14px; display:flex; flex-direction:column; gap:12px; overflow:hidden;
}

/* ===== Form ===== */
.form{ min-height:0 }
.warn-strip{
  font-size:12px; padding:7px 10px; border-radius:6px; text-align:center;
  color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent);
}
.field{ display:flex; flex-direction:column; gap:6px }
.field.grow{ flex:1; min-height:0 }
.field>label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim) }
textarea{
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:9px; resize:none; outline:none; font-family:var(--mono); font-size:12.5px;
}
.field.grow textarea{ flex:1; min-height:90px }
input[type=text],input[type=number]{
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:7px 9px; outline:none; font-family:var(--mono); font-size:12.5px;
}
.seg{ display:flex; gap:4px; background:var(--bg3); padding:3px; border-radius:7px;
  border:1px solid var(--border); flex-wrap:wrap }
.seg button{
  flex:1; background:transparent; border:0; color:var(--dim); cursor:pointer;
  padding:6px 8px; border-radius:5px; font-size:12px; white-space:nowrap;
}
.seg button.active{ background:var(--bg); color:var(--fg);
  box-shadow:0 0 0 1px var(--border) }
.target-inputs .t-input{ width:100% }
.target-inputs textarea{ width:100%; min-height:54px }
.creds{ display:flex; gap:8px } .creds input{ flex:1; min-width:0 }
.range{ display:flex; gap:8px } .range input{ flex:1 }
#t-file{ display:flex; align-items:center; gap:8px; font-size:12px }
.reboot{ gap:8px } .reboot .row{ display:flex; align-items:center; gap:8px; font-size:13px }
.reboot input[type=number]{ width:64px }
input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px }

button.primary{
  margin-top:auto; background:var(--accent); color:var(--bg);
  border:0; border-radius:7px; padding:11px; font-weight:700; cursor:pointer;
  font-size:14px; letter-spacing:.3px;
}
button.primary:hover{ filter:brightness(1.08) }

/* ===== Result panel ===== */
.result{ min-height:0 }
.counters{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px }
.ct{ background:var(--bg3); border:1px solid var(--border); border-radius:7px;
  padding:8px 6px; text-align:center; display:flex; flex-direction:column; gap:2px }
.ct b{ font-size:20px; font-family:var(--mono) }
.ct span{ font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.4px }
.ct-ok b{ color:var(--ok) } .ct-nr b{ color:var(--dim) }
.ct-auth b{ color:var(--err) } .ct-exec b{ color:var(--warn) }
.ct-rb b{ color:var(--info) } .ct-total b{ color:var(--accent) }

.progress{ height:5px; background:var(--bg3); border-radius:99px; overflow:hidden }
#bar{ height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .2s ease }

.hosts{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:5px;
  padding-right:4px }
.empty{ margin:auto; color:var(--dim); text-align:center; font-size:13px }
.host{
  border:1px solid var(--border); border-left:3px solid var(--dim);
  background:var(--bg3); border-radius:6px; padding:7px 10px; font-size:12.5px;
}
.host.ok{ border-left-color:var(--ok) }
.host.NAO_RESPONDEU{ border-left-color:var(--dim); opacity:.85 }
.host.AUTH{ border-left-color:var(--err) }
.host.FALHA_EXEC{ border-left-color:var(--warn) }
.host-head{ display:flex; align-items:center; gap:8px; cursor:pointer }
.host-ip{ font-family:var(--mono); font-weight:600; min-width:104px }
.host-id{ color:var(--dim); font-size:11px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.badge{ font-size:10px; padding:1px 7px; border-radius:99px; font-family:var(--mono);
  border:1px solid var(--border) }
.badge.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent) }
.badge.NAO_RESPONDEU{ color:var(--dim) }
.badge.AUTH{ color:var(--err); border-color:color-mix(in srgb,var(--err) 45%,transparent) }
.badge.FALHA_EXEC{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent) }
.badge.rb{ color:var(--info); border-color:color-mix(in srgb,var(--info) 45%,transparent) }
.host-detail{ color:var(--dim); font-size:11px; margin-top:3px }
.host-out{ margin-top:6px; padding:7px; background:var(--bg); border-radius:5px;
  font-family:var(--mono); font-size:11.5px; white-space:pre-wrap; max-height:160px;
  overflow:auto; border:1px solid var(--border) }

.result-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.result-actions button{
  background:var(--bg3); border:1px solid var(--border); color:var(--fg);
  border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer;
}
.result-actions button:hover:not(:disabled){ border-color:var(--accent) }
.result-actions button:disabled{ opacity:.4; cursor:not-allowed }
.spacer{ flex:1 }
.filter select{ font-size:11px }

/* ===== Modal ===== */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); z-index:20 }
.modal{ background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:22px; width:min(560px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.5) }
.modal h2{ margin:0 0 4px; font-size:18px }
.modal>p{ margin:0 0 14px }
.review{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 12px;
  font-size:13px }
.review dt{ color:var(--dim) } .review dd{ margin:0; font-family:var(--mono) }
.review-cmds label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px }
.review-cmds pre{ background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:10px; font-family:var(--mono); font-size:12px; max-height:180px; overflow:auto;
  margin:4px 0 0; white-space:pre-wrap }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px }
button.ghost{ background:transparent; border:1px solid var(--border); color:var(--fg);
  border-radius:7px; padding:9px 16px; cursor:pointer }
button.danger{ background:var(--err); color:#fff; border:0; border-radius:7px;
  padding:9px 18px; font-weight:700; cursor:pointer }
button.danger:hover{ filter:brightness(1.08) }

/* ===== Toast ===== */
.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--bg2); border:1px solid var(--err); color:var(--fg);
  padding:10px 16px; border-radius:8px; font-size:13px; z-index:30;
  box-shadow:0 8px 30px rgba(0,0,0,.4) }

::-webkit-scrollbar{ width:9px; height:9px }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:99px }
::-webkit-scrollbar-track{ background:transparent }