/* ==========================================================================
   UBIZIMA+ PAYROLL R1 — AUTH + DECK CLEARANCE R3

   The floating Ubuzima+ deck must NEVER cover the Payroll page header.

   The safe zone belongs to the actual visible Payroll stage, not merely
   an outer HRM wrapper.

   JavaScript may increase or reduce the internal padding after measuring
   the real deck. Before JavaScript runs, the conservative responsive
   fallback below already protects the page title.
   ========================================================================== */

#aquila-payroll-r1-stage {
  --aquila-payroll-stage-safe-top: 112px;

  box-sizing: border-box !important;

  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  padding-top:
    var(
      --aquila-payroll-stage-safe-top,
      112px
    ) !important;

  scroll-margin-top: 112px;
  scroll-padding-top: 112px;
}

#aquila-payroll-r1-stage
  > #hrm-payroll-r9-root {
  box-sizing: border-box !important;

  display: block !important;

  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  transform: none !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin-top: 0 !important;

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

#aquila-payroll-r1-stage
  > #hrm-payroll-r9-root
  > :first-child {
  margin-top: 0 !important;
}

@media (max-width: 1024px) {

  #aquila-payroll-r1-stage {
    --aquila-payroll-stage-safe-top: 100px;

    scroll-margin-top: 100px;
    scroll-padding-top: 100px;
  }
}

@media (max-width: 430px) {

  #aquila-payroll-r1-stage {
    --aquila-payroll-stage-safe-top: 94px;

    scroll-margin-top: 94px;
    scroll-padding-top: 94px;
  }
}


/* ==========================================================================
   PAYROLL CONTROL CENTER — SEAMLESS LOADING R4.1

   Dedicated Payroll scope only.
   Existing R3 deck-clearance rules above remain unchanged.
   ========================================================================== */

#aquila-payroll-r1-stage
  .aquila-payroll-r1-loading {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

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

  gap: 6px;

  width: 100%;
  min-height: 132px;

  padding: 22px 24px;

  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;

  background: rgba(255, 255, 255, .90);

  color: #1f2937;
}

#aquila-payroll-r1-stage
  .aquila-payroll-r1-loading-kicker {
  font-size: 11px;
  font-weight: 760;

  letter-spacing: .07em;
  text-transform: uppercase;

  color: #64748b;
}

#aquila-payroll-r1-stage
  .aquila-payroll-r1-loading
  strong {
  font-size: 15px;
  font-weight: 720;

  line-height: 1.35;

  color: #1e293b;
}

#aquila-payroll-r1-stage
  .aquila-payroll-r1-loading
  p {
  margin: 0;

  font-size: 12px;
  line-height: 1.5;

  color: #64748b;
}

#aquila-payroll-r1-stage[
  data-payroll-r1-stage="mounted"
] {
  min-height: 260px;
}

#aquila-payroll-r1-stage[
  data-payroll-r1-stage="ready"
] {
  min-height: 0;
}

#aquila-payroll-r1-stage
  .aquila-payroll-r1-error {
  margin: 0;

  border-radius: 10px;
}

@media (max-width: 768px) {

  #aquila-payroll-r1-stage
    .aquila-payroll-r1-loading {
    min-height: 116px;

    padding: 18px;
  }
}

@media (max-width: 430px) {

  #aquila-payroll-r1-stage
    .aquila-payroll-r1-loading {
    min-height: 104px;

    padding: 15px;
  }
}


/*
==========================================================================
AQUILA PAYROLL R8.1 — HEADER-INDEPENDENT STAGE
========================================================================== */

#aquila-payroll-r1-stage {
    --aquila-payroll-stage-safe-top: 0px !important;

    box-sizing: border-box !important;

    display: block !important;

    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    padding-top: 0 !important;

    margin-top: 0 !important;

    scroll-margin-top: 0 !important;
    scroll-padding-top: 0 !important;
}

#aquila-payroll-r1-stage > #hrm-payroll-r9-root {
    box-sizing: border-box !important;

    display: block !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    transform: none !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

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