/* Sign-in page. Kept in a file, not inline: the CSP allows style-src 'self'
   only, so an inline <style> block is dropped and the page renders bare. */

.signin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--espresso)}
.card{background:var(--cream);border-radius:10px;max-width:520px;width:100%;padding:34px 32px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.card .brand{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px}
.card h1{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:500;color:var(--espresso);line-height:1.05;margin-bottom:6px}
.card h1 em{font-style:italic;color:var(--espresso-light);display:block;font-size:21px;margin-top:3px}
.card p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:14px}
.card .go{display:inline-flex;align-items:center;gap:8px;background:var(--espresso);color:var(--cream);
  border:none;border-radius:6px;padding:13px 22px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;margin-top:22px;transition:.15s}
.card .go:hover{background:var(--espresso-light)}
.steps{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.steps li{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:8px;margin-left:18px}
.steps strong{color:var(--espresso)}
.note{margin-top:18px;background:var(--espresso-soft);border-left:3px solid var(--taupe);
  border-radius:4px;padding:11px 13px;font-size:12px;color:var(--ink);line-height:1.6}

/* ---- the two-step form (Odoo account, then employee + PIN) ---- */
.sform{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.sform[hidden]{display:none}
.sfld{display:flex;flex-direction:column;gap:5px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.sfld input{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:11px 12px;outline:none;transition:.15s}
.sfld input:focus{border-color:var(--espresso);box-shadow:0 0 0 3px var(--espresso-soft)}
.sform .go{margin-top:6px;cursor:pointer;align-self:flex-start}
.sform .go[disabled]{opacity:.6;cursor:wait}
.sform .sub{margin-top:0}
.serr{background:#fbeae7;border-left:3px solid #b3402e;color:#7a2a1d;border-radius:4px;padding:10px 12px;font-size:12.5px;line-height:1.5}
.serr[hidden]{display:none}
.emps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;max-height:260px;overflow:auto;padding:2px}
.emp{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:var(--ink)}
.emp:has(input:checked){border-color:var(--espresso);box-shadow:0 0 0 2px var(--espresso-soft)}
.emp input{margin:0}
.emp .nm{flex:1}
.emp .nopin{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.sactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.sactions .btn{font-size:12px}
.card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--espresso-soft);padding:1px 5px;border-radius:3px}
/* `hidden` has to win over the flex display, or the PIN box shows before a name is picked. */
.sfld[hidden],.sactions [hidden]{display:none}
/* The ghost button sits on cream here, not on the dark control bar. */
.sactions .btn.ghost{color:var(--espresso);border:1px solid var(--line);background:transparent;cursor:pointer}
.sactions .btn.ghost:hover{background:var(--espresso-soft)}
/* No sidebar on these pages, so none of the room app.css keeps for it. */
body:has(> .signin){padding-left:0}
.card .btn.ghost{color:var(--espresso);border:1px solid var(--line);background:transparent;cursor:pointer}
.card .btn.ghost:hover{background:var(--espresso-soft)}