/* TendaRadar admin — console content components. Loaded on the custom console
   pages only (overview / review / add tender / WhatsApp / settings / login). NOT
   loaded on the data-tables pages, which render Tabler + sqladmin-skin.css, so
   the bare element selectors here can't collide with Tabler's. */

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1; margin:0; letter-spacing:.005em; }
h1{ font-size:2.6rem; }
h2{ font-size:1.6rem; }
h3{ font-size:1.25rem; }
p{ margin:0 0 .9rem; }
code{ font-size:.9em; background:var(--surface-2); padding:.05em .35em; border-radius:4px; }
.lead{ color:var(--ink-soft); max-width:66ch; margin:.6rem 0 1.5rem; }
.mut{ color:var(--ink-faint); }
.small{ font-size:.86rem; }
.num{ font-variant-numeric:tabular-nums; }
.page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.5rem 1.5rem; margin-bottom:1.5rem; }
.page-head .lead{ margin-bottom:0; }
.sec-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; margin:2.25rem 0 .75rem; }
.count{ font-family:var(--sans); font-size:.9rem; font-weight:400; color:var(--ink-faint); margin-left:.4rem; }

/* ---------- the verdict: one line that says whether anything needs you ---------- */
.verdict{ margin:0 0 1.5rem; }
.verdict h1{ font-size:clamp(2.6rem,6vw,4rem); display:flex; align-items:center; gap:.9rem; }
.verdict h1::before{ content:""; flex:none; width:.5em; height:.5em; border-radius:50%; background:currentColor; }
.verdict.ok h1{ color:var(--ok); }
.verdict.warn h1{ color:var(--warn); }
.verdict.crit h1{ color:var(--crit); }
.verdict.crit h1::before{ animation:beacon 1.6s ease-in-out infinite; }
@keyframes beacon{ 50%{ opacity:.25; } }
.verdict p{ margin:.6rem 0 0; color:var(--ink-soft); max-width:72ch; }
.verdict .ts{ font-size:.86rem; color:var(--ink-faint); }

/* ---------- counters: a ruled row, quiet ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); margin:0 0 .5rem; }
.stats > div{ padding:.85rem 1rem .8rem 0; }
.stats .n{ font-family:var(--display); font-weight:800; font-size:2rem; line-height:1; font-variant-numeric:tabular-nums; }
.stats .k{ font-size:.86rem; color:var(--ink-soft); margin-top:.3rem; }
.stats .warn{ color:var(--warn); } .stats .crit{ color:var(--crit); } .stats .ok{ color:var(--ok); } .stats .idle{ color:var(--ink-faint); }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
table.dt{ width:100%; border-collapse:collapse; font-size:.93rem; }
.dt th{ text-align:left; font-weight:700; font-size:.84rem; color:var(--ink-soft); padding:.6rem .75rem; border-bottom:1px solid var(--line-strong); white-space:nowrap; background:var(--surface-2); }
.dt td{ padding:.6rem .75rem; border-bottom:1px solid var(--line); vertical-align:top; }
.dt tr:last-child td{ border-bottom:0; }
.dt tbody tr:hover td{ background:#F8FAF6; }
.dt .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dt .nowrap{ white-space:nowrap; }
.dt .act{ text-align:right; white-space:nowrap; width:1%; }
.dt td.mid{ vertical-align:middle; }
.src-name{ font-weight:700; }
.src-slug{ font-size:.82rem; color:var(--ink-faint); }
.kv{ width:100%; border-collapse:collapse; font-size:.95rem; }
.kv td{ padding:.55rem 0; border-bottom:1px solid var(--line); }
.kv td + td{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
.kv tr:last-child td{ border-bottom:0; }

/* ---------- status: dot + word ---------- */
.st{ display:inline-flex; align-items:center; gap:.4em; font-size:.88rem; font-weight:700; white-space:nowrap; }
.st::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:currentColor; flex:none; }
.st.healthy,.st.ok,.st.connected{ color:var(--ok); }
.st.degraded,.st.stale,.st.partial,.st.waiting{ color:var(--warn); }
.st.failing,.st.failed,.st.down{ color:var(--crit); }
.st.idle,.st.disabled,.st.unknown{ color:var(--idle); }
.ok-txt{ color:var(--ok); } .warn-txt{ color:var(--warn); } .crit-txt{ color:var(--crit); }

/* ---------- buttons ---------- */
button,.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:40px; padding:.5rem 1rem;
  font:700 .93rem/1.1 var(--sans); border-radius:var(--r); border:1.5px solid var(--go); background:var(--go); color:#fff;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:background-color .12s, border-color .12s; }
button:hover,.btn:hover{ background:var(--go-deep); border-color:var(--go-deep); color:#fff; }
.btn-line{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-line:hover{ background:var(--surface); color:var(--ink); border-color:var(--ink-soft); }
.btn-danger{ background:var(--surface); color:var(--crit); border-color:#E7B9AE; }
.btn-danger:hover{ background:var(--crit-bg); color:var(--crit); border-color:var(--crit); }
.btn-sm{ min-height:32px; padding:.3rem .7rem; font-size:.85rem; }
button[disabled]{ opacity:.55; cursor:default; }
form.inline{ display:inline; margin:0; }
form.inline + form.inline{ margin-left:.35rem; }

/* ---------- forms ---------- */
label{ display:block; font-weight:700; font-size:.93rem; margin:0 0 .35rem; }
input[type=text],input[type=tel],input[type=number],input[type=password],input[type=date],textarea,select{
  width:100%; min-height:42px; padding:.5rem .7rem; font:inherit; font-size:.97rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r); }
textarea{ min-height:6rem; resize:vertical; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--go); box-shadow:0 0 0 3px var(--go-soft); }
input[readonly]{ background:var(--surface-2); }
.fld{ margin:0 0 1.1rem; }
.help{ color:var(--ink-faint); font-size:.86rem; margin-top:.3rem; }
.grid-2{ display:grid; gap:0 1rem; }
@media (min-width:700px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.form-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.5rem; }
.req{ color:var(--crit); }
.check{ display:flex; align-items:center; gap:.55rem; font-weight:400; margin:0; cursor:pointer; }
.check input{ width:18px; height:18px; accent-color:var(--go); margin:0; }
.row-form{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.75rem 0 0; }
.row-form input[type=tel]{ flex:1 1 14rem; width:auto; }

/* ---------- panels + banners ---------- */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem 1.4rem 1.35rem; margin:0 0 1.25rem; }
.panel > h2{ margin-bottom:.35rem; }
.panel > .note{ color:var(--ink-soft); font-size:.93rem; margin:0 0 1.1rem; max-width:66ch; }
.narrow{ max-width:780px; }

.banner{ padding:.75rem 1rem; border-radius:var(--r); margin:0 0 1.25rem; border-left:4px solid var(--go); background:var(--go-soft); color:var(--ink); }
.banner.ok{ border-color:var(--ok); background:var(--ok-bg); }
.banner.warn{ border-color:var(--warn); background:var(--warn-bg); }
.banner.err{ border-color:var(--crit); background:var(--crit-bg); }
.banner ul{ margin:.4rem 0 0; padding-left:1.2rem; }
.banner a{ font-weight:700; }

.empty{ border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:2rem 1.5rem; text-align:center; color:var(--ink-soft); background:var(--surface); }
.empty h2{ color:var(--ink); margin-bottom:.4rem; }
.empty p{ margin:0; }

/* ---------- overview extras ---------- */
.two{ display:grid; gap:2rem; }
@media (min-width:900px){ .two{ grid-template-columns:1.2fr 1fr; } }
.runlog{ list-style:none; margin:0; padding:0; }
.runlog li{ display:grid; grid-template-columns:6.5rem 5.5rem 1fr auto; gap:.6rem; align-items:baseline; padding:.45rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.runlog .t{ color:var(--ink-faint); font-size:.86rem; font-variant-numeric:tabular-nums; }
@media (max-width:520px){ .runlog li{ grid-template-columns:auto 1fr; } }
.tenders{ list-style:none; margin:0; padding:0; }
.tenders li{ padding:.6rem 0; border-bottom:1px solid var(--line); }
.tenders .meta{ display:flex; flex-wrap:wrap; gap:.15rem 1rem; color:var(--ink-faint); font-size:.86rem; margin-top:.15rem; }

/* ---------- review queue ---------- */
.raw-cell{ max-width:340px; max-height:150px; overflow:auto; margin:0; font-size:.78rem; background:var(--surface-2); padding:.5rem; border-radius:var(--r); }
.conf{ font-family:var(--display); font-weight:800; font-size:1.5rem; line-height:1; }
.conf.low{ color:var(--crit); } .conf.mid{ color:var(--warn); }

/* ---------- settings ---------- */
.secret-state{ display:inline-block; font-size:.8rem; font-weight:700; margin-left:.5rem; padding:.05rem .5rem; border-radius:4px; vertical-align:1px; }
.secret-state.set{ color:var(--ok); background:var(--ok-bg); }
.secret-state.unset{ color:var(--warn); background:var(--warn-bg); }
.savebar{ position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center;
  background:var(--paper); padding:1rem 0; margin-top:.5rem; border-top:1px solid var(--line-strong); }

/* ---------- WhatsApp services ---------- */
.svc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem 1.35rem; margin:0 0 1.1rem; }
.svc.active{ border-color:var(--go); box-shadow:inset 4px 0 0 var(--go); }
.svc-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.75rem 0 .25rem; }
.tag{ font-size:.84rem; padding:.15rem .55rem; border-radius:4px; background:var(--surface-2); color:var(--ink-soft); }
.tag.on{ background:var(--go); color:#fff; font-weight:700; }
.tag.code{ font-family:ui-monospace,Consolas,monospace; font-size:.78rem; }
.svc details{ margin-top:.75rem; }
.svc summary{ cursor:pointer; font-weight:700; color:var(--ink-soft); }
.howto{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:.85rem 1rem .85rem 2.2rem; margin:.75rem 0; }
.howto li{ margin:.3rem 0; }
.howto.plain{ padding-left:1rem; }
.qr-box{ text-align:center; padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); margin:1rem 0; }
.qr-box img{ width:280px; max-width:100%; height:auto; margin:0 auto; display:block; }
.pair-code{ text-align:center; background:var(--board); color:var(--board-ink); border-radius:var(--r-lg); padding:1.4rem; margin:1rem 0; }
.pair-code p{ color:var(--board-soft); margin:0; }
.pair-code .code{ font-family:var(--display); font-weight:800; font-size:3rem; letter-spacing:.14em; color:var(--board-hi); margin:.5rem 0; }
.hook{ display:flex; gap:.4rem; align-items:center; margin:.5rem 0 0; }
.hook input{ flex:1; font-family:ui-monospace,Consolas,monospace; font-size:.84rem; }

/* ---------- login ---------- */
.login{ min-height:100vh; display:grid; place-items:center; padding:1rem; background:var(--board); }
.login-card{ width:100%; max-width:380px; background:var(--surface); border-radius:var(--r-lg); padding:1.8rem 1.7rem 1.9rem; }
.login-brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:800; font-size:1.8rem; line-height:1; color:var(--ink); }
.login-brand svg{ width:28px; height:28px; color:var(--go); }
.login-card .lead{ margin:.5rem 0 1.4rem; }
.login-card button{ width:100%; margin-top:.4rem; }