/* ============================================================
   STAFF VERIFICATION — DESIGN SYSTEM
   Change the look of the WHOLE product from here.
   Everything below (colours, fonts, roundness, shadow) is used
   by both the public verification page and the HR portal.
   You rarely need to touch anything except these variables.
   ============================================================ */
:root{
  /* -- Brand accents (also settable per-client in Settings) -- */
  --primary:#0F766E;        /* main HR action colour (buttons)   */
  --primary-dk:#0C5F58;     /* button hover                       */
  --primary-tint:#E6F3F1;   /* soft primary background            */

  /* -- Text -- */
  --ink:#16213A;            /* main text                          */
  --muted:#66718A;          /* secondary text / labels            */

  /* -- Surfaces -- */
  --bg:#EEF1F6;             /* page background                     */
  --card:#ffffff;           /* card background                     */
  --line:#E7EAF0;           /* borders / dividers                 */

  /* -- Status (safety colours — keep these meaningful) -- */
  --ok:#0E9F6E;   --ok-bg:#E3F5EE;
  --bad:#E02424;  --bad-bg:#FDE8E8;
  --warn:#C27803; --warn-bg:#FDF6E3;

  /* -- Shape & depth -- */
  --radius:16px;            /* card corner roundness              */
  --radius-sm:9px;          /* inputs / buttons roundness         */
  --shadow-card:0 10px 30px -18px rgba(20,30,60,.28);
  --shadow-pop:0 24px 60px -20px rgba(20,30,60,.35), 0 6px 18px -8px rgba(20,30,60,.2);

  /* -- Fonts (one identity across the product) -- */
  --font:'Nunito',system-ui,'Segoe UI',Arial,sans-serif;
  --font-ar:'Tajawal','Nunito',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink)}
[dir=rtl] body{font-family:var(--font-ar)}

/* ---- Shared components ---- */
/* Primary buttons follow the client's Header colour (--accent), with
   auto-chosen readable text (--accent-ink). Hover darkens via filter so it
   works for ANY colour. Secondary (.ghost) stay light for contrast. */
.btn{background:var(--accent,var(--primary));color:var(--accent-ink,#fff);border:none;border-radius:var(--radius-sm);
  padding:11px 20px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;
  transition:filter .15s,transform .05s;box-shadow:0 6px 16px -10px rgba(20,30,60,.55)}
.btn:hover{filter:brightness(.92)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #D3DAE6;box-shadow:none}
.btn.ghost:hover{background:#F6F8FB}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-bottom:22px;box-shadow:var(--shadow-card)}
.card.narrow{max-width:430px;margin:44px auto}

label{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:#3A4560;gap:7px;margin-bottom:14px}
input,select{font:inherit;padding:10px 12px;border:1px solid #D3DAE6;border-radius:var(--radius-sm);
  font-weight:400;transition:border .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}

.pill{display:inline-block;font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:999px}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}

.err{background:var(--bad-bg);color:var(--bad);padding:11px 13px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:14px;font-weight:600}
.ok-note{background:var(--ok-bg);color:var(--ok);padding:11px 13px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:14px;font-weight:700}
.muted{color:var(--muted)} .small{font-size:12.5px}