/* SCEMS 2 admin — styles for the modules added in the 2026-10 enhancement (roles, purchasing, projects, documents…).
   Built on the tokens of admin.css, so light / dark mode and right-to-left work the same way. */

/* form engine: read-only info field */
.fld .info{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:32px}

/* permission matrix */
.matrix th.c,.matrix td.c{text-align:center;width:92px}
.matrix .yes{color:var(--ok);font-weight:700}
.matrix td .m{max-width:520px}

/* five indicator cards (customer overview, site page) */
.grid.g5{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media screen and (max-width:1200px){.grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:700px){.grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
a.chip{display:inline-flex;align-items:center;text-decoration:none}

/* amendments: old → new */
.rt.mini{font-size:12px;margin-top:6px;width:auto}
.rt.mini td{padding:2px 8px}
.rt.mini td.old{color:var(--muted);text-decoration:line-through}

/* PPM checklist (report form, template page, print) */
.custom{display:block}
.clhead{margin:4px 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table.cl{width:100%;border-collapse:collapse}
table.cl td,table.cl th{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;text-align:start}
table.cl tr.clsec td{background:var(--hover);font-weight:700;font-size:12.5px}
table.cl tr.oor td{background:rgba(232,106,58,.10)}
.pills.sm label{padding:4px 10px;font-size:12.5px}
.clm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.clm input[type=number]{width:110px}
.clnote{width:100%;margin-bottom:4px}
.clph{display:flex;flex-direction:column;gap:4px;font-size:12px}
.qrrow{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.qrimg{background:#fff;border-radius:6px;display:block}
/* stickers (device serial, PPM, stock item): 75 x 49.8 mm, the same layout as the Zebra label — one label per page, nothing cut */
.dlabels{display:flex;flex-direction:column;align-items:center;gap:8px}
.dlabel{width:75mm;height:49.8mm;box-sizing:border-box;border:.5mm solid #111;border-radius:1.5mm;padding:2mm 2.5mm;background:#fff;color:#111;display:grid;grid-template-columns:24mm minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:1.2mm 2.5mm;font:7.5pt/1.2 Arial,sans-serif;direction:ltr;text-align:left;overflow:hidden;break-inside:avoid}
.dlabel .qrimg{width:24mm;height:24mm;border-radius:0}
.dl-t{min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:.5mm}
.dl-t>div{overflow-wrap:anywhere}
.dl-h{font-size:6.5pt;letter-spacing:.05em;font-weight:700}
.dl-n{font-size:13pt;font-weight:800;line-height:1.1}
.dl-n.sm{font-size:10.5pt}
.dl-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-f{grid-column:1/-1;border-top:.3mm solid #111;padding-top:.8mm;font-size:6pt;line-height:1.3}
@media print{
  body.labels .view>:not(.dlabels){display:none!important}
  body.labels .dlabels{display:block}
  body.labels .dlabel{margin:0;border-radius:0;width:74.6mm;height:49.4mm}   /* a hair under the label so rounding never spills onto a second page */
  body.labels .dlabel+.dlabel{break-before:page}
}

/* projects: lifecycle stepper, progress bars, gates */
.stepper{display:flex;gap:4px;list-style:none;margin:0 0 14px;padding:0;overflow-x:auto}
.stepper li{flex:1;min-width:92px;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;background:var(--hover);color:var(--muted);font-size:12.5px;white-space:nowrap}
.stepper li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface);font-weight:700;font-size:11px}
.stepper li.done{color:var(--text)}
.stepper li.done span{background:#2A7D7B;color:#fff}
.stepper li.on{background:#1C2F5E;color:#fff;font-weight:700}
.stepper li.on span{background:#F59211;color:#fff}
.pbar{display:inline-block;width:90px;height:7px;border-radius:5px;background:var(--hover);overflow:hidden;vertical-align:middle;margin-inline-end:6px}
.pbar span{display:block;height:100%;background:#2A7D7B}
.kpi .pbar{width:120px;height:9px}
ul.gate{margin:6px 0 0;padding-inline-start:18px;font-size:12.5px}
ul.gate li{margin:2px 0;color:var(--muted)}
ul.gate li.payment,ul.gate li.commercial{color:var(--bad)}
ul.gate li.doc{color:var(--info)}
.acts-col{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.acts-row{display:flex;gap:8px;flex-wrap:wrap}

/* purchasing: shipment tracker, quotation comparison, rating */
ol.ship{display:flex;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}
ol.ship li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding:4px 8px;border-radius:14px;background:var(--hover)}
ol.ship li span{width:8px;height:8px;border-radius:50%;background:#A8B2C4}
ol.ship li.done span{background:#2A7D7B}
ol.ship li.on{background:#1C2F5E;color:#fff;font-weight:700}
ol.ship li.on span{background:#F59211}
ol.ship.sm{gap:3px}
ol.ship.sm li{padding:0;background:none}
ol.ship.sm li span{width:10px;height:10px}
table.cmp{width:100%;border-collapse:collapse}
table.cmp th,table.cmp td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top}
table.cmp th.sel{background:rgba(42,125,123,.10)}
table.cmp td.best{color:var(--ok);font-weight:700}
table.cmp tr.sum td{font-weight:700;background:var(--hover)}
.stars{color:#A87A00;letter-spacing:1px}
[data-theme="dark"] .stars{color:#F2C14E}

/* grouped lists (invoices by customer, payment proofs) */
details.grp{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
details.grp>summary{display:grid;grid-template-columns:minmax(180px,1.4fr) 1fr repeat(4,minmax(110px,auto));gap:10px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary:hover{background:var(--hover)}
details.grp[open]>summary{border-bottom:1px solid var(--border)}
.gnum{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
@media screen and (max-width:760px){details.grp>summary{grid-template-columns:1fr 1fr}.gnum{align-items:flex-start}}
.old{color:var(--muted);text-decoration:line-through}

/* printed documents: one English footer on every page (CSS page margin boxes) — the company details (filled from the
   settings by SCEMS_THEME.pageFooter) and "Page X of Y". The in-page footer of .paper is only the screen preview. */
/* Revision 4: locked A4 margins (content 15 mm left / right, 35 mm → 260 mm). The header and footer are added by the stationery
   CSS (/stationery/page.css, SCEMS_THEME.stationery); this fallback keeps only the page number. */
@page{size:A4;margin:35mm 15mm 37mm 15mm;
  @bottom-right{content:"Page " counter(page) " of " counter(pages);font:7.5pt Arial,sans-serif;color:#1C2F5E;vertical-align:middle}}
@page sticker{size:75mm 49.8mm;margin:0;@top-left{content:none}@top-center{content:none}@top-right{content:none}@bottom-left{content:none}@bottom-center{content:none}@bottom-right{content:none}}
@media print{
  body.labels .dlabel{page:sticker}
  .drawer,.ai-panel,.scrim,.modal,.toast,.results,.ddm{display:none!important}
  .paper .foot,.paper .lh{display:none}
  .paper th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .paper tr,.paper .sign,.paper .g2p>div,.paper .terms>*,.paper .boxes{break-inside:avoid}
  .paper h2,.paper h3,.paper .terms .lbl{break-after:avoid}
  .paper thead{display:table-header-group}
}
/* document typography shared by every printed document */
.paper thead th{border-bottom:1.5px solid #1C2F5E}
.paper h3{color:#1C2F5E;font-size:14px;margin:18px 0 6px}
.paper .pre{unicode-bidi:plaintext}
.paper .num,.paper .nw{white-space:nowrap}
.paper td.wrap{white-space:normal}
.paper .sec{font-weight:700;color:#1C2F5E;background:#F7F9FC;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper .boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.paper .boxes>div{border:1px solid #D9DEE8;border-radius:6px;padding:6px 8px;min-height:44px;font-size:11.5px;color:#5A6478}
.paper .note{font-size:11.5px;color:#5A6478;margin-top:8px}

/* template editor */
.tpl-wrap{display:grid;grid-template-columns:minmax(320px,430px) 1fr;gap:16px;align-items:start}
.tpl-form .fsec{margin-bottom:10px}
.tpl-form textarea{width:100%}
.tpl-preview{position:sticky;top:70px;background:#5A6478;border-radius:12px;padding:14px;height:calc(100vh - 110px)}
.tpl-preview iframe{width:100%;height:100%;border:0;background:#fff;border-radius:4px}
.tpl-row{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:6px;align-items:center;padding:4px 0;border-bottom:1px solid var(--border)}
.tpl-row input[type=text]{min-width:0}
.tpl-row .mv{display:flex;gap:2px}
@media screen and (max-width:1000px){.tpl-wrap{grid-template-columns:1fr}.tpl-preview{position:static;height:70vh}}

/* the logo blends into the design: the white-letter version on dark surfaces, the navy one on light surfaces */
.lg-night{display:none!important}
[data-theme="dark"] .lg-day{display:none!important}
[data-theme="dark"] .lg-night{display:block!important}

/* financial summary */
.fin td.num{white-space:nowrap}
.fin tr.sum td{background:var(--hover)}
.fin tr.neg td{background:var(--bad-bg);color:var(--bad)}

/* sidebar bottom: larger sign-out target with a visible focus and a tooltip; the name opens "change password" */
.side .foot .out{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;flex:none}
.side .foot .out:hover{background:rgba(245,146,17,.22);border-color:var(--orange)}
.side .foot .out:focus-visible,.side .foot .who:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.side .foot .who{cursor:pointer;border-radius:8px;padding:2px 4px}
.side .foot .who:hover{background:rgba(255,255,255,.06)}

/* home: chart, three-figure summary, action buttons in rows */
:root{--navy-bar:#1C2F5E;--teal-bar:#2A7D7B}
:root[data-theme="dark"]{--navy-bar:#4A8FD4;--teal-bar:#7FD6D2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--navy-bar:#4A8FD4;--teal-bar:#7FD6D2}}
.chart{width:100%;height:auto;display:block;margin-top:8px}
.chart .grid-l{stroke:var(--border);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:middle}
.kv3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kv3>div{background:var(--hover);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.kv3 span{font-size:12px;color:var(--muted)}
.kv3 b{font-size:20px;color:var(--head)}
.acts-row{display:flex;gap:6px;flex-wrap:wrap}
.card .ch .chips{margin:0}
.grid.top-align{align-items:start}

/* every field follows the theme (the browser default is a white box, invisible with light text in dark mode) */
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),
[data-theme="dark"] select,[data-theme="dark"] textarea{background-color:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--faint)}
[data-theme="dark"] option{background:#162040;color:#E8EDF5}
/* a document preview is printed paper: always dark text on white, whatever the theme */
.paper{--head:#1C2F5E;--text:#1d2433;--muted:#5A6478;--faint:#8A94A8;--border:#D9DEE8;--hover:#EEF1F7;--surface:#fff;
  --ok:#1F6361;--warn:#7A5200;--bad:#A83E17;--info:#245F9E;--ok-bg:rgba(42,125,123,.12);--warn-bg:rgba(250,183,51,.22);--bad-bg:rgba(232,106,58,.14);--info-bg:rgba(74,143,212,.14);color:var(--text)}
.paper a{color:#1C2F5E}

/* ---- sign-in (2026-10-22): moving background, what SCEMS gives the team, livelier form — as on the customer portal ---- */
.login{position:relative;overflow:hidden;isolation:isolate;padding:24px 16px}
.login .lbg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.login .lbg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%)}
.login .orb{position:absolute;border-radius:50%;filter:blur(70px);animation:lg-orb 18s ease-in-out infinite}
.login .o1{width:420px;height:420px;background:#F59211;top:-140px;inset-inline-end:-90px;opacity:.2}
.login .o2{width:540px;height:540px;background:#4A8FD4;bottom:-220px;inset-inline-start:-170px;opacity:.28;animation-duration:23s;animation-delay:-7s}
.login .o3{width:300px;height:300px;background:#2A7D7B;top:38%;left:44%;opacity:.2;animation-duration:27s;animation-delay:-13s}
@keyframes lg-orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,26px) scale(.95)}}
.login .pulse{position:absolute;left:0;right:0;bottom:7%;width:100%;height:120px;opacity:.45}
.login .pulse path{fill:none;stroke:#F59211;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:lg-pulse 6s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(245,146,17,.75))}
@keyframes lg-pulse{0%{stroke-dashoffset:1000;opacity:0}8%{opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.llayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:center;width:min(1040px,100%)}
.lhero{color:#fff;animation:lg-rise .8s cubic-bezier(.2,.8,.2,1) both}
.lhero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:rgba(245,146,17,.14);border:1px solid rgba(245,146,17,.32);color:#FAB733;font-size:12.5px;font-weight:600}
.lhero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#F59211;animation:lg-ping 2s infinite}
@keyframes lg-ping{0%{box-shadow:0 0 0 0 rgba(245,146,17,.6)}70%{box-shadow:0 0 0 10px rgba(245,146,17,0)}100%{box-shadow:0 0 0 0 rgba(245,146,17,0)}}
.lhero h2{font-size:clamp(26px,3vw,36px);line-height:1.3;margin:16px 0 10px;color:#fff;font-weight:700}
.lhero h2 em{font-style:normal;white-space:nowrap;background:linear-gradient(90deg,#F59211,#FAB733,#F59211);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lg-text 6s linear infinite}
@keyframes lg-text{from{background-position:0 0}to{background-position:200% 0}}
.lhero .lead{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.75;margin:0 0 22px;max-width:50ch}
.lhero .hero-feats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lhero .hero-feats li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  animation:lg-rise .6s cubic-bezier(.2,.8,.2,1) both,lg-feat 16s ease-in-out infinite;animation-delay:calc(.3s + var(--i) * .12s),calc(1.4s + var(--i) * 4s)}
@keyframes lg-feat{0%,24%,100%{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);box-shadow:none}4%,20%{background:rgba(245,146,17,.11);border-color:rgba(245,146,17,.5);box-shadow:0 12px 32px rgba(0,0,0,.28)}}
.lhero .ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(74,143,212,.18);color:#9CC8F2;animation:lg-ico 16s ease-in-out infinite;animation-delay:calc(1.4s + var(--i) * 4s)}
@keyframes lg-ico{0%,24%,100%{background:rgba(74,143,212,.18);color:#9CC8F2}4%,20%{background:#F59211;color:#0D1A3A}}
.lhero .ico svg{width:20px;height:20px}
.lhero b{display:block;color:#fff;font-size:14.5px}
.lhero small{display:block;color:rgba(255,255,255,.72);font-size:12.8px;line-height:1.65;margin-top:2px}
.lhero .secure{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:rgba(255,255,255,.66);font-size:12.8px}
.lhero .secure svg{width:16px;height:16px;color:#6FD3C9;flex:none}
@keyframes lg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.login .card{position:relative;width:100%;padding:28px;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:lg-card .7s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes lg-card{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.login .card::before{content:"";position:absolute;top:0;inset-inline:28px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,#F59211,#FAB733,transparent);background-size:200% 100%;animation:lg-line 4s linear infinite}
@keyframes lg-line{from{background-position:200% 0}to{background-position:-200% 0}}
.login .ltop{display:flex;justify-content:flex-end}
.login .lbrand{position:relative;margin:2px 0 12px}
.login .lbrand::before{content:"";position:absolute;inset:-14px 22%;border-radius:50%;background:radial-gradient(circle,rgba(245,146,17,.32),transparent 65%);filter:blur(10px);animation:lg-glow 4s ease-in-out infinite;z-index:0}
.login .lbrand img{position:relative;z-index:1;margin:0 auto}
@keyframes lg-glow{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.85;transform:scale(1.06)}}
.login .ltitle{text-align:center;margin:0 0 4px;font-size:21px}
.login .lsub{text-align:center;color:var(--muted);font-size:12.5px;margin:0 0 16px}
.login .lfoot{margin:14px 0 0;text-align:center}
.login .card>*:not(.ltop){animation:lg-rise .5s cubic-bezier(.2,.8,.2,1) both}
.login .lbrand{animation-delay:.2s!important}.login .ltitle{animation-delay:.26s!important}.login .lsub{animation-delay:.3s!important}
.login .card>.fld:nth-of-type(1){animation-delay:.36s}.login .card>.fld:nth-of-type(2){animation-delay:.42s}
.login #lBtn{animation-delay:.48s!important}.login .lfoot{animation-delay:.56s!important}
.login .fld input{transition:border-color .2s,box-shadow .2s}
#login .fld input:focus{border-color:#F59211;box-shadow:0 0 0 4px rgba(245,146,17,.22)}
.login #lBtn{position:relative;overflow:hidden;height:42px;transition:transform .2s,box-shadow .2s}
.login #lBtn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px rgba(28,47,94,.35)}
.login #lBtn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:lg-shine 3.6s ease-in-out 1.4s infinite;pointer-events:none}
@keyframes lg-shine{0%{left:-60%}35%,100%{left:130%}}
.login form.busy #lBtn{color:transparent!important}
.login form.busy #lBtn::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--btnText);border-top-color:transparent;animation:lg-spin .7s linear infinite}
@keyframes lg-spin{to{transform:rotate(360deg)}}
.login form.shake{animation:lg-shake .45s ease-in-out}
@keyframes lg-shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.login .pw-wrap{position:relative;display:block}
.login .pw-wrap input{padding-inline-end:44px}
.login .pw-eye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.login .pw-eye svg{width:18px;height:18px}
.login .pw-eye:hover,.login .pw-eye.on{color:#F59211;background:rgba(245,146,17,.1)}
.login .pw-eye.on svg path{stroke-dasharray:3 2}
[data-theme="dark"] .login .card{background:rgba(22,32,64,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.08)}
@media screen and (max-width:960px){
  .llayout{grid-template-columns:1fr;gap:22px;justify-items:center}
  .login .card{max-width:420px}
  .lhero{text-align:center;max-width:560px}
  .lhero .hero-feats,.lhero .secure{display:none}
  .lhero h2{font-size:24px;margin:12px 0 6px}
  .lhero .lead{margin:0 auto;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .login *,.login *::before,.login *::after{animation:none!important;transition:none!important}
  .login .pulse path{stroke-dashoffset:0}
}