/* ============================================================
   PostKazi app styles (auth, dashboard, forms)
   Brand: green #26ae61 / deep #0d4d1f, orange #fe9703
   ============================================================ */
:root{
  --green:#26ae61; --green-deep:#0d4d1f; --green-600:#1f8a4f; --green-soft:#e6f6ec;
  --orange:#fe9703; --orange-deep:#d97c00; --orange-soft:#fff1da;
  --ink:#16241a; --ink-soft:#5f6b62; --paper:#f7f9f6; --card:#fff;
  --line:#e4eade; --line-2:#d3ddcb;
  --radius:14px; --shadow:0 1px 2px rgba(20,40,25,.04),0 8px 24px rgba(20,40,25,.06);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:2.5px solid var(--green-deep);outline-offset:2px;border-radius:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:11px;transition:.15s;white-space:nowrap}
.btn-green{background:var(--green);color:#fff;box-shadow:0 2px 0 var(--green-deep)}
.btn-green:hover{background:var(--green-600)}
.btn-orange{background:var(--orange);color:#3a2400;box-shadow:0 2px 0 var(--orange-deep)}
.btn-orange:hover{background:var(--orange-deep);color:#fff}
.btn-dark{background:var(--green-deep);color:#fff}
.btn-ghost{background:#fff;border:1.5px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green-deep)}
.btn-sm{padding:8px 14px;font-size:13.5px;border-radius:9px}
.btn-block{width:100%}
.muted{color:var(--ink-soft)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:100px;background:var(--green-soft);color:var(--green-deep)}
.verified{display:inline-flex;align-items:center;gap:4px;color:var(--green-600);font-weight:700;font-size:12.5px}

/* logo */
.logo-img img{height:42px;width:auto}
.logo-img.sm img{height:34px}

/* ---------- top bar (public + logged-in) ---------- */
.appbar{position:sticky;top:0;z-index:50;background:rgba(247,249,246,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.appbar .row{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:22px;height:66px}
.appbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.navlinks{display:flex;gap:2px}
.navlinks a{font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:8px 13px;border-radius:8px}
.navlinks a:hover{color:var(--green-deep);background:var(--green-soft)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-deep));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- auth pages ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-aside{background:linear-gradient(165deg,var(--green-deep),#0a3d18);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-aside .logo-img img{height:46px}
.auth-aside h2{font-size:34px;margin:20px 0 14px;color:#fff}
.auth-aside p{color:#cfe6d3;font-size:16px;max-width:380px}
.auth-points{display:grid;gap:14px;margin-top:26px}
.auth-points div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#e7f3e9}
.auth-points .dot{width:22px;height:22px;border-radius:50%;background:var(--green);flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:12px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-size:28px;margin-bottom:6px}
.auth-card .sub{color:var(--ink-soft);margin-bottom:24px}

/* role chooser */
.rolepick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.rolepick label{border:1.5px solid var(--line-2);border-radius:12px;padding:14px;cursor:pointer;text-align:center;transition:.15s;background:#fff}
.rolepick label:hover{border-color:var(--green)}
.rolepick input{position:absolute;opacity:0}
.rolepick input:checked + .rp-in{color:var(--green-deep)}
.rolepick label:has(input:checked){border-color:var(--green);background:var(--green-soft);box-shadow:0 0 0 3px #d6f0df}
.rolepick .rp-ic{font-size:24px;margin-bottom:6px}
.rolepick .rp-t{font-weight:700;font-size:14.5px}
.rolepick .rp-d{font-size:12px;color:var(--ink-soft);margin-top:2px}

/* forms */
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px #d6f0df}
.field .hint{font-size:12px;color:var(--ink-soft);margin-top:5px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-foot{text-align:center;margin-top:20px;font-size:14px;color:var(--ink-soft)}
.auth-foot a{color:var(--green-deep);font-weight:600}

/* ---------- dashboard shell ---------- */
.dash-layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--green-deep);color:#d8e6db;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo-img{margin:4px 8px 18px}
.sidebar .logo-img img{height:38px}
.sb-sec{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#7fa389;margin:18px 10px 7px}
.navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:14.5px;font-weight:500;color:#cfe0d3;transition:.13s;margin-bottom:2px}
.navitem:hover{background:rgba(255,255,255,.07);color:#fff}
.navitem.on{background:var(--green);color:#fff;font-weight:600}
.navitem .ic{width:20px;text-align:center}
.navitem .badge{margin-left:auto;background:var(--orange);color:#3a2400;font-size:11px;font-weight:700;padding:1px 7px;border-radius:100px}
.dash-main{background:var(--paper);min-height:100vh}
.topbar{background:rgba(247,249,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:13px 28px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar h2{font-size:19px}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.dash-body{padding:26px 28px;max-width:1150px}

.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.stat .lbl{font-size:12.5px;color:var(--ink-soft)}
.stat .num{font-family:var(--font-display);font-size:28px;font-weight:700;margin-top:4px}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px}
.panel h3{font-size:16.5px;margin-bottom:14px}
.cols-2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.bar{height:9px;border-radius:100px;background:var(--green-soft);overflow:hidden}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--green));border-radius:100px}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}

.notice{background:var(--green-soft);border:1px solid #bfe3cd;border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:14px;margin-bottom:18px}
.notice.orange{background:var(--orange-soft);border-color:#edd29a}

/* profile photo uploader */
.photo-up{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.photo-up .pic{width:96px;height:96px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--green-deep);overflow:hidden;flex-shrink:0}
.photo-up .pic img{width:100%;height:100%;object-fit:cover}

.menu-toggle{display:none}
@media(max-width:920px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
  .dash-layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:248px;z-index:100;transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:grid;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);place-items:center}
  .statgrid,.cols-2{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}
@media(max-width:560px){.statgrid,.cols-2,.frow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- hiring pipeline (kanban) ---- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.kcol{background:var(--panel,#f3ecdd);border-radius:14px;padding:12px;min-height:80px}
.kcol h4{font-size:13px;font-weight:700;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.kcol h4 .ct{margin-left:auto;font-size:12px;color:var(--ink-soft);background:#fff;padding:1px 8px;border-radius:100px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:9px}
.kcard:hover{box-shadow:0 6px 18px rgba(40,30,10,.08)}
.kcard .kn{font-weight:600;font-size:14px}
.kcard .km{font-size:12px;color:var(--ink-soft);margin-top:3px}
.kcard .kmatch{font-size:11px;font-weight:700;color:var(--green);margin-top:6px}
@media(max-width:920px){.kanban{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kanban{grid-template-columns:1fr}}

/* ---- status dots (used in tables) ---- */
.statusdot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.statusdot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.s-review{color:var(--blue,#2380fb)}.s-shortlist{color:var(--orange-deep,#b36b00)}
.s-hired{color:var(--green,#1f8a4f)}.s-new{color:var(--clay,#c0392b)}

/* ---- dashboard form rows ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2,#d9cdb3);border-radius:10px;font-family:inherit;font-size:14.5px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px #d6efe0}
.panel-head{display:flex;align-items:center;margin-bottom:15px}
.panel-head h3{font-size:16.5px;font-weight:700}
@media(max-width:560px){.frow{grid-template-columns:1fr}}

/* ---- dashboard table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}