/* hub-base.css - compatibility base for pages MOVED from the IT Hub into
   TechWise (spin.php, about.php). Those features' own CSS (spin.css /
   about.css) were written against the IT Hub's style.css tokens and a
   handful of generic base classes. This file supplies just those, so the
   feature CSS renders unchanged while TechWise's nw.css still provides the
   page chrome (nav/footer). Loaded ONLY by spin.php and about.php. */

:root{
  --blue:#0B5A80; --blue-dk:#073E59; --blue-lt:#1478A6; --blue-soft:#eaf3f7;
  --sky:#8FD8F3; --tan:#E0A96D; --tan-dk:#c98f4e;
  --navy:#0A2536; --navy-dk:#071A27; --navy-lt:#14344a;
  --green:#bde9ba; --green-dk:#2f7a2a; --red:#cd202c; --amber:#b26a00;
  --ink:#1b2733; --muted:#5c6b78; --line:#e6ecef; --card:#fff; --bg:#eef2f5;
  --shadow:0 1px 2px rgba(10,37,54,.06), 0 6px 18px rgba(10,37,54,.06);
}

/* headings + copy */
h1{font-size:1.5rem;color:var(--navy);margin:0 0 4px}
h2{font-size:1.02rem;color:var(--navy);margin:0 0 12px}
.sub{color:var(--muted);margin:0 0 22px;font-size:.94rem}
.tiny{font-size:.74rem;color:var(--muted)}
.empty{color:var(--muted);font-style:italic;padding:8px 0}

/* panels */
.panel{background:var(--card);border-radius:14px;padding:20px;margin:0 0 16px;box-shadow:var(--shadow)}
.phead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.phead h2{margin:0}

/* form fields */
label{display:block;font-weight:700;font-size:.85rem;margin:14px 0 5px;color:#444}
input[type=text],input[type=password],input[type=date],textarea{
  width:100%;padding:11px 12px;border:1px solid #d3dbe0;border-radius:9px;font-size:1rem;font-family:inherit}
input:focus,textarea:focus{outline:2px solid var(--blue-lt);border-color:var(--blue-lt)}

/* buttons */
.btn{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:11px 18px;font-size:.95rem;
     font-weight:700;cursor:pointer;display:inline-block;line-height:1.6;text-decoration:none}
.btn:hover{background:var(--navy-dk)}
.btn.sm{padding:6px 12px;font-size:.82rem}
.btn.danger{background:var(--red)}
.btn.danger:hover{background:#a3161f}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--line);text-decoration:none;
           display:inline-block;line-height:1.6}
.btn.ghost:hover{background:var(--blue-soft)}
.inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inline label{margin-top:0}