/* Kareemiya Technologies & BPO theme -- loaded after style.css.
   Colours and font taken from www.kareemiya.com: deep navy, royal blue,
   soft sky-blue accents on a warm cream page. */
:root{
  --navy:#212C3E; --navy2:#2C3E63; --navy-deep:#161E2C; --blue:#3A63A8;
  --purple:#4B7BD0; --purple-dark:#2C3E63;
  --gold:#9FBDEA; --gold-light:#C7DBFA; --gold-dark:#3A63A8;
  --bg:#FFFEF9; --card:#ffffff; --border:#DDE5F2; --text:#1D2433;
  --neon-blue:#4B7BD0; --neon-blue-light:#C7DBFA; --neon-green:#9FBDEA; --neon-green-dark:#3A63A8;
  --heading:var(--navy); --subheading:var(--navy2); --muted:#5E6B80; --gray:#5E6B80;
}
body.dark-mode{
  --bg:#111723; --card:#18202f; --border:#2A3548; --text:#E6ECF7;
  --heading:#F2F6FD; --subheading:#C7DBFA; --muted:#9AA8BF;
}
body, button, input, select, textarea{ font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }

/* Login-page wordmark (mark + name) */
.krm-wordmark{display:flex;align-items:center;gap:14px;justify-content:center;animation:loginFadeUp .5s ease both;}
.krm-wordmark img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));}
.krm-wordmark-name{font-weight:800;font-size:26px;letter-spacing:.14em;color:#fff;line-height:1.05;}
.krm-wordmark-sub{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#C7DBFA;margin-top:4px;}
@media(max-width:760px){ .krm-wordmark img{width:48px;height:48px;} .krm-wordmark-name{font-size:20px;} }

/* Sidebar brand (mark + name) */
.krm-side-brand{display:flex;align-items:center;gap:10px;padding:4px 4px 14px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12);}
.krm-side-brand img{width:40px;height:40px;object-fit:contain;flex:none;}
.krm-side-name{font-weight:800;letter-spacing:.12em;color:#fff;font-size:15px;line-height:1.1;}
.krm-side-sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9FBDEA;margin-top:3px;}

/* Accent chips that used gold text on navy read better in white on the blue accent */
.month-nav-chip{color:#fff;background:var(--blue);}
.pay-avatar{border-color:var(--gold);}

/* Demo helper panel (demo build only) */
.demo-panel{position:fixed;right:16px;bottom:16px;z-index:9000;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 30px rgba(22,30,44,.22);padding:12px 14px;width:290px;font-size:13px;color:var(--text);}
.demo-panel.min{width:auto;padding:8px 12px;}
.demo-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--heading);margin-bottom:8px;}
.demo-panel.min .demo-panel-head{margin-bottom:0;}
.demo-badge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--blue);color:#fff;border-radius:8px;padding:2px 7px;}
.demo-roles{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.demo-roles button{border:1px solid var(--border);background:var(--bg);color:var(--heading);border-radius:9px;padding:7px 8px;font-size:12px;font-weight:600;text-align:left;cursor:pointer;line-height:1.25;}
.demo-roles button:hover{border-color:var(--blue);background:rgba(58,99,168,.08);}
.demo-roles button small{display:block;font-weight:500;color:var(--muted);font-size:10.5px;}
.demo-links{display:flex;gap:10px;margin-top:8px;font-size:11.5px;}
.demo-links a{color:var(--blue);cursor:pointer;text-decoration:underline;}
.demo-x{border:none;background:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:0 2px;}
@media(max-width:760px){ .demo-panel{left:10px;right:10px;width:auto;bottom:10px;} }