/* Shaqo Kaab jobs portal.
   Indigo, matching the app and the product page, so an employer who has seen
   one recognises the other. Written for a cheap Android phone on a slow
   connection: one stylesheet, no framework, no web fonts. */

:root {
  --indigo:#4338CA; --indigo-deep:#312E9E; --ink:#1E1B4B;
  --paper:#f6f7fb; --card:#ffffff; --line:#e3e6f0; --sub:#5b6478;
  --good:#15803d; --warn:#b45309; --bad:#b91c1c;
  --radius:12px; --shadow:0 1px 2px rgba(30,27,75,.05), 0 8px 24px rgba(30,27,75,.06);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
a { color:var(--indigo-deep); }
h1 { font-size:1.6rem; margin:0 0 .4em; }
h2 { font-size:1.2rem; margin:1.4em 0 .5em; }
h3 { font-size:1.05rem; margin:0 0 .25em; }
.wrap { max-width:940px; margin:0 auto; padding:0 16px; }
.dim { color:var(--sub); }
.small { font-size:.87rem; }
.right { text-align:right; }
.narrow { max-width:520px; margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------------ top */

.top { background:var(--indigo); color:#fff; position:sticky; top:0; z-index:20;
       padding-top:env(safe-area-inset-top); }
.top-in { display:flex; align-items:center; gap:14px; min-height:60px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; }
.brand .logo { width:34px; height:34px; border-radius:9px; background:#fff;
  color:var(--indigo); font-weight:800; display:grid; place-items:center; font-size:14px; }
.brand small { display:block; font-size:11px; opacity:.8; }
.links { margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.links a { color:#dfe0fb; text-decoration:none; font-size:.94rem; }
.links a:hover { color:#fff; }
.links .btn { color:#fff; }
.lang { border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:2px 10px; }
.linkbtn { background:none; border:0; color:#dfe0fb; font:inherit; cursor:pointer;
  font-size:.94rem; padding:0; }
.linkbtn:hover { color:#fff; }
.inline { display:inline; }

/* ---------------------------------------------------------------- pieces */

.page { padding:20px 16px 40px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); margin-bottom:14px; }
a.card { display:block; text-decoration:none; color:inherit; }
a.card:hover { border-color:var(--indigo); }

.hero { padding:14px 0 20px; }
.hero h1 { font-size:1.9rem; }
.hero p { color:var(--sub); max-width:60ch; }
.cta { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }

.btn { display:inline-block; background:var(--indigo); color:#fff; border:1px solid var(--indigo);
  padding:10px 16px; border-radius:10px; cursor:pointer; font:inherit; text-decoration:none; }
.btn:hover { background:var(--indigo-deep); border-color:var(--indigo-deep); }
.btn.ghost { background:#fff; color:var(--indigo-deep); }
.btn.ghost:hover { background:#eef0fd; }
.btn.small { padding:6px 12px; font-size:.88rem; }
.btn.block { width:100%; margin-top:14px; padding:12px; }

label { display:block; margin-bottom:12px; font-size:.9rem; font-weight:600; }
input, select, textarea { width:100%; margin-top:4px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; font:inherit; font-weight:400;
  background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--indigo); outline-offset:-1px; }
textarea { resize:vertical; }
.row { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }

.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filters input, .filters select { width:auto; min-width:150px; margin-top:0; }

.flash { background:#ecfdf5; color:#065f46; border-bottom:1px solid #a7f3d0; padding:10px 0; }
.flash.bad { background:#fef2f2; color:var(--bad); border-bottom-color:#fecaca; }
.notice { background:#fffbeb; border:1px solid #fde68a; color:var(--warn);
  padding:12px 14px; border-radius:10px; margin-bottom:14px; }
.empty { padding:26px 16px; text-align:center; color:var(--sub);
  border:1px dashed var(--line); border-radius:var(--radius); margin-bottom:14px; }
.back { display:inline-block; margin-bottom:10px; text-decoration:none; }

/* ------------------------------------------------------------------ jobs */

/* a.card sets display:block and is more specific than .job, so the board's
   clickable rows fell back to stacking. Name both here. */
.job, a.card.job { display:flex; gap:14px; align-items:flex-start; }
.job-main { flex:1; min-width:0; }
.job-side { text-align:right; display:flex; flex-direction:column; gap:6px;
  align-items:flex-end; flex:none; }
.clip { color:var(--sub); margin:.4em 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pay { font-weight:700; white-space:nowrap; }
.pay small { font-weight:400; color:var(--sub); }
.rowbtns { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.tag { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem;
  font-weight:600; white-space:nowrap; background:#eef0fd; color:var(--indigo-deep); }
.stage-applied { background:#eef2ff; color:#3730a3; }
.stage-shortlisted { background:#e0f2fe; color:#075985; }
.stage-interview { background:#fef3c7; color:#92400e; }
.stage-offered { background:#fae8ff; color:#86198f; }
.stage-placed { background:#dcfce7; color:#14532d; }
.stage-rejected { background:#f1f5f9; color:#475569; }
.st-pending { background:#fef3c7; color:#92400e; }
.st-open { background:#dcfce7; color:#14532d; }
.st-closed { background:#f1f5f9; color:#475569; }
.st-filled { background:#e0e7ff; color:#3730a3; }

.apps { width:100%; border-collapse:collapse; margin-top:10px; }
.apps td { padding:10px 8px; border-top:1px solid var(--line); vertical-align:top; }
.stageform { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.stageform select { width:auto; margin-top:0; }

.tiles { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:8px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; }
.tile .l { display:block; color:var(--sub); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.03em; }
.tile .v { display:block; font-size:1.7rem; font-weight:700; }

.foot { border-top:1px solid var(--line); padding:20px 0 32px; margin-top:24px;
  color:var(--sub); font-size:.9rem; }
.foot p { margin:.2em 0; }

@media (max-width:640px) {
  .job { flex-direction:column; }
  .job-side { flex-direction:row; align-items:center; text-align:left; }
  .apps td { display:block; border-top:0; padding:4px 0; }
  .apps tr { display:block; border-top:1px solid var(--line); padding:10px 0; }
  .stageform { justify-content:flex-start; }
}