/* =====================================================
   CTRLhub :: additions for live API result panels
   Pulls dark/red accent palette from existing bootstrap theme.
   ===================================================== */

.ctrl-result{
  background:#101012;
  border:1px solid rgba(255,0,0,0.18);
  border-radius:4px;
  box-shadow:0 8px 30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.02);
  padding:0;
  font-family: Menlo, Consolas, 'Courier New', monospace;
  color:#e4e4e4;
  overflow:hidden;
}
.ctrl-result .cr-head{
  background:#18191d;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:8px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size:11px;
  letter-spacing:1.5px;
  color:#bdbdbd;
}
.ctrl-result .cr-head b{color:#fff}
.ctrl-result .cr-head .cr-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#1eff7d;box-shadow:0 0 8px #1eff7d;margin-right:6px;vertical-align:1px;
}
.ctrl-result.is-err .cr-head .cr-dot{background:#ff3344;box-shadow:0 0 8px #ff3344}
.ctrl-result .cr-head .cr-tag{
  float:right;color:#7f7f7f;font-size:10px;letter-spacing:2px;
}
.ctrl-result .cr-body{
  padding:14px 16px;
  font-size:12.5px;
  line-height:1.55;
  max-height:520px;
  overflow:auto;
  word-wrap:break-word;
}
.ctrl-result .cr-body pre{
  margin:0;font-size:12px;color:#cfeacf;background:transparent;white-space:pre-wrap;word-break:break-word
}
.ctrl-result .cr-body table{
  width:100%;border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;font-size:12.5px
}
.ctrl-result .cr-body table td, .ctrl-result .cr-body table th{
  padding:6px 10px;border-bottom:1px solid rgba(255,255,255,0.05);
  text-align:left;vertical-align:top;
}
.ctrl-result .cr-body table th{color:#9e9e9e;font-weight:600;width:34%;letter-spacing:0.5px}
.ctrl-result .cr-body table td{color:#dadada}
.ctrl-result .cr-body table tr:hover{background:rgba(255,255,255,0.02)}
.ctrl-result .cr-body .row-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 14px;
}
.ctrl-result .cr-body ul{margin:0;padding-left:18px}
.ctrl-result .cr-body li{padding:3px 0;border-bottom:1px dotted rgba(255,255,255,0.06)}
.ctrl-result .cr-body li:last-child{border-bottom:0}
.ctrl-result .cr-body code, .ctrl-result .cr-body .mono{
  background:#1f1f1f;color:#ffd083;padding:1px 6px;border-radius:2px;font-family:Menlo,Consolas,monospace;font-size:11.5px
}
.ctrl-result .cr-body .badge-up{background:#0d9c4a;color:#fff;padding:2px 8px;border-radius:2px;font-weight:600;font-size:11px}
.ctrl-result .cr-body .badge-down{background:#b30015;color:#fff;padding:2px 8px;border-radius:2px;font-weight:600;font-size:11px}
.ctrl-result .cr-body .badge-yes{background:#b30015;color:#fff;padding:2px 8px;border-radius:2px;font-weight:600;font-size:11px}
.ctrl-result .cr-body .badge-no {background:#444;color:#dcdcdc;padding:2px 8px;border-radius:2px;font-weight:600;font-size:11px}
.ctrl-result .cr-body .qr-out img{max-width:300px;height:auto;display:block;margin:0 auto;border:1px solid #222;background:#fff;padding:6px}
.ctrl-result .cr-body .gif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ctrl-result .cr-body .gif-grid img{width:100%;height:140px;object-fit:cover;border-radius:3px;background:#000}
.ctrl-result .cr-body .person-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ctrl-result .cr-body .person-card img{width:120px;height:120px;border-radius:50%;border:2px solid #2a2a2a;object-fit:cover;background:#0a0a0a}
.ctrl-result .cr-body .person-card .pc-data{font-size:12px;color:#dcdcdc}
.ctrl-result .cr-body .person-card .pc-data b{color:#fff}
.ctrl-result .cr-body .weather-card{display:flex;align-items:center;gap:14px;padding:6px 0}
.ctrl-result .cr-body .weather-card .temp{font-size:36px;color:#fff;font-weight:700;letter-spacing:1px}

.ctrl-loading{
  display:inline-block;width:10px;height:10px;border:2px solid rgba(255,255,255,0.25);
  border-top-color:#ff3344;border-radius:50%;animation:cspin 0.7s linear infinite;margin-right:6px;vertical-align:-1px
}
@keyframes cspin{to{transform:rotate(360deg)}}

/* "no api" banner spacing */
#page-content > .container > .alert.alert-danger{margin-top:8px}

/* Tool-page header subtle "CWI" mark */
.cwi-mark{
  display:inline-block;font-family:Menlo,Consolas,monospace;color:#5a5a5a;
  font-size:10px;letter-spacing:2px;margin-left:6px;vertical-align:2px
}
.cwi-mark b{color:#ff3344}

/* Inline Discord brand SVG used in the sticky footer button */
.icon-discord{
  display:inline-block;
  width:16px;
  height:16px;
  vertical-align:-3px;
  fill:currentColor;
  pointer-events:none;
}

/* Disabled tool buttons (no backing API yet) */
.btn.disabled, .btn[aria-disabled="true"]{
  background:#1a1a1a !important;
  color:#5a5a5a !important;
  border-color:#0d0d0d !important;
  cursor:not-allowed !important;
  pointer-events:none;
  opacity:0.55;
  filter:grayscale(1);
  position:relative;
}
.btn.disabled i.fa{color:#3a3a3a !important}
.soon-badge{
  background:#3a3a3a;color:#9e9e9e;border-radius:2px;
  font-size:9px;letter-spacing:1px;padding:1px 5px;margin-left:6px;
  text-transform:uppercase;font-weight:700;vertical-align:1px;
}

/* Compact form select styling carry-over */
form select{
  background:#1c1c1c;color:#dcdcdc;border:1px solid #000;border-radius:4px;padding:8px;margin-bottom:12px
}
form input[type=text], form input[type=number], form input[type=url], form input[type=email]{
  background:#1c1c1c;color:#dcdcdc;border:1px solid #000;border-radius:4px;padding:8px;margin-bottom:12px;width:100%
}
form textarea{
  background:#1c1c1c;color:#dcdcdc;border:1px solid #000;border-radius:4px;padding:8px;margin-bottom:12px;width:100%
}