/* payroll.css
   Payroll-specific UI tweaks.
   This page intentionally reuses shared primitives from:
   - ui.css
   - dashboards.css
   - invoices.css
*/

/* --- Legacy AppSheet payroll header (force hidden if it exists) --- */
#gridHeader,
.grid.header,
.pay-grid-header,
.sheet-grid-header,
.pay-cols,
.pay-columns{
  display:none !important;
}



/* =========================================================
   Payroll number accent color
   - Used for salary main, Base/Increase amounts, OT, Paid$
     and key KPIs.
   ========================================================= */
:root{
  --payroll-num-accent: #5287c8;
  /* Accent for OT values ("v OT"). Override per-theme if needed. */
  --payroll-ot-accent: #5287c8;
  /* Paid currency accent (dark green) */
  --payroll-paid-accent: #166534;
}

/* Paid (USD + LL) highlight
   - target: row metrics values (v Paid$, v PaidLL)
   - target: KPI value (kpiD2_value)
*/
.pay-paid{
  color: var(--payroll-paid-accent) !important;
  font-weight: 900;
}


/* =========================================================
   OT value highlight
   - target the metric value span rendered as: class="v OT"
   ========================================================= */
.v.OT,
.v.pay-ot{
  color: var(--payroll-ot-accent) !important;
}

/* =========================================================
   Payroll-specific tabs (decoupled from ui.css .inv-tab)
   - so changes to invoices tabs never affect payroll
   ========================================================= */
.pay-top{ padding: 10px 12px 0; }
.pay-tabs{
  display:flex;
  gap:8px;
  align-items:center;
  overflow:auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}
.pay-tabs::-webkit-scrollbar{ display:none; }

.pay-tab{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  white-space: nowrap;
  cursor: pointer;

  /* payroll look: slightly more "glass" than invoices */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: var(--ink);
}
.pay-tab .material-icons{ font-size: 18px; opacity: .9; }

.pay-tab:hover{
  border-color: rgba(59,130,246,.25);
}

.pay-tab.active{
  border-color: rgba(59,130,246,.40);
  background: rgba(229,231,235,.92);
  box-shadow:
    0 10px 26px rgba(59,130,246,.14),
    0 8px 22px rgba(15,23,42,.06);
}


.status{ text-transform: uppercase; }



/* =========================================================
   Modal primitives (month/org/employee/status)
   NOTE: payroll.html uses .modal-backdrop + .modal + .modal-hdr markup
   ========================================================= */
.modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, .45);
  z-index: 120; /* above appbar/kpi cards */
}
.modal-backdrop.show{ display:flex; }

.modal{
  width: min(560px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  /*
    Windows/Chromium: native date/month pickers can be clipped when an ancestor uses
    overflow:hidden and/or transforms. Let the picker escape the modal box.
  */
  overflow: visible;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 80px rgba(2,6,23,.28);
}

/* =========================================================
   Glassy modals (Run status + confirm sheet)
   ========================================================= */
.modal.modal-glass{
  /* Even more transparent + glassy */
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow:
    0 26px 90px rgba(2,6,23,.34),
    inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
}

/* Slightly softer backdrop for "glassy" dialogs */
#statusModal.modal-backdrop,
#confirmSheet.modal-backdrop,
#orgModal.modal-backdrop{
  background: rgba(2, 6, 23, .18);
}

.modal-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(148,163,184,.18);
}

/* Sort modal close button: transparent with a subtle grey ring (Google-style circle) */
#sortModal #closeSortModalBtn{
  width: 38px;
  height: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 999px;

  /* transparent / glassy */
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.70);
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);

  display: grid;
  place-items: center;
}

#sortModal #closeSortModalBtn .material-icons{
  font-size: 18px;
  line-height: 1;
  transform: translateY(0.5px);
  color: rgba(15,23,42,.80);
}

#sortModal #closeSortModalBtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(148,163,184,.85);
}

#sortModal #closeSortModalBtn:active{
  transform: scale(.96);
}

/* Allow multiple buttons on the right side of modal headers (eg. Run status: Start blank + Close) */
.modal-hdr-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal-title{
  font-weight: 900;
  font-size: 15px;
  color: rgba(15,23,42,.92);
}
.modal-body{
  padding: 14px;
}
.modal-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-top: 12px;
}
.modal-actions .spacer{ flex:1; }



/* =========================================================
   Custom Month Picker (fully custom grid)
   ========================================================= */

/* Button that looks like a text field (used everywhere month selection is needed) */
.monthpick-field{
  width: 100%;
  min-height: 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  color: rgba(15,23,42,.92);
  font: 600 14px -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Arial;
}
.monthpick-field .mp-value{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1px;
}
.monthpick-field .material-icons{
  font-size: 18px;
  color: rgba(71,85,105,.9);
}
.monthpick-field:focus-visible{
  outline: 2px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

/* Month picker modal sizing */
.mp-modal{
  max-width: 520px;
}

.mp-year-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 2px 0 12px 0;
}
.mp-year{
  flex:1;
  text-align:center;
  font-weight: 700;
  font-size: 14px;
  color: rgba(15,23,42,.9);
  letter-spacing: .2px;
}
.mp-year-btn .material-icons{ font-size: 20px; }

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

.mp-month{
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(15,23,42,.06);
  border-radius: 14px;
  padding: 10px 10px;
  min-height: 40px;
  font-weight: 650;
  font-size: 13px;
  color: rgba(15,23,42,.88);
  cursor: pointer;
}
.mp-month:hover{ background: rgba(255,255,255,.75); }
.mp-month.is-selected{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.14);
  color: rgba(30,64,175,.98);
}

@media (max-width: 420px){
  .mp-grid{ gap: 8px; }
  .mp-month{ padding: 10px 8px; font-size: 12.5px; }
  .mp-year{ font-size: 13px; }
  .monthpick-field{ font-size: 13.5px; }
}

/* Make month input easier to tap */

/* =========================================================
   Payroll — Invoices-like list + details drawer
   ========================================================= */

/* =========================================================
   Month view sort toggle (right side of Month header)
   ========================================================= */

/* Place the toggle on the right side of the Month card header */
#paneMonth .dash-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.month-sort-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Month header sort button: use a clean up/down swap icon (no hamburger look) */
.month-sort-wrap #sortBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.month-sort-wrap #sortBtn .sort-btn-sym{
  font-size: 22px;
  opacity: .82;
  /* Make the Material Symbols glyph feel "product" not "icon pack" */
  font-variation-settings: 'FILL' 0, 'wght' 520, 'GRAD' 0, 'opsz' 22;
}



.sort-toggle{
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(15,23,42,.06);
}

.sort-toggle .sort-seg{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(71,85,105,.88);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.sort-toggle .sort-seg.is-active{
  background: rgba(37,99,235,.14);
  color: rgba(30,64,175,.98);
}

@media (max-width: 420px){
  .sort-toggle .sort-seg{ padding: 6px 6px; font-size: 10px; }
}
.pay-row{
  cursor: pointer;
}


/* Drag handle (shown only in Setup mode to make reordering foolproof) */
.pay-drag-handle{
  display:none;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(15,23,42,.06);
  cursor: grab;
  flex: 0 0 auto;
}
.pay-drag-handle .material-icons{
  font-size: 20px;
  opacity: .72;
}
body[data-sort-setup="1"] .pay-drag-handle{
  display:inline-flex;
}
body[data-sort-setup="1"] .pay-drag-handle:active{ cursor: grabbing; }
body[data-sort-setup="1"] .pay-drag-handle{ touch-action: none; }

/* Draggable rows in Setup mode */
body[data-sort-setup="1"] .pay-row{
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body[data-sort-setup="1"] .pay-row:active{ cursor: grabbing; }

/* Ensure text inside the row can't be selected while reordering */
body[data-sort-setup="1"] .pay-row *{
  user-select: none;
  -webkit-user-select: none;
}
body[data-sort-setup="1"] .pay-row.reorder-armed{
  animation: pay-wiggle 0.22s ease-in-out infinite;
}

body[data-sort-setup="1"] .pay-row.dragging{
  opacity: .92;
  animation: pay-wiggle 0.22s ease-in-out infinite, pay-flicker 0.55s ease-in-out infinite;
}

@keyframes pay-flicker{
  0%{   box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
  50%{  box-shadow: 0 0 0 4px rgba(59,130,246,.45); }
  100%{ box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
}

@keyframes pay-wiggle{
  0%{ transform: rotate(-1deg); }
  50%{ transform: rotate(1deg); }
  100%{ transform: rotate(-1deg); }
}

/* Placeholder slot while dragging */
.pay-row.reorder-placeholder{
  border: 1px dashed rgba(148,163,184,.55);
  background: rgba(248,250,252,.65);
  border-radius: 16px;
}

/* During drag: prevent scroll selection & highlight */
body.reorder-dragging{
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
body[data-sort-setup="1"] .pay-row{ touch-action: pan-y; }
.pay-row.active{
  border-color: rgba(37,99,235,.35) !important;
  box-shadow: 0 0 0 3px rgba(147,197,253,.45), 0 1px 3px rgba(15,23,42,.06);
}

/* Drawer/backdrop (invoices-like) */
.details-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.24);
  z-index: 80;
}
.details-drawer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 4px 4px calc(env(safe-area-inset-bottom) + 4px);
}
.details-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(2,6,23,.22);
  overflow: hidden;
}
.details-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148,163,184,.18);
}

/* Drawer header actions (Delete + Close) — subtle/transparent */
.details-actions{
  display:flex;
  align-items:center;
  gap: 6px;
}

/* Hard override: if older markup accidentally leaves glass styling on these header icons,
   force them to be quiet inside the employee details drawer header. */
#empDetailsDrawer .details-header .icon:not(.x-close-btn){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#empDetailsDrawer .details-header .icon.glass-btn:not(.x-close-btn),
#empDetailsDrawer .details-header .icon.round:not(.x-close-btn){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* IMPORTANT: do NOT use .glass-btn for these — keep them quiet */
.details-actions .emp-action-btn:not(.x-close-btn){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 12px;
  opacity: .35;
}

.details-actions .emp-action-btn:not(.x-close-btn) .material-icons{
  font-size: 22px;
  color: rgba(15,23,42,.72);
}

.details-actions .emp-action-btn:not(.x-close-btn):hover{
  opacity: .62;
  background: rgba(15,23,42,.04) !important;
}

.details-actions .emp-action-btn:not(.x-close-btn):active{
  opacity: .72;
  transform: scale(.96);
}


/* Delete: only hint red on hover (still subtle) */
#empDetailsDeleteBtn:hover .material-icons{
  color: rgba(185,28,28,.82);
}
.details-title{ font-weight: 900; font-size: 15px; color: rgba(15,23,42,.92); 
  font-size: 14px;
  line-height: 1.15;}
.details-subtitle{ font-size: 12px; color: rgba(71,85,105,.68); margin-top: 2px; 
  margin-top: 1px;
  line-height: 1.15;}
.details-title-wrap{ min-width:0; }
.details-body{  padding: 6px 8px; max-height: min(62vh, 520px); overflow:auto;}

.pay-detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.pay-detail-grid .field{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}
.pay-detail-grid .field > span{  font-size: 11px;
  font-weight: 800;
  color: rgba(71,85,105,.70);

  line-height: 1.1;}
.pay-detail-grid .field input,
.pay-detail-grid .field textarea{
  width: 100%;
  border: 1px solid rgba(148,163,184,.32);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 8px 9px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(15,23,42,.92);
  outline: none;

  line-height: 1.15;
  min-height: 60px;}
.pay-detail-grid .field textarea{
  resize: vertical;
  min-height: 72px;
  font-weight: 700;
}
.pay-detail-grid .field input:focus,
.pay-detail-grid .field textarea:focus{
  border-color: rgba(96,165,250,.70);
  box-shadow: 0 0 0 3px rgba(147,197,253,.40);
}
.pay-detail-grid .field.full{ grid-column: 1 / -1; }



@media (max-width: 720px){
  .pay-detail-grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   Payroll rows: match Invoices Month group header look
   Target the "pay-row" which reuses invoices' inv-row markup
   ========================================================= */

/* Base row: same feel as .month-group-header */
.pay-row.inv-row{
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
  padding: 12px 14px;
}

/* Hover + active like invoices */
.pay-row.inv-row:hover{
  border-color: rgba(37,99,235,.20);
}
.pay-row.inv-row.active{
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}

/* Text style: align with .month-group-title / .month-group-total */
.pay-row.inv-row .inv-row-title{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.92);
}
.pay-row.inv-row .inv-row-sub{
  font-size: 12px;
  color: rgba(71,85,105,.78);
}
.pay-row.inv-row .inv-row-amt{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.86);
}
.pay-row.inv-row .inv-row-meta{
  font-size: 12px;
  color: rgba(71,85,105,.78);
}

/* =========================================================
   Employee details — KPI grid separators
   The KPI cards use a 2-column split with a vertical divider.
   When the KPI card background is made transparent grey,
   some shared styles can leave the divider looking white.
   Force a consistent soft grey divider inside the employee drawer.
   ========================================================= */
#empDetailsDrawer .emp-kpis .kpi-split-col + .kpi-split-col{
  border-left: 1px solid rgba(148,163,184,.42) !important;
}

/* Tighten internal spacing to match month-group-header */
.pay-row.inv-row .inv-row-left{
  gap: 4px;
}
.pay-row.inv-row .inv-row-right{
  gap: 4px;
}


/* =========================================================
   Employees view — collapsible grouped lists
   (month-group / month-group-hdr / month-group-body)
   ========================================================= */

.month-group{
  display:block;
  margin: 0 0 10px;
}

.month-group-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
  cursor: pointer;
  user-select: none;
}

.month-group-left{ min-width: 0; }
.month-group-right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

.month-group-title{
  font-weight: 750;
  font-size: 13px;
  color: rgba(15,23,42,.92);
  line-height: 1.2;
}

/* Make the "X employees" part grey (requested) */
.emp-section-title .emp-section-meta,
.emp-section-title .emp-count,
.emp-section-title .emp-word{
  color: rgba(100,116,139,1);
  font-weight: 700;
}

.month-group-body{
  padding: 8px 0 0;
}

.month-group-body.is-collapsed{
  display:none;
}

/* Right side (line 1): Actual + Subtotal metrics */
.pay-row-metrics{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-row-metric{
  display:flex;
  align-items:baseline;
  gap: 6px;
  white-space: nowrap;
}
.pay-row-metric .k{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(71,85,105,.72);
}
.pay-row-metric .v{
  font-weight: 800;
  font-size: 13px;
  color: rgba(15,23,42,.86);
}

/* If you show a "Total" chip/label inside the row, keep it bold like invoices totals */
.pay-row-total,
.pay-row .pay-row-total{
  font-weight: 700;
  color: rgba(15,23,42,.86);
}

/* Mobile: keep the same header feel, but allow wrapping for long names */
@media (max-width: 720px){
  .pay-row.inv-row{
    padding: 12px 5px;
  }
  .pay-row.inv-row .inv-row-title{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
  }
  .pay-row.inv-row .inv-row-sub{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
}



/* =========================================================
   Payroll details drawer: make pay-details-card match dash-card
   + enforce 2-column "entry cells" layout like Total/Net
   ========================================================= */

/* Card shell = dash-card look */
.pay-details-card.details-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  overflow: hidden;
}

/* Header */
.pay-details-header.details-header{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  background: transparent;
}
.pay-details-header .details-title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.92);
}
.pay-details-header .details-subtitle{
  font-size: 12px;
  color: rgba(71,85,105,.72);
}

/* Body spacing */
.pay-details-body.details-body{
  padding: 8px;
}

/* Grid: always two "entry cells" per line (like Total/Net) */
.pay-detail-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* Field look to match invoices/dash style */
.pay-detail-grid .field{
  min-width: 0;
}
.pay-detail-grid .field > span{
  font-size: 12px;
  font-weight: 800;
  color: rgba(71,85,105,.70);
}
.pay-detail-grid .field input,
.pay-detail-grid .field textarea{
  width: 100%;
  min-width: 0;
  height: 44px;
  font-size: 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.86);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.pay-detail-grid .field textarea{
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  resize: vertical;
}

/* Full-width field spans both columns */
.pay-detail-grid .field.full{
  grid-column: 1 / -1;
}

/* Total/Net: make them look like the same 2-cell row */
/* Very small phones: allow stacking only if absolutely necessary */
@media (max-width: 340px){
  .pay-detail-grid{ grid-template-columns: 1fr; }
}



/* =========================================================
   Tuning: detailsCard match invoices drawer typography + tone
   - bigger fonts
   - lighter (less dark) backgrounds
   - "double" border feel via subtle inset + outer border
   ========================================================= */

.pay-details-card.details-card{
  background: rgba(255,255,255,.98);
  border-color: rgba(148,163,184,.24);
  box-shadow:
    0 1px 3px rgba(15,23,42,.06),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

.pay-details-header.details-header{
  border-bottom-color: rgba(148,163,184,.16);
}

.pay-details-header .details-title{
  font-size: 15px;
  font-weight: 900;
}
.pay-details-header .details-subtitle{
  font-size: 13px;
}

/* Labels + inputs a touch larger like invoices */
.pay-detail-grid .field > span,
.pay-detail-grid .field input,
.pay-detail-grid .field textarea{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow:
    0 1px 2px rgba(15,23,42,.03),
    inset 0 0 0 1px rgba(255,255,255,.55);
  font-size: 15px;
}
/* If the drawer/backdrop makes the card look darker, brighten the drawer surface */
.pay-details-drawer,
#detailsDrawer,
#detailsCard{
  background: transparent;
}



/* =========================================================
   Final polish: make Payroll details visually identical
   to Invoice details drawer (font scale, whites, borders)
   ========================================================= */

/* Overall drawer surface (match invoices light sheet) */
.pay-details-card.details-card{
  background: rgba(255,255,255,.995);
  border: 1px solid rgba(226,232,240,1);
  box-shadow:
    0 8px 24px rgba(15,23,42,.10),
    inset 0 0 0 1px rgba(255,255,255,.9);
}

/* Header typography exactly like Invoice details */
.pay-details-header .details-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.pay-details-header .details-subtitle{
  font-size: 13px;
  font-weight: 600;
}

/* Labels (VAT, Date, Base, etc.) */
.pay-detail-grid .field > span,
/* Input boxes – white, soft border, roomy */
.pay-detail-grid .field input,
.pay-detail-grid .field textarea{
  background: #ffffff;
  border: 1px solid rgba(226,232,240,1);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    inset 0 0 0 1px rgba(255,255,255,.9);
  font-size: 13px;
  line-height: 1.1;
  padding: 7px 9px;
  font-weight: 700;
  color: rgba(15,23,42,.95);
}

/* Totals / Net cells */
/* Notes textarea spacing like invoices */
.pay-detail-grid .field textarea{
  min-height: 80px;
  font-size: 15px;
}

/* Remove any remaining dark overlays */
.pay-details-drawer,
#detailsDrawer,
#detailsCard{
  background: rgba(248,250,252,1); /* slate-50 */
}



/* =========================================================
   Match Invoices drawer (glassy sheet) for Payroll details
   Fix: fonts too small, grey background, border mismatch
   ========================================================= */

/* Backdrop (same as .drawer-backdrop in invoices.css) */
.details-backdrop#payDetailsBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 78;
}

/* =========================================================
   Employee stats drawer (uses invoices primitives)
   Fix: backdrop dimmed but drawer didn't slide in (no specific styles)
   ========================================================= */

.drawer-backdrop#empDetailsBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 78;
}
.drawer-backdrop#empDetailsBackdrop[hidden]{
  display:none !important;
}
body.drawer-open .drawer-backdrop#empDetailsBackdrop{
  pointer-events: auto;
  opacity: 1;
}

/* Bottom-sheet for employee stats */
#empDetailsCard.drawer{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 80;
  transform: translateY(110%);
  transition: transform 220ms ease;
  max-height: min(72vh, 700px);
  /* avoid clipping native date/month pickers */
  overflow: visible;
  display:flex;
  flex-direction:column;
}
#empDetailsCard.drawer.show{
  /* remove transform while open so native pickers position correctly */
  transform: none;
}
#empDetailsCard.drawer .dash-card-body{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.details-backdrop#payDetailsBackdrop[hidden]{
  display:none !important;
}
.details-backdrop#payDetailsBackdrop.is-open,
.pay-details-drawer.show ~ .details-backdrop#payDetailsBackdrop,
.pay-details-drawer.show + .details-backdrop#payDetailsBackdrop{
  opacity: 1;
}

/* Drawer shell (same spirit as body.drawer-enabled #detailsCard) */
.pay-details-drawer#payDetailsDrawer{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  z-index: 80;
  transform: translateY(110%);
  transition: transform 220ms ease;
  border-radius: 20px;
  /* avoid clipping native date/month pickers */
  overflow: visible;

  /* invoices-like glass sheet */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(15,23,42,.20);

  /* cap height like invoices drawer */
  max-height: min(82vh, 760px);
  display:flex;
  flex-direction:column;
}
.pay-details-drawer#payDetailsDrawer.show{
  /* remove transform while open so native pickers position correctly */
  transform: none;
}

/* Keep inner card surfaces transparent (sheet is the glass) */
.pay-details-drawer#payDetailsDrawer .pay-details-card.details-card,
.pay-details-drawer#payDetailsDrawer .details-header,
.pay-details-drawer#payDetailsDrawer .details-body{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make the body scroll within the drawer */
.pay-details-drawer#payDetailsDrawer .details-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px;
}

/* Typography: bump to match invoices (bigger than before) */
.pay-details-drawer#payDetailsDrawer .details-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: rgba(15,23,42,.92);
}
.pay-details-drawer#payDetailsDrawer .details-subtitle{
  font-size: 12px;
  font-weight: 600;
  color: rgba(71,85,105,.72);
}

/* Close button match (glassy) */
.pay-details-drawer#payDetailsDrawer .glass-btn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pay-details-drawer#payDetailsDrawer .glass-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}

/* Inputs: keep crisp white (like your screenshot), but soften border to match invoices */
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field input,
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field textarea,
/* Labels slightly larger */
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field > span,
/* When drawer open, add bottom padding to the list (like invoices) */
body.pay-drawer-open #mainCard .dash-card-body,
body.pay-drawer-open #rows,
body.pay-drawer-open #employeeGroups,
body.pay-drawer-open #orgGroups{
  padding-bottom: calc(35vh + 18px);
  scroll-padding-bottom: calc(35vh + 18px);
}


body.emp-drawer-open #mainCard .dash-card-body,
body.emp-drawer-open #rows,
body.emp-drawer-open #employeeGroups,
body.emp-drawer-open #orgGroups{
  padding-bottom: calc(35vh + 18px);
  scroll-padding-bottom: calc(35vh + 18px);
}

/* Make payDetailsBackdrop clickable only when the payDetailsDrawer is actually open */
.pay-details-drawer#payDetailsDrawer.show ~ .details-backdrop#payDetailsBackdrop,
.pay-details-drawer#payDetailsDrawer.show + .details-backdrop#payDetailsBackdrop{
  pointer-events: auto;
  opacity: 1;
}

/* =========================================================
   Tune down Payroll drawer font sizes (slightly smaller)
   ========================================================= */
.pay-details-drawer#payDetailsDrawer .details-title{
  font-size: 16px;
}
.pay-details-drawer#payDetailsDrawer .details-subtitle{
  font-size: 13px;
}
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field > span,
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field input,
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field textarea{
  font-size: 15px;
  font-weight: 700;
}
/* =========================================================
   Drawer height + Notes sizing
   - Make drawer shorter overall
   - Notes starts shorter but user can expand
   ========================================================= */

/* Shorter drawer sheet */
.pay-details-drawer#payDetailsDrawer{
  max-height: min(68vh, 640px);
}

/* Slightly tighter body padding to reduce height */
.pay-details-drawer#payDetailsDrawer .details-body{
  padding: 10px 12px;
}

/* Notes: start shorter, expandable */
.pay-details-drawer#payDetailsDrawer .pay-detail-grid .field textarea{
  min-height: 72px;      /* shorter default */
  max-height: 40vh;      /* prevent taking whole screen */
  resize: vertical;      /* allow expand */
}


/* --- Payroll details drawer: match invoice dividers --- */
#detailsCard .pay-inv-detail{
  gap: 0; /* rows provide their own spacing */
}
#detailsCard .pay-inv-detail .inv-detail-row{
  padding: 10px 0;
}
#detailsCard .pay-inv-detail .label{
  font-weight: 600;
  color: rgba(71,85,105,.72);
}
#detailsCard .pay-inv-detail .value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 140px;
}

/* Inputs styled as inline values (not big pill boxes) */
#detailsCard .pay-detail-input{
  width: 140px;
  max-width: 55vw;
  text-align: right;
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 12px;
  color: rgba(15,23,42,.88);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  outline: none;
  box-sizing: border-box;
}
#detailsCard .pay-detail-input:focus{
  border: 1px solid rgba(148,163,184,.40);
  background: rgba(255,255,255,.30);
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

/* Read-only numbers look like invoice values */
#detailsCard .pay-detail-readonly{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.88);
}

/* =========================================================
   Details drawer (Month view) header actions
   - Delete + Close should be subtle, transparent material icons
   ========================================================= */

#detailsCard .dash-card-actions .pay-action-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 12px;
  opacity: .35;
  cursor: pointer;
}

#detailsCard .dash-card-actions .pay-action-btn .material-icons{
  font-size: 22px;
  color: rgba(15,23,42,.72);
}

#detailsCard .dash-card-actions .pay-action-btn:hover{
  opacity: .62;
  background: rgba(15,23,42,.04) !important;
}

#detailsCard .dash-card-actions .pay-action-btn:active{
  opacity: .72;
  transform: scale(.96);
}

/* Title row (employee name + up/down nav) */
#detailsCard .pay-details-title-row{
  display:flex;
  align-items:center;
  gap: 6px;
  min-width: 0;
}

#detailsCard .pay-details-title-row .dash-card-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#detailsCard .pay-details-nav{
  display:flex;
  align-items:center;
  gap: 2px;
  flex: 0 0 auto;
}

#detailsCard .pay-details-nav .pay-nav-btn{
  padding: 4px !important;
  border-radius: 12px;
}

#detailsCard .pay-details-nav .pay-nav-btn .material-icons{
  font-size: 20px;
}

#detailsCard .pay-details-nav .pay-nav-btn:disabled{
  opacity: .16;
  cursor: not-allowed;
}

/* Delete: only hint red on hover (still subtle) */
#payDetailsDeleteBtn:hover .material-icons{
  color: rgba(185,28,28,.82);
}

/* Notes block (full width, under divider rows) */
#detailsCard .pay-notes-row{
  border-bottom: none;
  padding-bottom: 6px;
}
#detailsCard .pay-notes-area{
  padding: 0 0 8px 0;
}
#detailsCard .pay-detail-notes{
  width: 100%;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.34);
  color: rgba(15,23,42,.86);
  font-weight: 600;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
#detailsCard .pay-detail-notes:focus{
  border-color: rgba(148,163,184,.40);
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

/* Smaller spacing on very small screens */
@media (max-width: 420px){
  #detailsCard .pay-detail-input{ width: 120px; }
}


/* --- Employee modals --- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row.gap{display:flex;align-items:center;gap:12px}
.spacer{flex:1}
.checklist{display:flex;flex-direction:column;gap:10px}
.check-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.check-item input{width:18px;height:18px}

/* simple switch */
.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.18);transition:.2s;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;top:2.5px;background:rgba(255,255,255,.9);transition:.2s;border-radius:999px}
.switch input:checked + .slider{background:rgba(120,255,170,.25)}
.switch input:checked + .slider:before{transform:translateX(18px)}

/* Checked switch = clear light-green ("true") */
.switch input:checked + .slider{
  background: rgba(34,197,94,.26);
  border-color: rgba(34,197,94,.30);
}

/* Employees tab: active badge + selection */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.70);
  color: rgba(71,85,105,.92);
}
.badge-on{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  color: rgba(21,128,61,.95);
}
.badge-off{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: rgba(153,27,27,.92);
}
.emp-select{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-left: 10px;
}

/* Employees tab: initial avatar + org toggle */
.emp-row .inv-row-title{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Employees rows: single-line (avatar + name + toggle) like Month rows */
.emp-row.inv-row{
  padding: 8px 10px;
}
.emp-row .inv-row-left{
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.emp-row .inv-row-title{
  min-width: 0;
  flex: 1 1 auto;
}
.emp-row .inv-row-title span:last-child{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  overflow: hidden; /* prevents large glyph clipping */
  flex: 0 0 30px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.78);
  color: rgba(71,85,105,.95);
}
.emp-row-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
}

.emp-toggle{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.70);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.emp-toggle .material-icons{ font-size: 22px; }
.emp-toggle.on{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.12);
}
.emp-toggle.off{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.18);
}


/* Draft-only: add/remove employee to current run (snapshot only) */
.emp-run-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.70);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  opacity: .78;
}
.emp-run-btn .material-icons{ font-size: 22px; }
.emp-run-btn:hover{ opacity: .95; }
.emp-run-btn:active{ transform: scale(.98); }
.emp-run-btn[disabled],
.emp-run-btn.disabled{
  opacity: .22;
  cursor: default;
  transform: none;
}


.check-row{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 8px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.check-row + .check-row{ margin-top: 10px; }

/* Overtime inline layout (details drawer) */
#detailsCard .dbi-inline-fields{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
#detailsCard .dbi-inline-fields .pay-detail-input{
  width:96px;
}
#detailsCard .dbi-inline-fields #payD_days{
  /* Keep Days compact so the left label doesn't get clipped */
  width:44px;
  min-width:44px;
}

#detailsCard .ot-inline-fields{
  display:flex;
  align-items:center;
  gap:8px;
}
#detailsCard .ot-inline-fields .pay-detail-input{
  width:110px;
}
#detailsCard .ot-sep{
  font-weight:800;
  color: rgba(71,85,105,.60);
}

/* Paid inline layout (details drawer) */
#detailsCard .paid-inline-fields{
  display:flex;
  align-items:center;
  gap:8px;
}
#detailsCard .paid-inline-fields .pay-detail-input{
  width:110px;
}
#detailsCard .paid-sep{
  font-weight:800;
  color: rgba(71,85,105,.60);
}

/* Drawer inline rows */
#detailsCard .inline-fields{
  display:flex;
  align-items:center;
  gap:8px;
}
#detailsCard .inline2 .pay-detail-input{
  width:110px;
}
#detailsCard .inline-sep{
  font-weight:900;
  color: rgba(71,85,105,.60);
}
#detailsCard .pay-detail-strong{
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
#detailsCard .readonly-fields{
  justify-content:flex-end;
}
#detailsCard .readonly-inline .pay-detail-readonly{
  font-size: 14px;
  font-weight: 900;
}

/* =========================================================
   Drawer polish:
   - Bigger typography (there's room)
   - Narrower centered drawer
   - Make read-only totals align with editable numbers
   ========================================================= */

/* Narrow centered drawer (desktop/tablet) without transform (keeps native pickers happy) */
#payDetailsDrawer{
  left: 0 !important;
  right: 0 !important;
  width: min(560px, calc(100% - 20px)) !important;
  margin: 0 auto !important;
  /* closed state animation */
  transform: translateY(110%) !important;
}
#payDetailsDrawer.show{
  /* open state: remove transform entirely */
  transform: none !important;
}

/* Bigger header text */
#payDetailsDrawer .details-title{ font-size: 20px !important; }
#payDetailsDrawer .details-subtitle{ font-size: 14px !important; }

/* Row label: force one line + shrink gently if needed */
/* Labels: larger, stay single-line, and shrink (instead of wrapping) */
#detailsCard .pay-inv-detail .label{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  /* bigger than before, but still responsive */
  font-size: clamp(14px, 2.4vw, 18px) !important;
  line-height: 1.1 !important;
}

/* Numbers: tabular + slightly bigger */
#detailsCard .pay-detail-input,
#detailsCard .pay-detail-readonly{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Numbers: slightly smaller than labels */
/* Numeric cells: slightly smaller + stretch evenly across the available space */
#detailsCard .pay-detail-input{
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: right;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  width: 100% !important;
}

/* Read-only values (Total | Net) should occupy the same column width as inputs */
/* Read-only values should occupy the exact same numeric column width */
#detailsCard .pay-detail-readonly{
  /* Make read-only cells visually match inputs and align perfectly */
  display: flex;
  width: 100% !important;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* Make every "two-number" row use a strict 2-column grid so Total|Net aligns */
#detailsCard .pay-inv-detail .inline-fields,
#detailsCard .pay-inv-detail .readonly-fields,
#detailsCard .pay-inv-detail .paid-inline-fields,
#detailsCard .pay-inv-detail .ot-inline-fields{
  display: grid !important;
  /* two equal columns that stretch, but never get too tiny */
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) !important;
  gap: 10px !important;
  align-items: center;
  justify-content: end;
}

/* Hide inline separators (we want clean "Label | Value Value") */
#detailsCard .pay-inv-detail .inline-sep,
#detailsCard .pay-inv-detail .ot-sep,
#detailsCard .pay-inv-detail .paid-sep{
  display: none !important;
}

/* Prevent value block wrapping (keeps the two numbers aligned) */
#detailsCard .pay-inv-detail .value{
  flex-wrap: nowrap !important;
}

/* Make Total | Net stand out a bit more without breaking alignment */
/* Total row: slightly stronger weight, but same column alignment */
#detailsCard .inv-detail-row.readonly-inline .pay-detail-readonly{
  font-weight: 900 !important;
}


/* Payroll month row: keep line 2 on a single line */
.pay-row-sub{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Ensure payroll row subtitle stays on one line */
.inv-row-sub.pay-row-sub{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Safety: always honor the HTML [hidden] attribute for payroll panes */
#paneMonth[hidden],
#paneEmployees[hidden],
#paneOrgs[hidden],
#paneHistory[hidden],
section[hidden]{
  display: none !important;
}

/* Extra guard: Month tab must NOT show other panes */
body[data-active-tab="month"] #paneEmployees,
body[data-active-tab="month"] #paneOrgs{
  display: none !important;
}


/* =========================================================
   Embedded from dashboards.css (to remove dashboards.css import)
   - KPI strip + compact header link styles
   ========================================================= */
:root{
  --dash-muted:#9aa1ad;
}

.dash-key{
  grid-column: 1 / -1;
}

/* Typography parity with invoices: keep headings calm (avoid 800 weight from ui.css) */
.dash-card-title{ font-weight: 600; }
.dash-card-subtitle{ font-weight: 400; color: var(--muted); }


.dash-card-body.kpi-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:8px;
}

@media (max-width: 340px){
  .dash-card-body.kpi-grid{
    grid-template-columns: 1fr !important;
  }
}

.kpi-item{
  padding:8px;
  border-radius:10px;
  background:#f3f4f6;
}

.kpi-label{
  font-size:12px;
  color:var(--dash-muted);
}

.kpi-value{
  margin-top:2px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em;
}

.kpi-sub{
  margin-top:2px;
  font-size:11px;
  color:var(--dash-muted);
}

/* Compact link in card headers */
.mini-link{
  border:none;
  background:transparent;
  color:#2563eb;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:2px;
  cursor:pointer;
  padding:0;
}


/* =========================================================
   Embedded from invoices.css (to remove invoices.css import)
   - Invoice-style rows + drawer primitives used by payroll.js
   ========================================================= */

.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--inv-ink);
  cursor:pointer;
}
.pill-btn .material-icons{ font-size: 18px; opacity:.9; }

/* KPI strip slightly tighter (matches invoices) */
.inv-kpis .kpi-value{ font-size: 16px; }
.inv-kpis .kpi-label,
.inv-kpis .kpi-sub{ font-size: 11px; }

/* Invoice list rows (used for employees/pay items) */
.inv-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.inv-row{
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.88);
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.inv-row:hover{ border-color: rgba(37,99,235,.20); }
.inv-row.active{
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}

.inv-row-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex: 1 1 auto;
}
.inv-row-title{
  font-weight: 700;
  font-size: 14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv-row-sub{
  font-size: 12px;
  color: rgba(71,85,105,.70);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv-row-meta{
  margin-top: 2px;
  font-size: 11px;
  color: rgba(71,85,105,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.inv-row-right{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.inv-row-amt{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14px;
}

/* Detail rows (used inside payroll detail panels) */
.inv-detail{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.inv-detail-row .key{
  font-size: 12px;
  color: rgba(71,85,105,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv-detail-row .value{
  font-size: 13px;
  color: rgba(71,85,105,.90);
  font-weight: 600;
  text-align:right;
  max-width: 62%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Drawer handle (KPI card top) */
.inv-kpis .dash-card-header{ position: relative; }
.inv-kpis .drawer-handle{
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 44px;
  height: 0px;              /* no visible bar */
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  margin: 0;
  flex: 0 0 auto;
}
/* generous invisible tap target */
.inv-kpis .drawer-handle::after{
  content:'';
  position:absolute;
  left:-14px; right:-14px; top:-12px; bottom:-12px;
}

/* --- Details drawer (glassy bottom sheet) --- */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 78;
}
.drawer-backdrop[hidden]{ display:none !important; }

body.drawer-open .drawer-backdrop{
  pointer-events: auto;
  opacity: 1;
}

body.drawer-enabled #detailsCard{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  max-height: min(47vh, 432px);
  z-index: 80;
  transform: translateY(110%);
  transition: transform 220ms ease;
  box-shadow: 0 18px 60px rgba(15,23,42,.20);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
}

body.drawer-open #detailsCard{
  transform: translateY(0);
}

/* Make drawer content scroll within */
body.drawer-enabled #detailsCard .dash-card-body{
  overflow: auto;
  max-height: calc(min(47vh, 432px) - 56px);
}

/* Little utility helpers used in markup */
.mini{ font-size: 12px; }
.muted{ opacity: .72; }
.solid{ opacity: 1; }
.empty{
  padding: 10px 2px;
  font-size: 13px;
  color: rgba(71,85,105,.68);
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(15,23,42,.88);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 12px 40px rgba(15,23,42,.26);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 120;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


/* =========================================================
   Pills sizing + alignment (tabs, search, manage)
   - align search row with tabs (no double left padding)
   - make all pills shorter and equal height
   ========================================================= */

.pay-top .inv-actions{
  /* pay-top already provides the left/right padding (12px),
     so remove inv-actions' own padding to align with tabs */
  padding: 10px 0 0 !important;
}

/* Unified "pill" height */
:root{
  --pay-pill-h: 40px;
  --pay-pill-r: 14px;
  --pay-pill-px: 12px;
}

/* Tabs + search + manage pill */
.pay-top .inv-tab,
.pay-top .inv-search,
.pay-top .pill,
.pay-top #manageBtn{
  height: var(--pay-pill-h) !important;
  min-height: var(--pay-pill-h) !important;

  padding: 0 var(--pay-pill-px) !important;
  border-radius: var(--pay-pill-r) !important;

  display: inline-flex !important;
  align-items: center !important;
}

/* Search input: match pill height */
.pay-top .inv-search input{
  height: 100% !important;
  padding: 0 8px !important;
}

/* Slightly tighter icon sizing for the shorter pills */
.pay-top .inv-tab .material-icons,
.pay-top .inv-search .material-icons,
.pay-top #manageBtn .material-icons{
  font-size: 18px;
}


/* === Make all 5 pills have a visible (but light) border === */
.inv-tab,
.inv-search,
#manageBtn,
.pill{
  border: 1px solid rgba(148,163,184,.70) !important; /* visible light border */
}

.inv-tab:hover,
.inv-search:hover,
#manageBtn:hover,
.pill:hover{
  border-color: rgba(148,163,184,.85) !important;
}


/* === Glassy pills (tabs, search, manage) === */
.inv-tab,
.inv-search,
#manageBtn,
.pill{
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 3px rgba(15,23,42,.08);
}

/* Hover = slightly stronger glass */
.inv-tab:hover,
.inv-search:hover,
#manageBtn:hover,
.pill:hover{
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(148,163,184,.65) !important;
}

/* Active tab: clearer glass + subtle blue tint */
.inv-tab.active{
  background: rgba(239,246,255,.85) !important;
  border-color: rgba(96,165,250,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(59,130,246,.18);
}

/* Keep search input fully glass */
.inv-search input{
  background: transparent !important;
}


/* === Glassy pills (tabs + search + manage) === */
.inv-tab,
.inv-search,
#manageBtn,
.pill{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,255,255,.60) 100%
  ) !important;

  border: 1px solid rgba(255,255,255,.55) !important;          /* inner glass rim */
  box-shadow:
    0 10px 24px rgba(15,23,42,.08),                             /* soft lift */
    inset 0 0 0 1px rgba(148,163,184,.55),                      /* outer edge */
    inset 0 1px 0 rgba(255,255,255,.70) !important;             /* top highlight */

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hover: a touch more contrast (still glass) */
.inv-tab:hover,
.inv-search:hover,
#manageBtn:hover,
.pill:hover{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.84) 0%,
    rgba(255,255,255,.64) 100%
  ) !important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.10),
    inset 0 0 0 1px rgba(148,163,184,.62),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* Active tab: slightly stronger glass + subtle blue edge */
.inv-tab.active{
  background: linear-gradient(
    180deg,
    rgba(229,231,235,.88) 0%,
    rgba(255,255,255,.66) 100%
  ) !important;

  box-shadow:
    0 14px 32px rgba(59,130,246,.12),
    0 10px 24px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(59,130,246,.30),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Search input stays transparent inside the glass pill */
.inv-search input{
  background: transparent !important;
}


/* === Glassy pills v2 (stronger) === */
.inv-tab,
.inv-search,
#manageBtn,
.pill{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.62) 55%,
    rgba(241,245,249,.55) 100%
  ) !important;

  /* brighter rim + clearer edge */
  border: 1px solid rgba(255,255,255,.80) !important;
  box-shadow:
    0 16px 36px rgba(15,23,42,.14),          /* stronger lift */
    0 2px 6px rgba(15,23,42,.06),
    inset 0 0 0 1px rgba(148,163,184,.70),   /* crisp outline */
    inset 0 1px 0 rgba(255,255,255,.92),     /* top highlight */
    inset 0 -10px 18px rgba(148,163,184,.10) !important; /* bottom shade */

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Add a subtle “sheen” on the right edge (works for buttons + search) */
.inv-tab::after,
.inv-search::after,
#manageBtn::after,
.pill::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(80% 120% at 85% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  opacity: .75;
}

/* Ensure positioning context for ::after sheen */
.inv-tab,
.inv-search,
#manageBtn,
.pill{ position: relative; }

/* Hover: more glass pop */
.inv-tab:hover,
.inv-search:hover,
#manageBtn:hover,
.pill:hover{
  box-shadow:
    0 18px 44px rgba(15,23,42,.18),
    0 2px 8px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(148,163,184,.82),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -10px 18px rgba(148,163,184,.12) !important;
}

/* Active tab: slightly tinted glass */
.inv-tab.active{
  background: linear-gradient(
    180deg,
    rgba(219,234,254,.95) 0%,
    rgba(255,255,255,.64) 60%,
    rgba(241,245,249,.56) 100%
  ) !important;

  border-color: rgba(191,219,254,.95) !important;
  box-shadow:
    0 18px 46px rgba(59,130,246,.18),
    0 2px 8px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(59,130,246,.30),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -10px 18px rgba(148,163,184,.10) !important;
}

/* Search input stays transparent inside glass */
.inv-search input{ background: transparent !important; }




/* =========================================================
   App-wide editable numbers accent (Payroll)
   Light blue for all editable numeric values
   ========================================================= */

:root{
  --editable-number-color: #60a5fa; /* light blue (Tailwind blue-400) */
}

/* Inputs that are numeric */
input[type="number"],
input[inputmode="decimal"],
input[inputmode="numeric"]{
  color: var(--editable-number-color) !important;
}

/* Inline numeric values & KPIs */
.kpi-value,
.pay-row-metric .v,
.inv-row-amt,
/* KPI: split a tile into two columns (Real Pay | Actual Salary) */
.kpi-split{ display:flex; gap:10px; align-items:flex-start; }
.kpi-split-col{ flex:1; min-width:0; }
.kpi-split-col + .kpi-split-col{ border-left: 1px solid rgba(148,163,184,.22); padding-left:10px; }
.kpi-split .kpi-value{ font-size:16px; }


/* =========================================================
   Month rows: employee-style layout (initials + 2 lines)
   ========================================================= */

.inv-row.pay-row{
  align-items: stretch;
  padding-top: 12px;
  padding-bottom: 12px;
}

.pay-row-wrap{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-row-line1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pay-row-ident{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pay-avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 30px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.78);
  color: rgba(71,85,105,.95);
}

.pay-avatar .txt-icon{
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   KPI Exclusion (Month rows)
   - When a payroll line has excluded=true (toggled by tapping initials),
     the Month row should look clearly "not included" while remaining clickable.
   ========================================================= */

.pay-row.is-excluded{
  opacity: .42;
}

.pay-row.is-excluded:hover{
  opacity: .58;
}

.pay-row.is-excluded.active{
  opacity: .78; /* keep selected row readable */
}

.pay-row.is-excluded .pay-avatar{
  background: rgba(148,163,184,.18);
  border-style: dashed;
}

.pay-row.is-excluded .pay-row-name,
.pay-row.is-excluded .pay-row-salary-main,
.pay-row.is-excluded .pay-row-salary-sub,
.pay-row.is-excluded .pay-m .v{
  opacity: .78;
}


.pay-row-name{
  font-weight: 700;
  font-size: 14px;
  color: rgba(15,23,42,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-row-salary{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  flex: 0 0 auto;
}

.pay-row-salary-main{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.92);
  letter-spacing: .1px;
}

/* Days worked badge (only rendered when != 26) */
.pay-row-days{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1px;
  color: rgba(71,85,105,.85);
  background: rgba(241,245,249,.9);
  border: 1px solid rgba(148,163,184,.28);
}

.pay-row-salary-sub{
  font-size: 12px;
  font-weight: 700;
  color: rgba(86, 118, 163, 0.68);
  white-space: nowrap;
}

/* Base / Increase amounts inside the sub-line */
.pay-row-salary-sub .Base,
.pay-row-salary-sub .Increase{
  color: var(--payroll-num-accent);
  font-weight: 650;
}

/* OT / Paid amounts in row metrics (classes added by JS) */
.pay-row .OT{
  color: var(--payroll-num-accent);
  font-weight: 900;
}

/* Paid amounts (USD + LL) */
.pay-row .pay-paid,
.pay-row .Paid\$,
.pay-row .PaidLL{
  color: var(--payroll-paid-accent) !important;
  font-weight: 900;
}


/* KPI accent numbers */
#kpiA2_value,
#kpiB1_value{
  color: var(--payroll-num-accent);
}

/* iPhone: keep KPI labels on one line.
   If space is tight, truncate instead of wrapping. */
.kpi-label,
#kpiA2_label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make sure split KPI columns can shrink (prevents label wrap weirdness) */
.kpi-split,
.kpi-split-col{
  min-width: 0;
}

/* KPI Paid value */
#kpiD2_value{
  color: var(--payroll-paid-accent) !important;
}
.pay-row-line2{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.pay-row-metrics2{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  min-width: 0;
}

.pay-m{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

/* Big dot separator between Paid USD and Paid LL */
.pay-sep-dot{
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  opacity: .7;
  margin: 0 6px;
}

/* Tighten Paid combo spacing: "Paid $ 465.00 • LL 375,000"
   - Reduce the visual gap between the USD amount and the LL amount.
*/
.pay-m.pay-paid-combo{
  gap: 4px;           /* was 6px via .pay-m */
}
.pay-m.pay-paid-combo .pay-sep-dot{
  margin: 0 2px;      /* was 0 6px */
  opacity: .65;
}
.pay-m.pay-paid-combo .pay-sep-dot{
  margin: 0 2px;      /* was 0 6px */
  opacity: .65;
}


/* iOS Safari edge case: sometimes commas/spaces still wrap inside flex children.
   Force the inner label/value nodes to never wrap. */
.pay-m .k,
.pay-m .v,
.pay-row-metric .k,
.pay-row-metric .v{
  white-space: nowrap;
  display: inline-block;
}

/* Defensive: never wrap metric keys/values inside a metric pill */
.pay-row-metric .k,
.pay-row-metric .v,
.pay-m .k,
.pay-m .v{
  white-space: nowrap;
}

.pay-m .k{
  font-size: 11px;
  font-weight: 700;
  color: rgba(71,85,105,.70);
}

.pay-m .v{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.90);
}

.pay-m.tiny .k{
  font-size: 10px;
  opacity: .85;
}

.pay-m.tiny .v{
  font-size: 11px;
  opacity: .92;
}

.pay-row-status{
  font-size: 12px;
  font-weight: 800;
  color: rgba(71,85,105,.70);
  white-space: nowrap;
}

/* =========================================================
   Readability: Advances + Loans numbers in light pink
   - KPI strip values (top)
   - Drawer inputs for Advances/Loan deductions
   - Employee details 'Advances' stat
   ========================================================= */

:root{
  --pay-adv-loan-color: #ab5959; /* light pink */
}

/* KPI strip (Advances / Loans) */
#kpiC1_value,
#kpiC2_value{
  color: var(--pay-adv-loan-color) !important;
}

/* Employee list row metrics (Adv / Loan) */
/* In payroll.js renderRows(), metrics order is: OT, Sub, Adv, Loan, Net, ... */
.pay-row-metrics2 .pay-m:nth-child(3) .v,
.pay-row-metrics2 .pay-m:nth-child(4) .v{
  color: var(--pay-adv-loan-color) !important;
}

/* Month details drawer inputs */
#payD_adv,
#payD_loan{
  color: var(--pay-adv-loan-color) !important;
}

/* Employee details drawer stat */
#empStatAdv{
  color: var(--pay-adv-loan-color) !important;
}
#kpiB2_value,
#kpiD1_value{
  color: #000 !important;
}


/* =========================================================
   Compact details drawer (override)
   - stronger, easy-to-notice spacing reductions
   ========================================================= */
.details-drawer{ padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px) !important; }
.details-card{ border-radius: 18px !important; }
.details-header{ padding: 8px 10px !important; }
.details-body{ padding: 8px 10px !important; }
.pay-detail-grid{ gap: 6px !important; }
.pay-detail-grid .field{ gap: 3px !important; }
.pay-detail-grid .field > span{ font-size: 11px !important; line-height: 1.1 !important; }
.pay-detail-grid .field input,
.pay-detail-grid .field textarea{ padding: 8px 9px !important; font-size: 13px !important; line-height: 1.15 !important; }
/* =========================================================
   Compact spacing that you will ACTUALLY see:
   Employee details drawer (opened from an employee row)
   Markup is injected by payroll.js as:
     - <div class="drawer-backdrop" id="empDetailsBackdrop">
     - <section class="dash-card drawer" id="empDetailsCard">
   ========================================================= */

/* Backdrop: slightly lighter + remove blur so it feels tighter */
.drawer-backdrop#empDetailsBackdrop{
  background: rgba(2,6,23,.08) !important;
}

/* Drawer sheet padding + header compact */
#empDetailsCard.drawer{
  left: 4px !important;
  right: 4px !important;
  bottom: 4px !important;
  max-height: min(58vh, 580px) !important;
}

#empDetailsCard.drawer .dash-card-header{
  padding: 6px 8px !important;
}

/* Body: reduce whitespace and line spacing */
#empDetailsCard.drawer .dash-card-body{
  padding: 6px 8px !important;
  line-height: 1.05 !important;
}

/* The top Month row */
#empDetailsCard.drawer .dash-card-body .row{
  gap: 4px !important;
}

/* Section separators/titles take less vertical space */
#empDetailsCard.drawer .pay-section-sep{
  margin: 6px 0 !important;
}
#empDetailsCard.drawer .pay-section-title{
  margin: 0 0 3px 0 !important;
}

/* The stat rows (Gross/Net/Paid/etc.): tighter row padding + smaller label line-height */
#empDetailsCard.drawer .pay-inv-detail .inv-detail-row{
  padding: 3px 0 !important;
}
#empDetailsCard.drawer .pay-inv-detail .label{
  line-height: 1.05 !important;
}

/* History list spacing */
#empDetailsCard.drawer #empHistoryList .inv-row,
#empDetailsCard.drawer #empHistoryList .pay-row{
  padding: 6px 8px !important;
}


/* =========================================================
   Compact spacing: Month Payroll details drawer
   Markup is injected as:
     - <div class="drawer-backdrop" id="detailsBackdrop">
     - <section class="dash-card drawer" id="detailsCard">
   ========================================================= */

.drawer-backdrop#detailsBackdrop{
  background: rgba(2,6,23,.08) !important;
}

#detailsCard.drawer{
  left: 4px !important;
  right: 4px !important;
  bottom: 4px !important;
  max-height: min(62vh, 650px) !important;
}

#detailsCard.drawer .dash-card-header{
  padding: 6px 8px !important;
}

#detailsCard.drawer .dash-card-body{
  padding: 6px 8px !important;
  line-height: 1.05 !important;
}

/* Make the detail rows denser */
#detailsCard.drawer .pay-inv-detail .inv-detail-row{
  padding: 3px 0 !important;
}

/* Notes area tighter */
#detailsCard.drawer .pay-notes-area{
  padding: 0 0 3px 0 !important;
}



/* =========================================================
   ULTRA compact (requested)
   - pushes the drawers to be as tight as safely readable
   - lives at EOF so it wins the cascade
   ========================================================= */

/* Generic details primitives (fallback) */
.details-drawer{ padding: 4px 4px calc(env(safe-area-inset-bottom) + 4px) !important; }
.details-card{ border-radius: 16px !important; }
.details-header{ padding: 6px 8px !important; }
.details-body{ padding: 6px 8px !important; }

.pay-detail-grid{ gap: 4px !important; }
.pay-detail-grid .field{ gap: 2px !important; }
.pay-detail-grid .field > span{ font-size: 10px !important; line-height: 1.05 !important; }
.pay-detail-grid .field input,
.pay-detail-grid .field textarea{
  padding: 6px 7px !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
}
/* Employee details drawer (real nodes) */
#empDetailsCard.drawer{
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  border-radius: 16px !important;
  max-height: min(56vh, 560px) !important;
}
#empDetailsCard.drawer .dash-card-header{ padding: 5px 7px !important; }
#empDetailsCard.drawer .dash-card-body{ padding: 5px 7px !important; line-height: 1.02 !important; }
#empDetailsCard.drawer .pay-inv-detail .inv-detail-row{ padding: 2px 0 !important; }
#empDetailsCard.drawer .pay-section-sep{ margin: 5px 0 !important; }
#empDetailsCard.drawer #empHistoryList .inv-row,
#empDetailsCard.drawer #empHistoryList .pay-row{ padding: 5px 7px !important; }

/* Month payroll details drawer (real nodes) */
#detailsCard.drawer{
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  border-radius: 16px !important;
  max-height: min(60vh, 620px) !important;
}
#detailsCard.drawer .dash-card-header{ padding: 5px 7px !important; }
#detailsCard.drawer .dash-card-body{ padding: 5px 7px !important; line-height: 1.02 !important; }
#detailsCard.drawer .pay-inv-detail .inv-detail-row{ padding: 2px 0 !important; }
#detailsCard.drawer .pay-notes-area{ padding: 0 0 2px 0 !important; }

/* Keep backdrops light so the tighter sheet feels crisp */
.drawer-backdrop#detailsBackdrop,
.drawer-backdrop#empDetailsBackdrop,
.details-backdrop#payDetailsBackdrop{
  background: rgba(2,6,23,.06) !important;
}


/* =========================================================
   Employee details drawer (empDetailsDrawer)
   - payroll.html uses .pay-details-drawer + .details-backdrop
   - keep styling consistent with payDetailsDrawer
   ========================================================= */

.details-backdrop#empDetailsBackdrop[hidden]{
  display:none !important;
}

.pay-details-drawer#empDetailsDrawer{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  z-index: 80;
  transform: translateY(110%);
  transition: transform 220ms ease;
  border-radius: 20px;
  /* allow native month picker to escape (Windows/Chromium) */
  overflow: visible;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(15,23,42,.20);

  max-height: min(58vh, 560px);
  display:flex;
  flex-direction:column;
}

.pay-details-drawer#empDetailsDrawer.show{
  /* remove transform while open so native pickers position correctly */
  transform: none;
}

.pay-details-drawer#empDetailsDrawer .details-header,
.pay-details-drawer#empDetailsDrawer .details-body{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pay-details-drawer#empDetailsDrawer .details-body{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px;
}

.pay-details-drawer#empDetailsDrawer .details-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: rgba(15,23,42,.92);
}

.pay-details-drawer#empDetailsDrawer .details-subtitle{
  font-size: 13px;
  font-weight: 600;
  color: rgba(71,85,105,.72);
}

.pay-details-drawer#empDetailsDrawer .glass-btn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pay-details-drawer#empDetailsDrawer .glass-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}

.pay-details-drawer#empDetailsDrawer .pay-detail-grid .field input,
.pay-details-drawer#empDetailsDrawer .pay-detail-grid .field > span,
/* =========================================================
   Run status — modern 3-way segmented toggle + timestamps
   ========================================================= */

.status-meta{
  margin: 0 0 10px 0;
  font-size: 12px;
  color: rgba(71,85,105,.85);
  line-height: 1.35;
}
.status-meta:empty{ display:none; }

.status-seg{
  position: relative;
  display:flex;
  flex: 1 1 auto;
  gap:2px;
  padding:3px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(15,23,42,.08);
  min-width: 240px;
}

.status-seg[data-value="draft"]{ --seg-x: 0px; }
.status-seg[data-value="approved"]{ --seg-x: calc(((100% - 6px - 4px) / 3) + 2px); }
.status-seg[data-value="paid"]{ --seg-x: calc(2 * (((100% - 6px - 4px) / 3) + 2px)); }
.status-seg .seg{
  position: relative;
  z-index: 1;
  flex:1;
  border:none;
  background:transparent;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  color:rgba(71,85,105,.85);
  transition: color .18s ease, transform .05s ease;
  -webkit-tap-highlight-color: transparent;
}

.status-seg .seg:active{ transform: scale(.98); }

.status-seg .seg.is-active{ color: rgba(15,23,42,.96); }
.status-seg .seg[data-status="approved"].is-active{ color: rgba(15,23,42,.96); }
.status-seg .seg[data-status="paid"].is-active{ color: rgba(22,101,52,.98); }

/* =========================================================
   Confirm sheet (bottom-style)
   ========================================================= */

.confirm-backdrop .confirm-modal{
  max-width: 520px;
}

.confirm-msg{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,23,42,.92);
  margin: 4px 0 14px;
  white-space: pre-line;
}

/* Make confirm CTA slightly bolder */
#confirmOkBtn{
  font-weight: 800;
}

/* =========================================================
   Locked runs: view-only drawer + subtle affordances
   ========================================================= */

.pay-lock-banner{
  display:none;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.4);
  background: rgba(248,250,252,.9);
  color: rgba(71,85,105,.95);
  font-size: 12px;
  line-height: 1.35;
}

#detailsCard.is-locked .pay-lock-banner{ display:block; }

#detailsCard.is-locked input.pay-detail-input,
#detailsCard.is-locked textarea.pay-detail-notes{
  opacity: .65;
}

#detailsCard.is-locked input.pay-detail-input:disabled{
  cursor: not-allowed;
}

#detailsCard.is-locked .pay-action-btn:not(.allow-locked){
  opacity: .45;
  pointer-events: none;
}

/* =========================================================
   Month view — unified Sort button + modal
   ========================================================= */

#paneMonth .month-sort-wrap{
  display:flex;
  align-items:center;
  gap: 8px;
}

#paneMonth #sortBtn{
  width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#paneMonth .sort-hint{
  font-size: 11px;
  font-weight: 800;
  color: rgba(71,85,105,.8);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Sort modal (glassy + modern pills)
   ========================================================= */

/* Make the Sort view extra transparent */
#sortModal.modal-backdrop{
  /* more transparent backdrop */
  background: rgba(2, 6, 23, .06);
}
#sortModal .modal.modal-glass{
  /* narrower than the default modal width + more transparent */
  width: min(420px, calc(83vw - 40px));
  max-width: 420px;

  /* make content behind the popup more visible */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 20px 70px rgba(2,6,23,.16),
    inset 0 1px 0 rgba(255,255,255,.70);

  /* less blur so the page reads through */
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);

  /* Animate height changes when sections appear/disappear */
  will-change: max-height;
  transition: max-height 180ms ease;
}

/* Hide Sort-by metrics when Manual or Reorder is active */
body[data-sort-mode="manual"] #sortMetricOptions,
body[data-sort-mode="setup"] #sortMetricOptions,
body[data-sort-mode="manual"] #sortHelp,
body[data-sort-mode="setup"] #sortHelp{
  display:none !important;
}

/* Shorter sheet when metrics are hidden */
body[data-sort-mode="manual"] #sortModal .modal,
body[data-sort-mode="setup"] #sortModal .modal{
  max-height: 54vh;
}

@media (prefers-reduced-motion: reduce){
  #sortModal .modal.modal-glass{ transition:none; }
}

/* Pills grid */
#sortModal .sort-sections{ display:flex; flex-direction:column; gap: 14px; }
#sortModal .sort-section-title{
  font-weight: 850;
  font-size: 13px;
  letter-spacing: -.008em;
  color: rgba(15,23,42,.90);
  margin: 2px 0 8px;
  text-rendering: geometricPrecision;
}
#sortModal .modal-title{
  font-weight: 850;
  font-size: 14px;
  letter-spacing: -.008em;
  color: rgba(15,23,42,.92);
  text-rendering: geometricPrecision;
}

#sortModal .sort-options{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* Modern glassy pill buttons */
#sortModal button.sort-opt{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  /* narrower + 1-line */
  padding: 7px 10px;
  min-height: 34px;
  border-radius: 12px;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.05;

  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.36) 0%,
    rgba(255,255,255,.18) 100%
  );
  box-shadow:
    0 10px 22px rgba(15,23,42,.09),
    inset 0 0 0 1px rgba(148,163,184,.26),
    inset 0 1px 0 rgba(255,255,255,.72);

  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  cursor: pointer;
  user-select: none;
}
#sortModal button.sort-opt:hover{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.22) 100%
  );
}

#sortModal button.sort-opt .label{
  font-weight: 820;
  font-size: 12px;
  letter-spacing: .06px;
  color: rgba(15,23,42,.92);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No checkmarks — active state is the pill color */
#sortModal button.sort-opt .material-icons.check{
  display:none !important;
}

/* Direction icon (JS toggles opacity); keep it aligned */
#sortModal button.sort-opt .material-icons.dir{
  font-size: 16px;
  transform: translateY(-1px);
}

/* Active pill = light green (true) */
#sortModal button.sort-opt.is-active{
  border-color: rgba(34,197,94,.42);
  background: linear-gradient(
    180deg,
    rgba(34,197,94,.22) 0%,
    rgba(34,197,94,.12) 100%
  );
  box-shadow:
    0 14px 30px rgba(34,197,94,.14),
    0 10px 22px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(34,197,94,.20),
    inset 0 1px 0 rgba(255,255,255,.80);
}


/* Disabled metric grid when Manual/Setup */
#sortModal #sortMetricOptions.is-disabled{
  opacity: .55;
  pointer-events: none;
}

#sortModal .sort-help{
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(71,85,105,.76);
  text-rendering: geometricPrecision;
}


/* Sort modal sections */
.sort-modal .section-hdr{
  margin: 2px 0 8px;
}

.sort-modal .sort-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.sort-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.32);
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  cursor: pointer;
  user-select: none;
}
.sort-option:hover{ background: rgba(255,255,255,.78); }
.sort-option.is-selected{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.14);
}
.sort-option .left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.sort-option .label{
  font-weight: 800;
  font-size: 12.5px;
  color: rgba(15,23,42,.88);
  letter-spacing: .15px;
}
.sort-option .hint{
  font-size: 11px;
  font-weight: 750;
  color: rgba(71,85,105,.72);
}
.sort-option .right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}
.sort-option .dir{
  font-size: 18px;
  color: rgba(30,64,175,.95);
  opacity: .0;
  transform: translateY(-1px);
}
.sort-option.is-selected .dir{ opacity: 1; }

.sort-option.is-disabled{
  opacity: .55;
  cursor: not-allowed;
}
.sort-option.is-disabled:hover{ background: rgba(255,255,255,.6); }

.sort-help{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(71,85,105,.78);
  line-height: 1.35;
}


/* =========================================================
   Paid reconciliation (KPI Paid -> modal)
   ========================================================= */

#kpiPaidTap{
  cursor: pointer;
  border-radius: 14px;
  padding: 2px 4px;
}
#kpiPaidTap:hover{
  background: rgba(255,255,255,.25);
}
#kpiPaidTap:focus-visible{
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}

.paid-compare-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .paid-compare-grid{
    grid-template-columns: 1fr 1fr;
  }
  .paid-diff{
    grid-column: 1 / -1;
  }
}

.paid-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.paid-card-title{
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.86);
  margin-bottom: 8px;
}
.paid-card-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.paid-card-row .k{
  font-size: 12px;
  font-weight: 700;
  color: rgba(71,85,105,.75);
}
.paid-card-row .v{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.paid-card-row.total{
  border-top: 1px dashed rgba(148,163,184,.45);
  margin-top: 6px;
  padding-top: 8px;
}
.paid-card-meta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(71,85,105,.82);
  line-height: 1.35;
}

.paid-diff{
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.paid-diff-value{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.paid-diff-value.pos{ color: rgba(16,185,129,.90); }
.paid-diff-value.neg{ color: rgba(239,68,68,.90); }
.paid-diff-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(71,85,105,.80);
}

.paid-compare-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}

/* =========================================================
   Sort modal UI polish (narrow pills, glass, green active)
   ========================================================= */
#sortModal .modal-title{
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.008em;
  text-rendering: geometricPrecision;
}

#sortModal .sort-section-title{
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.008em;
  text-rendering: geometricPrecision;
}

#sortModal .sort-options{
  gap: 8px;
}

#sortModal button.sort-opt{
  padding: 7px 10px;
  min-height: 34px;
  border-radius: 12px;
  gap: 8px;
  white-space: nowrap;
  line-height: 1.05;

  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.18) 100%);
  box-shadow:
    0 10px 22px rgba(15,23,42,.09),
    inset 0 0 0 1px rgba(148,163,184,.26),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

#sortModal button.sort-opt:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.22) 100%);
}

#sortModal button.sort-opt .label{
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .06px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* no checkmarks — active is shown by green pill */
#sortModal button.sort-opt .material-icons.check{ display:none !important; }

#sortModal button.sort-opt .material-icons.dir{
  font-size: 16px;
  transform: translateY(-1px);
}

/* Active pill = light green */
#sortModal button.sort-opt.is-active{
  border-color: rgba(34,197,94,.42);
  background: linear-gradient(180deg, rgba(34,197,94,.22) 0%, rgba(34,197,94,.12) 100%);
  box-shadow:
    0 14px 30px rgba(34,197,94,.14),
    0 10px 22px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(34,197,94,.20),
    inset 0 1px 0 rgba(255,255,255,.80);
}

#sortModal .sort-help{
  font-size: 11.5px;
  text-rendering: geometricPrecision;
}


/* Employees tab: run include/exclude as a single toggle */
.emp-run-toggle.on{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  opacity: .95;
}
.emp-run-toggle.off{
  border-color: rgba(148,163,184,.30);
  background: rgba(255,255,255,.70);
}

/* =========================================================
   Employee-scoped stats drawer (transparent + modern)
   ========================================================= */
.emp-kpis .k .v{ color: var(--payroll-num-accent); font-weight: 900; }
.emp-kpis .k .v.pay-paid{ color: var(--payroll-paid-accent); }
.emp-kpis .k .v.pay-ot{ color: var(--payroll-ot-accent); }

.emp-chart{
  width: 100%;
  min-height: 220px;
  border-radius: 18px;
  padding: 10px 8px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-note{
  opacity: .75;
  font-size: 12px;
  margin-left: auto;
  padding-left: 10px;
}

/* Small icon-only close in modals */
#sortCancelBtn.icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   Drawer header polish (Payroll line detailsCard)
   - avatar + tighter alignment + grouped nav
   ========================================================= */
#detailsCard .dash-card-header.pay-details-hdr{
  align-items: center;
  padding: 12px 12px 10px;
}

#detailsCard .pay-hdr-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

#detailsCard .pay-hdr-avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(15,23,42,.82);
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(148,163,184,.26);
}

#detailsCard .pay-hdr-text{
  display:flex;
  flex-direction: column;
  min-width: 0;
}

#detailsCard .pay-hdr-subrow{
  display:flex;
  align-items:baseline;
  gap: 8px;
  min-width: 0;
}

#detailsCard #payDetailsSubtitle{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#detailsCard .pay-hdr-count{
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: .85;
}

#detailsCard .pay-hdr-text .dash-card-title{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

#detailsCard .pay-hdr-text .dash-card-subtitle{
  margin-top: 2px;
}

#detailsCard .pay-hdr-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

#detailsCard .pay-details-nav{
  display:flex;
  align-items:center;
  gap: 0;
  padding: 2px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.55);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

#detailsCard .pay-details-nav .pay-nav-btn{
  opacity: .55;
  padding: 4px 6px !important;
  border-radius: 12px;
}

#detailsCard .pay-details-nav .pay-nav-btn + .pay-nav-btn{
  border-left: 1px solid rgba(148,163,184,.18);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#detailsCard .pay-details-nav .pay-nav-btn:hover{
  opacity: .8;
  background: rgba(15,23,42,.04) !important;
}

#detailsCard .pay-details-nav .pay-nav-btn:active{
  transform: scale(.97);
}

#detailsCard .dash-card-actions{
  display:flex;
  align-items:center;
  gap: 4px;
}


/* =========================================================
   KPI strip — keep split cells the same height
   Some KPI sub-lines (eg. Increase %) can be longer and wrap,
   which makes split halves uneven. Clamp and reserve space.
   ========================================================= */

/* Make sure KPI split columns can ellipsis text cleanly */
#kpiStrip .kpi-split-col{
  min-width: 0;
}

/* Labels should never wrap (keeps the top line aligned) */
#kpiStrip .kpi-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtext: allow up to 2 lines but keep a consistent height */
#kpiStrip .kpi-sub{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
  min-height: calc(2 * 1.15em);
}


/* === KPI color tweak (request) =========================
   - Employee drawer:
     KPI 1 (B): Last pay -> green number only
     KPI 3 (B): Last paid already green (ensure number only)
========================================================= */
#empLastPay.kpi-value{
  color: var(--payroll-paid-accent) !important;
  font-weight: 600;
}


/* =========================================================
   Employee drawer KPI compactness
   - Keep KPI height tight (no wrapping + max weight 700)
   ========================================================= */
.emp-kpis .kpi-label,
.emp-kpis .kpi-sub{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-kpis .kpi-value{
  font-weight: 700 !important;
  line-height: 1.05;
}

/* Comparative delta coloring (kept subtle, weight capped) */
.emp-kpis .kpi-value.pos{ color: #166534; font-weight: 700 !important; }
.emp-kpis .kpi-value.neg{ color: #991b1b; font-weight: 700 !important; }

/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}


/* =========================================================
   Employee Details — KPI grid background (transparent grey)
   Target: the KPI strip inside the employee details drawer.
   ========================================================= */
#empDetailsDrawer .emp-kpis .dash-card-body.kpi-grid{
  background: transparent !important; /* remove container bg */
}

/* Employee details — remove the outer KPI "container" card styling */
#empDetailsDrawer .emp-kpis{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#empDetailsDrawer .emp-kpis .dash-card-body{
  padding: 0 !important;          /* let KPI tiles breathe without a wrapper */
  background: transparent !important;
}

/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}

/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}

/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}

/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}


/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important;
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}


/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}


/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important; /* override inline margin */
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}


/* =========================================================
   Employee details — Base + Increase chart spacing
   Request: increase padding between KPI block and the chart,
            and add a bit more room between the chart header and chart.
   ========================================================= */
#empDetailsDrawer .emp-chart-wrap{
  padding-top: 12px;
}
#empDetailsDrawer .emp-chart-wrap .section-hdr{
  margin-top: 0 !important;
}
#empDetailsDrawer .emp-chart-wrap .emp-chart{
  margin-top: 8px;
}

/* =========================================================
   Employee details — unified soft panel background
   Applies to: KPI tiles, chart host + Apex canvas, and history rows
   ========================================================= */
:root{
  --emp-detail-soft-bg: #f0f2f7d6;
}

#empDetailsDrawer .kpi-item{
  background: var(--emp-detail-soft-bg) !important;
}

#empDetailsDrawer #empBaseIncChart{
  background: var(--emp-detail-soft-bg) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* ApexCharts surfaces */
#empDetailsDrawer #empBaseIncChart .apexcharts-canvas{
  background: var(--emp-detail-soft-bg) !important;
  border-radius: 16px;
}
#empDetailsDrawer #empBaseIncChart .apexcharts-svg{
  background: transparent !important;
}

/* History rows inside employee drawer */
#empDetailsDrawer .inv-row.pay-row{
  background: var(--emp-detail-soft-bg) !important;
}


/* =========================================================
   Header org pill: ALL (glassy grey)
   ========================================================= */
#headerOrgPill.is-all-org{
  background: rgba(148,163,184,.22) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.10)) !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  color: rgba(15,23,42,.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
  font-weight: 800;
  letter-spacing: .06em;
}


/* =========================================================
   Inline editable numbers (OT / Base-Increase / Loans views)
   - Month default remains read-only.
   ========================================================= */

.pay-inline{
  width: 72px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.86);
  border-radius: 12px;
  padding: 3px 7px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.92);
  outline: none;
  text-align: right;
  line-height: 1.1;
}

.pay-inline:focus{
  border-color: rgba(96,165,250,.70);
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

/* Make the sub-line inputs feel lighter */
.pay-row-salary-sub .pay-inline{
  width: 66px;
  font-weight: 750;
  padding: 2px 6px;
}

/* Hours input: compact */
.pay-inline-hours{
  width: 44px;
  font-weight: 800;
  padding: 2px 6px;
}