/* ==========================================================================
   jobela-pages.css — dopune uz jobela.css (jobela.css se NE dira)
   Ucitava se posle jobela.css (theme_files display_order 85).
   ========================================================================== */

/* --- App shell (profil strane): full-height lock SAMO tamo gde postoji .dash ---
   U jobela.css stoji `@media(min-width:961px){html,body{height:100%;overflow:hidden}}`
   bez ikakvog scope-a, pa je na desktopu zakljucavao skrol na CELOM sajtu
   (provereno: full-page snimak /about staje u 1100px). Ovde se vraca normalno
   ponasanje stranice, a lock ostaje samo kad je na strani app shell (.dash). */
@media (min-width: 961px) {
  html, body { height: auto; overflow: visible; }
  html:has(.dash), body:has(.dash) { height: 100%; overflow: hidden; }
}

/* Profil strane nemaju globalni header (blank override) -> nema odmaka za fiksni header */
.pg-company-profile { padding-top: 0; }

/* "Log out" u sidebaru je <form> — ne sme da lomi flex/grid tok navigacije */
.sb-nav form { display: contents; }

/* Prost prikaz podataka naloga (profil kandidata / agencije) */
.jbp-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px 24px; margin-top: 2px; }
.jbp-dl dt { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding-top: 3px; }
.jbp-dl dd { font-size: .95rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .jbp-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jbp-dl dd { margin: 2px 0 13px; }
  .jbp-dl dd:last-child { margin-bottom: 0; }
}

/* .pnote je na naslovnoj zelena "note" kutija; u app shellu je obican pasus (kao u prototipu) */
.pg-company-profile .pnote { display: block; background: none; border: 0; border-radius: 0; padding: 0; margin-top: 14px; }

/* .lnk je u jobela.css definisan samo unutar tabele (.tbl .lnk) — isti izgled i u .set listi */
.set .lnk { font-size: .8rem; font-weight: 700; color: var(--navy); border-bottom: 1.5px solid var(--gold); padding-bottom: 1px; }
.set .lnk:hover { color: var(--gold-d); }


/* ==== JOBELA doc/hiw block ==== */
/* How it works (companies / candidates) + Terms / Privacy — .pg-doc, .jstep*, .doc* */

/* NAPOMENA: bazni .phead u jobela.css je TAMAN hero (color:#fff) — zato ovde
   eksplicitno vraćamo svetlu varijantu (kao .pg-about .phead). */
.pg-doc .phead{position:relative;overflow:hidden;color:var(--fg);
  background:var(--card);border-bottom:1px solid var(--line);
  padding:clamp(112px,12vw,150px) 0 clamp(38px,4.6vw,58px)}
.pg-doc .phead .eyebrow{color:var(--gold-d)}
.pg-doc .phead .eyebrow::before{background:var(--gold)}
/* width/height:auto — bazni .phead::before (tamni hero) postavlja width:58%;height:170% */
.pg-doc .phead::before{content:"";position:absolute;inset:0;width:auto;height:auto;pointer-events:none;
  background:radial-gradient(52% 108% at 84% 22%,rgba(242,176,30,.16),transparent 68%)}
.pg-doc .phead::after{content:"";position:absolute;inset:0;width:auto;height:auto;pointer-events:none;opacity:.7;
  background:linear-gradient(rgba(10,29,58,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,29,58,.035) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 16% 44%,#000,transparent 74%);
  mask-image:radial-gradient(circle at 16% 44%,#000,transparent 74%)}
.pg-doc .phead>.wrap{position:relative;z-index:1}
.pg-doc .phead h1{font-size:clamp(2.1rem,4.7vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.028em;max-width:18ch}
.pg-doc .phead .lead{font-size:1.1rem;color:var(--fg-2);max-width:62ch;margin-top:16px;line-height:1.7}

/* numerisani koraci — vertikalni timeline (radi i za 5+ koraka) */
.jsteps{display:flex;flex-direction:column;max-width:860px}
.jstep{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);gap:20px;padding-bottom:26px}
.jstep:last-child{padding-bottom:0}
.jstep::before{content:"";position:absolute;left:29px;top:68px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(var(--bg-3),rgba(233,236,241,0))}
.jstep:last-child::before{display:none}
.jstep-n{width:60px;height:60px;border-radius:19px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;
  background:linear-gradient(145deg,var(--gold-l),var(--gold));
  box-shadow:0 10px 26px rgba(242,176,30,.3)}
.jstep-b{padding-top:9px}
.jstep-b h3{font-size:1.14rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.jstep-b p{font-size:.95rem;color:var(--fg-2);line-height:1.72;margin-top:7px;max-width:62ch}

/* CTA: bez ovoga max-content pasusa gurne dugmad u novi red i desna polovina ostane prazna */
.pg-doc .cta-in>div:first-child{flex:1 1 380px;min-width:0}

/* pravni dokument (Terms / Privacy) */
.doc-draft{max-width:780px}
.doc-meta{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
.doc-draft{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;
  background:rgba(242,176,30,.1);border:1px solid rgba(242,176,30,.34);border-left:3px solid var(--gold);
  border-radius:0 14px 14px 0;margin-top:22px}
.doc-draft svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--gold-d);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.doc-draft b{display:block;font-size:.9rem;font-weight:700;color:var(--navy)}
.doc-draft span{display:block;font-size:.9rem;color:var(--fg-2);line-height:1.62;margin-top:3px}
.doc-sec{padding-top:clamp(20px,2.4vw,28px);margin-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.doc-sec:first-child{padding-top:0;margin-top:0;border-top:0}
.doc-sec h2{display:flex;gap:12px;align-items:baseline;font-size:1.16rem;font-weight:700;letter-spacing:-.015em;line-height:1.35}
.doc-sec h2 i{font-style:normal;font-weight:800;color:var(--gold-d);flex:none;min-width:24px}
.doc-sec p{font-size:.97rem;color:var(--fg-2);line-height:1.78;margin-top:10px;padding-left:36px;max-width:88ch}
.doc-sec strong{color:var(--navy);font-weight:700}
.doc-sec a{color:var(--gold-d);font-weight:600}
.doc-sec a:hover{text-decoration:underline}

@media(max-width:680px){
.pg-doc .phead{padding-top:104px}
.pg-doc .phead h1{font-size:clamp(1.95rem,7.2vw,2.5rem);max-width:none}
.pg-doc .phead .lead{font-size:1.02rem}
.jstep{grid-template-columns:48px minmax(0,1fr);gap:15px;padding-bottom:22px}
.jstep-n{width:48px;height:48px;border-radius:15px;font-size:1.08rem}
.jstep::before{left:23px;top:56px}
.jstep-b{padding-top:4px}
.doc-sec p{padding-left:0}
}
/* ==== /JOBELA doc/hiw block ==== */

/* ==== JOBELA auth block ==== */
/* Auth pages — login / forgot-password / reset-password / verify-email */
.auth-pg{position:relative;padding:calc(var(--hh) + 60px) 0 84px;background:var(--bg);overflow:hidden}
.auth-pg::before{content:"";position:absolute;top:-190px;right:-150px;width:560px;height:560px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(242,176,30,.20) 0%,rgba(242,176,30,0) 70%)}
.auth-pg::after{content:"";position:absolute;bottom:-230px;left:-190px;width:620px;height:620px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(10,29,58,.11) 0%,rgba(10,29,58,0) 70%)}
.auth-in{position:relative;z-index:1;width:100%;max-width:496px;margin:0 auto;padding:0 24px}

.auth-card{background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);padding:clamp(26px,4.4vw,40px)}

.auth-head{margin-bottom:26px}
.auth-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-d);
  background:rgba(242,176,30,.13);border:1px solid rgba(242,176,30,.32);
  border-radius:40px;padding:6px 13px;margin-bottom:16px;line-height:1}
.auth-eyebrow svg{width:14px;height:14px;stroke:var(--gold-d);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.auth-head h1{font-family:var(--h);font-size:clamp(1.6rem,3.6vw,2rem);font-weight:800;
  letter-spacing:-.022em;line-height:1.16;color:var(--navy)}
.auth-head p{font-size:.93rem;color:var(--fg-2);margin-top:9px;line-height:1.58}

.auth-form{display:flex;flex-direction:column;gap:17px}
.auth-form .fld>.fl{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.84rem;font-weight:600;color:var(--navy);margin-bottom:7px}
/* Tailwind forms plugin paints its own border + focus ring on bare inputs —
   suppress it so only the .inp shell shows the gold focus state. */
.auth-card .inp input{border:0;box-shadow:none}
.auth-card .inp input:focus{border:0;outline:0;box-shadow:none;--tw-ring-shadow:0 0 #0000}

/* Status / error banner — deliberately loud, never a faint grey hint */
.auth-msg{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-radius:14px;
  border:1.5px solid;font-size:.89rem;line-height:1.5;margin-bottom:22px}
.auth-msg svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.auth-msg b{display:block;font-weight:700;font-size:.83rem;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:4px}
.auth-msg ul{list-style:none;margin:0;padding:0}
.auth-msg li+li{margin-top:5px}
.auth-msg-bad{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.42);color:#8E1616}
.auth-msg-bad svg{stroke:var(--red)}
.auth-msg-bad b{color:var(--red)}
.auth-msg-ok{background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.42);color:#0A6B4E}
.auth-msg-ok svg{stroke:var(--green)}
.auth-msg-ok b{color:#0A6B4E}

.auth-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.auth-row a{font-size:.85rem;font-weight:600;color:var(--gold-d)}
.auth-row a:hover{text-decoration:underline}

.auth-actions{display:flex;flex-direction:column;gap:12px}
.auth-link-btn{background:none;border:0;padding:0;cursor:pointer;font-family:var(--h);
  font-size:.87rem;font-weight:600;color:var(--fg-2)}
.auth-link-btn:hover{color:var(--gold-d);text-decoration:underline}

.auth-back{display:block;text-align:center;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);font-size:.88rem;font-weight:600;color:var(--fg-2)}
.auth-back:hover{color:var(--gold-d)}

@media(max-width:520px){
  .auth-pg{padding:calc(var(--hh) + 26px) 0 54px}
  .auth-in{padding:0 16px}
  .auth-card{border-radius:18px}
}
/* ==== /JOBELA auth block ==== */

/* ==== JOBELA company profile — app shell dopune ==== */
/* .pcard+.pcard ne pali kad je prethodni sibling .stats → "Recent activity" se lepi za statistiku */
.stats + .pcard{margin-top:16px}

/* pretraga kandidata živi u panelu profila — bez punog page layout-a */
.pan .jbcs .wrap{max-width:none;padding:0}
.pan .jbcs .fwrap{margin-top:0}
.pan .jbcs .sec.tight{padding:18px 0 0}
.pan .jbcs .fbar{box-shadow:var(--shadow)}
/* ==== /JOBELA company profile ==== */

/* ==== JOBELA probni period (Free Trial) — traka u profilu firme i agencije ==== */
.jbtrial{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  padding:14px 18px;border-radius:14px;border:1px solid rgba(16,185,129,.42);
  background:rgba(16,185,129,.09);color:#0A6B4E}
.jbtrial svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.jbtrial>div{flex:1 1 260px;min-width:0}
.jbtrial b{display:block;font-family:var(--h);font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.jbtrial span{display:block;margin-top:3px;font-size:.87rem;line-height:1.55;color:var(--fg-2)}
.jbtrial .ctab{flex:none}
.jbtrial.is-soon{border-color:rgba(242,176,30,.55);background:rgba(242,176,30,.12);color:#8A5A00}
.jbtrial.is-over{border-color:rgba(180,35,24,.42);background:rgba(180,35,24,.08);color:#8C1D18}
/* ==== /JOBELA probni period ==== */