/* =========================
   HR JTek Portal — Reference Style
   Palette:
   #111827 #374151 #6B7280 #c8c8c8 #2563EB #3B82F6 #EBF3FE
   ========================= */
:root{
  --ink:#111827;
  --slate700:#374151;
  --sub:#6B7280;
  --muted:#c8c8c8;
  --brand:#2563EB;
  --brand-400:#3B82F6;
  --brand-bg:#EBF3FE;
  --line:#e5e7eb;
  --card:#fff;
  --bg:#f7f9fc;
  --radius:16px;
}

/* Make the whole portal full-width and neutralize theme wrappers */
body.hrjtek-portal{ background:var(--bg); color:var(--ink);  --hrjtek-footer-gap: 16px; /* try 16–20px */}
body.hrjtek-portal .site,
body.hrjtek-portal .site-content,
body.hrjtek-portal #primary,
body.hrjtek-portal main,
body.hrjtek-portal .entry-content,
body.hrjtek-portal .container,
body.hrjtek-portal .wrap,
body.hrjtek-portal [class*="container"],
body.hrjtek-portal .elementor-section-wrap,
body.hrjtek-portal .elementor-container{
  max-width:none !important; width:100% !important; margin:0 !important;
   padding-left:0px !important;
   

}
/* Hide theme header on HR portal pages */
body.hrjtek-portal .entry-header{ display:none !important; margin:0 !important; }
/* Extra safety for Astra .page selector */
body.hrjtek-portal .page .entry-header{ margin:0 !important; }

/* ====== Shell ====== */
.hrjtek-shell{
  display:grid; grid-template-columns:280px 1fr; gap:24px;
  width:100%; padding:0 16px 16px;
  margin-top: 0px !important;
}
.hrjtek-aside{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  position:sticky; top:0; /*height:calc(100dvh - 16px); */ overflow:auto;
}
.hrjtek-brand{ display:flex; gap:12px; align-items:center; padding:6px 8px 12px; }
.hrjtek-logo img{ height:46px; width:auto; display:block; }
.hrjtek-nav{ display:flex; flex-direction:column; gap:10px; }
.hrjtek-nav-item{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px;
  color:var(--ink); text-decoration:none; background:#fff; border:1px solid var(--line); }
.hrjtek-nav-item .dashicons:before{ color:var(--slate700); }
.hrjtek-nav-item.is-active{ background:#eef3ff; border-color:#dbe3ff; color:var(--brand); font-weight:600; }
.hrjtek-nav-title{ font-size:12px; color:var(--sub); margin:10px 12px 6px; }

.hrjtek-main{ min-height:70vh; }

/* ====== Topbar ====== */
.hrjtek-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 12px;
  padding:8px 8px 0;
}

.hrjtek-breadcrumb{ display:flex; align-items:center; gap:10px; }
.hrjtek-dot{ width:10px; height:10px; border-radius:50%; background:#a78bfa; }

/* Search */
.hrjtek-search{ flex: 0 1 520px; display:flex; gap:8px; }
.hrjtek-search input{
  flex:1; height:40px; border-radius:12px; border:1px solid var(--line); background:#fff; padding:0 12px;
}
.hrjtek-chip{ height:40px; padding:0 12px; display:inline-flex; align-items:center; border-radius:12px; border:1px solid var(--line); background:#fff; gap:8px; font-weight:600; }
.hrjtek-actions{ display:flex; gap:8px; align-items:center; }
.hrjtek-iconbtn{ width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; }
.hrjtek-profile{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:6px 10px; }
.hrjtek-profile .ava{ width:28px; height:28px; border-radius:50%; background:#dbe3ff; display:inline-block; }

/* ====== Dashboard ====== */
.hrjtek-grid{ display:grid;   grid-template-columns: repeat(3, 1fr); /* 5 across */ gap:14px; }
.hrjtek-card{ min-width: 0;background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }
.hrjtek-card h4{ margin:0 0 6px; font-size:14px; color:var(--sub); }


@media (min-width: 1100px){
  body.hrjtek-portal .hrjtek-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 14px;
  }
}
/* Keep it responsive below desktop */
/* Responsive fallbacks */
@media (max-width: 1440px){
  .hrjtek-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1200px){
  .hrjtek-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  .hrjtek-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .hrjtek-grid{ grid-template-columns: 1fr; }
}
/* KPI big cards */
.hrjtek-kpi-big{ display:grid; grid-template-columns:1fr 120px; gap:8px; align-items:center; }
.hrjtek-kpi-total{ font-size:28px; font-weight:800; }
.hrjtek-kpi-meta{ display:flex; justify-content:space-between; color:var(--sub); font-size:12px; }

.hrjtek-spark{ height:48px; }
.hrjtek-spark polyline{ fill:none; stroke:#22c55e; stroke-width:3; }
.hrjtek-spark.red polyline{ stroke:#ef4444; }

/* Compact KPI card style for Onboarding */
.hrjtek-kpi-compact .kpi-h{
  display:flex; align-items:center; justify-content:space-between;
}
.hrjtek-kpi-compact .kpi-icon{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef3ff; color:#4f64d9;
}
.hrjtek-kpi-compact .kpi-n{
  font-weight:800; font-size:26px; line-height:1;
  margin:6px 0 8px;
}
.hrjtek-kpi-compact .kpi-t{
  font-size:12px; display:flex; align-items:center; gap:6px;
  color:#10b981; /* green up */
}
.hrjtek-kpi-compact .kpi-t em{
  color:var(--sub); font-style:normal;
}

.kpi-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.kpi-icon{
  --tone-bg:#f6f8ff;          /* defaults */
  --tone-border:#e6ebff;
  --tone-ink:#6b7280;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:var(--tone-bg);
  border:1px solid var(--tone-border);
  color:var(--tone-ink);
  transition:all .18s ease;
}
.kpi-icon .dashicons:before{ font-size:16px; line-height:1; }
.hrjtek-card:hover .kpi-icon{background:#eef3ff;color:#2563EB;border-color:#dbe3ff}

/* tones */
.kpi-icon.tone-blue   { --tone-bg:#eef3ff; --tone-border:#dbe3ff; --tone-ink:#2563EB; }
.kpi-icon.tone-green  { --tone-bg:#ecfdf5; --tone-border:#bbf7d0; --tone-ink:#059669; }
.kpi-icon.tone-amber  { --tone-bg:#fff7ed; --tone-border:#fed7aa; --tone-ink:#d97706; }
.kpi-icon.tone-purple { --tone-bg:#f5f3ff; --tone-border:#ddd6fe; --tone-ink:#7c3aed; }

.hrjtek-card:hover .kpi-icon{
  box-shadow:0 6px 16px rgba(2,23,64,.08);
  transform: translateY(-1px);
}
/* Small KPI tiles (top right) */
.hrjtek-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.hrjtek-tile{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; }
.hrjtek-tile .n{ font-weight:800; font-size:18px; }
.hrjtek-tile .l{ color:var(--sub); font-size:12px; }
.hrjtek-diff{ font-size:11px; color:#16a34a; }

/* Document table */
.hrjtek-panel{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; }
.hrjtek-panel h3{ margin:0 0 8px; font-size:16px; }
.hrjtek-muted{ color:var(--sub); font-size:12px; }

.hrjtek-docs{ width:100%; border-collapse:collapse; margin-top:8px; }
.hrjtek-docs th, .hrjtek-docs td{ text-align:left; padding:9px; border-top:1px dashed var(--line); font-size:14px; }
.hrjtek-docs th{ color:var(--sub); font-size:12px; }
.hrjtek-bar{ height:8px; background:#eef2ff; border-radius:999px; overflow:hidden; }
.hrjtek-bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-400)); }

.hrjtek-badge{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid #dbe3ff; background:var(--brand-bg); color:var(--brand); display:inline-block; }

/* 2-col bands */
.hrjtek-2{ display:grid; grid-template-columns: 1.4fr .8fr; gap:14px; }
.hrjtek-mini-bars{ display:grid; grid-template-columns: repeat(12, 1fr); gap:6px; align-items:end; height:180px; }
.hrjtek-mini-bars span{ display:block; width:100%; background:linear-gradient(180deg,var(--brand-400),var(--brand)); border-radius:8px 8px 4px 4px; }

/* Calendar + To-do */
.hrjtek-calendar{ border:1px dashed var(--line); border-radius:12px; padding:10px; margin-top:8px; }
.hrjtek-cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.hrjtek-cal-grid b, .hrjtek-cal-grid i{ text-align:center; padding:6px 0; display:block; border-radius:8px; font-style:normal; }
.hrjtek-cal-grid b{ background:#f3f6ff; color:var(--brand); font-size:12px; }
.hrjtek-cal-grid i.today{ background:var(--brand); color:#fff; }
.hrjtek-todos{ margin-top:10px; display:grid; gap:8px; }
.hrjtek-todos .todo{ display:flex; align-items:center; gap:8px; font-size:14px; }
.hrjtek-todos .todo input{ width:16px; height:16px; }

@media (max-width:1200px){
  .hrjtek-shell{ grid-template-columns: 1fr; }
  .hrjtek-tiles{ grid-template-columns: repeat(2, 1fr); }
  .hrjtek-2{ grid-template-columns: 1fr; }
}

/* === polish per user feedback === */
/* Hide page H1 from theme (HR Portal heading) */
body.hrjtek-portal .entry-title,
body.hrjtek-portal .page-title,
body.hrjtek-portal .wp-block-post-title{ display:none !important; }

/* No extra top space from theme wrappers */
body.hrjtek-portal, body.hrjtek-portal #page { margin-top:0 !important; padding-top:0 !important; }
body.hrjtek-portal .site, body.hrjtek-portal .site-content, body.hrjtek-portal main { padding-top:0 !important; }

/* Slightly tighter top padding in shell */
.hrjtek-shell{ padding:8px 12px 16px; }

/* Icon buttons visibility (bell / message) */
.hrjtek-iconbtn .dashicons:before{ color:#374151; font-size:18px; }
.hrjtek-iconbtn{ background:#fff; border-color:#dbe3ff; }
.hrjtek-iconbtn:hover{ border-color:#cfe0ff; box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* Remove sidebar inner scrollbar */
.hrjtek-aside{ overflow:hidden; }

/* Blue frame around entire viewport like reference */
body.hrjtek-portal::before{
  content:""; position:fixed; inset:10px; border-radius:20px;
  border: 6px solid #d6e6ff;
  box-shadow: 0 0 0 1px rgba(12,61,244,.08);
  pointer-events:none; z-index: 9999;
}




/* ===== final polish v3 ===== */

/* Sidebar links: remove underlines on labels and icons */
.hrjtek-nav a, .hrjtek-nav-item{ text-decoration:none !important; }
.hrjtek-nav-item:hover{ text-decoration:none !important; }

/* Quick payslip chip - stronger contrast */
.hrjtek-chip{
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid #cfe0ff !important;
  font-weight:700;
}

/* Blue frame: thicker & no inner gap */
body.hrjtek-portal::before{
  inset:0 !important;              /* remove inner white gap */
  border-width:12px !important;    /* thicker border */
  border-color:#cfe0ff !important; /* brighter blue */
  border-radius:24px !important;
}

/* Remove top padding so content hugs frame */
.hrjtek-shell{ padding-top: 0 !important; }

/* Icon visibility */
.hrjtek-iconbtn .dashicons:before{ color:#111827 !important; }

/* === Topbar brand + quick payslip + profile === */

.hrjtek-brandbar{ display:flex; align-items:center; gap:12px; }
.hrjtek-brandbar img{ height:30px; width:auto; display:block; }

/* Quick payslip outline button */
.hrjtek-chip--qp{
  height:38px; padding:0 14px; border-radius:10px; border:1.5px solid #2563EB;
  background:#fff; color:#2563EB; font-weight:700; line-height:36px;
}
.hrjtek-chip--qp:hover{ background:#EBF3FE; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* Icon buttons */
.hrjtek-icons{ display:flex; gap:8px; align-items:center; }
.hrjtek-iconbtn{ width:40px; height:40px; border-radius:12px; border:1px solid #dbe3ff; background:#fff; display:inline-flex; align-items:center; justify-content:center; }
.hrjtek-iconbtn:hover{ border-color:#cfe0ff; box-shadow:0 0 0 3px rgba(37,99,235,.10);background-color: #2563eb; }
.hrjtek-iconbtn .dashicons:before{ color:#374151; font-size:18px;  transition: color .2s;}

/* turn white on hover/focus */
.hrjtek-iconbtn:hover .dashicons:before,
.hrjtek-iconbtn:focus-visible .dashicons:before{
  color:#fff !important;              /* white on hover */
}


/* Profile chip */
.hrjtek-profile{ display:flex; align-items:center; gap:8px; border:1px solid #dbe3ff; background:#fff; border-radius:12px; padding:6px 10px; cursor:pointer; }
.hrjtek-profile:hover{ border-color:#cfe0ff; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.hrjtek-profile .ava{ width:28px; height:28px; border-radius:6px; object-fit:cover; background:#e8efff; display:block; }
.hrjtek-profile .name{ font-weight:700; color:#111827; }
.hrjtek-profile .role{ font-size:11px; color:#6b7280; margin-top:-2px; }
.hrjtek-profile .chev .dashicons:before{ font-size:16px; color:#6b7280; }

/* Dropdown menu */
.hrjtek-profmenu{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:#fff; border:1px solid #e6ebff; border-radius:12px; box-shadow:0 20px 40px rgba(2,23,64,.10); padding:6px; z-index: 50; }
.hrjtek-profmenu a{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:#111827; text-decoration:none; }
.hrjtek-profmenu a:hover{ background:#f3f7ff; color:#2563EB; }
.hrjtek-profmenu .sep{ height:1px; background:#eef2ff; margin:6px 0; }
.hrjtek-profwrap{ position:relative; }

body.hrjtek-portal .hrjtek-aside{ top:10px !important; }

/* Search field: icon inside input */
.hrjtek-search{ position:relative; flex: 0 1 520px; }
.hrjtek-search .dashicons{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  pointer-events:none;
}
.hrjtek-search input{ padding-left:38px; }

/* no-top-gap-enforcer */
body.hrjtek-portal .hrjtek-shell{ padding-top:0 !important; }

body.hrjtek-portal .entry-content > *:first-child{ margin-top:0 !important; }
.ast-single-post .entry-content a {
     text-decoration: none; 
}

/* ===== Departments header buttons (match reference) ===== */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border:0; border-radius:12px; padding:.8rem 1.05rem;
  font-weight:600; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  background:#e9eef5; color:#1b2b41;
}
.btn .dashicons { line-height:1; font-size:18px; }
.btn.lg { padding:1rem 1.25rem; font-size:15px; border-radius:14px; }
.btn.primary {
  color:#fff;
      background: linear-gradient(90deg, #0c3df4, #02b4fe);
  box-shadow:0 6px 14px rgba(11,99,206,.25);
  
}
.btn.primary:hover { transform:translateY(-1px); box-shadow:0 10px 18px rgba(11,99,206,.3); }
.btn:disabled { opacity:.6; cursor:not-allowed;}

/* ===== Departments actions: stacked blue block ===== */
.hrjtek-table td.actions { text-align:center; }
.action-stack{
  display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#0b63ce 0%, #0a64d1 100%);
  border-radius:12px; padding:16px 12px; width:92px; margin:0 auto;
  box-shadow:0 6px 14px rgba(11,99,206,.18);
}
.action-stack .btn-icon{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.action-stack .btn-icon .dashicons{ font-size:20px; line-height:1; }
.action-stack .btn-icon:hover{ transform:translateY(-1px); border-color:#fff; 
  background: linear-gradient(90deg, #0b63ce 0%, #0a7dff 100%); }
.action-stack .btn-icon.danger:hover{ background:rgba(255,80,80,.22); }

/* --- General table alignment --- */
.hrjtek-table th,
.hrjtek-table td { vertical-align: middle; }

/* --- Top header buttons: shorter height --- */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  border:0; border-radius:10px; padding:.55rem .9rem; /* shorter */
  font-weight:600; font-size:14px; cursor:pointer;
  background:#e9eef5; color:#1b2b41;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn .dashicons { font-size:16px; line-height:1; }
.btn.primary {
  color:#fff;
  background:linear-gradient(90deg,#0b63ce 0%, #0a7dff 100%);
  box-shadow:0 4px 10px rgba(11,99,206,.22);
}
.btn.primary:hover { transform:translateY(-1px); box-shadow:0 7px 14px rgba(11,99,206,.28); }

/* --- Actions: inline, smaller, no blue background --- */
.hrjtek-table td.actions { text-align:center; }

.action-inline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}

.btn-icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d9e1ef; border-radius:8px; background:#fff; color:#0b63ce;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn-icon.sm{ width:32px; height:32px; border-radius:7px; }
.btn-icon .dashicons{ font-size:16px; line-height:1; }

.btn-icon:hover{
  transform:translateY(-1px);
  border-color:#0a7dff;
  box-shadow:0 2px 6px rgba(10,125,255,.15);
}

.btn-icon.danger{ color:#e03131; }
.btn-icon.danger:hover{ border-color:#e03131; box-shadow:0 2px 6px rgba(224,49,49,.15); }

/* Kill the old stacked blue block if still present */
.action-stack{ all:unset; display:inline-flex; gap:8px; }


/* ====== View switch (right side) ====== */
.view-switch{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef3f9; padding:6px; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(27,43,65,.06);
}
.view-switch .viewbtn{
  width:10px; height:10px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; cursor:pointer;
  transition:box-shadow .12s ease, transform .12s ease, background .12s ease, border-color .12s ease;
}
.view-switch .viewbtn .dashicons{ font-size:20px; line-height:1; color:#8aa0bb; }
.view-switch .viewbtn.is-active{
  background:#fff; border-color:#d8e3f3; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.view-switch .viewbtn.is-active .dashicons{ color:#0b63ce; }

/* ====== Grid view ====== */
.dept-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.dept-card{
  background:#fff; border:1px solid #e3eaf5; border-radius:14px;
  padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:10px;
}
.dept-card .row-top{
  display:flex; align-items:center; justify-content:space-between;
}
.dept-card .dept-title{
  font-weight:700; color:#1b2b41; font-size:15px;
}
.dept-card .dept-meta{
  display:flex; gap:14px; color:#516072; font-size:13px;
}

/* checkbox style (subtle) */
.dept-card .chk{ display:inline-flex; align-items:center; }
.dept-card .chk input{ width:18px; height:18px; }

/* Small inline action buttons (shared with list) */
.btn-icon{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d9e1ef; border-radius:8px; background:#fff; color:#0b63ce;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn-icon.sm{ width:32px; height:32px; border-radius:7px; }
.btn-icon .dashicons{ font-size:16px; line-height:1; }
.btn-icon:hover{ transform:translateY(-1px); border-color:#0a7dff; box-shadow:0 2px 6px rgba(10,125,255,.15); }
.btn-icon.danger{ color:#e03131; }
.btn-icon.danger:hover{ border-color:#e03131; box-shadow:0 2px 6px rgba(224,49,49,.15); }

/* Keep header controls on a single row with toggle pushed to the right */
.hrjtek-panel .sec-head{
  display:flex !important;
  align-items:center;
  justify-content:space-between;   /* space left group vs right toggle */
  gap:12px;
  padding-bottom: 14px;
}

/* Left group can shrink; right toggle stays pinned to the end */
.hrjtek-panel .sec-head > :first-child{
  flex:1 1 auto;                   /* buttons can shrink if needed */
  min-width:0;
}

.view-switch{
  margin-left:auto;                /* push to far right */
  display:inline-flex;
  gap:10px;
}

/* Keep the toggle buttons tidy */
.viewbtn{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 4px 14px rgba(2,6,23,.06);
}
.viewbtn.is-active{
  background:#fff;
  box-shadow:0 8px 24px rgba(2,6,23,.10);
}


/* Hide floating menu and chatbot on HR portal pages */
.floating-menu,
#chat-widget-push-to-talk,
#welcomeMessages {
    display: none !important;
}



/* remove theme spacing and page gaps */
body.hrjtek-login,
body.hrjtek-login #page,
body.hrjtek-login .site,
body.hrjtek-login .site-content,
body.hrjtek-login #primary,
body.hrjtek-login main,
body.hrjtek-login .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    background: #f5f7fb !important;
}

/* remove outer container background / border */
body.hrjtek-login .site,
body.hrjtek-login .site-content,
body.hrjtek-login #page,
body.hrjtek-login .ast-container,
body.hrjtek-login .ast-container-fluid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* full page background */
body.hrjtek-login {
    background: #f5f7fb !important;
}

/* important: remove the bad outer margin */
body.hrjtek-login {
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    overflow-y: auto;
}

/* hide Astra header/footer/breadcrumb style areas on login page */
body.hrjtek-login header,
body.hrjtek-login footer,
body.hrjtek-login .site-header,
body.hrjtek-login .site-footer,
body.hrjtek-login .ast-breadcrumbs,
body.hrjtek-login .entry-header,
body.hrjtek-login .post-navigation,
body.hrjtek-login .comments-area,
body.hrjtek-login .ast-single-related-posts-container {
    display: none !important;
}

/* center the login layout properly */
body.hrjtek-login .hrjtek-auth {
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto !important;
    padding: 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* equal height columns */
body.hrjtek-login .hrjtek-auth__left,
body.hrjtek-login .hrjtek-auth__right {
    min-height: 520px;
    display: flex;
}

/* left branding panel */
body.hrjtek-login .hrjtek-auth__left {
    border-radius: 18px;
    overflow: hidden;
}

body.hrjtek-login .hrjtek-brand {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* right form panel */
body.hrjtek-login .hrjtek-auth__right {
    align-items: center;
    justify-content: center;
}

body.hrjtek-login .hrjtek-card {
    width: 100%;
    max-width: 460px;
    min-height: 520px;
    margin: 0 auto;
    padding: 36px 28px;
    border: 1px solid #e6e8eb;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(2, 23, 64, 0.06);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* heading */
body.hrjtek-login .hrjtek-card h2 {
    margin: 0 0 26px;
    text-align: center;
    font-size: 48px;
    line-height: 1.1;
}

/* fields */
body.hrjtek-login .hrjtek-field {
    display: block;
    margin-bottom: 18px;
}

body.hrjtek-login .hrjtek-field > span {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1e293b;
}

body.hrjtek-login .hrjtek-field input {
    height: 46px;
    border-radius: 12px;
    box-shadow: none;
}

/* password field button alignment */
body.hrjtek-login .hrjtek-pass {
    position: relative;
}

body.hrjtek-login .hrjtek-pass input {
    padding-right: 54px;
}

body.hrjtek-login .hrjtek-pass-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

/* remember + forgot row */
body.hrjtek-login .hrjtek-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 18px;
}

body.hrjtek-login .hrjtek-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

body.hrjtek-login .hrjtek-link {
    text-decoration: none;
}

/* login button */
body.hrjtek-login .hrjtek-btn.hrjtek-primary {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 18px;
    line-height: 1.1;
    background: linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%) !important;
}



body.hrjtek-login .hrjtek-card {
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

body.hrjtek-login .hrjtek-auth__left {
    border-radius: 20px;
    overflow: hidden;
}

body.hrjtek-login .hrjtek-card h2 {
    margin-bottom: 22px;
}

body.hrjtek-login .hrjtek-field input {
    border-radius: 14px;
    height: 54px;
}


body.hrjtek-login .hrjtek-auth {
    gap: 40px; /* more breathing space */
}

body.hrjtek-login .hrjtek-card {
    padding: 40px 30px;
}

body.hrjtek-login .hrjtek-card h2 {
    font-size: 44px;
}


/* ===== Topbar layout fix for long usernames ===== */
body.hrjtek-portal .hrjtek-topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.hrjtek-portal .hrjtek-search{
    flex: 1 1 auto;
    min-width: 260px;
    max-width: 620px;
}

/* right section */
body.hrjtek-portal .hrjtek-topbar > div:last-child{
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: 0;
}

/* quick payslip should never wrap */
body.hrjtek-portal .hrjtek-chip--qp{
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 170px;
    justify-content: center;
}

/* icon group fixed size */
body.hrjtek-portal .hrjtek-icons{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* profile wrapper */
body.hrjtek-portal .hrjtek-profwrap{
    flex: 0 0 auto;
    min-width: 0;
}

/* profile card */
body.hrjtek-portal .hrjtek-profile{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 280px;
    padding: 10px 14px;
}

/* text block inside profile */
body.hrjtek-portal .hrjtek-profile > div:nth-child(2){
    min-width: 0;
    flex: 1 1 auto;
}

/* long name handling */
body.hrjtek-portal .hrjtek-profile .name{
    display: block;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* role line */
body.hrjtek-portal .hrjtek-profile .role{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

/* keep dropdown arrow aligned */
body.hrjtek-portal .hrjtek-profile .chev{
    flex: 0 0 auto;
}

/* tablet */
@media (max-width: 1200px){
    body.hrjtek-portal .hrjtek-chip--qp{
        min-width: 150px;
    }

    body.hrjtek-portal .hrjtek-profile{
        max-width: 240px;
    }

    body.hrjtek-portal .hrjtek-profile .name{
        max-width: 130px;
    }
}

body.hrjtek-portal .hrjtek-topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    flex-shrink:0;
    min-width:0;
}

/* Remove broken pseudo icons from announcements pagination */
.annc-pagination .pager-btn::before,
.annc-pagination .pager-btn::after,
.annc-pagination .pager-btn--prev::before,
.annc-pagination .pager-btn--prev::after,
.annc-pagination .pager-btn--next::before,
.annc-pagination .pager-btn--next::after {
    content: none !important;
    display: none !important;
}
.hrjtek-profile-photo-wrap{
    position: relative;
    width: 96px;
    min-width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrjtek-profile-photo-wrap img,
#hrjtek-profile-photo-preview{
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #e5edf9;
    display: block;
}

/* hide default form spacing */
#hrjtek-avatar-form{
    margin: 0;
    padding: 0;
}

/* camera button over image */
#hrjtek-change-photo-btn{
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #dbe5f4;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
}

#hrjtek-change-photo-btn .dashicons{
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin: 0;
}

#hrjtek-avatar-msg{
    position: absolute;
    left: 0;
    top: 108px;
    width: 180px;
    font-size: 12px;
    color: #64748b;
}

/* Common avatar style for all portal avatars */
.ava,
.hrjtek-profile .ava,
.hrjtek-profwrap .ava,
.hrjtek-profile-hero img,
.hrjtek-employee-avatar img {
    border-radius: 50% !important;
    object-fit: cover;
    overflow: hidden;
}

/* Header avatar size */
.hrjtek-profile .ava,
.hrjtek-profwrap .ava {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 3px solid #2f6bff;
    box-shadow: 0 6px 16px rgba(47, 107, 255, 0.18);
    background: #fff;
}
/* Team Lead CSS Starts From Here */
body.hrjtek-portal header,
body.hrjtek-portal [role="banner"],
body.hrjtek-portal .site-header,
body.hrjtek-portal #masthead,
body.hrjtek-portal .elementor-location-header,
body.hrjtek-portal footer,
body.hrjtek-portal .site-footer,
body.hrjtek-portal .elementor-location-footer {
  display: none !important;
}

body.hrjtek-portal .site,
body.hrjtek-portal .site-content,
body.hrjtek-portal #content,
body.hrjtek-portal .ast-container,
body.hrjtek-portal .entry-content,
body.hrjtek-portal .elementor-section-wrap,
body.hrjtek-portal .elementor-widget-wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide floating social icons / sticky icons / chat widgets */
body.hrjtek-portal .sbi,
body.hrjtek-portal .sticky-social,
body.hrjtek-portal .social-float,
body.hrjtek-portal .floating-icons,
body.hrjtek-portal .chatbot,
body.hrjtek-portal .chat-widget,
body.hrjtek-portal .wplc-widget,
body.hrjtek-portal .tidio-chat,
body.hrjtek-portal .tawk-min-container,
body.hrjtek-portal iframe[src*="chat"],
body.hrjtek-portal iframe[src*="tidio"],
body.hrjtek-portal iframe[src*="tawk"],
body.hrjtek-portal iframe[src*="fastbots"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Team Lead CSS */
/* ================================
   Team Lead Dashboard Cards
================================ */

.hrjtek-page-title{
  margin:0;
  font-size:58px;
  line-height:1.08;
  font-weight:800;
  color:#1e293b;
}

.hrjtek-page-subtitle{
  margin:8px 0 0;
  font-size:18px;
  color:#5b6475;
}

.hrjtek-kpi-grid--four{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.hrjtek-stat-card{
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 6px 18px rgba(15, 23, 42, 0.04);
}

.hrjtek-stat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.hrjtek-stat-title{
  font-size:15px;
  font-weight:700;
  color:#5d6a7c;
}

.hrjtek-stat-value{
  font-size:52px;
  line-height:1;
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}

.hrjtek-stat-meta{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  font-size:15px;
  color:#64748b;
}

.hrjtek-stat-meta .is-positive{
  color:#16a34a;
  font-weight:600;
}

.hrjtek-stat-meta .is-negative{
  color:#ef4444;
  font-weight:600;
}

.hrjtek-stat-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.hrjtek-stat-icon--blue{
  background:#eaf1ff;
  color:#2563eb;
}

.hrjtek-stat-icon--amber{
  background:#fff3df;
  color:#f59e0b;
}

.hrjtek-stat-icon--green{
  background:#e8fbef;
  color:#16a34a;
}

.hrjtek-stat-icon--purple{
  background:#f2ecff;
  color:#7c3aed;
}

.hrjtek-dashboard-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.hrjtek-panel-card{
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:22px;
  padding:20px;
  box-shadow:0 6px 18px rgba(15, 23, 42, 0.04);
}

.hrjtek-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.hrjtek-panel-head h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#475569;
}

.hrjtek-mini-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.hrjtek-mini-icon--amber{
  background:#fff3df;
  color:#f59e0b;
}

.hrjtek-mini-icon--red{
  background:#ffe8e8;
  color:#ef4444;
}

.hrjtek-mini-icon--blue{
  background:#eaf1ff;
  color:#2563eb;
}

.hrjtek-list-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hrjtek-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border:1px solid #e6edf7;
  border-radius:16px;
  background:#fff;
}

.hrjtek-list-main{
  color:#0f172a;
  font-size:16px;
}

.hrjtek-list-side{
  color:#64748b;
  font-size:14px;
  white-space:nowrap;
}

.hrjtek-empty-state{
  padding:24px 8px;
  color:#64748b;
  font-size:16px;
}

@media (max-width: 1280px){
  .hrjtek-kpi-grid--four{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .hrjtek-page-title{
    font-size:36px;
  }

  .hrjtek-kpi-grid--four,
  .hrjtek-dashboard-grid-2{
    grid-template-columns:1fr;
  }

  .hrjtek-list-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .hrjtek-list-side{
    white-space:normal;
  }
}

/* Team Lead dashboard - simple HR-like card tuning */

.hrjtek-pagehead--compact{
  margin-bottom:18px;
}

.hrjtek-page-title--compact{
  font-size:46px;
  line-height:1.08;
  font-weight:800;
  color:#1e293b;
  margin:0;
}

.hrjtek-page-subtitle--compact{
  margin:8px 0 0;
  font-size:16px;
  color:#5b6475;
}

.hrjtek-stat-card--simple,
.hrjtek-panel-card--simple{
  border-radius:20px;
  border:1px solid #dbe4f0;
  box-shadow:none;
}

.hrjtek-stat-card--simple{
  padding:18px 18px 16px;
  min-height:176px;
}

.hrjtek-panel-card--simple{
  padding:18px;
}

.hrjtek-stat-head{
  margin-bottom:14px;
}

.hrjtek-stat-title{
  font-size:14px;
  line-height:1.3;
  font-weight:700;
  color:#56657a;
}

.hrjtek-stat-value--simple{
  font-size:34px;
  line-height:1.05;
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}

.hrjtek-stat-meta--simple{
  gap:18px;
  font-size:13px;
  color:#64748b;
  line-height:1.5;
}

.hrjtek-stat-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  font-size:17px;
}

.hrjtek-panel-head{
  margin-bottom:16px;
}

.hrjtek-panel-head h3{
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  color:#475569;
  margin:0;
}

.hrjtek-mini-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  font-size:16px;
}

.hrjtek-list-row--simple{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #e6edf7;
}

.hrjtek-list-main{
  font-size:15px;
  color:#0f172a;
}

.hrjtek-list-side{
  font-size:13px;
  color:#64748b;
}

.hrjtek-empty-state{
  padding:22px 8px;
  font-size:15px;
  color:#64748b;
}

@media (max-width: 1280px){
  .hrjtek-page-title--compact{
    font-size:38px;
  }
}

@media (max-width: 767px){
  .hrjtek-page-title--compact{
    font-size:30px;
  }

  .hrjtek-stat-card--simple{
    min-height:auto;
  }
}

.hrjtek-team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.hrjtek-team-card{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:18px;
  padding:18px;
}

.hrjtek-team-card-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.hrjtek-team-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  background:#eef4ff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.hrjtek-team-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hrjtek-team-avatar .dashicons{
  font-size:24px;
  width:24px;
  height:24px;
  color:#2563eb;
}

.hrjtek-team-info h4{
  margin:0 0 4px;
  font-size:18px;
  color:#0f172a;
}

.hrjtek-team-info p{
  margin:0;
  font-size:14px;
  color:#64748b;
}

.hrjtek-team-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:#475569;
  margin-bottom:16px;
}

.hrjtek-team-actions{
  margin-top:auto;
}

.hrjtek-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
}

.hrjtek-btn--outline{
  border:1px solid #cfe0ff;
  color:#2563eb;
  background:#fff;
}

.hrjtek-btn--outline:hover{
  background:#f8fbff;
}

@media (max-width: 1200px){
  .hrjtek-team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .hrjtek-team-grid{
    grid-template-columns:1fr;
  }
}

/* Team Members - premium card UI */

.hrjtek-team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.hrjtek-team-card--premium{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:24px;
  padding:22px;
  box-shadow:0 10px 24px rgba(15, 23, 42, 0.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hrjtek-team-card--premium:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(15, 23, 42, 0.08);
  border-color:#d7e6ff;
}

.hrjtek-team-card-top{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.hrjtek-team-avatar--premium{
  width:72px;
  height:72px;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(137deg, rgba(12,61,244,0.10) 0%, rgba(2,180,254,0.10) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid #dce8ff;
}

.hrjtek-team-avatar--premium img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hrjtek-team-avatar--premium .dashicons{
  font-size:30px;
  width:30px;
  height:30px;
  color:#2563eb;
}

.hrjtek-team-info h4{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.3;
  font-weight:700;
  color:#0f172a;
}

.hrjtek-team-info p{
  margin:0;
  font-size:14px;
  color:#64748b;
  font-weight:500;
}

.hrjtek-team-divider{
  height:1px;
  background:#edf2f8;
  margin:0 0 18px;
}

.hrjtek-team-meta--premium{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}

.hrjtek-team-meta-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.hrjtek-team-meta-row .label{
  min-width:95px;
  font-size:13px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.hrjtek-team-meta-row .value{
  flex:1;
  text-align:left;
  font-size:14px;
  color:#334155;
  word-break:break-word;
}

.hrjtek-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.hrjtek-status-badge.is-active{
  background:#eaf9ef;
  color:#16a34a;
  border:1px solid #c8efd4;
}

.hrjtek-status-badge.is-inactive{
  background:#fff1f2;
  color:#e11d48;
  border:1px solid #ffd3db;
}

.hrjtek-team-actions{
  margin-top:auto;
}

.hrjtek-btn--primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%);
  box-shadow:0 10px 18px rgba(12,61,244,0.18);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.hrjtek-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(12,61,244,0.22);
  opacity:.98;
  color:#fff;
}

@media (max-width: 1280px){
  .hrjtek-team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .hrjtek-team-grid{
    grid-template-columns:1fr;
  }

  .hrjtek-team-meta-row{
    flex-direction:column;
    gap:6px;
  }

  .hrjtek-team-meta-row .label{
    min-width:auto;
  }
}

/* Team Attendance */

.hrjtek-attendance-table-wrap{
  width:100%;
  overflow-x:auto;
}

.hrjtek-attendance-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.hrjtek-attendance-table thead th{
  text-align:left;
  font-size:13px;
  font-weight:700;
  color:#64748b;
  padding:14px 16px;
  border-bottom:1px solid #e6edf7;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.hrjtek-attendance-table tbody td{
  padding:16px;
  font-size:14px;
  color:#334155;
  border-bottom:1px solid #eef3f8;
  vertical-align:middle;
}

.hrjtek-attendance-table tbody tr:last-child td{
  border-bottom:none;
}

.hrjtek-attendance-table tbody tr:hover{
  background:#fbfdff;
}

.hrjtek-att-employee{
  font-weight:700;
  color:#0f172a;
}

.hrjtek-status-badge.is-neutral{
  background:#eff6ff;
  color:#2563eb;
  border:1px solid #d7e8ff;
}

/* Final Sign In hard kill for unexpected theme/widget overlays */
body.hrjtek-login > *:not(#page):not(#wpadminbar):not(script):not(style):not(link) {
  display: none !important;
}

body.hrjtek-login .entry-title,
body.hrjtek-login .page-title,
body.hrjtek-login .wp-block-post-title {
  display: none !important;
}

.hrjtek-stat-sub{
  margin-top: -4px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.hrjtek-progress{
  height: 6px;
  background: #eef2ff;
  border-radius: 10px;
  margin-top: 8px;
  overflow: hidden;
}

.hrjtek-progress-bar{
  height: 100%;
  background: linear-gradient(90deg, #0C3DF4, #02B4FE);
  border-radius: 10px;
  transition: width 0.4s ease;
}
.hrjtek-stat-sub:empty,
.hrjtek-stat-meta span:contains("No new") {
  color: #94a3b8;
}
.hrjtek-progress{
  height: 6px;
  background: #eef2ff;
  border-radius: 10px;
  margin-top: 8px;
  overflow: hidden;
}

.hrjtek-progress-bar{
  height: 100%;
  background: linear-gradient(90deg, #0C3DF4, #02B4FE);
  border-radius: 10px;
  transition: width 0.4s ease;
}
.hrjtek-progress-bar--empty{
  background: #e5e7eb !important;
}
.hrjtek-chip:hover{
  border-color: #cfe0ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    background-color: #2563eb !important;
    color:#fff !important;
}

.hrjtek-att-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}

.hrjtek-att-summary .box{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:12px;
  padding:12px;
  text-align:center;
  font-weight:700;
  font-size:22px;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

.hrjtek-att-summary .box span{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:#64748b;
}

.hrjtek-att-summary .total{ color:#0C3DF4; }
.hrjtek-att-summary .present{ color:#16a34a; }
.hrjtek-att-summary .working{ color:#f59e0b; }
.hrjtek-att-summary .absent{ color:#ef4444; }

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

.badge-red{
  background:#fee2e2;
  color:#dc2626;
}

.badge-blue{
  background:#dbeafe;
  color:#2563eb;
}

.badge-green{
  background:#dcfce7;
  color:#16a34a;
}

.row-active{
  background:linear-gradient(90deg,#f0f9ff,#ffffff);
  border-left:4px solid #2563eb;
}

@media (max-width: 900px){
  .hrjtek-att-summary{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 560px){
  .hrjtek-att-summary{
    grid-template-columns:1fr;
  }
}

.hrjtek-att-summary .box{
  background:#fff;
  border:1px solid #e6edf7;
  border-radius:14px;
  padding:16px;
  text-align:center;
  font-weight:700;
  font-size:26px;
  box-shadow:0 6px 16px rgba(0,0,0,0.05);
  transition:0.2s ease;
}

.hrjtek-att-summary .box:hover{
  transform:translateY(-2px);
}
.hrjtek-team-leave-page .hrjtek-att-summary .working{
  color:#f59e0b;
}

.hrjtek-attendance-table tbody tr{
  transition:0.2s ease;
}

.hrjtek-attendance-table tbody tr:hover{
  background:#f8fafc;
}

/* Team Leave CSS */
.hrjtek-team-leave-page .badge-blue{
  background:#fef3c7;
  color:#d97706;
}

.hrjtek-team-leave-page .badge-green{
  background:#dcfce7;
  color:#16a34a;
}

.hrjtek-team-leave-page .badge-red{
  background:#fee2e2;
  color:#dc2626;
}
/* Team Leave Approve status */
.hrjtek-leave-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.hrjtek-action-btn{
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}

.hrjtek-action-btn--approve{
  background:#dcfce7;
  color:#16a34a;
}

.hrjtek-action-btn--approve:hover{
  background:#bbf7d0;
}

.hrjtek-action-btn--reject{
  background:#fee2e2;
  color:#dc2626;
}

.hrjtek-action-btn--reject:hover{
  background:#fecaca;
}

.hrjtek-action-done{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}
.hrjtek-reason-text{
  display:inline-block;
  max-width:180px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  vertical-align:middle;
}

.hrjtek-leave-filters{
  margin:0 0 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.hrjtek-filter-select{
  min-width:180px;
  height:42px;
  padding:0 12px;
  border:1px solid #dbe4f0;
  border-radius:10px;
  background:#fff;
  color:#334155;
}
.hrjtek-main{
  display:flex;
  flex-direction:column;
}

.hrjtek-team-leave-page{
  margin-bottom:12px;
}

.hrjtek-footer{
  margin-top:16px;
}

.kpi-board{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-bottom:18px;
}

.kpi-card{
  background:#fff;
  border:1px solid #dfe7f3;
  border-radius:20px;
  padding:22px 22px 20px;
  box-shadow:0 2px 8px rgba(15, 23, 42, 0.03);
}

.kpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.kpi-title{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#1f2a44;
}

.kpi-ico{
  font-size:20px;
  width:20px;
  height:20px;
  color:#1f2a44;
}

.kpi-val{
  font-size:40px;
  line-height:1;
  font-weight:700;
  color:#0f172a;
  margin-bottom:12px;
}

.kpi-sub{
  font-size:14px;
  font-weight:600;
}

.kpi-sub.good{ color:#11a861; }
.kpi-sub.bad{ color:#ff4d4f; }
.kpi-sub.info{ color:#15803d; }

/* KPI ICON BASE */
.kpi-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  font-size:18px;
}

/* ICON COLORS */
.kpi-blue{
  background: rgba(37, 99, 235, 0.12);
  color:#2563eb;
}

.kpi-green{
  background: rgba(22, 163, 74, 0.12);
  color:#16a34a;
}

.kpi-orange{
  background: rgba(245, 158, 11, 0.12);
  color:#f59e0b;
}

.kpi-red{
  background: rgba(239, 68, 68, 0.12);
  color:#ef4444;
}

/* FIX ICON ALIGNMENT */
.kpi-ico .dashicons{
  font-size:18px;
  width:18px;
  height:18px;
  line-height:18px;
}

.hrjtek-regularization-page {
  padding: 18px 22px 70px;
}

.hrjtek-regularization-page .hrjtek-page-head {
  margin-bottom: 18px;
}

.hrjtek-regularization-page .hrjtek-page-head h2 {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.hrjtek-regularization-page .hrjtek-page-head p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.hrjtek-reg-card {
  background: #fff;
  border: 1px solid #e5eaf5;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.hrjtek-reg-table {
  width: 100%;
  border-collapse: collapse;
}

.hrjtek-reg-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  padding: 16px;
  border-bottom: 1px solid #e5eaf5;
}

.hrjtek-reg-table td {
  padding: 16px;
  border-bottom: 1px solid #eef2f7;
  color: #0f172a;
  font-size: 14px;
}

.hrjtek-empty {
  text-align: center;
  color: #64748b !important;
  padding: 28px !important;
}

.hrjtek-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
}
body.hrjtek-portal .heateor_sss_sharing_container,
body.hrjtek-portal .heateorSssSharing,
body.hrjtek-portal .sassy-social-share,
body.hrjtek-portal .sassy-social-share-floating,
body.hrjtek-portal .joinchat,
body.hrjtek-portal .joinchat__button,
body.hrjtek-portal .qlwapp,
body.hrjtek-portal .tawk-min-container,
body.hrjtek-portal iframe[src*="tawk"],
body.hrjtek-portal iframe[src*="whatsapp"],
body.hrjtek-portal [class*="chat"],
body.hrjtek-portal [id*="chat"] {
    display: none !important;
    visibility: hidden !important;
}

.hrjtek-menu-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}

.hrjtek-empty-box {
  padding: 28px 16px;
  text-align: center;
  color: #64748b;
}

.hrjtek-empty-box .dashicons {
  width: 48px;
  height: 48px;
  font-size: 48px;
  color: #22c55e;
  margin-bottom: 10px;
}

.hrjtek-empty-box h4 {
  margin: 6px 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.hrjtek-empty-box p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}

.hrjtek-reg-filters {
  display: flex;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}

.hrjtek-reg-filters label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 6px;
}

.hrjtek-reg-filters input,
.hrjtek-reg-filters select {
  min-width: 180px;
  height: 42px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: #0f172a;
}

.hrjtek-status-pill.status-approved {
  background: #dcfce7;
  color: #15803d;
}

.hrjtek-status-pill.status-rejected {
  background: #fee2e2;
  color: #b91c1c;
}

.hrjtek-status-pill.status-pending {
  background: #eef6ff;
  color: #2563eb;
}
body.hrjtek-portal .heateor_sss_sharing_container,
body.hrjtek-portal .heateorSssSharing,
body.hrjtek-portal .sassy-social-share,
body.hrjtek-portal .sassy-social-share-floating,
body.hrjtek-portal .joinchat,
body.hrjtek-portal .joinchat__button,
body.hrjtek-portal .qlwapp,
body.hrjtek-portal .tawk-min-container,
body.hrjtek-portal iframe[src*="tawk"],
body.hrjtek-portal iframe[src*="whatsapp"],
body.hrjtek-portal [class*="chat"],
body.hrjtek-portal [id*="chat"] {
    display: none !important;
    visibility: hidden !important;
}

.hrjtek-kpi-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hrjtek-kpi-link:hover {
  transform: translateY(-3px);
  border-color: #bcd7ff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}

.hrjtek-kpi-link:hover h4,
.hrjtek-kpi-link:hover .hrjtek-kpi-total,
.hrjtek-kpi-link:hover .kpi-n {
  color: #0C3DF4;
}





.hrjtek-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 28px;
  align-items: stretch;
}

.hrjtek-dashboard-grid .hrjtek-card {
  height: 100%;
}







@media (max-width: 1024px) {
  .hrjtek-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.hrjtek-doc-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;
}

.hrjtek-doc-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hrjtek-doc-progress {
  width: 100%;
  max-width: 260px;
}

.hrjtek-doc-progress-wrap span {
  min-width: 42px;
  font-weight: 700;
  color: #334155;
}

.hrjtek-doc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.hrjtek-doc-badge.is-completed {
  background: #dcfce7;
  color: #047857;
  border: 1px solid #bbf7d0;
}

.hrjtek-doc-badge.is-progress {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.hrjtek-doc-badge.is-pending {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.hrjtek-doc-row {
  cursor: pointer;
  transition: background .2s;
}
.hrjtek-doc-row:hover {
  background: #f1f5ff;
}
.hrjtek-doc-row {
  cursor: pointer;
}

.hrjtek-doc-row:hover {
  background: #f8fbff;
}

.hrjtek-doc-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hrjtek-doc-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}

.hrjtek-doc-modal-box {
  position: relative;
  width: min(820px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
  z-index: 2;
}

.hrjtek-doc-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.hrjtek-doc-modal-head h3 {
  margin: 0;
  font-size: 22px;
}

.hrjtek-doc-modal-head p {
  margin: 6px 0 0;
  color: #64748b;
}

.hrjtek-doc-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f1f5f9;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.hrjtek-doc-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.hrjtek-doc-section {
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  background: #f8fafc;
}

.hrjtek-doc-section h4 {
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
}

.hrjtek-doc-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hrjtek-doc-section li {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 8px;
  font-weight: 600;
}

.hrjtek-doc-section li.empty {
  color: #64748b;
  font-weight: 500;
}

@media (max-width: 768px) {
  .hrjtek-doc-modal-grid {
    grid-template-columns: 1fr;
  }
}

.hrjtek-doc-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #eaf2ff; /* light blue */
  color: #0C3DF4; /* your primary blue */
  
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* Override Astra button hover for modal close */
.hrjtek-doc-modal .hrjtek-doc-close {
  background: #eaf2ff !important;
  color: #0C3DF4 !important;
  border: none !important;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  border-radius: 10px;

  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover BLUE instead of Astra yellow */
.hrjtek-doc-modal .hrjtek-doc-close:hover {
  background: linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* Focus state */
.hrjtek-doc-modal .hrjtek-doc-close:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(12, 61, 244, 0.25) !important;
}

/* FINAL: Who is Out + My Attendance 40/60 aligned */
.hrjtek-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 20px !important;
  margin-bottom: 28px !important;
}

.hrjtek-dashboard-grid > .hrjtek-col {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-width: 0 !important;
  align-self: stretch !important;
  display: flex !important;
}

.hrjtek-dashboard-grid > .hrjtek-col:nth-child(2) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* remove extra outer spacing from attendance include */
.hrjtek-dashboard-grid > .hrjtek-col:nth-child(2) > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* keep inner attendance card neat */
.hrjtek-dashboard-grid > .hrjtek-col:nth-child(2) .hrjtek-card {
  margin-top: 0 !important;
  box-sizing: border-box !important;
}



@media (max-width: 900px) {
  .hrjtek-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fix top inner spacing for My Attendance */
#hrjtek-shared-attendance-wrap {
  margin-top: 0 !important;
  padding-top: 14px !important; /* add space like bottom */
}

/* Add equal spacing inside card */
#hrjtek-shared-attendance-wrap .hrjtek-card {
  margin-top: 0 !important;
  padding-top: 16px !important;
}

/* Ensure header spacing looks balanced */
#hrjtek-shared-attendance-wrap .kpi-h {
  margin-top: 4px !important;
}

.hrjtek-multi-select {
  width: 100%;
  min-height: 120px;   /* increase height */
  max-height: 160px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dbe5f4;
  background: #f8fbff;
  font-size: 14px;
  line-height: 1.5;
  overflow-y: auto;
}

/* hover effect */
.hrjtek-multi-select option {
  padding: 6px;
}

/* selected highlight */
.hrjtek-multi-select option:checked {
  background: linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%);
  color: #fff;
}
.emp-modal select.hrjtek-multi-select {
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  overflow-y: scroll !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
}
/* FINAL FIX: HR Dashboard equal height cards */
.hrjtek-dashboard-grid > .hrjtek-col > .hrjtek-card,
.hrjtek-dashboard-grid > .hrjtek-col > .hrjtek-panel {
  width: 100% !important;
  height: 100% !important;
}


/* =========================================================
   HR JTek Portal - Clean Sticky Top Header with Top Border
========================================================= */

body.hrjtek-portal .hrjtek-main {
    overflow: visible !important;
}

/* Sticky top header */
body.hrjtek-portal .hrjtek-topbar {
    position: sticky !important;
    top: 10px;
    z-index: 9999;

    background: #f6f9ff;
    padding: 14px 18px;
    margin: 0 0 18px 0;

    border: 1px solid #cfe0ff !important;
    border-radius: 18px;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

/* Admin bar support */
body.admin-bar.hrjtek-portal .hrjtek-topbar {
    top: 42px;
}

/* Remove unwanted sidebar scrollbar */
body.hrjtek-portal .hrjtek-aside {
    overflow: hidden !important;
}

/* Dropdowns */
body.hrjtek-portal .hrjtek-profmenu,
body.hrjtek-portal #hrjtek-notify-panel {
    z-index: 10050 !important;
}
body.hrjtek-portal .hrjtek-search-wrap {
  position: relative;
  flex: 0 1 620px;
}

body.hrjtek-portal .hrjtek-search-wrap .hrjtek-search {
  width: 100%;
  flex: 1;
}

body.hrjtek-portal .hrjtek-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  background: #fff;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
  padding: 8px;
  z-index: 99999;
  max-height: 360px;
  overflow-y: auto;
}

body.hrjtek-portal .hrjtek-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #0f172a;
  transition: all .18s ease;
}

body.hrjtek-portal .hrjtek-search-item:hover {
  background: #f3f7ff;
  transform: translateY(-1px);
}

body.hrjtek-portal .hrjtek-search-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(137deg, #0C3DF4 0%, #02B4FE 100%);
  color: #fff;
  font-size: 18px;
}

body.hrjtek-portal .hrjtek-search-text {
  flex: 1;
  min-width: 0;
}

body.hrjtek-portal .hrjtek-search-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

body.hrjtek-portal .hrjtek-search-text small {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

body.hrjtek-portal .hrjtek-search-empty {
  padding: 18px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}
/* ======================================================
   HR Portal Premium Compact Header
====================================================== */

/* Top Header */
body.hrjtek-portal .hrjtek-topbar{
    position: sticky;
    top: 10px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 16px !important;

    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);

    border: 1px solid #dbe7ff;
    border-radius: 22px;

    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

/* Search */
body.hrjtek-portal .hrjtek-search-wrap{
    flex: 1;
    max-width: 720px;
}

body.hrjtek-portal .hrjtek-search input{
    height: 50px !important;
    border-radius: 16px !important;
    border: 1px solid #dce6ff !important;

    padding-left: 48px !important;

    font-size: 15px;
    font-weight: 500;

    background: #fff;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

/* Right section */
body.hrjtek-portal .hrjtek-topbar-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Quick Payslip */
body.hrjtek-portal .hrjtek-chip--qp{
    height: 50px !important;

    padding: 0 22px !important;

    border-radius: 16px !important;

    border: 1px solid #dce6ff !important;

    background: #fff !important;

    font-size: 15px;
    font-weight: 700;

    color: #111827 !important;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);

    transition: all .25s ease;
}

body.hrjtek-portal .hrjtek-chip--qp:hover{
    background: #f4f8ff !important;
    border-color: #c7d9ff !important;
}

/* Notification + Message Buttons */
body.hrjtek-portal .hrjtek-iconbtn{
    width: 50px !important;
    height: 50px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px !important;

    border: 1px solid #dce6ff !important;

    background: #fff !important;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);

    transition: all .25s ease;
}

body.hrjtek-portal .hrjtek-iconbtn:hover{
    background: #f4f8ff !important;
    border-color: #c7d9ff !important;
}

/* Notification badge */
body.hrjtek-portal #hrjtek-notify-badge{
    top: -4px !important;
    right: -4px !important;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: #ef4444;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #fff;
}

/* ======================================================
   PROFILE BOX EXACT HEIGHT FIX
====================================================== */

body.hrjtek-portal .hrjtek-profile{
    height: 50px !important; /* SAME AS NOTIFICATION BOX */

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px !important;

    border-radius: 16px !important;

    border: 1px solid #dce6ff !important;

    background: #fff !important;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);

    transition: all .25s ease;
}

body.hrjtek-portal .hrjtek-profile:hover{
    background: #f4f8ff !important;
    border-color: #c7d9ff !important;
}

/* Avatar */
body.hrjtek-portal .hrjtek-profile .ava,
body.hrjtek-portal .hrjtek-profwrap .ava{
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;

    border-radius: 50%;

    border: 2px solid #2563eb !important;

    object-fit: cover;
}

/* Text */
body.hrjtek-portal .hrjtek-profile .meta{
    display: flex;
    flex-direction: column;
    justify-content: center;

    line-height: 1.1;
}

body.hrjtek-portal .hrjtek-profile .name{
    font-size: 14px !important;
    font-weight: 700 !important;

    color: #111827 !important;

    margin: 0 !important;
}

body.hrjtek-portal .hrjtek-profile .role{
    font-size: 12px !important;

    color: #64748b !important;

    margin-top: 3px !important;
}

/* Arrow */
body.hrjtek-portal .hrjtek-profile .chev{
   
    color: #64748b;
}

/* Mobile */
@media (max-width: 991px){

    body.hrjtek-portal .hrjtek-topbar{
        flex-wrap: wrap;
    }

    body.hrjtek-portal .hrjtek-search-wrap{
        width: 100%;
        max-width: 100%;
        order: 2;
    }
}
/* ======================================================
   HR Portal Header - Compact Premium Fix
====================================================== */

body.hrjtek-portal .hrjtek-topbar{
    position: sticky;
    top: 10px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px !important;
    background: rgba(255,255,255,.96);
    border: 1px solid #dbe7ff;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

body.hrjtek-portal .hrjtek-search-wrap{
    flex: 1 1 auto;
    max-width: none;
}

body.hrjtek-portal .hrjtek-topbar-right{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto;
}

/* Search */
body.hrjtek-portal .hrjtek-search,
body.hrjtek-portal .hrjtek-search input{
    height: 50px !important;
}

body.hrjtek-portal .hrjtek-search input{
    border-radius: 16px !important;
    border: 1px solid #dce6ff !important;
    padding-left: 48px !important;
    background: #fff;
    font-size: 15px;
}

/* Quick Payslip - icon restored */
body.hrjtek-portal .hrjtek-chip--qp{
    height: 50px !important;
    min-width: 190px !important;
    padding: 0 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    border-radius: 16px !important;
    border: 1px solid #dce6ff !important;
    background: #fff !important;

    color: #111827 !important;
    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

body.hrjtek-portal .hrjtek-chip--qp .dashicons,
body.hrjtek-portal .hrjtek-chip--qp svg,
body.hrjtek-portal .hrjtek-chip--qp i{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
   
}

/* Message + Notification buttons */
body.hrjtek-portal .hrjtek-iconbtn{
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border-radius: 16px !important;
    border: 1px solid #dce6ff !important;
    background: #fff !important;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

body.hrjtek-portal .hrjtek-iconbtn .dashicons,
body.hrjtek-portal .hrjtek-iconbtn svg,
body.hrjtek-portal .hrjtek-iconbtn i{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 19px !important;
    width: 20px !important;
    height: 20px !important;
    color: #111827 !important;
}

/* Notification badge */
body.hrjtek-portal #hrjtek-notify-badge{
    top: -5px !important;
    right: -5px !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    border: 2px solid #fff;
}

/* Profile - same height as notification */
body.hrjtek-portal .hrjtek-profile{
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    min-width: 300px !important;
    max-width: 320px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 0 14px !important;

    border-radius: 16px !important;
    border: 1px solid #dce6ff !important;
    background: #fff !important;

    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

/* Avatar */
body.hrjtek-portal .hrjtek-profile .ava,
body.hrjtek-portal .hrjtek-profwrap .ava{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #2563eb !important;
    object-fit: cover !important;
}

/* Profile text spacing fix */
body.hrjtek-portal .hrjtek-profile .meta{
    flex: 1 1 auto !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;

    line-height: 1.05 !important;
    padding-top: 2px !important;
}

body.hrjtek-portal .hrjtek-profile .name{
    display: block !important;
    max-width: 185px !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;

    color: #111827 !important;

    margin: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.hrjtek-portal .hrjtek-profile .role{
    display: block !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;

    color: #64748b !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.hrjtek-portal .hrjtek-profile .chev{
  
    color: #64748b !important;
    flex-shrink: 0;
}

/* ======================================================
   FIX MISSING QUICK PAYSLIP + MESSAGE ICONS
====================================================== */

/* Quick Payslip Icon */
body.hrjtek-portal .hrjtek-chip--qp .dashicons,
body.hrjtek-portal .hrjtek-chip--qp i,
body.hrjtek-portal .hrjtek-chip--qp svg{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;

    font-size: 20px !important;
    line-height: 20px !important;

   

    margin-right: 8px !important;

    flex-shrink: 0 !important;
}

/* Message + Notification Icons */
body.hrjtek-portal .hrjtek-iconbtn .dashicons,
body.hrjtek-portal .hrjtek-iconbtn i,
body.hrjtek-portal .hrjtek-iconbtn svg{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 20px !important;
    height: 20px !important;

    font-size: 19px !important;
    line-height: 20px !important;

    color: #111827 !important;

    flex-shrink: 0 !important;
}

/* Button alignment fix */
body.hrjtek-portal .hrjtek-iconbtn{
    overflow: visible !important;
}

/* Quick payslip alignment */
body.hrjtek-portal .hrjtek-chip--qp{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ======================================================
   ICON HOVER FIX
====================================================== */

/* Message + Notification Hover */
body.hrjtek-portal .hrjtek-iconbtn:hover{
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Icons white on hover */
body.hrjtek-portal .hrjtek-iconbtn:hover .dashicons,
body.hrjtek-portal .hrjtek-iconbtn:hover i,
body.hrjtek-portal .hrjtek-iconbtn:hover svg{
    color: #fff !important;
    fill: #fff !important;
}

/* Quick Payslip Hover */
body.hrjtek-portal .hrjtek-chip--qp:hover{
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* Quick Payslip icon white */
body.hrjtek-portal .hrjtek-chip--qp:hover .dashicons,
body.hrjtek-portal .hrjtek-chip--qp:hover i,
body.hrjtek-portal .hrjtek-chip--qp:hover svg{
    color: #fff !important;
    fill: #fff !important;
}

/* Profile Hover */
body.hrjtek-portal .hrjtek-profile:hover{
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Profile text white */
body.hrjtek-portal .hrjtek-profile:hover .name,
body.hrjtek-portal .hrjtek-profile:hover .role,
body.hrjtek-portal .hrjtek-profile:hover .chev{
    color: #fff !important;
}

body.hrjtek-portal .hrjtek-chip--qp{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
     padding-left: 14px !important;
    padding-right: 18px !important;
}

body.hrjtek-portal .hrjtek-chip--qp .dashicons{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

     margin-right: 0 !important;

    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;

    font-size: 20px !important;
    line-height: 20px !important;

    
    opacity: 1 !important;
    visibility: visible !important;
}

body.hrjtek-portal .hrjtek-chip--qp:hover .dashicons{
    color: #fff !important;
}
/* ======================================================
   PREMIUM COMPACT PROFILE CARD
====================================================== */

body.hrjtek-portal .hrjtek-profile{
    height: 50px !important;

    min-width: 240px !important;
    max-width: 240px !important;

    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    border-radius: 16px !important;

    border: 1px solid #e6eefc !important;

    background: #ffffff !important;

    box-shadow: 0 2px 10px rgba(15,23,42,.04);

    transition: all .2s ease;
}

/* Hover */
body.hrjtek-portal .hrjtek-profile:hover{
    border-color: #d6e4ff !important;
    background: #f8fbff !important;
}

/* Avatar */
body.hrjtek-portal .hrjtek-profile .ava,
body.hrjtek-portal .hrjtek-profwrap .ava{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    border-radius: 50% !important;

    border: 1.5px solid #2563eb !important;

    object-fit: cover !important;
}

/* Text wrapper */
body.hrjtek-portal .hrjtek-profile .meta{
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 1px;

    line-height: 1;
}

/* Name */
body.hrjtek-portal .hrjtek-profile .name{
    font-size: 13px !important;
    font-weight: 700 !important;

    color: #111827 !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.1 !important;

    max-width: 145px !important;
}

/* Role */
body.hrjtek-portal .hrjtek-profile .role{
    font-size: 11px !important;
    font-weight: 500 !important;

    color: #7b8794 !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.1 !important;
}

/* Arrow */
body.hrjtek-portal .hrjtek-profile .chev{   
    font-size: 16px !important;
    color: #6b7280 !important;
    flex-shrink: 0;
}

/* ======================================================
   PROFILE ARROW SPACING FIX
====================================================== */

body.hrjtek-portal .hrjtek-profile{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;  
}

/* Text wrapper */
body.hrjtek-portal .hrjtek-profile .meta{
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

/* Arrow near text */
body.hrjtek-portal .hrjtek-profile .chev{
    margin-left: 2px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
}

/* Name */
body.hrjtek-portal .hrjtek-profile .name{
    max-width: 150px !important;
}
/* ======================================================
   PROFILE HOVER TEXT FIX
====================================================== */

/* Profile hover background */
body.hrjtek-portal .hrjtek-profile:hover{
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Name visible */
body.hrjtek-portal .hrjtek-profile:hover .name{
    color: #ffffff !important;
}

/* Role visible */
body.hrjtek-portal .hrjtek-profile:hover .role{
    color: rgba(255,255,255,.85) !important;
}

/* Arrow visible */
body.hrjtek-portal .hrjtek-profile:hover .chev{
    color: #ffffff !important;
}

/* Avatar border */
body.hrjtek-portal .hrjtek-profile:hover .ava{
    border-color: rgba(255,255,255,.7) !important;
}

/* ======================================================
   PROFILE DROPDOWN ARROW WHITE ON HOVER - EXACT HTML FIX
====================================================== */

body.hrjtek-portal .hrjtek-profile:hover > span.chev,
body.hrjtek-portal .hrjtek-profile:hover > span.chev span,
body.hrjtek-portal .hrjtek-profile:hover > span.chev .dashicons,
body.hrjtek-portal .hrjtek-profile:hover > span.chev .dashicons:before{
    color: #ffffff !important;
    opacity: 1 !important;
}

body.hrjtek-portal .hrjtek-profile:hover > span.chev{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.hrjtek-portal .hrjtek-profile:hover > span.chev .dashicons{
    font-size: 18px !important;
    line-height: 18px !important;
}

/* ======================================================
   HEADER ICON CONSISTENCY FIX
====================================================== */

body.hrjtek-portal .hrjtek-chip--qp .dashicons,
body.hrjtek-portal .hrjtek-iconbtn .dashicons{
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #1f2937 !important;
    opacity: .95 !important;

    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* Payslip icon should not look weak */
body.hrjtek-portal .hrjtek-chip--qp .dashicons{
    font-size: 19px !important;
    width: 19px !important;
    height: 19px !important;
    line-height: 19px !important;
}

/* Message icon slightly smaller because it looks heavier */
body.hrjtek-portal .hrjtek-iconbtn .dashicons-email-alt2,
body.hrjtek-portal .hrjtek-iconbtn .dashicons-format-chat{
    font-size: 16px !important;
}

/* Bell balance */
body.hrjtek-portal .hrjtek-iconbtn .dashicons-bell{
    font-size: 17px !important;
}

/* Hover */
body.hrjtek-portal .hrjtek-chip--qp:hover .dashicons,
body.hrjtek-portal .hrjtek-iconbtn:hover .dashicons{
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ======================================================
   PROFILE CARD AUTO WIDTH FIX
====================================================== */

body.hrjtek-portal .hrjtek-profile{
    width: fit-content !important;
    min-width: unset !important;
    max-width: unset !important;

    padding-right: 12px !important;
}

/* Name width control */
body.hrjtek-portal .hrjtek-profile .name{
    max-width: 170px !important;
}

/* Arrow spacing */
body.hrjtek-portal .hrjtek-profile .chev{
    margin-left: 4px !important;
}

.hrjtek-whoout-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}

.hrjtek-whoout-date {
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.hrjtek-whoout-count {
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #fed7aa;
}



.hrjtek-whoout-empty {
  min-height: 190px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: #64748b;
}

.hrjtek-whoout-empty .dashicons {
  width: 42px;
  height: 42px;
  font-size: 42px;
  color: #16a34a;
}

.hrjtek-whoout-empty strong {
  color: #0f172a;
  font-size: 15px;
}

.hrjtek-whoout-empty small {
  color: #64748b;
  font-size: 12px;
}
.hrjtek-whoout-subtitle {
  font-size: 13px;
}

.hrjtek-whoout-date {
  font-size: 11px;
}

.hrjtek-whoout-count {
  padding: 6px 10px;
  font-size: 11px;
}


/* Premium Who is Out - HR Dashboard */
.hrjtek-whoout-premium {
  background: #ffffff;
  border-radius: 26px;  
  border: 1px solid #e7edfb;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.hrjtek-whoout-premium-head {
  display: flex;
  justify-content: space-between;
 
  gap: 16px;
 }



.hrjtek-whoout-stat {
  position: relative;
  display: flex;
  align-items: center;
  
  background: linear-gradient(135deg, #fbfcff 0%, #f2f0ff 100%);
  border: 1px solid #e3e7fb;
  overflow: hidden;
}

.hrjtek-whoout-stat-icon {
 
  border-radius: 50%;
  background: #ebe6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b42f3;
}



.hrjtek-whoout-stat span {
  display: block;
  font-weight: 700;
 
}

.hrjtek-whoout-stat strong {
  display: block;

  color: #07122f;
 
}

.hrjtek-whoout-illustration {
  margin-left: auto;
  width: 150px;
  height: 80px;
  opacity: 0.35;
  background:
    radial-gradient(circle at 25% 50%, #ffffff 0 14px, transparent 15px),
    radial-gradient(circle at 70% 25%, #8b7cff 0 4px, transparent 5px),
    linear-gradient(135deg, transparent 45%, #8b7cff 46% 48%, transparent 49%),
    linear-gradient(160deg, transparent 55%, #8b7cff 56% 58%, transparent 59%);
}

.hrjtek-whoout-premium-list::-webkit-scrollbar {
  width: 7px;
}

.hrjtek-whoout-premium-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 30px;
}

.hrjtek-whoout-premium-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.hrjtek-whoout-user {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.hrjtek-whoout-big-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2864ff 0%, #7a6cff 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 22px rgba(40, 100, 255, 0.28);
}

.hrjtek-whoout-big-avatar span {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #16b34f;
  border: 4px solid #ffffff;
}

.hrjtek-whoout-user-info {
  min-width: 0;
}

.hrjtek-whoout-user-info strong {
  display: block;
  margin-bottom: 10px;
  color: #07122f;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
}

.hrjtek-whoout-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  color: #66708a;
  font-size: 15px;
  font-weight: 600;
}

.hrjtek-whoout-meta .dashicons {
  font-size: 17px;
  width: 17px;
  height: 17px;
  color: #22c55e;
}

.hrjtek-whoout-meta:nth-child(3) .dashicons {
  color: #94a3b8;
}

.hrjtek-whoout-meta em {
  font-style: normal;
  color: #94a3b8;
}

.hrjtek-whoout-status {
  min-width: 118px;
  text-align: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: #dcfce7;
  color: #079042;
  border: 1px solid #bbf7d0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
}



.hrjtek-whoout-viewall:hover {
  color: #321fd4;
}

/* FINAL Who is Out compact fix for dashboard left column */
.hrjtek-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(430px, 0.8fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: stretch;
}

.hrjtek-whoout-premium {
  border-radius: 22px !important;
  }



.hrjtek-whoout-user {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.hrjtek-whoout-big-avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  font-size: 20px !important;
}

.hrjtek-whoout-user-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.hrjtek-whoout-user-info strong {
  font-size: 16px !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hrjtek-whoout-meta {
  font-size: 13px !important;
  margin-top: 4px !important;
  gap: 6px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.hrjtek-whoout-meta .dashicons {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
}

.hrjtek-whoout-status {
  min-width: 78px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}


/* Reference-style Who is Out layout */


.hrjtek-whoout-premium {
  border-radius: 26px !important;
  min-height: 620px;
}



.hrjtek-whoout-user {
  gap: 22px !important;
}

.hrjtek-whoout-big-avatar {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  font-size: 28px !important;
}

.hrjtek-whoout-user-info strong {
  font-size: 22px !important;
  margin-bottom: 10px !important;
}

.hrjtek-whoout-meta {
  font-size: 16px !important;
  margin-top: 8px !important;
  gap: 10px !important;
}

.hrjtek-whoout-status {
  min-width: 120px !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
}



/* FIX: keep Who is Out and My Attendance as separate cards */
.hrjtek-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.hrjtek-dashboard-grid > .hrjtek-col {
  min-width: 0 !important;
}

/* Who is Out compact reference style */
.hrjtek-whoout-premium {

  min-height: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* Employee list */


.hrjtek-whoout-premium-item {  
  justify-content: space-between; 
  background: #ffffff;
  border: 1px solid #e7edfb;  
  transition: all 0.2s ease;
}
.hrjtek-whoout-premium-item {
  display: flex;
  align-items: center;
   min-height: 92px !important;
  margin-bottom: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035) !important;
}
.hrjtek-whoout-user {
  flex: 1 !important;
  min-width: 0 !important;
  gap: 18px !important;
}

.hrjtek-whoout-big-avatar {
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  font-size: 24px !important;
}

.hrjtek-whoout-user-info strong {
  font-size: 19px !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hrjtek-whoout-meta {
  font-size: 14px !important;
  margin-top: 5px !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.hrjtek-whoout-status {
  min-width: 96px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
}

/* View all footer */


/* FINAL: Who is Out - soft premium compact version */
.hrjtek-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.hrjtek-dashboard-grid > .hrjtek-col {
  min-width: 0 !important;
}

/* main card */
.hrjtek-whoout-premium {
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid #e8eef8 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04) !important;
  min-height: auto !important;
}

/* header */




/* summary box */
.hrjtek-whoout-stat {  
  background: linear-gradient(135deg, #fbfcff 0%, #f4f1ff 100%) !important;
}

/* employee card */

.hrjtek-whoout-premium-list {
   flex: 1 1 auto !important;
  max-height: 345px !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
  padding-bottom: 12px !important;
}
.hrjtek-whoout-user {
  gap: 16px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.hrjtek-whoout-big-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  font-size: 22px !important;
}

.hrjtek-whoout-user-info strong {
  font-size: 17px !important;
  line-height: 1.2 !important;
  margin-bottom: 7px !important;
  max-width: 220px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hrjtek-whoout-meta {
  font-size: 13px !important;
  margin-top: 4px !important;
  gap: 7px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.hrjtek-whoout-meta .dashicons {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

.hrjtek-whoout-status {
  min-width: 82px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

/* footer link */

.hrjtek-whoout-viewall {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    text-align: center !important;

    margin-top: auto !important;
    padding: 16px !important;

    border-top: 1px solid #e8eef8 !important;
    background: #fff !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    color: #5b42f3 !important;

    gap: 8px !important;
}

.hrjtek-whoout-viewall .dashicons {
    margin: 0 !important;
}
/* remove extra empty height */
.hrjtek-whoout-premium:has(.hrjtek-whoout-premium-list) {
  padding-bottom: 0 !important;
}

/* Summary box: cleaner, less heavy */


.hrjtek-whoout-stat-icon {
 
  background: #f1edff !important;
}

.hrjtek-whoout-stat-icon .dashicons {
   color: #5b42f3 !important;
}

.hrjtek-whoout-stat span {
 
  font-weight: 700 !important;
}

.hrjtek-whoout-stat strong {
   color: #0f172a !important;
}

/* FINAL EXACT: Who is Out top + summary like reference */
.hrjtek-whoout-premium {
  padding: 18px 18px 0 !important;
  border-radius: 26px !important;
  background: #fff !important;   
   display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 620px !important;
  padding-bottom: 0 !important;
}

/* Top heading area */


.hrjtek-whoout-premium-head h3 {
    margin:0;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    color:#6B7280;    
    line-height: 1.2 !important;
}
.hrjtek-whoout-premium-head p {  
      margin-top: 4px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.hrjtek-whoout-premium-head p strong {
  
  margin-right: 4px;
  font-size:16px;
    font-weight:900;
    color:#4f46e5;
}

/* Summary card like reference */
.hrjtek-whoout-stat {
  position: relative !important;  
  background: linear-gradient(135deg, #fbfcff 0%, #f4f1ff 72%, #eee9ff 100%) !important;
  border: 1px solid #dedff3 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
   min-height: 84px !important;
    padding: 14px 18px !important;    
    border-radius: 16px !important;
    gap: 12px !important;
}

/* Left purple circle */
.hrjtek-whoout-stat-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  border-radius: 50% !important;
  background: #ebe6ff !important;
  color: #5b42f3 !important;
}

.hrjtek-whoout-stat-icon .dashicons {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: #5b42f3 !important;
}

/* Text */
.hrjtek-whoout-stat span {
 font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 2px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  
}

.hrjtek-whoout-stat strong {
  font-size: 20px !important;
    font-weight: 700 !important;
  line-height: 1.15 !important;  
  color: #07122f !important;
}

/* Add right side soft illustration */
/* FINAL FIX: Who is Out icon and illustration alignment */

/* Top-right calendar icon like reference */
.hrjtek-whoout-premium-head {
  position: relative !important;
   display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 12px !important;

}

.hrjtek-whoout-cal {
  width: 74px !important;
  height: 54px !important;
  min-width: 74px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #f4f0ff !important;
  border: 1px solid #ded8ff !important;
  border-radius: 13px !important;

  color: #5b42f3 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Summary card: keep right-side illustration visible */
.hrjtek-whoout-stat {
  position: relative !important;
  overflow: hidden !important;
  padding-right: 135px !important;
   margin-top: 8px !important;
    margin-bottom: 14px !important;
}

/* Remove old/large broken illustration if present */
.hrjtek-whoout-illustration {
  display: none !important;
}

/* Reference-like beach/palm placeholder illustration */
.hrjtek-whoout-stat::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 14px !important;
  width: 105px !important;
  height: 62px !important;
  opacity: 0.22 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: right bottom !important;
  background-image: url("data:image/svg+xml,%3Csvg width='130' height='76' viewBox='0 0 130 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='31' cy='49' r='16' fill='%23ffffff'/%3E%3Cpath d='M64 56H112' stroke='%238b7cff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M75 56L68 72M92 56L85 72' stroke='%238b7cff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M72 49H103L94 61H63L72 49Z' stroke='%238b7cff' stroke-width='4' fill='none'/%3E%3Cpath d='M89 21C87 34 82 45 74 56' stroke='%238b7cff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M89 21C77 18 68 21 61 29C72 29 81 27 89 21Z' fill='%238b7cff'/%3E%3Cpath d='M89 21C96 12 106 8 119 10C109 17 99 22 89 21Z' fill='%238b7cff'/%3E%3Cpath d='M89 21C96 21 103 25 108 34C99 32 93 28 89 21Z' fill='%238b7cff'/%3E%3Cpath d='M89 21C84 12 76 8 66 7C72 15 80 20 89 21Z' fill='%238b7cff'/%3E%3Cpath d='M7 16C12 12 17 12 22 16' stroke='%238b7cff' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M31 9C36 5 41 5 46 9' stroke='%238b7cff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.hrjtek-whoout-cal .dashicons{
    font-size:24px !important;
    width:24px !important;
    height:24px !important;
    line-height:24px !important;
    margin:0 !important;
}
.hrjtek-whoout-cal .dashicons,
.hrjtek-whoout-cal .dashicons:before {
  color: #5b42f3 !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
}

.hrjtek-whoout-big-avatar.hrjtek-whoout-avatar.blue {
  background: linear-gradient(135deg,#4f7cff,#6366f1) !important;
}

.hrjtek-whoout-big-avatar.hrjtek-whoout-avatar.purple {
  background: linear-gradient(135deg,#8b5cf6,#a855f7) !important;
}

.hrjtek-whoout-big-avatar.hrjtek-whoout-avatar.cyan {
  background: linear-gradient(135deg,#06b6d4,#3b82f6) !important;
}

.hrjtek-whoout-big-avatar.hrjtek-whoout-avatar.green {
  background: linear-gradient(135deg,#10b981,#22c55e) !important;
}

.hrjtek-whoout-big-avatar.hrjtek-whoout-avatar.orange {
  background: linear-gradient(135deg,#f59e0b,#f97316) !important;
}

.hrjtek-whoout-big-avatar.hrjtek-whoout-avatar.pink {
  background: linear-gradient(135deg,#ec4899,#d946ef) !important;
}