/* =====================================================================
   MONEDO THEME  (palette sampled from the Monedo logo — change ONLY this block to re-brand)
   Sampled from the logo: bright blue #2250E8, light blue #5B84EE, deep navy. Amber is only used for
   badges and warnings (the logo has no warm colour).
   ===================================================================== */
:root{
  --m-navy:   #0A1560;   /* sidebar, headings            */
  --m-blue:   #2250E8;   /* primary actions, links       */
  --m-teal:   #5B84EE;   /* secondary accent             */
  --m-amber:  #F5A623;   /* highlights, badges           */
  --m-mist:   #F2F5FD;   /* page background              */
  --m-ink:    #0F1C3F;   /* body text                    */

  --bg:var(--m-mist); --panel:#fff; --ink:var(--m-ink); --ink2:#44566C; --muted:#7A8BA0; --line:#E2E9F2; --line2:#EEF3F9;
  --brand:var(--m-blue); --brand-ink:#fff; --brand-soft:color-mix(in srgb, var(--m-blue) 10%, white);
  --side:var(--m-navy); --side-ink:#BCC6F0; --side-hi:#fff;
  --gold:var(--m-amber); --gold-soft:#FFF4DD; --green:#128A5B; --green-soft:#E1F4EB; --red:#C0392B; --red-soft:#FBE6E3;
  --blue:var(--m-blue); --blue-soft:#E6EEFA; --r:14px;
  --shadow:0 1px 2px rgba(10,37,64,.05),0 8px 24px rgba(10,37,64,.06);
}
body{background:var(--bg);font-family:"Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{color:var(--m-navy)}

/* ---- sidebar ---- */
.side{background:linear-gradient(180deg,#0A1560 0%,#0E1F7A 100%)}
.brandbox{border-bottom:1px solid rgba(255,255,255,.08);padding:22px 18px 18px}
.brandmark{background:#fff;border-radius:11px;width:38px;height:38px;font-family:"Segoe UI",system-ui,sans-serif;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.brandname{font-size:16px;letter-spacing:.01em}
.brandsub{color:#8F9FDD}
.nav{padding:12px 12px}
.nav a{padding:10px 12px;border-radius:10px;margin:2px 0;font-weight:500;position:relative;transition:background .15s}
.nav a.on{background:rgba(255,255,255,.1);box-shadow:inset 3px 0 0 var(--m-amber)}
.nav .badge{background:var(--m-amber);color:#4A2F00}
.sidefoot{border-top:1px solid rgba(255,255,255,.08);padding:14px}
.usercard{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.usercard .un{color:#fff;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.usercard .ur{color:#8F9FDD;font-size:11.5px}
.av.sm{width:34px;height:34px;font-size:12px;flex:none}
.sidebtns{display:flex;gap:6px;margin-top:10px}
.sidebtns .btn{flex:1;margin-top:0;width:auto;justify-content:center}
.btn.onside{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.btn.onside:hover{background:rgba(255,255,255,.16)}

/* ---- header / content ---- */
.top{padding:24px 32px 8px}
.top h1{font-size:24px;font-weight:700;letter-spacing:-.015em}
.top .sub{color:var(--muted)}
.content{padding:14px 32px 48px}
.banner{margin:12px 32px 0;border-radius:12px;background:var(--gold-soft);border-color:#F3DDA8}
.banner.red{background:var(--red-soft);border-color:#F0C4BE}

/* ---- cards ---- */
.card{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
.card .hd{border-bottom:1px solid var(--line2)}
.card .hd h3{font-size:14.5px;font-weight:700;color:var(--m-navy)}
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--m-blue),var(--m-teal))}
.grid.g5>.kpi:nth-child(3)::before,.grid.g3>.kpi:nth-child(3)::before{background:linear-gradient(180deg,var(--m-amber),#F08A24)}
.kpi .l{text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600;color:var(--muted)}
.kpi .v{color:var(--m-navy);font-weight:700}

/* ---- buttons ---- */
.btn{border-radius:10px;border-color:var(--line);font-weight:600;transition:all .15s}
.btn:hover{border-color:#C8D5E6;background:#F8FAFD}
.btn.primary{background:linear-gradient(180deg,#3C69EE,var(--m-blue));border-color:var(--m-blue);box-shadow:0 2px 6px color-mix(in srgb,var(--m-blue) 35%,transparent)}
.btn.primary:hover{filter:none;background:linear-gradient(180deg,#4673F0,#1A41C4)}
.btn.ghost:hover{background:rgba(10,37,64,.05)}
.btn.danger{color:var(--red)}
.btn:focus-visible,.inp:focus-visible,.nav a:focus-visible{outline:3px solid color-mix(in srgb,var(--m-blue) 40%,transparent);outline-offset:1px}

/* ---- inputs / tables / pills ---- */
.inp{border-radius:10px;border:1px solid #D3DEEC;background:#fff}
.inp:focus{border-color:var(--m-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-blue) 18%,transparent);outline:none}
table.t th{text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:var(--muted);background:#F8FAFD}
table.t tr:hover td{background:#F8FBFF}
.pill{border-radius:999px;font-weight:600}
.pill.blue{background:var(--blue-soft);color:#1A4B97}
.tabs button.on{color:var(--m-blue);border-bottom-color:var(--m-blue)}
.note{background:#F6F9FD;border-color:var(--line)}
.sync{font-size:12px}
.dot.ok{background:#3FD08F}

/* ---- non-HR roles: hide controls the server would refuse anyway ---- */
body.nonhr [data-act="addEmployee"],body.nonhr [data-act="addJoiner"],body.nonhr [data-act="editEmp"],body.nonhr [data-act="confirmEmp"],
body.nonhr [data-act="deleteEmp"],body.nonhr [data-act="tplEmployees"],body.nonhr [data-act="exportEmployees"],body.nonhr [data-act="uploadEmployees"],
body.nonhr [data-act="onbList"],body.nonhr [data-act="sendSetup"],body.nonhr [data-act="recordExit"],body.nonhr [data-act="exitList"],
body.nonhr [data-act="tplLeaves"],body.nonhr [data-act="uploadLeaves"],body.nonhr [data-act="tplOpening"],body.nonhr [data-act="uploadOpening"],
body.nonhr [data-act="carryForward"],body.nonhr [data-act="newCycle"],body.nonhr [data-act="editCycle"],body.nonhr [data-act="apprAdd"],
body.nonhr [data-act="apprRemove"],body.nonhr [data-act="apprExport"],body.nonhr [data-act="apprUpload"],body.nonhr [data-act="apprApply"],
body.nonhr [data-act="apprLetters"]{display:none!important}

/* ---- sign-in ---- */
.login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh;background:#fff}
.login-art{background:radial-gradient(1200px 600px at 10% -10%,#2250E8 0%,transparent 55%),radial-gradient(900px 500px at 110% 110%,#5B84EE 0%,transparent 50%),linear-gradient(160deg,#0A1560,#101F8A);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px;position:relative;overflow:hidden}
.login-art::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:60px solid rgba(245,166,35,.14)}
.art-inner{position:relative;z-index:1;max-width:460px;margin-top:6vh}
.art-logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;letter-spacing:.01em;margin-bottom:56px}
.art-logo img{height:46px;width:46px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.lf-logo{display:block;height:44px;width:auto;margin:0 0 24px}
.login-art h1{color:#fff;font-size:38px;line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}
.login-art p{color:#C9D3F5;font-size:16px;line-height:1.55;margin:0 0 26px}
.art-points{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:#DCE7F6}
.art-points li{padding-left:28px;position:relative}
.art-points li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--m-amber);box-shadow:inset 0 0 0 4px #101F8A}
.art-foot{position:relative;z-index:1;color:#8F9FDD;font-size:12.5px}
.login-form{display:grid;place-items:center;padding:32px;background:var(--m-mist)}
.lf-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px;box-shadow:var(--shadow)}
.lf-card h2{margin:0 0 4px;font-size:24px;letter-spacing:-.01em}
.lf-sub{margin:0 0 22px;color:var(--muted)}
.lf-card label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px;color:var(--ink2)}
.lf-card .inp{width:100%;padding:11px 13px;font-size:15px}
.lf-btn{width:100%;justify-content:center;margin-top:20px;padding:12px;font-size:15px}
.lf-err{color:var(--red);font-size:13px;min-height:18px;margin-top:10px}
.lf-hint{font-size:12px;color:var(--muted);margin-top:6px}
.lf-demo{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}
.lf-demo-t{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:10px}
.lf-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip2{border:1px solid #CFDBEA;background:#F6F9FD;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px;color:var(--m-navy);cursor:pointer}
.chip2:hover{background:var(--m-blue);color:#fff;border-color:var(--m-blue)}
@media (max-width:900px){.login{grid-template-columns:1fr}.login-art{display:none}}
@media (max-width:760px){.top,.content{padding-left:16px;padding-right:16px}.banner{margin-left:16px;margin-right:16px}}
@media print{.side,.actions,.toasts{display:none!important}}