.payroll-page{display:grid;gap:18px}
.payroll-hero{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding:24px;border:1px solid #e8e0f1;border-radius:20px;background:linear-gradient(135deg,#fff 0%,#faf7ff 100%);box-shadow:0 10px 30px rgba(68,39,92,.05)}
.payroll-hero h2{margin:5px 0 8px;font-size:24px;color:#291b37}
.payroll-hero p{max-width:760px;margin:0;color:#766a82;line-height:1.9}
.payroll-eyebrow{font-size:12px;font-weight:900;color:#7c3aed}
.payroll-hero__actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.payroll-tabs{display:flex;gap:8px;padding:6px;border:1px solid #e8e0f1;border-radius:15px;background:#fff;overflow:auto}
.payroll-tab{border:0;background:transparent;color:#655970;border-radius:11px;padding:10px 14px;font-family:inherit;font-weight:800;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.payroll-tab:hover{background:#faf7ff;color:#6d28d9}
.payroll-tab.is-active{background:#f0e8ff;color:#5b21b6;box-shadow:inset 0 0 0 1px #ddcff8}
.payroll-alert{display:flex;align-items:center;gap:10px}
.payroll-alert span{flex:1}
.payroll-loading,.payroll-empty{min-height:220px;border:1px dashed #dcd1e6;border-radius:18px;background:#fff;display:grid;place-items:center;align-content:center;gap:10px;color:#796d84;text-align:center;padding:24px}
.payroll-loading i,.payroll-empty>i{font-size:28px;color:#8b5cf6}
.payroll-empty h3,.payroll-empty p{margin:0}
.payroll-empty--compact{min-height:140px}
.payroll-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.payroll-kpi{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid #ebe4f1;border-radius:16px;background:#fff}
.payroll-kpi>i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#f3edff;color:#6d28d9}
.payroll-kpi small,.payroll-kpi span{display:block;color:#887a93}
.payroll-kpi strong{display:block;font-size:24px;color:#2f213c;margin:1px 0}
.payroll-kpi.is-warning{border-color:#fed7aa;background:#fffaf3}
.payroll-kpi.is-warning>i{background:#ffedd5;color:#c2410c}
.payroll-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:14px;margin-top:14px}
.payroll-grid--periods{grid-template-columns:minmax(0,1fr);margin-top:0}
.payroll-panel{padding:18px;border:1px solid #e9e2ef;border-radius:18px;background:#fff;min-width:0}
.payroll-panel__head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px}
.payroll-panel__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}

.payroll-panel__head h3{margin:3px 0 0;font-size:18px}
.payroll-panel__head small{color:#8a7c94}
.payroll-flow{display:grid;gap:9px}
.payroll-flow__item{display:flex;gap:11px;align-items:center;padding:11px;border:1px solid #eee8f4;border-radius:13px}
.payroll-flow__item>span{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#eee7fd;color:#6d28d9;font-weight:900}
.payroll-flow__item b,.payroll-flow__item small{display:block}
.payroll-flow__item small{color:#85788f;margin-top:2px}
.payroll-summary-list{display:grid;gap:9px;margin:0 0 14px}
.payroll-summary-list>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0eaf4}
.payroll-summary-list dt{color:#887a93}.payroll-summary-list dd{margin:0;font-weight:800}
.payroll-table-wrap{overflow:auto;border:1px solid #eee8f4;border-radius:14px}
.payroll-table{width:100%;border-collapse:collapse;min-width:720px}
.payroll-table th,.payroll-table td{padding:11px 10px;border-bottom:1px solid #f0ebf4;text-align:right;vertical-align:middle;font-size:13px}
.payroll-table th{background:#faf8fc;color:#6d6078;font-size:12px;white-space:nowrap}
.payroll-row-number{width:64px;text-align:center!important;font-variant-numeric:tabular-nums}
.payroll-sort-button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:850;padding:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.payroll-sort-button i{font-size:10px;opacity:.55;transition:opacity .15s ease,transform .15s ease}
.payroll-sort-button:hover,.payroll-sort-button.is-sorted{color:#6d28d9}
.payroll-sort-button:hover i,.payroll-sort-button.is-sorted i{opacity:1}
.payroll-directory-tools{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(145px,.7fr)) auto;gap:9px;align-items:center;margin:0 0 12px}
.payroll-directory[data-directory="services"] .payroll-directory-tools{grid-template-columns:minmax(240px,1.5fr) minmax(140px,.65fr) minmax(140px,.65fr) minmax(170px,.75fr) auto}
.payroll-directory-search{position:relative;display:block}
.payroll-directory-search>i{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:#8a7c94;pointer-events:none}
.payroll-directory-search .input{width:100%;padding-inline-start:36px}
.payroll-directory-tools .select{width:100%;min-width:0}
.payroll-filter-count{justify-self:end;white-space:nowrap;color:#6f6179;font-size:11px;font-weight:850;background:#f7f2ff;border:1px solid #e6daf9;border-radius:999px;padding:7px 10px}
.payroll-filter-empty td{text-align:center!important;color:#8a7c94!important;padding:22px!important;background:#fff!important}

.payroll-table tbody tr:last-child td{border-bottom:0}
.payroll-table tbody tr:hover{background:#fcfaff}
.payroll-table tbody tr.is-selected{background:#f7f2ff}
.payroll-table tbody tr.is-needs-attention{background:#fffaf2}
.payroll-table td>small{display:block;color:#8a7e94;margin-top:3px}
.payroll-table--compact{min-width:850px}
.payroll-person{display:flex;gap:10px;align-items:center;min-width:190px}
.payroll-person>span{width:35px;height:35px;border-radius:11px;background:#f0e9fd;color:#6d28d9;display:grid;place-items:center;flex:0 0 35px}
.payroll-person b,.payroll-person small{display:block}
.payroll-person small{color:#887b92;margin-top:2px}
.payroll-state,.payroll-recon{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}
.payroll-state--active,.payroll-state--published,.payroll-recon--pass{background:#ecfdf5;color:#047857}
.payroll-state--inactive,.payroll-state--void{background:#f3f4f6;color:#6b7280}
.payroll-state--draft{background:#f3f4f6;color:#4b5563}
.payroll-state--imported,.payroll-state--calculated{background:#eff6ff;color:#1d4ed8}
.payroll-state--approved{background:#f5f3ff;color:#6d28d9}
.payroll-state--locked{background:#f1f5f9;color:#334155}
.payroll-recon--share_missing,.payroll-recon--rate_missing{background:#fff7ed;color:#c2410c}
.payroll-recon--amount_mismatch{background:#fef2f2;color:#b91c1c}
.payroll-service-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.payroll-delete-action{color:#b91c1c!important;border-color:#fecaca!important;background:#fff7f7!important}
.payroll-delete-action:hover{color:#991b1b!important;border-color:#fca5a5!important;background:#fef2f2!important}
.payroll-table tr.is-payroll-error td{background:#fffaf7}
.payroll-line-action-cell{white-space:nowrap}
.payroll-line-ok{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#ecfdf5;color:#047857}

.payroll-note{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;margin:0 0 14px;border-radius:12px;background:#faf7ff;border:1px solid #e8ddfb;color:#665673}
.payroll-note i{color:#7c3aed;margin-top:3px}
.payroll-period-placeholder{text-align:center;display:grid;place-items:center;align-content:center;min-height:180px;color:#7c7086}
.payroll-period-placeholder i{font-size:32px;color:#8b5cf6}
.payroll-period-placeholder h3,.payroll-period-placeholder p{margin:4px}
.payroll-doctor-card{border:1px solid #e9e2ef;border-radius:14px;margin-top:10px;overflow:hidden}
.payroll-doctor-card>summary{cursor:pointer;list-style:none;padding:13px;display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:16px;align-items:center;background:#fcfbfd}
.payroll-doctor-card>summary::-webkit-details-marker{display:none}
.payroll-doctor-card[open]>summary{border-bottom:1px solid #e9e2ef;background:#f9f6ff}
.payroll-doctor-card__metrics{display:flex;gap:18px}
.payroll-doctor-card__metrics span{min-width:95px}
.payroll-doctor-card__metrics small,.payroll-doctor-card__metrics b{display:block}
.payroll-doctor-card__metrics small{color:#8a7c94;font-size:10px}
.payroll-doctor-card__metrics b{font-size:12px;margin-top:3px}
.payroll-doctor-card__status{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.payroll-doctor-card__body{padding:13px}
.payroll-payslip-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.payroll-form{width:100%;min-width:0;max-width:100%}
.payroll-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.payroll-field{display:grid;gap:6px}
.payroll-field>span{font-size:12px;font-weight:800;color:#62546d}
.payroll-field--wide{grid-column:1/-1}
.payroll-employment-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.payroll-employment-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:10px;border:1px dashed #d8caf0;border-radius:12px;background:#fbf9ff}
.payroll-employment-add[hidden]{display:none!important}
.payroll-field-hint{color:#8a7c94;font-size:10px;font-weight:600;line-height:1.8}
.payroll-profile-form{display:grid;gap:14px}
.payroll-profile-section{border:1px solid #eee7f5;border-radius:16px;padding:15px;background:#fff}
.payroll-profile-section__title{display:flex;align-items:center;gap:9px;margin-bottom:13px;color:#4f3c61}
.payroll-profile-section__title i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#f2ecff;color:#6d28d9}
.payroll-profile-section__title b{font-size:13px}
.payroll-model-choice{border:1px solid #e9e1f2;border-radius:15px;padding:12px;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payroll-model-choice legend{padding:0 6px;color:#62546d;font-size:12px;font-weight:850}
.payroll-choice-card{position:relative;display:block;cursor:pointer}
.payroll-choice-card input{position:absolute;opacity:0;pointer-events:none}
.payroll-choice-card span{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e9e1f2;border-radius:12px;background:#fff;transition:.16s ease}
.payroll-choice-card span>i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f4efff;color:#6d28d9}
.payroll-choice-card span>b,.payroll-choice-card span>small{display:block}
.payroll-choice-card span>small{color:#897b93;font-size:10px;margin-inline-start:auto}
.payroll-choice-card input:checked+span{border-color:#8b5cf6;background:#f7f2ff;box-shadow:0 0 0 2px rgba(139,92,246,.08)}
.payroll-model-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:850;white-space:nowrap}
.payroll-model-badge--performance{background:#eef2ff;color:#4338ca}
.payroll-model-badge--requester{background:#ecfeff;color:#0f766e}


.payroll-upload{display:grid;place-items:center;text-align:center;gap:8px;padding:24px;border:2px dashed #d8caf0;border-radius:16px;background:#fbf9ff;margin-bottom:14px}
.payroll-upload>i{font-size:34px;color:#16a34a}
.payroll-upload p{margin:0;color:#7d7088;max-width:520px}
.payroll-upload input[type=file]{max-width:100%}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.btn--sm{padding:7px 10px;font-size:11px}
@media(max-width:1100px){.payroll-directory-tools,.payroll-directory[data-directory="services"] .payroll-directory-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-directory-search{grid-column:1/-1}.payroll-filter-count{justify-self:start}.payroll-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-grid{grid-template-columns:1fr}.payroll-doctor-card>summary{grid-template-columns:1fr}.payroll-doctor-card__metrics{flex-wrap:wrap}.payroll-doctor-card__status{justify-self:start}}
@media(max-width:700px){.payroll-panel__actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.payroll-panel__actions .btn{width:100%}.payroll-model-choice{grid-template-columns:1fr}.payroll-choice-card span{align-items:flex-start;flex-wrap:wrap}.payroll-choice-card span>small{width:100%;margin-inline-start:44px}.payroll-profile-section{padding:12px}.payroll-directory-tools,.payroll-directory[data-directory="services"] .payroll-directory-tools{grid-template-columns:1fr}.payroll-directory-search{grid-column:auto}.payroll-filter-count{justify-self:start}.payroll-sort-button{gap:5px}.payroll-row-number{width:52px}.payroll-employment-control{grid-template-columns:1fr}.payroll-employment-control .btn{width:100%}.payroll-employment-add{grid-template-columns:1fr}.payroll-employment-add .btn{width:100%}.payroll-hero{padding:17px;display:grid}.payroll-hero h2{font-size:20px}.payroll-hero__actions{justify-content:stretch}.payroll-hero__actions .btn{flex:1}.payroll-kpis{grid-template-columns:1fr 1fr}.payroll-panel{padding:13px}.payroll-panel__head{align-items:flex-start;flex-direction:column}.payroll-form{min-width:0}.payroll-form-grid{grid-template-columns:1fr}.payroll-field--wide{grid-column:auto}.payroll-doctor-card__metrics{display:grid;grid-template-columns:1fr 1fr}.payroll-tabs{margin-inline:-4px}.payroll-kpi{padding:12px}.payroll-kpi strong{font-size:20px}}
@media(max-width:430px){.payroll-kpis{grid-template-columns:1fr}.payroll-doctor-card__metrics{grid-template-columns:1fr}.payroll-hero__actions{display:grid}.payroll-payslip-actions{justify-content:stretch}.payroll-payslip-actions .btn{width:100%}}


/* Payroll modal polish — scoped to Payroll dialogs only. */
.payroll-modal-card{
  width:min(860px,calc(100vw - 40px))!important;
  max-width:860px!important;
  min-width:0!important;
  max-height:calc(100vh - 40px)!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border-radius:22px!important;
  box-sizing:border-box!important;
  scrollbar-gutter:stable;
}
.payroll-modal-card *{box-sizing:border-box}
.payroll-modal-card--large{width:min(1160px,calc(100vw - 32px))!important;max-width:1160px!important}

.payroll-modal-card .payroll-form{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:26px 28px 24px;
  overflow-x:hidden!important;
}
.payroll-modal-card .modal-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-width:0;
  margin:0 0 22px;
  padding:0 0 18px;
  border-bottom:1px solid #eee7f5;
}
.payroll-modal-card .modal-head>div{
  min-width:0;
  padding-inline-start:52px;
}
.payroll-modal-card .modal-head small{
  display:block;
  margin-bottom:5px;
  color:#7c3aed;
  font-size:12px;
  font-weight:850;
}
.payroll-modal-card .modal-head h3{
  margin:0;
  color:#261a34;
  font-size:22px;
  line-height:1.55;
  font-weight:900;
}
.payroll-modal-card .payroll-modal-close{
  position:absolute;
  inset-inline-start:0;
  top:0;
  display:grid;
  place-items:center;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:1px solid #e3daf0!important;
  border-radius:12px!important;
  color:#6d28d9!important;
  background:#f7f3ff!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.payroll-modal-card .payroll-modal-close:hover{
  color:#5b21b6!important;
  border-color:#d4c5ec!important;
  background:#eee7fb!important;
  transform:translateY(-1px);
}
.payroll-modal-card .payroll-modal-close:active{transform:translateY(0)}
.payroll-modal-card .payroll-modal-close i{
  margin:0!important;
  font-size:16px;
  line-height:1;
}
.payroll-modal-card .payroll-form-grid{
  width:100%;
  min-width:0;
  max-width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 14px;
}
.payroll-modal-card .payroll-field,
.payroll-modal-card .payroll-field>*{
  min-width:0!important;
  max-width:100%!important;
}
.payroll-modal-card .payroll-field .input,
.payroll-modal-card .payroll-field .select,
.payroll-modal-card .payroll-field input,
.payroll-modal-card .payroll-field select,
.payroll-modal-card .payroll-field textarea{
  display:block;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.payroll-modal-card .payroll-note,
.payroll-modal-card .payroll-upload{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
.payroll-modal-card .payroll-upload input[type=file]{
  width:100%;
  min-width:0;
  max-width:100%;
}
.payroll-modal-card .modal-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  min-width:0;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #eee7f5;
  flex-wrap:wrap;
}
.payroll-modal-card .modal-actions .btn{
  min-width:112px;
  min-height:42px;
}
@media(max-width:760px){
  .payroll-modal-card{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:18px!important;
  }
  .payroll-modal-card .payroll-form{padding:20px 16px 16px}
  .payroll-modal-card .modal-head{margin-bottom:18px;padding-bottom:15px}
  .payroll-modal-card .modal-head>div{padding-inline-start:46px}
  .payroll-modal-card .modal-head h3{font-size:19px}
  .payroll-modal-card .payroll-modal-close{
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  }
  .payroll-modal-card .payroll-form-grid{grid-template-columns:minmax(0,1fr);gap:13px}
  .payroll-modal-card .payroll-field--wide{grid-column:auto}
  .payroll-modal-card .modal-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .payroll-modal-card .modal-actions .btn{width:100%;min-width:0}
}
@media(max-width:420px){
  .payroll-modal-card .modal-actions{grid-template-columns:minmax(0,1fr)}
}


/* Payroll Jalali date picker — canonical ShiftNevis calendar UX. */
.payroll-jdate-field{position:relative}
.payroll-jdate{position:relative;width:100%;min-width:0}
.payroll-jdate__inputrow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center;width:100%;min-width:0}
.payroll-jdate__input{width:100%;min-width:0;text-align:right;direction:rtl}
.payroll-jdate__button{
  display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  border:1px solid #e5dcef;border-radius:12px;background:#fff;color:#6d28d9;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.payroll-jdate__button:hover{background:#f7f3ff;border-color:#d7c9ea;transform:translateY(-1px)}
.payroll-jdate__button:active{transform:translateY(0)}
.payroll-jdate__popup{
  display:none;position:absolute;z-index:1305;inset-inline-start:0;top:calc(100% + 8px);
  width:min(340px,calc(100vw - 48px));padding:12px;border:1px solid #dfd5eb;border-radius:16px;
  background:#fff;box-shadow:0 18px 50px rgba(48,31,69,.16)
}
.payroll-jdate__popup.is-open{display:block}
.payroll-jdate__head{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px;margin-bottom:10px}
.payroll-jdate__head b{text-align:center;font-size:13px;color:#2f213b}
.payroll-jdate__head button{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid #e8e1ef;border-radius:11px;
  background:#faf8fc;color:#6d28d9;cursor:pointer
}
.payroll-jdate__week,.payroll-jdate__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.payroll-jdate__week{margin-bottom:5px}
.payroll-jdate__week span{display:grid;place-items:center;min-height:26px;color:#8b7d96;font-size:10px;font-weight:900}
.payroll-jdate__days .is-empty{min-height:34px}
.payroll-jdate__days button{
  display:grid;place-items:center;min-width:0;min-height:34px;padding:0;border:0;border-radius:10px;
  background:transparent;color:#41344e;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer
}
.payroll-jdate__days button:hover{background:#f4efff;color:#6d28d9}
.payroll-jdate__days button.is-selected{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff}
.payroll-jdate__days button.is-friday:not(.is-selected){background:#fff5f5;color:#b91c1c}
.payroll-jdate__foot{display:flex;gap:8px;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #eee7f5}
.payroll-jdate__foot .btn{min-height:36px;padding:7px 11px}
@media(max-width:760px){
  .payroll-jdate__popup{position:fixed;inset:auto 10px calc(14px + env(safe-area-inset-bottom)) 10px;width:auto;max-width:none}
}

/* Payroll polish — compact service directory, sticky headers, professional overview. */
.payroll-money-input{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  direction:rtl;
  text-align:right;
}

/* Overview */
.payroll-overview--pro{display:grid;gap:14px}
.payroll-overview-status{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 20px;border:1px solid #e8e0f1;border-radius:18px;
  background:linear-gradient(135deg,#fff 0%,#fbf9ff 58%,#f5f0ff 100%);
  box-shadow:0 8px 24px rgba(67,45,88,.04)
}
.payroll-overview-status.is-ready{border-color:#d8eee4;background:linear-gradient(135deg,#fff 0%,#f8fffb 62%,#eefbf5 100%)}
.payroll-overview-status.is-attention{border-color:#f3e0c5;background:linear-gradient(135deg,#fff 0%,#fffaf4 62%,#fff4e8 100%)}
.payroll-overview-status__main{display:flex;align-items:center;gap:14px;min-width:0}
.payroll-overview-status__icon{
  flex:0 0 48px;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  color:#6d28d9;background:#eee7ff;font-size:20px
}
.payroll-overview-status.is-ready .payroll-overview-status__icon{color:#047857;background:#dff7eb}
.payroll-overview-status.is-attention .payroll-overview-status__icon{color:#c2410c;background:#ffead2}
.payroll-overview-status__main small{display:block;color:#8c7d96;font-size:11px;font-weight:750;margin-bottom:2px}
.payroll-overview-status__main h3{margin:0;color:#2b2035;font-size:17px;line-height:1.55}
.payroll-overview-status__main p{margin:4px 0 0;color:#776a82;font-size:12px;line-height:1.9}
.payroll-overview-status__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.payroll-overview--pro .payroll-kpis{gap:10px}
.payroll-overview--pro .payroll-kpi{
  position:relative;min-height:102px;padding:15px 16px;border-radius:15px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease
}
.payroll-overview--pro .payroll-kpi.is-clickable{cursor:pointer}
.payroll-overview--pro .payroll-kpi.is-clickable:hover{
  transform:translateY(-2px);border-color:#d9cdf0;box-shadow:0 10px 24px rgba(65,43,86,.07)
}
.payroll-overview--pro .payroll-kpi:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
.payroll-overview--pro .payroll-kpi>i:first-child{width:38px;height:38px;border-radius:12px;font-size:14px}
.payroll-overview--pro .payroll-kpi strong{font-size:22px;line-height:1.25}
.payroll-kpi__arrow{margin-inline-start:auto!important;width:auto!important;height:auto!important;background:transparent!important;color:#b2a5bc!important;font-size:10px!important}
.payroll-overview-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:14px}
.payroll-overview-workflow,.payroll-latest-period{height:100%}
.payroll-overview-progress{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:6px 10px;border-radius:999px;background:#f4efff;color:#6d28d9;font-size:11px;font-weight:900
}
.payroll-overview-steps{display:grid;gap:8px}
.payroll-overview-step{
  width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:11px;
  padding:10px 11px;border:1px solid #eee8f4;border-radius:12px;background:#fff;color:inherit;
  font-family:inherit;text-align:right;cursor:pointer;transition:.15s ease
}
.payroll-overview-step:hover{background:#fcfaff;border-color:#ddd1ec;transform:translateX(-2px)}
.payroll-overview-step__number{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:11px;font-weight:900;background:#f1ebfb;color:#6d28d9
}
.payroll-overview-step.is-done .payroll-overview-step__number{background:#e7f8ef;color:#047857}
.payroll-overview-step__copy{min-width:0}
.payroll-overview-step__copy b,.payroll-overview-step__copy small{display:block}
.payroll-overview-step__copy b{font-size:12px;color:#372942}
.payroll-overview-step__copy small{margin-top:2px;color:#897b93;font-size:10.5px;line-height:1.75}
.payroll-overview-step__arrow{color:#b3a8bb;font-size:10px}
.payroll-latest-period__range{
  display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:10px;
  padding:16px;border:1px solid #eee8f4;border-radius:14px;background:#fcfbfd
}
.payroll-latest-period__range>div{min-width:0}
.payroll-latest-period__range small,.payroll-latest-period__range b{display:block}
.payroll-latest-period__range small{color:#90829a;font-size:10px;margin-bottom:4px}
.payroll-latest-period__range b{color:#34263e;font-size:13px;white-space:nowrap}
.payroll-latest-period__range>i{text-align:center;color:#b4a7bd;font-size:12px}
.payroll-latest-period__footer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px
}
.payroll-latest-period__footer>span{color:#82748c;font-size:10.5px}
.payroll-latest-period__footer>span i{margin-inline-end:5px;color:#8b5cf6}
.payroll-overview-empty-state{
  min-height:180px;display:grid;place-items:center;align-content:center;gap:9px;text-align:center;
  color:#86788f;padding:18px;border:1px dashed #ddd3e7;border-radius:14px;background:#fcfbfd
}
.payroll-overview-empty-state>i{font-size:26px;color:#8b5cf6}
.payroll-overview-empty-state p{max-width:340px;margin:0;font-size:11px;line-height:1.9}

/* Services table — no desktop horizontal scrolling; vertical scroll with frozen header. */
.payroll-services-table-wrap{
  max-height:min(62vh,640px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  position:relative
}
.payroll-services-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed
}
.payroll-services-table th,
.payroll-services-table td{
  padding:8px 7px;
  font-size:11.5px;
  line-height:1.55;
  overflow-wrap:anywhere
}
.payroll-services-table thead th{
  position:sticky;
  top:0;
  z-index:6;
  background:#faf8fc;
  box-shadow:0 1px 0 #e9e2ef
}
.payroll-services-table thead th:first-child{z-index:7}
.payroll-services-table th:nth-child(1),.payroll-services-table td:nth-child(1){width:5%;text-align:center!important}
.payroll-services-table th:nth-child(2),.payroll-services-table td:nth-child(2){width:30%}
.payroll-services-table th:nth-child(3),.payroll-services-table td:nth-child(3){width:9%;text-align:center}
.payroll-services-table th:nth-child(4),.payroll-services-table td:nth-child(4){width:14%;white-space:nowrap}
.payroll-services-table th:nth-child(5),.payroll-services-table td:nth-child(5){width:9%;white-space:nowrap;text-align:center}
.payroll-services-table th:nth-child(6),.payroll-services-table td:nth-child(6){width:11%;white-space:nowrap}
.payroll-services-table th:nth-child(7),.payroll-services-table td:nth-child(7){width:8%;white-space:nowrap;text-align:center}
.payroll-services-table th:nth-child(8),.payroll-services-table td:nth-child(8){width:14%}
.payroll-services-table td:nth-child(2) b{display:block;line-height:1.75;font-size:11.5px}
.payroll-services-table .payroll-sort-button{white-space:normal;gap:4px;line-height:1.45}
.payroll-services-table .payroll-service-actions{gap:4px;flex-wrap:nowrap}
.payroll-services-table .payroll-service-actions .btn{
  min-width:0;padding:6px 8px;font-size:10.5px;border-radius:9px;white-space:nowrap
}
.payroll-services-table .payroll-state,
.payroll-services-table .payroll-recon,
.payroll-services-table .payroll-model-badge{padding:4px 7px;font-size:10px}
.payroll-directory[data-directory="services"] .payroll-directory-tools{margin-bottom:10px}
.payroll-directory[data-directory="services"] .payroll-note{padding:9px 11px;margin-bottom:10px;font-size:11px}

@media(max-width:1100px){
  .payroll-overview-grid{grid-template-columns:minmax(0,1fr)}
  .payroll-overview-status{align-items:flex-start}
  .payroll-services-table th,.payroll-services-table td{padding:7px 5px;font-size:10.5px}
  .payroll-services-table .payroll-service-actions{display:grid;grid-template-columns:1fr}
}
@media(max-width:820px){
  .payroll-overview-status{flex-direction:column}
  .payroll-overview-status__actions{width:100%}
  .payroll-overview-status__actions .btn{flex:1}
  .payroll-overview--pro .payroll-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-latest-period__footer{align-items:flex-start;flex-direction:column}
  .payroll-services-table-wrap{overflow-x:auto}
  .payroll-services-table{min-width:760px!important}
}
@media(max-width:520px){
  .payroll-overview--pro .payroll-kpis{grid-template-columns:1fr}
  .payroll-overview-status__actions{display:grid;grid-template-columns:1fr;width:100%}
  .payroll-overview-status__actions .btn{width:100%}
  .payroll-latest-period__range{grid-template-columns:1fr}
  .payroll-latest-period__range>i{transform:rotate(-90deg)}
}

/* Payroll services table v2 — force full fit, vertical-only scroll, sticky header. */
.payroll-directory[data-directory="services"]{
  overflow:visible!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table-wrap{
  width:100%!important;
  max-width:100%!important;
  height:min(58vh,560px)!important;
  max-height:min(58vh,560px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  position:relative!important;
  border:1px solid #ece6f2!important;
  border-radius:12px!important;
  scrollbar-gutter:stable both-edges;
}
.payroll-directory[data-directory="services"] .payroll-services-table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-row{width:5%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-service{width:43%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-price{width:14%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-share{width:10%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-meta{width:16%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-actions{width:12%!important}

.payroll-directory[data-directory="services"] .payroll-services-table thead{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:21!important;
  background:#faf8fc!important;
  box-shadow:0 1px 0 #e8e0ef,0 5px 10px rgba(60,42,76,.04)!important;
  padding:8px 6px!important;
  font-size:10.5px!important;
  white-space:normal!important;
  overflow:hidden!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table tbody td{
  padding:8px 6px!important;
  font-size:10.5px!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  vertical-align:middle!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table .payroll-row-number{
  width:auto!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main{
  min-width:0!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main>b{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.65!important;
  margin-bottom:5px!important;
  font-size:10.7px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main .payroll-model-badge{
  display:inline-flex!important;
  padding:3px 6px!important;
  font-size:9px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-money,
.payroll-directory[data-directory="services"] .payroll-service-share{
  white-space:nowrap!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums;
}
.payroll-directory[data-directory="services"] .payroll-service-meta{
  text-align:center!important;
}
.payroll-directory[data-directory="services"] .payroll-service-meta>span:first-child{
  display:block!important;
  margin-bottom:5px!important;
  white-space:nowrap!important;
  font-size:9.5px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-meta .payroll-state{
  padding:3px 6px!important;
  font-size:9px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions-cell{
  overflow:visible!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:4px!important;
  width:100%!important;
  min-width:0!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions .btn{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:5px 4px!important;
  font-size:9px!important;
  gap:3px!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions .btn i{
  font-size:9px!important;
}
.payroll-directory[data-directory="services"] .payroll-sort-button{
  width:100%!important;
  min-width:0!important;
  justify-content:flex-start!important;
  gap:4px!important;
  white-space:normal!important;
  line-height:1.35!important;
  font-size:10px!important;
}
.payroll-directory[data-directory="services"] .payroll-sort-button span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.payroll-directory[data-directory="services"] .payroll-filter-empty td{
  position:static!important;
}

/* Filters also stay within the panel width. */
.payroll-directory[data-directory="services"] .payroll-directory-tools{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:minmax(220px,1.6fr) minmax(110px,.75fr) minmax(110px,.75fr) minmax(120px,.8fr) auto!important;
  gap:7px!important;
}
.payroll-directory[data-directory="services"] .payroll-directory-tools>*{
  min-width:0!important;
}

/* Never re-enable horizontal scrolling for this table. */
@media(max-width:820px){
  .payroll-directory[data-directory="services"] .payroll-services-table-wrap{
    overflow-x:hidden!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-table{
    min-width:0!important;
  }
}
@media(max-width:760px){
  .payroll-directory[data-directory="services"] .payroll-directory-tools{
    grid-template-columns:1fr 1fr!important;
  }
  .payroll-directory[data-directory="services"] .payroll-directory-search{
    grid-column:1/-1!important;
  }
  .payroll-directory[data-directory="services"] .payroll-filter-count{
    justify-self:stretch!important;
    text-align:center!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-table-wrap{
    height:55vh!important;
    max-height:55vh!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-row{width:7%!important}
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-service{width:39%!important}
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-price{width:15%!important}
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-share{width:11%!important}
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-meta{width:16%!important}
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-actions{width:12%!important}
  .payroll-directory[data-directory="services"] .payroll-service-actions .btn span{display:none!important}
}

/* Physician profile tabs — replace the long profile scroll with focused sections. */
.payroll-modal-card--large .payroll-profile-form{
  display:flex!important;
  flex-direction:column;
  gap:14px;
  min-height:0;
}
.payroll-profile-note{margin:0!important}
.payroll-profile-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  width:100%;
  padding:7px;
  border:1px solid #e9e1f2;
  border-radius:15px;
  background:#faf8fc;
}
.payroll-profile-tab{
  position:relative;
  min-width:0;
  min-height:58px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-areas:"icon label" "icon badge";
  align-items:center;
  column-gap:8px;
  row-gap:1px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#665770;
  font:inherit;
  text-align:right;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.payroll-profile-tab:hover{
  background:#fff;
  border-color:#e1d7eb;
  transform:translateY(-1px);
}
.payroll-profile-tab.is-active{
  color:#5b21b6;
  background:#fff;
  border-color:#cdbbf0;
  box-shadow:0 5px 14px rgba(91,33,182,.08);
}
.payroll-profile-tab>i{
  grid-area:icon;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#6d28d9;
  background:#f0e9ff;
  font-size:11px;
}
.payroll-profile-tab>span{
  grid-area:label;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:900;
}
.payroll-profile-tab>em{
  grid-area:badge;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:2px 7px;
  border-radius:999px;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  line-height:1;
}
.payroll-profile-tab.is-incomplete>em{
  color:#c2410c;
  background:#fff0df;
  border:1px solid #fed7aa;
}
.payroll-profile-tab.is-complete>em{
  color:#047857;
  background:#e8f8ef;
  border:1px solid #c7eed8;
}
.payroll-profile-tab.is-active.is-incomplete{
  border-color:#f0c99b;
  box-shadow:0 5px 14px rgba(194,65,12,.06);
}
.payroll-profile-panels{
  min-height:340px;
  width:100%;
}
.payroll-profile-panel{
  width:100%;
  min-height:340px;
  margin:0!important;
  padding:18px!important;
  border-radius:15px!important;
  animation:payroll-profile-panel-in .16s ease;
}
.payroll-profile-panel[hidden]{display:none!important}
.payroll-profile-panel .payroll-profile-section__title{
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid #f0ebf4;
}
.payroll-profile-panel .payroll-form-grid{
  align-content:start;
}
@keyframes payroll-profile-panel-in{
  from{opacity:.35;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}

/* ShiftNevis-native destructive confirmation modal. */
.payroll-confirm{
  width:100%;
  padding:25px 27px 23px;
}
.payroll-confirm .modal-head{margin-bottom:18px!important}
.payroll-confirm__body{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:start;
  gap:14px;
  padding:16px;
  border:1px solid #f3dddd;
  border-radius:15px;
  background:#fffafa;
}
.payroll-confirm__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#dc2626;
  background:#feecec;
  font-size:19px;
}
.payroll-confirm__body b{
  display:block;
  margin:2px 0 5px;
  color:#332432;
  font-size:14px;
  font-weight:900;
}
.payroll-confirm__body p{
  margin:0;
  color:#756777;
  font-size:11.5px;
  line-height:1.95;
}
.payroll-confirm__warning{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:11px;
  padding:10px 12px;
  border:1px solid #f3e5cc;
  border-radius:11px;
  color:#9a5b17;
  background:#fffbf3;
  font-size:10.5px;
  line-height:1.8;
}
.payroll-confirm__warning i{color:#d97706}
.payroll-btn--danger{
  min-width:120px;
  border:1px solid #dc2626!important;
  color:#fff!important;
  background:#dc2626!important;
  box-shadow:0 8px 20px rgba(220,38,38,.16)!important;
}
.payroll-btn--danger:hover{
  border-color:#b91c1c!important;
  background:#b91c1c!important;
}
.payroll-btn--danger:disabled{
  opacity:.65;
  cursor:not-allowed;
}

@media(max-width:900px){
  .payroll-profile-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .payroll-profile-panels,.payroll-profile-panel{min-height:300px}
}
@media(max-width:600px){
  .payroll-profile-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-profile-tab{min-height:54px}
  .payroll-profile-tab>span{white-space:normal;line-height:1.45}
  .payroll-profile-panels,.payroll-profile-panel{min-height:0}
  .payroll-confirm{padding:20px 16px 16px}
  .payroll-confirm__body{grid-template-columns:1fr}
}

/* Payroll confirmation dialogs — one visual language for all destructive/publish actions. */
.payroll-confirm{
  width:100%;
  padding:25px 27px 23px;
}
.payroll-confirm .modal-head{
  margin-bottom:18px!important;
}
.payroll-confirm__body{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:start;
  gap:14px;
  padding:16px;
  border:1px solid #e8e1ef;
  border-radius:15px;
  background:#fcfbfd;
}
.payroll-confirm__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:19px;
}
.payroll-confirm__body b{
  display:block;
  margin:2px 0 5px;
  color:#332432;
  font-size:14px;
  font-weight:900;
}
.payroll-confirm__body p{
  margin:0;
  color:#756777;
  font-size:11.5px;
  line-height:1.95;
}
.payroll-confirm__warning{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:11px;
  padding:10px 12px;
  border-radius:11px;
  font-size:10.5px;
  line-height:1.8;
}
.payroll-confirm--danger .payroll-confirm__body{
  border-color:#f3dddd;
  background:#fffafa;
}
.payroll-confirm--danger .payroll-confirm__icon{
  color:#dc2626;
  background:#feecec;
}
.payroll-confirm--danger .payroll-confirm__warning{
  border:1px solid #f3e5cc;
  color:#9a5b17;
  background:#fffbf3;
}
.payroll-confirm--danger .payroll-confirm__warning i{
  color:#d97706;
}
.payroll-confirm--primary .payroll-confirm__body{
  border-color:#dfd5f0;
  background:#fbf9ff;
}
.payroll-confirm--primary .payroll-confirm__icon{
  color:#6d28d9;
  background:#eee7ff;
}
.payroll-confirm--primary .payroll-confirm__warning{
  border:1px solid #e5dcf2;
  color:#655174;
  background:#faf7ff;
}
.payroll-confirm--primary .payroll-confirm__warning i{
  color:#7c3aed;
}
.payroll-confirm .modal-actions{
  margin-top:18px!important;
}
.payroll-confirm .modal-actions .btn{
  min-width:118px;
}
.payroll-btn--danger{
  min-width:120px;
  border:1px solid #dc2626!important;
  color:#fff!important;
  background:#dc2626!important;
  box-shadow:0 8px 20px rgba(220,38,38,.16)!important;
}
.payroll-btn--danger:hover{
  border-color:#b91c1c!important;
  background:#b91c1c!important;
}
.payroll-btn--danger:disabled,
.payroll-confirm .btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}
@media(max-width:600px){
  .payroll-confirm{padding:20px 16px 16px}
  .payroll-confirm__body{grid-template-columns:1fr}
  .payroll-confirm__icon{width:46px;height:46px}
}

/* Payroll overview statistics v2 */
.payroll-overview-insights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.payroll-overview-insight{
  min-width:0;
  padding:16px!important;
}
.payroll-overview-insight .payroll-panel__head{
  margin-bottom:14px;
}
.payroll-overview-insight__icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f1ebfb;
  color:#6d28d9;
  font-size:14px;
}
.payroll-overview-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid #eee8f4;
  border-radius:12px;
  background:#fcfbfd;
}
.payroll-overview-bar>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  grid-column:1/-1;
}
.payroll-overview-bar>div:first-child span{
  color:#76677f;
  font-size:10.5px;
  font-weight:800;
}
.payroll-overview-bar>div:first-child b{
  color:#34263e;
  font-size:11px;
}
.payroll-overview-bar>div:first-child b small{
  color:#a092aa;
  font-size:9px;
  font-weight:700;
}
.payroll-overview-bar__track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#eeeaf1;
}
.payroll-overview-bar__fill{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#7c3aed;
  transition:width .25s ease;
}
.payroll-overview-bar__fill--green{background:#10b981}
.payroll-overview-bar__fill--orange{background:#f59e0b}
.payroll-overview-bar__fill--blue{background:#3b82f6}
.payroll-overview-bar>small{
  min-width:34px;
  color:#6f6077;
  font-size:9.5px;
  font-weight:900;
  text-align:left;
}
.payroll-overview-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:9px;
}
.payroll-overview-metric{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 8px;
  border:1px solid #eee8f4;
  border-radius:11px;
  background:#fff;
}
.payroll-overview-metric>span{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#6d28d9;
  background:#f1ebfb;
  font-size:10px;
}
.payroll-overview-metric>div{
  min-width:0;
}
.payroll-overview-metric small,
.payroll-overview-metric b,
.payroll-overview-metric em{
  display:block;
}
.payroll-overview-metric small{
  color:#8c7d96;
  font-size:8.5px;
  line-height:1.4;
}
.payroll-overview-metric b{
  margin-top:1px;
  color:#30223a;
  font-size:13px;
  line-height:1.45;
}
.payroll-overview-metric em{
  margin-top:1px;
  color:#9c8fa5;
  font-size:8px;
  font-style:normal;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.payroll-overview-metric--green>span{color:#047857;background:#e7f8ef}
.payroll-overview-metric--orange>span{color:#c2410c;background:#fff0df}
.payroll-overview-metric--blue>span{color:#2563eb;background:#eaf2ff}
.payroll-overview-metric--gray>span{color:#64748b;background:#f1f5f9}
.payroll-overview-link{
  width:100%;
  margin-top:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  color:#6d28d9;
  background:#f8f5ff;
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.payroll-overview-link:hover{background:#f1ebff}
.payroll-overview-link i{font-size:9px}
.payroll-overview-ok{
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 10px;
  border-radius:10px;
  color:#047857;
  background:#f0fbf5;
  font-size:9.5px;
  font-weight:800;
}
.payroll-overview-finance{
  padding:13px 14px;
  border:1px solid #e8def3;
  border-radius:13px;
  background:linear-gradient(135deg,#fbf9ff,#f5efff);
}
.payroll-overview-finance small{
  display:block;
  color:#8b7a96;
  font-size:9.5px;
  margin-bottom:4px;
}
.payroll-overview-finance strong{
  display:block;
  color:#4c1d95;
  font-size:18px;
  line-height:1.5;
  font-weight:950;
}
@media(max-width:1180px){
  .payroll-overview-insights{grid-template-columns:1fr 1fr}
  .payroll-overview-insight:last-child{grid-column:1/-1}
}
@media(max-width:760px){
  .payroll-overview-insights{grid-template-columns:1fr}
  .payroll-overview-insight:last-child{grid-column:auto}
  .payroll-overview-metrics{grid-template-columns:1fr}
}

/* Payroll UI system v3 — shared form/table/filter language across payroll sections. */
.payroll-panel__actions,
.payroll-panel>.payroll-panel__head .toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.payroll-panel__actions .btn,
.payroll-panel>.payroll-panel__head .toolbar .btn{
  min-height:38px;
  border-radius:10px;
  gap:6px;
}
.payroll-data-section .payroll-panel__head{
  margin-bottom:12px;
}
.payroll-data-toolbar{
  width:100%;
  max-width:100%;
  margin:0 0 10px!important;
  padding:0;
  align-items:center;
}
.payroll-directory[data-directory="periods"] .payroll-data-toolbar,
.payroll-directory[data-directory="decrees"] .payroll-data-toolbar{
  grid-template-columns:minmax(260px,1.6fr) minmax(150px,.7fr) auto!important;
}
.payroll-directory[data-directory="performance"] .payroll-data-toolbar{
  grid-template-columns:minmax(260px,1.6fr) minmax(145px,.7fr) minmax(165px,.8fr) auto!important;
}
.payroll-data-toolbar>*{min-width:0!important}
.payroll-data-toolbar .input,
.payroll-data-toolbar .select{
  min-height:42px;
  border-radius:11px;
}
.payroll-data-toolbar .payroll-filter-count{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Canonical scrollable data table: vertical scroll, fixed header, no desktop horizontal scroll. */
.payroll-data-table-wrap,
.payroll-directory[data-directory="physicians"] .payroll-services-table-wrap{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  max-height:min(56vh,520px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border:1px solid #ece6f2!important;
  border-radius:12px!important;
  background:#fff;
}
.payroll-periods-table-wrap{max-height:330px!important}
.payroll-data-table,
.payroll-directory[data-directory="physicians"] .payroll-services-table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.payroll-data-table thead,
.payroll-directory[data-directory="physicians"] .payroll-services-table thead{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
}
.payroll-data-table thead th,
.payroll-directory[data-directory="physicians"] .payroll-services-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:31!important;
  background:#faf8fc!important;
  box-shadow:0 1px 0 #e8e0ef,0 5px 12px rgba(60,42,76,.045)!important;
  padding:8px 6px!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow:hidden!important;
}
.payroll-data-table tbody td,
.payroll-directory[data-directory="physicians"] .payroll-services-table tbody td{
  min-width:0!important;
  padding:8px 6px!important;
  font-size:10.5px!important;
  line-height:1.55!important;
  vertical-align:middle!important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.payroll-data-table tbody tr:hover td,
.payroll-directory[data-directory="physicians"] .payroll-services-table tbody tr:hover td{
  background:#fcfaff;
}
.payroll-data-table .payroll-sort-button,
.payroll-directory[data-directory="physicians"] .payroll-sort-button{
  width:100%;
  min-width:0;
  justify-content:flex-start;
  gap:4px;
  font-size:10px;
  line-height:1.4;
  white-space:normal;
}
.payroll-data-table .payroll-sort-button span,
.payroll-directory[data-directory="physicians"] .payroll-sort-button span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.payroll-data-table .payroll-row-number,
.payroll-directory[data-directory="physicians"] .payroll-row-number{
  width:auto!important;
  white-space:nowrap!important;
  text-align:center!important;
}
.payroll-person--compact{min-width:0!important;gap:8px}
.payroll-person--compact>span{width:30px;height:30px;flex-basis:30px;border-radius:9px}
.payroll-person--compact>div{min-width:0}
.payroll-person--compact b{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.payroll-person--compact small{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:9px;
}
.payroll-money-cell{white-space:nowrap!important;font-variant-numeric:tabular-nums}
.payroll-row-actions{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  flex-wrap:wrap!important;
}
.payroll-row-actions .btn{
  min-width:0!important;
  padding:5px 7px!important;
  border-radius:8px!important;
  font-size:9px!important;
  line-height:1.4!important;
  gap:4px!important;
  white-space:nowrap!important;
}
.payroll-row-actions .btn i{font-size:9px!important}

/* Table-specific proportional widths. */
.payroll-periods-table col.col-row{width:5%}
.payroll-periods-table col.col-main{width:31%}
.payroll-periods-table col.col-status{width:12%}
.payroll-periods-table col.col-count{width:8%}
.payroll-periods-table col.col-money{width:16%}
.payroll-periods-table col.col-actions{width:20%}

.payroll-decrees-table col.col-row{width:5%}
.payroll-decrees-table col.col-main{width:24%}
.payroll-decrees-table col.col-number{width:15%}
.payroll-decrees-table col.col-version{width:7%}
.payroll-decrees-table col.col-date{width:14%}
.payroll-decrees-table col.col-status{width:12%}
.payroll-decrees-table col.col-actions{width:23%}

.payroll-performance-table col.col-row{width:4%}
.payroll-performance-table col.col-main{width:23%}
.payroll-performance-table col.col-count{width:8%}
.payroll-performance-table col.col-money{width:14%}
.payroll-performance-table col.col-recon{width:10%}
.payroll-performance-table col.col-status{width:11%}
.payroll-performance-table col.col-actions{width:16%}

/* Performance detail is a secondary table, not another repeated card header. */
.payroll-performance-detail-row[hidden]{display:none!important}
.payroll-performance-detail-row>td{
  padding:0!important;
  overflow:visible!important;
  background:#fbf9fe!important;
}
.payroll-performance-detail{
  padding:12px;
  border-top:1px solid #e7def2;
  border-bottom:1px solid #e7def2;
  background:#fbf9fe;
}
.payroll-performance-detail__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.payroll-performance-detail__head b,
.payroll-performance-detail__head small{display:block}
.payroll-performance-detail__head b{font-size:11.5px;color:#3a2b46}
.payroll-performance-detail__head small{margin-top:2px;color:#8c7d96;font-size:9px}
.payroll-performance-detail__head>span{
  padding:5px 8px;
  border-radius:999px;
  background:#f3edff;
  color:#6d28d9;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.payroll-detail-table-wrap{
  position:relative;
  max-height:300px;
  overflow:auto;
  border:1px solid #e8e0ef;
  border-radius:10px;
  background:#fff;
}
.payroll-detail-table{min-width:780px!important}
.payroll-detail-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  background:#faf8fc!important;
  box-shadow:0 1px 0 #e8e0ef!important;
}
.payroll-performance-table .payroll-state,
.payroll-performance-table .payroll-recon{
  padding:4px 6px;
  font-size:9px;
}

/* Keep the physician directory aligned with the same table system. */
.payroll-directory[data-directory="physicians"] .payroll-services-table-wrap{
  max-height:min(56vh,520px)!important;
}
.payroll-directory[data-directory="physicians"] .payroll-services-table{
  min-width:0!important;
}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(1),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(1){width:5%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(2),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(2){width:24%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(3),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(3){width:12%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(4),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(4){width:11%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(5),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(5){width:12%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(6),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(6){width:12%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(7),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(7){width:9%!important}
.payroll-directory[data-directory="physicians"] .payroll-services-table th:nth-child(8),
.payroll-directory[data-directory="physicians"] .payroll-services-table td:nth-child(8){width:15%!important}

/* Canonical Payroll form section. */
.payroll-form-section{
  padding:15px;
  border:1px solid #eae3f1;
  border-radius:15px;
  background:#fff;
}
.payroll-form-section__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:11px;
  border-bottom:1px solid #f0eaf5;
}
.payroll-form-section__head>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  border-radius:10px;
  color:#6d28d9;
  background:#f1ebff;
}
.payroll-form-section__head b,
.payroll-form-section__head small{display:block}
.payroll-form-section__head b{font-size:12px;color:#41314d}
.payroll-form-section__head small{margin-top:2px;font-size:9.5px;color:#8b7c95}
.payroll-note--compact{margin-top:11px!important;margin-bottom:0!important;font-size:10px}
.payroll-period-form .modal-actions{
  padding-top:15px;
  border-top:1px solid #f0eaf5;
}

/* Jalali picker floats inside the viewport instead of extending the modal scroll area. */
.payroll-jdate__popup.is-floating{
  position:fixed!important;
  inset:auto!important;
  z-index:100000!important;
  margin:0!important;
  max-height:calc(100vh - 24px)!important;
  overflow:auto!important;
  transform:none!important;
}
.payroll-jdate__popup.is-floating.is-above{
  box-shadow:0 -16px 45px rgba(48,31,69,.14)!important;
}
.payroll-jdate__popup.is-floating::after{
  content:"";
  position:absolute;
  inset-inline-start:28px;
  top:-5px;
  width:10px;
  height:10px;
  background:#fff;
  border-inline-start:1px solid #dfd5eb;
  border-top:1px solid #dfd5eb;
  transform:rotate(45deg);
}
.payroll-jdate__popup.is-floating.is-above::after{
  top:auto;
  bottom:-5px;
  transform:rotate(225deg);
}

/* Responsive shared controls. */
@media(max-width:980px){
  .payroll-directory[data-directory="periods"] .payroll-data-toolbar,
  .payroll-directory[data-directory="decrees"] .payroll-data-toolbar,
  .payroll-directory[data-directory="performance"] .payroll-data-toolbar{
    grid-template-columns:1fr 1fr!important;
  }
  .payroll-data-toolbar .payroll-directory-search{grid-column:1/-1}
  .payroll-data-toolbar .payroll-filter-count{justify-self:stretch;text-align:center}
  .payroll-row-actions .btn span{display:none}
  .payroll-performance-table col.col-main{width:27%}
  .payroll-performance-table col.col-actions{width:11%}
}
@media(max-width:760px){
  .payroll-panel__actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .payroll-panel__actions .btn{width:100%}
  .payroll-data-toolbar{grid-template-columns:1fr!important}
  .payroll-data-toolbar .payroll-directory-search{grid-column:auto!important}
  .payroll-data-table-wrap,
  .payroll-directory[data-directory="physicians"] .payroll-services-table-wrap{
    max-height:55vh!important;
  }
  .payroll-jdate__popup.is-floating{
    position:fixed!important;
    inset:auto 10px calc(14px + env(safe-area-inset-bottom)) 10px!important;
    width:auto!important;
    max-height:min(72vh,520px)!important;
  }
  .payroll-jdate__popup.is-floating::after{display:none}
}

/* Payroll typography + personnel directory scale-up */
.payroll-page{
  font-size:14px;
}
.payroll-hero h2{
  font-size:24px!important;
  line-height:1.55;
}
.payroll-hero p{
  font-size:14px!important;
  line-height:1.9!important;
}
.payroll-tab{
  font-size:13px!important;
  font-weight:850!important;
}
.payroll-panel__head h3{
  font-size:19px!important;
  line-height:1.5!important;
}
.payroll-panel__head small{
  font-size:12px!important;
  line-height:1.6!important;
}
.payroll-note{
  font-size:12.5px!important;
  line-height:1.9!important;
}
.payroll-directory-tools .input,
.payroll-directory-tools .select{
  min-height:44px!important;
  font-size:13px!important;
}
.payroll-filter-count{
  font-size:12px!important;
}
.payroll-field>span{
  font-size:13px!important;
}
.payroll-field-hint{
  font-size:11px!important;
}
.payroll-profile-section__title b{
  font-size:14px!important;
}
.payroll-profile-tab>span{
  font-size:12px!important;
}
.payroll-profile-tab>em{
  font-size:9.5px!important;
}
.payroll-modal-card .payroll-field .input,
.payroll-modal-card .payroll-field .select,
.payroll-modal-card .payroll-field input,
.payroll-modal-card .payroll-field select,
.payroll-modal-card .payroll-field textarea{
  font-size:13.5px!important;
}
.payroll-page .btn,
.payroll-modal-card .btn{
  font-size:12px;
}
.payroll-state,
.payroll-recon{
  font-size:10.5px!important;
}

/* Personnel directory */
.payroll-personnel-tools{
  grid-template-columns:minmax(240px,1.55fr) repeat(4,minmax(118px,.72fr)) auto!important;
  gap:8px!important;
}
.payroll-directory[data-directory="physicians"] .payroll-services-table thead th{
  font-size:11.5px!important;
  padding:9px 6px!important;
}
.payroll-directory[data-directory="physicians"] .payroll-services-table tbody td{
  font-size:12px!important;
  padding:10px 7px!important;
  line-height:1.7!important;
}
.payroll-directory[data-directory="physicians"] .payroll-sort-button{
  font-size:11.5px!important;
  line-height:1.45!important;
}
.payroll-person--directory{
  min-width:0!important;
  gap:10px!important;
}
.payroll-person--directory>span{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border-radius:11px!important;
  font-size:13px!important;
}
.payroll-person--directory>div{
  min-width:0;
}
.payroll-person--directory b{
  display:block;
  min-width:0;
  font-size:14px!important;
  line-height:1.55!important;
  color:#2d2038;
  font-weight:900!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.payroll-person-meta{
  display:flex!important;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin-top:4px!important;
  color:#776a80!important;
  font-size:11px!important;
  line-height:1.6!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.payroll-person-meta__dot{
  color:#c3b7ca;
  font-style:normal;
}
.payroll-person-group{
  display:inline-flex;
  align-items:center;
  padding:2px 6px;
  border-radius:999px;
  background:#f2ecff;
  color:#6d28d9;
  font-size:10px;
  font-weight:850;
}
.payroll-person-gender{
  color:#91849a;
}

/* Raise table readability throughout Payroll without reintroducing horizontal scroll. */
.payroll-data-table thead th{
  font-size:11.5px!important;
  padding:9px 6px!important;
}
.payroll-data-table tbody td{
  font-size:12px!important;
  padding:9px 6px!important;
  line-height:1.65!important;
}
.payroll-data-table .payroll-sort-button{
  font-size:11px!important;
}
.payroll-person--compact b{
  font-size:12.5px!important;
  line-height:1.5!important;
}
.payroll-person--compact small{
  font-size:10.5px!important;
  line-height:1.5!important;
}
.payroll-row-actions .btn{
  font-size:10px!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table thead th{
  font-size:11.5px!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table tbody td{
  font-size:11.5px!important;
  line-height:1.65!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main>b{
  font-size:12.5px!important;
  line-height:1.65!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main .payroll-model-badge{
  font-size:10px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-meta>span:first-child,
.payroll-directory[data-directory="services"] .payroll-service-meta .payroll-state{
  font-size:10px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions .btn{
  font-size:10px!important;
}
.payroll-performance-detail__head b{
  font-size:13px!important;
}
.payroll-performance-detail__head small,
.payroll-performance-detail__head>span{
  font-size:10.5px!important;
}

@media(max-width:1180px){
  .payroll-personnel-tools{
    grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(130px,1fr))!important;
  }
  .payroll-personnel-tools .payroll-directory-search{
    grid-column:1/-1!important;
  }
  .payroll-personnel-tools .payroll-filter-count{
    justify-self:stretch!important;
    text-align:center!important;
  }
}
@media(max-width:760px){
  .payroll-personnel-tools{
    grid-template-columns:1fr!important;
  }
  .payroll-personnel-tools .payroll-directory-search{
    grid-column:auto!important;
  }
  .payroll-person--directory b{
    font-size:13.5px!important;
  }
  .payroll-person-meta{
    font-size:10.5px!important;
  }
}

/* Payroll services directory v4 — match personnel table/system exactly. */
.payroll-directory[data-directory="services"] .payroll-services-tools{
  grid-template-columns:minmax(240px,1.5fr) minmax(150px,.8fr) minmax(130px,.7fr) minmax(145px,.75fr) auto!important;
  gap:8px!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table-wrap{
  width:100%!important;
  max-width:100%!important;
  max-height:min(56vh,520px)!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border:1px solid #ece6f2!important;
  border-radius:12px!important;
  background:#fff!important;
  scrollbar-gutter:stable!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-row{width:5%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-service{width:29%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-model{width:12%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-price{width:13%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-share{width:10%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-date{width:11%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-status{width:8%!important}
.payroll-directory[data-directory="services"] .payroll-services-table col.col-actions{width:12%!important}

.payroll-directory[data-directory="services"] .payroll-services-table thead,
.payroll-directory[data-directory="services"] .payroll-services-table thead th{
  position:sticky!important;
  top:0!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table thead{z-index:30!important}
.payroll-directory[data-directory="services"] .payroll-services-table thead th{
  z-index:31!important;
  background:#faf8fc!important;
  box-shadow:0 1px 0 #e8e0ef,0 5px 12px rgba(60,42,76,.045)!important;
  padding:9px 6px!important;
  font-size:11.5px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow:hidden!important;
}
.payroll-directory[data-directory="services"] .payroll-services-table tbody td{
  min-width:0!important;
  max-width:100%!important;
  padding:10px 7px!important;
  font-size:12px!important;
  line-height:1.7!important;
  vertical-align:middle!important;
  overflow:hidden!important;
  text-overflow:ellipsis;
}
.payroll-directory[data-directory="services"] .payroll-sort-button{
  width:100%!important;
  min-width:0!important;
  justify-content:flex-start!important;
  gap:4px!important;
  font-size:11.5px!important;
  line-height:1.45!important;
  white-space:normal!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main{
  min-width:0!important;
}
.payroll-directory[data-directory="services"] .payroll-service-main>b{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  color:#2d2038!important;
  font-size:13px!important;
  line-height:1.65!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.payroll-directory[data-directory="services"] .payroll-service-model-cell,
.payroll-directory[data-directory="services"] .payroll-service-money,
.payroll-directory[data-directory="services"] .payroll-service-share,
.payroll-directory[data-directory="services"] .payroll-service-date,
.payroll-directory[data-directory="services"] .payroll-service-status{
  text-align:center!important;
}
.payroll-directory[data-directory="services"] .payroll-service-money,
.payroll-directory[data-directory="services"] .payroll-service-share,
.payroll-directory[data-directory="services"] .payroll-service-date{
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums;
}
.payroll-directory[data-directory="services"] .payroll-service-model-cell .payroll-model-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:4px 7px!important;
  font-size:10px!important;
  line-height:1.25!important;
}
.payroll-directory[data-directory="services"] .payroll-service-status .payroll-state,
.payroll-directory[data-directory="services"] .payroll-service-share .payroll-recon{
  padding:4px 7px!important;
  font-size:10px!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions-cell{
  overflow:visible!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  min-width:0!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions .btn{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  flex:0 1 auto!important;
  padding:6px 8px!important;
  border-radius:8px!important;
  font-size:10px!important;
  line-height:1.4!important;
  gap:4px!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.payroll-directory[data-directory="services"] .payroll-service-actions .btn i{
  font-size:9px!important;
}
.payroll-directory[data-directory="services"] .payroll-note{
  font-size:12px!important;
  padding:10px 12px!important;
  margin-bottom:12px!important;
}

@media(max-width:1120px){
  .payroll-directory[data-directory="services"] .payroll-services-tools{
    grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(130px,1fr))!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-tools .payroll-directory-search{
    grid-column:1/-1!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-tools .payroll-filter-count{
    justify-self:stretch!important;
    text-align:center!important;
  }
  .payroll-directory[data-directory="services"] .payroll-service-actions .btn span{
    display:none!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-actions{width:9%!important}
  .payroll-directory[data-directory="services"] .payroll-services-table col.col-service{width:32%!important}
}
@media(max-width:760px){
  .payroll-directory[data-directory="services"] .payroll-services-tools{
    grid-template-columns:1fr!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-tools .payroll-directory-search{
    grid-column:auto!important;
  }
  .payroll-directory[data-directory="services"] .payroll-services-table-wrap{
    max-height:55vh!important;
  }
}

/* Payroll table headers v5 — one alignment rule across every tab. */
.payroll-page .payroll-table thead th{
  text-align:center!important;
  vertical-align:middle!important;
}
.payroll-page .payroll-table thead th .payroll-sort-button,
.payroll-page .payroll-table thead th>.payroll-sort-button{
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  margin-inline:auto!important;
}
.payroll-page .payroll-table thead th .payroll-sort-button span{
  text-align:center!important;
}
.payroll-page .payroll-table thead th.payroll-row-number{
  text-align:center!important;
}
.payroll-page .payroll-detail-table thead th{
  text-align:center!important;
}

/* Decree actions may contain view / publish / delete in one row. */
.payroll-directory[data-directory="decrees"] .payroll-row-actions{
  justify-content:center!important;
}
.payroll-directory[data-directory="decrees"] .payroll-row-actions .btn{
  flex:0 1 auto!important;
}
.payroll-directory[data-directory="decrees"] .payroll-row-actions .btn:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
}

/* Payroll tables v6 — exact column-axis alignment for headers and row content. */
.payroll-page .payroll-table thead th,
.payroll-page .payroll-table tbody td{
  text-align:center!important;
  vertical-align:middle!important;
}
.payroll-page .payroll-table thead th .payroll-sort-button,
.payroll-page .payroll-table thead th>.payroll-sort-button{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  padding-inline:0!important;
  margin-inline:auto!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:4px!important;
}
.payroll-page .payroll-table thead th .payroll-sort-button span{
  flex:0 1 auto!important;
  text-align:center!important;
}
.payroll-page .payroll-table tbody td>.payroll-state,
.payroll-page .payroll-table tbody td>.payroll-recon,
.payroll-page .payroll-table tbody td>.payroll-model-badge{
  margin-inline:auto!important;
}
.payroll-page .payroll-person,
.payroll-page .payroll-person--directory,
.payroll-page .payroll-person--compact{
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
}
.payroll-page .payroll-person>div,
.payroll-page .payroll-person--directory>div,
.payroll-page .payroll-person--compact>div{
  min-width:0!important;
  text-align:center!important;
}
.payroll-page .payroll-person b,
.payroll-page .payroll-person small,
.payroll-page .payroll-person-meta{
  text-align:center!important;
}
.payroll-page .payroll-person-meta{
  justify-content:center!important;
}
.payroll-page .payroll-service-main,
.payroll-page .payroll-service-main>b{
  text-align:center!important;
}
.payroll-page .payroll-row-actions,
.payroll-page .payroll-service-actions{
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
}
.payroll-page .payroll-money-cell,
.payroll-page .payroll-service-money,
.payroll-page .payroll-service-share,
.payroll-page .payroll-service-date,
.payroll-page .payroll-service-status,
.payroll-page td.ltr{
  text-align:center!important;
}
.payroll-page .payroll-row-number{
  text-align:center!important;
}

/* Gender-aware personnel avatar. Gender is only reflected when explicitly stored. */
.payroll-person-avatar{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  border-radius:10px!important;
  background:#f1ebff!important;
  color:#6d28d9!important;
}
.payroll-person--directory>.payroll-person-avatar{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
}
.payroll-person--compact>.payroll-person-avatar{
  width:30px!important;
  height:30px!important;
  flex-basis:30px!important;
}
.payroll-person-avatar--neutral{
  background:#f4f1f7!important;
  color:#83778c!important;
}
.payroll-person-avatar i{
  font-size:13px!important;
  line-height:1!important;
}
.payroll-person--compact>.payroll-person-avatar i{
  font-size:11px!important;
}

/* Payroll personnel avatars v2 — reuse the canonical scheduling/personnel gender style. */
.payroll-person-avatar{
  border-radius:12px!important;
  box-shadow:none!important;
}
.payroll-person-avatar--female{
  background:#fcecf5!important;
  color:#b83280!important;
}
.payroll-person-avatar--male{
  background:#eaf3ff!important;
  color:#2563a8!important;
}
.payroll-person-avatar--other{
  background:#f1edff!important;
  color:#6d28d9!important;
}
.payroll-person-avatar--unknown,
.payroll-person-avatar--neutral{
  background:#f3f1f5!important;
  color:#7b7283!important;
}
.payroll-person--directory>.payroll-person-avatar i{
  font-size:17px!important;
}
.payroll-person--compact>.payroll-person-avatar i{
  font-size:14px!important;
}

/* A fixed avatar track prevents icons moving left/right as names change length. */
.payroll-directory[data-directory="physicians"] .payroll-person--directory{
  width:min(100%,280px)!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  column-gap:10px!important;
  direction:rtl!important;
}
.payroll-directory[data-directory="physicians"] .payroll-person--directory>.payroll-person-avatar{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:38px!important;
  height:38px!important;
}
.payroll-directory[data-directory="physicians"] .payroll-person--directory>div{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  text-align:center!important;
}
.payroll-directory[data-directory="physicians"] .payroll-person--directory b,
.payroll-directory[data-directory="physicians"] .payroll-person--directory .payroll-person-meta{
  width:100%!important;
  text-align:center!important;
  justify-content:center!important;
}

/* Reuse the same fixed-track geometry in decree/performance personnel cells. */
.payroll-data-table .payroll-person--compact{
  width:min(100%,230px)!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  column-gap:8px!important;
  direction:rtl!important;
}
.payroll-data-table .payroll-person--compact>.payroll-person-avatar{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  width:30px!important;
  height:30px!important;
}
.payroll-data-table .payroll-person--compact>div{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  text-align:center!important;
}

/* Payroll modal header v3 — canonical close action across every Payroll dialog. */
.payroll-modal-card .modal-head{
  position:relative!important;
  display:block!important;
  min-height:42px!important;
  padding:0 52px 18px 0!important;
  direction:rtl!important;
  text-align:right!important;
}
.payroll-modal-card .modal-head>div{
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  text-align:right!important;
}
.payroll-modal-card .modal-head h3,
.payroll-modal-card .modal-head small{
  text-align:right!important;
}
.payroll-modal-card .payroll-modal-close,
.payroll-modal-card .modal-close.payroll-modal-close{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #fecaca!important;
  border-radius:12px!important;
  color:#dc2626!important;
  background:#fff1f2!important;
  box-shadow:none!important;
  cursor:pointer!important;
  z-index:3!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.payroll-modal-card .payroll-modal-close:hover,
.payroll-modal-card .modal-close.payroll-modal-close:hover{
  color:#b91c1c!important;
  border-color:#fca5a5!important;
  background:#ffe4e6!important;
  box-shadow:0 6px 16px rgba(220,38,38,.10)!important;
  transform:translateY(-1px)!important;
}
.payroll-modal-card .payroll-modal-close:focus-visible{
  outline:3px solid rgba(220,38,38,.16)!important;
  outline-offset:2px!important;
}
.payroll-modal-card .payroll-modal-close:active{
  transform:translateY(0)!important;
}
.payroll-modal-card .payroll-modal-close i{
  margin:0!important;
  color:inherit!important;
  font-size:16px!important;
  line-height:1!important;
}
.payroll-modal-card .payroll-personnel-profile-head{
  min-height:42px!important;
}
.payroll-modal-card .payroll-personnel-profile-head h3{
  margin:0!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1.55!important;
}

@media(max-width:760px){
  .payroll-modal-card .modal-head{
    min-height:40px!important;
    padding:0 48px 15px 0!important;
  }
  .payroll-modal-card .payroll-modal-close,
  .payroll-modal-card .modal-close.payroll-modal-close{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
}

/* Payroll modal header v4 — physical left close + compact filled personnel header. */
.payroll-modal-card .payroll-modal-close,
.payroll-modal-card .modal-close.payroll-modal-close{
  left:12px!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
}
.payroll-modal-card .payroll-profile-form{
  padding-top:16px!important;
}
.payroll-modal-card .payroll-personnel-profile-head{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:58px!important;
  margin:0 0 14px!important;
  padding:10px 16px 10px 60px!important;
  border:1px solid #ece4f4!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#fcfbff 0%,#f8f4ff 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88)!important;
  direction:rtl!important;
}
.payroll-modal-card .payroll-personnel-profile-head>div{
  width:100%!important;
  min-width:0!important;
  padding:0!important;
}
.payroll-modal-card .payroll-personnel-profile-head h3{
  margin:0!important;
  color:#281b35!important;
  font-size:22px!important;
  font-weight:950!important;
  line-height:1.45!important;
  text-align:right!important;
}
.payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close{
  top:50%!important;
  left:12px!important;
  right:auto!important;
  transform:translateY(-50%)!important;
}
.payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close:hover{
  transform:translateY(calc(-50% - 1px))!important;
}
.payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close:active{
  transform:translateY(-50%)!important;
}
.payroll-modal-card .payroll-profile-note{
  margin-top:0!important;
  margin-bottom:12px!important;
}

@media(max-width:760px){
  .payroll-modal-card .payroll-profile-form{
    padding-top:12px!important;
  }
  .payroll-modal-card .payroll-personnel-profile-head{
    min-height:54px!important;
    margin-bottom:11px!important;
    padding:8px 12px 8px 56px!important;
  }
  .payroll-modal-card .payroll-personnel-profile-head h3{
    font-size:19px!important;
  }
  .payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close{
    left:10px!important;
  }
}

/* Payroll modal shell v5 — deterministic LTR shell, RTL content, sticky actions. */
.payroll-modal-card{
  overflow:hidden!important;
}
.payroll-modal-card .payroll-form{
  max-height:calc(100dvh - 40px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.payroll-modal-card .modal-head{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  direction:ltr!important;
  min-height:58px!important;
  margin:-16px -28px 14px!important;
  padding:10px 28px!important;
  border-bottom:1px solid #eee7f5!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(45,26,66,.04)!important;
}
.payroll-modal-card .modal-head>div{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  direction:rtl!important;
  text-align:right!important;
}
.payroll-modal-card .modal-head h3,
.payroll-modal-card .modal-head small{
  text-align:right!important;
}
.payroll-modal-card .payroll-modal-close,
.payroll-modal-card .modal-close.payroll-modal-close,
.payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close{
  position:static!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:31!important;
}
.payroll-modal-card .payroll-modal-close:hover,
.payroll-modal-card .modal-close.payroll-modal-close:hover,
.payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close:hover{
  transform:translateY(-1px)!important;
}
.payroll-modal-card .payroll-modal-close:active,
.payroll-modal-card .modal-close.payroll-modal-close:active,
.payroll-modal-card .payroll-personnel-profile-head .payroll-modal-close:active{
  transform:none!important;
}
.payroll-modal-card .payroll-personnel-profile-head{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  direction:ltr!important;
  margin:-16px -28px 14px!important;
  padding:10px 28px!important;
  border:0!important;
  border-bottom:1px solid #eee7f5!important;
  border-radius:0!important;
  background:rgba(255,255,255,.97)!important;
}
.payroll-modal-card .payroll-personnel-profile-head>div{
  grid-column:2!important;
  grid-row:1!important;
  direction:rtl!important;
}
.payroll-modal-card .modal-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:28!important;
  margin:20px -28px -24px!important;
  padding:14px 28px 16px!important;
  border-top:1px solid #eee7f5!important;
  background:rgba(255,255,255,.98)!important;
  backdrop-filter:blur(10px);
  box-shadow:0 -10px 22px rgba(45,26,66,.06)!important;
}
.payroll-modal-card .payroll-profile-form .modal-actions{
  margin-top:18px!important;
}
@media(max-width:760px){
  .payroll-modal-card .payroll-form{
    max-height:calc(100dvh - 20px)!important;
  }
  .payroll-modal-card .modal-head,
  .payroll-modal-card .payroll-personnel-profile-head{
    grid-template-columns:40px minmax(0,1fr)!important;
    margin:-12px -16px 12px!important;
    padding:8px 16px!important;
  }
  .payroll-modal-card .modal-actions{
    margin:16px -16px -16px!important;
    padding:12px 16px 14px!important;
  }
}

/* Payroll modal shell v6 — header/footer are layout rows; only body scrolls. */
.payroll-modal-card{
  overflow:hidden!important;
}
.payroll-modal-card .payroll-form.payroll-modal-shell{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  width:100%!important;
  max-width:100%!important;
  max-height:calc(100dvh - 40px)!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.payroll-modal-card .payroll-modal-shell>.modal-head,
.payroll-modal-card .payroll-modal-shell>.payroll-personnel-profile-head{
  position:relative!important;
  top:auto!important;
  z-index:20!important;
  margin:0!important;
  padding:10px 28px!important;
  border:0!important;
  border-bottom:1px solid #eee7f5!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(45,26,66,.035)!important;
}
.payroll-modal-card .payroll-modal-shell>.payroll-modal-body{
  min-width:0!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
  padding:14px 28px 18px!important;
  direction:rtl!important;
  background:#fff!important;
}
.payroll-modal-card .payroll-modal-shell>.modal-actions{
  position:relative!important;
  bottom:auto!important;
  z-index:20!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:14px 28px 16px!important;
  border-top:1px solid #eee7f5!important;
  background:#fff!important;
  box-shadow:0 -6px 16px rgba(45,26,66,.045)!important;
  backdrop-filter:none!important;
}
.payroll-modal-card .payroll-modal-shell>.payroll-modal-body>.payroll-profile-note{
  margin-top:0!important;
}
.payroll-modal-card .payroll-modal-shell>.payroll-modal-body>.payroll-profile-tabs{
  margin-top:0!important;
}

/* Keep non-form confirmations simple; never let their actions float over content. */
.payroll-modal-card .payroll-confirm .modal-actions{
  position:relative!important;
  bottom:auto!important;
  margin-top:18px!important;
}

@media(max-width:760px){
  .payroll-modal-card .payroll-form.payroll-modal-shell{
    max-height:calc(100dvh - 20px)!important;
  }
  .payroll-modal-card .payroll-modal-shell>.modal-head,
  .payroll-modal-card .payroll-modal-shell>.payroll-personnel-profile-head{
    margin:0!important;
    padding:8px 16px!important;
  }
  .payroll-modal-card .payroll-modal-shell>.payroll-modal-body{
    padding:12px 16px 14px!important;
  }
  .payroll-modal-card .payroll-modal-shell>.modal-actions{
    margin:0!important;
    padding:12px 16px 14px!important;
  }
}

/* Payroll Excel entry/template controls */
.payroll-personnel-actions,
.payroll-services-actions{
  flex-wrap:wrap!important;
  gap:8px!important;
}

.payroll-personnel-import-form .payroll-import-template-card,
.payroll-service-import-form .payroll-import-template-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid #e8def5;
  border-radius:14px;
  background:#fbf9ff;
}
.payroll-personnel-import-form .payroll-import-template-card>div,
.payroll-service-import-form .payroll-import-template-card>div{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.payroll-personnel-import-form .payroll-import-template-card>div>span,
.payroll-service-import-form .payroll-import-template-card>div>span{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:12px;
  color:#6d28d9;
  background:#f1eafe;
}
.payroll-personnel-import-form .payroll-import-template-card b,
.payroll-personnel-import-form .payroll-import-template-card small,
.payroll-service-import-form .payroll-import-template-card b,
.payroll-service-import-form .payroll-import-template-card small{
  display:block;
  text-align:right;
}
.payroll-personnel-import-form .payroll-import-template-card b,
.payroll-service-import-form .payroll-import-template-card b{
  margin-bottom:3px;
  color:#31203d;
  font-size:13px;
  font-weight:900;
}
.payroll-personnel-import-form .payroll-import-template-card small,
.payroll-service-import-form .payroll-import-template-card small{
  color:#83768e;
  font-size:11px;
  line-height:1.7;
}
.payroll-personnel-import-form .payroll-upload,
.payroll-service-import-form .payroll-upload{
  margin-top:14px;
}

.payroll-personnel-excel-actions,
.payroll-excel-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid #ccebdc;
  border-radius:13px;
  background:#f4fbf7;
}
.payroll-excel-import-btn,
.payroll-excel-template-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  border-radius:10px;
  font-weight:850;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.payroll-excel-import-btn{
  border:1px solid #16824f;
  background:#188b56;
  color:#fff;
  box-shadow:0 6px 16px rgba(24,139,86,.14);
}
.payroll-excel-import-btn:hover{
  background:#117447;
  border-color:#117447;
  color:#fff;
  transform:translateY(-1px);
}
.payroll-excel-template-btn{
  border:1px solid #b9dfcc;
  background:#fff;
  color:#126a43;
}
.payroll-excel-template-btn:hover{
  border-color:#86caaa;
  background:#eaf8f0;
  color:#0d5937;
}
.payroll-excel-import-btn i,
.payroll-excel-template-btn i{
  color:inherit;
}
.payroll-personnel-import-form .payroll-import-template-card .payroll-excel-template-btn,
.payroll-service-import-form .payroll-import-template-card .payroll-excel-template-btn{
  flex:0 0 auto;
}

@media(max-width:900px){
  .payroll-personnel-actions,
  .payroll-services-actions{
    width:100%;
  }
}
@media(max-width:760px){
  .payroll-personnel-excel-actions,
  .payroll-excel-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .payroll-personnel-excel-actions .btn,
  .payroll-excel-actions .btn{
    width:100%;
  }
}
@media(max-width:640px){
  .payroll-personnel-import-form .payroll-import-template-card,
  .payroll-service-import-form .payroll-import-template-card{
    align-items:stretch;
    flex-direction:column;
  }
  .payroll-personnel-import-form .payroll-import-template-card .btn,
  .payroll-service-import-form .payroll-import-template-card .btn{
    width:100%;
    justify-content:center;
  }
}
@media(max-width:520px){
  .payroll-personnel-excel-actions,
  .payroll-excel-actions{
    grid-template-columns:1fr;
  }
}

/* Personnel-wide employment decree: contextual, read-only profile preview. */
.payroll-decree-person-preview{
  min-width:0;
  padding:13px 15px;
  margin:0;
  border:1px solid #e6def4;
  border-radius:14px;
  background:#fbf9ff;
}
.payroll-decree-person-preview[hidden]{display:none!important}
.payroll-decree-person-preview__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.payroll-decree-person-preview__head>i{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;color:#6d28d9;background:#efe8ff}
.payroll-decree-person-preview__head>div{flex:1;min-width:0}
.payroll-decree-person-preview__head b,.payroll-decree-person-preview__head small{display:block;overflow-wrap:anywhere}
.payroll-decree-person-preview__head b{font-size:13px;color:#332447}
.payroll-decree-person-preview__head small{font-size:10.5px;color:#7c6c90}
.payroll-decree-person-preview__head>span{padding:5px 9px;border-radius:999px;background:#e9f9f0;color:#047857;font-size:10px;font-weight:800}
.payroll-decree-person-preview__head>span.is-inactive{background:#f1f2f4;color:#64748b}
.payroll-decree-person-preview__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.payroll-decree-person-preview__grid>div{min-width:0;border:1px solid #ebe6f2;background:#fff;border-radius:10px;padding:9px 10px}
.payroll-decree-person-preview__grid small,.payroll-decree-person-preview__grid b{display:block;overflow-wrap:anywhere}
.payroll-decree-person-preview__grid small{font-size:10.5px;color:#887992;margin-bottom:3px}
.payroll-decree-person-preview__grid b{font-size:12px;color:#3d2e4b;font-weight:800}
.payroll-decree-note{margin:15px 0 0!important;font-size:11.5px;line-height:1.8}
@media(max-width:760px){
  .payroll-decree-person-preview__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .payroll-decree-person-preview__grid{grid-template-columns:minmax(0,1fr)}
}