/* ============================================================
   Webtest – Stylesheet
   ============================================================ */

:root {
  --bg:        #0f1117;
  --bg2:       #1a1d27;
  --bg3:       #22263a;
  --border:    #2e3348;
  --text:      #e2e6f0;
  --muted:     #8892a4;
  --accent:    #4f8ef7;
  --accent2:   #3a6fd6;
  --ok:        #2ea84a;
  --warn:      #d97706;
  --err:       #dc2626;
  --radius:    8px;
  --shadow:    0 2px 12px rgba(0,0,0,.4);
  --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:      'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

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

body {
  background: var(--bg);
  color:      var(--text);
  font-family: var(--font);
  font-size:  15px;
  line-height: 1.6;
  min-height: 100vh;
  display:    flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono);
  font-size:   0.88em;
  background:  var(--bg3);
  padding:     1px 5px;
  border-radius: 4px;
  word-break: break-all;
}

/* ---- Topbar ---- */

.topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1.5rem;
  height:          56px;
  background:      var(--bg2);
  border-bottom:   1px solid var(--border);
  position:        sticky;
  top: 0;
  z-index: 100;
}

.brand {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--text);
  letter-spacing: .03em;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.topnav {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.topnav a {
  color:   var(--muted);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.topnav a:hover { color: var(--text); background: var(--bg3); text-decoration: none; }

.btn-nav {
  background:    var(--accent);
  color:         #fff !important;
  padding:       0.35rem 0.9rem !important;
  border-radius: var(--radius) !important;
  font-size:     0.88rem !important;
}
.btn-nav:hover { background: var(--accent2) !important; }

.btn-nav-outline {
  background:    transparent !important;
  border:        1px solid var(--border);
  color:         var(--muted) !important;
}
.btn-nav-outline:hover { border-color: var(--accent); color: var(--accent) !important; background: transparent !important; }

.nav-sep { width: 1px; height: 20px; background: var(--border); margin: 0 .3rem; }

.nav-user {
  font-size: 0.85rem;
  color:     var(--muted);
  max-width: 180px;
  overflow:  hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.main {
  flex:    1;
  padding: 2rem 1.5rem;
  max-width: 1100px;
  margin:  0 auto;
  width:   100%;
}

.footer {
  text-align:    center;
  padding:       1rem;
  color:         var(--muted);
  border-top:    1px solid var(--border);
  font-size:     0.8rem;
}

/* ---- Page header ---- */

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; }
.page-header p  { color: var(--muted); }

/* ---- Cards ---- */

.card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.25rem 1.5rem;
  box-shadow:    var(--shadow);
}
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); }
.mb  { margin-bottom: 1.25rem; }
.mt-sm { margin-top: .75rem; }

.card-link {
  display: block;
  transition: border-color .15s, transform .1s;
  cursor: pointer;
}
.card-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--text);
}
.card-link h2 { font-size: 1rem; margin: .5rem 0 .35rem; }
.card-link p  { color: var(--muted); font-size: .88rem; }

.card-icon { font-size: 1.6rem; margin-bottom: .25rem; }

.card-admin { border-color: #3a6fd620; }
.card-admin:hover { border-color: #4f8ef760; }

.card-dim { opacity: .55; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* ---- Login page ---- */

.login-hero {
  text-align:    center;
  padding:       3rem 0 2rem;
}
.login-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: .5rem; }
.login-hero p  { color: var(--muted); font-size: 1.05rem; }

.login-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.login-card { text-align: center; padding: 2rem 1.5rem; }
.login-card h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.login-card p  { color: var(--muted); font-size: .88rem; margin-bottom: 1.25rem; }

.muted-sm { font-size: .8rem; color: var(--muted); }

/* ---- Auth box (local login) ---- */

.auth-wrap {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.auth-box {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       2.5rem 2rem;
  width:         100%;
  max-width:     420px;
  box-shadow:    var(--shadow);
}
.auth-box h1 { font-size: 1.4rem; margin-bottom: .35rem; }
.auth-box > .muted { color: var(--muted); font-size: .88rem; margin-bottom: 1.5rem; }

.center   { text-align: center; }
.mt       { margin-top: 1rem; }
.mt-sm    { margin-top: .6rem; }
.btn.mt-sm, a.btn.mt-sm { display: block; margin-top: .6rem; }

/* ---- Forms ---- */

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .88rem; color: var(--muted); margin-bottom: .35rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-select,
.form-group select,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
  width:         100%;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text);
  font-size:     .92rem;
  padding:       .5rem .75rem;
  outline:       none;
  transition:    border-color .15s;
}
.form-group input:focus { border-color: var(--accent); }

.label-checkbox { display: flex !important; align-items: center; gap: .5rem; cursor: pointer; }
.label-checkbox input { width: auto !important; }

.field-hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

.form-narrow { max-width: 420px; }

/* ---- Buttons ---- */

.btn {
  display:       inline-block;
  background:    var(--bg3);
  color:         var(--text);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       .45rem 1rem;
  font-size:     .9rem;
  cursor:        pointer;
  transition:    background .15s, border-color .15s;
}
.btn:hover { background: var(--bg2); border-color: var(--accent); text-decoration: none; }

.btn-primary  { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }

.btn-outline { background: transparent; }

.btn-full { display: block; width: 100%; text-align: center; }

.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.btn-ok  { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.btn-err { background: var(--err); border-color: var(--err); color: #fff; }

/* ---- Alerts ---- */

.alert {
  padding:       .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size:     .9rem;
}
.alert-success { background: #16392220; border: 1px solid var(--ok);   color: #5cce78; }
.alert-error   { background: #3a0d0d20; border: 1px solid var(--err);  color: #f87171; }
.alert-warn    { background: #3a200920; border: 1px solid var(--warn); color: #fbbf24; }

/* ---- Tables ---- */

.table {
  width:          100%;
  border-collapse: collapse;
  font-size:      .88rem;
}
.table th {
  text-align:     left;
  color:          var(--muted);
  font-weight:    600;
  padding:        .5rem .75rem;
  border-bottom:  1px solid var(--border);
}
.table td {
  padding:        .5rem .75rem;
  border-bottom:  1px solid var(--border);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg3); }

.table-mono td { font-family: var(--mono); font-size: .83rem; }

.row-proxy td { background: #3a200920; }
.row-proxy:hover td { background: #3a200940; }

.val { word-break: break-all; max-width: 600px; }

/* ---- Badges ---- */

.badge {
  display:        inline-block;
  font-size:      .72rem;
  font-weight:    600;
  padding:        .15rem .45rem;
  border-radius:  4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-get    { background: #1a3a6a; color: #7fb3ff; }
.badge-post   { background: #1a3a1a; color: #7fd17f; }
.badge-ws     { background: #2a1a3a; color: #c07fff; }
.badge-warn   { background: #3a200920; border: 1px solid var(--warn); color: var(--warn); }
.badge-ok     { background: #16392220; border: 1px solid var(--ok);   color: var(--ok);  }
.badge-bad    { background: #3a0d0d20; border: 1px solid var(--err);  color: #f87171;    }

/* ---- WebSocket probe ---- */

.ws-status {
  font-size:     1rem;
  font-weight:   600;
  padding:       .6rem .75rem;
  border-radius: var(--radius);
  margin-bottom: .75rem;
  background:    var(--bg3);
}
.ws-connecting { border-left: 3px solid var(--muted); }
.ws-connected  { border-left: 3px solid var(--ok); }
.ws-error      { border-left: 3px solid var(--err); }
.ws-closed     { border-left: 3px solid var(--muted); }

.ws-log {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       .75rem;
  height:        260px;
  overflow-y:    auto;
  font-family:   var(--mono);
  font-size:     .8rem;
  margin-bottom: .75rem;
}
.ws-line       { margin-bottom: .2rem; }
.ws-info       { color: var(--muted); }
.ws-ping       { color: #44556688; }
.ws-echo       { color: #7fb3ff; }
.ws-sent       { color: var(--ok); }
.ws-error      { color: var(--err); }
.ws-connected  { color: var(--ok); }
.ws-server     { color: var(--warn); }

.ws-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ws-input {
  flex:          1;
  min-width:     0;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text);
  font-size:     .9rem;
  padding:       .45rem .75rem;
  outline:       none;
}
.ws-input:focus { border-color: var(--accent); }

/* ---- Probe output ---- */

.probe-output {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       .75rem 1rem;
  font-family:   var(--mono);
  font-size:     .85rem;
  min-height:    2.5rem;
}

/* ---- Setup Guide (details/summary) ---- */

.guide {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  background:    var(--bg3);
}

.guide > summary {
  padding:       .75rem 1rem;
  cursor:        pointer;
  font-weight:   600;
  font-size:     .92rem;
  color:         var(--accent);
  list-style:    none;
  user-select:   none;
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::before { content: '▶ '; font-size: .75em; }
.guide[open] > summary::before { content: '▼ '; }

.guide-body {
  padding:      1rem 1.25rem 1.25rem;
  border-top:   1px solid var(--border);
}

.guide-step {
  display:        flex;
  gap:            1rem;
  margin-bottom:  1.25rem;
  align-items:    flex-start;
}
.guide-step:last-child { margin-bottom: 0; }

.guide-step-num {
  flex-shrink:    0;
  width:          1.8rem;
  height:         1.8rem;
  border-radius:  50%;
  background:     var(--accent);
  color:          #fff;
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      .8rem;
  font-weight:    700;
  margin-top:     .1rem;
}

.guide-step-info .guide-step-num {
  background: var(--bg2);
  border:     1px solid var(--border);
  color:      var(--muted);
}

.guide-step ul {
  margin:     .35rem 0 0 1.1rem;
  color:      var(--muted);
  font-size:  .88rem;
}
.guide-step ul li { margin-bottom: .2rem; }
.guide-step strong { color: var(--text); }

.table-compact td { padding: .3rem .6rem; font-size: .8rem; }

.guid { font-size: .78rem; color: var(--muted); letter-spacing: .02em; }

/* ---- Misc ---- */

.muted     { color: var(--muted); }
.tag-proxy { font-size: .75rem; color: var(--warn); font-weight: 600; }