/* Header */
.emp-hero { background:#f6f9ff; border:1px solid #e8eef9; border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.emp-hero h1{ margin:0 0 6px; font-size:28px; }
.emp-hero p{ margin:0; color:#556; }

/* Toolbar */
.emp-toolbar{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  margin:10px 0 8px;
}
.emp-search{ position:relative; }
.emp-search input{
  width:100%; height:44px; padding:0 12px 0 36px;
  border:1px solid #dbe2ef; border-radius:12px; background:#fff;
}
.emp-search .dashicons{ position:absolute; left:10px; top:10px; color:#7a8aa0; }

.emp-count{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px dashed #dbe2ef; border-radius:12px; background:#fff; }
.emp-actions{ display:flex; gap:8px; justify-self:end; }

/* buttons – force visible text even if theme overrides */
.hrjtek-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1;text-decoration:none}
.hrjtek-btn .dashicons{font-size:18px;line-height:1}
.hrjtek-btn .btn-text{display:inline}
.hrjtek-btn.outline{border:1px solid #dbe2ef;border-radius:10px;padding:8px 12px;
background: linear-gradient(90deg, #0C3DF4, #02B4FE);
    color: #fff; 
    

}
.hrjtek-btn.outline:hover{background: #cfe0ff;
    border-color: #0c3df4; color:#000;}
.hrjtek-btn.outline:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(12,61,244,.18)}
.hrjtek-btn.primary{background:linear-gradient(90deg,#0C3DF4,#02B4FE);color:#fff;border:0;border-radius:10px;padding:8px 14px}
.hrjtek-btn.primary:hover{filter:brightness(1.02)}

/* count line under toolbar */
.emp-countline{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; color:#1c2b4a;
}
.emp-countline__label{ margin-left:2px; }
.emp-countline__tail{ margin-left:6px; color:#5e6b81; }

/* filters (when opened) */
.emp-filters{display:flex;gap:10px;margin:8px 0 12px}
.emp-filters select{height:42px;border:1px solid #dbe2ef;border-radius:10px;padding:0 10px;background:#fff}



/* table */
.emp-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #e6eaf2;border-radius:12px;overflow:hidden}
.emp-table thead th{font-weight:600;color:#5a6680;background:#f8f9fb;padding:12px 14px;text-align:left;border-bottom:1px solid #e6eaf2}
.emp-table tbody td{padding:14px 14px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.emp-table tbody tr:hover{background:#fafbfd}
.emp-table .t-right{text-align:right}.emp-table .t-center{text-align:center}

.emp-person{display:flex;align-items:center;gap:12px}
.emp-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.emp-name{font-weight:700;color:#16223a}
.emp-sub{font-size:12px;color:#6a7690}

.emp-id{ display:flex; align-items:center; gap:10px; }
.emp-email{ font-size:12px; color:#6a7; }

.emp-chips .chip{
  display:inline-block; background:#eef4ff; border:1px solid #d6e3ff; color:#294674;
  padding:4px 8px; border-radius:999px; font-size:12px; margin:2px;
}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #e3e7ef;border-radius:10px;background:#fff;font-size:12px}
.chip--soft{background:#fafbff}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#6f7ef3}
.chip.type-full-time{background:#edf3ff;border-color:#d9e5ff}
.chip.type-part-time{background:#ffeef6;border-color:#ffd8ea}
.chip.type-internship{background:#eef5ff;border-color:#dfeaff}
.chip.type-freelance{background:#fff5ec;border-color:#ffe3cc}

/* contract type pills (match reference colors) */
.pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:10px;font-size:12px;font-weight:600}
.pill--full-time{background:#eaf1ff;color:#3f6dd9}
.pill--part-time{background:#ffe8f4;color:#d14f9b}
.pill--internship{background:#efeaff;color:#6a54e1}
.pill--freelance{background:#ffeddc;color:#d97745}

/* Contract badges */
.badge{ display:inline-block; padding:6px 10px; border-radius:10px; font-size:12px; font-weight:600; }
.badge-full-time{ background:#eef7ff; border:1px solid #cfe5ff; color:#1a63d1; }
.badge-part-time{ background:#fff0f6; border:1px solid #ffcfe5; color:#c12578; }
.badge-internship{ background:#f4ffef; border:1px solid #d0f5bd; color:#2d7a15; }
.badge-freelance{ background:#fff8ec; border:1px solid #ffe0b3; color:#8a5a00; }
.badge-neutral{ background:#f5f7fb; border:1px solid #e0e5ef; color:#5b6b81; }

/* Kebab menu */
.kebab{position:relative;display:inline-block}
.kebab-btn{width:34px;height:34px;padding:15px 0 15px 0;border:1px solid #dbe2ef;background:#fff;border-radius:10px;cursor:pointer;position:relative}
.kebab-btn::before{content:"";display:block;width:4px;height:4px;border-radius:50%;background:#28324a;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 -6px 0 #28324a,0 6px 0 #28324a}
.kebab-btn:hover{background:#f3f5f8;border-color:#cfd8e3}
.kebab-btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(12,61,244,.18)}
.kebab-btn:focus{color:#fff;background-color:#569ff730;}
.kebab-menu{position:absolute;right:0;top:38px;min-width:160px;background:#fff;border:1px solid #e6eaf2;border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.08);padding:6px;z-index:10}
.kebab-menu a{display:block;padding:8px 10px;border-radius:8px;color:#1f2a44;text-decoration:none}
.kebab-menu a:hover{background:#f2f6ff}

/* ——— Footer + pagination ——— */
.emp-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;margin-bottom: 15px;}
.emp-results{color:#5f6b86;font-size:14px}
.emp-pagination{display:flex;align-items:center;gap:10px}
.pager-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 12px; border-radius:10px;
  border:1px solid #dbe2ef; background:#fff; color:#1f2a44; cursor:pointer;
}
.pager-btn:disabled{opacity:.5;cursor:not-allowed}
.pager-btn--prev::before,
.pager-btn--next::after{
  content:'';
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid #dbe2ef; background:#fff; color:#1f2a44;
  font-weight:700; font-size:14px;
}
.pager-btn--prev::before{ content:'‹'; }
.pager-btn--next::after{ content:'›'; }
.emp-pages{display:flex;gap:6px; }
.emp-ellipsis{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;color:#6c768d}

.emp-pagebtn{min-width:36px;height:36px;border:1px solid #dbe2ef;border-radius:10px;background:#fff}
.emp-pagebtn.is-active{border-color:#0C3DF4;box-shadow:0 0 0 3px rgba(12,61,244,.12)}

/* Pager */
.emp-pager{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.emp-pages{display:flex;align-items:center;gap:12px}
.emp-pagebtn{
  border:0; background:transparent; color:#2b3448;
  padding:6px 10px; border-radius:8px; cursor:pointer;
  min-width:auto; height:auto; line-height:1;
}
.emp-pagebtn:hover{background:#0C3DF4}
.emp-pagebtn.is-active{
  background:#3b82f6; color:#fff; border:0;
  padding:6px 10px; border-radius:8px;
}

.emp-pagebtn.is-active{ border-color:#0C3DF4; box-shadow:0 0 0 3px rgba(12,61,244,.12); }


/* row with total + actions */
.emp-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px}
.emp-totalchip{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f6f7fb;border:1px solid #e6eaf2;border-radius:12px}
.emp-totalchip__icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#eef2f8;color:#4b5b79}
.emp-totalchip__label{color:#22304a}.emp-totalchip__tail{color:#6b7891;margin-left:6px}

/* Department chip: white tag, grey border, small colored dot */
.chip.chip--tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid #e3e8f2;border-radius:10px;
  background:#fff;font-size:12px;font-weight:600;color:#2a3450;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#6f7ef3}
.dot--blue{background:#6f7ef3}
.dot--pink{background:#ff6db1}
.dot--orange{background:#f1873a}
.dot--teal{background:#18c1c7}

/* Contract type pastel pills (exact tone/weight) */
.pill{
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:10px;font-size:12px;font-weight:700;line-height:1;
  border:1px solid transparent;
}
/* Contract type: Permanent (same palette as Full-time) */
.pill--permanent{
  background:#edf3ff;      /* light blue */
  border:1px solid #d9e5ff;
  color:#3a6be0;           /* blue text */
  border-radius:10px;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  line-height:1;
}

.pill--full-time{ background:#edf3ff; border-color:#d9e5ff; color:#3a6be0; }
.pill--part-time{ background:#ffeaf4; border-color:#ffd7ea; color:#d14f9b; }
.pill--internship{ background:#efeaff; border-color:#e0d7ff; color:#6a54e1; }
.pill--freelance{ background:#fff1e6; border-color:#ffd9b8; color:#cc6b32; }

/* Keep table spacing subtle so chips/pills breathe */
.emp-table tbody td{ padding:14px 16px; }

/* Add Employee Styles Start From Here */

/* ---------- Modal shell ---------- */
.emp-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}
.emp-modal[hidden]{display:none}
.emp-modal__backdrop{position:absolute;inset:0;background:rgba(9,14,30,.45)}
.emp-modal__dialog{position:relative;max-width:980px;width:min(980px,96vw);max-height:92vh;overflow:auto;padding:18px 18px 22px;border-radius:14px}
.emp-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.emp-modal__title{margin:0;font-size:18px}
.emp-modal__close{border:0;background:#eef2ff;color:#1d2a49;width:32px;height:32px;border-radius:8px;cursor:pointer}

/* ---------- Photo uploader ---------- */
.emp-photo{display:flex;justify-content:center;margin:6px 0 12px}
.emp-avatar-upload{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.emp-avatar-circle{width:96px;height:96px;border-radius:999px;background:linear-gradient(90deg,var(--hrjtek-brand-1,#0C3DF4),var(--hrjtek-brand-2,#02B4FE));display:grid;place-items:center;position:relative}
.emp-avatar-preview{width:90px;height:90px;border-radius:999px;object-fit:cover;border:3px solid #fff}
.emp-avatar-plus{position:absolute;inset:auto;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;background:#fff;color:#0c3df4;font-weight:700;box-shadow:0 4px 14px rgba(12,61,244,.25)}
.emp-avatar-text{font-size:13px;color:#5d6a84}

/* ---------- Wizard tabs ---------- */
.emp-tabs__nav{display:flex;gap:10px;margin:6px 0 12px}
.emp-tab{border:1px solid #e1e7f2;background:#fff;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer;color:#1f2a44}
.emp-tab.is-active{background: linear-gradient(90deg, #0c3df478, #0c3df4);border-color:#d7e3ff;box-shadow:0 2px 8px rgba(12,61,244,.08)}
.emp-panel{display:none}
.emp-panel.is-active{display:block}

button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focus {
    background: linear-gradient(90deg, #0c3df478, #0c3df4) !important;
border-color: #d7e3ff;
}

/* ---------- Layout helpers ---------- */
.emp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.emp-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.emp-actions-row{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}

/* keep fields consistent with portal */
.emp-wizard .hrjtek-field > span{font-size:13px;color:var(--hrjtek-sub,#667192)}
.emp-wizard .hrjtek-field input,
.emp-wizard .hrjtek-field select{height:44px;border-radius:10px;border:1px solid #d7dbe1;padding:0 12px;background:#f7faff;width:100%}
.emp-wizard .hrjtek-field input:focus,
.emp-wizard .hrjtek-field select:focus{outline:none;border-color:var(--hrjtek-accent,#0C3DF4);box-shadow:0 0 0 4px var(--hrjtek-ring,rgba(12,61,244,.15))}

/* repeater rows */
.rep-row{position:relative;margin:8px 0;padding:8px;border:1px dashed #e2e8f5;border-radius:12px;background:#fff}
.rep-row .rep-del{position:absolute;right:6px;top:6px;border:0;background:#ffe8ea;color:#c0392b;width:26px;height:26px;border-radius:8px;cursor:pointer}

/* small button */
.hrjtek-btn.sm{height:36px;padding:0 12px;font-size:12px;border-radius:10px}
.emp-subtitle{font-weight:700;color:#223355;margin:6px 0}

/* 3-column grid on wide, 1 on narrow */
@media (max-width: 960px){
  .emp-grid-3{grid-template-columns:1fr}
}
/* ===== Repeater sections (Emergency Contacts, Dependents) ===== */
.rep-list{               /* container for repeater rows (#emg-wrap, #dep-wrap) */
  display:grid;
  gap:12px;
  margin-top:10px;
}
.rep-row{
  position:relative;
  padding:12px 56px 12px 12px;     /* extra space on right for the delete button */
  background:#f6f9ff;
  border:1px solid #e6ecf5;
  border-radius:12px;
}
.rep-row .emp-grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.rep-del{                          /* the small "×" chip button */
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);      /* <-- centers vertically */
  width:36px;
  height:28px;
  display:grid;                    /* perfect centering of the X */
  place-items:center;
  border:0;
  border-radius:10px;
  background:#e9f0ff;
  color:#1f2a44;
  font-size:18px;                  /* bigger X, still subtle */
  line-height:1;
  cursor:pointer;
}
.rep-del:hover{ filter:brightness(0.97); }

/* Headings / add buttons spacing */
.emp-section-title{ margin:18px 0 8px; font-weight:600; }
.emp-addbtn{ margin-top:6px; }

/* ===== Languages + Disability Notes row ===== */
.emp-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
select[multiple].lang-select,
select[multiple][name="languages[]"]{  /* works even if you don't add lang-select */
  min-height:140px;                    /* match the textarea height */
  background:#f6f9ff;
  border:1px solid #e6ecf5;
  border-radius:12px;
  padding:8px 10px;
}
.emp-textarea,
textarea[name="disability_notes"]{
  min-height:140px;
  background:#f6f9ff;
  border:1px solid #e6ecf5;
  border-radius:12px;
  padding:10px 12px;
  resize:vertical;
}

/* Small screens: stack nicely */
@media (max-width: 880px){
  .rep-row .emp-grid-3{ grid-template-columns:1fr; }
  .emp-grid-2{ grid-template-columns:1fr; }
  .rep-del{ top:8px; transform:none; } /* keep visible when stacked */
}

/* Add Employee Styles Ends Here */

/* Employee Profile CSS Goes Here */
/* Profile header */
.emp-prof-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:16px; }
.emp-prof-left{ display:flex; gap:16px; align-items:center; }
.emp-prof-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; }
.emp-prof-name{ margin:0 0 4px 0; }
.emp-prof-sub{ color:var(--hrjtek-sub,#6b7280); display:flex; gap:8px; align-items:center; }
.emp-prof-tags{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.tag{ background:#f3f6ff; border:1px solid #e3e9ff; padding:4px 8px; border-radius:10px; font-size:12px; }
.tag--status{ background:#f8f9ff; border-color:#dfe5ff; }
.emp-prof-right{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:420px; }
.kv{ display:flex; flex-direction:column; gap:2px; }
.kv > b{ font-weight:600; font-size:12px; color:#6b7280; }
.kv--block span{ white-space:pre-wrap; }

/* Pills reused from list */
.pill{ font-size:12px; padding:4px 10px; border-radius:10px; border:1px solid #e6ebff; background:#f5f8ff; }
.pill--full{ color:#3564e5; background:#eef3ff; border-color:#dce7ff; }
.pill--freelance{ color:#b45309; background:#fff3e6; border-color:#ffe2c2; }
.pill--intern{ color:#6d28d9; background:#f3e8ff; border-color:#e4d2ff; }
.pill--muted{ color:#374151; background:#f5f6f8; border-color:#e5e7eb; }

/* Tabs */
.emp-tabs{ display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.emp-tab{ height:36px; padding:0 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.emp-tab.is-active{ background:linear-gradient(90deg,#0C3DF4,#02B4FE); color:#fff; border-color:transparent; }
.emp-panel{ display:none; }
.emp-panel.is-active{ display:block; }

/* Panel layout */
.hrjtek-panel{ background:var(--hrjtek-card,#fff); border:1px solid #e6e8eb; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(2,23,64,.05); margin-bottom:12px; }
.two-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width: 900px){
  .emp-prof-right{ grid-template-columns:1fr; min-width:0; }
  .two-col{ grid-template-columns:1fr; }
}

/* EMPLOYEE PROFILE — Tabs */
.emp-prof .tabs {
  display: flex;
  gap: 12px;
}

/* Base reset for our tab buttons so they don't inherit Astra's global button styles */
.emp-prof .tabs button.tabbtn {
  background: #fff !important;             /* override Astra */
  background-image: none !important;
  color: #222 !important;                   /* make text visible */
  -webkit-text-fill-color: #222 !important; /* Safari text fill */
  border: 1px solid #e6ebf2 !important;
  border-radius: 12px;
  padding: 10px 14px;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(2,23,64,.04);
}

/* Active tab keeps your gradient and white text */
.emp-prof .tabs button.tabbtn.is-active {
  background: linear-gradient(90deg,#0C3DF4,#02B4FE) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(12,61,244,.25);
}

/* Hover (optional) */
.emp-prof .tabs button.tabbtn:not(.is-active):hover {
  border-color: #cfd7e6 !important;
  box-shadow: 0 4px 14px rgba(2,23,64,.06);
}

/* Make sure any icon/span inside inherits the forced color */
.emp-prof .tabs .tabbtn * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
span.dashicons.dashicons-portfolio {
    color: #222 !important;
}
span.dashicons.dashicons-welcome-learn-more {
    color: #222 !important;
}
span.dashicons.dashicons-groups {
       color: #222 !important;
}
/* section titles with blue icons */
.emp-prof .sec h4{
  display:flex; align-items:center; gap:8px; margin:0 0 8px 0;
}
.emp-prof .sec h4 .dashicons{
  color:#222;           /* blue */
  font-size:18px;
  width:18px; height:18px; line-height:1;
}
.emp-prof .hrjtek-exp-ul li,
.emp-prof .hrjtek-edu-ul li,
.emp-prof .hrjtek-dep-ul li{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; border-bottom:1px solid #e6ebf2;
}

.emp-prof .row-actions{display:flex; gap:8px;}
.emp-prof .iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; cursor:pointer;
  background:#f3f6ff; border:1px solid #dfe7ff;
}
.emp-prof .iconbtn .dashicons{font-size:14px; width:14px; height:14px; line-height:1;}
.emp-prof .iconbtn.danger{ background:#fff3f3; border-color:#ffd9d9; color:#c62828;}

/* Tick (check) icon before each saved row in Experience, Education, Dependents */
.emp-prof .hrjtek-exp-ul .hrjtek-exp-li {
  gap: 12px;                 /* a little space between the tick and text */
  align-items: left;
}
.emp-prof .hrjtek-exp-ul .hrjtek-exp-li::before {
  content: "\f147";          /* dashicons-yes (tick) — use "\f12a" for yes-alt */
  font-family: "dashicons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: #0C3DF4;            /* brand blue to match your headers */
}


.emp-prof .hrjtek-exp-ul { text-align:left; }

.emp-prof .hrjtek-exp-li{
  justify-content:flex-start !important;   /* no space-between */
  gap:12px;                                /* tick ↔ text gap */
}

.emp-prof .hrjtek-exp-li > div:first-child{
  flex:1 1 auto;
  min-width:0;       /* prevents weird centering on long lines */
}

.emp-prof .hrjtek-exp-li .item-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}


.emp-prof .hrjtek-exp-li > button:last-of-type{
  margin-left:auto;
}

.kebab-danger.hrjtek-link{
  color:#b42318;
  text-decoration:underline;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.kebab-danger.hrjtek-link:hover{ text-decoration:none; }

/* Employee Profile CSS Ends Here */