/* assets/css/app.css
 *
 * Sipotta's design system, carried over from the sipotta-v6_1.html
 * prototype so the real backend looks like the same product rather than a
 * second one that happens to share a name. Same tokens, same component
 * classes (.b/.bp/.bo, .c, .chip, .sh form styling), same mobile-first
 * breakpoints — extended here with a couple of layout patterns (.authwrap,
 * .nr) the prototype didn't need because it never had a real page per
 * screen.
 */

:root{
  --ink:#1A1A1A;--coral:#F86369;--violet:#7364A9;--rose:#B6505E;--blush:#FCEDE6;--paper:#FBFBFA;
  --grey:#70706E;--line:#EAEAE8;--ok:#166534;--okbg:#E7F6EC;--err:#991B1B;--errbg:#FCEBEB;--wa:#25D366;
  --w:1160px;--pad:32px;--r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--paper);color:var(--ink);
line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
svg{display:block}a{color:inherit;text-decoration:none;cursor:pointer}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.16}
h1{font-size:clamp(28px,5vw,40px)}h2{font-size:clamp(21px,2.9vw,28px)}h3{font-size:17px;letter-spacing:-.015em}
.w{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
@media(max-width:900px){:root{--pad:22px}}
@media(max-width:600px){:root{--pad:16px}}
.nr{max-width:640px;margin:0 auto}
.vp{padding-top:34px;padding-bottom:48px}
.mut{color:var(--grey)}.sm{font-size:13.5px}.xs{font-size:12px}.cen{text-align:center}
.eb{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(251,251,250,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hr{display:flex;align-items:center;gap:12px;height:58px}
.bd{display:flex;align-items:center;gap:8px;font-family:Outfit;font-weight:700;font-size:19px;letter-spacing:-.03em;flex:0 0 auto}
.bd svg{width:22px;height:22px}
.hn{display:flex;gap:18px;align-items:center;font-size:13.5px;font-weight:600;color:var(--grey)}
.hn a:hover{color:var(--ink)}
@media(max-width:719px){
  .hn{display:none}
  /* a long full name (or a long org/title chip anywhere in the header) must
     never force the sticky header wider than the viewport on a small phone */
  .who .sm{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.ha{margin-left:auto;display:flex;gap:7px;align-items:center;flex:0 0 auto}
.who{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border:1px solid var(--line);border-radius:99px;background:#fff}
.who .av{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Outfit;font-weight:700;font-size:10.5px;color:#fff;background:var(--ink);flex:0 0 auto}

/* buttons */
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:14px;
padding:9px 15px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.13s;line-height:1.2;white-space:nowrap}
.b:active{transform:translateY(1px)}
.bp{background:var(--ink);color:#fff}.bp:hover{background:#000}
.bo{background:#fff;color:var(--ink);border-color:#DEDEDB}.bo:hover{border-color:var(--ink)}
.bv{background:var(--violet);color:#fff}
.bc{background:var(--coral);color:#fff}
.br{background:#fff;color:var(--err);border-color:#F3D2D2}
.bl{padding:12px 20px;font-size:15px;border-radius:11px}
.bs{padding:6px 11px;font-size:12.5px;border-radius:8px}
.bb{display:flex;width:100%}
.b[disabled]{opacity:.4;cursor:not-allowed}

/* surfaces */
.c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px}
.mod .hd{display:flex;align-items:center;gap:8px}
.mod h3{font-size:16px}
.prc{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid #F4F4F2}
.prc:last-child{border:0}
.prc b{font-family:Outfit;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.prc>span{min-width:0}
@media(max-width:620px){.prc{flex-direction:column;align-items:flex-start;gap:2px}.prc b{white-space:normal;font-size:15px}}
.g{display:grid;gap:12px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:600px){.g2{grid-template-columns:1fr 1fr}}
@media(min-width:820px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.g3{grid-template-columns:repeat(4,1fr)}}
.tg{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:#F3F3F1;color:#57574F}
.tg.v{background:#F0EDF7;color:var(--violet)}.tg.g{background:var(--okbg);color:var(--ok)}
.chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:#F3F3F1;color:#57574F;display:inline-block}
.chip.v{background:var(--okbg);color:var(--ok)}
.chip.p{background:#F0EDF7;color:var(--violet)}
.chip.s{background:var(--blush);color:var(--rose)}
.chip.n{background:var(--ink);color:#fff}
.mdl{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-weight:700;font-size:12.5px}
.mdl.gold{background:#FDF3D7;color:#8A5A05}.mdl.silver{background:#F0F2F4;color:#3A4450}.mdl.bronze{background:#FBE9E2;color:#8A3D18}

/* board / listing cards */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sr{position:relative;flex:1;min-width:180px}
.sr input{padding-left:32px}
.sr:before{content:"";position:absolute;left:12px;top:14px;width:10px;height:10px;border:1.7px solid #A5A5A2;border-radius:50%}
.tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:14px 0 0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:11px 13px;color:var(--grey);font-size:13.8px;white-space:nowrap;border-bottom:2px solid transparent}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:16px}
.fbar select{width:auto;padding:8px 10px;font-size:13px}
.ck2{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--grey);cursor:pointer;white-space:nowrap}
.ck2 input{width:auto}
.row{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-bottom:8px;position:relative;display:block}
.row:hover{border-color:#D2D2CF}
.row .rt{display:flex;gap:12px;align-items:flex-start}
.lgo{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:Outfit;font-weight:700;font-size:12px;color:#fff}
.row h3{font-size:15.5px;padding-right:36px}
.row .og{font-size:13.5px;color:var(--grey)}
.row .mt{font-size:12.5px;color:var(--grey);margin-top:7px}
.row .ch{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.acts{position:absolute;top:13px;right:13px}
.ib{width:27px;height:27px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;color:#A5A5A2;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.ib:hover{color:var(--ink);border-color:var(--ink)}
.ib.on{color:var(--rose);border-color:#EFDCD3;background:var(--blush)}
.mty{text-align:center;padding:44px 18px;background:#fff;border:1px dashed #DEDEDB;border-radius:var(--r);color:var(--grey)}
.gt{padding:26px 0 4px;text-align:center}
.sc{margin-bottom:18px}
.sc h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:7px;font-weight:600}
.sc p{font-size:14.2px}
.thr{max-height:400px;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px;margin:10px 0}
.ms{padding:9px 12px;border-radius:11px;margin-bottom:7px;font-size:13.8px;max-width:88%;line-height:1.5}
.ms.o{background:var(--ink);color:#fff;margin-left:auto;border-radius:11px 3px 11px 11px}
.ms.i{background:#fff;border:1px solid var(--line);border-radius:3px 11px 11px 11px}
.ms small{display:block;font-size:10.5px;opacity:.62;margin-top:3px}
.bx{border:1px solid var(--line);border-radius:11px;padding:14px;background:#fff}
.bx.v{background:#F5F3FA;border-color:#E5DEF2}
.sks{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sk{font-size:11.5px;padding:3px 8px;border-radius:6px}
.sk.h{background:var(--okbg);color:var(--ok)}.sk.m{background:#FCEBEB;color:#991B1B}
.stat-line{font-weight:600;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:13.8px}
th{background:var(--paper);text-align:left;padding:10px 12px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);font-weight:600}
td{padding:11px 12px;border-top:1px solid #F4F4F2;vertical-align:middle}
.tw{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field-row>*{flex:1;min-width:160px}

/* SipottaHR */
.tb{flex:0 0 auto;padding:11px 13px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;color:var(--grey);font-size:13.8px;white-space:nowrap;font-family:Inter}
.tb.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.pls{display:flex;flex-wrap:wrap;gap:6px}
.pl{padding:7px 12px;border:1px solid var(--line);background:#fff;border-radius:99px;font-size:13px;cursor:pointer;color:var(--grey);font-family:Inter}
.pl.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){.stat{grid-template-columns:repeat(4,1fr)}}
.stat .c{padding:14px}
.stat b{font-family:Outfit;font-size:24px;display:block;letter-spacing:-.03em;line-height:1.1}
tr.sel{background:#FAF9FE}
.cb{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
.st{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;display:inline-block}
.st.n{background:#EDEFFB;color:#3A3F9E}
.st.s{background:var(--okbg);color:var(--ok)}
.st.r{background:#FCEBEB;color:#991B1B}
.st.m{background:var(--blush);color:var(--rose)}
.blk{background:var(--ink);color:#fff;border-radius:11px;padding:11px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.blk .b{padding:6px 10px;font-size:12.5px}
.c.dk{background:var(--ink);color:#fff;border-color:var(--ink)}
.pcard{display:flex;flex-direction:column}
.pcard .b{margin-top:auto}
.lock{position:relative}
.lock:after{content:"Pro";position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--violet);color:#fff;padding:3px 8px;border-radius:99px}
ul.t{list-style:none}
ul.t li{position:relative;padding-left:20px;margin:6px 0;font-size:14.2px}
ul.t li:before{content:"";position:absolute;left:0;top:8px;width:10px;height:5px;border-left:1.8px solid var(--rose);border-bottom:1.8px solid var(--rose);transform:rotate(-45deg)}
ul.t.w li:before{border-color:#fff}

/* forms */
label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin:13px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:transparent}
textarea{min-height:96px;resize:vertical}
.seg{display:flex;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:4px;margin-top:6px}
.seg button{flex:1;border:0;background:none;padding:9px;border-radius:7px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--grey)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.gb{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;cursor:pointer;font-weight:600;font-size:14.5px}
.gb:hover{background:#000}
.gb[disabled]{opacity:.5;cursor:not-allowed}
.dv{display:flex;align-items:center;gap:10px;margin:15px 0;color:#B5B5B2;font-size:12px}
.dv:before,.dv:after{content:"";flex:1;height:1px;background:var(--line)}
/* one-line email entry with the submit button embedded inside the field, e.g. login.php's "continue with email" — a full pill, with a circular submit button inset on the right, matching the Google button's shape */
.ewrap{position:relative}
.ewrap input{padding:14px 54px 14px 20px;margin:0;border-radius:999px}
.ewrap button{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ewrap button:hover{background:#000}
.ewrap button[disabled]{opacity:.4;cursor:not-allowed}
.hint{display:block;font-size:12px;color:var(--grey);margin-top:5px;font-weight:400;text-transform:none;letter-spacing:0}

/* auth card */
.authwrap{max-width:420px;margin:40px auto;padding:0 var(--pad)}
.authcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.authcard h1{font-size:22px}

/* alerts / flash */
.alert{border-radius:11px;padding:12px 14px;font-size:13.8px;margin-bottom:14px}
.alert--error{background:var(--errbg);color:var(--err)}
.alert--success{background:var(--okbg);color:var(--ok)}
.alert ul{margin-left:18px;margin-top:2px}

/* profile */
.mini{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:Outfit;font-weight:700;font-size:16px;color:#fff;background:var(--ink);flex:0 0 auto}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #F4F4F2;font-size:13.8px}
.kv:last-child{border:0}

/* skills tests — one question per screen, same look as sipotta-v6_1.html's quiz runner */
.qw{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qt{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qbar{height:3px;background:#F0F0EE}.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--violet));width:0;transition:width .3s}
.qb{padding:30px 20px;min-height:290px}
@media(min-width:700px){.qb{padding:38px 36px}}
.qb.cen{text-align:center}
.qn{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:9px}
.qx{font-family:Outfit;font-weight:700;font-size:clamp(19px,2.8vw,25px);letter-spacing:-.02em;line-height:1.26;margin-bottom:20px}
.op{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 15px;border:1px solid var(--line);background:#fff;border-radius:11px;margin-bottom:7px;cursor:pointer;font-size:15px}
.op:hover{border-color:var(--ink);background:#FAFAF9}
.op.sel{border-color:var(--violet);background:#F5F3FA}
.op kbd{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:#F3F3F1;font-family:Outfit;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;color:#6D6D6A}
.qf{padding:13px 20px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sring{width:104px;height:104px;margin:0 auto 12px;position:relative}
.sring svg{transform:rotate(-90deg)}
.sring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Outfit;font-size:26px;letter-spacing:-.03em}
.nosel,.nosel *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.nosel img,.nosel svg{pointer-events:none}
.prot{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--grey)}
.prot svg{width:11px;height:11px}

footer{border-top:1px solid var(--line);padding:26px 0;font-size:13px;color:var(--grey);margin-top:32px}

/* responsive tables — same .table--stack pattern used across the other projects:
   below 719px a table's rows become stacked cards, each cell labelled by its
   header via a data-label attribute rather than a column it no longer has room for */
.table-wrap{overflow-x:auto}
@media(max-width:719px){
  .table--stack thead{display:none}
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td{display:block;width:100%}
  .table--stack tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:4px 12px;background:#fff}
  .table--stack td{border-top:1px solid #F4F4F2;padding:9px 0;display:flex;justify-content:space-between;gap:10px;text-align:right}
  .table--stack td:first-child{border-top:0}
  .table--stack td::before{content:attr(data-label);font-weight:600;color:var(--grey);font-size:12px;text-align:left}
}