/* =========================================================
   ShiftLynx Premium Payroll
   Visual-only enhancement. Existing IDs and JS remain intact.
========================================================= */

.payroll-main {
  --payroll-border: rgba(82, 190, 255, .17);
  --payroll-border-strong: rgba(43, 191, 255, .32);
  --payroll-surface: rgba(6, 18, 32, .88);
  --payroll-surface-soft: rgba(11, 31, 52, .72);
  --payroll-muted: #91a8c5;
  --payroll-cyan: #29c5ff;
  --payroll-blue: #3788ff;
  --payroll-green: #3de3aa;
  position: relative;
  max-width: 1640px;
}

.payroll-main::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 250px;
  height: 360px;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 0%, rgba(69, 87, 255, .13), transparent 38%),
    radial-gradient(circle at 18% 0%, rgba(0, 195, 255, .08), transparent 36%);
  z-index: -1;
}

.payroll-main .topbar {
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(122, 177, 224, .1);
  margin-bottom: 20px;
}

.payroll-heading {
  min-width: 0;
}

.payroll-eyebrow,
.section-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--payroll-cyan);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .17em;
}

.payroll-heading h2 {
  margin: 0 0 5px;
  font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.payroll-heading p {
  margin: 0;
  max-width: 650px;
  color: #9db2cc;
  font-size: .96rem;
}

.payroll-main .top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
}

.payroll-action-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 17px !important;
  border-radius: 13px !important;
  white-space: nowrap;
}

.payroll-action-btn svg {
  width: 17px;
  height: 17px;
}

.premium-period-toolbar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px !important;
  border: 1px solid var(--payroll-border) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(120deg, rgba(10, 31, 53, .94), rgba(6, 17, 31, .92)) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
}

.premium-period-toolbar::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -100px;
  top: -145px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 192, 255, .13), transparent 68%);
  pointer-events: none;
}

.payroll-period-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--payroll-muted) !important;
  font-size: .72rem !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payroll-period-kicker svg {
  width: 15px;
  height: 15px;
  color: var(--payroll-cyan);
}

.premium-period-toolbar h3 {
  margin-top: 7px !important;
  font-size: 1.17rem !important;
  letter-spacing: -.015em;
}

.period-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.period-actions button {
  min-width: 43px;
  height: 43px;
  border: 1px solid rgba(104, 167, 220, .18) !important;
  border-radius: 12px !important;
  background: rgba(9, 26, 45, .88) !important;
  color: #dceaff !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.period-actions button:hover {
  transform: translateY(-1px);
  border-color: var(--payroll-border-strong) !important;
  background: rgba(16, 45, 73, .95) !important;
}

#currentPayrollPeriodBtn {
  min-width: 78px;
  font-weight: 800;
}

.premium-payroll-card,
.premium-paystub-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--payroll-border) !important;
  border-radius: 25px !important;
  background:
    linear-gradient(145deg, rgba(7, 21, 38, .96), rgba(4, 14, 27, .94)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .21) !important;
}

.premium-payroll-card {
  padding: 26px !important;
}

.premium-payroll-card::before,
.premium-paystub-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 201, 255, .58), transparent);
}

.payroll-print-header {
  align-items: flex-start !important;
  margin-bottom: 23px;
}

.payroll-print-header h1 {
  margin-top: 0 !important;
  font-size: 1.65rem !important;
  letter-spacing: -.035em;
}

.payroll-print-header p {
  margin-top: 7px !important;
  color: var(--payroll-muted) !important;
}

.payroll-print-meta {
  padding: 10px 14px;
  border: 1px solid rgba(101, 169, 222, .12);
  border-radius: 14px;
  background: rgba(5, 16, 29, .62);
}

.payroll-print-meta strong {
  color: #f3f8ff !important;
}

.payroll-print-meta span {
  color: var(--payroll-muted) !important;
}

.payroll-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
  gap: 11px !important;
  margin-bottom: 24px;
}

.payroll-summary-grid > div {
  position: relative;
  overflow: hidden;
  min-height: 102px;
  padding: 17px 16px !important;
  border: 1px solid rgba(80, 160, 225, .17) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(15, 38, 65, .88), rgba(8, 25, 45, .78)) !important;
  transition: transform .2s ease, border-color .2s ease;
}

.payroll-summary-grid > div:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 196, 255, .33) !important;
}

.payroll-summary-grid > div::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 153, 255, .13), transparent 70%);
}

.payroll-summary-grid span {
  color: #93abc8 !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}

.payroll-summary-grid strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 12px;
  color: #49b7ff !important;
  font-size: 1.55rem !important;
  letter-spacing: -.035em;
}

.payroll-summary-grid > div:last-child strong {
  color: var(--payroll-green) !important;
}

.payroll-table-wrap,
.paystub-table-wrap {
  overflow: auto;
  border: 1px solid rgba(81, 151, 210, .13);
  border-radius: 18px;
  background: rgba(2, 12, 23, .48);
}

.payroll-table {
  min-width: 1040px;
}

.payroll-table thead,
.paystub-table thead {
  background: linear-gradient(90deg, rgba(17, 47, 85, .88), rgba(12, 34, 64, .84));
}

.payroll-table th,
.paystub-table th {
  padding: 14px 13px !important;
  color: #9dbaff !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  border-bottom: 1px solid rgba(90, 160, 220, .12) !important;
}

.payroll-table td,
.paystub-table td {
  padding: 15px 13px !important;
  border-bottom: 1px solid rgba(89, 145, 195, .09) !important;
}

.payroll-table tbody tr,
.paystub-table tbody tr {
  transition: background .16s ease;
}

.payroll-table tbody tr:hover,
.paystub-table tbody tr:hover {
  background: rgba(25, 76, 119, .12);
}

.payroll-empty-state {
  margin-top: 14px;
  padding: 34px 22px !important;
  border: 1px dashed rgba(65, 177, 241, .25) !important;
  border-radius: 18px !important;
  background: rgba(8, 26, 46, .64) !important;
  color: #9bb7da !important;
}

.premium-paystub-card {
  padding: 26px !important;
  margin-top: 22px !important;
}

.paystub-card-header h3 {
  font-size: 1.35rem !important;
  letter-spacing: -.025em;
}

.paystub-card-header p {
  max-width: 710px;
  color: #96abc5 !important;
}

.paystub-summary span {
  border-color: rgba(68, 178, 240, .18) !important;
  background: rgba(13, 39, 67, .82) !important;
  color: #bdd2eb !important;
}

.paystub-progress {
  margin-bottom: 18px;
  padding: 18px !important;
  border: 1px solid rgba(61, 167, 232, .16) !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(10, 34, 58, .82), rgba(7, 24, 43, .72)) !important;
}

.paystub-progress-label {
  color: var(--payroll-cyan) !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}

.paystub-progress-track {
  height: 8px !important;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(84, 129, 169, .18) !important;
}

.paystub-progress-track span {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24c9ff, #4779ff) !important;
  box-shadow: 0 0 18px rgba(36, 201, 255, .4);
}

@media (max-width: 1300px) {
  .payroll-summary-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .payroll-main::before { left: 0; }
  .payroll-main .topbar { align-items: flex-start; }
  .payroll-main .top-actions { width: 100%; margin: 14px 0 0; }
  .payroll-action-btn { flex: 1; }
  .payroll-summary-grid { grid-template-columns: repeat(2, minmax(135px, 1fr)) !important; }
}

@media (max-width: 620px) {
  .premium-period-toolbar { align-items: flex-start; flex-direction: column; }
  .period-actions { width: 100%; }
  #currentPayrollPeriodBtn { flex: 1; }
  .premium-payroll-card,
  .premium-paystub-card { padding: 18px !important; border-radius: 20px !important; }
  .payroll-summary-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .payroll-summary-grid > div { min-height: 92px; padding: 14px !important; }
  .payroll-summary-grid strong { font-size: 1.25rem !important; }
  .payroll-print-header { gap: 14px; }
  .payroll-print-meta { display: none; }
}

@media print {
  .payroll-eyebrow,
  .section-kicker { color: #333 !important; }
  .premium-payroll-card { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
}

/* ===== ShiftLynx Payroll V2 hard override ===== */
.payroll-premium-v2{padding:34px 38px 70px!important;background:radial-gradient(circle at 82% -5%,rgba(55,82,255,.16),transparent 27%),radial-gradient(circle at 18% 0,rgba(0,190,255,.08),transparent 24%)}
.payroll-premium-v2 .topbar{padding:0 0 26px!important;margin-bottom:24px!important}
.payroll-premium-v2 .payroll-heading h2{font-size:44px!important;letter-spacing:-.055em!important}
.payroll-premium-v2 .premium-period-toolbar{min-height:105px;padding:24px 28px!important;border-radius:24px!important;background:linear-gradient(135deg,rgba(12,35,58,.98),rgba(5,17,31,.96))!important;box-shadow:0 24px 65px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035)!important}
.payroll-premium-v2 .premium-payroll-card{padding:28px!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(7,23,40,.98),rgba(4,14,26,.98))!important;box-shadow:0 30px 80px rgba(0,0,0,.27)!important}
.payroll-premium-v2 .payroll-summary-grid{grid-template-columns:repeat(6,minmax(130px,1fr))!important;gap:12px!important;margin:24px 0!important}
.payroll-premium-v2 .payroll-summary-grid>div{min-height:118px!important;padding:18px!important;border-radius:18px!important;background:radial-gradient(circle at 100% 0,rgba(58,112,255,.18),transparent 44%),linear-gradient(145deg,#0c2238,#09192a)!important;border:1px solid rgba(84,172,235,.17)!important}
.payroll-premium-v2 .payroll-summary-grid span{font-size:10px!important;letter-spacing:.12em!important}
.payroll-premium-v2 .payroll-summary-grid strong{margin-top:18px!important;font-size:27px!important;color:#4dcfff!important}
.payroll-premium-v2 .payroll-table-wrap{border:1px solid rgba(86,167,225,.15)!important;border-radius:20px!important;overflow:hidden!important;background:#061521!important}
.payroll-premium-v2 .payroll-table thead{background:linear-gradient(90deg,#0e2d50,#10275f)!important}
.payroll-premium-v2 .payroll-table th{height:52px!important;color:#b7d5f2!important;font-size:10px!important;letter-spacing:.08em!important}
.payroll-premium-v2 .payroll-empty-state{margin-top:14px!important;min-height:76px!important;border-radius:17px!important;background:rgba(7,27,46,.8)!important}
.payroll-premium-v2 .premium-paystub-card{margin-top:26px!important;padding:28px!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(7,23,40,.98),rgba(4,14,26,.98))!important;box-shadow:0 30px 80px rgba(0,0,0,.2)!important}
.payroll-premium-v2 .paystub-progress{padding:20px!important;border-radius:18px!important;background:#081d31!important;border:1px solid rgba(78,180,244,.15)!important}
@media(max-width:1250px){.payroll-premium-v2 .payroll-summary-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:760px){.payroll-premium-v2{padding:22px 16px 80px!important}.payroll-premium-v2 .payroll-summary-grid{grid-template-columns:repeat(2,1fr)!important}.payroll-premium-v2 .payroll-heading h2{font-size:36px!important}}