/* CEM PowerDrive Employee Portal — shared styles */
:root{
  --red:#c62828;--red2:#e53935;--red-d:#8e1b1b;--ink:#15181c;--ink2:#23272b;--steel:#6b7280;
  --bg:#f3f4f6;--card:#ffffff;--text:#15181c;--muted:#5b6370;--line:#e3e6ea;--soft:#f7f8fa;
  --ok:#1b8a4a;--warn:#b7791f;--gold:#d4a017;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  --r:16px;
  --display:"Barlow Condensed",system-ui,sans-serif;--body:"Barlow",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1114;--card:#181b20;--text:#eef0f3;--muted:#9aa3ae;--line:#2a2f36;--soft:#1f2329;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);}}
:root[data-theme="dark"]{--bg:#0f1114;--card:#181b20;--text:#eef0f3;--muted:#9aa3ae;--line:#2a2f36;--soft:#1f2329;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--body);min-height:100vh}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);letter-spacing:.01em;margin:0;line-height:1.1}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(21,24,28,.92);backdrop-filter:blur(10px);color:#fff;border-bottom:3px solid var(--red)}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:60px}
.brandplate{background:#fff;border-radius:10px;padding:4px 8px;display:flex;align-items:center;height:44px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.brandplate img{height:36px;width:auto;display:block}
.topbar .title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.topbar .title small{display:block;font-size:11px;letter-spacing:.18em;color:#f3b4b4;font-weight:600}
.topbar nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.topbar nav a{color:#d6dae0;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600;font-size:14px}
.topbar nav a:hover,.topbar nav a.on{background:rgba(255,255,255,.1);color:#fff}
.who{display:flex;align-items:center;gap:8px;margin-left:8px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--red2),var(--red-d));display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.iconbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:10px;height:36px;min-width:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600}
.iconbtn:hover{background:rgba(255,255,255,.18)}
@media (max-width:820px){.topbar nav a.hide-sm,.topbar .title small{display:none}.topbar .title{font-size:18px}}
@media (max-width:560px){.topbar .title{display:none}.who .nm{display:none}}

/* ---------- cards / buttons ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card h2{font-size:24px;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.card h2 .pill{margin-left:auto}
.btn{border:0;border-radius:10px;padding:10px 16px;font-weight:700;background:var(--red);color:#fff;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:var(--red2);transform:translateY(-1px);box-shadow:0 6px 16px rgba(198,40,40,.35)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft);box-shadow:none}
.btn.dark{background:var(--ink2)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;background:var(--soft);border:1px solid var(--line);color:var(--muted);font-family:var(--body);text-transform:none;letter-spacing:0}
.pill.red{background:rgba(198,40,40,.1);border-color:rgba(198,40,40,.3);color:var(--red)}
.pill.ok{background:rgba(27,138,74,.12);border-color:rgba(27,138,74,.3);color:var(--ok)}
.pill.gold{background:rgba(212,160,23,.15);border-color:rgba(212,160,23,.4);color:#9a7208}
input,select,textarea{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(198,40,40,.4);border-color:var(--red)}
label.f{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:10px 0 4px}

/* ---------- login ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(10,12,15,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.overlay.show{display:flex;animation:fade .25s ease}
.modal{background:var(--card);border-radius:20px;max-width:420px;width:100%;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pop .35s cubic-bezier(.2,1.4,.4,1);max-height:92vh;overflow:auto}
.modal.wide{max-width:760px}
.modal .logoplate{background:#fff;border-radius:12px;padding:8px;text-align:center;margin:-4px -4px 14px;border:1px solid var(--line)}
.modal .logoplate img{max-width:100%;height:64px;object-fit:contain}
.modal h3{font-size:26px;text-transform:uppercase}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pinpad button{height:52px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-size:20px;font-weight:700}
.pinpad button:hover{background:var(--line)}
.pindots{display:flex;gap:10px;justify-content:center;margin:14px 0 4px}
.pindots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);transition:all .15s}
.pindots i.on{background:var(--red);border-color:var(--red);transform:scale(1.15)}
.err{color:var(--red);font-weight:700;font-size:14px;min-height:20px;margin-top:6px}
.shake{animation:shake .4s}

/* ---------- toast ---------- */
#toasts{position:fixed;right:16px;bottom:16px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 32px)}
.toast{background:var(--ink2);color:#fff;border-left:4px solid var(--red);padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:slidein .3s ease;font-weight:600}
.toast.ok{border-left-color:#3ddc84}

/* ---------- gears ---------- */
.gear{transform-box:fill-box;transform-origin:center}
.spin{animation:spin 14s linear infinite}.spin-r{animation:spin 10s linear infinite reverse}.spin-s{animation:spin 22s linear infinite}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,57,53,.6)}70%{box-shadow:0 0 0 12px rgba(229,57,53,0)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
.skel{background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:10px;height:16px;margin:8px 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

footer.foot{padding:30px 0 40px;color:var(--muted);font-size:13px;text-align:center}
@media print{.topbar,.no-print,#toasts{display:none!important}body{background:#fff}}