:root {
  --hr-primary: #904d00;
  --hr-primary-soft: #ffa04b;
  --hr-primary-dark: #6f3900;
  --hr-background: #f8f9ff;
  --hr-surface: #ffffff;
  --hr-text: #121c2a;
  --hr-muted: #5f6977;
  --hr-border: #ead9c9;
  --hr-soft-surface: #fff7ef;
}

/* Global page styling */
body {
  background-color: var(--hr-background);
  color: var(--hr-text);
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Smooth scroll for navbar anchor links */
html {
  scroll-behavior: smooth;

  /* LANDING PAGE HR/PROFESSIONAL RESTRUCTURE - STEP 1C FIX 3
     Landing sections already have internal top padding. Keep the browser
     anchor position natural so previous sections do not hang above the
     selected Features, Roles, or Access section. */
  scroll-padding-top: 0;
}

/* =========================================================
   LANDING PAGE HR/PROFESSIONAL RESTRUCTURE - STEP 1C FIX 4
   Exact anchor landing positions.

   HR behaviour:
   - Features / Explore System should land with the Features section
     clearly framed as the main content.
   - Roles should land with the role workspace section clearly framed.
   - Access is intentionally left natural for now because it sits near
     the bottom of the page.
   ========================================================= */

body:not(.dashboard-page) #home,
body:not(.dashboard-page) #access {
  scroll-margin-top: 0;
}

body:not(.dashboard-page) #features {
  scroll-margin-top: 0.5rem;
}

body:not(.dashboard-page) #roles {
  scroll-margin-top: 2rem;
}

/*
  =====================================================================
  NAVBAR
  =====================================================================
*/
.hr-navbar {
  background: rgba(248, 249, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(234, 217, 201, 0.75);
}

.hr-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(135deg,
      var(--hr-primary) 0%,
      var(--hr-primary-soft) 100%);
  box-shadow: 0 12px 28px rgba(144, 77, 0, 0.18);
}

.hr-brand-text {
  color: var(--hr-primary-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/*
  =====================================================================
  HERO SECTION
  =====================================================================
*/
.hr-hero-section {
  padding-top: 8rem;
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
}

.hr-hero-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 160, 75, 0.18);
  filter: blur(10px);
}

.hr-hero-badge {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: #fff6ec;
  color: var(--hr-primary);
  border: 1px solid #f0d7b8;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hr-hero-title {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hr-hero-title .accent {
  color: var(--hr-primary);
  font-style: italic;
}

.hr-hero-copy {
  color: var(--hr-muted);
  font-size: 1.08rem;
  line-height: 1.8;
  max-width: 620px;
}

/* Right hero panel */
.hr-hero-panel,
.hr-modal-panel {
  background: linear-gradient(145deg, #7a4100 0%, #904d00 45%, #ffa04b 100%);
  color: #ffffff;
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 55px rgba(18, 28, 42, 0.12);
}

.hr-hero-panel {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hr-hero-panel::before,
.hr-hero-panel::after,
.hr-modal-panel::before,
.hr-modal-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.hr-hero-panel::before,
.hr-modal-panel::before {
  width: 220px;
  height: 220px;
  top: -55px;
  right: -55px;
}

.hr-hero-panel::after,
.hr-modal-panel::after {
  width: 160px;
  height: 160px;
  left: -30px;
  bottom: -35px;
}

.hr-panel-box {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/*
  =====================================================================
  BUTTONS
  =====================================================================
*/
.hr-btn-primary {
  background: linear-gradient(135deg,
      var(--hr-primary) 0%,
      var(--hr-primary-soft) 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(144, 77, 0, 0.16);
}

.hr-btn-primary:hover,
.hr-btn-primary:focus {
  color: #ffffff;
  opacity: 0.96;
}

.hr-btn-secondary {
  background: #ffffff;
  color: var(--hr-primary);
  border: 1px solid var(--hr-border);
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
  font-weight: 600;
}

.hr-btn-secondary:hover,
.hr-btn-secondary:focus {
  color: var(--hr-primary-dark);
}

/*
  =====================================================================
  CARDS
  =====================================================================
*/
.hr-mini-card,
.hr-feature-card,
.hr-role-card,
.hr-access-card {
  background: var(--hr-surface);
  border: 1px solid rgba(234, 217, 201, 0.95);
  border-radius: 1.35rem;
  box-shadow: 0 18px 40px rgba(18, 28, 42, 0.06);
}

.hr-feature-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff2e5;
  color: var(--hr-primary);
  font-size: 1.35rem;
}

/*
  =====================================================================
  SECTION TYPOGRAPHY
  =====================================================================
*/
.hr-section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hr-section-copy {
  color: var(--hr-muted);
  max-width: 680px;
  line-height: 1.8;
}

/*
  =====================================================================
  MODAL / SIGN-IN
  =====================================================================
*/
.hr-modal-shell {
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 55px rgba(18, 28, 42, 0.14);
}

/* Custom input appearance */
.form-control,
.form-select,
.input-group-text {
  min-height: 50px;
  border-color: var(--hr-border);
}

.form-control,
.form-select {
  border-radius: 0.9rem;
}

.input-group>.input-group-text {
  border-radius: 0.9rem 0 0 0.9rem;
}

.input-group>.form-control:last-child,
.input-group>.btn:last-child {
  border-radius: 0 0.9rem 0.9rem 0;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hr-primary-soft);
  box-shadow: 0 0 0 0.25rem rgba(144, 77, 0, 0.15);
}

.hr-link {
  color: var(--hr-primary);
  font-weight: 600;
  text-decoration: none;
}

.hr-link:hover {
  text-decoration: underline;
}

.hr-dev-note {
  border-left: 4px solid var(--hr-primary-soft);
  background: var(--hr-soft-surface);
  border-radius: 1rem;
}

/*
  =====================================================================
  FOOTER
  =====================================================================
*/
.hr-footer {
  background: #f2f4fb;
  border-top: 1px solid rgba(234, 217, 201, 0.8);
}

/*
  =====================================================================
  RESPONSIVE TUNING
  =====================================================================
*/
@media (max-width: 991.98px) {
  .hr-hero-section {
    padding-top: 7rem;
  }

  .hr-hero-panel {
    min-height: auto;
  }
}

/* =========================================================
   DASHBOARD SHARED STYLES
   These styles give the HR and Employee dashboards a more
   polished product feel while keeping Bootstrap structure.
   ========================================================= */

.dashboard-page {
  background: linear-gradient(180deg, #f7f4ef 0%, #f4f6f9 100%);
  min-height: 100vh;
}

/* =========================================================
   ALPATECH BRANDING - STEP 1C
   Tenant/workspace shell branding for Alpatech.

   HR/product behaviour:
   - Changes visual identity only.
   - Does not change employee, payroll, payslip, CSV export, email,
     Supabase, tenant filtering, or role/access behaviour.
   - Uses the flame icon as an image and renders ALPATECH as CSS text
     so the wordmark remains sharp and professional.
   ========================================================= */

body.alpatech-workspace {
  --hr-primary: #0b5f95;
  --hr-primary-soft: #36b9cf;
  --hr-primary-dark: #08446d;
  --hr-background: #f4f8fb;
  --hr-surface: #ffffff;
  --hr-text: #101828;
  --hr-muted: #667085;
  --hr-border: #d8e5ee;
  --hr-soft-surface: #eef9fc;
  background: linear-gradient(180deg, #f4f8fb 0%, #eef4f8 100%);
}

body.alpatech-workspace .dashboard-hero {
  padding: clamp(1.65rem, 3vw, 2.6rem);
  background:
    radial-gradient(circle at top right, rgba(54, 185, 207, 0.34), transparent 34%),
    linear-gradient(135deg, #073b63 0%, #0b5f95 58%, #37b9cf 100%);
  box-shadow: 0 20px 44px rgba(7, 59, 99, 0.2);
}

body.alpatech-workspace .dashboard-hero::before,
body.alpatech-workspace .dashboard-hero::after {
  background: rgba(255, 255, 255, 0.1);
}

body.alpatech-workspace .hero-badge {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.alpatech-workspace .hero-meta-card {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ALPATECH TENANT BRANDING - STEP 1G
   Keep the hero brand calm and breathable.
   The logo, badge, heading, and copy now have deliberate spacing instead
   of being visually packed into one tight cluster. */
.alpatech-hero-content {
  max-width: 760px;
}

.alpatech-hero-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.05rem;
}

.alpatech-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 50px;
  padding: 0.5rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(216, 229, 238, 0.92);
  box-shadow: 0 14px 30px rgba(7, 59, 99, 0.16);
}

.alpatech-hero-badge {
  margin-bottom: 0;
  min-height: 38px;
  padding-inline: 0.8rem;
}

.alpatech-hero-copy {
  max-width: 690px;
  line-height: 1.55;
}

.alpatech-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.alpatech-brand-mark img {
  display: block;
  width: 28px;
  height: 38px;
  object-fit: contain;
}

/* ALPATECH LOGO REFINEMENT - STEP 1I
   Add the subtle divider/slash between the flame icon and ALPATECH wordmark.

   HR/product behaviour:
   - Visual branding only.
   - Applies only inside Alpatech workspace shell branding.
   - Does not affect tenant logic, payroll, payslip, leave, email, or access.
   - Keeps non-Alpatech BexHR branding unchanged. */
body.alpatech-workspace .alpatech-hero-brand .alpatech-brand-mark::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 34px;
  margin-left: 0.55rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(148, 163, 184, 0.35) 16%,
    rgba(148, 163, 184, 0.72) 50%,
    rgba(148, 163, 184, 0.35) 84%,
    transparent 100%
  );
  transform: none;
}

/* ALPATECH LOGO REFINEMENT - STEP 1I-FIX 2
   Sidebar uses .bexhr-sidebar-brand::after for the ALPATECH wordmark,
   so the safest sidebar-only divider is a real right border on the flame
   mark itself. This creates: Flame | ALPATECH. */
body.alpatech-workspace .bexhr-sidebar-brand .alpatech-brand-mark {
  padding-right: 0.55rem;
  margin-right: 0.1rem;
  border-right: 1px solid rgba(148, 163, 184, 0.65);
}

/* ALPATECH LOGO REFINEMENT - STEP 1I
   Tighten the wordmark spacing after adding the divider so the logo still
   feels like one composed brand mark rather than three separated items. */
body.alpatech-workspace .alpatech-hero-brand {
  gap: 0.55rem;
}

body.alpatech-workspace .bexhr-sidebar-brand {
  gap: 0.45rem;
}

.alpatech-hero-mark img {
  width: 30px;
  height: 40px;
}

.alpatech-brand-wordmark {
  color: #0b5f95;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* ALPATECH TENANT BRANDING - STEP 1G
   While the full tenant/company identity is resolving, hide only the
   brand-bearing areas. This prevents a BexHR flash for Alpatech without
   hiding operational cards or blocking the whole dashboard. */
body.alpatech-workspace.alpatech-branding-resolving #tenantSidebarBrand,
body.alpatech-workspace.alpatech-branding-resolving #tenantHeroBrandingBlock {
  opacity: 0;
}

@media (max-width: 575.98px) {
  body.alpatech-workspace .dashboard-hero {
    padding: 1.35rem;
  }

  .alpatech-hero-kicker-row {
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
  }

  .alpatech-hero-brand,
  .alpatech-hero-badge {
    width: 100%;
    justify-content: flex-start;
  }

  .alpatech-brand-wordmark {
    font-size: 1.25rem;
  }
}

body.alpatech-workspace .dashboard-avatar {
  color: #08446d;
  background: linear-gradient(135deg, #ffffff 0%, #e7f7fb 100%);
  border-color: rgba(255, 255, 255, 0.72);
}

body.alpatech-workspace .btn-primary,
body.alpatech-workspace .dashboard-action-btn.btn-primary {
  background-color: #0b5f95;
  border-color: #0b5f95;
}

body.alpatech-workspace .btn-primary:hover,
body.alpatech-workspace .dashboard-action-btn.btn-primary:hover {
  background-color: #08446d;
  border-color: #08446d;
}

body.alpatech-workspace .btn-outline-primary {
  color: #0b5f95;
  border-color: #0b5f95;
}

body.alpatech-workspace .btn-outline-primary:hover {
  color: #ffffff;
  background-color: #0b5f95;
  border-color: #0b5f95;
}

/* ALPATECH ANNUAL LEAVE BRANDING - STEP 1A
   Tenant-scoped styling for employee leave entitlement cards only.
   Non-Alpatech tenants keep the default BexHR info-tile styling. */
body.alpatech-workspace .leave-entitlement-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 149, 0.18);
  background:
    radial-gradient(circle at top right, rgba(11, 95, 149, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  box-shadow:
    0 14px 34px rgba(11, 95, 149, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.alpatech-workspace .leave-entitlement-tile::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b5f95 0%, #1d9bd7 100%);
  opacity: 0.95;
}

body.alpatech-workspace .leave-entitlement-tile .info-tile-label {
  color: #667085;
  font-weight: 700;
}

body.alpatech-workspace .leave-entitlement-tile .info-tile-value {
  color: #0b3558;
}

body.alpatech-workspace .leave-entitlement-tile .progress {
  background-color: rgba(11, 95, 149, 0.12);
}

@media (min-width: 992px) {
  body.alpatech-workspace .bexhr-sidebar {
    background:
      radial-gradient(circle at top left, rgba(54, 185, 207, 0.16), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #f3f9fc 100%);
    border-right-color: rgba(216, 229, 238, 0.95);
    box-shadow: 8px 0 28px rgba(7, 59, 99, 0.07);
  }

  body.alpatech-workspace .bexhr-sidebar-brand {
    border-bottom-color: rgba(216, 229, 238, 0.95);
  }

  body.alpatech-workspace .bexhr-sidebar-brand::after {
    content: "ALPATECH";
    color: #0b5f95;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  body.alpatech-workspace .bexhr-sidebar-brand .alpatech-brand-mark img {
    width: 24px;
    height: 34px;
  }

  body.alpatech-workspace .bexhr-sidebar-item:hover {
    background: #eaf8fb;
    color: #08446d;
  }

  body.alpatech-workspace .bexhr-sidebar-item:hover i {
    color: #0b5f95;
  }

  body.alpatech-workspace .bexhr-sidebar-item.active {
    background: linear-gradient(135deg, #eaf8fb 0%, #f5fbfd 100%);
    color: #08446d;
    box-shadow: inset 0 0 0 1px rgba(11, 95, 149, 0.1);
  }

  body.alpatech-workspace .bexhr-sidebar-item.active::before {
    background: linear-gradient(180deg, #0b5f95 0%, #36b9cf 100%);
  }

  body.alpatech-workspace .bexhr-sidebar-item.active i {
    color: #0b5f95;
  }

  body.alpatech-workspace .bexhr-sidebar-footer {
    border-top-color: rgba(216, 229, 238, 0.95);
  }

  body.alpatech-workspace .bexhr-sidebar-footer .bexhr-sidebar-item:hover {
    background: #eaf8fb;
    color: #08446d;
  }
}

.dashboard-hero {
  background: linear-gradient(135deg, #7a4300 0%, #b96a10 55%, #e7963a 100%);
  color: #ffffff;
  border-radius: 28px;
  padding: 2rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.dashboard-hero::before,
.dashboard-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.dashboard-hero::before {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -60px;
}

.dashboard-hero::after {
  width: 160px;
  height: 160px;
  left: -40px;
  bottom: -50px;
}

.dashboard-hero>* {
  position: relative;
  z-index: 2;
}

.dashboard-hero::before,
.dashboard-hero::after {
  z-index: 1;
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.hero-meta-card {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 1rem 1.1rem;
  backdrop-filter: blur(4px);
}

.hero-meta-label {
  font-size: 0.82rem;
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.hero-meta-value {
  font-weight: 700;
  word-break: break-word;
}

.dashboard-section-card {
  border: 0;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
  background: #ffffff;
}

.dashboard-section-card .section-heading {
  font-weight: 800;
  color: #16233b;
}

.dashboard-section-card .section-subtext {
  color: #667085;
}

.info-tile {
  height: 100%;
  border-radius: 22px;
  border: 1px solid #e8edf3;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  padding: 1rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.info-tile-label {
  font-size: 0.86rem;
  color: #667085;
  margin-bottom: 0.45rem;
}

.info-tile-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #14213d;
  word-break: break-word;
}

.dashboard-note {
  border-radius: 22px;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbf5 100%);
  border: 1px solid #f5d7b2;
  padding: 1rem 1.1rem;
  color: #8b5e25;
}

.dashboard-table-wrap {
  border: 1px solid #edf1f5;
  border-radius: 20px;
  overflow: hidden;
}

.dashboard-table-wrap .table {
  margin-bottom: 0;
}

.dashboard-table-wrap thead th {
  background: #f8fafc;
  color: #475467;
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid #e9eef5;
}

.dashboard-table-wrap tbody td {
  vertical-align: middle;
}

.dashboard-action-btn {
  border-radius: 14px;
  font-weight: 600;
}

.dashboard-form-card .form-control,
.dashboard-form-card .form-select {
  border-radius: 16px;
  min-height: 50px;
}

.dashboard-form-card .form-control:focus,
.dashboard-form-card .form-select:focus {
  box-shadow: 0 0 0 0.18rem rgba(233, 150, 59, 0.2);
  border-color: #e7963a;
}

.dashboard-form-card .btn {
  border-radius: 16px;
  min-height: 48px;
  font-weight: 700;
}

.dashboard-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #7a4300;
  background: linear-gradient(135deg, #fff3e2 0%, #ffe2bd 100%);
  border: 2px solid rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .dashboard-hero {
    padding: 1.4rem;
    border-radius: 22px;
  }

  .dashboard-section-card {
    border-radius: 20px;
  }

  .info-tile {
    border-radius: 18px;
  }
}

/* =========================================================
   US006 - Leave Management additions
   Keeps employee dashboard aligned with admin/hr dashboards
========================================================= */

.dashboard-page {
  background-color: #f8f9fc;
  min-height: 100vh;
}

.dashboard-navbar {
  background: #ffffff;
  border-bottom: 1px solid #e9ecef;
}

.dashboard-navbar .navbar-brand {
  color: #212529;
}

.dashboard-navbar .nav-link {
  color: #495057;
  border: none;
  background: transparent;
}

.dashboard-navbar .nav-link.active {
  color: var(--hr-primary);
  font-weight: 600;
}

.dashboard-header-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
}

.dashboard-card {
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
}

.profile-avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #f1f3f5;
}

.dashboard-section {
  animation: fadeInSection 0.2s ease-in-out;
}

@keyframes fadeInSection {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   DASHBOARD TOOLBAR PATCH
   Keeps header actions inline on desktop and wraps cleanly
   only when space is genuinely limited.
   ========================================================= */
.dashboard-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  margin-left: auto;
}

.dashboard-toolbar .dashboard-action-btn,
.dashboard-toolbar .badge {
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .dashboard-toolbar {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* =========================================================
   HR FORM HEADER PATCH
   Keeps the employee form title area stacked, while the
   action controls stay on their own clean row.
   ========================================================= */
.hr-form-toolbar {
  width: 100%;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .hr-form-toolbar {
    justify-content: flex-start;
  }
}

/* =========================================================
   SHARED MOBILE TABLE USABILITY PATCH
   Applies across all role dashboards that use
   .dashboard-table-wrap for responsive tables.

   Purpose:
   - Keep the last column visible on smaller screens
   - Usually this is the Action column
   - Preserve Bootstrap horizontal scrolling
   - Improve mobile usability without changing desktop flow
   ========================================================= */

.dashboard-table-wrap {
  position: relative;
}

/* Keep table readable and prevent cramped wrapping on smaller devices */
@media (max-width: 991.98px) {
  .dashboard-table-wrap {
    position: relative;
    padding-bottom: 0.25rem;
  }

  .dashboard-table-wrap table {
    min-width: 920px;
  }

  .dashboard-table-wrap th,
  .dashboard-table-wrap td {
    vertical-align: middle;
  }

  /* Keep action buttons readable without forcing sticky clipping issues */
  .dashboard-table-wrap td:last-child .btn,
  .dashboard-table-wrap td:last-child .dashboard-action-btn {
    white-space: nowrap;
  }
}

/* Small phones: allow a little more scroll room and reduce density slightly */
@media (max-width: 575.98px) {
  .dashboard-table-wrap table {
    min-width: 980px;
  }

  .dashboard-table-wrap th,
  .dashboard-table-wrap td {
    font-size: 0.95rem;
  }
}

/* =========================================================
   SHARED TABLE SCROLL USABILITY PATCH
   Improves mobile/tablet horizontal table scrolling feel
   across all dashboards using .dashboard-table-wrap.
   ========================================================= */

.dashboard-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dashboard-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.dashboard-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}

.dashboard-table-wrap::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.05);
  border-radius: 999px;
}

/* =========================================================
   SHARED MOBILE TABLE HINT ROW
   This hint is shown above table wrappers only when a
   dashboard section includes .dashboard-table-hint.
   Safer than using ::before on the scroll container.
   ========================================================= */
.dashboard-table-hint {
  display: none;
}

@media (max-width: 991.98px) {
  .dashboard-table-hint {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.5rem;
    padding-left: 0.125rem;
  }
}

#employeeHeroImage.dashboard-avatar {
  object-fit: cover;
  display: inline-block;
}

/* =========================================================
   LANDING PAGE ANIMATION - STEP 1
   Subtle HR workflow animation for the public landing page.
   ========================================================= */

.landing-animated-page {
  position: relative;
  overflow: hidden;
}

.landing-animated-page::before,
.landing-animated-page::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

.landing-animated-page::before {
  width: 280px;
  height: 280px;
  top: -120px;
  right: -80px;
  background: rgba(166, 93, 0, 0.12);
  animation: landingGlowFloat 9s ease-in-out infinite;
}

.landing-animated-page::after {
  width: 220px;
  height: 220px;
  left: -90px;
  bottom: -90px;
  background: rgba(13, 110, 253, 0.08);
  animation: landingGlowFloat 11s ease-in-out infinite reverse;
}

.landing-animated-page>.container {
  position: relative;
  z-index: 1;
}

.landing-animate-in {
  opacity: 0;
  transform: translateY(18px);
  animation: landingFadeRise 0.75s ease forwards;
}

.landing-animate-delay-1 {
  animation-delay: 0.12s;
}

.landing-animate-delay-2 {
  animation-delay: 0.24s;
}

.landing-animate-delay-3 {
  animation-delay: 0.36s;
}

.landing-animate-delay-4 {
  animation-delay: 0.48s;
}

.landing-hero-card {
  animation:
    landingFadeRise 0.75s ease forwards,
    landingCardFloat 6s ease-in-out infinite 0.9s;
  transform-origin: center;
}

.hr-btn-primary,
.hr-btn-secondary,
.hr-mini-card,
.hr-panel-box,
.hr-feature-card,
.hr-role-card,
.hr-access-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.hr-btn-primary:hover,
.hr-btn-secondary:hover,
.hr-mini-card:hover,
.hr-panel-box:hover,
.hr-feature-card:hover,
.hr-role-card:hover {
  transform: translateY(-2px);
}

.landing-workflow-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.landing-workflow-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.68;
  animation: landingWorkflowPulse 5s ease-in-out infinite;
}

.landing-workflow-step:nth-child(1) {
  animation-delay: 0s;
}

.landing-workflow-step:nth-child(3) {
  animation-delay: 0.8s;
}

.landing-workflow-step:nth-child(5) {
  animation-delay: 1.6s;
}

.landing-workflow-step:nth-child(7) {
  animation-delay: 2.4s;
}

.landing-workflow-step:nth-child(9) {
  animation-delay: 3.2s;
}

.landing-workflow-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.landing-workflow-connector {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  position: relative;
}

.landing-workflow-connector::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: rgba(255, 255, 255, 0.85);
  animation: landingConnectorMove 5s ease-in-out infinite;
}

@keyframes landingFadeRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landingCardFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes landingGlowFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-18px, 18px, 0) scale(1.05);
  }
}

@keyframes landingWorkflowPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: translateY(0);
  }

  12%,
  24% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes landingConnectorMove {
  0% {
    transform: translateX(-100%);
  }

  18%,
  45% {
    transform: translateX(0);
  }

  70%,
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .landing-animated-page::before,
  .landing-animated-page::after,
  .landing-animate-in,
  .landing-hero-card,
  .landing-workflow-step,
  .landing-workflow-connector::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hr-btn-primary:hover,
  .hr-btn-secondary:hover,
  .hr-mini-card:hover,
  .hr-panel-box:hover,
  .hr-feature-card:hover,
  .hr-role-card:hover {
    transform: none;
  }
}

/* =========================================================
   LANDING PAGE HR/PROFESSIONAL RESTRUCTURE - STEP 1B
   Landing page spacing and visual density cleanup.

   HR behaviour:
   - the landing page should feel operational, not like a loose brochure
   - hero, features, roles, and access sections should read as one product
   - spacing should be tighter while preserving the existing premium look
   - dashboard, modal, sign-in logic, and role routing remain untouched
   ========================================================= */

body:not(.dashboard-page) .hr-hero-section {
  padding-top: 6.75rem;
  padding-bottom: 3.25rem;
}

body:not(.dashboard-page) .hr-hero-copy {
  line-height: 1.65;
  max-width: 590px;
}

body:not(.dashboard-page) .hr-hero-panel {
  min-height: 440px;
}

body:not(.dashboard-page) .hr-hero-panel h2 {
  line-height: 1.2;
}

body:not(.dashboard-page) .hr-panel-box small {
  line-height: 1.55;
}

/* Keep the public sections tighter without changing dashboard sections. */
body:not(.dashboard-page)>section.py-5.landing-animate-in {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

body:not(.dashboard-page)>section.py-5.landing-animate-in .container.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

#features .text-center.mb-5 {
  margin-bottom: 2rem !important;
}

#features .hr-feature-card {
  min-height: 100%;
}

#features .hr-feature-card p,
#roles .hr-role-card .small,
#access .hr-section-copy {
  line-height: 1.6;
}

#roles .row.align-items-center.g-4 {
  row-gap: 2rem !important;
}

#roles .hr-role-card {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#access .hr-access-card {
  box-shadow: 0 16px 36px rgba(18, 28, 42, 0.07);
}

/* Desktop-only tightening so mobile keeps comfortable breathing room. */
@media (min-width: 992px) {
  body:not(.dashboard-page) .hr-hero-title {
    font-size: clamp(3rem, 4.6vw, 4.45rem);
    max-width: 650px;
  }

  body:not(.dashboard-page) .hr-hero-section .row.align-items-center {
    align-items: center !important;
  }

  #features {
    margin-top: -0.75rem;
  }

  #roles {
    padding-top: 2.5rem !important;
  }

  #access {
    padding-top: 2.25rem !important;
  }
}

@media (max-width: 991.98px) {
  body:not(.dashboard-page) .hr-hero-section {
    padding-top: 6.25rem;
    padding-bottom: 2.75rem;
  }

  body:not(.dashboard-page)>section.py-5.landing-animate-in {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 575.98px) {
  body:not(.dashboard-page) .hr-hero-section {
    padding-top: 5.75rem;
    padding-bottom: 2.25rem;
  }

  body:not(.dashboard-page) .hr-hero-title {
    line-height: 1.08;
  }

  #roles .hr-role-card {
    min-height: auto;
  }
}

/* =========================================================
   LANDING PAGE UI POLISH - STEP 1C
   Mobile workflow strip refinement.

   Purpose:
   - Keep the animated workflow strip readable on phones
   - Stack workflow steps vertically on small screens
   - Turn horizontal connectors into short vertical connectors
   - Keep desktop/tablet behaviour unchanged
   ========================================================= */

@media (max-width: 575.98px) {
  .landing-workflow-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .landing-workflow-step {
    width: 100%;
    justify-content: flex-start;
    padding: 0.45rem 0.55rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
  }

  .landing-workflow-connector {
    width: 2px;
    height: 18px;
    align-self: center;
  }

  .landing-workflow-connector::after {
    transform: translateY(-100%);
    animation: landingConnectorMoveMobile 5s ease-in-out infinite;
  }
}

/* Mobile-only connector movement for the stacked workflow layout */
@keyframes landingConnectorMoveMobile {
  0% {
    transform: translateY(-100%);
  }

  18%,
  45% {
    transform: translateY(0);
  }

  70%,
  100% {
    transform: translateY(100%);
  }
}

/* =========================================================
   WORKSPACE UI POLISH - HR/PAYROLL STANDARD STEP 2F
   Make the HR Workspace switcher feel like a compact navigation bar.

   The orange hero already carries the main dashboard identity.
   This white card should therefore stay lighter, tighter, and operational:
   - less empty white space
   - clearer active tab area
   - Run Payroll remains the separate green action
========================================================= */

.dashboard-section-card:has(#hrTabProfileBtn) {
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.dashboard-section-card:has(#hrTabProfileBtn) .card-body {
  padding: 1rem 1.25rem !important;
}

.dashboard-section-card:has(#hrTabProfileBtn) .section-heading {
  font-size: 1.05rem;
  margin-bottom: 0.15rem !important;
}

.dashboard-section-card:has(#hrTabProfileBtn) .section-subtext {
  font-size: 0.82rem;
}

.dashboard-section-card:has(#hrTabProfileBtn) .dashboard-action-btn {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
}

.dashboard-section-card:has(#hrTabProfileBtn) #runPayrollActionBtn {
  box-shadow: 0 8px 18px rgba(25, 135, 84, 0.18);
}

@media (max-width: 767.98px) {

  /* WORKSPACE UI POLISH - HR/PAYROLL STANDARD STEP 2F
     On smaller screens, keep the tab strip compact but allow buttons to wrap neatly. */
  .dashboard-section-card:has(#hrTabProfileBtn) .card-body {
    padding: 0.9rem 1rem !important;
  }

  .dashboard-section-card:has(#hrTabProfileBtn) .dashboard-action-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* =========================================================
   WORKSPACE UI POLISH - HR/PAYROLL STANDARD STEP 2F-1
   Stronger visible polish for the HR Workspace switcher.

   HR/payroll behaviour:
   - this area is quick navigation
   - it should be compact
   - it should not compete visually with the orange dashboard hero
   - Run Payroll remains the main green action
========================================================= */

.workspace-switcher-card {
  border: 1px solid rgba(180, 83, 9, 0.16) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fffaf3 100%) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07) !important;
}

.workspace-switcher-card .card-body {
  padding: 0.85rem 1rem !important;
}

.workspace-switcher-card .section-heading {
  font-size: 1rem !important;
  margin-bottom: 0.1rem !important;
}

.workspace-switcher-card .section-subtext {
  font-size: 0.8rem !important;
  color: #64748b !important;
}

.workspace-switcher-card .dashboard-action-btn {
  min-height: 34px;
  padding: 0.38rem 0.75rem !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 600;
}

.workspace-switcher-card .btn-primary {
  box-shadow: 0 8px 18px rgba(13, 110, 253, 0.18);
}

.workspace-switcher-card #runPayrollActionBtn {
  padding-inline: 0.9rem !important;
  box-shadow: 0 8px 18px rgba(25, 135, 84, 0.2);
}

@media (min-width: 992px) {
  .workspace-switcher-card .card-body>.d-flex {
    min-height: 42px;
  }
}

@media (max-width: 767.98px) {
  .workspace-switcher-card .card-body {
    padding: 0.85rem !important;
  }

  .workspace-switcher-card .dashboard-action-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* =========================================================
   BEXHR EMPLOYEE FORM PROGRESS STEPPER
   Informational step indicator for the long employee enrolment
   form. Steps turn amber with a checkmark when the section has
   data (class added by JS via updateEmployeeFormSteps()).
   ========================================================= */

.bexhr-form-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.75rem 1rem;
  background: #fafbfc;
  border: 1px solid #edf1f5;
  border-radius: 16px;
}

.bexhr-form-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 56px;
}

.bexhr-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d1d8e0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
}

/* Show number by default, hide checkmark */
.bexhr-step-dot .bi-check-lg {
  display: none;
}

.bexhr-step-dot .bexhr-step-num {
  display: block;
}

/* When step is done: amber dot, checkmark visible */
.bexhr-form-step.form-step-done .bexhr-step-dot {
  border-color: var(--hr-primary);
  background: var(--hr-primary);
  color: #ffffff;
}

.bexhr-form-step.form-step-done .bexhr-step-dot .bi-check-lg {
  display: block;
}

.bexhr-form-step.form-step-done .bexhr-step-dot .bexhr-step-num {
  display: none;
}

.bexhr-form-step.form-step-done .bexhr-step-label {
  color: var(--hr-primary);
  font-weight: 600;
}

.bexhr-step-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.bexhr-form-step-connector {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  min-width: 12px;
  margin-bottom: 1.15rem;
  /* align with dot centre */
  transition: background 0.2s ease;
}

/* Connector goes amber when the step before it is done */
.bexhr-form-step.form-step-done+.bexhr-form-step-connector {
  background: var(--hr-primary-soft);
}

@media (max-width: 575.98px) {
  .bexhr-form-steps {
    gap: 0.25rem;
  }

  .bexhr-step-label {
    display: none;
    /* just show dots on very small screens */
  }

  .bexhr-form-step-connector {
    min-width: 8px;
  }
}

/* =========================================================
   BEXHR STICKY SIDEBAR
   Desktop-only left sidebar. Hidden on mobile - the existing
   workspace-switcher card handles navigation on small screens.
   Proxies to existing hrTab* buttons so all JS stays unchanged.
   ========================================================= */

:root {
  --sidebar-width: 200px;
}

/* Shift page body to make room for the sidebar on large screens */
@media (min-width: 992px) {
  body.bexhr-has-sidebar {
    padding-left: var(--sidebar-width);
  }
}

.bexhr-sidebar {
  display: none;
  /* hidden on mobile */
}

@media (min-width: 992px) {
  .bexhr-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid rgba(234, 217, 201, 0.8);
    box-shadow: 2px 0 16px rgba(18, 28, 42, 0.05);
    z-index: 1040;
    padding: 1.25rem 0.75rem;
    gap: 0.5rem;
  }
}

.bexhr-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem 1rem;
  border-bottom: 1px solid rgba(234, 217, 201, 0.6);
  margin-bottom: 0.5rem;
}

.bexhr-sidebar-brand::after {
  content: "BexHR";
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--hr-primary-dark);
  letter-spacing: -0.02em;
}

.bexhr-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.bexhr-sidebar-footer {
  border-top: 1px solid rgba(234, 217, 201, 0.6);
  padding-top: 0.75rem;
}

.bexhr-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--hr-muted);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.bexhr-sidebar-item.active {
  background: #fff2e5;
  color: var(--hr-primary);
  font-weight: 600;
}

/* Hide the workspace-switcher tab card on desktop when sidebar is present */
@media (min-width: 992px) {
  body.bexhr-has-sidebar .workspace-switcher-card {
    display: none !important;
  }
}

/* =========================================================
   SKELETON LOADING SHIMMER
   Applied to stat tiles and hero meta values while data loads.
   JS removes the class and sets real text once data arrives.
   ========================================================= */

@keyframes skeletonShimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.skeleton {
  display: inline-block;
  min-width: 48px;
  min-height: 1em;
  border-radius: 6px;
  background: linear-gradient(90deg,
      #e8edf3 25%,
      #f4f6f9 50%,
      #e8edf3 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  user-select: none;
  vertical-align: middle;
}

/* Wider skeleton for text values like email */
.skeleton-wide {
  min-width: 120px;
}

/*
  =====================================================================
  PRINT - payslip only
  When the user clicks "Print" on a payslip we want a clean A4 output
  showing only the payslip content. Everything else (navbar, sidebar,
  modals chrome, buttons) is hidden.
  =====================================================================
*/
@media print {

  /* Hide the entire page ... */
  body * {
    visibility: hidden;
  }

  /* ... then reveal only the payslip content and its descendants */
  #payslipPreviewContent,
  #payslipPreviewContent * {
    visibility: visible;
  }

  /* Position the payslip block so it fills the printed page */
  #payslipPreviewContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
  }

  /* Remove Bootstrap modal backdrop and any overflow clipping */
  .modal,
  .modal-dialog,
  .modal-content {
    overflow: visible !important;
  }
}

/* =========================================================
   EMPLOYEE UI CLEANUP - STEP 1I
   Floating Back-to-Top arrow button.
   ========================================================= */

.dashboard-scroll-top-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1080;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hr-primary);
  border-radius: 999px;
  background-color: var(--hr-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(144, 77, 0, 0.28);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.dashboard-scroll-top-btn:hover,
.dashboard-scroll-top-btn:focus {
  border-color: var(--hr-primary-dark);
  background-color: var(--hr-primary-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(144, 77, 0, 0.36);
}

.dashboard-scroll-top-btn i {
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .dashboard-scroll-top-btn {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   EMPLOYEE UI CLEANUP - STEP 1J
   Read-only Employee Profile field styling.
   ========================================================= */

#profileSection input.form-control[readonly] {
  background-color: #f1f3f5;
  border-color: #d9dee7;
  color: #6c757d;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

#profileSection input.form-control[readonly]:focus {
  background-color: #f1f3f5;
  border-color: #d9dee7;
  color: #6c757d;
  box-shadow: none;
}

#profileSection input.form-control[readonly]::placeholder {
  color: #9aa3af;
}

/* =========================================================
   EMPLOYEE UI CLEANUP - STEP 1J
   Profile image upload empty-state button.
   ========================================================= */

#profileSection #saveProfileImageBtn:disabled,
#profileSection #saveProfileImageBtn.profile-upload-empty {
  background-color: #adb5bd;
  border-color: #adb5bd;
  color: #ffffff;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

#profileSection #saveProfileImageBtn:disabled:hover,
#profileSection #saveProfileImageBtn:disabled:focus,
#profileSection #saveProfileImageBtn.profile-upload-empty:hover,
#profileSection #saveProfileImageBtn.profile-upload-empty:focus {
  background-color: #adb5bd;
  border-color: #adb5bd;
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

#profileSection #saveProfileImageBtn:not(:disabled):not(.profile-upload-empty) {
  cursor: pointer;
}

/* =========================================================
   CROSS-DASHBOARD UI CLEANUP - STEP 1A
   Global brown Back-to-Top controls + HR Payslip Email Status scroll.

   Purpose:
   - Make all floating up-arrow buttons use the BexHR brown brand colour.
   - Avoid page stretching when HR Payslip Email Status has many records.
   - CSS-only where possible so Admin/HR/Manager/Employee JS stays untouched.
   ========================================================= */

/* HR Payslip Email Status inner scroll. */
#payslipEmailLogsTableWrapper {
  max-height: 320px;
  overflow-y: auto !important;
  overflow-x: auto !important;
  overscroll-behavior: contain;
  border-radius: 20px;
}

/* Keep the HR payslip email table readable inside the inner scroll area. */
#payslipEmailLogsTableWrapper table {
  min-width: 860px;
}

/* =========================================================
   CROSS-DASHBOARD UI CLEANUP - STEP 1A-2
   Respect hidden state + lighter Back-to-Top arrow.

   Purpose:
   - Keep the button hidden while the dashboard is near the top.
   - Show it only when JS removes d-none after scrolling.
   - Use a lighter native arrow glyph so the control looks professional.
   - CSS-only; no dashboard JS changes.
   ========================================================= */

/* Keep Bootstrap/JS hiding behaviour authoritative. */
body.dashboard-page #backToTopBtn.d-none,
body.dashboard-page #scrollToTopBtn.d-none,
body.dashboard-page .bexhr-back-to-top-btn.d-none,
body.dashboard-page .dashboard-scroll-top-btn.d-none {
  display: none !important;
}

/* Style the floating button only when it is actually visible. */
body.dashboard-page #backToTopBtn:not(.d-none),
body.dashboard-page #scrollToTopBtn:not(.d-none),
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none),
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none) {
  position: fixed !important;
  right: 1.5rem !important;
  bottom: 1.5rem !important;
  z-index: 1080 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background-color: var(--hr-primary) !important;
  border: 1px solid var(--hr-primary) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
  box-shadow: 0 14px 30px rgba(144, 77, 0, 0.28) !important;
}

/* Hide the icon-font version only while the CSS glyph is used. */
body.dashboard-page #backToTopBtn:not(.d-none)>i,
body.dashboard-page #scrollToTopBtn:not(.d-none)>i,
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none)>i,
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none)>i {
  display: none !important;
}

/* Lighter native arrow glyph. */
body.dashboard-page #backToTopBtn:not(.d-none)::before,
body.dashboard-page #scrollToTopBtn:not(.d-none)::before,
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none)::before,
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none)::before {
  content: "\2191";
  display: block;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

body.dashboard-page #backToTopBtn:not(.d-none):hover,
body.dashboard-page #backToTopBtn:not(.d-none):focus,
body.dashboard-page #scrollToTopBtn:not(.d-none):hover,
body.dashboard-page #scrollToTopBtn:not(.d-none):focus,
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none):hover,
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none):focus,
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none):hover,
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none):focus {
  background-color: var(--hr-primary-dark) !important;
  border-color: var(--hr-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(144, 77, 0, 0.36) !important;
}

/* =========================================================
   CROSS-DASHBOARD UI CLEANUP - STEP 1B
   Summary card polish across dashboards.

   Purpose:
   - Make dashboard summary metrics look like proper product tiles.
   - Improve Payroll Overview, Employee Management Summary, Setup & Master Data,
     Admin/Manager summary tiles, and Employee Current Payslip Summary.
   - CSS-only: no HTML IDs, JS events, sidebar behaviour, payroll logic,
     employee data, or manager approval workflow are changed.
   ========================================================= */

/* Shared summary tiles used by HR, Admin, Manager, Payroll, and Setup summary sections. */
body.dashboard-page .summary-tile {
  position: relative;
  height: 100%;
  min-height: 92px;
  padding: 1rem 1.1rem !important;
  border: 1px solid rgba(234, 217, 201, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top right, rgba(255, 160, 75, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  box-shadow:
    0 12px 26px rgba(18, 28, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

/* Small brand accent strip so summary cards do not look like plain text on white. */
body.dashboard-page .summary-tile::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hr-primary) 0%, var(--hr-primary-soft) 100%);
  opacity: 0.9;
}

/* Soft circular watermark on the right side of summary tiles. */
body.dashboard-page .summary-tile::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(144, 77, 0, 0.055);
  pointer-events: none;
}

body.dashboard-page .summary-tile-label {
  position: relative;
  z-index: 1;
  margin-bottom: 0.45rem;
  color: #6b7280 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

body.dashboard-page .summary-tile-value {
  position: relative;
  z-index: 1;
  color: #16233b !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.25;
  word-break: break-word;
}

/* Keep smaller h6 summary values professional but not oversized. */
body.dashboard-page .summary-tile-value.h6,
body.dashboard-page .summary-tile .summary-tile-value.h6 {
  font-size: 0.98rem !important;
  font-weight: 750 !important;
}

/* Manager summary tiles already have Bootstrap utility classes; normalise them gently. */
body.dashboard-page .manager-summary-tile {
  background:
    radial-gradient(circle at top right, rgba(255, 160, 75, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
}

/* Employee Current Payslip Summary uses info-tile, so target only that payroll grid. */
body.dashboard-page #currentPayrollSummaryGrid .info-tile {
  position: relative;
  min-height: 92px;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(234, 217, 201, 0.95);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 160, 75, 0.14), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
  box-shadow:
    0 12px 26px rgba(18, 28, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

body.dashboard-page #currentPayrollSummaryGrid .info-tile::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hr-primary) 0%, var(--hr-primary-soft) 100%);
  opacity: 0.9;
}

body.dashboard-page #currentPayrollSummaryGrid .info-tile-label {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
}

body.dashboard-page #currentPayrollSummaryGrid .info-tile-value {
  color: #16233b;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
}

body.dashboard-page #currentPayrollSummaryGrid .info-tile i {
  color: var(--hr-primary) !important;
  opacity: 0.72;
}

/* Slightly tighter spacing on summary rows so cards feel intentional, not loose. */
body.dashboard-page .dashboard-section-card .row.g-4:has(.summary-tile),
body.dashboard-page .dashboard-section-card .row.g-3:has(.summary-tile),
body.dashboard-page #currentPayrollSummaryGrid {
  row-gap: 1rem !important;
}

/* Mobile: keep the same polish but reduce height pressure. */
@media (max-width: 575.98px) {

  body.dashboard-page .summary-tile,
  body.dashboard-page #currentPayrollSummaryGrid .info-tile {
    min-height: 84px;
    padding: 0.9rem 1rem !important;
  }

  body.dashboard-page .summary-tile-value,
  body.dashboard-page #currentPayrollSummaryGrid .info-tile-value {
    font-size: 1.05rem !important;
  }
}

/* =========================================================
   CROSS-DASHBOARD UI CLEANUP - STEP 1B-1
   HR Setup & Master Data 5-card layout.

   Purpose:
   - The Setup summary has five valid HR/payroll setup groups.
   - Avoid the awkward 4 + 1 orphan tile layout on desktop.
   - Scope only to #hrSetupLandingCard so Payroll Overview, People Summary,
     Admin, Employee, and Manager summary grids remain unchanged.
   ========================================================= */

@media (min-width: 1200px) {
  body.dashboard-page #hrSetupLandingCard .row:has(.summary-tile) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem !important;
  }

  body.dashboard-page #hrSetupLandingCard .row:has(.summary-tile)>[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.dashboard-page #hrSetupLandingCard .summary-tile {
    min-height: 86px;
  }

  body.dashboard-page #hrSetupLandingCard .summary-tile-label {
    font-size: 0.74rem !important;
  }

  body.dashboard-page #hrSetupLandingCard .summary-tile-value {
    font-size: 0.95rem !important;
  }
}

/* Tablet layout: avoid 4 + 1; show a cleaner 3 + 2 pattern. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  body.dashboard-page #hrSetupLandingCard .row:has(.summary-tile) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem !important;
  }

  body.dashboard-page #hrSetupLandingCard .row:has(.summary-tile)>[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile: keep the natural one-column stacked behaviour. */
@media (max-width: 767.98px) {
  body.dashboard-page #hrSetupLandingCard .row:has(.summary-tile) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.9rem !important;
  }

  body.dashboard-page #hrSetupLandingCard .row:has(.summary-tile)>[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   CROSS-DASHBOARD UI CLEANUP - STEP 1C
   HR left sidebar visual polish.

   Purpose:
   - Make the HR sidebar feel like part of the BexHR product UI.
   - Improve active/hover states, brand area, spacing, and sign-out area.
   - CSS-only: existing sidebar buttons still proxy to the existing HR tab
     buttons, so workspace switching logic remains unchanged.
   ========================================================= */

@media (min-width: 992px) {
  body.bexhr-has-sidebar {
    --sidebar-width: 188px;
    padding-left: var(--sidebar-width);
  }

  .bexhr-sidebar {
    width: var(--sidebar-width);
    padding: 1rem 0.75rem;
    background:
      radial-gradient(circle at top left, rgba(255, 160, 75, 0.12), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
    border-right: 1px solid rgba(234, 217, 201, 0.95);
    box-shadow: 8px 0 28px rgba(18, 28, 42, 0.055);
  }

  .bexhr-sidebar-brand {
    min-height: 54px;
    padding: 0.25rem 0.5rem 0.9rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(234, 217, 201, 0.75);
  }

  .bexhr-sidebar-brand .hr-brand-mark {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.72rem !important;
    box-shadow: 0 10px 22px rgba(144, 77, 0, 0.18);
  }

  .bexhr-sidebar-brand::after {
    content: "BexHR";
    color: var(--hr-primary-dark);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  .bexhr-sidebar-nav {
    gap: 0.4rem;
  }

  .bexhr-sidebar-item {
    position: relative;
    min-height: 42px;
    padding: 0.62rem 0.72rem;
    border-radius: 14px;
    color: #667085;
    font-size: 0.86rem;
    font-weight: 650;
    transition:
      background-color 0.16s ease,
      color 0.16s ease,
      transform 0.16s ease,
      box-shadow 0.16s ease;
  }

  .bexhr-sidebar-item i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    font-size: 1rem;
    transition:
      color 0.16s ease,
      background-color 0.16s ease;
  }

  .bexhr-sidebar-item:hover {
    background: #fff2e5;
    color: var(--hr-primary-dark);
    transform: translateX(2px);
  }

  .bexhr-sidebar-item:hover i {
    color: var(--hr-primary);
  }

  .bexhr-sidebar-item.active {
    background: linear-gradient(135deg, #fff1df 0%, #fff7ef 100%);
    color: var(--hr-primary-dark);
    box-shadow: inset 0 0 0 1px rgba(144, 77, 0, 0.08);
  }

  .bexhr-sidebar-item.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hr-primary) 0%, var(--hr-primary-soft) 100%);
  }

  .bexhr-sidebar-item.active i {
    color: var(--hr-primary);
  }

  .bexhr-sidebar-footer {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(234, 217, 201, 0.75);
  }

  .bexhr-sidebar-footer .bexhr-sidebar-item {
    color: #667085;
  }

  .bexhr-sidebar-footer .bexhr-sidebar-item:hover {
    background: #fff2e5;
    color: var(--hr-primary-dark);
  }
}

/* =========================================================
   CROSS-DASHBOARD SIDEBAR REPLICATION - STEP 1C-1A
   Hide duplicate hero logout on desktop when sidebar is active.

   Purpose:
   - Desktop sidebar already provides Sign out.
   - Keep the original #logoutBtn in the DOM so sidebar Sign out can still
     trigger the existing logout JS.
   - Keep hero Logout visible on mobile/tablet because the sidebar is hidden.
   ========================================================= */

@media (min-width: 992px) {
  body.dashboard-page.bexhr-has-sidebar .dashboard-hero #logoutBtn {
    display: none !important;
  }
}

/* =========================================================
   ADMIN ACCESS RECORDS UX CLEANUP - STEP 1E-1
   Company grouped access records.

   Purpose:
   - Make Admin user access review readable by Company > Role.
   - Remove awkward badge-only rows from the grouped table.
   - Give each company group its own inner scroll for long access lists.
   - Display-only: no access assignment, edit, reset password, tenant, role,
     or Supabase logic is changed.
   ========================================================= */

.admin-access-company-header-row>td {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #fffaf4;
}

.admin-access-company-toggle {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 160, 75, 0.12), transparent 30%),
    linear-gradient(180deg, #fffaf4 0%, #ffffff 100%);
  color: #16233b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.admin-access-company-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.admin-access-company-code {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 650;
}

.admin-access-company-count {
  color: #667085;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-access-company-content-row>td {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.admin-access-company-panel {
  padding: 0.75rem 1rem 1rem;
  background: #ffffff;
}

.admin-access-company-scroll {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid #edf1f5;
  border-radius: 18px;
  background: #ffffff;
}

.admin-access-company-scroll::-webkit-scrollbar {
  width: 10px;
}

.admin-access-company-scroll::-webkit-scrollbar-thumb {
  background: rgba(144, 77, 0, 0.22);
  border-radius: 999px;
}

.admin-access-company-scroll::-webkit-scrollbar-track {
  background: rgba(144, 77, 0, 0.06);
  border-radius: 999px;
}

.admin-access-role-section+.admin-access-role-section {
  border-top: 1px solid #edf1f5;
}

.admin-access-role-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 40px;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border-bottom: 1px solid #edf1f5;
  color: #475467;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-access-company-inner-table td {
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid #edf1f5;
}

.admin-access-company-inner-table tr:last-child td {
  border-bottom: 0;
}

.admin-access-role-pill,
.admin-access-company-id-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.22rem 0.58rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  font-size: 0.75rem;
  font-weight: 750;
}

@media (max-width: 767.98px) {
  .admin-access-company-toggle {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-access-company-title {
    flex-wrap: wrap;
  }

  .admin-access-company-panel {
    padding: 0.65rem;
  }

  .admin-access-company-scroll {
    max-height: 320px;
  }
}

/* =========================================================
   ADMIN ACCESS RECORDS UX CLEANUP - STEP 1E-3
   Four-column grouped access records.

   Purpose:
   - Company is shown once in the company group header.
   - User rows no longer repeat the Company column.
   - Header and inner rows share the same column widths.
   - Company names are visually stronger than employee names.
   ========================================================= */

.admin-access-table th,
.admin-access-company-inner-table td {
  vertical-align: middle;
}

.admin-access-company-name {
  color: #111827;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.admin-access-company-toggle {
  border-left: 4px solid var(--hr-primary);
}

.admin-access-company-title {
  min-width: 0;
}

.admin-access-company-code {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-access-company-count {
  color: #667085;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-access-company-inner-table {
  table-layout: fixed;
  width: 100%;
}

.admin-access-company-inner-table td:nth-child(4) {
  text-align: center;
}

@media (max-width: 767.98px) {

  .admin-access-table,
  .admin-access-company-inner-table {
    min-width: 760px;
  }

  .admin-access-company-name {
    font-size: 0.95rem;
  }
}

/* =========================================================
   ADMIN ACCESS RECORDS UX CLEANUP - STEP 1E-4
   Align grouped user access table columns.

   Purpose:
   - The parent table header has User / Role / Company ID / Action.
   - User rows are rendered inside a nested company table.
   - Remove inner panel offset so nested row content aligns with the parent
     table headers.
   - CSS-only: no user access data, edit action, reset password, or Supabase
     logic is changed.
   ========================================================= */

#profileTenantLinksTableWrapper .admin-access-table,
#profileTenantLinksTableWrapper .admin-access-company-inner-table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Keep parent header and nested rows on the same column widths. */
#profileTenantLinksTableWrapper .admin-access-table col:nth-child(1),
#profileTenantLinksTableWrapper .admin-access-company-inner-table col:nth-child(1) {
  width: 42% !important;
}

#profileTenantLinksTableWrapper .admin-access-table col:nth-child(2),
#profileTenantLinksTableWrapper .admin-access-company-inner-table col:nth-child(2) {
  width: 18% !important;
}

#profileTenantLinksTableWrapper .admin-access-table col:nth-child(3),
#profileTenantLinksTableWrapper .admin-access-company-inner-table col:nth-child(3) {
  width: 20% !important;
}

#profileTenantLinksTableWrapper .admin-access-table col:nth-child(4),
#profileTenantLinksTableWrapper .admin-access-company-inner-table col:nth-child(4) {
  width: 20% !important;
}

/* Remove the nested panel indentation that was pushing row content away from the header. */
#profileTenantLinksTableWrapper .admin-access-company-panel {
  padding: 0 !important;
  background: #ffffff;
}

/* Keep the company content contained, but do not shrink the inner table width. */
#profileTenantLinksTableWrapper .admin-access-company-scroll {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: #ffffff;
}

/* Match Bootstrap header/body rhythm so Role and Company ID sit under their headers. */
#profileTenantLinksTableWrapper .admin-access-table thead th,
#profileTenantLinksTableWrapper .admin-access-company-inner-table td {
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
  vertical-align: middle !important;
}

/* Keep action buttons centred under Action. */
#profileTenantLinksTableWrapper .admin-access-table thead th:last-child,
#profileTenantLinksTableWrapper .admin-access-company-inner-table td:last-child {
  text-align: center !important;
}

/* Make company group name visibly stronger than employee names. */
#profileTenantLinksTableWrapper .admin-access-company-name {
  color: #111827 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
}

/* =========================================================
   ADMIN ACCESS RECORDS TEXT WEIGHT CLEANUP - STEP 1
   Only company group names should appear bold in User Company Links.

   HR/Admin behaviour:
   - Company headers are the main grouping labels and stay visually bold.
   - Individual user names should read as normal table values.
   - Display-only change; no access, tenant, role, reset password, or Supabase
     logic is changed.
   ========================================================= */

#profileTenantLinksTableWrapper .admin-access-company-inner-table .fw-semibold {
  font-weight: 500 !important;
}

/* =========================================================
   HR PAYROLL ACTION COLOUR ALIGNMENT - STEP 2
   Match payroll run action buttons to the BexHR dashboard brand colour.

   HR behaviour:
   - Run Payroll starts the payroll run.
   - Continue to Payroll progresses the same payroll run.
   - Both are operational payroll actions, not success/status buttons.
   - Styling only; payroll selection and processing logic remain untouched.
   ========================================================= */

body.dashboard-page .bexhr-brand-action-btn {
  background: linear-gradient(135deg, var(--hr-primary) 0%, var(--hr-primary-soft) 100%) !important;
  border: 1px solid var(--hr-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(144, 77, 0, 0.24) !important;
}

body.dashboard-page .bexhr-brand-action-btn:hover,
body.dashboard-page .bexhr-brand-action-btn:focus {
  background: linear-gradient(135deg, var(--hr-primary-dark) 0%, var(--hr-primary) 100%) !important;
  border-color: var(--hr-primary-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(144, 77, 0, 0.28) !important;
}

body.dashboard-page .bexhr-brand-action-btn:disabled {
  background: #adb5bd !important;
  border-color: #adb5bd !important;
  color: #ffffff !important;
  opacity: 1 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
/* =========================================================
   BEXHR HR DASHBOARD VISUAL REFRESH - PILOT STEP 1
   Presentation-only HR dashboard shell.

   Safety:
   - scoped to .bexhr-hr-visual-refresh so other dashboards stay unchanged;
   - Alpatech retains its own colours, flame branding, and tenant favicon;
   - no IDs, events, Supabase calls, payroll logic, or role checks change.
   ========================================================= */

body.bexhr-hr-visual-refresh {
  --bexhr-navy-950: #071426;
  --bexhr-navy-900: #0b1f38;
  --bexhr-navy-800: #123253;
  --bexhr-teal-600: #0f9f9a;
  --bexhr-teal-500: #16b8ae;
  --bexhr-teal-100: #dff8f5;
  --bexhr-page: #f4f7fb;
  --bexhr-panel: #ffffff;
  --bexhr-panel-soft: #f8fafc;
  --bexhr-text: #172033;
  --bexhr-muted: #667085;
  --bexhr-line: #e4eaf1;
  --bexhr-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
  --bexhr-shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.11);
  --bexhr-accent-rgb: 15, 159, 154;
  background: var(--bexhr-page);
}

body.bexhr-hr-visual-refresh.alpatech-workspace {
  --bexhr-accent-rgb: 11, 95, 149;
}

/* Default BexHR visual identity only. Alpatech keeps its existing palette. */
body.bexhr-hr-visual-refresh:not(.alpatech-workspace) {
  --hr-primary: var(--bexhr-teal-600);
  --hr-primary-soft: var(--bexhr-teal-500);
  --hr-primary-dark: #0a7b78;
  --hr-background: var(--bexhr-page);
  --hr-surface: var(--bexhr-panel);
  --hr-text: var(--bexhr-text);
  --hr-muted: var(--bexhr-muted);
  --hr-border: var(--bexhr-line);
  --hr-soft-surface: #effbf9;
}

body.bexhr-hr-visual-refresh main.container {
  width: min(100%, 1500px);
  max-width: 1500px;
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

/* Wider app rail and improved spacing for every HR tenant. */
@media (min-width: 992px) {
  body.bexhr-hr-visual-refresh {
    --sidebar-width: 220px;
    padding-left: var(--sidebar-width);
  }

  body.bexhr-hr-visual-refresh .bexhr-sidebar {
    width: var(--sidebar-width);
    padding: 1.1rem 0.9rem;
    gap: 0.75rem;
  }

  body.bexhr-hr-visual-refresh .bexhr-sidebar-brand {
    min-height: 64px;
    padding: 0.35rem 0.55rem 1rem;
    margin-bottom: 0.65rem;
  }

  body.bexhr-hr-visual-refresh .bexhr-sidebar-nav {
    gap: 0.35rem;
  }

  body.bexhr-hr-visual-refresh .bexhr-sidebar-item {
    min-height: 46px;
    padding: 0.68rem 0.8rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
  }

  body.bexhr-hr-visual-refresh .bexhr-sidebar-item i {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  body.bexhr-hr-visual-refresh .bexhr-sidebar-footer {
    padding-top: 0.9rem;
  }

  /* Dark navy shell applies only to standard BexHR workspaces. */
  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar {
    background: linear-gradient(180deg, var(--bexhr-navy-950) 0%, var(--bexhr-navy-900) 100%);
    border-right: 0;
    box-shadow: 12px 0 38px rgba(7, 20, 38, 0.16);
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-brand::after {
    content: "BexHR";
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-brand .hr-brand-mark {
    background: linear-gradient(135deg, var(--bexhr-teal-500), #55d7cd);
    color: var(--bexhr-navy-950);
    box-shadow: 0 10px 26px rgba(22, 184, 174, 0.28);
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item {
    color: #aebbc9;
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item i {
    color: #7890a8;
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateX(2px);
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item:hover i {
    color: #9ce8e2;
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item.active {
    background: rgba(22, 184, 174, 0.15);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(98, 221, 211, 0.16);
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item.active::before {
    left: -0.9rem;
    top: 8px;
    bottom: 8px;
    width: 4px;
    background: linear-gradient(180deg, #62ddd3, var(--bexhr-teal-500));
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item.active i {
    color: #62ddd3;
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-footer .bexhr-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
}

/* Compact product header instead of the old oversized marketing hero. */
body.bexhr-hr-visual-refresh .dashboard-hero {
  min-height: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(11, 31, 56, 0.14);
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .dashboard-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(22, 184, 174, 0.32), transparent 28%),
    linear-gradient(135deg, var(--bexhr-navy-950) 0%, var(--bexhr-navy-800) 72%, #164862 100%);
}

body.bexhr-hr-visual-refresh .dashboard-hero::before {
  width: 190px;
  height: 190px;
  right: -70px;
  top: -85px;
  background: rgba(255, 255, 255, 0.06);
}

body.bexhr-hr-visual-refresh .dashboard-hero::after {
  width: 110px;
  height: 110px;
  left: auto;
  right: 12%;
  bottom: -65px;
  background: rgba(255, 255, 255, 0.04);
}

body.bexhr-hr-visual-refresh .dashboard-hero h1 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -0.035em;
}

body.bexhr-hr-visual-refresh .dashboard-hero p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.93rem;
  line-height: 1.6;
}

body.bexhr-hr-visual-refresh .hero-badge {
  min-height: 32px;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .dashboard-avatar {
  width: 58px;
  height: 58px;
  font-size: 1.05rem;
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .dashboard-avatar {
  color: var(--bexhr-navy-900);
  background: linear-gradient(135deg, #ffffff 0%, var(--bexhr-teal-100) 100%);
}

body.bexhr-hr-visual-refresh .hero-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

body.bexhr-hr-visual-refresh .hero-meta-card {
  min-height: 68px;
  padding: 0.78rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

body.bexhr-hr-visual-refresh .hero-meta-label {
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

body.bexhr-hr-visual-refresh .hero-meta-value {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
}

/* Clean application panels and consistent density. */
body.bexhr-hr-visual-refresh .dashboard-section-card {
  border: 1px solid var(--bexhr-line);
  border-radius: 18px;
  box-shadow: var(--bexhr-shadow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.bexhr-hr-visual-refresh .dashboard-section-card:hover {
  border-color: #d8e0ea;
  box-shadow: var(--bexhr-shadow-hover);
}

body.bexhr-hr-visual-refresh .dashboard-section-card .card-body {
  padding: clamp(1.2rem, 2vw, 1.65rem) !important;
}

body.bexhr-hr-visual-refresh .dashboard-section-card .section-heading {
  color: var(--bexhr-text);
  font-weight: 780;
  letter-spacing: -0.02em;
}

body.bexhr-hr-visual-refresh .dashboard-section-card .section-subtext {
  color: var(--bexhr-muted);
  line-height: 1.55;
}

body.bexhr-hr-visual-refresh .summary-tile,
body.bexhr-hr-visual-refresh #currentPayrollSummaryGrid .info-tile {
  min-height: 92px;
  border: 1px solid var(--bexhr-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}

body.bexhr-hr-visual-refresh .summary-tile::before,
body.bexhr-hr-visual-refresh #currentPayrollSummaryGrid .info-tile::before {
  left: 0;
  right: auto;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  height: auto;
  background: linear-gradient(180deg, var(--hr-primary), var(--hr-primary-soft));
}

body.bexhr-hr-visual-refresh .summary-tile::after {
  width: 68px;
  height: 68px;
  right: -22px;
  bottom: -28px;
  background: rgba(var(--bexhr-accent-rgb), 0.07);
}

body.bexhr-hr-visual-refresh .summary-tile-label,
body.bexhr-hr-visual-refresh #currentPayrollSummaryGrid .info-tile-label {
  color: #778395 !important;
  font-size: 0.73rem !important;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

body.bexhr-hr-visual-refresh .summary-tile-value,
body.bexhr-hr-visual-refresh #currentPayrollSummaryGrid .info-tile-value {
  color: var(--bexhr-text) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  font-weight: 800 !important;
}

/* Buttons, fields, tables, and notices. */
body.bexhr-hr-visual-refresh .dashboard-action-btn {
  min-height: 40px;
  border-radius: 10px;
  padding: 0.48rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 700;
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .btn-primary,
body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .dashboard-action-btn.btn-primary,
body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-brand-action-btn {
  background: linear-gradient(135deg, var(--bexhr-teal-600), var(--bexhr-teal-500)) !important;
  border-color: var(--bexhr-teal-600) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 159, 154, 0.2) !important;
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .btn-primary:hover,
body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .dashboard-action-btn.btn-primary:hover,
body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-brand-action-btn:hover {
  background: linear-gradient(135deg, #0a7b78, var(--bexhr-teal-600)) !important;
  border-color: #0a7b78 !important;
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .btn-outline-primary {
  color: var(--bexhr-teal-600);
  border-color: rgba(15, 159, 154, 0.46);
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .btn-outline-primary:hover {
  color: #ffffff;
  background: var(--bexhr-teal-600);
  border-color: var(--bexhr-teal-600);
}

body.bexhr-hr-visual-refresh .form-control,
body.bexhr-hr-visual-refresh .form-select,
body.bexhr-hr-visual-refresh .input-group-text {
  min-height: 44px;
  border-color: #dbe3ec;
}

body.bexhr-hr-visual-refresh .form-control,
body.bexhr-hr-visual-refresh .form-select {
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 0.9rem;
}

body.bexhr-hr-visual-refresh .form-control:focus,
body.bexhr-hr-visual-refresh .form-select:focus {
  border-color: var(--hr-primary-soft);
  box-shadow: 0 0 0 0.2rem rgba(var(--bexhr-accent-rgb), 0.14);
}

body.bexhr-hr-visual-refresh .dashboard-table-wrap {
  border: 1px solid var(--bexhr-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

body.bexhr-hr-visual-refresh .dashboard-table-wrap thead th {
  padding-top: 0.78rem;
  padding-bottom: 0.78rem;
  background: #f5f8fb;
  color: #5e6b7c;
  border-bottom-color: var(--bexhr-line);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.bexhr-hr-visual-refresh .dashboard-table-wrap tbody td {
  padding-top: 0.78rem;
  padding-bottom: 0.78rem;
  border-color: #edf1f5;
  color: #344054;
  font-size: 0.86rem;
}

body.bexhr-hr-visual-refresh .dashboard-table-wrap tbody tr:hover td {
  background: #f9fbfd;
}

body.bexhr-hr-visual-refresh .alert {
  border-radius: 12px;
}

body.bexhr-hr-visual-refresh .border.rounded-4,
body.bexhr-hr-visual-refresh .bg-light-subtle {
  border-color: var(--bexhr-line) !important;
}

body.bexhr-hr-visual-refresh .bg-light-subtle {
  background-color: var(--bexhr-panel-soft) !important;
}

/* Mobile keeps the existing switcher and adopts the new visual language. */
@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh main.container {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }

  body.bexhr-hr-visual-refresh .dashboard-hero {
    border-radius: 18px;
  }

  body.bexhr-hr-visual-refresh .hero-meta-grid {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh .workspace-switcher-card {
    border-color: var(--bexhr-line) !important;
    background: #ffffff !important;
    box-shadow: var(--bexhr-shadow) !important;
  }

  body.bexhr-hr-visual-refresh .workspace-switcher-card .dashboard-action-btn {
    min-height: 38px;
    border-radius: 10px !important;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-hr-visual-refresh .dashboard-hero {
    padding: 1.15rem;
  }

  body.bexhr-hr-visual-refresh .dashboard-hero h1 {
    font-size: 1.55rem;
  }

  body.bexhr-hr-visual-refresh .dashboard-section-card .card-body {
    padding: 1rem !important;
  }

  body.bexhr-hr-visual-refresh .summary-tile,
  body.bexhr-hr-visual-refresh #currentPayrollSummaryGrid .info-tile {
    min-height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-hr-visual-refresh .dashboard-section-card,
  body.bexhr-hr-visual-refresh .bexhr-sidebar-item {
    transition: none;
  }

  body.bexhr-hr-visual-refresh .dashboard-section-card:hover,
  body.bexhr-hr-visual-refresh .bexhr-sidebar-item:hover {
    transform: none;
  }
}
/* =========================================================
   BEXHR HR PROFILE REFINEMENT - STEP 2
   Presentation-only follow-up to the HR dashboard visual pilot.

   Safety:
   - keeps every existing profile ID and JavaScript event intact;
   - keeps Alpatech colours, flame identity, and tenant favicon intact;
   - keeps the refined HR profile arrangement without changing product or tenant branding;
   - does not change Supabase, payroll, employee, email, tenant, or role logic.
   ========================================================= */

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-workspace-card {
  overflow: visible;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-eyebrow {
  margin-bottom: 0.35rem;
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-security-badge,
body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--bexhr-accent-rgb), 0.08);
  color: var(--hr-primary-dark);
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-security-badge {
  min-height: 34px;
  padding: 0.4rem 0.72rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 315px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-identity-panel,
body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-details-panel {
  border: 1px solid var(--bexhr-line);
  border-radius: 18px;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-identity-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 1.45rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(var(--bexhr-accent-rgb), 0.13), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-identity-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hr-primary), var(--hr-primary-soft));
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-avatar-stage {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0.25rem auto 1rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-main-avatar,
body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-main-image {
  width: 112px !important;
  height: 112px !important;
  border-radius: 50%;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-main-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hr-primary-dark);
  background: linear-gradient(135deg, #ffffff 0%, rgba(var(--bexhr-accent-rgb), 0.15) 100%);
  border: 4px solid #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
  font-size: 1.55rem;
  font-weight: 850;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-main-image {
  display: block;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-main-image.d-none,
body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-main-avatar.d-none {
  display: none !important;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-avatar-status {
  position: absolute;
  right: 6px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #18a957;
  box-shadow: 0 4px 10px rgba(24, 169, 87, 0.25);
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-name {
  color: var(--bexhr-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-email {
  max-width: 100%;
  color: var(--bexhr-muted);
  font-size: 0.84rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-member-pill {
  min-height: 30px;
  padding: 0.32rem 0.66rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-photo-panel {
  width: 100%;
  margin-top: 1.35rem;
  padding: 1rem;
  border: 1px solid var(--bexhr-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-photo-title {
  display: block;
  color: var(--bexhr-text);
  font-size: 0.85rem;
  font-weight: 800;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-photo-help {
  color: var(--bexhr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-photo-icon {
  color: var(--hr-primary);
  font-size: 1.2rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection #hrProfileImageInput {
  min-height: 42px;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection #saveHrProfileImageBtn {
  /* Keep the upload action full-width and restore clear separation
     from the native file chooser directly above it. */
  width: 100%;
  margin-top: 0.6rem;
}

/* HR PROFILE IMAGE REMOVAL - v1.0.0
   Presentation only for the HR Remove Picture control.
   Storage, tenant scope, authentication and profile permissions are unchanged. */
body.bexhr-hr-visual-refresh #hrProfileSection #removeHrProfileImageBtn {
  width: 100%;
}

body.bexhr-hr-visual-refresh
  #hrProfileSection
  #removeHrProfileImageBtn:disabled {
  border-color: #d6dde5;
  background: #f8fafc;
  color: #94a3b8;
  opacity: 1;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-details-panel {
  min-width: 0;
  padding: 1.45rem;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-details-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.18);
  border-radius: 12px;
  background: rgba(var(--bexhr-accent-rgb), 0.08);
  color: var(--hr-primary);
  font-size: 1.1rem;
}

body.bexhr-hr-visual-refresh #hrProfileSection input.form-control[readonly] {
  background-color: #f5f7fa !important;
  border-color: #dfe5ec;
  color: #667085;
  cursor: not-allowed;
  box-shadow: none;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bexhr-line);
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-system-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 540px;
  color: var(--bexhr-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-system-note i {
  margin-top: 0.1rem;
  color: var(--hr-primary);
}

body.bexhr-hr-visual-refresh #hrProfileSection #saveHrProfileBtn {
  flex: 0 0 auto;
  min-width: 184px;
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-layout {
    grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-layout {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-identity-panel {
    align-items: flex-start;
    text-align: left;
  }

  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-avatar-stage {
    margin-left: 0;
  }

  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-photo-panel {
    margin-top: 1rem;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-card-header,
  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-details-heading,
  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh #hrProfileSection .hr-profile-security-badge {
    align-self: flex-start;
  }

  body.bexhr-hr-visual-refresh #hrProfileSection #saveHrProfileBtn {
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   BEXHR HR REVIEW WORKSPACE VISUAL UPGRADE - STEP 5
   Restore static icons and refine the HR Review workspace.

   Scope and safety:
   - icons return to their original static behaviour;
   - presentation only;
   - HR dashboard visual-refresh pilot only;
   - no HTML IDs, JavaScript handlers, Supabase queries, tenant filters,
     role access, payroll logic, leave decisions, or correction workflows change;
   - Alpatech keeps its existing tenant colours and branding.
   ========================================================= */

/* ---------------------------------------------------------
   STATIC ICON RESTORE
   Remove all experimental movement while preserving icon colour changes.
   --------------------------------------------------------- */
body.bexhr-hr-visual-refresh :is(
  .bexhr-sidebar-item,
  .dashboard-action-btn,
  .btn,
  .hr-profile-security-badge,
  .hr-profile-member-pill,
  .hr-profile-photo-panel,
  .hr-profile-details-panel,
  .hero-badge,
  .summary-tile,
  .info-tile
) i {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  transition: color 160ms ease, opacity 160ms ease !important;
}

body.bexhr-hr-visual-refresh :is(
  .bexhr-sidebar-item,
  .dashboard-action-btn,
  .btn
):not(:disabled):is(:hover, :focus-visible) i,
body.bexhr-hr-visual-refresh :is(
  .bexhr-sidebar-item,
  .dashboard-action-btn,
  .btn
):not(:disabled):active i {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* Keep controls visually responsive without playful movement. */
body.bexhr-hr-visual-refresh :is(
  .dashboard-action-btn,
  .btn
):not(:disabled):is(:hover, :focus-visible),
body.bexhr-hr-visual-refresh :is(
  .dashboard-action-btn,
  .btn
):not(:disabled):active {
  transform: none !important;
}

/* ---------------------------------------------------------
   HR REVIEW LANDING CARD
   Convert the simple introduction into a clear operational overview.
   --------------------------------------------------------- */
body.bexhr-hr-visual-refresh #hrReviewLandingCard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13, 148, 136, 0.16) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(20, 184, 166, 0.11), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbfc 100%) !important;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%);
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .card-body {
  padding: 1.5rem !important;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .mb-4:first-child {
  margin-bottom: 1.1rem !important;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .section-heading {
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .section-subtext {
  max-width: 760px;
  line-height: 1.55;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .summary-tile {
  min-height: 88px;
  padding: 1rem 1.1rem 1rem 1.25rem !important;
  border: 1px solid #dce7eb !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .summary-tile::before {
  left: 0;
  right: auto;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  height: auto;
  background: #14b8a6;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .summary-tile::after {
  width: 64px;
  height: 64px;
  right: -24px;
  bottom: -26px;
  background: rgba(20, 184, 166, 0.07);
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .summary-tile-label {
  color: #64748b !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

body.bexhr-hr-visual-refresh #hrReviewLandingCard .summary-tile-value {
  color: #0f172a !important;
  font-size: 0.98rem !important;
  font-weight: 750 !important;
}

/* ---------------------------------------------------------
   REVIEW WORK CARDS
   Separate headings, controls, metrics, guidance, and records clearly.
   --------------------------------------------------------- */
body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) {
  border: 1px solid #dce4ea !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055) !important;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) > .card-body {
  padding: 1.5rem !important;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .section-heading {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .section-subtext {
  max-width: 760px;
  line-height: 1.55;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .d-flex.flex-wrap.gap-2.align-self-start {
  padding: 0.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .dashboard-action-btn,
body.bexhr-hr-visual-refresh #profileCorrectionRequestsViewFilter {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  padding: 0.42rem 0.72rem !important;
  font-size: 0.78rem !important;
}

/* Review metrics: compact, number-first operational tiles. */
body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .row.g-4.mb-4 {
  --bs-gutter-x: 0.85rem;
  --bs-gutter-y: 0.85rem;
  margin-bottom: 1.15rem !important;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .summary-tile {
  min-height: 80px;
  padding: 0.85rem 0.95rem !important;
  border-radius: 15px !important;
  border-color: #dce7eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%) !important;
  box-shadow: none !important;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .summary-tile::before {
  left: 0.85rem;
  right: 0.85rem;
  height: 2px;
  background: linear-gradient(90deg, #14b8a6 0%, #0f766e 100%);
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .summary-tile::after {
  width: 54px;
  height: 54px;
  right: -20px;
  bottom: -20px;
  background: rgba(20, 184, 166, 0.06);
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .summary-tile-label {
  font-size: 0.68rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .summary-tile-value {
  font-size: 1.1rem !important;
}

/* Guidance panels should read like structured process notes, not warnings. */
body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCollapse,
  #managerLeaveDecisionsCollapse
) > .alert.alert-light.border {
  border: 1px solid #dce7eb !important;
  border-left: 4px solid #14b8a6 !important;
  border-radius: 14px !important;
  background: #f8fbfc !important;
  color: #334155;
  padding: 1rem 1.05rem;
}

body.bexhr-hr-visual-refresh #profileCorrectionRequestsCollapse > .alert .row {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
}

body.bexhr-hr-visual-refresh #profileCorrectionRequestsCollapse > .alert .row > [class*="col-"] {
  padding: 0.7rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh #profileCorrectionRequestsCollapse > .alert .badge {
  margin-bottom: 0.35rem;
}

/* Review tables: clearer headers, lighter rows, contained scroll. */
body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsTableWrapper,
  #managerLeaveDecisionsTableWrapper
) {
  border: 1px solid #dce4ea !important;
  border-radius: 14px !important;
  background: #ffffff;
  scrollbar-color: rgba(15, 118, 110, 0.32) rgba(15, 23, 42, 0.04);
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsTableWrapper,
  #managerLeaveDecisionsTableWrapper
) thead th {
  background: #f1f5f7 !important;
  color: #475569 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  border-bottom: 1px solid #dce4ea !important;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsTableWrapper,
  #managerLeaveDecisionsTableWrapper
) tbody td {
  padding-top: 0.78rem;
  padding-bottom: 0.78rem;
  border-bottom-color: #edf1f4;
}

body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsTableWrapper,
  #managerLeaveDecisionsTableWrapper
) tbody tr:hover td {
  background: #f8fbfc;
}

/* Empty states remain calm and purposeful. */
body.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsEmptyState,
  #managerLeaveDecisionsEmptyState
) {
  border: 1px dashed #cbd5e1 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  color: #64748b;
  padding: 1rem 1.05rem;
}

/* Alpatech inherits layout only; use its own blue/cyan identity. */
body.alpatech-workspace.bexhr-hr-visual-refresh #hrReviewLandingCard,
body.alpatech-workspace.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) {
  border-color: rgba(11, 95, 149, 0.16) !important;
}

body.alpatech-workspace.bexhr-hr-visual-refresh #hrReviewLandingCard::before,
body.alpatech-workspace.bexhr-hr-visual-refresh #hrReviewLandingCard .summary-tile::before,
body.alpatech-workspace.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCard,
  #recentManagerLeaveDecisionsCard
) .summary-tile::before {
  background: linear-gradient(180deg, #0b5f95 0%, #36b9cf 100%) !important;
}

body.alpatech-workspace.bexhr-hr-visual-refresh :is(
  #profileCorrectionRequestsCollapse,
  #managerLeaveDecisionsCollapse
) > .alert.alert-light.border {
  border-left-color: #0b5f95 !important;
  background: #f4f9fc !important;
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh #hrReviewLandingCard .card-body,
  body.bexhr-hr-visual-refresh :is(
    #profileCorrectionRequestsCard,
    #recentManagerLeaveDecisionsCard
  ) > .card-body {
    padding: 1.1rem !important;
  }

  body.bexhr-hr-visual-refresh :is(
    #profileCorrectionRequestsCard,
    #recentManagerLeaveDecisionsCard
  ) .d-flex.flex-wrap.gap-2.align-self-start {
    width: 100%;
  }

  body.bexhr-hr-visual-refresh :is(
    #profileCorrectionRequestsCard,
    #recentManagerLeaveDecisionsCard
  ) .d-flex.flex-wrap.gap-2.align-self-start > * {
    flex: 1 1 100%;
    width: 100% !important;
  }

  body.bexhr-hr-visual-refresh #profileCorrectionRequestsViewFilter {
    min-width: 0 !important;
  }
}
/* =========================================================
   BEXHR HR MODERN APPLICATION SHELL AND OVERVIEW - STEP 6
   Major structural UI upgrade for the HR dashboard.

   Scope and safety:
   - adds a real operational Dashboard workspace;
   - replaces the oversized hero with a compact application header;
   - uses existing tenant-scoped in-memory records only;
   - preserves every employee, payroll, review, setup, self-service,
     role, Supabase, tenant-filtering, and profile workflow;
   - keeps icons static;
   - Alpatech keeps its blue/cyan tenant palette and flame identity.
   ========================================================= */

body.bexhr-hr-visual-refresh main.container {
  padding-top: 1.1rem !important;
}

/* Compact app header */
body.bexhr-hr-visual-refresh .hr-modern-app-header {
  position: relative;
  z-index: 1030;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(14px);
}

body.bexhr-hr-visual-refresh .hr-modern-app-header-main {
  min-height: 82px;
  padding: 0.95rem 1.1rem 0.95rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

body.bexhr-hr-visual-refresh .hr-modern-page-heading {
  min-width: 0;
}

body.bexhr-hr-visual-refresh .hr-modern-context-line {
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .hr-modern-company-name {
  max-width: min(44vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hr-primary);
}

body.bexhr-hr-visual-refresh .hr-modern-context-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

body.bexhr-hr-visual-refresh .hr-modern-page-heading h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 820;
  letter-spacing: -0.035em;
}

body.bexhr-hr-visual-refresh .hr-modern-page-heading p {
  margin: 0.2rem 0 0;
  max-width: 760px;
  color: #64748b;
  font-size: 0.83rem;
  line-height: 1.45;
}

body.bexhr-hr-visual-refresh .hr-modern-account-area {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

body.bexhr-hr-visual-refresh .hr-modern-account-button {
  min-height: 50px;
  padding: 0.35rem 0.55rem 0.35rem 0.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: inherit;
  text-align: left;
}

body.bexhr-hr-visual-refresh .hr-modern-account-button:hover,
body.bexhr-hr-visual-refresh .hr-modern-account-button:focus-visible {
  border-color: rgba(var(--bexhr-accent-rgb), 0.45);
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--bexhr-accent-rgb), 0.1);
}

body.bexhr-hr-visual-refresh .hr-modern-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

body.bexhr-hr-visual-refresh .hr-modern-avatar-wrap .dashboard-avatar {
  width: 38px !important;
  height: 38px !important;
  border: 0;
  font-size: 0.78rem;
  object-fit: cover;
}

body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .hr-modern-avatar-wrap .dashboard-avatar {
  color: #ffffff;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

body.bexhr-hr-visual-refresh .hr-modern-account-copy {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  max-width: 210px;
}

body.bexhr-hr-visual-refresh .hr-modern-account-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-modern-account-copy small {
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.25;
  text-transform: capitalize;
}

body.bexhr-hr-visual-refresh .hr-modern-account-button > .bi-chevron-down {
  color: #94a3b8;
  font-size: 0.72rem;
}

body.bexhr-hr-visual-refresh .hr-modern-logout-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  body.bexhr-hr-visual-refresh .hr-modern-app-header {
    position: sticky;
    top: 0.75rem;
  }
}

/* New overview welcome */
body.bexhr-hr-visual-refresh .hr-overview-welcome {
  min-height: 180px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: 22px;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 88% 18%, rgba(45, 212, 191, 0.28), transparent 25%),
    radial-gradient(circle at 72% 110%, rgba(255, 255, 255, 0.09), transparent 32%),
    linear-gradient(135deg, #071426 0%, #0b2542 62%, #0f5963 100%);
  box-shadow: 0 20px 44px rgba(7, 20, 38, 0.16);
}

body.bexhr-hr-visual-refresh.alpatech-workspace .hr-overview-welcome {
  background:
    radial-gradient(circle at 88% 18%, rgba(54, 185, 207, 0.34), transparent 25%),
    radial-gradient(circle at 72% 110%, rgba(255, 255, 255, 0.1), transparent 32%),
    linear-gradient(135deg, #073b63 0%, #0b5f95 64%, #168fae 100%);
  box-shadow: 0 20px 44px rgba(7, 59, 99, 0.18);
}

body.bexhr-hr-visual-refresh .hr-overview-welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

body.bexhr-hr-visual-refresh .hr-overview-kicker {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #99f6e4;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh.alpatech-workspace .hr-overview-kicker {
  color: #c8f6ff;
}

body.bexhr-hr-visual-refresh .hr-overview-welcome h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 2.55rem);
  font-weight: 820;
  letter-spacing: -0.045em;
}

body.bexhr-hr-visual-refresh .hr-overview-welcome p {
  margin: 0.65rem 0 0;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn {
  min-height: 40px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn:hover,
body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Overview metric cards */
body.bexhr-hr-visual-refresh .hr-overview-metrics {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-metric-card {
  min-height: 132px;
  padding: 1.15rem;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

body.bexhr-hr-visual-refresh .hr-overview-metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  font-size: 1.1rem;
}

body.bexhr-hr-visual-refresh .metric-people .hr-overview-metric-icon {
  color: #0f766e;
  background: #ccfbf1;
}

body.bexhr-hr-visual-refresh .metric-review .hr-overview-metric-icon {
  color: #7c3aed;
  background: #ede9fe;
}

body.bexhr-hr-visual-refresh .metric-payroll .hr-overview-metric-icon {
  color: #0369a1;
  background: #e0f2fe;
}

body.bexhr-hr-visual-refresh .metric-attention .hr-overview-metric-icon {
  color: #b45309;
  background: #fef3c7;
}

body.bexhr-hr-visual-refresh .hr-overview-metric-label {
  margin-bottom: 0.28rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .hr-overview-metric-value {
  color: #0f172a;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 840;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

body.bexhr-hr-visual-refresh .hr-overview-metric-detail {
  margin-top: 0.4rem;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
}

/* Readiness */
body.bexhr-hr-visual-refresh .hr-overview-readiness-card,
body.bexhr-hr-visual-refresh .hr-overview-panel {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-card {
  padding: 1.25rem 1.35rem;
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-heading {
  margin-bottom: 0.85rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-section-kicker {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--hr-primary);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-heading h3,
body.bexhr-hr-visual-refresh .hr-overview-panel-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 780;
  letter-spacing: -0.02em;
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-heading > strong {
  color: #0f172a;
  font-size: 1.35rem;
  font-weight: 820;
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-card .progress {
  height: 9px;
  border-radius: 999px;
  background: #e8edf3;
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-card .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hr-primary) 0%, var(--hr-primary-soft) 100%);
}

body.bexhr-hr-visual-refresh .hr-overview-readiness-card p {
  margin: 0.75rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
}

/* Operational panels */
body.bexhr-hr-visual-refresh .hr-overview-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-panel {
  min-width: 0;
  padding: 1.25rem;
}

body.bexhr-hr-visual-refresh .hr-overview-panel-header {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-panel-header .btn {
  min-height: 34px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-list,
body.bexhr-hr-visual-refresh .hr-overview-department-list,
body.bexhr-hr-visual-refresh .hr-overview-activity-list {
  display: flex;
  flex-direction: column;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-item {
  width: 100%;
  min-height: 68px;
  padding: 0.75rem 0;
  border: 0;
  border-top: 1px solid #eef2f6;
  background: transparent;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 0.75rem;
  color: #0f172a;
  font-family: inherit;
  text-align: left;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-item:first-child {
  border-top: 0;
  padding-top: 0.1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-item:hover,
body.bexhr-hr-visual-refresh .hr-overview-priority-item:focus-visible {
  outline: none;
  background: #f8fafc;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-icon,
body.bexhr-hr-visual-refresh .hr-overview-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bexhr-hr-visual-refresh .tone-review .hr-overview-priority-icon,
body.bexhr-hr-visual-refresh .hr-overview-activity-icon.tone-review {
  color: #7c3aed;
  background: #ede9fe;
}

body.bexhr-hr-visual-refresh .tone-warning .hr-overview-priority-icon {
  color: #b45309;
  background: #fef3c7;
}

body.bexhr-hr-visual-refresh .tone-payroll .hr-overview-priority-icon,
body.bexhr-hr-visual-refresh .hr-overview-activity-icon.tone-payroll {
  color: #0369a1;
  background: #e0f2fe;
}

body.bexhr-hr-visual-refresh .tone-danger .hr-overview-priority-icon {
  color: #b91c1c;
  background: #fee2e2;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-copy,
body.bexhr-hr-visual-refresh .hr-overview-activity-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-copy strong,
body.bexhr-hr-visual-refresh .hr-overview-activity-copy strong {
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 730;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-copy small,
body.bexhr-hr-visual-refresh .hr-overview-activity-copy small {
  margin-top: 0.15rem;
  overflow: hidden;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-arrow {
  color: #94a3b8;
  font-size: 0.72rem;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state {
  min-height: 128px;
  padding: 1rem;
  border: 1px dashed #bfe7df;
  border-radius: 14px;
  background: #f0fdfa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: #0f766e;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state > i {
  font-size: 1.5rem;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state div {
  display: flex;
  flex-direction: column;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state strong {
  font-size: 0.85rem;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state span {
  margin-top: 0.15rem;
  color: #477a73;
  font-size: 0.72rem;
}

body.bexhr-hr-visual-refresh .hr-overview-department-row {
  min-height: 62px;
  padding: 0.65rem 0;
  border-top: 1px solid #eef2f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-department-row:first-child {
  border-top: 0;
  padding-top: 0.1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-department-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

body.bexhr-hr-visual-refresh .hr-overview-department-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--hr-primary-dark);
  background: rgba(var(--bexhr-accent-rgb), 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  font-size: 0.68rem;
  font-weight: 820;
}

body.bexhr-hr-visual-refresh .hr-overview-department-main > span:last-child,
body.bexhr-hr-visual-refresh .hr-overview-department-readiness {
  display: flex;
  flex-direction: column;
}

body.bexhr-hr-visual-refresh .hr-overview-department-main strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-overview-department-main small,
body.bexhr-hr-visual-refresh .hr-overview-department-readiness small {
  color: #64748b;
  font-size: 0.68rem;
}

body.bexhr-hr-visual-refresh .hr-overview-department-readiness {
  align-items: flex-end;
  flex: 0 0 auto;
}

body.bexhr-hr-visual-refresh .hr-overview-department-readiness strong {
  color: #0f172a;
  font-size: 0.82rem;
}

/* Activity */
body.bexhr-hr-visual-refresh .hr-overview-activity-panel {
  padding-bottom: 0.6rem;
}

body.bexhr-hr-visual-refresh .hr-overview-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
}

body.bexhr-hr-visual-refresh .hr-overview-live-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px #d1fae5;
}

body.bexhr-hr-visual-refresh .hr-overview-activity-row {
  min-height: 62px;
  padding: 0.65rem 0;
  border-top: 1px solid #eef2f6;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

body.bexhr-hr-visual-refresh .hr-overview-activity-row:first-child {
  border-top: 0;
}

body.bexhr-hr-visual-refresh .hr-overview-activity-icon.tone-people {
  color: #0f766e;
  background: #ccfbf1;
}

body.bexhr-hr-visual-refresh .hr-overview-activity-icon.tone-leave {
  color: #b45309;
  background: #fef3c7;
}

body.bexhr-hr-visual-refresh .hr-overview-activity-row time {
  color: #94a3b8;
  font-size: 0.68rem;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-overview-empty-state {
  min-height: 110px;
  border: 1px dashed #d7dee7;
  border-radius: 14px;
  color: #64748b;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  text-align: center;
}

/* Sidebar hierarchy: Profile is now an account action, not the landing module. */
@media (min-width: 992px) {
  body.bexhr-hr-visual-refresh .bexhr-sidebar-footer #sidebarProfileBtn {
    margin-bottom: 0.35rem;
  }

  body.bexhr-hr-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-footer #sidebarProfileBtn {
    background: rgba(255, 255, 255, 0.045);
  }
}

/* Responsive overview */
@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh .hr-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh .hr-modern-app-header-main {
    align-items: flex-start;
  }

  body.bexhr-hr-visual-refresh .hr-modern-account-copy,
  body.bexhr-hr-visual-refresh .hr-modern-account-button > .bi-chevron-down {
    display: none;
  }

  body.bexhr-hr-visual-refresh .hr-modern-account-button {
    min-width: 48px;
    padding: 0.3rem;
  }

  body.bexhr-hr-visual-refresh .hr-overview-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
    justify-content: flex-start;
  }

  body.bexhr-hr-visual-refresh .hr-overview-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh main.container {
    padding-top: 0.75rem !important;
  }

  body.bexhr-hr-visual-refresh .hr-modern-app-header-main {
    min-height: 74px;
    padding: 0.8rem;
    gap: 0.75rem;
  }

  body.bexhr-hr-visual-refresh .hr-modern-page-heading p {
    display: none;
  }

  body.bexhr-hr-visual-refresh .hr-modern-context-line {
    font-size: 0.62rem;
  }

  body.bexhr-hr-visual-refresh .hr-modern-company-name {
    max-width: 44vw;
  }

  body.bexhr-hr-visual-refresh .hr-modern-page-heading h1 {
    font-size: 1.2rem;
  }

  body.bexhr-hr-visual-refresh .hr-modern-logout-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  body.bexhr-hr-visual-refresh .hr-overview-welcome {
    min-height: 0;
    padding: 1.35rem;
    border-radius: 18px;
  }

  body.bexhr-hr-visual-refresh .hr-overview-welcome h2 {
    font-size: 1.65rem;
  }

  body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
    width: 100%;
  }

  body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn {
    flex: 1 1 auto;
  }

  body.bexhr-hr-visual-refresh .hr-overview-metrics {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  body.bexhr-hr-visual-refresh .hr-overview-metric-card {
    min-height: 108px;
  }

  body.bexhr-hr-visual-refresh .hr-overview-panel,
  body.bexhr-hr-visual-refresh .hr-overview-readiness-card {
    padding: 1rem;
  }

  body.bexhr-hr-visual-refresh .hr-overview-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh .hr-overview-activity-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  body.bexhr-hr-visual-refresh .hr-overview-activity-row time {
    grid-column: 2;
  }
}

/* =========================================================
   BEXHR WORKSPACE LOADER - PEOPLE UI REFRESH STEP 1

   Purpose:
   - Replace the blank white first paint with immediate branded feedback.
   - Remain visible only until the exact remembered workspace is restored.
   - Respect tenant colour variables and reduced-motion preferences.
   ========================================================= */
.bexhr-workspace-loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(248, 249, 255, 0.98) 48%, rgba(241, 245, 249, 0.99) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

/* MANAGER WORKSPACE LOADER PARITY - v1.0.2
   Reuse the established BexHR loader component for Manager first paint.
   HR behaviour remains unchanged; only the additional Manager boot gate is added. */
/* EMPLOYEE WORKSPACE LOADER REGRESSION FIX - v1.0.0
   Keep the existing shared BexHR loader visible for Employee boot state
   exactly as it already is for HR and Manager.

   Presentation only:
   - no authentication changes;
   - no tenant or Alpatech logic changes;
   - no profile, leave, payroll, reporting-manager or Supabase changes. */
/* LANDING PAGE LOADER - v1.0.0
   Extend the existing shared BexHR loader to the public landing page.
   Existing authenticated workspace behaviour remains unchanged. */
body.hr-workspace-booting .bexhr-workspace-loader,
body.manager-workspace-booting .bexhr-workspace-loader,
body.employee-workspace-booting .bexhr-workspace-loader,
body.landing-workspace-booting .bexhr-workspace-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* LANDING PAGE LOADER - v1.0.0
   Keep first paint clean and opaque before the public landing page appears. */
body.landing-workspace-booting
  .bexhr-workspace-loader {
  background: #ffffff;
}

.bexhr-workspace-loader-panel {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 16%, white);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
  text-align: center;
  backdrop-filter: blur(14px);
}

.bexhr-workspace-loader-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--hr-primary-dark);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bexhr-workspace-loader-mark {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-primary-soft));
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--hr-primary) 26%, transparent);
}

.bexhr-workspace-loader-spinner {
  width: 34px;
  height: 34px;
  margin-top: 0.3rem;
  border: 3px solid color-mix(in srgb, var(--hr-primary) 16%, white);
  border-top-color: var(--hr-primary);
  border-radius: 50%;
  animation: bexhrWorkspaceLoaderSpin 760ms linear infinite;
}

.bexhr-workspace-loader-panel strong {
  color: var(--hr-text);
  font-size: 1.02rem;
}

.bexhr-workspace-loader-panel > span:last-child {
  color: var(--hr-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

@keyframes bexhrWorkspaceLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   SYSTEM-WIDE WORKSPACE LOADER UPGRADE - STEP 1

   Shared visual foundation for the favicon-based BexHR loader.
   The older loader selectors remain temporarily available until
   Manager, Employee, and Admin have been migrated and verified.
   ========================================================= */

.bexhr-workspace-loader-panel:has(.bexhr-workspace-loader-logo) {
  width: min(100%, 430px);
  align-items: stretch;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--hr-primary) 18%, white);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 100%
    );
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  text-align: left;
  overflow: hidden;
  position: relative;
}

.bexhr-workspace-loader-panel:has(.bexhr-workspace-loader-logo)::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  top: -125px;
  right: -90px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--hr-primary-soft) 24%, transparent) 0%,
      transparent 70%
    );
  pointer-events: none;
}

.bexhr-workspace-loader-panel:has(.bexhr-workspace-loader-logo)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(
      90deg,
      var(--hr-primary) 0%,
      var(--hr-primary-soft) 100%
    );
  opacity: 0.9;
  pointer-events: none;
}

.bexhr-workspace-loader-panel:has(.bexhr-workspace-loader-logo) > * {
  position: relative;
  z-index: 1;
}

.bexhr-workspace-loader-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}

.bexhr-workspace-loader-logo-shell {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--hr-primary) 10%, white) 0%,
      #ffffff 100%
    );
  border: 1px solid color-mix(in srgb, var(--hr-primary) 18%, white);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--hr-primary) 15%, transparent);
}

.bexhr-workspace-loader-logo {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.bexhr-workspace-loader-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bexhr-workspace-loader-brand-copy strong {
  color: var(--hr-primary-dark);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.bexhr-workspace-loader-brand-copy small {
  color: var(--hr-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.bexhr-workspace-loader-progress {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  width: 100%;
}

.bexhr-workspace-loader-progress .bexhr-workspace-loader-spinner {
  width: 32px;
  height: 32px;
  margin: 0;
  border-width: 3px;
}

.bexhr-workspace-loader-progress-line {
  position: relative;
  display: block;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background:
    color-mix(in srgb, var(--hr-primary) 11%, white);
}

.bexhr-workspace-loader-progress-line > span {
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--hr-primary) 0%,
      var(--hr-primary-soft) 100%
    );
  animation: bexhrWorkspaceLoaderProgress 1.35s ease-in-out infinite;
}

.bexhr-workspace-loader-message {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.bexhr-workspace-loader-message strong {
  color: var(--hr-text);
  font-size: clamp(1.05rem, 2vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.bexhr-workspace-loader-message span {
  color: var(--hr-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.bexhr-workspace-loader-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background:
    color-mix(in srgb, var(--hr-primary) 7%, white);
  border:
    1px solid color-mix(in srgb, var(--hr-primary) 13%, white);
  color: var(--hr-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
}

.bexhr-workspace-loader-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--hr-primary);
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--hr-primary) 35%, transparent);
  animation: bexhrWorkspaceLoaderStatusPulse 1.5s ease-out infinite;
}

@keyframes bexhrWorkspaceLoaderProgress {
  0% {
    transform: translateX(-115%);
  }

  55% {
    transform: translateX(115%);
  }

  100% {
    transform: translateX(245%);
  }
}

@keyframes bexhrWorkspaceLoaderStatusPulse {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--hr-primary) 35%, transparent);
  }

  70% {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--hr-primary) 0%, transparent);
  }

  100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--hr-primary) 0%, transparent);
  }
}

@media (max-width: 575.98px) {
  .bexhr-workspace-loader {
    padding: 1rem;
  }

  .bexhr-workspace-loader-panel:has(.bexhr-workspace-loader-logo) {
    width: 100%;
    padding: 1.35rem;
    border-radius: 22px;
    gap: 1rem;
  }

  .bexhr-workspace-loader-logo-shell {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 16px;
  }

  .bexhr-workspace-loader-logo {
    width: 34px;
    height: 34px;
  }

  .bexhr-workspace-loader-status {
    width: 100%;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bexhr-workspace-loader-progress-line > span,
  .bexhr-workspace-loader-status-dot {
    animation: none !important;
  }

  .bexhr-workspace-loader-progress-line > span {
    width: 60%;
    transform: none;
  }
}

/* =========================================================
   PEOPLE SUMMARY MODERNISATION - STEP 1
   Existing IDs and data calculations are untouched.
   ========================================================= */
.hr-people-summary-card {
  overflow: hidden;
}

.hr-people-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hr-people-section-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hr-people-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.hr-people-summary-tile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 108px;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 12%, #dbe4ee);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--hr-primary-soft) 10%, transparent), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.hr-people-summary-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.05rem;
}

.hr-people-summary-icon--people {
  background: #d8faf3;
  color: #087f70;
}

.hr-people-summary-icon--active {
  background: #e5f7e9;
  color: #198754;
}

.hr-people-summary-icon--departments {
  background: #e8e3ff;
  color: #7058d6;
}

.hr-people-summary-icon--attention {
  background: #fff1c7;
  color: #b56a00;
}

.hr-people-summary-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hr-people-summary-label {
  color: var(--hr-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hr-people-summary-value {
  margin-top: 0.1rem;
  color: var(--hr-text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.15;
}

.hr-people-summary-detail {
  margin-top: 0.24rem;
  color: var(--hr-muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* =========================================================
   EMPLOYEE DIRECTORY MODERN LIST - STEP 1
   Table semantics and every existing action remain intact.
   ========================================================= */
.hr-employee-directory-card {
  overflow: hidden;
}

.hr-employee-directory-card .dashboard-table-hint {
  display: none !important;
}

.hr-employee-directory-header {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.hr-employee-directory-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbfd 0%, #ffffff 100%);
}

.hr-employee-directory-search {
  width: min(100%, 380px);
  flex: 0 1 380px;
}

.hr-employee-directory-search .form-control {
  min-height: 44px;
  background-color: #ffffff;
}

.hr-employee-directory-download {
  min-height: 40px;
}

.hr-employee-directory-wrapper {
  max-height: 560px;
  overflow: auto;
  padding: 0 0.25rem 0.75rem;
  border: 0;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--hr-primary) 38%, #cbd5e1) transparent;
}

.hr-employee-directory-table {
  min-width: 1060px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.hr-employee-directory-head {
  position: sticky;
  top: 0;
  z-index: 4;
}

.hr-employee-directory-head th {
  padding: 0.7rem 0.75rem;
  border: 0;
  background: #f3f7fa;
  color: #52647a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hr-employee-directory-head th:first-child {
  border-radius: 12px 0 0 12px;
}

.hr-employee-directory-head th:last-child {
  border-radius: 0 12px 12px 0;
}

.hr-employee-directory-row {
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.hr-employee-directory-row > td {
  padding: 0.9rem 0.75rem;
  border-top: 1px solid #e5edf4;
  border-bottom: 1px solid #e5edf4;
  background: #ffffff;
  vertical-align: middle;
}

.hr-employee-directory-row > td:first-child:not(.d-none),
.hr-employee-directory-row > td.d-none + td {
  border-left: 1px solid #e5edf4;
  border-radius: 14px 0 0 14px;
}

.hr-employee-directory-row > td:last-child {
  border-right: 1px solid #e5edf4;
  border-radius: 0 14px 14px 0;
}

.hr-employee-directory-row:hover > td {
  background: #fbfdff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.055);
}

.hr-employee-directory-row--recent > td {
  background: color-mix(in srgb, #fff4d6 44%, white);
  border-color: #f4d99d;
}

.hr-employee-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.hr-employee-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--hr-primary) 12%, white);
  color: var(--hr-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hr-employee-identity-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hr-employee-name-button {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hr-primary);
  font: inherit;
  font-weight: 750;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hr-employee-name-button:hover,
.hr-employee-name-button:focus-visible {
  color: var(--hr-primary-dark);
  text-decoration: underline;
}

.hr-employee-number,
.hr-employee-cell-secondary {
  color: var(--hr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.hr-employee-cell-primary {
  color: var(--hr-text);
  font-size: 0.78rem;
  font-weight: 550;
}

.hr-employee-role-badge,
.hr-employee-recent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.2rem 0.46rem;
  border: 1px solid #dce5ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #52647a;
  font-size: 0.62rem;
  font-weight: 700;
}

.hr-employee-recent-badge {
  border-color: #f1cf7a;
  background: #fff6da;
  color: #8a5b00;
}

.hr-employee-documents-badge {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.28rem 0.48rem;
  border: 1px solid #dce5ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.hr-employee-documents-badge.has-documents {
  border-color: #a8e0eb;
  background: #dff8fc;
  color: #087b91;
}

.hr-employee-start-date {
  color: #334155;
  font-size: 0.76rem;
  font-weight: 600;
}

.hr-employee-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  flex-wrap: nowrap;
}

.hr-employee-action-btn {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 10px;
}

.hr-employee-action-btn > span {
  display: none;
}

.hr-employee-directory-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px dashed #d5e0ea;
  border-radius: 16px;
  background: #fbfdff;
  color: var(--hr-muted);
}

@media (max-width: 1199.98px) {
  .hr-people-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-employee-directory-toolbar {
    align-items: stretch;
  }
}

@media (max-width: 991.98px) {
  .hr-employee-directory-toolbar {
    flex-direction: column;
  }

  .hr-employee-directory-search {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  body.dashboard-page #employeeRecordsTableWrapper.hr-employee-directory-wrapper {
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  body.dashboard-page #employeeRecordsTableWrapper .hr-employee-directory-table {
    display: block;
    min-width: 0 !important;
    width: 100%;
    border-spacing: 0;
  }

  .hr-employee-directory-table thead {
    display: none;
  }

  .hr-employee-directory-table tbody {
    display: grid;
    gap: 1rem;
  }

  .hr-employee-directory-table .hr-employee-directory-row {
    display: block;
    padding: 0.25rem 1rem;
    border: 1px solid #dfe8f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
  }

  .hr-employee-directory-table .hr-employee-directory-row--recent {
    border-color: #efcf86;
    background: #fffdf6;
  }

  .hr-employee-directory-table .hr-employee-directory-row > td {
    display: grid;
    grid-template-columns: minmax(105px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.78rem 0;
    border: 0;
    border-bottom: 1px solid #edf2f6;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left !important;
  }

  .hr-employee-directory-table .hr-employee-directory-row > td::before {
    content: attr(data-label);
    color: #718096;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;
  }

  .hr-employee-directory-table .hr-employee-directory-row > td:last-child {
    border-bottom: 0;
  }

  .hr-employee-directory-table .hr-employee-primary-cell {
    grid-template-columns: 1fr !important;
    padding-block: 1rem !important;
  }

  .hr-employee-directory-table .hr-employee-primary-cell::before {
    display: none;
  }

  .hr-employee-directory-table .hr-employee-actions-cell {
    display: block !important;
  }

  .hr-employee-directory-table .hr-employee-actions-cell::before {
    display: block;
    margin-bottom: 0.65rem;
  }

  .hr-employee-row-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-employee-action-btn {
    width: 100%;
    min-height: 40px;
  }

  .hr-employee-action-btn > span {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hr-employee-directory-loading-row {
    display: block;
  }

  .hr-employee-directory-loading-row > td {
    display: block !important;
    width: 100%;
    border: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .hr-people-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-people-summary-tile {
    min-height: 96px;
  }

  .hr-employee-directory-card > .card-body,
  .hr-people-summary-card > .card-body {
    padding: 1.15rem !important;
  }

  .hr-employee-directory-table .hr-employee-directory-row > td {
    grid-template-columns: minmax(88px, 0.36fr) minmax(0, 1fr);
    gap: 0.7rem;
  }

  .bexhr-workspace-loader-panel {
    padding: 1.6rem 1.25rem;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bexhr-workspace-loader,
  .hr-employee-directory-row {
    transition: none;
  }

  .bexhr-workspace-loader-spinner {
    animation-duration: 1.4s;
  }
}

/* =========================================================
   PEOPLE DIRECTORY SCROLL, SEARCH, AND DETAILS MODAL - STEP 2

   HR/product behaviour:
   - Desktop retains the existing 560px inner directory scroll.
   - Tablet and mobile now use a controlled viewport-height inner scroll,
     preventing a large employee directory from stretching the whole page.
   - The read-only employee details view is shared by the employee name link
     and View action; only its presentation and scroll behaviour are changed.
   ========================================================= */
body.hr-employee-details-modal-open {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  body.dashboard-page #employeeRecordsTableWrapper.hr-employee-directory-wrapper {
    max-height: min(68vh, 720px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0.3rem 0.8rem 0;
    -webkit-overflow-scrolling: touch;
  }

  .hr-employee-directory-table tbody {
    padding-right: 0.1rem;
  }
}

@media (max-width: 575.98px) {
  body.dashboard-page #employeeRecordsTableWrapper.hr-employee-directory-wrapper {
    max-height: min(64vh, 620px);
  }
}

.hr-employee-details-modal {
  z-index: 1055;
  background: rgba(7, 18, 34, 0.62);
  backdrop-filter: blur(8px);
  padding: clamp(0.65rem, 2vw, 1.5rem);
}

.hr-employee-details-modal-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.hr-employee-details-modal-panel {
  width: min(100%, 1060px);
  max-height: min(94vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.hr-employee-details-modal-header,
.hr-employee-details-modal-footer {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.hr-employee-details-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid #e7edf3;
}

.hr-employee-details-modal-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.hr-employee-details-modal-heading-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hr-primary) 12%, white);
  color: var(--hr-primary);
  font-size: 1.05rem;
}

.hr-employee-details-modal-kicker {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--hr-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.hr-employee-details-modal-header h2 {
  color: var(--hr-text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.hr-employee-details-modal-header p {
  color: var(--hr-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.hr-employee-details-modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  color: #52647a;
}

.hr-employee-details-modal-close:hover,
.hr-employee-details-modal-close:focus-visible {
  border-color: var(--hr-primary);
  color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 6%, white);
}

.hr-employee-details-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: #f5f8fb;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--hr-primary) 34%, #cbd5e1) transparent;
  -webkit-overflow-scrolling: touch;
}

.hr-employee-details-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid #e7edf3;
}

.hr-employee-details-modal-footer-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hr-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.hr-employee-details-loading {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--hr-muted);
  text-align: center;
}

.hr-employee-details-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 16%, #dce5ed);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hr-primary-soft) 15%, transparent), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.hr-employee-details-hero-avatar {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-primary-soft));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--hr-primary) 22%, transparent);
}

.hr-employee-details-hero-copy {
  min-width: 0;
}

.hr-employee-details-hero-kicker {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--hr-primary);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.hr-employee-details-hero h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.hr-employee-details-hero p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.25rem 0 0;
  color: var(--hr-muted);
  font-size: 0.78rem;
}

.hr-employee-details-hero-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.hr-employee-details-modal-content > section,
.hr-employee-details-section {
  margin-bottom: 1rem !important;
  padding: 1.1rem !important;
  border: 1px solid #dfe7ef !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.hr-employee-details-modal-content > section:last-child {
  margin-bottom: 0 !important;
}

.hr-employee-details-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem !important;
}

.hr-employee-details-modal-content > section > .mb-3 {
  margin-bottom: 1rem !important;
}

.hr-employee-details-section-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hr-primary) 10%, white);
  color: var(--hr-primary);
}

.hr-employee-details-section-heading h3,
.hr-employee-details-modal-content > section h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 0.92rem;
  font-weight: 800;
}

.hr-employee-details-section-heading p,
.hr-employee-details-modal-content > section > .mb-3 p {
  margin: 0.18rem 0 0;
  color: var(--hr-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.hr-employee-details-field {
  height: 100%;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid #e5ebf1;
  border-radius: 14px;
  background: #f9fbfd;
}

.hr-employee-details-field-label {
  color: #718096;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.hr-employee-details-field-value {
  color: var(--hr-text);
  font-size: 0.84rem;
  line-height: 1.45;
}

.hr-employee-details-list {
  display: grid;
  gap: 0.7rem;
}

.hr-employee-details-list-item {
  padding: 0.9rem;
  border: 1px solid #e4eaf0;
  border-radius: 14px;
  background: #f9fbfd;
}

.hr-employee-details-empty {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px dashed #d5e0e9;
  border-radius: 14px;
  background: #f9fbfd;
  color: var(--hr-muted);
  font-size: 0.8rem;
  text-align: center;
}

.hr-employee-details-modal-content .alert-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.9rem 1rem;
  border-color: color-mix(in srgb, var(--hr-primary) 24%, #cbd5e1) !important;
  border-radius: 16px;
  background: color-mix(in srgb, var(--hr-primary) 7%, white);
  color: var(--hr-text);
}

@media (max-width: 767.98px) {
  .hr-employee-details-modal {
    padding: 0;
  }

  .hr-employee-details-modal-shell {
    align-items: end;
  }

  .hr-employee-details-modal-panel {
    width: 100%;
    max-height: 96vh;
    border-radius: 22px 22px 0 0;
  }

  .hr-employee-details-modal-header {
    padding: 1rem;
  }

  .hr-employee-details-modal-heading-icon {
    display: none;
  }

  .hr-employee-details-modal-content {
    padding: 0.85rem;
  }

  .hr-employee-details-modal-footer {
    padding: 0.85rem 1rem;
  }

  .hr-employee-details-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hr-employee-details-hero-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .hr-employee-details-modal-footer-note {
    display: none;
  }

  .hr-employee-details-modal-footer {
    justify-content: flex-end;
  }

  .hr-employee-details-hero-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .hr-employee-details-field {
    min-height: 70px;
  }
}

/* FLEXIBLE BATCH AND CREATE EMPLOYEE UI - STEP 1
   Presentation is isolated to the People onboarding cards. Existing control
   IDs, validation, account linkage, role restrictions, and save handlers remain. */
.hr-create-employee-card,
.hr-batch-employee-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hr-primary-soft) 9%, transparent), transparent 24rem),
    #ffffff;
}

.hr-create-employee-header,
.hr-batch-employee-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.hr-create-employee-heading,
.hr-batch-employee-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.hr-create-employee-icon,
.hr-batch-employee-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--hr-primary) 12%, white);
  color: var(--hr-primary);
  font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hr-primary) 16%, transparent);
}

.hr-create-employee-stepper {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7fafc 0%, #ffffff 100%);
  scrollbar-width: thin;
}

.hr-create-employee-stepper .bexhr-form-step {
  flex: 0 0 auto;
  min-width: 78px;
}

.hr-create-employee-stepper .bexhr-step-dot {
  width: 36px;
  height: 36px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.hr-create-employee-toolbar {
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: #fbfdff;
}

.hr-create-employee-form > .row {
  row-gap: 1.25rem !important;
}

.hr-create-employee-form .bg-light-subtle.border.rounded-4,
.hr-create-employee-form .border.rounded-4.p-3,
.hr-create-employee-form .border.rounded-4.p-3.p-lg-4 {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.hr-create-employee-form h3.h6 {
  color: #17324d;
  font-size: 0.98rem;
}

.hr-create-employee-form .form-label {
  color: #30445b;
  font-size: 0.82rem;
}

.hr-create-employee-form .form-control,
.hr-create-employee-form .form-select {
  background-color: #ffffff;
  border-color: #d9e3ec;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.hr-create-employee-form .form-control:focus,
.hr-create-employee-form .form-select:focus {
  border-color: var(--hr-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--hr-primary) 14%, transparent);
}

  /* EMPLOYEE BIODATA STICKY SAVE ACTION - STEP 1C
     Keep the existing Create / Update action visible inside the controlled
     employee-form scroll area. Existing save, validation, loading, access,
     tenant, and Supabase behaviour remain unchanged. */
  .hr-create-employee-submit-wrap {
    position: sticky;
    top: 0;
    z-index: 9;
    order: -1;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0.15rem 0.4rem 0.75rem 0;
    border-top: 0;
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.98) 78%,
      rgba(255, 255, 255, 0) 100%
    );
  }

.hr-create-employee-submit-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 20%, #d7e1ea);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.hr-create-employee-submit-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hr-create-employee-submit-copy strong { color: #17324d; }
.hr-create-employee-submit-copy span { color: var(--hr-muted); font-size: 0.76rem; }

/* =========================================================
   EMPLOYEE BIODATA MODERN STATUS CHIPS - STEP 1B
   Scoped to the Create/Edit Employee workspace only.
   Replaces old Bootstrap pill styling without changing status,
   account-linkage, protected-access, tenant, or save behaviour.
   ========================================================= */
.hr-create-employee-card .hr-employee-form-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.4rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.hr-create-employee-card .hr-employee-form-chip > i {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
}

.hr-create-employee-card .hr-employee-form-chip--neutral {
  border-color: #d7e1ea;
  background: #f5f8fb;
  color: #526579;
}

.hr-create-employee-card .hr-employee-form-chip--info {
  border-color: color-mix(in srgb, var(--hr-primary) 28%, #d7e1ea);
  background: color-mix(in srgb, var(--hr-primary) 9%, #ffffff);
  color: var(--hr-primary-dark);
}

.hr-create-employee-card .hr-employee-form-chip--success {
  border-color: #bfe8d2;
  background: #edf9f3;
  color: #087443;
}

.hr-create-employee-card .hr-employee-form-chip--warning {
  border-color: #f0d58a;
  background: #fff8df;
  color: #805b00;
}

.hr-create-employee-card .hr-employee-form-chip--protected {
  border-color: #d8c277;
  background: #fff6cf;
  color: #6f5200;
}

body.alpatech-workspace .hr-create-employee-card .hr-employee-form-chip--info {
  border-color: rgba(11, 95, 149, 0.24);
  background: #eaf6fb;
  color: #084f79;
}

@media (max-width: 575.98px) {
  .hr-create-employee-card .hr-employee-form-chip {
    min-height: 28px;
    padding: 0.36rem 0.62rem;
    font-size: 0.68rem;
  }
}

.hr-batch-flexible-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem;
  border: 1px solid #a7e3c2;
  border-radius: 999px;
  background: #eafbf1;
  color: #167544;
  font-size: 0.76rem;
  font-weight: 800;
}

.hr-batch-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hr-batch-workflow-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #dfe7ef;
  border-radius: 16px;
  background: #fbfdff;
}

.hr-batch-workflow-step > span {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f7;
  color: #607286;
  font-weight: 800;
}

.hr-batch-workflow-step.is-active > span {
  background: var(--hr-primary);
  color: #ffffff;
}

.hr-batch-workflow-step div { min-width: 0; display: flex; flex-direction: column; }
.hr-batch-workflow-step strong { color: #17324d; font-size: 0.82rem; }
.hr-batch-workflow-step small { color: var(--hr-muted); font-size: 0.68rem; line-height: 1.4; }
.hr-batch-workflow-connector { width: 24px; height: 2px; background: #dce5ee; }

.hr-batch-minimum-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #b9dff5;
  border-radius: 16px;
  background: #eff9ff;
  color: #23506d;
}
.hr-batch-minimum-rule div { display: flex; flex-direction: column; }
.hr-batch-minimum-rule span { font-size: 0.76rem; line-height: 1.5; }

.hr-batch-upload-panel {
  padding: 1.15rem;
  border: 1px dashed color-mix(in srgb, var(--hr-primary) 35%, #cbd5e1);
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hr-primary) 4%, white), #ffffff);
}

.hr-batch-upload-copy,
.hr-batch-upload-controls,
.hr-batch-action-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hr-batch-upload-copy { margin-bottom: 1rem; }
.hr-batch-upload-symbol {
  width: 42px; height: 42px; flex: 0 0 42px; display: inline-grid; place-items: center;
  border-radius: 14px; background: color-mix(in srgb, var(--hr-primary) 11%, white); color: var(--hr-primary);
}
.hr-batch-upload-controls { align-items: flex-end; justify-content: space-between; }
.hr-batch-file-field { width: min(100%, 520px); }
.hr-batch-action-row { flex-wrap: wrap; justify-content: flex-end; }

.hr-batch-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.hr-batch-status-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #e0e8ef;
  border-radius: 16px;
  background: #ffffff;
}
.hr-batch-status-card > span { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; border-radius: 12px; }
.hr-batch-status-card > div { min-width: 0; display: flex; flex-direction: column; }
.hr-batch-status-card small { color: var(--hr-muted); font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; }
.hr-batch-status-card strong { color: var(--hr-text); font-size: 1.25rem; }
.hr-batch-status-card.status-ready > span { background: #e7f8ed; color: #198754; }
.hr-batch-status-card.status-warning > span { background: #fff5d7; color: #a56a00; }
.hr-batch-status-card.status-duplicate > span { background: #e7f4fb; color: #087b91; }
.hr-batch-status-card.status-blocked > span { background: #fdeaea; color: #b42318; }

.hr-batch-review-panel {
  padding: 1.15rem;
  border: 1px solid #dfe7ef;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}
.hr-batch-review-header,
.hr-batch-review-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hr-batch-review-header { margin-bottom: 1rem; }
.hr-batch-review-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e6edf3; }
.hr-batch-review-table-wrap { max-height: 500px; overflow: auto; }
.hr-batch-review-table { min-width: 1040px; }
.hr-batch-row-needs-completion > td { background: #fffdf5; }
.hr-batch-row-warning-list { margin: 0.4rem 0 0; padding-left: 1rem; color: #8a6200; font-size: 0.67rem; line-height: 1.4; }

@media (max-width: 1199.98px) {
  .hr-batch-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-batch-upload-controls { align-items: stretch; flex-direction: column; }
  .hr-batch-file-field { width: 100%; }
  .hr-batch-action-row { justify-content: flex-start; }
}

@media (max-width: 991.98px) {
  .hr-create-employee-header,
  .hr-batch-employee-header,
  .hr-batch-review-header,
  .hr-batch-review-footer { align-items: stretch; flex-direction: column; }

  .hr-batch-workflow {
    grid-template-columns: minmax(0, 1fr);
  }
  .hr-batch-workflow-connector { width: 2px; height: 16px; margin-left: 1.9rem; }
  .hr-create-employee-submit-bar { align-items: stretch; flex-direction: column; }
  .hr-create-employee-submit-bar .btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .hr-create-employee-card > .card-body,
  .hr-batch-employee-card > .card-body { padding: 1.15rem !important; }
  .hr-create-employee-heading,
  .hr-batch-employee-heading { gap: 0.7rem; }
  .hr-create-employee-icon,
  .hr-batch-employee-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .hr-batch-status-grid { grid-template-columns: minmax(0, 1fr); }
  .hr-batch-action-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hr-batch-action-row .btn { width: 100%; }
  .hr-create-employee-stepper .bexhr-step-label { display: block; }
  .hr-create-employee-stepper .bexhr-form-step { min-width: 88px; }
}


/* =========================================================
   EMPLOYEE BIODATA INTERNAL WORKSPACE - STEP 1

   The seven-stage strip now behaves as modern in-form navigation.
   Existing Bootstrap grid children stay in place; only inactive groups
   receive the native hidden state.
   ========================================================= */
.hr-create-employee-stepper .hr-employee-form-tab {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  padding: 0.45rem 0.35rem;
  border-radius: 14px;
  outline: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.hr-create-employee-stepper .hr-employee-form-tab:hover,
.hr-create-employee-stepper .hr-employee-form-tab.form-step-current {
  background: color-mix(in srgb, var(--hr-primary) 7%, white);
}

.hr-create-employee-stepper .hr-employee-form-tab:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hr-primary) 14%, transparent);
}

.hr-create-employee-stepper .hr-employee-form-tab:active {
  transform: translateY(1px);
}

.hr-create-employee-form [data-employee-form-section][hidden] {
  display: none !important;
}

@media (max-width: 767.98px) {
  .hr-create-employee-stepper .hr-employee-form-tab {
    min-width: 88px;
  }
}

/* =========================================================
   CREATE EMPLOYEE SEMANTICS AND CONTROLLED VIEWPORT - STEP 1
   - A checkmark means completed, never merely active.
   - Desktop/tablet keep the long form inside a controlled scroll area.
   - Phone expansion becomes a full-screen single-scroll workspace.
   ========================================================= */
.hr-create-employee-stepper .bexhr-form-step.form-step-current .bexhr-step-dot {
  border-color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 9%, white);
  color: var(--hr-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hr-primary) 10%, transparent);
}

.hr-create-employee-stepper .bexhr-form-step.form-step-current .bexhr-step-label {
  color: var(--hr-primary);
  font-weight: 700;
}

.hr-create-employee-collapse:not(.d-none) {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: min(76dvh, 860px);
  min-height: 0;
  overflow: hidden;
}

.hr-create-employee-collapse > .hr-create-employee-stepper,
.hr-create-employee-collapse > .hr-create-employee-toolbar {
  position: relative;
  z-index: 10;
  margin-bottom: 0.75rem !important;
}

.hr-create-employee-collapse > .hr-create-employee-form {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 0.15rem 0.4rem 1rem 0;
}

.hr-create-employee-collapse > .hr-create-employee-form::-webkit-scrollbar {
  width: 10px;
}

.hr-create-employee-collapse > .hr-create-employee-form::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(71, 84, 103, 0.28);
  background-clip: padding-box;
}

.hr-create-employee-collapse > .hr-create-employee-form::-webkit-scrollbar-track {
  background: transparent;
}

.hr-create-employee-collapse .hr-create-employee-submit-bar {
  margin-bottom: 0.5rem;
}

.hr-batch-row-status-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.hr-batch-row-status-stack .badge {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  body.hr-employee-form-mobile-open {
    overflow: hidden;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-card {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100%;
    height: 100dvh;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-card > .card-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 1rem !important;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.75rem;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-heading .section-subtext,
  body.hr-employee-form-mobile-open .hr-create-employee-icon {
    display: none;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-collapse:not(.d-none) {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-stepper {
    padding: 0.7rem;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.65rem;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-toolbar > * {
    flex: 0 0 auto;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-collapse > .hr-create-employee-form {
    padding-right: 0.25rem;
  }

  body.hr-employee-form-mobile-open .hr-create-employee-submit-bar {
    border-radius: 14px;
  }
}

/* =========================================================
   PLATFORM CARD HEADER CONSISTENCY - STEP 4

   One reusable icon-led title system for:
   - Dashboard operational panels
   - People summary, directory, create, and batch cards
   - Setup workspace group headers generated by JavaScript

   Page-level headers and inner form/table headings intentionally remain
   text-led so the interface does not become visually noisy.
   Existing IDs, actions, collapse controls, data rendering, and business
   behaviour are unchanged.
   ========================================================= */

.hr-card-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hr-card-heading-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.hr-card-heading-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.hr-card-heading-icon {
  --hr-card-heading-icon-color: var(--hr-primary);
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 15px;
  color: var(--hr-card-heading-icon-color);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--hr-card-heading-icon-color) 14%, white) 0%,
      color-mix(in srgb, var(--hr-card-heading-icon-color) 7%, white) 100%
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--hr-card-heading-icon-color) 20%, transparent),
    0 8px 18px color-mix(in srgb, var(--hr-card-heading-icon-color) 10%, transparent);
  font-size: 1.08rem;
}

.hr-card-heading-icon--payroll {
  --hr-card-heading-icon-color: #198754;
}

.hr-card-heading-icon--attention {
  --hr-card-heading-icon-color: #c97800;
}

.hr-card-heading-icon--organisation {
  --hr-card-heading-icon-color: #7058d6;
}

.hr-card-heading-icon--activity,
.hr-card-heading-icon--directory {
  --hr-card-heading-icon-color: #0b5f95;
}

.hr-card-heading-icon--people,
.hr-card-heading-icon--onboarding,
.hr-card-heading-icon--setup {
  --hr-card-heading-icon-color: var(--hr-primary);
}

.hr-card-heading-icon--batch {
  --hr-card-heading-icon-color: #5f5bd6;
}

/* Keep longer People headings aligned from the top while actions remain stable. */
.hr-people-section-heading.hr-card-heading,
.hr-employee-directory-header.hr-card-heading,
.hr-create-employee-header.hr-card-heading,
.hr-batch-employee-header.hr-card-heading {
  align-items: flex-start;
}

/* The readiness percentage belongs on the same visual centre line as its heading. */
.hr-overview-readiness-heading.hr-card-heading {
  align-items: center;
}

/* Setup group cards use a slightly tighter shared header. */
.hr-card-heading--compact .hr-card-heading-main {
  align-items: center;
}

.hr-card-heading--compact .hr-card-heading-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 14px;
}

/* Existing Create/Batch icon classes now inherit the shared geometry and colour system. */
.hr-create-employee-icon.hr-card-heading-icon,
.hr-batch-employee-icon.hr-card-heading-icon {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--hr-card-heading-icon-color) 14%, white) 0%,
      color-mix(in srgb, var(--hr-card-heading-icon-color) 7%, white) 100%
    );
  color: var(--hr-card-heading-icon-color);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--hr-card-heading-icon-color) 20%, transparent),
    0 8px 18px color-mix(in srgb, var(--hr-card-heading-icon-color) 10%, transparent);
}

@media (max-width: 991.98px) {
  .hr-employee-directory-header.hr-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .hr-employee-directory-header.hr-card-heading > .btn {
    align-self: flex-start !important;
  }
}

@media (max-width: 575.98px) {
  .hr-card-heading-main {
    gap: 0.7rem;
  }

  .hr-card-heading-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 14px;
  }

  .hr-overview-panel-header.hr-card-heading,
  .hr-overview-readiness-heading.hr-card-heading {
    align-items: flex-start;
  }

  .hr-overview-readiness-heading.hr-card-heading {
    flex-direction: column;
  }

  .hr-overview-readiness-heading.hr-card-heading > strong {
    margin-left: 3.6rem;
  }

  .hr-people-section-heading.hr-card-heading {
    margin-bottom: 1.15rem;
  }
}

/* Preserve the existing single-scroll mobile employee workspace. */
@media (max-width: 767.98px) {
  body.hr-employee-form-mobile-open .hr-create-employee-header.hr-card-heading {
    flex-direction: row;
    align-items: center;
  }
}


/* =========================================================
   HR REVIEW ROLE ACCESS + MODERNISATION - STEP 9

   Presentation and responsive behaviour for the dedicated HR Review workspace.
   Existing tenant-scoped data queries, lifecycle values, refresh/filter/collapse
   controls, employee drilldown, and approved-leave RPC remain unchanged.
   ========================================================= */

.hr-card-heading-icon--review {
  --hr-card-heading-icon-color: #0b5f95;
}

.hr-card-heading-icon--profile-review {
  --hr-card-heading-icon-color: #6f42c1;
}

.hr-card-heading-icon--leave-review {
  --hr-card-heading-icon-color: #198754;
}

.hr-review-section-kicker {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hr-review-landing-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 15%, #dbe4ec) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--hr-primary-soft) 18%, transparent), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--hr-soft-surface) 62%, white) 100%);
}

.hr-review-landing-card > .card-body {
  padding: 1.3rem !important;
}

.hr-review-overview-header,
.hr-review-card-heading {
  align-items: flex-start;
}

.hr-review-overview-header {
  margin-bottom: 1rem !important;
}

.hr-review-overview-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.25rem;
}

.hr-review-overview-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(11, 95, 149, 0.16);
  border-radius: 999px;
  background: rgba(11, 95, 149, 0.06);
  color: #08446d;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.hr-review-access-panel {
  width: min(100%, 320px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  text-align: right;
}

.hr-review-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 34px;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #d8e1ea;
  background: #f8fafc;
  color: #475467;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.hr-review-access-badge--full {
  border-color: rgba(25, 135, 84, 0.22);
  background: rgba(25, 135, 84, 0.09);
  color: #146c43;
}

.hr-review-access-badge--view {
  border-color: rgba(11, 95, 149, 0.2);
  background: rgba(11, 95, 149, 0.08);
  color: #08446d;
}

.hr-review-access-description {
  max-width: 300px;
  color: #667085;
  font-size: 0.75rem;
  line-height: 1.45;
}

.hr-review-lane-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hr-review-lane-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 104px;
  padding: 1rem;
  border: 1px solid #dfe7ef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.hr-review-lane-card--profile {
  border-top: 3px solid #6f42c1;
}

.hr-review-lane-card--leave {
  border-top: 3px solid #198754;
}

.hr-review-lane-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: #eef6fa;
  color: #0b5f95;
  font-size: 1rem;
}

.hr-review-lane-card--profile .hr-review-lane-icon {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.hr-review-lane-card--leave .hr-review-lane-icon {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

.hr-review-lane-content {
  min-width: 0;
}

.hr-review-lane-card h3 {
  margin: 0 0 0.3rem;
  color: #16233b;
  font-size: 0.98rem;
  font-weight: 800;
}

.hr-review-lane-card p {
  margin: 0;
  color: #667085;
  font-size: 0.79rem;
  line-height: 1.5;
}

.hr-review-lane-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  padding-inline: 0.75rem;
  border: 1px solid rgba(11, 95, 149, 0.2);
  border-radius: 12px;
  background: #ffffff;
  color: #0b5f95;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.hr-review-lane-card--profile .hr-review-lane-action {
  border-color: rgba(111, 66, 193, 0.22);
  color: #6f42c1;
}

.hr-review-lane-card--leave .hr-review-lane-action {
  border-color: rgba(25, 135, 84, 0.22);
  color: #198754;
}

.hr-review-lane-action:hover,
.hr-review-lane-action:focus-visible {
  background: #f8fafc;
  color: inherit;
}

.hr-review-operational-card {
  /* HR REVIEW STICKY HEADER OFFSET FIX - STEP 3
     Mobile has no sticky application header, so retain only normal breathing room. */
  scroll-margin-top: 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
}

@media (min-width: 992px) {
  .hr-review-operational-card {
    /* Native-anchor fallback. The Review Overview buttons use the measured
       JavaScript offset, which remains authoritative at browser zoom levels. */
    scroll-margin-top: 8rem;
  }
}

.hr-review-card-toolbar {
  max-width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.hr-review-card-toolbar .dashboard-action-btn,
.hr-review-filter-select {
  min-height: 38px;
  height: 38px;
}

.hr-review-filter-select {
  width: auto;
  min-width: 136px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  font-weight: 600;
}

.hr-review-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.hr-review-summary-tile {
  --hr-review-summary-accent: #0b5f95;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 88px;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--hr-review-summary-accent) 16%, #dfe7ef);
  border-radius: 16px;
  background:
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--hr-review-summary-accent) 9%, transparent) 0 26px, transparent 27px),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.hr-review-summary-tile--pending,
.hr-review-summary-tile--exception {
  --hr-review-summary-accent: #c97800;
}

.hr-review-summary-tile--open,
.hr-review-summary-tile--total,
.hr-review-summary-tile--latest {
  --hr-review-summary-accent: #0b5f95;
}

.hr-review-summary-tile--closed,
.hr-review-summary-tile--approved {
  --hr-review-summary-accent: #198754;
}

.hr-review-summary-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--hr-review-summary-accent) 10%, white);
  color: var(--hr-review-summary-accent);
}

.hr-review-summary-label {
  display: block;
  margin-bottom: 0.22rem;
  color: #667085;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.hr-review-summary-value {
  display: block;
  color: #101828;
  font-size: 1.05rem;
  line-height: 1.2;
}

.hr-review-summary-value--date {
  font-size: 0.9rem;
}

#profileCorrectionRequestsCollapse > .alert-light,
#managerLeaveDecisionsCollapse > .alert-light {
  border-radius: 16px;
  background: linear-gradient(145deg, #fbfdff 0%, #f7fafc 100%);
}

.hr-review-table-wrap {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hr-review-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.hr-review-read-only-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid rgba(11, 95, 149, 0.16);
  border-radius: 14px;
  background: rgba(11, 95, 149, 0.055);
  color: #475467;
  font-size: 0.76rem;
  line-height: 1.45;
}

.hr-review-read-only-action strong {
  color: #08446d;
  font-size: 0.8rem;
}

.hr-review-read-only-action-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #ffffff;
  color: #0b5f95;
  box-shadow: inset 0 0 0 1px rgba(11, 95, 149, 0.14);
}

.hr-review-view-only-badge {
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .hr-review-card-heading {
    flex-direction: column;
  }

  .hr-review-card-toolbar {
    width: 100%;
    justify-content: flex-start;
    padding-left: 3.8rem;
  }

  .hr-review-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .hr-review-overview-header {
    flex-direction: column;
  }

  .hr-review-access-panel {
    width: 100%;
    align-items: flex-start;
    padding-left: 0;
    text-align: left;
  }

  .hr-review-access-description {
    max-width: none;
  }

  .hr-review-lane-grid {
    grid-template-columns: 1fr;
  }

  .hr-review-card-toolbar {
    padding-left: 0;
  }
}

@media (max-width: 575.98px) {
  .hr-review-card-toolbar > *,
  .hr-review-filter-select {
    width: 100%;
  }

  .hr-review-summary-grid {
    grid-template-columns: 1fr;
  }

  .hr-review-summary-tile {
    min-height: 78px;
  }

  .hr-review-lane-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .hr-review-lane-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* =========================================================
   PAYROLL WORKSPACE MODERNISATION - STEP 1
   Presentation-only upgrade for Payroll Overview, salary setup,
   finalisation, records, and payslip preview.

   Safety boundary:
   - Existing IDs, handlers, calculations, tenant filters, role guards,
     Supabase queries, finalisation, CSV, email delivery, and print logic
     remain unchanged.
   ========================================================= */

.hr-payroll-workspace {
  --payroll-ink: #10233f;
  --payroll-muted: #637083;
  --payroll-border: rgba(148, 163, 184, 0.28);
  --payroll-soft: #f7fafc;
  --payroll-teal: #0ea5a4;
  --payroll-blue: #2563eb;
  --payroll-green: #15915f;
  --payroll-violet: #7c3aed;
}

.hr-payroll-workspace .hr-payroll-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 164, 0.055), transparent 30%),
    #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.075);
}

.hr-payroll-card-heading {
  align-items: flex-start;
  gap: 1rem;
}

.hr-payroll-card-heading .hr-card-heading-main {
  min-width: 0;
}

.hr-payroll-card-heading .hr-card-heading-copy {
  min-width: 0;
}

.hr-payroll-section-kicker {
  display: block;
  margin-bottom: 0.22rem;
  color: #008e8b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hr-card-heading-icon--salary {
  color: #2563eb;
  background: #eaf2ff;
  border-color: #c9dcff;
}

.hr-card-heading-icon--finalise {
  color: #7c3aed;
  background: #f1eafe;
  border-color: #decdfb;
}

.hr-card-heading-icon--records {
  color: #0f766e;
  background: #e6f8f4;
  border-color: #bde9df;
}

.hr-payroll-summary-scope {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  margin: -0.2rem 0 1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(14, 165, 164, 0.2);
  border-radius: 999px;
  color: #0f5f61;
  background: #f0fdfa;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.hr-payroll-summary-scope i {
  flex: 0 0 auto;
}

.hr-payroll-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hr-payroll-summary-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 112px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--payroll-border);
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #f9fcfd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hr-payroll-summary-tile > div {
  min-width: 0;
}

.hr-payroll-summary-tile::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(14, 165, 164, 0.075);
}

.hr-payroll-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 1rem;
  color: #0f766e;
  background: #e7f8f5;
  border: 1px solid #c5ebe4;
}

.hr-payroll-summary-tile--finalised .hr-payroll-summary-icon {
  color: #16794f;
  background: #eaf8f0;
  border-color: #c8ead7;
}

.hr-payroll-summary-tile--gross .hr-payroll-summary-icon {
  color: #6d28d9;
  background: #f2ebff;
  border-color: #decffc;
}

.hr-payroll-summary-tile--net .hr-payroll-summary-icon {
  color: #b45309;
  background: #fff4dd;
  border-color: #f7dfad;
}

.hr-payroll-summary-label,
.hr-payroll-summary-detail {
  display: block;
}

.hr-payroll-summary-label {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hr-payroll-summary-value {
  display: block;
  margin-top: 0.12rem;
  color: var(--payroll-ink);
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

.hr-payroll-summary-value--financial {
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.025em;
}

.hr-payroll-summary-detail {
  margin-top: 0.25rem;
  color: #667085;
  font-size: 0.72rem;
  line-height: 1.35;
}

.hr-payroll-card-collapse {
  min-width: 0;
}

.hr-payroll-workspace .hr-payroll-toolbar {
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbfc 0%, #ffffff 100%);
}

.hr-payroll-form-panel,
.hr-payroll-finalisation-form {
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

.hr-payroll-form-panel .form-control,
.hr-payroll-form-panel .form-select,
.hr-payroll-finalisation-form .form-control,
.hr-payroll-finalisation-form .form-select,
.hr-payroll-record-filter-panel .form-control,
.hr-payroll-record-filter-panel .form-select {
  min-height: 46px;
  border-radius: 12px;
  border-color: #d7e1eb;
  background-color: #fff;
}

.hr-payroll-form-panel .form-control:focus,
.hr-payroll-form-panel .form-select:focus,
.hr-payroll-finalisation-form .form-control:focus,
.hr-payroll-finalisation-form .form-select:focus,
.hr-payroll-record-filter-panel .form-control:focus,
.hr-payroll-record-filter-panel .form-select:focus {
  border-color: rgba(14, 165, 164, 0.62);
  box-shadow: 0 0 0 0.2rem rgba(14, 165, 164, 0.11);
}

.hr-payroll-records-header {
  padding: 1rem;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.hr-payroll-subpanel,
.hr-payroll-record-filter-panel,
.hr-payroll-email-status-panel {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 164, 0.055), transparent 36%),
    #f8fbfc !important;
  box-shadow: inset 0 1px 0 #fff;
}

.hr-payroll-import-panel {
  border-left: 4px solid #0ea5a4 !important;
}

.hr-payroll-batch-review-panel {
  color: inherit;
  border-left: 4px solid #7c3aed !important;
}

.hr-payroll-employee-reference {
  border-left: 4px solid #2563eb !important;
}

.hr-payroll-record-filter-panel {
  padding: 1rem !important;
  border-radius: 18px !important;
}

.hr-payroll-table-wrap {
  max-width: 100%;
  border: 1px solid #dce5ee;
  border-radius: 18px;
  background: #f8fafc;
  padding: 0.35rem;
  scrollbar-color: rgba(15, 118, 110, 0.35) transparent;
}

.hr-payroll-records-table {
  border-collapse: separate;
  border-spacing: 0 0.45rem;
  min-width: 900px;
}

.hr-payroll-records-table thead th {
  border: 0;
  background: transparent;
  color: #536176;
  font-size: 0.69rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.hr-payroll-records-table tbody tr.hr-payroll-salary-record-row > td,
.hr-payroll-records-table tbody tr.hr-payroll-record-row > td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.hr-payroll-records-table tbody tr.hr-payroll-salary-record-row > td:first-child,
.hr-payroll-records-table tbody tr.hr-payroll-record-row > td:first-child {
  border-left: 1px solid #e2e8f0;
  border-radius: 14px 0 0 14px;
}

.hr-payroll-records-table tbody tr.hr-payroll-salary-record-row > td:last-child,
.hr-payroll-records-table tbody tr.hr-payroll-record-row > td:last-child {
  border-right: 1px solid #e2e8f0;
  border-radius: 0 14px 14px 0;
}

.hr-payroll-records-table tbody tr.hr-payroll-salary-record-row:hover > td,
.hr-payroll-records-table tbody tr.hr-payroll-record-row:hover > td {
  background: #fbfefe;
  border-color: rgba(14, 165, 164, 0.32);
}

.hr-payroll-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 34px;
  min-height: 34px;
  border-radius: 10px;
}

.hr-payroll-payslip-action {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.45);
}

.hr-payroll-payslip-action:not(:disabled):hover {
  color: #fff;
  background: #0f766e;
  border-color: #0f766e;
}

.hr-payroll-action-label {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
}

.hr-payroll-email-status-section {
  margin-top: 0.25rem;
}

.hr-payroll-email-status-panel {
  border-radius: 18px !important;
}

/* =========================================================
   PAYSLIP PREVIEW MODERNISATION
   The modal remains review-only. Existing preview, close, print,
   tenant branding, employee lookup, and isolated print behaviour stay intact.
   ========================================================= */

.hr-payslip-modal {
  padding: 0;
  background: rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(7px);
}

.hr-payslip-modal-shell {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: #f8fafc;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.32) !important;
}

.hr-payslip-modal-header {
  flex: 0 0 auto;
  border-bottom: 1px solid #e2e8f0 !important;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 164, 0.12), transparent 34%),
    #ffffff !important;
}

.hr-payslip-modal-header h2 {
  color: #10233f;
  font-weight: 800;
}

.hr-payslip-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #eef3f7;
}

.hr-payslip-modal-footer {
  flex: 0 0 auto;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.hr-payslip-document {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid #dce5ee;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.hr-payslip-identity-card {
  border-color: #dce5ee !important;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 164, 0.08), transparent 32%),
    linear-gradient(145deg, #f8fbfc 0%, #ffffff 100%) !important;
}

.hr-payslip-summary-grid > div > div {
  position: relative;
  overflow: hidden;
  border-color: #dce5ee !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbfc 100%);
}

.hr-payslip-summary-grid > div > div::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: rgba(14, 165, 164, 0.07);
}

.hr-payslip-summary-grid > div:last-child > div {
  border-color: rgba(21, 145, 95, 0.32) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eefaf4 100%);
}

.hr-payslip-breakdown-card {
  border-color: #dce5ee !important;
  background: #ffffff;
}

.hr-payslip-earnings-card {
  border-top: 4px solid #0ea5a4 !important;
}

.hr-payslip-deductions-card {
  border-top: 4px solid #f59e0b !important;
}

.hr-payslip-line-item {
  border-color: #e6edf3 !important;
}

.hr-payslip-line-item strong {
  color: #10233f;
  white-space: nowrap;
}

.hr-payslip-confidentiality-note {
  border-color: #dce5ee !important;
  border-left: 4px solid #2563eb !important;
  background: #f7faff !important;
}

@media (min-width: 1500px) {
  .hr-payroll-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .hr-payroll-action-label {
    display: inline;
  }

  .hr-payroll-payslip-action {
    padding-inline: 0.6rem;
  }
}

@media (max-width: 991.98px) {
  .hr-payroll-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-payroll-card-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-payroll-card-heading > .btn,
  .hr-payroll-card-heading > .dashboard-action-btn {
    align-self: flex-start !important;
  }
}

@media (max-width: 767.98px) {
  .hr-payroll-workspace .hr-payroll-card > .card-body {
    padding: 1rem !important;
  }

  .hr-payroll-form-panel,
  .hr-payroll-finalisation-form {
    padding: 0.85rem;
    border-radius: 16px;
  }

  .hr-payroll-salary-records-wrap,
  .hr-payroll-main-records-wrap {
    max-height: 68dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.5rem;
  }

  .hr-payroll-salary-records-wrap .hr-payroll-records-table,
  .hr-payroll-main-records-wrap .hr-payroll-records-table {
    display: block;
    min-width: 0 !important;
    width: 100%;
  }

  .hr-payroll-salary-records-wrap thead,
  .hr-payroll-main-records-wrap thead {
    display: none;
  }

  .hr-payroll-salary-records-wrap tbody,
  .hr-payroll-main-records-wrap tbody {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }

  .hr-payroll-salary-record-row,
  .hr-payroll-record-row {
    display: grid;
    gap: 0;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
  }

  .hr-payroll-records-table tbody tr.hr-payroll-salary-record-row > td,
  .hr-payroll-records-table tbody tr.hr-payroll-record-row > td {
    display: grid;
    grid-template-columns: minmax(92px, 0.38fr) minmax(0, 0.62fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.72rem 0.8rem;
    border: 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
    border-radius: 0 !important;
    text-align: left !important;
    background: #fff;
  }

  .hr-payroll-records-table tbody tr.hr-payroll-salary-record-row > td:last-child,
  .hr-payroll-records-table tbody tr.hr-payroll-record-row > td:last-child {
    border-bottom: 0 !important;
  }

  .hr-payroll-salary-record-row > td::before,
  .hr-payroll-record-row > td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .hr-payroll-salary-record-row > td[data-label="Employee"],
  .hr-payroll-record-row > td[data-label="Employee"] {
    background: #f8fbfc !important;
  }

  .hr-payroll-record-row > td[data-label="Action"] .d-inline-flex,
  .hr-payroll-salary-record-row > td[data-label="Action"] {
    justify-content: flex-start !important;
  }

  .hr-payroll-action-label {
    display: inline;
  }

  .hr-payroll-row-action {
    min-height: 36px;
    padding-inline: 0.6rem;
  }

  .hr-payslip-modal-container {
    max-width: none;
    padding: 0 !important;
  }

  .hr-payslip-modal-shell {
    width: 100% !important;
    height: 100dvh;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .hr-payslip-modal-header,
  .hr-payslip-modal-footer {
    padding: 1rem !important;
  }

  .hr-payslip-modal-content {
    padding: 0.75rem !important;
  }

  .hr-payslip-document {
    padding: 0.85rem;
    border-radius: 16px;
  }
}

@media (max-width: 575.98px) {
  .hr-payroll-summary-scope {
    width: 100%;
    border-radius: 14px;
  }

  .hr-payroll-summary-grid {
    grid-template-columns: 1fr;
  }

  .hr-payroll-summary-tile {
    min-height: 96px;
  }

  .hr-payroll-card-heading .hr-card-heading-main {
    align-items: flex-start;
  }

  .hr-payroll-card-heading .hr-card-heading-icon {
    width: 42px;
    height: 42px;
  }

  .hr-payslip-summary-grid > div {
    width: 100%;
  }
}

/* =========================================================
   PAYROLL EMAIL STATUS MODERNISATION + REFRESH FEEDBACK
   Presentation-only delivery monitoring. Existing status IDs,
   Supabase reads, Resend evidence, tenant filtering, duplicate
   protection, collapse control, and refresh workflow remain intact.
   ========================================================= */

.hr-card-heading-icon--email-status {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.18);
  background: linear-gradient(145deg, #ecfdf5 0%, #dff7f1 100%);
}

.hr-payroll-email-status-panel {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid #dbe7ed !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.1), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.hr-payroll-email-status-heading {
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hr-payroll-email-status-heading .hr-card-heading-main {
  min-width: 0;
}

.hr-payroll-email-status-heading > .btn {
  flex: 0 0 auto;
}

.hr-payroll-email-status-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.hr-payroll-email-status-tile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid #dce6ec;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.88);
}

.hr-payroll-email-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-size: 1rem;
}

.hr-payroll-email-status-tile--pending .hr-payroll-email-status-icon {
  color: #b45309;
  background: #fff7e6;
}

.hr-payroll-email-status-tile--sent .hr-payroll-email-status-icon {
  color: #047857;
  background: #e8f8ef;
}

.hr-payroll-email-status-tile--failed .hr-payroll-email-status-icon {
  color: #b42318;
  background: #fff0ee;
}

.hr-payroll-email-status-tile > div {
  display: grid;
  min-width: 0;
}

.hr-payroll-email-status-label {
  color: #64748b;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hr-payroll-email-status-value {
  color: #10233f;
  font-size: 1.18rem;
  line-height: 1.15;
}

.hr-payroll-email-status-tile small {
  overflow: hidden;
  color: #718096;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-payroll-email-status-collapse {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.hr-payroll-email-status-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hr-payroll-email-status-guidance {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 720px;
  color: #64748b;
  font-size: 0.79rem;
  line-height: 1.5;
}

.hr-payroll-email-status-guidance i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: #0f766e;
}

.hr-payroll-email-status-empty {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px dashed #cbdbe3;
  border-radius: 16px;
  color: #64748b;
  background: rgba(248, 250, 252, 0.9);
}

.hr-payroll-email-status-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #0f766e;
  background: #e8f7f4;
}

.hr-payroll-email-status-empty > div {
  display: grid;
  gap: 0.15rem;
}

.hr-payroll-email-status-empty strong {
  color: #263b53;
  font-size: 0.84rem;
}

.hr-payroll-email-status-empty small {
  font-size: 0.76rem;
}

#payslipEmailLogsTableWrapper.hr-payroll-email-log-wrap {
  max-height: 360px;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border: 1px solid #dce6ec;
  border-radius: 18px;
  background: #f8fafc;
  overscroll-behavior: contain;
}

#payslipEmailLogsTableWrapper .hr-payroll-email-log-table {
  min-width: 760px !important;
  border-collapse: separate;
  border-spacing: 0 0.45rem;
  padding: 0 0.45rem 0.45rem;
}

.hr-payroll-email-log-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.75rem 0.7rem;
  border: 0;
  color: #607089;
  background: #f3f7fa;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hr-payroll-email-log-row > td {
  padding: 0.82rem 0.7rem;
  border-top: 1px solid #e1e8ee;
  border-bottom: 1px solid #e1e8ee;
  background: #ffffff;
  font-size: 0.79rem;
}

.hr-payroll-email-log-row > td:first-child {
  border-left: 1px solid #e1e8ee;
  border-radius: 13px 0 0 13px;
}

.hr-payroll-email-log-row > td:last-child {
  border-right: 1px solid #e1e8ee;
  border-radius: 0 13px 13px 0;
}

.hr-payroll-email-recipient {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.hr-payroll-email-recipient-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #0f766e;
  background: #e8f7f4;
}

.hr-payroll-email-cycle {
  font-weight: 700;
  color: #31445b;
}

.hr-payroll-email-delivery-note {
  color: #53657a;
  line-height: 1.45;
}

.hr-payroll-email-protection-row > td {
  padding: 0.75rem;
  border: 1px solid #f3d29b;
  border-radius: 13px;
  background: #fffaf0;
}

.hr-payroll-email-log-loading-row > td {
  padding: 1.25rem !important;
  border: 0 !important;
  background: transparent !important;
}

.hr-payroll-email-log-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .hr-payroll-email-status-heading,
  .hr-payroll-email-status-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .hr-payroll-email-status-heading > .btn,
  .hr-payroll-email-status-toolbar > .btn {
    align-self: flex-start;
  }

  .hr-payroll-email-status-summary-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
  }

  #payslipEmailLogsTableWrapper.hr-payroll-email-log-wrap {
    max-height: 440px;
    overflow-x: hidden !important;
    padding: 0.45rem;
  }

  #payslipEmailLogsTableWrapper .hr-payroll-email-log-table,
  #payslipEmailLogsTableWrapper .hr-payroll-email-log-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
    padding: 0;
  }

  #payslipEmailLogsTableWrapper .hr-payroll-email-log-table thead {
    display: none;
  }

  .hr-payroll-email-log-row {
    display: grid;
    gap: 0;
    margin-bottom: 0.55rem;
    overflow: hidden;
    border: 1px solid #dce6ec;
    border-radius: 15px;
    background: #ffffff;
  }

  .hr-payroll-email-log-row:last-child {
    margin-bottom: 0;
  }

  .hr-payroll-email-log-row > td {
    display: grid;
    grid-template-columns: minmax(105px, 0.42fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border: 0 !important;
    border-bottom: 1px solid #edf2f6 !important;
    border-radius: 0 !important;
  }

  .hr-payroll-email-log-row > td:last-child {
    border-bottom: 0 !important;
  }

  .hr-payroll-email-log-row > td::before {
    content: attr(data-label);
    color: #607089;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .hr-payroll-email-recipient {
    align-items: flex-start;
  }

  .hr-payroll-email-protection-row {
    display: block;
    margin-bottom: 0.55rem;
  }

  .hr-payroll-email-protection-row > td {
    display: block;
  }
}

@media (max-width: 575.98px) {
  .hr-payroll-email-status-panel {
    padding: 0.9rem;
    border-radius: 18px !important;
  }

  .hr-payroll-email-status-summary-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .hr-payroll-email-status-tile small {
    white-space: normal;
  }

  .hr-payroll-email-status-heading > .btn,
  .hr-payroll-email-status-toolbar > .btn {
    width: 100%;
  }

  .hr-payroll-email-log-row > td {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }
}

/* =========================================================
   HR REVIEW QUEUE REFINEMENT
   Compact lifecycle disclosure, closed-request audit states,
   and responsive correction-request cards.

   Safety boundary:
   - Presentation only.
   - Existing lifecycle values, tenant filters, role guards, save handlers,
     employee edit flow, leave cancellation RPC, and database records remain.
   ========================================================= */

.hr-review-guidance-disclosure {
  overflow: hidden;
  border: 1px solid rgba(11, 95, 149, 0.16);
  border-left: 4px solid var(--hr-primary-soft);
  border-radius: 16px;
  background: linear-gradient(145deg, #fbfdff 0%, #f6fafc 100%);
}

.hr-review-guidance-disclosure summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.hr-review-guidance-disclosure summary::-webkit-details-marker {
  display: none;
}

.hr-review-guidance-disclosure summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hr-primary-soft) 32%, transparent);
  outline-offset: -3px;
}

.hr-review-guidance-summary-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(11, 95, 149, 0.09);
  color: #0b5f95;
}

.hr-review-guidance-summary-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hr-review-guidance-summary-copy strong {
  color: #16233b;
  font-size: 0.9rem;
}

.hr-review-guidance-summary-copy small {
  color: #667085;
  line-height: 1.4;
}

.hr-review-guidance-summary-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #0b5f95;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.hr-review-guidance-summary-action i {
  transition: transform 0.2s ease;
}

.hr-review-guidance-disclosure[open] .hr-review-guidance-summary-action i {
  transform: rotate(180deg);
}

.hr-review-guidance-disclosure[open] summary {
  border-bottom: 1px solid rgba(11, 95, 149, 0.12);
}

.hr-review-guidance-disclosure[open] .hr-review-guidance-summary-action span {
  font-size: 0;
}

.hr-review-guidance-disclosure[open] .hr-review-guidance-summary-action span::after {
  content: "Hide guidance";
  font-size: 0.74rem;
}

.hr-review-guidance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.9rem 1rem 1rem;
}

.hr-review-guidance-step {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid #e1e8ef;
  border-radius: 13px;
  background: #ffffff;
}

.hr-review-guidance-step .badge {
  margin-bottom: 0.55rem;
}

.hr-review-guidance-step p {
  margin: 0;
  color: #667085;
  font-size: 0.75rem;
  line-height: 1.48;
}

.hr-review-request-row--closed {
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.88), #ffffff 36%);
}

.hr-review-request-action-cell {
  min-width: 260px;
}

.hr-review-closed-audit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid rgba(25, 135, 84, 0.16);
  border-radius: 14px;
  background: rgba(25, 135, 84, 0.055);
}

.hr-review-closed-audit-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #ffffff;
  color: #198754;
  box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.14);
}

.hr-review-closed-audit-label {
  display: block;
  margin-bottom: 0.16rem;
  color: #667085;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.hr-review-closed-audit strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #146c43;
  font-size: 0.82rem;
}

.hr-review-closed-audit p {
  margin: 0;
  color: #667085;
  font-size: 0.74rem;
  line-height: 1.45;
}

.hr-review-closed-action-badge {
  white-space: normal;
  line-height: 1.3;
}

@media (max-width: 991.98px) {
  .hr-review-guidance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .hr-review-guidance-summary-action span {
    display: none;
  }

  .hr-review-guidance-disclosure[open] .hr-review-guidance-summary-action span::after {
    content: none;
  }

  .hr-review-guidance-grid {
    grid-template-columns: 1fr;
  }

  #profileCorrectionRequestsTableWrapper.hr-review-table-wrap {
    max-height: min(68vh, 620px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0;
    background: transparent;
  }

  #profileCorrectionRequestsTableWrapper table,
  #profileCorrectionRequestsTableWrapper tbody,
  #profileCorrectionRequestsTableWrapper tr,
  #profileCorrectionRequestsTableWrapper td {
    display: block;
    width: 100%;
  }

  #profileCorrectionRequestsTableWrapper table {
    min-width: 0 !important;
  }

  #profileCorrectionRequestsTableWrapper thead {
    display: none;
  }

  #profileCorrectionRequestsTableWrapper tbody {
    display: grid;
    gap: 0.85rem;
  }

  #profileCorrectionRequestsTableWrapper .hr-review-request-row {
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  }

  #profileCorrectionRequestsTableWrapper .hr-review-request-row--closed {
    background: linear-gradient(180deg, #fbfdfc 0%, #ffffff 100%);
  }

  #profileCorrectionRequestsTableWrapper td {
    position: relative;
    padding: 0.85rem 0.9rem 0.85rem 7.1rem !important;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    min-height: 48px;
    white-space: normal !important;
  }

  #profileCorrectionRequestsTableWrapper td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.9rem;
    top: 0.92rem;
    width: 5.65rem;
    color: #667085;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  #profileCorrectionRequestsTableWrapper td:last-child {
    border-bottom: 0;
  }

  #profileCorrectionRequestsTableWrapper .hr-review-request-action-cell {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .hr-review-guidance-disclosure summary {
    align-items: flex-start;
  }

  #profileCorrectionRequestsTableWrapper td {
    padding: 2.15rem 0.85rem 0.85rem !important;
  }

  #profileCorrectionRequestsTableWrapper td::before {
    top: 0.72rem;
    width: auto;
  }
}

/* =========================================================
   SETUP WORKSPACE MODERNISATION - STEP 1

   Presentation-only redesign for the complete Setup workspace.

   Product rules:
   - Group headers keep one restrained icon per setup category.
   - Individual setup cards use typography, a slim accent rail, and spacing
     instead of repeating a large icon on every card.
   - Existing IDs, forms, buttons, collapse controls, access rules, Supabase
     queries, tenant filters, save/edit handlers, and record renderers remain
     unchanged.
   - Every setup records area receives the same desktop table, empty-state,
     contained-scroll, and mobile stacked-card treatment.
   ========================================================= */

#hrSetupSection {
  --setup-line: color-mix(in srgb, var(--hr-primary) 14%, #dbe4ec);
  --setup-line-strong: color-mix(in srgb, var(--hr-primary) 24%, #cbd8e3);
  --setup-soft: color-mix(in srgb, var(--hr-primary) 4%, #ffffff);
  --setup-soft-strong: color-mix(in srgb, var(--hr-primary) 8%, #ffffff);
  --setup-ink: #14213d;
  --setup-muted: #667085;
}

/* Setup overview: one calm orientation card, without another large icon. */
#hrSetupLandingCard {
  overflow: hidden;
  border: 1px solid var(--setup-line) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--hr-primary) 10%, transparent), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, var(--setup-soft) 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
}

#hrSetupLandingCard > .card-body {
  padding: clamp(1.35rem, 2vw, 2rem) !important;
}

#hrSetupLandingCard > .card-body > .mb-4 {
  max-width: 760px;
  margin-bottom: 1.25rem !important;
}

#hrSetupLandingCard .section-heading::before {
  content: "Configuration map";
  display: block;
  margin-bottom: 0.32rem;
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#hrSetupLandingCard .row:has(.summary-tile) {
  counter-reset: setup-overview-item;
}

#hrSetupLandingCard .summary-tile {
  counter-increment: setup-overview-item;
  position: relative;
  min-height: 104px;
  padding: 1rem 1rem 1rem 3.65rem !important;
  border: 1px solid var(--setup-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#hrSetupLandingCard .summary-tile::before {
  content: counter(setup-overview-item, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--hr-primary-dark);
  background: var(--setup-soft-strong);
  box-shadow: inset 0 0 0 1px var(--setup-line);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#hrSetupLandingCard .summary-tile-label {
  color: var(--setup-muted) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#hrSetupLandingCard .summary-tile-value {
  margin-top: 0.35rem;
  color: var(--setup-ink) !important;
  font-size: 0.98rem !important;
  line-height: 1.35;
}

/* Category bands: this is the only repeated large-icon layer in Setup. */
#setupOrganizationGroupHeader,
#setupPayrollGroupHeader,
#setupPaymentGroupHeader,
#setupCommunicationGroupHeader {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0.35rem;
  margin-bottom: 0.85rem !important;
}

#setupOrganizationGroupHeader > .card-body,
#setupPayrollGroupHeader > .card-body,
#setupPaymentGroupHeader > .card-body,
#setupCommunicationGroupHeader > .card-body {
  padding: 0 !important;
}

#setupOrganizationGroupHeader .hr-card-heading,
#setupPayrollGroupHeader .hr-card-heading,
#setupPaymentGroupHeader .hr-card-heading,
#setupCommunicationGroupHeader .hr-card-heading {
  min-height: 76px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--setup-line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, var(--setup-soft) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

#setupOrganizationGroupHeader .section-heading,
#setupPayrollGroupHeader .section-heading,
#setupPaymentGroupHeader .section-heading,
#setupCommunicationGroupHeader .section-heading {
  color: var(--setup-ink);
  font-size: 1rem;
}

#setupOrganizationGroupHeader .section-subtext,
#setupPayrollGroupHeader .section-subtext,
#setupPaymentGroupHeader .section-subtext,
#setupCommunicationGroupHeader .section-subtext {
  max-width: 820px;
  color: var(--setup-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Individual configuration cards: no repeated title icon. */
#hrSetupSection section:has(#organizationSettingsCardCollapse),
#hrSetupSection section:has(#payrollAllowanceCardCollapse),
#hrSetupSection section:has(#payrollStatutoryCardCollapse),
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse),
#hrSetupSection section:has(#bankDirectoryCardCollapse),
#hrSetupSection section:has(#employeeBankDetailsCardCollapse),
#hrSetupSection #hrp85EmailIntegrationCard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--setup-line) !important;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.065) !important;
}

#hrSetupSection section:has(#organizationSettingsCardCollapse)::before,
#hrSetupSection section:has(#payrollAllowanceCardCollapse)::before,
#hrSetupSection section:has(#payrollStatutoryCardCollapse)::before,
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse)::before,
#hrSetupSection section:has(#bankDirectoryCardCollapse)::before,
#hrSetupSection section:has(#employeeBankDetailsCardCollapse)::before,
#hrSetupSection #hrp85EmailIntegrationCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--hr-primary) 0%, var(--hr-primary-soft) 100%);
  opacity: 0.9;
}

#hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body,
#hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body,
#hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body,
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body,
#hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body,
#hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body,
#hrSetupSection #hrp85EmailIntegrationCard > .card-body {
  padding: clamp(1.25rem, 2vw, 1.85rem) !important;
}

#hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body > :first-child,
#hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body > :first-child,
#hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body > :first-child,
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body > :first-child,
#hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body > :first-child,
#hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body > :first-child,
#hrSetupSection #hrp85EmailIntegrationCard > .card-body > :first-child {
  margin-bottom: 0 !important;
  padding-left: 0.8rem;
}

#hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body > :first-child .section-heading::before,
#hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body > :first-child .section-heading::before,
#hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body > :first-child .section-heading::before,
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body > :first-child .section-heading::before,
#hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body > :first-child .section-heading::before,
#hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body > :first-child .section-heading::before,
#hrSetupSection #hrp85EmailIntegrationCard > .card-body > :first-child .section-heading::before {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--hr-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body > :first-child .section-heading::before {
  content: "Organisation profile";
}

#hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body > :first-child .section-heading::before {
  content: "Compensation rules";
}

#hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body > :first-child .section-heading::before {
  content: "Payroll controls";
}

#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body > :first-child .section-heading::before {
  content: "Exception governance";
}

#hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body > :first-child .section-heading::before {
  content: "Payment reference";
}

#hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body > :first-child .section-heading::before {
  content: "Employee payments";
}

#hrSetupSection #hrp85EmailIntegrationCard > .card-body > :first-child .section-heading::before {
  content: "Communication health";
}

#hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body > :first-child .section-heading,
#hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body > :first-child .section-heading,
#hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body > :first-child .section-heading,
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body > :first-child .section-heading,
#hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body > :first-child .section-heading,
#hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body > :first-child .section-heading,
#hrSetupSection #hrp85EmailIntegrationCard > .card-body > :first-child .section-heading {
  color: var(--setup-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

#hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body > :first-child .section-subtext,
#hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body > :first-child .section-subtext,
#hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body > :first-child .section-subtext,
#hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body > :first-child .section-subtext,
#hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body > :first-child .section-subtext,
#hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body > :first-child .section-subtext,
#hrSetupSection #hrp85EmailIntegrationCard > .card-body > :first-child .section-subtext {
  max-width: 780px;
  color: var(--setup-muted);
  line-height: 1.55;
}

/* Expanded content begins as one controlled workspace beneath its heading. */
#organizationSettingsCardCollapse,
#payrollAllowanceCardCollapse,
#payrollStatutoryCardCollapse,
#payrollEmployeeOverrideCardCollapse,
#bankDirectoryCardCollapse,
#employeeBankDetailsCardCollapse,
#hrp85EmailIntegrationCardCollapse {
  margin-top: 1.25rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--setup-line);
}

/* Forms use one quiet surface rather than many competing decorative cards. */
#hrSetupSection :is(
  #organizationSettingsForm,
  #organizationDepartmentForm,
  #organizationJobTitleForm,
  #payrollAllowanceCreateForm,
  #payrollStatutoryCreateForm,
  #payrollOtherDeductionCreateForm,
  #payrollEmployeeOverrideCreateForm,
  #bankDirectoryForm,
  #employeeBankDetailsForm,
  #hrp85EmailIntegrationForm
) {
  border: 1px solid var(--setup-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--hr-primary) 2.5%, #ffffff) 100%);
  padding: clamp(1rem, 1.6vw, 1.35rem);
}

#hrSetupSection :is(
  #organizationSettingsForm,
  #organizationDepartmentForm,
  #organizationJobTitleForm,
  #payrollAllowanceCreateForm,
  #payrollStatutoryCreateForm,
  #payrollOtherDeductionCreateForm,
  #payrollEmployeeOverrideCreateForm,
  #bankDirectoryForm,
  #employeeBankDetailsForm,
  #hrp85EmailIntegrationForm
) .form-label {
  color: #344054;
  font-size: 0.82rem;
}

#hrSetupSection :is(
  #organizationSettingsForm,
  #organizationDepartmentForm,
  #organizationJobTitleForm,
  #payrollAllowanceCreateForm,
  #payrollStatutoryCreateForm,
  #payrollOtherDeductionCreateForm,
  #payrollEmployeeOverrideCreateForm,
  #bankDirectoryForm,
  #employeeBankDetailsForm,
  #hrp85EmailIntegrationForm
) :is(.form-control, .form-select) {
  min-height: 46px;
  border-radius: 13px;
  border-color: var(--setup-line-strong);
  background-color: #ffffff;
}

#hrSetupSection :is(
  #organizationSettingsForm,
  #organizationDepartmentForm,
  #organizationJobTitleForm,
  #payrollAllowanceCreateForm,
  #payrollStatutoryCreateForm,
  #payrollOtherDeductionCreateForm,
  #payrollEmployeeOverrideCreateForm,
  #bankDirectoryForm,
  #employeeBankDetailsForm,
  #hrp85EmailIntegrationForm
) :is(.form-control, .form-select):focus {
  border-color: var(--hr-primary-soft);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--hr-primary) 12%, transparent);
}

/* Normalize internal setup panels and record headings. */
#hrSetupSection :is(
  #payrollStatutoryCardCollapse,
  #payrollOtherDeductionCardCollapse,
  #payrollEmployeeOverrideCardCollapse,
  #hrp85EmailIntegrationCardCollapse
) > .border.rounded-4,
#hrSetupSection #hrp85EmailIntegrationCardCollapse .border.rounded-4.bg-white {
  border-color: var(--setup-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85RecipientsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) {
  max-height: 430px;
  overflow: auto !important;
  overscroll-behavior: contain;
  border: 1px solid var(--setup-line) !important;
  border-radius: 18px !important;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--hr-primary) 24%, transparent) transparent;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85RecipientsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85RecipientsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hr-primary) 28%, transparent);
  background-clip: padding-box;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) table {
  width: 100%;
  margin: 0;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) thead th {
  padding: 0.78rem 0.85rem !important;
  border-bottom: 1px solid var(--setup-line-strong) !important;
  background: #f4f8fb !important;
  color: #475467 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) tbody td {
  padding: 0.85rem !important;
  border-color: #edf1f5 !important;
  color: #344054;
  font-size: 0.8rem;
  line-height: 1.45;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) tbody tr {
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) tbody tr:hover {
  background: var(--setup-soft);
}

#hrSetupSection :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper,
  #payrollAllowanceRecordsTableWrapper,
  #payrollStatutoryRecordsTableWrapper,
  #payrollOtherDeductionRecordsTableWrapper,
  #payrollEmployeeOverrideRecordsTableWrapper,
  #bankDirectoryTableWrapper,
  #employeeBankDetailsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) tbody .btn-sm {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
}

/* Approved recipients are already card-rendered; polish without turning them into another table. */
#hrp85RecipientsTableWrapper {
  padding: 0.65rem;
  background: var(--setup-soft);
}

#hrp85RecipientsTableWrapper table {
  min-width: 0 !important;
}

#hrp85RecipientsTableWrapper td > .border {
  border-color: var(--setup-line) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

/* Present and absent record states use one restrained visual language. */
#hrSetupSection :is(
  #organizationDepartmentsEmptyState,
  #organizationJobTitlesEmptyState,
  #payrollAllowanceRecordsEmptyState,
  #payrollStatutoryRecordsEmptyState,
  #payrollOtherDeductionRecordsEmptyState,
  #payrollEmployeeOverrideRecordsEmptyState,
  #bankDirectoryEmptyState,
  #employeeBankDetailsEmptyState,
  #hrp85RecipientsEmptyState,
  #hrp85DeliveryLogsEmptyState
) {
  position: relative;
  min-height: 74px;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 1rem 1.1rem 1rem 2.35rem !important;
  border: 1px dashed var(--setup-line-strong) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, #ffffff 0%, var(--setup-soft) 100%) !important;
  color: var(--setup-muted) !important;
  text-align: left !important;
  font-size: 0.82rem;
  line-height: 1.5;
}

#hrSetupSection :is(
  #organizationDepartmentsEmptyState,
  #organizationJobTitlesEmptyState,
  #payrollAllowanceRecordsEmptyState,
  #payrollStatutoryRecordsEmptyState,
  #payrollOtherDeductionRecordsEmptyState,
  #payrollEmployeeOverrideRecordsEmptyState,
  #bankDirectoryEmptyState,
  #employeeBankDetailsEmptyState,
  #hrp85RecipientsEmptyState,
  #hrp85DeliveryLogsEmptyState
)::before {
  content: "";
  position: absolute;
  left: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--hr-primary-soft);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hr-primary) 8%, transparent);
}

/* Record section headings lose old mixed borders/backgrounds and share one hierarchy. */
#hrSetupSection :is(
  #payrollAllowanceRecordsHeader,
  #payrollStatutoryRecordsHeader,
  #payrollOtherDeductionRecordsHeader,
  #payrollEmployeeOverrideRecordsHeader,
  #bankDirectoryRecordsHeader,
  #employeeBankDetailsRecordsHeader
) {
  padding: 0.9rem 1rem !important;
  border: 1px solid var(--setup-line) !important;
  border-radius: 16px !important;
  background: var(--setup-soft) !important;
  box-shadow: none !important;
}

#hrSetupSection :is(
  #payrollAllowanceRecordsHeader,
  #payrollStatutoryRecordsHeader,
  #payrollOtherDeductionRecordsHeader,
  #payrollEmployeeOverrideRecordsHeader,
  #bankDirectoryRecordsHeader,
  #employeeBankDetailsRecordsHeader
) :is(h3, .h5, .h6) {
  color: var(--setup-ink);
}

/* Mobile/tablet records become readable stacked cards without horizontal page expansion. */
@media (max-width: 991.98px) {
  #hrSetupLandingCard .row:has(.summary-tile) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body > :first-child,
  #hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body > :first-child,
  #hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body > :first-child,
  #hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body > :first-child,
  #hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body > :first-child,
  #hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body > :first-child,
  #hrSetupSection #hrp85EmailIntegrationCard > .card-body > :first-child {
    align-items: flex-start !important;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) {
    max-height: 520px;
    padding: 0.7rem;
    overflow-x: hidden !important;
    background: #f6f9fb;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) :is(table, tbody, tr, td) {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) thead {
    display: none;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) tbody tr {
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid var(--setup-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) tbody tr:last-child {
    margin-bottom: 0;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) tbody td:not([colspan]) {
    display: grid;
    grid-template-columns: minmax(108px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid #edf1f5 !important;
    overflow-wrap: anywhere;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) tbody td:not([colspan])::before {
    color: #667085;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) tbody td:last-child {
    border-bottom: 0 !important;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper
  ) tbody td:last-child {
    justify-items: start;
    text-align: left !important;
  }

  /* Department records */
  #organizationDepartmentsTableWrapper td:nth-child(1)::before { content: "Department"; }
  #organizationDepartmentsTableWrapper td:nth-child(2)::before { content: "Status"; }
  #organizationDepartmentsTableWrapper td:nth-child(3)::before { content: "Updated"; }
  #organizationDepartmentsTableWrapper td:nth-child(4)::before { content: "Action"; }

  /* Job title records */
  #organizationJobTitlesTableWrapper td:nth-child(1)::before { content: "Job title"; }
  #organizationJobTitlesTableWrapper td:nth-child(2)::before { content: "Department"; }
  #organizationJobTitlesTableWrapper td:nth-child(3)::before { content: "Status"; }
  #organizationJobTitlesTableWrapper td:nth-child(4)::before { content: "Updated"; }
  #organizationJobTitlesTableWrapper td:nth-child(5)::before { content: "Action"; }

  /* Allowance records */
  #payrollAllowanceRecordsTableWrapper td:nth-child(1)::before { content: "Salary setup"; }
  #payrollAllowanceRecordsTableWrapper td:nth-child(2)::before { content: "Type"; }
  #payrollAllowanceRecordsTableWrapper td:nth-child(3)::before { content: "Amount"; }
  #payrollAllowanceRecordsTableWrapper td:nth-child(4)::before { content: "Effective"; }
  #payrollAllowanceRecordsTableWrapper td:nth-child(5)::before { content: "Status"; }
  #payrollAllowanceRecordsTableWrapper td:nth-child(6)::before { content: "Updated"; }
  #payrollAllowanceRecordsTableWrapper td:nth-child(7)::before { content: "Action"; }

  /* Statutory deduction records */
  #payrollStatutoryRecordsTableWrapper td:nth-child(1)::before { content: "Salary setup"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(2)::before { content: "Type"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(3)::before { content: "Method"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(4)::before { content: "Value"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(5)::before { content: "Source"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(6)::before { content: "Effective"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(7)::before { content: "Status"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(8)::before { content: "Updated"; }
  #payrollStatutoryRecordsTableWrapper td:nth-child(9)::before { content: "Action"; }

  /* Other deduction records */
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(1)::before { content: "Salary setup"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(2)::before { content: "Type"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(3)::before { content: "Amount"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(4)::before { content: "Duration"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(5)::before { content: "Total"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(6)::before { content: "Start"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(7)::before { content: "Status"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(8)::before { content: "Updated"; }
  #payrollOtherDeductionRecordsTableWrapper td:nth-child(9)::before { content: "Action"; }

  /* Employee override records */
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(1)::before { content: "Salary setup"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(2)::before { content: "Category"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(3)::before { content: "Element"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(4)::before { content: "Method"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(5)::before { content: "Override"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(6)::before { content: "Effective"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(7)::before { content: "Status"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(8)::before { content: "Updated"; }
  #payrollEmployeeOverrideRecordsTableWrapper td:nth-child(9)::before { content: "Action"; }

  /* Bank directory */
  #bankDirectoryTableWrapper td:nth-child(1)::before { content: "Bank name"; }
  #bankDirectoryTableWrapper td:nth-child(2)::before { content: "Bank code"; }
  #bankDirectoryTableWrapper td:nth-child(3)::before { content: "Status"; }
  #bankDirectoryTableWrapper td:nth-child(4)::before { content: "Action"; }

  /* Employee bank records */
  #employeeBankDetailsTableWrapper td:nth-child(1)::before { content: "Employee"; }
  #employeeBankDetailsTableWrapper td:nth-child(2)::before { content: "Bank"; }
  #employeeBankDetailsTableWrapper td:nth-child(3)::before { content: "Bank code"; }
  #employeeBankDetailsTableWrapper td:nth-child(4)::before { content: "Account number"; }
  #employeeBankDetailsTableWrapper td:nth-child(5)::before { content: "Account name"; }
  #employeeBankDetailsTableWrapper td:nth-child(6)::before { content: "Status"; }
  #employeeBankDetailsTableWrapper td:nth-child(7)::before { content: "Action"; }

  /* Email validation history */
  #hrp85DeliveryLogsTableWrapper td:nth-child(1)::before { content: "Recipient"; }
  #hrp85DeliveryLogsTableWrapper td:nth-child(2)::before { content: "Outcome"; }
  #hrp85DeliveryLogsTableWrapper td:nth-child(3)::before { content: "Sent on"; }
  #hrp85DeliveryLogsTableWrapper td:nth-child(4)::before { content: "Outcome note"; }
}

@media (max-width: 575.98px) {
  #hrSetupLandingCard .row:has(.summary-tile) {
    grid-template-columns: 1fr !important;
  }

  #hrSetupLandingCard .summary-tile {
    min-height: 92px;
  }

  #hrSetupSection section:has(#organizationSettingsCardCollapse) > .card-body,
  #hrSetupSection section:has(#payrollAllowanceCardCollapse) > .card-body,
  #hrSetupSection section:has(#payrollStatutoryCardCollapse) > .card-body,
  #hrSetupSection section:has(#payrollEmployeeOverrideCardCollapse) > .card-body,
  #hrSetupSection section:has(#bankDirectoryCardCollapse) > .card-body,
  #hrSetupSection section:has(#employeeBankDetailsCardCollapse) > .card-body,
  #hrSetupSection #hrp85EmailIntegrationCard > .card-body {
    padding: 1rem !important;
  }

  #hrSetupSection :is(
    #organizationSettingsForm,
    #organizationDepartmentForm,
    #organizationJobTitleForm,
    #payrollAllowanceCreateForm,
    #payrollStatutoryCreateForm,
    #payrollOtherDeductionCreateForm,
    #payrollEmployeeOverrideCreateForm,
    #bankDirectoryForm,
    #employeeBankDetailsForm,
    #hrp85EmailIntegrationForm
  ) {
    padding: 0.9rem;
    border-radius: 15px;
  }

  #hrSetupSection :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper,
    #payrollAllowanceRecordsTableWrapper,
    #payrollStatutoryRecordsTableWrapper,
    #payrollOtherDeductionRecordsTableWrapper,
    #payrollEmployeeOverrideRecordsTableWrapper,
    #bankDirectoryTableWrapper,
    #employeeBankDetailsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) tbody td:not([colspan]) {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}
/* =========================================================
   SETUP PRIMARY SUMMARY REFINEMENT - STEP 1
   Modernise the two high-value Setup summaries without turning
   every configuration panel into an icon-heavy card.

   Scope:
   - Manage Organization header and summary;
   - Email Integration header and summary;
   - existing IDs, forms, permissions, data loading, and save logic stay intact.
   ========================================================= */

#hrSetupSection .hr-setup-primary-heading {
  align-items: flex-start;
  gap: 1rem;
}

#hrSetupSection .hr-setup-primary-heading .hr-card-heading-main {
  min-width: 0;
}

#hrSetupSection .hr-setup-primary-heading .section-heading::before {
  content: none !important;
  display: none !important;
}

#hrSetupSection .hr-setup-card-kicker {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--hr-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#hrSetupSection .hr-card-heading-icon--communication {
  color: #0f766e;
  background: linear-gradient(145deg, #ecfdf5 0%, #dff8f3 100%);
  border-color: rgba(15, 118, 110, 0.16);
}

#hrSetupSection .hr-setup-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

#hrSetupSection .hr-setup-summary-tile {
  --setup-summary-accent: var(--hr-primary);
  --setup-summary-soft: color-mix(in srgb, var(--hr-primary) 10%, #ffffff);
  position: relative;
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 92px;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--setup-summary-accent) 20%, #dbe5ec);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 100%, var(--setup-summary-soft) 0 22%, transparent 23%),
    linear-gradient(150deg, #ffffff 0%, color-mix(in srgb, var(--setup-summary-accent) 3%, #ffffff) 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

#hrSetupSection .hr-setup-summary-tile::before {
  content: "";
  position: absolute;
  inset-block: 0.85rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--setup-summary-accent);
}

#hrSetupSection .hr-setup-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 13px;
  color: var(--setup-summary-accent);
  background: var(--setup-summary-soft);
  font-size: 1rem;
}

#hrSetupSection .hr-setup-summary-label,
#hrSetupSection .hr-setup-summary-value {
  display: block;
  min-width: 0;
}

#hrSetupSection .hr-setup-summary-label {
  margin-bottom: 0.24rem;
  color: #667085;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

#hrSetupSection .hr-setup-summary-value {
  overflow-wrap: anywhere;
  color: #101828;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

#hrSetupSection .hr-setup-summary-tile--currency,
#hrSetupSection .hr-setup-summary-tile--provider,
#hrSetupSection .hr-setup-summary-tile--result {
  --setup-summary-accent: #0284c7;
  --setup-summary-soft: #eaf7ff;
}

#hrSetupSection .hr-setup-summary-tile--cycle,
#hrSetupSection .hr-setup-summary-tile--history {
  --setup-summary-accent: #7c3aed;
  --setup-summary-soft: #f2edff;
}

#hrSetupSection .hr-setup-summary-tile--status,
#hrSetupSection .hr-setup-summary-tile--recipients {
  --setup-summary-accent: #059669;
  --setup-summary-soft: #e8f8f1;
}

@media (max-width: 1199.98px) {
  #hrSetupSection .hr-setup-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #hrSetupSection .hr-setup-primary-heading {
    flex-direction: column;
  }

  #hrSetupSection .hr-setup-primary-heading > :last-child {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  #hrSetupSection .hr-setup-summary-grid {
    grid-template-columns: 1fr;
  }

  #hrSetupSection .hr-setup-summary-tile {
    min-height: 84px;
  }
}

/* =========================================================
   HR SELF-SERVICE WORKSPACE MODERNISATION - STEP 1

   Presentation only:
   - existing ss* IDs remain unchanged;
   - employee-self-service.js remains the data/workflow owner;
   - leave, payroll, payslip, employee, tenant, and Supabase logic are untouched;
   - the shared dashboard toast is reused by hr-dashboard.js.
   ========================================================= */

body.bexhr-hr-visual-refresh #hrSelfServiceSection {
  --ss-blue: #0e7490;
  --ss-blue-soft: #e8f8fb;
  --ss-green: #15803d;
  --ss-green-soft: #eaf8ef;
  --ss-violet: #6d28d9;
  --ss-violet-soft: #f2ecff;
  --ss-amber: #b45309;
  --ss-amber-soft: #fff4df;
  --ss-slate: #475569;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.82) !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.075), transparent 32%),
    #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.065) !important;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card::before,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #0f9f9a 0%, #38bdf8 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card {
  background:
    radial-gradient(circle at 88% 18%, rgba(56, 189, 248, 0.14), transparent 25%),
    radial-gradient(circle at 70% 100%, rgba(20, 184, 166, 0.1), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fcfd 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-heading,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card-heading {
  align-items: center;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-kicker {
  display: block;
  margin-bottom: 0.32rem;
  color: #07857f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-balance,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-decision,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-request,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-history,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-payroll,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-history-payroll {
  border: 1px solid rgba(14, 116, 144, 0.16);
  color: var(--ss-blue);
  background: linear-gradient(145deg, #ecfeff 0%, #e0f2fe 100%);
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.1);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-decision,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-history {
  border-color: rgba(109, 40, 217, 0.14);
  color: var(--ss-violet);
  background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-request,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-balance {
  border-color: rgba(21, 128, 61, 0.14);
  color: var(--ss-green);
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-payroll,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-icon--self-service-history-payroll {
  border-color: rgba(180, 83, 9, 0.14);
  color: var(--ss-amber);
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-actions,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-left: auto;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-actions {
  padding: 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-actions .btn {
  min-height: 40px;
  border-radius: 12px;
  padding-inline: 1rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card-toolbar .btn {
  min-height: 38px;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-empty-state {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border: 1px dashed rgba(148, 163, 184, 0.46);
  border-radius: 16px;
  color: #64748b !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
  text-align: center;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-empty-state::before {
  content: "i";
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 0.65rem;
  border-radius: 10px;
  color: #0e7490;
  background: #e6f7fa;
  font-family: "Inter", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
}

/* Leave balance records: covers present, empty, and loading output produced by EmployeeSelfService. */
body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveBalancesGrid > [class*="col-"] {
  display: flex;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveBalancesGrid .info-tile,
body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveBalancesGrid .leave-entitlement-tile {
  width: 100%;
  min-height: 190px;
  padding: 1.15rem;
  border: 1px solid rgba(21, 128, 61, 0.17);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.11), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%);
  box-shadow: 0 12px 26px rgba(21, 128, 61, 0.065);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveBalancesGrid .badge {
  border-radius: 999px;
  padding: 0.38rem 0.62rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveBalancesGrid .progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.1);
}

/* Latest decision record, including the richer cancelled/approved render from the module. */
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content > .info-tile,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content > .border,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content > [class*="rounded"] {
  border: 1px solid rgba(109, 40, 217, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.09), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 100%) !important;
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.06);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content .info-tile-label,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content .text-secondary {
  color: #64748b !important;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content .row > [class*="col-"] > div,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-decision-content .d-grid > div {
  border-radius: 14px;
}

/* Leave request form. */
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-request-card .form-control,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-request-card .form-select {
  min-height: 48px;
  border-color: #d8e2eb;
  background-color: #ffffff;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-request-card textarea.form-control {
  min-height: 118px;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-request-card .form-control:focus,
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-request-card .form-select:focus {
  border-color: rgba(14, 116, 144, 0.72);
  box-shadow: 0 0 0 0.22rem rgba(14, 116, 144, 0.11);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-workflow-note {
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 16px;
  color: #475569;
  background: linear-gradient(135deg, #f0fdfa 0%, #f0f9ff 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-workflow-note .bi {
  color: #0e7490 !important;
}

/* Leave history records generated by employee-self-service.js. */
body.bexhr-hr-visual-refresh #hrSelfServiceSection .employee-leave-history-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 116, 144, 0.32) rgba(148, 163, 184, 0.08);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .employee-leave-history-scroll-area::-webkit-scrollbar {
  width: 8px;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .employee-leave-history-scroll-area::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.3);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList {
  display: grid;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList > .card,
body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList > .border,
body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList > [class*="rounded"] {
  margin: 0 !important;
  padding: 1rem !important;
  border: 1px solid rgba(148, 163, 184, 0.27) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.065), transparent 28%),
    #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList .badge {
  border-radius: 999px;
  padding: 0.38rem 0.58rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList .bg-light,
body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssLeaveRequestsList .bg-light-subtle {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px !important;
  background: #f8fafc !important;
}

/* Current payslip summary. */
body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid > [class*="col-"] {
  display: flex;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
  position: relative;
  width: 100%;
  min-height: 132px;
  padding: 1.05rem 1.05rem 1.05rem 4.25rem;
  border: 1px solid rgba(180, 83, 9, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #fffcf5 100%);
  box-shadow: 0 10px 24px rgba(180, 83, 9, 0.055);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile .d-flex {
  display: block !important;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile .bi {
  position: absolute;
  top: 1.05rem;
  left: 1.05rem;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #b45309 !important;
  background: #fff3d6;
  font-size: 1.05rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile-value {
  margin-top: 0.35rem;
  color: #0f172a;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 800;
}

/* PAYROLL SUMMARY FINANCIAL FIGURE CLARITY - STEP 1
   Keep currency codes and digits together, while preserving the shared
   self-service module's authorised-record and hide/show behaviour. */
body.dashboard-page #ssCurrentPayrollSummaryGrid .ss-payroll-financial-value {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.025em;
}

/* Standard desktop widths have less usable space after the fixed sidebar.
   Keep the self-service summary in a stable two-by-two layout until a wide
   desktop can comfortably hold all four values on one row. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  body.dashboard-page #ssCurrentPayrollSummaryGrid > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* Payroll record filters and records. */
body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-filter-panel {
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 17px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdfa 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-filter-panel .form-control {
  min-height: 46px;
  border-color: #d8e2eb;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records {
  max-height: 460px !important;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 18px;
  background: #ffffff;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records table {
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0 8px;
  padding: 0 0.45rem 0.45rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.78rem 0.7rem;
  border: 0;
  color: #64748b;
  background: #f1f5f9;
  font-size: 0.68rem !important;
  letter-spacing: 0.055em;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody tr {
  filter: drop-shadow(0 5px 12px rgba(15, 23, 42, 0.035));
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td {
  padding: 0.88rem 0.7rem;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  color: #334155;
  background: #ffffff;
  font-size: 0.82rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:first-child {
  border-left: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px 0 0 14px;
  color: #0f172a;
  font-weight: 700;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:last-child {
  border-right: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0 14px 14px 0;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records .btn {
  min-width: 36px;
  min-height: 34px;
  border-radius: 10px;
}

/* Keep the existing notification useful on narrow Self-Service screens. */
body.bexhr-hr-visual-refresh #dashboardToast .card {
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .ss-leave-main-row {
    row-gap: 1rem !important;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .employee-leave-history-scroll-area {
    max-height: 560px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0.25rem !important;
  }
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-heading,
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card-heading {
    align-items: flex-start;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-actions,
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card-toolbar {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records {
    max-height: 620px !important;
    overflow-x: hidden !important;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    padding: 0.55rem;
    border-spacing: 0;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records thead {
    display: none;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody,
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tr,
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records td {
    display: block;
    width: 100%;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody {
    display: grid;
    gap: 0.8rem;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody tr {
    overflow: hidden;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 17px;
    background: #ffffff;
    filter: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td {
    display: grid;
    grid-template-columns: minmax(108px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
    border-radius: 0 !important;
    text-align: right !important;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:last-child {
    border-bottom: 0 !important;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td::before {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-align: left;
    text-transform: uppercase;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(1)::before { content: "Pay cycle"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(2)::before { content: "Pay date"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(3)::before { content: "Gross pay"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(4)::before { content: "Tax"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(5)::before { content: "Pension"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(6)::before { content: "Deductions"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(7)::before { content: "Net pay"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(8)::before { content: "Status"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(9)::before { content: "View payslip"; }
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(10)::before { content: "Download PDF"; }
}

@media (max-width: 575.98px) {
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .card-body {
    padding: 1.15rem !important;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-card-heading-main {
    align-items: flex-start;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-actions .btn,
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-card-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
    min-height: 112px;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .employee-leave-history-scroll-area {
    max-height: 520px !important;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-payroll-records tbody td {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    text-align: left !important;
  }
}

/* =========================================================
   PAYSLIP DOCUMENT SYSTEM - PREVIEW + SELF-SERVICE
   Shared visual language for HR Payroll and Self-Service payslips.
   Presentation only: payroll calculations, authorised-record queries,
   tenant filtering, email delivery, and access controls are unchanged.
   ========================================================= */

.bexhr-payslip-modal {
  padding: 0;
  background: rgba(15, 23, 42, 0.62) !important;
  backdrop-filter: blur(8px);
}

.bexhr-payslip-modal-container {
  max-width: 1080px;
}

.bexhr-payslip-modal-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  background: #eef3f7;
  box-shadow: 0 34px 100px rgba(15, 23, 42, 0.36) !important;
}

.bexhr-payslip-modal-header,
.bexhr-payslip-modal-footer {
  flex: 0 0 auto;
  background: #ffffff !important;
}

.bexhr-payslip-modal-header {
  border-bottom: 1px solid #e2e8f0 !important;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 164, 0.12), transparent 34%),
    #ffffff !important;
}

.bexhr-payslip-modal-header h2 {
  color: #10233f;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bexhr-payslip-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #eef3f7;
  scrollbar-width: thin;
}

.bexhr-payslip-modal-content::-webkit-scrollbar {
  width: 10px;
}

.bexhr-payslip-modal-content::-webkit-scrollbar-thumb {
  border: 2px solid #eef3f7;
  border-radius: 999px;
  background: rgba(15, 35, 63, 0.25);
}

.bexhr-payslip-modal-footer {
  border-top: 1px solid #e2e8f0 !important;
}

.bexhr-payslip-document {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(1rem, 2.6vw, 1.65rem);
  border: 1px solid #d9e3ec;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.1);
}

.bexhr-payslip-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.15rem 1.25rem;
  overflow: hidden;
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.28), transparent 35%),
    linear-gradient(135deg, #0f766e 0%, #115e59 58%, #0b3558 100%);
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.18);
}

.bexhr-payslip-letterhead--alpatech {
  background:
    radial-gradient(circle at top right, rgba(54, 185, 207, 0.34), transparent 35%),
    linear-gradient(135deg, #08446d 0%, #0b5f95 58%, #087e92 100%);
  box-shadow: 0 14px 34px rgba(11, 95, 149, 0.2);
}

.bexhr-payslip-brand-block {
  min-width: 0;
}

.bexhr-payslip-brand-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.bexhr-payslip-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  color: #0f766e;
  background: rgba(255, 255, 255, 0.96);
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

.bexhr-payslip-brand-mark--image img {
  display: block;
  width: 21px;
  height: 31px;
  object-fit: contain;
}

.bexhr-payslip-brand-divider {
  width: 1px;
  height: 38px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.42);
}

.bexhr-payslip-brand-name {
  overflow-wrap: anywhere;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.bexhr-payslip-document-label,
.bexhr-payslip-platform-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  line-height: 1.35;
}

.bexhr-payslip-platform-label {
  margin: 0.2rem 0 0;
}

.bexhr-payslip-document-meta {
  display: grid;
  justify-items: end;
  gap: 0.28rem;
  min-width: 145px;
  text-align: right;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.75rem;
}

.bexhr-payslip-document-meta strong {
  color: #ffffff;
  font-size: 1rem;
}

.bexhr-payslip-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.7rem;
  font-weight: 700;
}

.bexhr-payslip-status-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #bbf7d0;
  box-shadow: 0 0 0 3px rgba(187, 247, 208, 0.15);
}

.bexhr-payslip-reference {
  opacity: 0.88;
}

.bexhr-payslip-party-grid,
.bexhr-payslip-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bexhr-payslip-party-card,
.bexhr-payslip-structure-card,
.bexhr-payslip-breakdown-card,
.bexhr-payslip-footer-note {
  border: 1px solid #d9e3ec;
  border-radius: 18px;
  background: #ffffff;
}

.bexhr-payslip-party-card {
  min-height: 155px;
  padding: 1.1rem 1.15rem;
}

.bexhr-payslip-party-card--employee {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 164, 0.08), transparent 34%),
    linear-gradient(145deg, #f8fbfc 0%, #ffffff 100%);
}

.bexhr-payslip-party-label,
.bexhr-payslip-section-heading > div > span,
.bexhr-payslip-summary-card > div > span,
.bexhr-payslip-structure-item > span,
.bexhr-payslip-net-panel > div:first-child > span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bexhr-payslip-party-card h3 {
  margin: 0.35rem 0 0.45rem;
  color: #10233f;
  font-size: 1rem;
  font-weight: 800;
}

.bexhr-payslip-contact-lines {
  display: grid;
  gap: 0.18rem;
  color: #64748b;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.bexhr-payslip-address {
  margin-top: 0.45rem;
  color: #475569;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.bexhr-payslip-employee-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid #e5edf3;
  color: #64748b;
  font-size: 0.75rem;
}

.bexhr-payslip-employee-number strong {
  color: #10233f;
}

.bexhr-payslip-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.bexhr-payslip-summary-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.9rem;
  overflow: hidden;
  border: 1px solid #d9e3ec;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbfc 100%);
}

.bexhr-payslip-summary-card--deductions {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(145deg, #ffffff 0%, #fff9ed 100%);
}

.bexhr-payslip-summary-card--net {
  border-color: rgba(21, 128, 61, 0.28);
  background: linear-gradient(145deg, #ffffff 0%, #eefaf4 100%);
}

.bexhr-payslip-summary-icon,
.bexhr-payslip-section-icon,
.bexhr-payslip-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
}

.bexhr-payslip-summary-icon {
  width: 38px;
  height: 38px;
  color: #0f766e;
  background: #e7f8f5;
}

.bexhr-payslip-summary-card--deductions .bexhr-payslip-summary-icon {
  color: #b45309;
  background: #fff1d6;
}

.bexhr-payslip-summary-card--net .bexhr-payslip-summary-icon {
  color: #15803d;
  background: #dcfce7;
}

.bexhr-payslip-summary-card > div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.bexhr-payslip-summary-card strong {
  color: #10233f;
  font-size: clamp(0.9rem, 1.8vw, 1.08rem);
  overflow-wrap: anywhere;
}

.bexhr-payslip-structure-card,
.bexhr-payslip-breakdown-card {
  padding: 1.1rem;
}

.bexhr-payslip-section-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
}

.bexhr-payslip-section-icon {
  width: 38px;
  height: 38px;
  color: #0f766e;
  background: #e7f8f5;
}

.bexhr-payslip-section-heading h3 {
  margin: 0.12rem 0 0;
  color: #10233f;
  font-size: 0.98rem;
  font-weight: 800;
}

.bexhr-payslip-structure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.bexhr-payslip-structure-item {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 12px;
  background: #f8fafc;
}

.bexhr-payslip-structure-item strong {
  color: #10233f;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.bexhr-payslip-structure-item--emphasis {
  background: #eef9fc;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 164, 0.12);
}

.bexhr-payslip-breakdown-card--earnings {
  border-top: 4px solid #0ea5a4;
}

.bexhr-payslip-breakdown-card--deductions {
  border-top: 4px solid #f59e0b;
}

.bexhr-payslip-breakdown-card--deductions .bexhr-payslip-section-icon {
  color: #b45309;
  background: #fff1d6;
}

.bexhr-payslip-line-items {
  display: grid;
}

.bexhr-payslip-line-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #e5edf3;
  color: #334155;
  font-size: 0.82rem;
}

.bexhr-payslip-line-item strong {
  color: #10233f;
  white-space: nowrap;
}

.bexhr-payslip-empty-line {
  padding: 0.8rem;
  border-radius: 12px;
  color: #64748b;
  background: #f8fafc;
  font-size: 0.8rem;
}

.bexhr-payslip-section-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  margin-top: 0.45rem;
  color: #10233f;
  font-size: 0.85rem;
  font-weight: 800;
}

.bexhr-payslip-net-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, #0f766e 0%, #15803d 100%);
  box-shadow: 0 14px 30px rgba(21, 128, 61, 0.16);
}

.bexhr-payslip-net-panel > div:first-child > span {
  color: rgba(255, 255, 255, 0.74);
}

.bexhr-payslip-net-panel > div:first-child > strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 1rem;
}

.bexhr-payslip-net-amount {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 800;
  white-space: nowrap;
}

.bexhr-payslip-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: #f8fafc;
}

.bexhr-payslip-footer-icon {
  width: 34px;
  height: 34px;
  color: #2563eb;
  background: #eaf2ff;
}

.bexhr-payslip-footer-note strong {
  color: #10233f;
  font-size: 0.82rem;
}

.bexhr-payslip-footer-note p {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .bexhr-payslip-modal-container {
    max-width: none;
    padding: 0 !important;
  }

  .bexhr-payslip-modal-shell {
    width: 100% !important;
    height: 100dvh;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .bexhr-payslip-modal-header,
  .bexhr-payslip-modal-footer {
    padding: 1rem !important;
  }

  .bexhr-payslip-modal-content {
    padding: 0.75rem !important;
  }

  .bexhr-payslip-document {
    padding: 0.9rem;
    border-radius: 18px;
  }

  .bexhr-payslip-structure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .bexhr-payslip-letterhead,
  .bexhr-payslip-party-grid,
  .bexhr-payslip-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .bexhr-payslip-letterhead {
    display: grid;
  }

  .bexhr-payslip-document-meta {
    justify-items: start;
    min-width: 0;
    text-align: left;
  }

  .bexhr-payslip-summary-grid {
    grid-template-columns: 1fr;
  }

  .bexhr-payslip-party-card {
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .bexhr-payslip-modal-header {
    align-items: flex-start !important;
  }

  .bexhr-payslip-modal-footer {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .bexhr-payslip-modal-footer .btn {
    width: 100%;
  }

  .bexhr-payslip-document {
    gap: 0.75rem;
    padding: 0.65rem;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
  }

  .bexhr-payslip-letterhead {
    padding: 1rem;
    border-radius: 14px;
  }

  .bexhr-payslip-brand-name {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .bexhr-payslip-platform-label {
    margin-left: 0;
  }

  .bexhr-payslip-party-card,
  .bexhr-payslip-structure-card,
  .bexhr-payslip-breakdown-card,
  .bexhr-payslip-footer-note {
    border-radius: 14px;
  }

  .bexhr-payslip-structure-grid {
    grid-template-columns: 1fr;
  }

  .bexhr-payslip-net-panel {
    align-items: flex-start;
    flex-direction: column;
    border-radius: 14px;
  }

  .bexhr-payslip-net-amount {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   TENANT-NEUTRAL PAYSLIP / SELF-SERVICE / PRIORITY REFINEMENT

   Safety boundary:
   - Presentation only in this stylesheet.
   - Alpatech-specific colour and shell selectors remain untouched.
   - Existing priority triggers, navigation IDs, payroll calculations,
     tenant filters, Supabase access, and role permissions remain unchanged.
   ========================================================= */

body.bexhr-hr-visual-refresh .hr-overview-content-grid {
  align-items: start;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-list.is-clear {
  min-height: 0;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state--compact {
  min-height: 72px;
  justify-content: flex-start;
  padding: 0.8rem 0.9rem;
  border-style: solid;
  border-color: #bfe7df;
  border-radius: 13px;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state--compact > i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(15, 118, 110, 0.1);
  font-size: 1rem;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state--compact strong {
  font-size: 0.8rem;
}

body.bexhr-hr-visual-refresh .hr-overview-clear-state--compact span {
  font-size: 0.69rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(56, 189, 248, 0.1), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fcfd 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05) !important;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 13px;
  color: var(--ss-blue);
  background: linear-gradient(145deg, #ecfeff 0%, #e0f2fe 100%);
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-kicker {
  margin-bottom: 0.18rem;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-description {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions {
  flex: 0 0 auto;
  padding: 0.32rem;
  border-radius: 14px;
}

body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions .btn {
  min-height: 38px;
  padding-inline: 0.9rem;
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-bar {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-hr-visual-refresh .hr-overview-clear-state--compact {
    align-items: flex-start;
  }

  body.bexhr-hr-visual-refresh #hrSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HR PRIORITY BALANCE + HELP GUIDE MODERNISATION - STEP 2

   Safety boundary:
   - Existing priority triggers and workspace destinations remain unchanged.
   - Help cards proxy to existing hrTab* buttons.
   - Tenant colour variables are reused; no tenant identity is hardcoded.
   - No payroll calculation, role, Supabase, or access behaviour is changed.
   ========================================================= */

body.bexhr-hr-visual-refresh .hr-overview-priority-panel {
  display: flex;
  flex-direction: column;
}

body.bexhr-hr-visual-refresh .hr-overview-priority-panel .hr-overview-priority-list.is-clear {
  flex: 1 1 auto;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh .hr-overview-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card {
  min-width: 0;
  min-height: 66px;
  padding: 0.7rem;
  border: 1px solid #e4eaf1;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 0.65rem;
  color: #172033;
  font: inherit;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card:hover,
body.bexhr-hr-visual-refresh .hr-overview-check-card:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(var(--bexhr-accent-rgb), 0.32);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}

body.bexhr-hr-visual-refresh .hr-overview-check-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-size: 0.88rem;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card.tone-people .hr-overview-check-icon {
  color: #0f766e;
  background: #dff8f5;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card.tone-review .hr-overview-check-icon {
  color: #6d28d9;
  background: #ede9fe;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card.tone-payroll .hr-overview-check-icon {
  color: #0369a1;
  background: #e0f2fe;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card.tone-delivery .hr-overview-check-icon {
  color: #047857;
  background: #d1fae5;
}

body.bexhr-hr-visual-refresh .hr-overview-check-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.bexhr-hr-visual-refresh .hr-overview-check-copy small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-overview-check-copy strong {
  margin-top: 0.14rem;
  overflow: hidden;
  color: #172033;
  font-size: 0.75rem;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-overview-check-card > .bi-chevron-right {
  color: #94a3b8;
  font-size: 0.66rem;
}

body.hr-operating-guide-open {
  overflow: hidden;
}

.hr-operating-guide-modal {
  z-index: 1058;
  padding: 0;
  background: rgba(7, 20, 38, 0.62);
  backdrop-filter: blur(8px);
}

.hr-operating-guide-stage {
  width: 100%;
  height: 100%;
  padding: clamp(0.75rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-operating-guide-shell {
  width: min(100%, 1060px);
  max-height: min(94vh, 880px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(7, 20, 38, 0.28);
  display: flex;
  flex-direction: column;
}

.hr-operating-guide-shell:focus {
  outline: none;
}

.hr-operating-guide-header {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid #e4eaf1;
  background:
    radial-gradient(circle at 88% 10%, rgba(var(--bexhr-accent-rgb), 0.2), transparent 30%),
    linear-gradient(135deg, #f8fbfd 0%, #ffffff 58%, rgba(var(--bexhr-accent-rgb), 0.07) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.hr-operating-guide-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.hr-operating-guide-heading-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.18);
  border-radius: 15px;
  color: var(--hr-primary-dark);
  background: rgba(var(--bexhr-accent-rgb), 0.1);
  font-size: 1.15rem;
}

.hr-operating-guide-kicker,
.hr-guide-card-kicker {
  display: block;
  color: var(--hr-primary-dark);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hr-operating-guide-header h2 {
  margin: 0.22rem 0 0;
  color: #0f172a;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 820;
  letter-spacing: -0.035em;
}

.hr-operating-guide-header p {
  margin: 0.28rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.hr-operating-guide-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #d8e0e9;
  border-radius: 12px;
  color: #475569;
  background: rgba(255, 255, 255, 0.86);
  display: inline-grid;
  place-items: center;
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.hr-operating-guide-close:hover,
.hr-operating-guide-close:focus-visible {
  outline: none;
  color: #0f172a;
  border-color: rgba(var(--bexhr-accent-rgb), 0.36);
  background: #ffffff;
  transform: translateY(-1px);
}

.hr-operating-guide-body {
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 1.4rem;
  scrollbar-width: thin;
}

.hr-guide-featured-card {
  width: 100%;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 20%, rgba(var(--bexhr-accent-rgb), 0.13), transparent 28%),
    linear-gradient(135deg, rgba(var(--bexhr-accent-rgb), 0.07) 0%, #ffffff 58%);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  color: #172033;
  font: inherit;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.hr-guide-featured-card:hover,
.hr-guide-featured-card:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(var(--bexhr-accent-rgb), 0.42);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.hr-guide-featured-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--hr-primary-dark) 0%, var(--hr-primary-soft) 100%);
  box-shadow: 0 10px 22px rgba(var(--bexhr-accent-rgb), 0.2);
}

.hr-guide-featured-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hr-guide-featured-copy strong {
  margin-top: 0.12rem;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
}

.hr-guide-featured-copy small {
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.45;
}

.hr-guide-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hr-primary-dark);
  font-size: 0.72rem;
  font-weight: 760;
  white-space: nowrap;
}

.hr-guide-workspace-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.hr-guide-workspace-card {
  min-width: 0;
  min-height: 154px;
  padding: 0.9rem;
  border: 1px solid #e4eaf1;
  border-radius: 17px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #172033;
  font: inherit;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.hr-guide-workspace-card:hover,
.hr-guide-workspace-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(var(--bexhr-accent-rgb), 0.34);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.hr-guide-workspace-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-size: 0.95rem;
}

.hr-guide-workspace-card--people .hr-guide-workspace-icon {
  color: #0f766e;
  background: #dff8f5;
}

.hr-guide-workspace-card--review .hr-guide-workspace-icon {
  color: #6d28d9;
  background: #ede9fe;
}

.hr-guide-workspace-card--payroll .hr-guide-workspace-icon {
  color: #0369a1;
  background: #e0f2fe;
}

.hr-guide-workspace-card--setup .hr-guide-workspace-icon {
  color: #b45309;
  background: #fef3c7;
}

.hr-guide-workspace-card--self-service .hr-guide-workspace-icon {
  color: #0e7490;
  background: #cffafe;
}

.hr-guide-workspace-card--profile .hr-guide-workspace-icon {
  color: #475569;
  background: #e2e8f0;
}

.hr-guide-workspace-copy {
  min-width: 0;
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
}

.hr-guide-workspace-copy strong {
  color: #172033;
  font-size: 0.84rem;
  font-weight: 780;
}

.hr-guide-workspace-copy small {
  margin-top: 0.22rem;
  color: #64748b;
  font-size: 0.69rem;
  line-height: 1.45;
}

.hr-guide-workspace-link {
  margin-top: auto;
  padding-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--hr-primary-dark);
  font-size: 0.67rem;
  font-weight: 760;
}

.hr-guide-operating-flow {
  margin-top: 0.9rem;
  padding: 1rem;
  border: 1px solid #e4eaf1;
  border-radius: 18px;
  background: #f8fafc;
}

.hr-guide-operating-flow-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.hr-guide-operating-flow-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  color: var(--hr-primary-dark);
  background: rgba(var(--bexhr-accent-rgb), 0.1);
}

.hr-guide-operating-flow h3 {
  margin: 0.15rem 0 0;
  color: #172033;
  font-size: 0.88rem;
  font-weight: 780;
}

.hr-guide-operating-steps {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.hr-guide-operating-steps li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.hr-guide-operating-steps li > span {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  color: #ffffff;
  background: var(--hr-primary-dark);
  font-size: 0.64rem;
  font-weight: 800;
}

.hr-guide-operating-steps li > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hr-guide-operating-steps strong {
  color: #334155;
  font-size: 0.7rem;
  font-weight: 760;
}

.hr-guide-operating-steps small {
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.63rem;
  line-height: 1.38;
}

.hr-guide-help-note {
  margin-top: 0.85rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #fde7b0;
  border-radius: 15px;
  background: #fffbeb;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.hr-guide-help-note > span {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: #b45309;
  background: #fef3c7;
}

.hr-guide-help-note > div {
  display: flex;
  flex-direction: column;
}

.hr-guide-help-note strong {
  color: #78350f;
  font-size: 0.75rem;
  font-weight: 760;
}

.hr-guide-help-note small {
  margin-top: 0.14rem;
  color: #92400e;
  font-size: 0.67rem;
  line-height: 1.42;
}

.hr-operating-guide-footer {
  flex: 0 0 auto;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid #e4eaf1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hr-operating-guide-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #64748b;
  font-size: 0.68rem;
}

.hr-operating-guide-footer > span i {
  color: var(--hr-primary-dark);
}

.hr-operating-guide-footer .btn {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border-radius: 11px;
  font-size: 0.72rem;
}

@media (max-width: 991.98px) {
  .hr-guide-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-guide-operating-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh .hr-overview-check-grid {
    grid-template-columns: 1fr;
  }

  .hr-operating-guide-stage {
    padding: 0;
    align-items: stretch;
  }

  .hr-operating-guide-shell {
    width: 100%;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .hr-operating-guide-header {
    padding: 1rem;
  }

  .hr-operating-guide-heading-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
  }

  .hr-operating-guide-body {
    padding: 1rem;
  }

  .hr-guide-featured-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .hr-guide-featured-icon {
    width: 40px;
    height: 40px;
  }

  .hr-guide-card-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.25rem;
  }

  .hr-guide-workspace-grid {
    grid-template-columns: 1fr;
  }

  .hr-guide-workspace-card {
    min-height: 136px;
  }

  .hr-guide-operating-steps {
    grid-template-columns: 1fr;
  }

  .hr-operating-guide-footer {
    padding: 0.85rem 1rem;
    align-items: stretch;
    flex-direction: column;
  }

  .hr-operating-guide-footer .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-hr-visual-refresh .hr-overview-check-card,
  .hr-guide-featured-card,
  .hr-guide-workspace-card,
  .hr-operating-guide-close {
    transition: none;
  }

  body.bexhr-hr-visual-refresh .hr-overview-check-card:hover,
  body.bexhr-hr-visual-refresh .hr-overview-check-card:focus-visible,
  .hr-guide-featured-card:hover,
  .hr-guide-featured-card:focus-visible,
  .hr-guide-workspace-card:hover,
  .hr-guide-workspace-card:focus-visible,
  .hr-operating-guide-close:hover,
  .hr-operating-guide-close:focus-visible {
    transform: none;
  }
}

/* HR OVERVIEW CARD BASE ALIGNMENT
   Keep Priority Attention and Department Snapshot equal-height on desktop. */
@media (min-width: 992px) {
  body.bexhr-hr-visual-refresh .hr-overview-content-grid {
    align-items: stretch !important;
  }

  body.bexhr-hr-visual-refresh
    .hr-overview-content-grid > .hr-overview-panel {
    align-self: stretch !important;
    height: 100%;
  }
}

/* =========================================================
   BEXHR LANDING PAGE COLOUR REFRESH
   Colour-only update. Original structure and layout preserved.
   ========================================================= */

body.bexhr-landing-page {
  --hr-primary: #0b5f95;
  --hr-primary-soft: #36b9cf;
  --hr-primary-dark: #073b63;
  --hr-border: #d8e5ee;
  --hr-soft-surface: #eef9fc;
}

body.bexhr-landing-page .hr-navbar {
  border-bottom-color: rgba(11, 95, 149, 0.15);
}

body.bexhr-landing-page .hr-brand-mark {
  background: linear-gradient(
    135deg,
    #0b5f95 0%,
    #36b9cf 100%
  );
  box-shadow: 0 12px 28px rgba(11, 95, 149, 0.2);
}

body.bexhr-landing-page .hr-brand-text {
  color: #073b63;
}

body.bexhr-landing-page .hr-hero-badge {
  color: #0b5f95;
  background: #eef9fc;
  border-color: #b9dfe8;
}

body.bexhr-landing-page .hr-hero-title .accent {
  color: #0b5f95;
}

body.bexhr-landing-page .hr-mini-card {
  border-color: #d8e5ee;
}

body.bexhr-landing-page .hr-btn-primary {
  background: linear-gradient(
    135deg,
    #0b5f95 0%,
    #36b9cf 100%
  );
  box-shadow: 0 14px 30px rgba(11, 95, 149, 0.2);
}

body.bexhr-landing-page .hr-btn-primary:hover,
body.bexhr-landing-page .hr-btn-primary:focus {
  background: linear-gradient(
    135deg,
    #073b63 0%,
    #0b5f95 100%
  );
}

body.bexhr-landing-page .form-control,
body.bexhr-landing-page .form-select,
body.bexhr-landing-page .input-group-text {
  border-color: #cddfe8;
}

body.bexhr-landing-page .form-control:focus,
body.bexhr-landing-page .form-select:focus {
  border-color: #36b9cf;
  box-shadow: 0 0 0 0.25rem rgba(54, 185, 207, 0.16);
}

body.bexhr-landing-page .hr-link {
  color: #0b5f95;
}

body.bexhr-landing-page .hr-dev-note {
  border-left-color: #36b9cf;
  background: #eef9fc;
}

body.bexhr-landing-page .hr-footer {
  border-top-color: rgba(11, 95, 149, 0.15);
}

/* =========================================================
   BEXHR MFA VERIFICATION EXPERIENCE - STEP 1
   Presentation-only refinement of the existing Supabase TOTP step.
   All selectors are scoped to the public landing page and existing MFA IDs.
   ========================================================= */
body.bexhr-landing-page .bexhr-login-card {
  border-color: #d8e5ee !important;
  box-shadow: 0 18px 42px rgba(7, 59, 99, 0.08);
}

body.bexhr-landing-page .bexhr-mfa-panel {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border: 1px solid #d8e5ee;
  border-radius: 20px;
  background: radial-gradient(circle at 100% 0%, rgba(54, 185, 207, 0.11), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 16px 36px rgba(7, 59, 99, 0.08);
}

body.bexhr-landing-page .bexhr-mfa-step-row,
body.bexhr-landing-page .bexhr-mfa-heading,
body.bexhr-landing-page .bexhr-mfa-secret-row,
body.bexhr-landing-page .bexhr-mfa-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.bexhr-landing-page .bexhr-mfa-step-row {
  justify-content: space-between;
  margin-bottom: 1rem;
}

body.bexhr-landing-page .bexhr-mfa-security-label,
body.bexhr-landing-page .bexhr-mfa-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  padding: 0.3rem 0.62rem;
  border: 1px solid #dfe7ef;
  border-radius: 999px;
  background: #f5f8fb;
  color: #52647a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.bexhr-landing-page .bexhr-mfa-security-label {
  border-color: #b9dfe8;
  background: #eaf8fb;
  color: #0b5f95;
}

body.bexhr-landing-page .bexhr-mfa-heading {
  align-items: flex-start;
  margin-bottom: 1.15rem;
}

body.bexhr-landing-page .bexhr-mfa-heading-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b9dfe8;
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf8fb, #dff6fa);
  color: #0b5f95;
  font-size: 1.15rem;
}

body.bexhr-landing-page .bexhr-mfa-heading-copy { min-width: 0; }
body.bexhr-landing-page .bexhr-mfa-title {
  color: #101828;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.bexhr-landing-page .bexhr-mfa-description,
body.bexhr-landing-page .bexhr-mfa-enrollment-copy,
body.bexhr-landing-page .bexhr-mfa-code-hint,
body.bexhr-landing-page .bexhr-mfa-recovery-copy {
  color: #667085;
  font-size: 0.72rem;
  line-height: 1.5;
}
body.bexhr-landing-page .bexhr-mfa-description,
body.bexhr-landing-page .bexhr-mfa-enrollment-copy { margin-top: 0.2rem; }

body.bexhr-landing-page .bexhr-mfa-enrollment,
body.bexhr-landing-page .bexhr-mfa-code-field {
  padding: 1rem;
  border: 1px solid #d8e5ee;
  border-radius: 16px;
  background: #ffffff;
}
body.bexhr-landing-page .bexhr-mfa-enrollment { margin-bottom: 1rem; }
body.bexhr-landing-page .bexhr-mfa-enrollment-title,
body.bexhr-landing-page .bexhr-mfa-code-field .form-label {
  color: #17324d;
  font-size: 0.82rem;
  font-weight: 800;
}

body.bexhr-landing-page .bexhr-mfa-qr-stage {
  display: grid;
  place-items: center;
  margin: 0.9rem 0;
}
body.bexhr-landing-page .bexhr-mfa-qr-image {
  display: block;
  width: min(100%, 220px);
  padding: 0.6rem;
  border: 1px solid #d8e5ee;
  border-radius: 14px;
  background: #ffffff;
}
body.bexhr-landing-page .bexhr-mfa-qr-image.d-none { display: none !important; }
body.bexhr-landing-page .bexhr-mfa-secret-row {
  justify-content: space-between;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: #f5f8fb;
  color: #667085;
  font-size: 0.72rem;
}
body.bexhr-landing-page .bexhr-mfa-secret-row code {
  max-width: 58%;
  overflow-wrap: anywhere;
  color: #0b5f95;
  font-weight: 700;
}

body.bexhr-landing-page .bexhr-mfa-code-field .form-label { margin-bottom: 0.55rem; }
body.bexhr-landing-page #hrMfaCodeInput {
  min-height: 58px;
  border: 1px solid #bfd5e1;
  border-radius: 14px;
  color: #0f2740;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.45em;
  text-align: center;
  text-indent: 0.45em;
  font-variant-numeric: tabular-nums;
}
body.bexhr-landing-page #hrMfaCodeInput::placeholder { color: #b5c1cc; opacity: 1; }
body.bexhr-landing-page #hrMfaCodeInput:focus {
  border-color: #36b9cf;
  box-shadow: 0 0 0 0.24rem rgba(54, 185, 207, 0.16);
}
body.bexhr-landing-page .bexhr-mfa-code-hint { margin-top: 0.55rem; text-align: center; }
body.bexhr-landing-page #hrMfaStatus {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  font-size: 0.74rem;
  line-height: 1.5;
}

body.bexhr-landing-page .bexhr-mfa-recovery {
  margin-top: 0.85rem;
  border: 1px solid #dfe7ef;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}
body.bexhr-landing-page .bexhr-mfa-recovery summary {
  min-height: 42px;
  padding: 0.65rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #475467;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  list-style: none;
}
body.bexhr-landing-page .bexhr-mfa-recovery summary::-webkit-details-marker { display: none; }
body.bexhr-landing-page .bexhr-mfa-recovery summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
body.bexhr-landing-page .bexhr-mfa-recovery summary > .bi-chevron-down { transition: transform 160ms ease; }
body.bexhr-landing-page .bexhr-mfa-recovery[open] summary > .bi-chevron-down { transform: rotate(180deg); }
body.bexhr-landing-page .bexhr-mfa-recovery-copy { padding: 0 0.8rem 0.8rem; }

body.bexhr-landing-page .bexhr-mfa-actions {
  align-items: stretch;
  margin-top: 1rem;
}
body.bexhr-landing-page .bexhr-mfa-actions .btn {
  min-height: 44px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 750;
}
body.bexhr-landing-page #verifyHrMfaBtn {
  flex: 1 1 auto;
  background: linear-gradient(135deg, #0b5f95, #36b9cf);
  border-color: #0b5f95;
  box-shadow: 0 10px 22px rgba(11, 95, 149, 0.2);
}
body.bexhr-landing-page #verifyHrMfaBtn:hover,
body.bexhr-landing-page #verifyHrMfaBtn:focus {
  background: linear-gradient(135deg, #073b63, #0b5f95);
  border-color: #073b63;
}
body.bexhr-landing-page #verifyHrMfaBtn:disabled {
  background: #aeb8c3;
  border-color: #aeb8c3;
  box-shadow: none;
  opacity: 1;
}
body.bexhr-landing-page .bexhr-mfa-panel:not(.d-none) ~ .bexhr-access-note { display: none; }

@media (max-width: 575.98px) {
  body.bexhr-landing-page .bexhr-mfa-heading-icon { width: 40px; height: 40px; flex-basis: 40px; }
  body.bexhr-landing-page .bexhr-mfa-actions,
  body.bexhr-landing-page .bexhr-mfa-secret-row { align-items: stretch; flex-direction: column; }
  body.bexhr-landing-page .bexhr-mfa-actions .btn { width: 100%; }
  body.bexhr-landing-page .bexhr-mfa-secret-row code { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-landing-page .bexhr-mfa-recovery summary > .bi-chevron-down { transition: none; }
}

/* =========================================================
   BEXHR MFA MOBILE FOCUS MODE - STEP 2
   When secure verification is active on tablet/mobile, remove the public
   marketing content and keep the authentication task above the fold.
   Desktop layout and all Supabase/TOTP behaviour remain unchanged.
   ========================================================= */
@media (max-width: 991.98px) {
  body.bexhr-landing-page.bexhr-mfa-active .hr-hero-section {
    min-height: calc(100vh - 72px);
    padding-top: 5.6rem;
    padding-bottom: 1.25rem;
    overflow: visible;
  }

  body.bexhr-landing-page.bexhr-mfa-active .hr-hero-section::before,
  body.bexhr-landing-page.bexhr-mfa-active .landing-animated-page::before,
  body.bexhr-landing-page.bexhr-mfa-active .landing-animated-page::after {
    display: none;
    animation: none;
  }

  body.bexhr-landing-page.bexhr-mfa-active #home > .container > .row {
    margin-right: 0;
    margin-left: 0;
  }

  body.bexhr-landing-page.bexhr-mfa-active #home > .container > .row > .col-lg-6:first-child {
    display: none !important;
  }

  body.bexhr-landing-page.bexhr-mfa-active #home > .container > .row > .col-lg-6:last-child {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-login-card {
    width: min(100%, 640px);
    margin-right: auto;
    margin-left: auto;
  }

  body.bexhr-landing-page.bexhr-mfa-active .hr-footer {
    display: none;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-landing-page.bexhr-mfa-active .hr-hero-section {
    min-height: calc(100vh - 64px);
    padding-top: 4.9rem;
    padding-bottom: 0.75rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active #home > .container {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-login-card {
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-login-heading {
    font-size: 1.35rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-login-subtitle {
    margin-bottom: 0.75rem !important;
    font-size: 0.78rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-panel {
    margin-top: 0.75rem;
    padding: 0.8rem;
    border-radius: 16px;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-step-row {
    margin-bottom: 0.75rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-security-label,
  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-step-badge {
    min-height: 25px;
    padding: 0.25rem 0.5rem;
    font-size: 0.61rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-heading {
    margin-bottom: 0.85rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-code-field {
    padding: 0.8rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active #hrMfaCodeInput {
    min-height: 54px;
    font-size: 1.35rem;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  body.bexhr-landing-page.bexhr-mfa-active #hrMfaStatus {
    margin-top: 0.75rem !important;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-recovery {
    margin-top: 0.75rem;
  }

  body.bexhr-landing-page.bexhr-mfa-active .bexhr-mfa-actions {
    margin-top: 0.75rem;
    gap: 0.55rem;
  }
}

/* =========================================================
   BEXHR RESET PASSWORD COLOUR ALIGNMENT - STEP 1
   Preserve the original compact Bootstrap reset layout.

   Scope and safety:
   - colour treatment only;
   - no layout, spacing, sizing, content, or workflow changes;
   - Supabase reset, first-time setup, sign-out, and redirects remain unchanged.
   ========================================================= */

body.bexhr-reset-password-page {
  --bexhr-reset-navy: #0b1f38;
  --bexhr-reset-teal: #0f9f9a;
  --bexhr-reset-teal-soft: #16b8ae;
  --bexhr-reset-muted: #667085;
  --bexhr-reset-line: #dce6ee;
  min-height: 100vh;
  background-color: #f4f7fb !important;
  background-image:
    radial-gradient(circle at top right, rgba(22, 184, 174, 0.1), transparent 30%),
    linear-gradient(180deg, #f7fafc 0%, #eef4f8 100%);
  color: #172033;
}

body.bexhr-reset-password-page .card {
  background-color: #ffffff;
  border-color: var(--bexhr-reset-line) !important;
  box-shadow: 0 16px 38px rgba(11, 31, 56, 0.1) !important;
}

body.bexhr-reset-password-page #pageTitle {
  color: var(--bexhr-reset-navy);
}

body.bexhr-reset-password-page #pageSubtitle,
body.bexhr-reset-password-page .text-secondary {
  color: var(--bexhr-reset-muted) !important;
}

body.bexhr-reset-password-page .form-label {
  color: var(--bexhr-reset-navy);
}

body.bexhr-reset-password-page .form-control,
body.bexhr-reset-password-page .input-group-text,
body.bexhr-reset-password-page .btn-outline-secondary {
  border-color: var(--bexhr-reset-line);
}

body.bexhr-reset-password-page .input-group-text,
body.bexhr-reset-password-page .btn-outline-secondary {
  color: #607086;
  background-color: #ffffff;
}

body.bexhr-reset-password-page .input-group-text i {
  color: var(--bexhr-reset-teal);
}

body.bexhr-reset-password-page .form-control:focus {
  border-color: var(--bexhr-reset-teal-soft);
  box-shadow: 0 0 0 0.2rem rgba(15, 159, 154, 0.14);
}

body.bexhr-reset-password-page .btn-outline-secondary:hover,
body.bexhr-reset-password-page .btn-outline-secondary:focus {
  color: var(--bexhr-reset-navy);
  background-color: #edf9f8;
  border-color: var(--bexhr-reset-teal-soft);
}

body.bexhr-reset-password-page .hr-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--bexhr-reset-teal) 0%, var(--bexhr-reset-teal-soft) 100%);
  box-shadow: 0 12px 26px rgba(15, 159, 154, 0.2);
}

body.bexhr-reset-password-page .hr-btn-primary:hover,
body.bexhr-reset-password-page .hr-btn-primary:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #0a7b78 0%, var(--bexhr-reset-teal) 100%);
}

body.bexhr-reset-password-page a {
  color: var(--bexhr-reset-teal);
  font-weight: 600;
}

body.bexhr-reset-password-page a:hover,
body.bexhr-reset-password-page a:focus {
  color: #0a7b78;
}

body.bexhr-reset-password-page .alert {
  border-color: rgba(11, 31, 56, 0.1);
}

/* =========================================================
   BEXHR RESET / FIRST-TIME LOGIN UI REFRESH - v1.0.0
   Presentation only.
   Existing Supabase reset, MFA, first-time setup and redirects
   remain controlled by reset-password.js.
   ========================================================= */

body.bexhr-reset-password-page .container {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

body.bexhr-reset-password-page .row {
  width: 100%;
}

body.bexhr-reset-password-page .card {
  overflow: hidden;
  border: 1px solid var(--bexhr-reset-line) !important;
  border-radius: 24px !important;
}

body.bexhr-reset-password-page .card-body {
  padding: clamp(1.5rem, 4vw, 2.75rem) !important;
}

body.bexhr-reset-password-page .bexhr-reset-header {
  margin-bottom: 1.75rem;
}

body.bexhr-reset-password-page .bexhr-reset-security-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(15, 159, 154, 0.13) 0%,
    rgba(22, 184, 174, 0.2) 100%
  );
  color: var(--bexhr-reset-teal);
  font-size: 1.65rem;
  box-shadow: inset 0 0 0 1px rgba(15, 159, 154, 0.1);
}


body.bexhr-reset-password-page #pageTitle {
  font-size: clamp(1.6rem, 3vw, 2rem);
  letter-spacing: -0.025em;
}

body.bexhr-reset-password-page #pageSubtitle {
  max-width: 420px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.6;
}

body.bexhr-reset-password-page .bexhr-reset-alert-area:not(:empty) {
  margin-bottom: 1rem;
}

body.bexhr-reset-password-page .form-label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

body.bexhr-reset-password-page .input-group {
  border-radius: 14px;
}

body.bexhr-reset-password-page .form-control,
body.bexhr-reset-password-page .input-group-text,
body.bexhr-reset-password-page .btn-outline-secondary {
  min-height: 48px;
}

body.bexhr-reset-password-page .input-group-text {
  min-width: 46px;
  justify-content: center;
}

body.bexhr-reset-password-page .bexhr-password-requirements {
  padding: 1rem;
  border: 1px solid #dce9ee;
  border-radius: 16px;
  background: #f8fbfc;
}

body.bexhr-reset-password-page .bexhr-password-requirements-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  color: var(--bexhr-reset-navy);
  font-size: 0.82rem;
  font-weight: 700;
}

body.bexhr-reset-password-page .bexhr-password-requirements-title i {
  color: var(--bexhr-reset-teal);
}

body.bexhr-reset-password-page .bexhr-password-requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
}

body.bexhr-reset-password-page .bexhr-password-requirements-grid span {
  display: flex;
  align-items: center;
  color: var(--bexhr-reset-muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

body.bexhr-reset-password-page .bexhr-password-requirements-grid i {
  color: var(--bexhr-reset-teal);
  font-size: 1rem;
}

body.bexhr-reset-password-page .bexhr-reset-mfa-panel {
  padding: 1rem;
  border: 1px solid rgba(15, 159, 154, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(22, 184, 174, 0.1),
      transparent 38%
    ),
    #f8fcfc;
}

body.bexhr-reset-password-page .bexhr-reset-mfa-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

body.bexhr-reset-password-page .bexhr-reset-mfa-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #e9f8f7;
  color: var(--bexhr-reset-teal);
  font-size: 1.1rem;
}

body.bexhr-reset-password-page .bexhr-reset-mfa-title {
  color: var(--bexhr-reset-navy);
  font-size: 0.88rem;
  font-weight: 700;
}

body.bexhr-reset-password-page .bexhr-reset-mfa-subtitle {
  margin-top: 0.15rem;
  color: var(--bexhr-reset-muted);
  font-size: 0.76rem;
}

body.bexhr-reset-password-page #resetSubmitBtn {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
}

body.bexhr-reset-password-page .bexhr-reset-return {
  padding-top: 1rem;
  border-top: 1px solid #edf1f4;
}

body.bexhr-reset-password-page .bexhr-reset-return a {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
}

/* BEXHR RESET / FIRST-TIME LOGIN UI REFRESH - v1.0.1
   Security mark composition only.
   Presentation only; authentication behaviour is unchanged. */
body.bexhr-reset-password-page .bexhr-reset-security-mark {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem 0.55rem 0.55rem;
  border: 1px solid rgba(15, 159, 154, 0.16);
  border-radius: 18px;
  background: #f0fbfa;
}

body.bexhr-reset-password-page .bexhr-reset-security-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(15, 159, 154, 0.14) 0%,
    rgba(22, 184, 174, 0.22) 100%
  );
  color: var(--bexhr-reset-teal);
  font-size: 1.25rem;
}

body.bexhr-reset-password-page .bexhr-reset-security-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

body.bexhr-reset-password-page .bexhr-reset-security-kicker {
  color: #087f7a;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

body.bexhr-reset-password-page .bexhr-reset-security-note {
  margin-top: 0.16rem;
  color: var(--bexhr-reset-muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

/* =========================================================
   BEXHR RESET PAGE LOADER - v1.0.0
   Lightweight auth-page loader only.

   Safety:
   - presentation only;
   - does not replace the dashboard workspace loader;
   - does not alter Supabase, sessions, MFA, passwords or redirects.
   ========================================================= */

body.bexhr-reset-password-page .bexhr-reset-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(22, 184, 174, 0.12),
      transparent 30%
    ),
    rgba(244, 248, 251, 0.94);
  backdrop-filter: blur(5px);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

body.bexhr-reset-password-page
  .bexhr-reset-page-loader.bexhr-reset-page-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.bexhr-reset-password-page .bexhr-reset-page-loader-panel {
  width: min(100%, 360px);
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bexhr-reset-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 48px rgba(11, 31, 56, 0.12);
}

body.bexhr-reset-password-page .bexhr-reset-page-loader-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: linear-gradient(
    135deg,
    rgba(15, 159, 154, 0.13),
    rgba(22, 184, 174, 0.22)
  );
  color: var(--bexhr-reset-teal);
  font-size: 1.25rem;
}

body.bexhr-reset-password-page .bexhr-reset-page-loader-copy {
  min-width: 0;
  flex: 1 1 auto;
}

body.bexhr-reset-password-page .bexhr-reset-page-loader-title {
  color: var(--bexhr-reset-navy);
  font-size: 0.9rem;
  font-weight: 750;
}

body.bexhr-reset-password-page .bexhr-reset-page-loader-text {
  margin-top: 0.15rem;
  color: var(--bexhr-reset-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

body.bexhr-reset-password-page .bexhr-reset-page-loader-spinner {
  flex: 0 0 auto;
  color: var(--bexhr-reset-teal);
}

@media (max-width: 575.98px) {
  body.bexhr-reset-password-page .container {
    align-items: flex-start;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  body.bexhr-reset-password-page .card {
    border-radius: 20px !important;
  }

  body.bexhr-reset-password-page .card-body {
    padding: 1.25rem !important;
  }

  body.bexhr-reset-password-page .bexhr-reset-security-mark {
    gap: 0.6rem;
    padding: 0.5rem 0.7rem 0.5rem 0.5rem;
  }

  body.bexhr-reset-password-page .bexhr-reset-security-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
    font-size: 1.15rem;
  }

  body.bexhr-reset-password-page .bexhr-password-requirements-grid {
    grid-template-columns: 1fr;
  }

  body.bexhr-reset-password-page #pageTitle {
    font-size: 1.45rem;
  }
}

/* =========================================================
   EMPLOYEE DIRECTORY COMPACT STATUS AND WIDTH - STEP 1
   ========================================================= */

.hr-employee-status-cell {
  vertical-align: middle !important;
  text-align: center !important;
}

.hr-employee-status-stack {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
}

.hr-employee-status-pill {
  min-width: 78px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38rem;
  padding: 0.28rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.hr-employee-status-pill > i {
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
  text-align: center;
}

.hr-employee-status-pill > span {
  line-height: 1;
}

.hr-employee-status-pill--success {
  border-color: #cceedd;
  background: #edf9f3;
  color: #087443;
}

.hr-employee-status-pill--warning {
  border-color: #f4df9d;
  background: #fff9e8;
  color: #8a6100;
}

.hr-employee-status-pill--neutral {
  border-color: #dbe4ed;
  background: #f5f8fb;
  color: #526579;
}

@media (min-width: 992px) {
  body.dashboard-page #employeeRecordsTableWrapper .hr-employee-directory-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .hr-employee-directory-table th:nth-child(1),
  .hr-employee-directory-table td:nth-child(1) {
    width: 5%;
  }

  .hr-employee-directory-table th:nth-child(2),
  .hr-employee-directory-table td:nth-child(2) {
    width: 18%;
  }

  .hr-employee-directory-table th:nth-child(3),
  .hr-employee-directory-table td:nth-child(3) {
    width: 20%;
  }

  .hr-employee-directory-table th:nth-child(4),
  .hr-employee-directory-table td:nth-child(4) {
    width: 18%;
  }

  .hr-employee-directory-table th:nth-child(5),
  .hr-employee-directory-table td:nth-child(5) {
    width: 14%;
  }

  .hr-employee-directory-table th:nth-child(6),
  .hr-employee-directory-table td:nth-child(6) {
    width: 9%;
  }

  .hr-employee-directory-table th:nth-child(7),
  .hr-employee-directory-table td:nth-child(7) {
    width: 16%;
  }

  .hr-employee-directory-table .hr-employee-actions-cell {
    white-space: nowrap;
  }

  .hr-employee-directory-table .hr-employee-row-actions {
    width: auto;
    flex-wrap: nowrap;
  }
}
/* =========================================================
   BEXHR SHARED STATUS PILLS - PHASE 1

   Presentation only:
   - Reuses the Employee List visual model.
   - Stacks only where one Status cell has two status dimensions.
   - Does not modify generic Bootstrap badges, role chips, counts,
     access labels, form-mode labels, or business state.
   ========================================================= */

.bexhr-status-cell {
  vertical-align: middle !important;
  text-align: center !important;
}

.bexhr-status-stack {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
}

.bexhr-status-pill {
  min-width: 78px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38rem;
  padding: 0.28rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.bexhr-status-pill > i {
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
  text-align: center;
}

.bexhr-status-pill > span {
  line-height: 1;
}

.bexhr-status-pill--success {
  border-color: #cceedd;
  background: #edf9f3;
  color: #087443;
}

.bexhr-status-pill--warning {
  border-color: #f4df9d;
  background: #fff9e8;
  color: #8a6100;
}

.bexhr-status-pill--danger {
  border-color: #f4c7c3;
  background: #fff1f0;
  color: #b42318;
}

.bexhr-status-pill--neutral {
  border-color: #dbe4ed;
  background: #f5f8fb;
  color: #526579;
}
/* ==========================================================
   COMPANY ADMIN ADMINISTRATIVE AUDIT HISTORY - PHASE 2I-C
   Read-only tenant-scoped governance panel.
   ========================================================== */

.company-admin-audit-panel {
  border: 1px solid var(--bs-border-color);
  border-radius: 1.1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background:
    linear-gradient(
      135deg,
      rgba(13, 202, 240, 0.055),
      rgba(255, 255, 255, 0.96) 48%
    );
}

.company-admin-audit-heading {
  align-items: flex-start;
  gap: 1rem;
}

.company-admin-audit-heading-icon {
  background: rgba(13, 110, 253, 0.1);
  color: var(--bs-primary);
}

.company-admin-audit-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.company-admin-audit-readonly-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.78rem;
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.075);
  color: var(--bs-primary);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.company-admin-audit-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.company-admin-audit-search {
  flex: 1 1 30rem;
  max-width: 42rem;
}

.company-admin-audit-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 10rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.company-admin-audit-count strong {
  color: var(--bs-body-color);
  font-size: 1rem;
}

.company-admin-audit-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 5.5rem;
  padding: 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.95rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  text-align: center;
}

.company-admin-audit-table-wrapper {
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
}

.company-admin-audit-table {
  min-width: 1120px;
}

.company-admin-audit-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-tertiary-bg);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.company-admin-audit-table td {
  vertical-align: top;
}

.company-admin-audit-identity-cell {
  min-width: 12rem;
}

.company-admin-audit-meta {
  display: inline-flex;
  margin-top: 0.35rem;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
}

.company-admin-audit-changes-cell {
  min-width: 18rem;
}

.company-admin-audit-change + .company-admin-audit-change {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--bs-border-color);
}

.company-admin-audit-change-field {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.company-admin-audit-change-values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.company-admin-audit-change-values i {
  color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
  .company-admin-audit-heading-actions,
  .company-admin-audit-toolbar {
    width: 100%;
  }

  .company-admin-audit-heading-actions {
    justify-content: flex-start;
  }

  .company-admin-audit-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .company-admin-audit-search {
    max-width: none;
  }

  .company-admin-audit-count {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .company-admin-audit-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .company-admin-audit-heading-actions > * {
    width: 100%;
  }
}
/* ==========================================================
   AUDIT RECORD PRESENTATION CLEANUP - PHASE 2I-C1
   Compact event cards replace the wide six-column presentation.
   ========================================================== */

.company-admin-audit-table-wrapper {
  overflow-x: hidden;
  background: transparent;
}

.company-admin-audit-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

.company-admin-audit-table thead {
  display: none;
}

.company-admin-audit-table tbody {
  display: grid;
  gap: 0.8rem;
  padding: 0.8rem;
}

.company-admin-audit-table tbody tr,
.company-admin-audit-table tbody td {
  display: block;
  width: 100%;
}

.company-admin-audit-table tbody tr {
  border: 0;
}

.company-admin-audit-table tbody td {
  padding: 0;
  border: 0;
}

.company-admin-audit-event-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.95rem;
  background: var(--bs-body-bg);
  box-shadow: 0 0.25rem 0.85rem rgba(15, 23, 42, 0.045);
}

.company-admin-audit-event-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.company-admin-audit-event-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
}

.company-admin-audit-event-title > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.company-admin-audit-event-title strong {
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.company-admin-audit-event-title span:not(.company-admin-audit-event-icon) {
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
  text-transform: capitalize;
}

.company-admin-audit-event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(13, 110, 253, 0.18);
  border-radius: 0.75rem;
  background: rgba(13, 110, 253, 0.08);
  color: var(--bs-primary);
}

.company-admin-audit-event-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 0.65rem;
}

.company-admin-audit-event-state time {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  white-space: nowrap;
}

.company-admin-audit-event-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: 0.85rem;
  background: var(--bs-tertiary-bg);
}

.company-admin-audit-party {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.company-admin-audit-party strong,
.company-admin-audit-party-detail {
  overflow-wrap: anywhere;
}

.company-admin-audit-party-detail {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.company-admin-audit-party-label {
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.company-admin-audit-role {
  width: fit-content;
  margin-top: 0.28rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  font-weight: 700;
}

.company-admin-audit-route-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
}

.company-admin-audit-event-changes {
  display: grid;
  gap: 0.45rem;
}

.company-admin-audit-event-changes .company-admin-audit-change {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.58rem 0.7rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.72rem;
  background: var(--bs-body-bg);
}

.company-admin-audit-event-changes
  .company-admin-audit-change
  + .company-admin-audit-change {
  margin-top: 0;
  padding-top: 0.58rem;
  border-top: 1px solid var(--bs-border-color);
}

.company-admin-audit-event-changes
  .company-admin-audit-change-field {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .company-admin-audit-event-header {
    align-items: stretch;
    flex-direction: column;
  }

  .company-admin-audit-event-state {
    justify-content: space-between;
  }

  .company-admin-audit-event-route {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-admin-audit-route-arrow {
    justify-content: flex-start;
    padding-left: 0.2rem;
    transform: rotate(90deg);
  }

  .company-admin-audit-event-changes .company-admin-audit-change {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
}

@media (max-width: 575.98px) {
  .company-admin-audit-table tbody {
    padding: 0.55rem;
  }

  .company-admin-audit-event-card {
    padding: 0.82rem;
  }

  .company-admin-audit-event-state {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   BEXHR MANAGER DASHBOARD VISUAL REFRESH - STEP 1
   Presentation-only manager workspace shell and card system.

   Safety:
   - scoped to .bexhr-manager-visual-refresh;
   - preserves Alpatech tenant branding;
   - does not alter IDs, handlers, queries, reporting-line rules, leave
     decisions, payroll, payslips, roles, sessions, or Supabase access.
   ========================================================= */

body.bexhr-manager-visual-refresh {
  --bexhr-manager-navy-950: #071426;
  --bexhr-manager-navy-900: #0b1f38;
  --bexhr-manager-teal-600: #0f9f9a;
  --bexhr-manager-teal-500: #16b8ae;
  --bexhr-manager-page: #f4f7fb;
  --bexhr-manager-panel: #ffffff;
  --bexhr-manager-panel-soft: #f8fafc;
  --bexhr-manager-text: #172033;
  --bexhr-manager-muted: #667085;
  --bexhr-manager-line: #e4eaf1;
  --bexhr-manager-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
  --bexhr-manager-shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.11);
  --bexhr-manager-accent-rgb: 15, 159, 154;
  background: var(--bexhr-manager-page);
}

body.bexhr-manager-visual-refresh.alpatech-workspace {
  --bexhr-manager-accent-rgb: 11, 95, 149;
}

body.bexhr-manager-visual-refresh:not(.alpatech-workspace) {
  --hr-primary: var(--bexhr-manager-teal-600);
  --hr-primary-soft: var(--bexhr-manager-teal-500);
  --hr-primary-dark: #0a7b78;
  --hr-background: var(--bexhr-manager-page);
  --hr-surface: var(--bexhr-manager-panel);
  --hr-text: var(--bexhr-manager-text);
  --hr-muted: var(--bexhr-manager-muted);
  --hr-border: var(--bexhr-manager-line);
  --hr-soft-surface: #effbf9;
}

body.bexhr-manager-visual-refresh main.container {
  width: min(100%, 1500px);
  max-width: 1500px;
  padding-top: 1.1rem !important;
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

@media (min-width: 992px) {
  body.bexhr-manager-visual-refresh {
    --sidebar-width: 220px;
    padding-left: var(--sidebar-width);
  }

  body.bexhr-manager-visual-refresh .bexhr-sidebar {
    width: var(--sidebar-width);
    padding: 1.1rem 0.9rem;
    gap: 0.75rem;
  }

  body.bexhr-manager-visual-refresh .bexhr-sidebar-brand {
    min-height: 64px;
    padding: 0.35rem 0.55rem 1rem;
    margin-bottom: 0.65rem;
  }

  body.bexhr-manager-visual-refresh .bexhr-sidebar-nav {
    gap: 0.35rem;
  }

  body.bexhr-manager-visual-refresh .bexhr-sidebar-item {
    min-height: 46px;
    padding: 0.68rem 0.8rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 650;
  }

  body.bexhr-manager-visual-refresh .bexhr-sidebar-item i {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  body.bexhr-manager-visual-refresh .bexhr-sidebar-footer {
    padding-top: 0.9rem;
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar {
    background: linear-gradient(180deg, var(--bexhr-manager-navy-950) 0%, var(--bexhr-manager-navy-900) 100%);
    border-right: 0;
    box-shadow: 12px 0 38px rgba(7, 20, 38, 0.16);
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-brand::after {
    content: "BexHR";
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-brand .hr-brand-mark {
    background: linear-gradient(135deg, var(--bexhr-manager-teal-500), #55d7cd);
    color: var(--bexhr-manager-navy-950);
    box-shadow: 0 10px 26px rgba(22, 184, 174, 0.28);
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item {
    color: #aebbc9;
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item i {
    color: #7890a8;
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateX(2px);
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item:hover i {
    color: #9ce8e2;
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item.active {
    background: rgba(22, 184, 174, 0.15);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(98, 221, 211, 0.16);
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item.active::before {
    left: -0.9rem;
    top: 8px;
    bottom: 8px;
    width: 4px;
    background: linear-gradient(180deg, #62ddd3, var(--bexhr-manager-teal-500));
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-item.active i {
    color: #62ddd3;
  }

  body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
  }
}

/* Compact application header */
body.bexhr-manager-visual-refresh .manager-modern-app-header {
  position: relative;
  z-index: 1030;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(14px);
}

body.bexhr-manager-visual-refresh .manager-modern-app-header-main {
  min-height: 82px;
  padding: 0.95rem 1.1rem 0.95rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

body.bexhr-manager-visual-refresh .manager-modern-page-heading {
  min-width: 0;
}

body.bexhr-manager-visual-refresh .manager-modern-context-line {
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh .manager-modern-company-name {
  max-width: min(44vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hr-primary);
}

body.bexhr-manager-visual-refresh .manager-modern-context-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

body.bexhr-manager-visual-refresh .manager-modern-page-heading h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 820;
  letter-spacing: -0.035em;
}

body.bexhr-manager-visual-refresh .manager-modern-page-heading p {
  margin: 0.2rem 0 0;
  max-width: 760px;
  color: #64748b;
  font-size: 0.83rem;
  line-height: 1.45;
}

body.bexhr-manager-visual-refresh .manager-modern-account-area {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

body.bexhr-manager-visual-refresh .manager-modern-account-button {
  min-height: 50px;
  padding: 0.35rem 0.55rem 0.35rem 0.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: inherit;
  text-align: left;
}

body.bexhr-manager-visual-refresh .manager-modern-account-button:hover,
body.bexhr-manager-visual-refresh .manager-modern-account-button:focus-visible {
  border-color: rgba(var(--bexhr-manager-accent-rgb), 0.45);
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--bexhr-manager-accent-rgb), 0.1);
}

body.bexhr-manager-visual-refresh .manager-modern-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

body.bexhr-manager-visual-refresh .manager-modern-avatar-wrap .dashboard-avatar {
  width: 38px !important;
  height: 38px !important;
  border: 0;
  font-size: 0.78rem;
  object-fit: cover;
}

body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .manager-modern-avatar-wrap .dashboard-avatar {
  color: #ffffff;
  background: linear-gradient(135deg, var(--bexhr-manager-teal-600) 0%, var(--bexhr-manager-teal-500) 100%);
}

body.bexhr-manager-visual-refresh .manager-modern-account-copy {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  max-width: 210px;
}

body.bexhr-manager-visual-refresh .manager-modern-account-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh .manager-modern-account-copy small {
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.25;
  text-transform: capitalize;
}

body.bexhr-manager-visual-refresh .manager-modern-account-button > .bi-chevron-down {
  color: #94a3b8;
  font-size: 0.72rem;
}

body.bexhr-manager-visual-refresh .manager-modern-logout-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  body.bexhr-manager-visual-refresh .manager-modern-app-header {
    position: sticky;
    top: 0.75rem;
  }
}

/* Application panels */
body.bexhr-manager-visual-refresh .dashboard-section-card {
  border: 1px solid var(--bexhr-manager-line);
  border-radius: 18px;
  box-shadow: var(--bexhr-manager-shadow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.bexhr-manager-visual-refresh .dashboard-section-card:hover {
  border-color: #d8e0ea;
  box-shadow: var(--bexhr-manager-shadow-hover);
}

body.bexhr-manager-visual-refresh .dashboard-section-card .card-body {
  padding: clamp(1.2rem, 2vw, 1.65rem) !important;
}

body.bexhr-manager-visual-refresh .dashboard-section-card .section-heading {
  color: var(--bexhr-manager-text);
  font-weight: 780;
  letter-spacing: -0.02em;
}

body.bexhr-manager-visual-refresh .dashboard-section-card .section-subtext {
  color: var(--bexhr-manager-muted);
  line-height: 1.55;
}

/* Manager metric cards */
body.bexhr-manager-visual-refresh .manager-metric-card {
  --manager-metric-accent: var(--hr-primary);
  min-height: 126px;
  padding: 1rem !important;
  border: 1px solid color-mix(in srgb, var(--manager-metric-accent) 18%, #dfe7ef) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--manager-metric-accent) 9%, transparent) 0 30px, transparent 31px),
    linear-gradient(150deg, #ffffff 0%, color-mix(in srgb, var(--manager-metric-accent) 3%, #ffffff) 100%) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

body.bexhr-manager-visual-refresh .manager-metric-card::before,
body.bexhr-manager-visual-refresh .manager-metric-card::after {
  content: none !important;
}

body.bexhr-manager-visual-refresh .manager-metric-card--active,
body.bexhr-manager-visual-refresh .manager-metric-card--upcoming {
  --manager-metric-accent: #198754;
}

body.bexhr-manager-visual-refresh .manager-metric-card--attention,
body.bexhr-manager-visual-refresh .manager-metric-card--pending {
  --manager-metric-accent: #c97800;
}

body.bexhr-manager-visual-refresh .manager-metric-card--conflict {
  --manager-metric-accent: #c2413a;
}

body.bexhr-manager-visual-refresh .manager-metric-card--departments,
body.bexhr-manager-visual-refresh .manager-metric-card--types {
  --manager-metric-accent: #0b5f95;
}

body.bexhr-manager-visual-refresh .manager-metric-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--manager-metric-accent) 11%, #ffffff);
  color: var(--manager-metric-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

body.bexhr-manager-visual-refresh .manager-metric-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

body.bexhr-manager-visual-refresh .manager-metric-card .summary-tile-label {
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh .manager-metric-card .summary-tile-value {
  margin: 0 !important;
  color: var(--bexhr-manager-text) !important;
  font-size: 1.45rem !important;
  font-weight: 820 !important;
  line-height: 1.15;
}

body.bexhr-manager-visual-refresh .manager-metric-detail {
  color: #8490a1;
  font-size: 0.7rem;
  line-height: 1.35;
}

/* Profile presentation */
body.bexhr-manager-visual-refresh .manager-profile-identity-card {
  border-color: var(--bexhr-manager-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.bexhr-manager-visual-refresh .manager-profile-identity-card > .dashboard-avatar {
  width: 82px;
  height: 82px;
  font-size: 1.15rem;
  box-shadow: 0 12px 28px rgba(var(--bexhr-manager-accent-rgb), 0.2);
}

body.bexhr-manager-visual-refresh .manager-profile-photo-panel {
  border-style: dashed !important;
  background: #ffffff !important;
}

/* =========================================================
   MANAGER TEAM WORK CARD CONTEXT POLISH - v1.0.0

   Presentation-only refinement for the existing Manager Team work cards.
   Adds clearer operational context, consistent card accents, and richer
   empty states. Existing IDs, renderers, collapse behaviour, reporting-line
   visibility, leave decisions, RLS, queries, sessions, and permissions remain unchanged.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #managerTeamSection
  .dashboard-section-card:has([data-manager-work-card]) {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce6ee;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

body.bexhr-manager-visual-refresh
  #managerTeamSection
  .dashboard-section-card:has([data-manager-work-card])::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 24px 0 0 24px;
  background: #0f766e;
}

body.bexhr-manager-visual-refresh
  #managerTeamSection
  .dashboard-section-card:has([data-manager-work-card="processed"])::before {
  background: #2563eb;
}

body.bexhr-manager-visual-refresh
  #managerTeamSection
  .dashboard-section-card:has([data-manager-work-card="schedule"])::before {
  background: #059669;
}

body.bexhr-manager-visual-refresh
  #managerTeamSection
  .dashboard-section-card:has([data-manager-work-card="employees"])::before {
  background: #d97706;
}

body.bexhr-manager-visual-refresh
  .manager-team-work-card-kicker {
  margin-bottom: 0.38rem;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  [data-manager-work-card="processed"]
  .manager-team-work-card-kicker {
  color: #2563eb;
}

body.bexhr-manager-visual-refresh
  [data-manager-work-card="schedule"]
  .manager-team-work-card-kicker {
  color: #047857;
}

body.bexhr-manager-visual-refresh
  [data-manager-work-card="employees"]
  .manager-team-work-card-kicker {
  color: #b45309;
}

body.bexhr-manager-visual-refresh
  .manager-team-empty-state {
  min-height: 150px;
  padding: 1.25rem !important;
  border: 1px dashed #cfdbe5;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
}

body.bexhr-manager-visual-refresh
  .manager-team-empty-state-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 14px;
  background: #ecfdf9;
  color: #0f766e;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

body.bexhr-manager-visual-refresh
  .manager-team-empty-state strong {
  color: #10233f;
  font-size: 0.9rem;
  font-weight: 800;
}

body.bexhr-manager-visual-refresh
  .manager-team-empty-state > span:last-child {
  max-width: 460px;
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    #managerTeamSection
    .dashboard-section-card:has([data-manager-work-card])::before {
    width: 3px;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-empty-state {
    min-height: 132px;
    border-radius: 16px;
  }
}
/* Compact collapsed manager work cards */
body.bexhr-manager-visual-refresh #managerTeamSection > .dashboard-section-card:has(#pendingRequestsCardHeader),
body.bexhr-manager-visual-refresh #managerTeamSection > .dashboard-section-card:has(#processedRequestsCardHeader),
body.bexhr-manager-visual-refresh #managerTeamSection > .dashboard-section-card:has(#teamScheduleCardHeader),
body.bexhr-manager-visual-refresh #managerTeamSection > .dashboard-section-card:has(#assignedEmployeeRecordsCardHeader) {
  border-left: 4px solid color-mix(in srgb, var(--hr-primary) 55%, #cbd5e1);
}

body.bexhr-manager-visual-refresh #pendingRequestsCardHeader,
body.bexhr-manager-visual-refresh #processedRequestsCardHeader,
body.bexhr-manager-visual-refresh #teamScheduleCardHeader,
body.bexhr-manager-visual-refresh #assignedEmployeeRecordsCardHeader {
  margin-bottom: 0 !important;
  align-items: center !important;
}

body.bexhr-manager-visual-refresh #pendingRequestsCardHeader:has(+ #pendingRequestsCardCollapse:not(.d-none)),
body.bexhr-manager-visual-refresh #processedRequestsCardHeader:has(+ #processedRequestsCardCollapse:not(.d-none)),
body.bexhr-manager-visual-refresh #teamScheduleCardHeader:has(+ #teamScheduleCardCollapse:not(.d-none)),
body.bexhr-manager-visual-refresh #assignedEmployeeRecordsCardHeader:has(+ #assignedEmployeeRecordsCardCollapse:not(.d-none)) {
  margin-bottom: 1.25rem !important;
}

body.bexhr-manager-visual-refresh #togglePendingRequestsCardBtn,
body.bexhr-manager-visual-refresh #toggleProcessedRequestsCardBtn,
body.bexhr-manager-visual-refresh #toggleTeamScheduleCardBtn,
body.bexhr-manager-visual-refresh #toggleAssignedEmployeeRecordsCardBtn {
  min-width: 104px;
  border-radius: 10px;
}

body.bexhr-manager-visual-refresh #pendingRequestsEmptyState,
body.bexhr-manager-visual-refresh #processedRequestsEmptyState,
body.bexhr-manager-visual-refresh #teamScheduleEmptyState,
body.bexhr-manager-visual-refresh #teamEmptyState {
  min-height: 110px;
  border: 1px dashed #d7dee7;
  border-radius: 14px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem !important;
}

/* Buttons, fields, tables, and notices */
body.bexhr-manager-visual-refresh .dashboard-action-btn {
  min-height: 40px;
  border-radius: 10px;
  padding: 0.48rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 700;
}

body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .btn-primary,
body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .dashboard-action-btn.btn-primary,
body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .bexhr-brand-action-btn {
  background: linear-gradient(135deg, var(--bexhr-manager-teal-600), var(--bexhr-manager-teal-500)) !important;
  border-color: var(--bexhr-manager-teal-600) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 159, 154, 0.2) !important;
}

body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .btn-primary:hover,
body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .dashboard-action-btn.btn-primary:hover {
  background: linear-gradient(135deg, #0a7b78, var(--bexhr-manager-teal-600)) !important;
  border-color: #0a7b78 !important;
}

body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .btn-outline-primary {
  color: var(--bexhr-manager-teal-600);
  border-color: rgba(15, 159, 154, 0.46);
}

body.bexhr-manager-visual-refresh:not(.alpatech-workspace) .btn-outline-primary:hover {
  color: #ffffff;
  background: var(--bexhr-manager-teal-600);
  border-color: var(--bexhr-manager-teal-600);
}

body.bexhr-manager-visual-refresh .form-control,
body.bexhr-manager-visual-refresh .form-select,
body.bexhr-manager-visual-refresh .input-group-text {
  min-height: 44px;
  border-color: #dbe3ec;
}

body.bexhr-manager-visual-refresh .form-control,
body.bexhr-manager-visual-refresh .form-select {
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 0.9rem;
}

body.bexhr-manager-visual-refresh .form-control:focus,
body.bexhr-manager-visual-refresh .form-select:focus {
  border-color: var(--hr-primary-soft);
  box-shadow: 0 0 0 0.2rem rgba(var(--bexhr-manager-accent-rgb), 0.14);
}

body.bexhr-manager-visual-refresh .dashboard-table-wrap {
  border: 1px solid var(--bexhr-manager-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

body.bexhr-manager-visual-refresh .dashboard-table-wrap thead th {
  padding-top: 0.78rem;
  padding-bottom: 0.78rem;
  background: #f5f8fb;
  color: #5e6b7c;
  border-bottom-color: var(--bexhr-manager-line);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.bexhr-manager-visual-refresh .dashboard-table-wrap tbody td {
  padding-top: 0.78rem;
  padding-bottom: 0.78rem;
  border-color: #edf1f5;
  color: #344054;
  font-size: 0.86rem;
}

body.bexhr-manager-visual-refresh .dashboard-table-wrap tbody tr:hover td {
  background: #f9fbfd;
}

body.bexhr-manager-visual-refresh .dashboard-table-wrap .bexhr-status-pill {
  vertical-align: middle;
}

body.bexhr-manager-visual-refresh .alert {
  border-radius: 12px;
}

body.bexhr-manager-visual-refresh .border.rounded-4,
body.bexhr-manager-visual-refresh .bg-light-subtle {
  border-color: var(--bexhr-manager-line) !important;
}

body.bexhr-manager-visual-refresh .bg-light-subtle {
  background-color: var(--bexhr-manager-panel-soft) !important;
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh main.container {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }

  body.bexhr-manager-visual-refresh .manager-modern-app-header-main {
    align-items: flex-start;
  }

  body.bexhr-manager-visual-refresh .manager-modern-account-copy,
  body.bexhr-manager-visual-refresh .manager-modern-account-button > .bi-chevron-down {
    display: none;
  }

  body.bexhr-manager-visual-refresh .manager-modern-account-button {
    min-width: 48px;
    padding: 0.3rem;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh main.container {
    padding-top: 0.75rem !important;
  }

  body.bexhr-manager-visual-refresh .manager-modern-app-header-main {
    min-height: 74px;
    padding: 0.8rem;
    gap: 0.75rem;
  }

  body.bexhr-manager-visual-refresh .manager-modern-page-heading p {
    display: none;
  }

  body.bexhr-manager-visual-refresh .manager-modern-context-line {
    font-size: 0.62rem;
  }

  body.bexhr-manager-visual-refresh .manager-modern-company-name {
    max-width: 44vw;
  }

  body.bexhr-manager-visual-refresh .manager-modern-page-heading h1 {
    font-size: 1.2rem;
  }

  body.bexhr-manager-visual-refresh .manager-modern-logout-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  body.bexhr-manager-visual-refresh .manager-metric-card {
    min-height: 112px;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh .manager-modern-account-area {
    gap: 0.35rem;
  }

  body.bexhr-manager-visual-refresh .manager-modern-account-button {
    display: none;
  }

  body.bexhr-manager-visual-refresh .manager-metric-card {
    min-height: 0;
  }
}

/* MANAGER PENDING LEAVE TABLE RESPONSIVE FIT - v1.0.2
   Keep the six-column approval queue inside its desktop card.
   Tablet and mobile retain Bootstrap horizontal scrolling. */
@media (min-width: 1200px) {
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper {
    overflow-x: hidden !important;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper > table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th,
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th:nth-child(1),
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td:nth-child(1) {
    width: 22%;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th:nth-child(2),
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td:nth-child(2) {
    width: 18%;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th:nth-child(3),
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td:nth-child(3) {
    width: 7%;
    text-align: center;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th:nth-child(4),
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td:nth-child(4) {
    width: 15%;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th:nth-child(5),
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td:nth-child(5) {
    width: 20%;
  }

  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper th:nth-child(6),
  body.bexhr-manager-visual-refresh #pendingRequestsTableWrapper td:nth-child(6) {
    width: 18%;
    text-align: right;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper td:nth-child(6) .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsCardCollapse > .dashboard-table-hint {
    display: none;
  }
}

/* MANAGER PROCESSED TABLE AND WORK-CARD ICONS - v1.0.0
   Fit the processed decision history inside its desktop card and add
   restrained, consistent icons to the four Manager work-card headings. */

body.bexhr-manager-visual-refresh #pendingRequestsCardHeader .section-heading,
body.bexhr-manager-visual-refresh #processedRequestsCardHeader .section-heading,
body.bexhr-manager-visual-refresh #teamScheduleCardHeader .section-heading,
body.bexhr-manager-visual-refresh #assignedEmployeeRecordsCardHeader .section-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

body.bexhr-manager-visual-refresh .manager-section-heading-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 0.95rem;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsCardHeader .manager-section-heading-icon {
  color: #b45309;
  border-color: #fed7aa;
  background: #fff7ed;
}

body.bexhr-manager-visual-refresh
  #processedRequestsCardHeader .manager-section-heading-icon {
  color: #047857;
  border-color: #a7f3d0;
  background: #ecfdf5;
}

body.bexhr-manager-visual-refresh
  #teamScheduleCardHeader .manager-section-heading-icon {
  color: #0369a1;
  border-color: #bae6fd;
  background: #f0f9ff;
}

body.bexhr-manager-visual-refresh
  #assignedEmployeeRecordsCardHeader .manager-section-heading-icon {
  color: #0f766e;
  border-color: #99f6e4;
  background: #f0fdfa;
}

@media (min-width: 1200px) {
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper {
    overflow-x: hidden !important;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper > table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th,
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td {
    min-width: 0;
    white-space: normal;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(1),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(1) {
    width: 22%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(2),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(2) {
    width: 17%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(3),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(3) {
    width: 7%;
    text-align: center;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(4),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(4) {
    width: 14%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(5),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(5) {
    width: 19%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(6),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(6) {
    width: 21%;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper td:nth-child(6) {
    line-height: 1.45;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsCardCollapse > .dashboard-table-hint {
    display: none;
  }
}

/* MANAGER PROCESSED COMMENT WRAP CORRECTION - v1.0.1
   Keep long audit and comment text fully visible inside the desktop card. */
@media (min-width: 1200px) {
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper > table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td,
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td * {
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(1),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(1) {
    width: 20%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(2),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(2) {
    width: 16%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(3),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(3) {
    width: 7%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(4),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(4) {
    width: 13%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(5),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(5) {
    width: 18%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper th:nth-child(6),
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper td:nth-child(6) {
    width: 26%;
  }
}

/* MANAGER PROCESSED RESPONSIVE CARD LAYOUT - v1.0.2
   Below desktop width, render each processed leave decision as a readable
   record card instead of forcing a 1120px six-column table. */
@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper {
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border: 0;
    background: transparent;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper > table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper thead {
    display: none;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody {
    display: grid;
    gap: 0.85rem;
    width: 100%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody tr {
    display: grid;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody td {
    display: grid;
    grid-template-columns: minmax(8.5rem, 32%) minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.8rem 1rem !important;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:last-child {
    border-bottom: 0;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td::before {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(1)::before {
    content: "Request";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(2)::before {
    content: "Leave Period";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(3)::before {
    content: "Days";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(4)::before {
    content: "Decision";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(5)::before {
    content: "Decision Audit";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(6)::before {
    content: "Comment";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td[colspan] {
    display: block;
    text-align: center !important;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td[colspan]::before {
    display: none;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsCardCollapse > .dashboard-table-hint {
    display: none;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody td {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* MANAGER PROCESSED CONTAINER-WIDTH SWITCH - v1.0.3
   The fixed sidebar can make the Manager card narrower than the browser.
   Switch to record cards whenever this card is below the table's 1120px fit. */

body.bexhr-manager-visual-refresh #processedRequestsCardCollapse {
  container-type: inline-size;
}

@container (max-width: 1119px) {
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper {
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border: 0;
    background: transparent;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper > table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper thead {
    display: none;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody {
    display: grid;
    gap: 0.85rem;
    width: 100%;
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody tr {
    display: grid;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
  }

  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper tbody td {
    display: grid;
    grid-template-columns: minmax(8.5rem, 32%) minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.8rem 1rem !important;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:last-child {
    border-bottom: 0;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td::before {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(1)::before {
    content: "Request";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(2)::before {
    content: "Leave Period";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(3)::before {
    content: "Days";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(4)::before {
    content: "Decision";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(5)::before {
    content: "Decision Audit";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td:nth-child(6)::before {
    content: "Comment";
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td[colspan] {
    display: block;
    text-align: center !important;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper tbody td[colspan]::before {
    display: none;
  }

  body.bexhr-manager-visual-refresh
    #processedRequestsCardCollapse > .dashboard-table-hint {
    display: none;
  }
}

/* MANAGER PROCESSED INNER SCROLL, BACK TO TOP, AND FAVICON - v1.0.1
   Keep processed audit history contained, provide a clean Back to Top control,
   and use the supplied current Manager favicon. */

body.bexhr-manager-visual-refresh #processedRequestsTableWrapper {
  max-height: min(68vh, 680px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding-right: 0.3rem;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper::-webkit-scrollbar {
  width: 10px;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #c7d2df;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper::-webkit-scrollbar-track {
  background: transparent;
}

body.bexhr-manager-visual-refresh .bexhr-manager-back-to-top-btn {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 1050;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(15, 118, 110, 0.35);
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #0f766e 0%, #0b5f95 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.bexhr-manager-visual-refresh
  .bexhr-manager-back-to-top-btn:not(.d-none) {
  display: inline-flex !important;
}

body.bexhr-manager-visual-refresh
  .bexhr-manager-back-to-top-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(15, 23, 42, 0.27);
}

body.bexhr-manager-visual-refresh
  .bexhr-manager-back-to-top-btn:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.38);
  outline-offset: 3px;
}

body.bexhr-manager-visual-refresh
  .bexhr-manager-back-to-top-btn svg {
  width: 21px;
  height: 21px;
  display: block;
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh #processedRequestsTableWrapper {
    max-height: min(64vh, 560px) !important;
  }

  body.bexhr-manager-visual-refresh .bexhr-manager-back-to-top-btn {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
}

/* MANAGER BACK TO TOP PSEUDO-ELEMENT RESET - v1.0.2
   Remove the legacy encoded glyph injected by older Back to Top CSS.
   The current inline SVG remains the only visible icon. */

body.bexhr-manager-visual-refresh #backToTopBtn::before,
body.bexhr-manager-visual-refresh #backToTopBtn::after {
  content: none !important;
  display: none !important;
}

body.bexhr-manager-visual-refresh #backToTopBtn {
  overflow: hidden !important;
  text-indent: 0 !important;
}

body.bexhr-manager-visual-refresh #backToTopBtn > svg {
  position: relative;
  z-index: 1;
  display: block !important;
  flex: 0 0 auto;
  pointer-events: none;
}

/* =========================================================
   MANAGER OVERVIEW PRESENTATION - v1.0.0
   Restore the Manager Overview presentation.
   ========================================================= */

body.bexhr-manager-visual-refresh .manager-overview-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 2.6vw, 2.1rem);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 22px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 92% 14%,
      rgba(94, 234, 212, 0.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #0b1f36 0%,
      #0b5f72 58%,
      #0f766e 100%
    );
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

body.bexhr-manager-visual-refresh .manager-overview-hero::after {
  content: "";
  position: absolute;
  right: -76px;
  bottom: -105px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

body.bexhr-manager-visual-refresh .manager-overview-hero-copy,
body.bexhr-manager-visual-refresh .manager-overview-quick-actions {
  position: relative;
  z-index: 1;
}

body.bexhr-manager-visual-refresh .manager-overview-hero-copy {
  max-width: 690px;
}

body.bexhr-manager-visual-refresh .manager-overview-eyebrow {
  margin-bottom: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh .manager-overview-hero h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

body.bexhr-manager-visual-refresh .manager-overview-hero p {
  margin: 0.7rem 0 0;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.79);
  line-height: 1.6;
}

body.bexhr-manager-visual-refresh .manager-overview-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

body.bexhr-manager-visual-refresh .manager-overview-action-btn {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 11px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(9px);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
}

body.bexhr-manager-visual-refresh .manager-overview-action-btn:hover,
body.bexhr-manager-visual-refresh .manager-overview-action-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.46);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.21);
}

body.bexhr-manager-visual-refresh
  #managerDashboardSection
  .section-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

body.bexhr-manager-visual-refresh .manager-overview-section-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 1px solid #99f6e4;
  border-radius: 11px;
  color: #0f766e;
  background: #f0fdfa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

body.bexhr-manager-visual-refresh
  .manager-overview-section-icon--leave {
  border-color: #bae6fd;
  color: #0369a1;
  background: #f0f9ff;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh .manager-overview-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh .manager-overview-quick-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh .manager-overview-hero {
    padding: 1.15rem;
    border-radius: 18px;
  }

  body.bexhr-manager-visual-refresh .manager-overview-quick-actions {
    width: 100%;
  }

  body.bexhr-manager-visual-refresh .manager-overview-action-btn {
    flex: 1 1 165px;
    justify-content: center;
  }
}

/* =========================================================
   GLOBAL BACK TO TOP UNIFORMITY - v1.2.0
   Explicit known selectors only.
   Preserves existing JavaScript visibility and click handlers.
   ========================================================= */

body.dashboard-page #backToTopBtn.d-none,
body.dashboard-page #scrollToTopBtn.d-none,
body.dashboard-page .bexhr-back-to-top-btn.d-none,
body.dashboard-page .dashboard-scroll-top-btn.d-none {
  display: none !important;
}

body.dashboard-page #backToTopBtn:not(.d-none),
body.dashboard-page #scrollToTopBtn:not(.d-none),
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none),
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none) {
  position: fixed !important;
  right: 1.25rem !important;
  bottom: 1.25rem !important;
  z-index: 1080 !important;

  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;

  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  border: 1px solid rgba(45, 212, 191, 0.42) !important;
  border-radius: 50% !important;

  background-color: #0f766e !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024'%3E%3Cpath d='M12%2019V5m0%200-6%206m6-6%206%206' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, #0f766e 0%, #0b5f95 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 21px 21px, 100% 100% !important;

  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-decoration: none !important;

  appearance: none !important;
  cursor: pointer !important;
  transform: translateY(0) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

body.dashboard-page #backToTopBtn::before,
body.dashboard-page #backToTopBtn::after,
body.dashboard-page #scrollToTopBtn::before,
body.dashboard-page #scrollToTopBtn::after,
body.dashboard-page .bexhr-back-to-top-btn::before,
body.dashboard-page .bexhr-back-to-top-btn::after,
body.dashboard-page .dashboard-scroll-top-btn::before,
body.dashboard-page .dashboard-scroll-top-btn::after {
  content: none !important;
  display: none !important;
}

body.dashboard-page #backToTopBtn > *,
body.dashboard-page #scrollToTopBtn > *,
body.dashboard-page .bexhr-back-to-top-btn > *,
body.dashboard-page .dashboard-scroll-top-btn > * {
  display: none !important;
}

body.dashboard-page #backToTopBtn:not(.d-none):hover,
body.dashboard-page #scrollToTopBtn:not(.d-none):hover,
body.dashboard-page .bexhr-back-to-top-btn:not(.d-none):hover,
body.dashboard-page .dashboard-scroll-top-btn:not(.d-none):hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.07) !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.29),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.dashboard-page #backToTopBtn:focus-visible,
body.dashboard-page #scrollToTopBtn:focus-visible,
body.dashboard-page .bexhr-back-to-top-btn:focus-visible,
body.dashboard-page .dashboard-scroll-top-btn:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.42) !important;
  outline-offset: 3px !important;
}

@media (max-width: 575.98px) {
  body.dashboard-page #backToTopBtn:not(.d-none),
  body.dashboard-page #scrollToTopBtn:not(.d-none),
  body.dashboard-page .bexhr-back-to-top-btn:not(.d-none),
  body.dashboard-page .dashboard-scroll-top-btn:not(.d-none) {
    right: 0.9rem !important;
    bottom: 0.9rem !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;

    background-size: 19px 19px, 100% 100% !important;
  }
}

/* =========================================================
   OVERVIEW HERO SOURCE-OF-TRUTH ALIGNMENT - v1.0.0

   HR Overview is the design source of truth.
   Manager adopts the same dimensions, colours, typography,
   actions, spacing, and responsive behaviour.

   Desktop: quick actions remain on one line.
   Smaller screens: actions may wrap naturally.
   ========================================================= */

/* ---------------------------------------------------------
   MANAGER - STANDARD BEXHR TENANT
   Match the HR Overview source-of-truth hero.
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh:not(.alpatech-workspace)
  .manager-overview-hero {
  min-height: 180px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 0;
  border-radius: 22px;
  color: #ffffff;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(45, 212, 191, 0.28),
      transparent 25%
    ),
    radial-gradient(
      circle at 72% 110%,
      rgba(255, 255, 255, 0.09),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #071426 0%,
      #0b2542 62%,
      #0f5963 100%
    );

  box-shadow: 0 20px 44px rgba(7, 20, 38, 0.16);
}

/* ---------------------------------------------------------
   MANAGER - ALPATECH TENANT
   Match the HR Alpatech variation rather than replacing
   tenant branding with the standard BexHR palette.
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh.alpatech-workspace
  .manager-overview-hero {
  min-height: 180px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 0;
  border-radius: 22px;
  color: #ffffff;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(54, 185, 207, 0.34),
      transparent 25%
    ),
    radial-gradient(
      circle at 72% 110%,
      rgba(255, 255, 255, 0.1),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #073b63 0%,
      #0b5f95 64%,
      #168fae 100%
    );

  box-shadow: 0 20px 44px rgba(7, 59, 99, 0.18);
}

/* ---------------------------------------------------------
   SHARED MANAGER HERO TYPOGRAPHY
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh .manager-overview-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

body.bexhr-manager-visual-refresh .manager-overview-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 720px;
}

body.bexhr-manager-visual-refresh .manager-overview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: #99f6e4;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh.alpatech-workspace
  .manager-overview-eyebrow {
  color: #c8f6ff;
}

body.bexhr-manager-visual-refresh .manager-overview-hero h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 3.5vw, 2.55rem);
  font-weight: 820;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

body.bexhr-manager-visual-refresh .manager-overview-hero p {
  margin: 0.65rem 0 0;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   SHARED HR + MANAGER ACTION-BUTTON PRESENTATION
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh .manager-overview-quick-actions,
body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

body.bexhr-manager-visual-refresh .manager-overview-action-btn,
body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn {
  min-height: 40px;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh .manager-overview-action-btn:hover,
body.bexhr-manager-visual-refresh .manager-overview-action-btn:focus-visible,
body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn:hover,
body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: none;
}

/* ---------------------------------------------------------
   DESKTOP - KEEP ALL THREE ACTIONS INLINE
   --------------------------------------------------------- */

@media (min-width: 1200px) {
  body.bexhr-manager-visual-refresh .manager-overview-hero,
  body.bexhr-hr-visual-refresh .hr-overview-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    column-gap: 2rem;
  }

  body.bexhr-manager-visual-refresh .manager-overview-quick-actions,
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
  }

  body.bexhr-manager-visual-refresh .manager-overview-action-btn,
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------
   BELOW DESKTOP - WRAPPING IS CORRECT RESPONSIVE BEHAVIOUR
   --------------------------------------------------------- */

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh .manager-overview-hero,
  body.bexhr-hr-visual-refresh .hr-overview-welcome {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh .manager-overview-quick-actions,
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh .manager-overview-hero {
    min-height: 0;
    padding: 1.35rem;
    border-radius: 18px;
  }

  body.bexhr-manager-visual-refresh .manager-overview-hero h2 {
    font-size: 1.65rem;
  }

  body.bexhr-manager-visual-refresh .manager-overview-quick-actions,
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions {
    width: 100%;
  }

  body.bexhr-manager-visual-refresh .manager-overview-action-btn,
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions .btn {
    flex: 1 1 165px;
  }
}

/* =========================================================
   MANAGER OVERVIEW HR SOURCE ALIGNMENT - v1.0.0
   Remove the Manager-only decorative circle so the hero
   matches the HR Overview source-of-truth presentation.
   ========================================================= */

body.bexhr-manager-visual-refresh .manager-overview-hero::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   MANAGER ACTION AND COVERAGE CENTRE - v1.0.0
   Role-aware operational overview using existing Manager data.
   ========================================================= */

body.bexhr-manager-visual-refresh
  .manager-action-coverage-centre {
  display: grid;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, 0.75fr);
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-main,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-header {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-kicker {
  margin-bottom: 0.3rem;
  color: #0f766e;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-header h2,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot h3 {
  margin: 0;
  color: #10233f;
  font-size: 1.15rem;
  font-weight: 820;
  letter-spacing: -0.02em;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-header p {
  margin: 0.4rem 0 0;
  max-width: 700px;
  color: #667085;
  font-size: 0.82rem;
  line-height: 1.55;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge {
  min-height: 30px;
  padding: 0.35rem 0.7rem;
  border: 1px solid #dbe4ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge--primary {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #067647;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge--secondary {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge--mixed {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item {
  min-width: 0;
  min-height: 96px;
  padding: 0.9rem;
  border: 1px solid #e7edf3;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--primary {
  color: #067647;
  background: #d1fadf;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--secondary {
  color: #0369a1;
  background: #e0f2fe;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--conflict {
  color: #b42318;
  background: #fee4e2;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--access {
  color: #c26a00;
  background: #fff1d6;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item strong,
body.bexhr-manager-visual-refresh
  .manager-action-centre-item span,
body.bexhr-manager-visual-refresh
  .manager-action-centre-item small {
  display: block;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item strong {
  color: #10233f;
  font-size: 1.3rem;
  line-height: 1;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item span {
  margin-top: 0.3rem;
  color: #344054;
  font-size: 0.8rem;
  font-weight: 760;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item small {
  margin-top: 0.2rem;
  color: #8490a1;
  font-size: 0.68rem;
  line-height: 1.35;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot {
  background:
    linear-gradient(
      155deg,
      rgba(15, 118, 110, 0.06),
      transparent 48%
    ),
    #ffffff;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  color: #0f766e;
  background: #ccfbf1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

body.bexhr-manager-visual-refresh
  .manager-next-absence {
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid #e5ebf2;
  border-radius: 14px;
  background: #f8fafc;
}

body.bexhr-manager-visual-refresh
  .manager-next-absence strong,
body.bexhr-manager-visual-refresh
  .manager-next-absence span {
  display: block;
}

body.bexhr-manager-visual-refresh
  .manager-next-absence strong {
  color: #10233f;
  font-size: 0.88rem;
}

body.bexhr-manager-visual-refresh
  .manager-next-absence span {
  margin-top: 0.3rem;
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.45;
}

body.bexhr-manager-visual-refresh
  .manager-decision-authority {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-left: 3px solid #0f766e;
  border-radius: 0 12px 12px 0;
  background: #f0fdfa;
}

body.bexhr-manager-visual-refresh
  .manager-decision-authority span,
body.bexhr-manager-visual-refresh
  .manager-decision-authority strong {
  display: block;
}

body.bexhr-manager-visual-refresh
  .manager-decision-authority span {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

body.bexhr-manager-visual-refresh
  .manager-decision-authority strong {
  margin-top: 0.2rem;
  color: #10233f;
  font-size: 0.8rem;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh
    .manager-action-coverage-centre {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    .manager-action-centre-main,
  body.bexhr-manager-visual-refresh
    .manager-coverage-snapshot {
    padding: 1rem;
  }

  body.bexhr-manager-visual-refresh
    .manager-action-centre-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh
    .manager-action-centre-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MANAGER ACTION & COVERAGE VISUAL REFINEMENT - v1.0.1

   CSS-only presentation refinement:
   - stronger, consistently sized icons
   - subtle status-specific card surfaces
   - HR-aligned teal/blue coverage badge
   - improved vertical alignment and spacing
   - no HTML, JavaScript, session, query, role, or permission changes
   ========================================================= */

/* ---------------------------------------------------------
   OUTER OPERATIONAL CARDS
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh
  .manager-action-centre-main,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot {
  border-color: #dce5ee;
  border-radius: 22px;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-main {
  background:
    linear-gradient(
      155deg,
      rgba(15, 118, 110, 0.025),
      transparent 42%
    ),
    #ffffff;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(
      155deg,
      rgba(15, 118, 110, 0.075),
      transparent 50%
    ),
    #ffffff;
}

/* ---------------------------------------------------------
   HEADER AND ROLE BADGE
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh
  .manager-action-centre-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid #edf1f5;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-header h2 {
  font-size: 1.2rem;
  line-height: 1.25;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-header p {
  max-width: 680px;
  margin-top: 0.45rem;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge {
  min-height: 32px;
  padding: 0.4rem 0.78rem;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Replace the disconnected purple treatment with the HR navy/teal language. */
body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge--mixed {
  border-color: rgba(11, 95, 149, 0.24);
  background:
    linear-gradient(
      135deg,
      #eef9fc 0%,
      #e6f7f6 100%
    );
  color: #0b5f72;
}

/* Keep Primary and Secondary badges equally polished. */
body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge--primary {
  border-color: rgba(6, 118, 71, 0.22);
  background: #ecfdf5;
  color: #067647;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-mode-badge--secondary {
  border-color: rgba(3, 105, 161, 0.22);
  background: #f0f9ff;
  color: #0369a1;
}

/* ---------------------------------------------------------
   FOUR OPERATIONAL INDICATOR CARDS
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh
  .manager-action-centre-grid {
  align-items: stretch;
  gap: 0.8rem;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item {
  min-height: 106px;
  padding: 1rem;
  border-radius: 16px;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  box-shadow:
    0 7px 18px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item > div {
  min-width: 0;
}

/* Subtle status-specific card surfaces. */
body.bexhr-manager-visual-refresh
  .manager-action-centre-item:has(
    .manager-action-centre-icon--primary
  ) {
  border-color: rgba(6, 118, 71, 0.18);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3fcf7 100%
    );
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item:has(
    .manager-action-centre-icon--secondary
  ) {
  border-color: rgba(3, 105, 161, 0.18);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3faff 100%
    );
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item:has(
    .manager-action-centre-icon--conflict
  ) {
  border-color: rgba(180, 35, 24, 0.17);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff7f6 100%
    );
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item:has(
    .manager-action-centre-icon--access
  ) {
  border-color: rgba(194, 106, 0, 0.19);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffbf3 100%
    );
}

/* ---------------------------------------------------------
   CONSISTENT ICON SYSTEM
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-size: 1.12rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon i,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon i {
  display: block;
  font-size: inherit;
  line-height: 1;
}

/* Primary action icon */
body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--primary {
  border-color: rgba(6, 118, 71, 0.16);
  color: #067647;
  background:
    linear-gradient(
      145deg,
      #d1fadf 0%,
      #e8fbef 100%
    );
}

/* Secondary visibility icon */
body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--secondary {
  border-color: rgba(3, 105, 161, 0.15);
  color: #0369a1;
  background:
    linear-gradient(
      145deg,
      #dff2ff 0%,
      #edf8ff 100%
    );
}

/* Conflict icon */
body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--conflict {
  border-color: rgba(180, 35, 24, 0.14);
  color: #b42318;
  background:
    linear-gradient(
      145deg,
      #fee4e2 0%,
      #fff0ef 100%
    );
}

/* Access icon */
body.bexhr-manager-visual-refresh
  .manager-action-centre-icon--access {
  border-color: rgba(194, 106, 0, 0.15);
  color: #b75e00;
  background:
    linear-gradient(
      145deg,
      #fff0d1 0%,
      #fff8e9 100%
    );
}

/* Coverage snapshot icon uses the same size and weight. */
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon {
  margin-bottom: 0.9rem;
  border-color: rgba(15, 118, 110, 0.16);
  color: #0f766e;
  background:
    linear-gradient(
      145deg,
      #ccfbf1 0%,
      #e7fcf8 100%
    );
}

/* ---------------------------------------------------------
   CARD TYPOGRAPHY AND ALIGNMENT
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh
  .manager-action-centre-item strong {
  font-size: 1.42rem;
  font-weight: 820;
  line-height: 1;
  letter-spacing: -0.025em;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item span {
  margin-top: 0.32rem;
  color: #26364d;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.3;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item small {
  margin-top: 0.25rem;
  color: #758195;
  font-size: 0.7rem;
  line-height: 1.42;
}

/* ---------------------------------------------------------
   COVERAGE SNAPSHOT REFINEMENT
   --------------------------------------------------------- */

body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot h3 {
  font-size: 1.18rem;
  line-height: 1.3;
}

body.bexhr-manager-visual-refresh
  .manager-next-absence {
  margin: 1rem 0 0.85rem;
  padding: 0.9rem;
  border-color: #dfe7ef;
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f7fafc 100%
    );
}

body.bexhr-manager-visual-refresh
  .manager-decision-authority {
  margin-bottom: 1rem;
  padding: 0.85rem;
  border-left-width: 3px;
  border-left-color: #0f766e;
  background:
    linear-gradient(
      90deg,
      #ecfdf9 0%,
      #f4fcfb 100%
    );
}

body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot
  .dashboard-action-btn {
  min-height: 42px;
  margin-top: auto;
  border-radius: 12px;
}

/* ---------------------------------------------------------
   RESPONSIVE REFINEMENT
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    .manager-action-centre-item {
    min-height: 100px;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body.bexhr-manager-visual-refresh
    .manager-action-centre-icon,
  body.bexhr-manager-visual-refresh
    .manager-coverage-snapshot-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* =========================================================
   MANAGER ACTION CENTRE ICON ALIGNMENT - v1.0.2

   Centre Bootstrap Icons inside their coloured containers.
   No card layout, HTML, JavaScript, session, data, or role changes.
   ========================================================= */

body.bexhr-manager-visual-refresh
  .manager-action-centre-item {
  align-items: center !important;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-item
  > .manager-action-centre-icon {
  align-self: center !important;
  justify-self: start !important;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon
  > i,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon
  > i {
  position: static !important;
  inset: auto !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-icon
  > i::before,
body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon
  > i::before {
  position: static !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 1.05rem !important;
  line-height: 1 !important;

  vertical-align: middle !important;
  transform: none !important;
}

body.bexhr-manager-visual-refresh
  .manager-coverage-snapshot-icon
  > i::before {
  font-size: 1.1rem !important;
}

/* =========================================================
   MANAGER PENDING DECISION ACTION VISIBILITY - v1.0.2

   Preserve the fixed-width approval table and horizontal scroll
   at every viewport where all six columns cannot fit.

   Decision Actions remains sticky and fully contained.
   No HTML, JavaScript, leave authority, workflow, or session changes.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper {
  position: relative;
  width: 100%;
  padding: 0 !important;

  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;

  scrollbar-gutter: auto;
  background: #ffffff;
  box-sizing: border-box;
}

/* Retain the intended fixed column widths. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  > table {
  width: 100% !important;
  min-width: 1208px !important;
  max-width: none !important;

  margin: 0 !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Existing columns total 1000px before Decision Actions. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  col:nth-child(1) {
  width: 240px !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  col:nth-child(2) {
  width: 210px !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  col:nth-child(3) {
  width: 110px !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  col:nth-child(4) {
  width: 180px !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  col:nth-child(5) {
  width: 260px !important;
}

/* Give the authority/status controls enough room to avoid clipping. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  col:nth-child(6) {
  width: 208px !important;
}

/* Keep Decision Actions visible while the other columns scroll. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  th:last-child,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child {
  position: sticky !important;
  right: 0 !important;

  width: 208px !important;
  min-width: 208px !important;
  max-width: 208px !important;

  box-sizing: border-box;
  border-left: 1px solid #dfe7ef;
  border-right: 1px solid #dfe7ef;

  background-clip: padding-box;
  box-shadow: -10px 0 16px -16px rgba(15, 23, 42, 0.55);
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  th:last-child {
  z-index: 4;
  background: #f8fafc;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child {
  z-index: 3;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  tbody
  tr:hover
  td:last-child {
  background: #f8fbfd;
}

/* Primary Manager action controls stay on one line. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child
  .dashboard-action-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Secondary Manager status remains contained inside the final column. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child
  .badge {
  max-width: 100%;
  box-sizing: border-box;

  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}

/* Centre the complete Decision Actions column. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  th:last-child,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Centre both the Primary Manager button group and Secondary Manager status. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child
  > .d-inline-flex {
  width: max-content;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Keep the Secondary Manager badge and View-only text centred vertically. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child
  > .flex-column {
  align-items: center !important;
}

/* Keep the status pill text centred if it wraps. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  td:last-child
  .bexhr-status-pill {
  justify-content: center !important;
  text-align: center !important;
}

/* Pending requests controlled vertical inner scroll. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper {
  max-height: min(64vh, 560px);
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Keep all headers visible while scrolling through requests. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  thead
  th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
}

/* Top-right corner remains fixed in both directions. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  thead
  th:last-child {
  right: 0;
  z-index: 7;
}

/* =========================================================
   MANAGER PENDING REQUEST EMPLOYEE IDENTITY - v1.0.0

   Align the Request heading with employee names and adopt
   the compact HR employee-directory identity presentation.

   No leave workflow, authority, query, session, or table-scroll changes.
   ========================================================= */

/* The heading now begins directly above the employee name,
   accounting for the initials tile and the identity gap. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  thead
  th:first-child {
  padding-left: 4.7rem !important;
}

/* Keep the complete employee identity block aligned with the row edge. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  tbody
  td:first-child {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Compact HR-style employee identity. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

/* Initials tile mirrors the visual language used by the HR directory. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;

  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #ccfbf1 0%,
      #e8fcf8 100%
    );

  color: #0f766e;

  display: grid;
  place-items: center;

  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.025em;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px rgba(15, 23, 42, 0.045);
}

/* Keep name, email and department within the available first-column width. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee-copy {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

/* Stronger employee-name treatment. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee-name {
  max-width: 100%;

  overflow: hidden;
  color: #10233f;

  font-size: 0.86rem;
  font-weight: 790;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Secondary email remains readable but visually quieter. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee-email {
  max-width: 100%;
  margin-top: 0.22rem;

  overflow: hidden;
  color: #667085;

  font-size: 0.7rem;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Department becomes a compact contextual pill rather than loose text. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee-department {
  max-width: 100%;
  min-height: 23px;
  margin-top: 0.42rem;
  padding: 0.18rem 0.46rem;

  border: 1px solid #dce6ee;
  border-radius: 999px;

  background: #f8fafc;
  color: #52647a;

  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  overflow: hidden;

  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-pending-employee-department
  i {
  flex: 0 0 auto;
  color: #0f766e;
  font-size: 0.68rem;
}

/* Very subtle row feedback; no movement or distracting animation. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  tbody
  tr:hover
  .manager-pending-employee-avatar {
  border-color: rgba(15, 118, 110, 0.3);
  background:
    linear-gradient(
      145deg,
      #bff7eb 0%,
      #e2fbf6 100%
    );
}

/* =========================================================
   MANAGER PENDING IDENTITY AND SAFE EMPLOYEE DETAILS - v1.0.1

   - Request header aligns with the initials badge.
   - Employee name aligns with the top of the badge.
   - Work email is removed from the table row.
   - Name opens a restricted read-only employee view.
   ========================================================= */

/* REQUEST aligns with the start of the initials badge. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  thead
  th:first-child {
  padding-left: 1rem !important;
  text-align: left !important;
}

/* First-column rows use the same starting edge as the header. */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  tbody
  td:first-child {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  vertical-align: middle !important;
}

/* Badge and name begin on the same horizontal line. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh
  .manager-pending-employee-avatar {
  margin-top: 0;
}

body.bexhr-manager-visual-refresh
  .manager-pending-employee-copy {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

/* Name behaves like the HR employee-list link. */
body.bexhr-manager-visual-refresh
  .manager-pending-employee-name-link {
  max-width: 100%;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  color: #10233f;

  overflow: hidden;

  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 790;
  line-height: 1.25;

  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;

  cursor: pointer;
}

body.bexhr-manager-visual-refresh
  .manager-pending-employee-name-link:hover,
body.bexhr-manager-visual-refresh
  .manager-pending-employee-name-link:focus-visible {
  color: #0f766e;
  text-decoration: underline;
  outline: none;
}

body.bexhr-manager-visual-refresh
  .manager-pending-employee-name-link:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

/* ---------------------------------------------------------
   RESTRICTED MANAGER EMPLOYEE DETAILS MODAL
   --------------------------------------------------------- */

.manager-employee-details-modal {
  background: rgba(7, 20, 38, 0.56);
  backdrop-filter: blur(6px);
}

.manager-employee-details-panel {
  overflow: hidden;
  border: 1px solid #dbe5ed;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 78px rgba(15, 23, 42, 0.25);
}

.manager-employee-details-header {
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid #e5ebf1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.manager-employee-details-kicker {
  display: block;
  margin-bottom: 0.25rem;

  color: #0f766e;

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.manager-employee-details-header h2 {
  margin: 0;
  color: #0f172a;

  font-size: 1.25rem;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.manager-employee-details-header p {
  margin: 0.35rem 0 0;
  max-width: 620px;

  color: #667085;
  font-size: 0.78rem;
  line-height: 1.5;
}

.manager-employee-details-body {
  padding: 1.35rem;
  background: #f6f9fb;
}

.manager-employee-details-hero {
  padding: 1rem;
  border: 1px solid #dce7ee;
  border-radius: 18px;

  background:
    radial-gradient(
      circle at top right,
      rgba(15, 118, 110, 0.1),
      transparent 34%
    ),
    #ffffff;

  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
}

.manager-employee-details-avatar {
  width: 52px;
  height: 52px;

  border-radius: 16px;
  background: linear-gradient(145deg, #ccfbf1, #e6fcf7);
  color: #0f766e;

  display: grid;
  place-items: center;

  font-size: 0.82rem;
  font-weight: 850;
}

.manager-employee-details-identity {
  min-width: 0;
}

.manager-employee-details-identity h3 {
  margin: 0;
  color: #10233f;

  font-size: 1rem;
  font-weight: 800;
}

.manager-employee-details-identity p {
  margin: 0.25rem 0 0;
  color: #667085;
  font-size: 0.76rem;
}

.manager-employee-details-relationship {
  min-height: 29px;
  padding: 0.32rem 0.62rem;

  border: 1px solid #d8e2ea;
  border-radius: 999px;

  background: #f8fafc;
  color: #52647a;

  display: inline-flex;
  align-items: center;

  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.manager-employee-details-relationship--primary {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #067647;
}

.manager-employee-details-relationship--secondary {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.manager-employee-details-grid {
  margin-top: 1rem;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.manager-employee-details-field {
  min-width: 0;
  min-height: 78px;
  padding: 0.8rem;

  border: 1px solid #e1e8ef;
  border-radius: 14px;

  background: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.manager-employee-details-field span {
  color: #718096;

  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.manager-employee-details-field strong {
  margin-top: 0.28rem;

  overflow-wrap: anywhere;
  color: #10233f;

  font-size: 0.82rem;
  font-weight: 700;
}

.manager-employee-details-privacy-note {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;

  border-left: 3px solid #0f766e;
  border-radius: 0 12px 12px 0;

  background: #ecfdf9;
  color: #52647a;

  display: flex;
  align-items: flex-start;
  gap: 0.55rem;

  font-size: 0.72rem;
  line-height: 1.5;
}

.manager-employee-details-privacy-note i {
  flex: 0 0 auto;
  color: #0f766e;
}

.manager-employee-details-footer {
  padding: 0.9rem 1.35rem;
  border-top: 1px solid #e5ebf1;

  background: #ffffff;

  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .manager-employee-details-modal .modal-dialog {
    margin: 0.65rem;
  }

  .manager-employee-details-panel {
    border-radius: 20px;
  }

  .manager-employee-details-hero {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .manager-employee-details-relationship {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .manager-employee-details-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   MANAGER ACTION CENTRE TARGET LINKS - v1.0.1

   Adds compact action links to the four Overview operational cards and
   briefly highlights the exact destination panel/rows after navigation.

   No HTML table structure, query, role, authority, decision, or session change.
   ========================================================= */

body.bexhr-manager-visual-refresh
  .manager-action-centre-item {
  grid-template-rows: auto auto;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-link {
  grid-column: 2;
  justify-self: start;

  min-height: 28px;
  margin: 0.55rem 0 0;
  padding: 0;

  border: 0;
  background: transparent;
  color: #0b6f75;

  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  font: inherit;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;

  cursor: pointer;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-link i {
  font-size: 0.72rem;
  transition: transform 0.16s ease;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-link:hover,
body.bexhr-manager-visual-refresh
  .manager-action-centre-link:focus-visible {
  color: #0f766e;
  text-decoration: underline;
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-link:hover i,
body.bexhr-manager-visual-refresh
  .manager-action-centre-link:focus-visible i {
  transform: translateX(2px);
}

body.bexhr-manager-visual-refresh
  .manager-action-centre-link:focus-visible {
  border-radius: 5px;
  outline: 3px solid rgba(45, 212, 191, 0.25);
  outline-offset: 3px;
}

body.bexhr-manager-visual-refresh
  .manager-action-destination-focus {
  border-color: rgba(15, 118, 110, 0.42) !important;
  box-shadow:
    0 0 0 4px rgba(45, 212, 191, 0.14),
    0 16px 34px rgba(15, 23, 42, 0.1) !important;
}

body.bexhr-manager-visual-refresh
  tr.manager-action-row-focus
  > td {
  background-color: #ecfdf9 !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  tr.manager-action-row-focus
  > td:last-child {
  background-color: #ecfdf9 !important;
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    .manager-action-centre-link {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-manager-visual-refresh
    .manager-action-centre-link i {
    transition: none;
  }
}

/* =========================================================
   HR AND MANAGER HERO QUICK ACTION DESKTOP CLEANUP - v1.0.2

   The persistent desktop sidebars already expose these routes.
   Hide duplicate hero navigation at the desktop breakpoint,
   while retaining the controls on tablet and mobile layouts.

   CSS-only: no HTML, JavaScript, session, routing, role,
   permission, tenant, query, or dashboard logic changes.
   ========================================================= */

@media (min-width: 992px) {
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions,
  body.bexhr-manager-visual-refresh .manager-overview-quick-actions {
    display: none !important;
  }

  body.bexhr-hr-visual-refresh .hr-overview-welcome,
  body.bexhr-manager-visual-refresh .manager-overview-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh .hr-overview-quick-actions,
  body.bexhr-manager-visual-refresh .manager-overview-quick-actions {
    display: flex !important;
  }
}
/* =========================================================
   MANAGER PROCESSED DECISION AUDIT CARDS - v1.0.1

   Presentation-only modernization of Processed Leave Decisions.
   The existing data source, audit fields, permissions, and inner
   vertical scrolling remain unchanged.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #processedRequestsCardCollapse
  > .dashboard-table-hint {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper {
  width: 100%;
  max-height: min(68vh, 680px) !important;
  padding: 0.2rem 0.35rem 0.2rem 0.1rem;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: transparent;
  scrollbar-gutter: stable;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  > table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  colgroup,
body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  thead {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  tbody {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.9rem !important;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  .manager-processed-audit-row {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  .manager-processed-audit-cell {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bexhr-manager-visual-refresh
  #processedRequestsTableWrapper
  .manager-processed-audit-cell::before {
  content: none !important;
  display: none !important;
}

body.bexhr-manager-visual-refresh
  .manager-processed-audit-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #dce5ee;
  border-left: 4px solid #64748b;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(248, 250, 252, 0.82), #ffffff 46%);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.bexhr-manager-visual-refresh
  .manager-processed-audit-card--approved {
  border-left-color: #079455;
}

body.bexhr-manager-visual-refresh
  .manager-processed-audit-card--rejected {
  border-left-color: #d92d20;
}

body.bexhr-manager-visual-refresh
  .manager-processed-audit-card--returned {
  border-left-color: #dc6803;
}

body.bexhr-manager-visual-refresh
  .manager-processed-audit-card--cancelled {
  border-left-color: #56708e;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-avatar {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, #ccfbf1, #e9fcf8);
  color: #0f766e;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.025em;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-person {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-name,
body.bexhr-manager-visual-refresh
  .manager-processed-card-name-link {
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #10233f;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-name-link {
  cursor: pointer;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-name-link:hover,
body.bexhr-manager-visual-refresh
  .manager-processed-card-name-link:focus-visible {
  color: #0f766e;
  text-decoration: underline;
  outline: none;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-name-link:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-department {
  max-width: 100%;
  margin-top: 0.28rem;
  color: #667085;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-department
  i {
  flex: 0 0 auto;
  color: #0f766e;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status-area {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.4rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status,
body.bexhr-manager-visual-refresh
  .manager-processed-card-relationship {
  min-height: 27px;
  padding: 0.3rem 0.62rem;
  border: 1px solid #d8e2ea;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-relationship {
  background: #f8fafc;
  color: #52647a;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status--approved {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #067647;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status--rejected {
  border-color: #fecdca;
  background: #fef3f2;
  color: #b42318;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status--returned {
  border-color: #fedf89;
  background: #fffaeb;
  color: #b54708;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status--cancelled {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-status--neutral {
  border-color: #d8e2ea;
  background: #f8fafc;
  color: #52647a;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-meta {
  margin-top: 0.85rem;
  padding: 0.75rem;
  border: 1px solid #e3eaf0;
  border-radius: 14px;
  background: #f8fafc;
  display: grid;
  grid-template-columns: 0.9fr 1.5fr 0.7fr 0.9fr;
  gap: 0.65rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-meta-item {
  min-width: 0;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-meta-item
  span,
body.bexhr-manager-visual-refresh
  .manager-processed-card-meta-item
  strong {
  display: block;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-meta-item
  span {
  color: #7a8699;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-meta-item
  strong {
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  color: #26364d;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-line {
  margin-top: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-left: 3px solid #0f766e;
  border-radius: 0 12px 12px 0;
  background: #f0fdfa;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ccfbf1;
  color: #0f766e;
  display: grid;
  place-items: center;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-line
  strong,
body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-line
  span {
  display: block;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-line
  strong {
  color: #26364d;
  font-size: 0.75rem;
  font-weight: 750;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-line
  div
  > span {
  margin-top: 0.18rem;
  color: #718096;
  font-size: 0.68rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-chips {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-chip {
  min-height: 27px;
  padding: 0.3rem 0.58rem;
  border: 1px solid #dfe7ee;
  border-radius: 999px;
  background: #ffffff;
  color: #52647a;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.25;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-audit-chip
  i {
  color: #0f766e;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-comment {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e3eaf0;
  border-radius: 13px;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-comment-label {
  display: block;
  margin-bottom: 0.3rem;
  color: #718096;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-comment-text,
body.bexhr-manager-visual-refresh
  .manager-processed-card-comment-details
  div {
  overflow-wrap: anywhere;
  color: #344054;
  font-size: 0.73rem;
  line-height: 1.5;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-comment-details {
  margin-top: 0.45rem;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-comment-details
  summary {
  width: max-content;
  color: #0f766e;
  font-size: 0.69rem;
  font-weight: 750;
  cursor: pointer;
}

body.bexhr-manager-visual-refresh
  .manager-processed-card-comment-details
  div {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #edf1f5;
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh
    .manager-processed-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh
    #processedRequestsTableWrapper {
    max-height: min(64vh, 580px) !important;
    padding-right: 0.2rem;
  }

  body.bexhr-manager-visual-refresh
    .manager-processed-audit-card {
    padding: 0.85rem;
    border-radius: 16px;
  }

  body.bexhr-manager-visual-refresh
    .manager-processed-card-header {
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh
    .manager-processed-card-status-area {
    width: 100%;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.bexhr-manager-visual-refresh
    .manager-processed-card-meta {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MANAGER TEAM SCHEDULE EMPLOYEE IDENTITY - v1.0.0

   Apply the approved pending-request employee identity pattern to the
   Team Leave Schedule without changing its data, timing, overlap logic,
   internal scroll, table columns, or employee-details security boundary.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  thead
  th:first-child {
  padding-left: 1rem !important;
  text-align: left !important;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  tbody
  td:first-child {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  vertical-align: middle !important;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  .manager-schedule-employee {
  align-items: start;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  .manager-schedule-employee
  .manager-pending-employee-avatar {
  margin-top: 0;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  tbody
  tr:hover
  .manager-pending-employee-avatar {
  border-color: rgba(15, 118, 110, 0.3);
  background: linear-gradient(145deg, #bff7eb 0%, #e2fbf6 100%);
}

/* =========================================================
   MANAGER TEAM LEAVE SCHEDULE FULL-WIDTH RECORDS - v1.0.2

   One full-width planning record per approved/current leave item.
   Employee identity leads; timing and overlap are compact signals;
   leave metadata uses one unified band rather than nested cards.

   Presentation only: no query, RLS, permission, authority, leave,
   overlap calculation, employee-details, or session changes.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #teamScheduleCardCollapse
  > .dashboard-table-hint {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper {
  width: 100%;
  max-height: min(62vh, 560px) !important;
  padding: 0 0.35rem 0 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  > table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;

  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  thead {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  tbody {
  display: grid;
  width: 100%;
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  .manager-team-schedule-record-row,
body.bexhr-manager-visual-refresh
  #teamScheduleTableWrapper
  .manager-team-schedule-record-cell {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record {
  width: 100%;
  min-width: 0;
  padding: 1rem 1.1rem;

  border: 1px solid #dbe6ee;
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 118, 110, 0.035),
      transparent 42%
    ),
    #ffffff;

  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record:hover {
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-main {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-identity {
  min-width: 0;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-employee {
  min-width: 0;

  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 14px;

  background: linear-gradient(145deg, #ccfbf1, #e8fcf8);
  color: #0f766e;

  display: grid;
  place-items: center;

  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.025em;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-employee-copy {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-name,
body.bexhr-manager-visual-refresh
  .manager-team-schedule-name-link {
  max-width: 100%;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  color: #10233f;

  overflow: hidden;

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;

  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-name-link {
  cursor: pointer;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-name-link:hover,
body.bexhr-manager-visual-refresh
  .manager-team-schedule-name-link:focus-visible {
  color: #0f766e;
  text-decoration: underline;
  outline: none;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-name-link:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-department {
  max-width: 100%;
  min-height: 23px;
  margin-top: 0.4rem;
  padding: 0.18rem 0.46rem;

  border: 1px solid #dce6ee;
  border-radius: 999px;

  background: #f8fafc;
  color: #52647a;

  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  overflow: hidden;

  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-department
  i {
  flex: 0 0 auto;
  color: #0f766e;
  font-size: 0.68rem;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, auto));
  align-items: start;
  gap: 0;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-signal {
  min-width: 0;
  padding: 0.1rem 0.9rem;
  border-left: 1px solid #e1e8ef;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-signal-label {
  display: block;
  margin-bottom: 0.35rem;

  color: #718096;

  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-signal-value {
  min-width: 0;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-signal-value
  .d-flex {
  align-items: flex-start;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-signal-value
  .badge {
  max-width: 100%;
  white-space: normal;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-signal-value
  .small {
  margin-top: 0.25rem !important;
  color: #667085 !important;
  font-size: 0.69rem;
  line-height: 1.35;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-meta {
  margin: 0.9rem 0 0;
  padding: 0.78rem 0.9rem;

  border: 1px solid #e1e8ef;
  border-radius: 14px;

  background: #f8fafc;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(110px, 0.6fr);
  align-items: stretch;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-meta
  > div {
  min-width: 0;
  padding: 0 0.9rem;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-meta
  > div:first-child {
  padding-left: 0;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-meta
  > div + div {
  border-left: 1px solid #dfe7ee;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-meta
  dt {
  margin: 0;
  color: #718096;

  font-size: 0.61rem;
  font-weight: 820;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-team-schedule-record-meta
  dd {
  margin: 0.28rem 0 0;
  color: #10233f;

  overflow-wrap: anywhere;

  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.35;
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record-main {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.9rem;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record-signals {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-signal:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh
    #teamScheduleTableWrapper {
    padding-right: 0 !important;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record {
    padding: 0.9rem;
    border-radius: 16px;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record-signals {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-signal,
  body.bexhr-manager-visual-refresh
    .manager-team-schedule-signal:first-child {
    padding: 0;
    border-left: 0;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record-meta {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record-meta
    > div {
    padding: 0;
  }

  body.bexhr-manager-visual-refresh
    .manager-team-schedule-record-meta
    > div + div {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #dfe7ee;
    border-left: 0;
  }
}

/* =========================================================
   MANAGER ASSIGNED EMPLOYEE RECORDS COMPACT CARDS - v1.0.0

   Presentation-only modernisation of the existing manager-scoped employee
   records. Search, refresh, RLS, reporting lines, portal-access resolution,
   employee-details scope and session behaviour remain unchanged.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #assignedEmployeeRecordsCardCollapse
  .dashboard-table-hint {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper {
  width: 100%;
  max-height: min(64vh, 620px) !important;
  padding: 0 0.25rem 0 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper
  > table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;

  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper
  thead {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper
  tbody {
  display: grid;
  width: 100%;
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper
  .manager-assigned-employee-card-row {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper
  .manager-assigned-employee-card-cell {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-card {
  width: 100%;
  min-width: 0;
  padding: 1rem;

  border: 1px solid #dce6ee;
  border-radius: 18px;

  background:
    radial-gradient(
      circle at top right,
      rgba(15, 118, 110, 0.055),
      transparent 30%
    ),
    #ffffff;

  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-card:hover {
  border-color: rgba(15, 118, 110, 0.27);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-identity {
  min-width: 0;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;

  border: 1px solid rgba(15, 118, 110, 0.17);
  border-radius: 15px;

  background: linear-gradient(145deg, #ccfbf1 0%, #e8fcf8 100%);
  color: #0f766e;

  display: grid;
  place-items: center;

  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.025em;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 6px 14px rgba(15, 23, 42, 0.04);
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-copy {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-name,
body.bexhr-manager-visual-refresh
  .manager-assigned-employee-name-link {
  max-width: 100%;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  color: #10233f;

  overflow: hidden;

  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;

  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-name-link {
  cursor: pointer;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-name-link:hover,
body.bexhr-manager-visual-refresh
  .manager-assigned-employee-name-link:focus-visible {
  color: #0f766e;
  text-decoration: underline;
  outline: none;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-name-link:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-role {
  max-width: 100%;
  margin-top: 0.28rem;

  overflow: hidden;
  color: #667085;

  font-size: 0.74rem;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-access {
  flex: 0 0 auto;

  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.35rem;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-access-label {
  color: #718096;

  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-access
  > .d-flex {
  align-items: flex-end !important;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-access
  .badge {
  align-self: flex-end !important;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-meta-band {
  margin-top: 0.9rem;

  border: 1px solid #e1e8ef;
  border-radius: 14px;

  background: #f8fafc;

  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(0, 1fr)
    minmax(130px, 0.65fr);
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-meta-item {
  min-width: 0;
  padding: 0.72rem 0.82rem;

  display: flex;
  justify-content: center;
  flex-direction: column;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-meta-item
  + .manager-assigned-employee-meta-item {
  border-left: 1px solid #dfe7ee;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-meta-item
  span {
  color: #718096;

  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.052em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-meta-item
  strong {
  margin-top: 0.24rem;

  overflow-wrap: anywhere;
  color: #10233f;

  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
}

body.bexhr-manager-visual-refresh
  .manager-assigned-employee-loading {
  min-height: 110px;
  padding: 1rem;

  border: 1px solid #dce6ee;
  border-radius: 18px;

  background: #ffffff;
  color: #667085;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  font-size: 0.78rem;
}

body.bexhr-manager-visual-refresh
  #teamTableWrapper
  .manager-action-target-highlight
  .manager-assigned-employee-card,
body.bexhr-manager-visual-refresh
  #teamTableWrapper
  tr.manager-action-target-highlight
  .manager-assigned-employee-card {
  border-color: rgba(15, 118, 110, 0.48);
  box-shadow:
    0 0 0 3px rgba(15, 118, 110, 0.12),
    0 12px 28px rgba(15, 23, 42, 0.07);
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-card {
    padding: 0.85rem;
    border-radius: 16px;
  }

  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-access {
    width: 100%;
    align-items: flex-start;
  }

  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-access
    > .d-flex {
    align-items: flex-start !important;
  }

  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-access
    .badge {
    align-self: flex-start !important;
  }

  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-meta-band {
    grid-template-columns: 1fr;
  }

  body.bexhr-manager-visual-refresh
    .manager-assigned-employee-meta-item
    + .manager-assigned-employee-meta-item {
    border-top: 1px solid #dfe7ee;
    border-left: 0;
  }
}

/* =========================================================
   MANAGER PROFILE HR VISUAL PARITY - v1.0.1
   Presentation-only follow-up to the Manager dashboard visual pilot.

   Safety:
   - keeps every existing profile ID and JavaScript event intact;
   - keeps Alpatech colours, flame identity, and tenant favicon intact;
   - keeps the refined Manager profile arrangement without changing product or tenant branding;
   - does not change Supabase, payroll, employee, email, tenant, or role logic.
   ========================================================= */

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-workspace-card {
  overflow: visible;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-eyebrow {
  margin-bottom: 0.35rem;
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-security-badge,
body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--bexhr-accent-rgb), 0.08);
  color: var(--hr-primary-dark);
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-security-badge {
  min-height: 34px;
  padding: 0.4rem 0.72rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 315px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-identity-panel,
body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-details-panel {
  border: 1px solid var(--bexhr-line);
  border-radius: 18px;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-identity-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 1.45rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(var(--bexhr-accent-rgb), 0.13), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-identity-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hr-primary), var(--hr-primary-soft));
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-avatar-stage {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0.25rem auto 1rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-main-avatar,
body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-main-image {
  width: 112px !important;
  height: 112px !important;
  border-radius: 50%;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-main-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hr-primary-dark);
  background: linear-gradient(135deg, #ffffff 0%, rgba(var(--bexhr-accent-rgb), 0.15) 100%);
  border: 4px solid #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
  font-size: 1.55rem;
  font-weight: 850;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-main-image {
  display: block;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-main-image.d-none,
body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-main-avatar.d-none {
  display: none !important;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-avatar-status {
  position: absolute;
  right: 6px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #18a957;
  box-shadow: 0 4px 10px rgba(24, 169, 87, 0.25);
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-name {
  color: var(--bexhr-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-email {
  max-width: 100%;
  color: var(--bexhr-muted);
  font-size: 0.84rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-member-pill {
  min-height: 30px;
  padding: 0.32rem 0.66rem;
}

/* MANAGER PROFILE PHOTO ACTIONS - v1.0.0
   Layout only for the Manager Profile Upload and Remove Picture controls.
   This does not affect profile storage, tenant scope, permissions, or other dashboards. */
body.bexhr-manager-visual-refresh .manager-profile-photo-actions {
  display: grid;
  gap: 0.55rem;
}

body.bexhr-manager-visual-refresh .manager-profile-photo-actions .btn {
  width: 100%;
  min-height: 40px;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 750;
}

/* Keep Remove Picture visibly unavailable when no stored image exists. */
body.bexhr-manager-visual-refresh #removeManagerProfileImageBtn:disabled {
  border-color: #d6dde5;
  background: #f8fafc;
  color: #94a3b8;
  opacity: 1;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-photo-panel {
  width: 100%;
  margin-top: 1.35rem;
  padding: 1rem;
  border: 1px solid var(--bexhr-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-photo-title {
  display: block;
  color: var(--bexhr-text);
  font-size: 0.85rem;
  font-weight: 800;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-photo-help {
  color: var(--bexhr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-photo-icon {
  color: var(--hr-primary);
  font-size: 1.2rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection #managerProfileImageInput {
  min-height: 42px;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection #saveManagerProfileImageBtn {
  width: 100%;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-details-panel {
  min-width: 0;
  padding: 1.45rem;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-details-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.18);
  border-radius: 12px;
  background: rgba(var(--bexhr-accent-rgb), 0.08);
  color: var(--hr-primary);
  font-size: 1.1rem;
}

body.bexhr-manager-visual-refresh #managerProfileSection input.form-control[readonly] {
  background-color: #f5f7fa !important;
  border-color: #dfe5ec;
  color: #667085;
  cursor: not-allowed;
  box-shadow: none;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bexhr-line);
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-system-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 540px;
  color: var(--bexhr-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-system-note i {
  margin-top: 0.1rem;
  color: var(--hr-primary);
}

body.bexhr-manager-visual-refresh #managerProfileSection #saveManagerProfileBtn {
  flex: 0 0 auto;
  min-width: 184px;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-layout {
    grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-layout {
    grid-template-columns: 1fr;
  }

  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-identity-panel {
    align-items: flex-start;
    text-align: left;
  }

  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-avatar-stage {
    margin-left: 0;
  }

  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-photo-panel {
    margin-top: 1rem;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-card-header,
  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-details-heading,
  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh #managerProfileSection .hr-profile-security-badge {
    align-self: flex-start;
  }

  body.bexhr-manager-visual-refresh #managerProfileSection #saveManagerProfileBtn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   MANAGER SELF-SERVICE FULL HR VISUAL PARITY - v1.0.1

   Presentation only:
   - existing ss* IDs remain unchanged;
   - employee-self-service.js remains the data/workflow owner;
   - leave, payroll, payslip, employee, tenant, and Supabase logic are untouched;
   - the shared dashboard toast is reused by manager-dashboard.js.
   ========================================================= */

body.bexhr-manager-visual-refresh #managerSelfServiceSection {
  --ss-blue: #0e7490;
  --ss-blue-soft: #e8f8fb;
  --ss-green: #15803d;
  --ss-green-soft: #eaf8ef;
  --ss-violet: #6d28d9;
  --ss-violet-soft: #f2ecff;
  --ss-amber: #b45309;
  --ss-amber-soft: #fff4df;
  --ss-slate: #475569;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.82) !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.075), transparent 32%),
    #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.065) !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card::before,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #0f9f9a 0%, #38bdf8 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card {
  background:
    radial-gradient(circle at 88% 18%, rgba(56, 189, 248, 0.14), transparent 25%),
    radial-gradient(circle at 70% 100%, rgba(20, 184, 166, 0.1), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fcfd 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-heading,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-heading {
  align-items: center;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-kicker {
  display: block;
  margin-bottom: 0.32rem;
  color: #07857f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-balance,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-decision,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-request,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-payroll,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history-payroll {
  border: 1px solid rgba(14, 116, 144, 0.16);
  color: var(--ss-blue);
  background: linear-gradient(145deg, #ecfeff 0%, #e0f2fe 100%);
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.1);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-decision,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history {
  border-color: rgba(109, 40, 217, 0.14);
  color: var(--ss-violet);
  background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-request,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-balance {
  border-color: rgba(21, 128, 61, 0.14);
  color: var(--ss-green);
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-payroll,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history-payroll {
  border-color: rgba(180, 83, 9, 0.14);
  color: var(--ss-amber);
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-left: auto;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions {
  padding: 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions .btn {
  min-height: 40px;
  border-radius: 12px;
  padding-inline: 1rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar .btn {
  min-height: 38px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-empty-state {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border: 1px dashed rgba(148, 163, 184, 0.46);
  border-radius: 16px;
  color: #64748b !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
  text-align: center;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-empty-state::before {
  content: "i";
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 0.65rem;
  border-radius: 10px;
  color: #0e7490;
  background: #e6f7fa;
  font-family: "Inter", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
}

/* Leave balance records: covers present, empty, and loading output produced by EmployeeSelfService. */
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid > [class*="col-"] {
  display: flex;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .info-tile,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .leave-entitlement-tile {
  width: 100%;
  min-height: 190px;
  padding: 1.15rem;
  border: 1px solid rgba(21, 128, 61, 0.17);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.11), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%);
  box-shadow: 0 12px 26px rgba(21, 128, 61, 0.065);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .badge {
  border-radius: 999px;
  padding: 0.38rem 0.62rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.1);
}

/* Latest decision record, including the richer cancelled/approved render from the module. */
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content > .info-tile,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content > .border,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content > [class*="rounded"] {
  border: 1px solid rgba(109, 40, 217, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.09), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 100%) !important;
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.06);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .info-tile-label,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .text-secondary {
  color: #64748b !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .row > [class*="col-"] > div,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .d-grid > div {
  border-radius: 14px;
}

/* Leave request form. */
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-control,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-select {
  min-height: 48px;
  border-color: #d8e2eb;
  background-color: #ffffff;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card textarea.form-control {
  min-height: 118px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-control:focus,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-select:focus {
  border-color: rgba(14, 116, 144, 0.72);
  box-shadow: 0 0 0 0.22rem rgba(14, 116, 144, 0.11);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-workflow-note {
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 16px;
  color: #475569;
  background: linear-gradient(135deg, #f0fdfa 0%, #f0f9ff 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-workflow-note .bi {
  color: #0e7490 !important;
}

/* Leave history records generated by employee-self-service.js. */
body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 116, 144, 0.32) rgba(148, 163, 184, 0.08);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area::-webkit-scrollbar {
  width: 8px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.3);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList {
  display: grid;
  gap: 0.85rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList > .card,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList > .border,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList > [class*="rounded"] {
  margin: 0 !important;
  padding: 1rem !important;
  border: 1px solid rgba(148, 163, 184, 0.27) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.065), transparent 28%),
    #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList .badge {
  border-radius: 999px;
  padding: 0.38rem 0.58rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList .bg-light,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList .bg-light-subtle {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px !important;
  background: #f8fafc !important;
}

/* Current payslip summary. */
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid > [class*="col-"] {
  display: flex;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
  position: relative;
  width: 100%;
  min-height: 132px;
  padding: 1.05rem 1.05rem 1.05rem 4.25rem;
  border: 1px solid rgba(180, 83, 9, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #fffcf5 100%);
  box-shadow: 0 10px 24px rgba(180, 83, 9, 0.055);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile .d-flex {
  display: block !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile .bi {
  position: absolute;
  top: 1.05rem;
  left: 1.05rem;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #b45309 !important;
  background: #fff3d6;
  font-size: 1.05rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile-value {
  margin-top: 0.35rem;
  color: #0f172a;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 800;
}

/* PAYROLL SUMMARY FINANCIAL FIGURE CLARITY - STEP 1
   Keep currency codes and digits together, while preserving the shared
   self-service module's authorised-record and hide/show behaviour. */
body.dashboard-page #ssCurrentPayrollSummaryGrid .ss-payroll-financial-value {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.025em;
}

/* Standard desktop widths have less usable space after the fixed sidebar.
   Keep the self-service summary in a stable two-by-two layout until a wide
   desktop can comfortably hold all four values on one row. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  body.dashboard-page #ssCurrentPayrollSummaryGrid > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* Payroll record filters and records. */
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-filter-panel {
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 17px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdfa 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-filter-panel .form-control {
  min-height: 46px;
  border-color: #d8e2eb;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records {
  max-height: 460px !important;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 18px;
  background: #ffffff;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records table {
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0 8px;
  padding: 0 0.45rem 0.45rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.78rem 0.7rem;
  border: 0;
  color: #64748b;
  background: #f1f5f9;
  font-size: 0.68rem !important;
  letter-spacing: 0.055em;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody tr {
  filter: drop-shadow(0 5px 12px rgba(15, 23, 42, 0.035));
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
  padding: 0.88rem 0.7rem;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  color: #334155;
  background: #ffffff;
  font-size: 0.82rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:first-child {
  border-left: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px 0 0 14px;
  color: #0f172a;
  font-weight: 700;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:last-child {
  border-right: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0 14px 14px 0;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records .btn {
  min-width: 36px;
  min-height: 34px;
  border-radius: 10px;
}

/* Keep the existing notification useful on narrow Self-Service screens. */
body.bexhr-manager-visual-refresh #dashboardToast .card {
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .ss-leave-main-row {
    row-gap: 1rem !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
    max-height: 560px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0.25rem !important;
  }
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-heading,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-heading {
    align-items: flex-start;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records {
    max-height: 620px !important;
    overflow-x: hidden !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    padding: 0.55rem;
    border-spacing: 0;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records thead {
    display: none;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tr,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records td {
    display: block;
    width: 100%;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody {
    display: grid;
    gap: 0.8rem;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody tr {
    overflow: hidden;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 17px;
    background: #ffffff;
    filter: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
    display: grid;
    grid-template-columns: minmax(108px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
    border-radius: 0 !important;
    text-align: right !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:last-child {
    border-bottom: 0 !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td::before {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-align: left;
    text-transform: uppercase;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(1)::before { content: "Pay cycle"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(2)::before { content: "Pay date"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(3)::before { content: "Gross pay"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(4)::before { content: "Tax"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(5)::before { content: "Pension"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(6)::before { content: "Deductions"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(7)::before { content: "Net pay"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(8)::before { content: "Status"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(9)::before { content: "View payslip"; }
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(10)::before { content: "Download PDF"; }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .card-body {
    padding: 1.15rem !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-main {
    align-items: flex-start;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions .btn,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
    min-height: 112px;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
    max-height: 520px !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    text-align: left !important;
  }
}

/* =========================================================
   BEXHR MANAGER PROFILE HR VISUAL PARITY - v1.0.0

   Presentation-only Manager Profile styling.
   Mirrors the approved HR Profile design while retaining:
   - Manager-specific HTML IDs;
   - existing profile rendering and image upload JavaScript;
   - tenant branding;
   - role and department protections;
   - Supabase and session behaviour.
   ========================================================= */

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-workspace-card {
  overflow: visible;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-eyebrow {
  margin-bottom: 0.35rem;
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-security-badge,
body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--bexhr-accent-rgb), 0.08);
  color: var(--hr-primary-dark);
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-security-badge {
  min-height: 34px;
  padding: 0.4rem 0.72rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 315px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-identity-panel,
body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-details-panel {
  border: 1px solid var(--bexhr-line);
  border-radius: 18px;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-identity-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 1.45rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb), 0.13),
      transparent 34%
    ),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-identity-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--hr-primary),
    var(--hr-primary-soft)
  );
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-avatar-stage {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0.25rem auto 1rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-main-avatar,
body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-main-image {
  width: 112px !important;
  height: 112px !important;
  border-radius: 50%;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-main-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hr-primary-dark);
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(var(--bexhr-accent-rgb), 0.15) 100%
  );
  border: 4px solid #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
  font-size: 1.55rem;
  font-weight: 850;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-main-image {
  display: block;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-main-image.d-none,
body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-main-avatar.d-none {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-avatar-status {
  position: absolute;
  right: 6px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #18a957;
  box-shadow: 0 4px 10px rgba(24, 169, 87, 0.25);
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-name {
  color: var(--bexhr-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-email {
  max-width: 100%;
  color: var(--bexhr-muted);
  font-size: 0.84rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-member-pill {
  min-height: 30px;
  padding: 0.32rem 0.66rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-photo-panel {
  width: 100%;
  margin-top: 1.35rem;
  padding: 1rem;
  border: 1px solid var(--bexhr-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-photo-title {
  display: block;
  color: var(--bexhr-text);
  font-size: 0.85rem;
  font-weight: 800;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-photo-help {
  color: var(--bexhr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-photo-icon {
  color: var(--hr-primary);
  font-size: 1.2rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  #managerProfileImageInput {
  min-height: 42px;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  #saveManagerProfileImageBtn {
  width: 100%;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-details-panel {
  min-width: 0;
  padding: 1.45rem;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-details-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--bexhr-accent-rgb), 0.18);
  border-radius: 12px;
  background: rgba(var(--bexhr-accent-rgb), 0.08);
  color: var(--hr-primary);
  font-size: 1.1rem;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  input.form-control[readonly] {
  background-color: #f5f7fa !important;
  border-color: #dfe5ec;
  color: #667085;
  cursor: not-allowed;
  box-shadow: none;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bexhr-line);
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-system-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 540px;
  color: var(--bexhr-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  .hr-profile-system-note i {
  margin-top: 0.1rem;
  color: var(--hr-primary);
}

body.bexhr-manager-visual-refresh
  #managerProfileSection
  #saveManagerProfileBtn {
  flex: 0 0 auto;
  min-width: 184px;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-layout {
    grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-layout {
    grid-template-columns: 1fr;
  }

  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-identity-panel {
    align-items: flex-start;
    text-align: left;
  }

  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-avatar-stage {
    margin-left: 0;
  }

  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-photo-panel {
    margin-top: 1rem;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-card-header,
  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-details-heading,
  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh
    #managerProfileSection
    .hr-profile-security-badge {
    align-self: flex-start;
  }

  body.bexhr-manager-visual-refresh
    #managerProfileSection
    #saveManagerProfileBtn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   MANAGER PROFILE HR VARIABLE PARITY - v1.0.1

   Supplies the HR profile component variables from the existing
   Manager visual-refresh palette. Profile presentation only.
   ========================================================= */

body.bexhr-manager-visual-refresh #managerProfileSection {
  --bexhr-line: var(--bexhr-manager-line);
  --bexhr-accent-rgb: var(--bexhr-manager-accent-rgb);
  --bexhr-text: var(--bexhr-manager-text);
  --bexhr-muted: var(--bexhr-manager-muted);
}

/* =========================================================
   MANAGER SELF-SERVICE HR CSS MIRROR - v1.0.0

   Generated directly from the current approved HR Self-Service
   selectors in this stylesheet. Presentation only:
   - Manager ss* IDs remain unchanged;
   - employee-self-service.js remains the workflow owner;
   - leave, payroll, payslip, permissions, tenant and session logic
     are untouched.
   ========================================================= */

body.bexhr-manager-visual-refresh #managerSelfServiceSection {
  --ss-blue: #0e7490;
  --ss-blue-soft: #e8f8fb;
  --ss-green: #15803d;
  --ss-green-soft: #eaf8ef;
  --ss-violet: #6d28d9;
  --ss-violet-soft: #f2ecff;
  --ss-amber: #b45309;
  --ss-amber-soft: #fff4df;
  --ss-slate: #475569;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.82) !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.075), transparent 32%),
    #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.065) !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card::before,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #0f9f9a 0%, #38bdf8 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card {
  background:
    radial-gradient(circle at 88% 18%, rgba(56, 189, 248, 0.14), transparent 25%),
    radial-gradient(circle at 70% 100%, rgba(20, 184, 166, 0.1), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fcfd 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-heading,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-heading {
  align-items: center;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-kicker {
  display: block;
  margin-bottom: 0.32rem;
  color: #07857f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-balance,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-decision,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-request,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-payroll,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history-payroll {
  border: 1px solid rgba(14, 116, 144, 0.16);
  color: var(--ss-blue);
  background: linear-gradient(145deg, #ecfeff 0%, #e0f2fe 100%);
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.1);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-decision,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history {
  border-color: rgba(109, 40, 217, 0.14);
  color: var(--ss-violet);
  background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-request,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-balance {
  border-color: rgba(21, 128, 61, 0.14);
  color: var(--ss-green);
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-payroll,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-icon--self-service-history-payroll {
  border-color: rgba(180, 83, 9, 0.14);
  color: var(--ss-amber);
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-left: auto;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions {
  padding: 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions .btn {
  min-height: 40px;
  border-radius: 12px;
  padding-inline: 1rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar .btn {
  min-height: 38px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-empty-state {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border: 1px dashed rgba(148, 163, 184, 0.46);
  border-radius: 16px;
  color: #64748b !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
  text-align: center;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-empty-state::before {
  content: "i";
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 0.65rem;
  border-radius: 10px;
  color: #0e7490;
  background: #e6f7fa;
  font-family: "Inter", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid > [class*="col-"] {
  display: flex;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .info-tile,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .leave-entitlement-tile {
  width: 100%;
  min-height: 190px;
  padding: 1.15rem;
  border: 1px solid rgba(21, 128, 61, 0.17);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.11), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%);
  box-shadow: 0 12px 26px rgba(21, 128, 61, 0.065);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .badge {
  border-radius: 999px;
  padding: 0.38rem 0.62rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveBalancesGrid .progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.1);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content > .info-tile,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content > .border,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content > [class*="rounded"] {
  border: 1px solid rgba(109, 40, 217, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.09), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 100%) !important;
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.06);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .info-tile-label,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .text-secondary {
  color: #64748b !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .row > [class*="col-"] > div,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-decision-content .d-grid > div {
  border-radius: 14px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-control,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-select {
  min-height: 48px;
  border-color: #d8e2eb;
  background-color: #ffffff;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card textarea.form-control {
  min-height: 118px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-control:focus,
body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-request-card .form-select:focus {
  border-color: rgba(14, 116, 144, 0.72);
  box-shadow: 0 0 0 0.22rem rgba(14, 116, 144, 0.11);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-workflow-note {
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 16px;
  color: #475569;
  background: linear-gradient(135deg, #f0fdfa 0%, #f0f9ff 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-workflow-note .bi {
  color: #0e7490 !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 116, 144, 0.32) rgba(148, 163, 184, 0.08);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area::-webkit-scrollbar {
  width: 8px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.3);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList {
  display: grid;
  gap: 0.85rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList > .card,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList > .border,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList > [class*="rounded"] {
  margin: 0 !important;
  padding: 1rem !important;
  border: 1px solid rgba(148, 163, 184, 0.27) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.065), transparent 28%),
    #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList .badge {
  border-radius: 999px;
  padding: 0.38rem 0.58rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList .bg-light,
body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssLeaveRequestsList .bg-light-subtle {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px !important;
  background: #f8fafc !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid > [class*="col-"] {
  display: flex;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
  position: relative;
  width: 100%;
  min-height: 132px;
  padding: 1.05rem 1.05rem 1.05rem 4.25rem;
  border: 1px solid rgba(180, 83, 9, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #fffcf5 100%);
  box-shadow: 0 10px 24px rgba(180, 83, 9, 0.055);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile .d-flex {
  display: block !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile .bi {
  position: absolute;
  top: 1.05rem;
  left: 1.05rem;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #b45309 !important;
  background: #fff3d6;
  font-size: 1.05rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile-value {
  margin-top: 0.35rem;
  color: #0f172a;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 800;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-filter-panel {
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 17px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdfa 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-filter-panel .form-control {
  min-height: 46px;
  border-color: #d8e2eb;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records {
  max-height: 460px !important;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 18px;
  background: #ffffff;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records table {
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0 8px;
  padding: 0 0.45rem 0.45rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.78rem 0.7rem;
  border: 0;
  color: #64748b;
  background: #f1f5f9;
  font-size: 0.68rem !important;
  letter-spacing: 0.055em;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody tr {
  filter: drop-shadow(0 5px 12px rgba(15, 23, 42, 0.035));
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
  padding: 0.88rem 0.7rem;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  color: #334155;
  background: #ffffff;
  font-size: 0.82rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:first-child {
  border-left: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px 0 0 14px;
  color: #0f172a;
  font-weight: 700;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:last-child {
  border-right: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0 14px 14px 0;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records .btn {
  min-width: 36px;
  min-height: 34px;
  border-radius: 10px;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .ss-leave-main-row {
      row-gap: 1rem !important;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
      max-height: 560px !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding-right: 0.25rem !important;
    }
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-heading,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-heading {
      align-items: flex-start;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar {
      width: 100%;
      justify-content: flex-start;
      margin-left: 0;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records {
      max-height: 620px !important;
      overflow-x: hidden !important;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records table {
      display: block;
      width: 100%;
      min-width: 0 !important;
      padding: 0.55rem;
      border-spacing: 0;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records thead {
      display: none;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tr,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records td {
      display: block;
      width: 100%;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody {
      display: grid;
      gap: 0.8rem;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody tr {
      overflow: hidden;
      padding: 0.4rem 0.9rem;
      border: 1px solid rgba(148, 163, 184, 0.25);
      border-radius: 17px;
      background: #ffffff;
      filter: none;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
      display: grid;
      grid-template-columns: minmax(108px, 0.7fr) minmax(0, 1.3fr);
      align-items: center;
      gap: 0.7rem;
      padding: 0.62rem 0;
      border: 0 !important;
      border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
      border-radius: 0 !important;
      text-align: right !important;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:last-child {
      border-bottom: 0 !important;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td::before {
      color: #64748b;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.055em;
      text-align: left;
      text-transform: uppercase;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(1)::before { content: "Pay cycle"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(2)::before { content: "Pay date"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(3)::before { content: "Gross pay"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(4)::before { content: "Tax"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(5)::before { content: "Pension"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(6)::before { content: "Deductions"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(7)::before { content: "Net pay"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(8)::before { content: "Status"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(9)::before { content: "View payslip"; }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td:nth-child(10)::before { content: "Download PDF"; }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .card-body {
      padding: 1.15rem !important;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-main {
      align-items: flex-start;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions {
      display: grid;
      grid-template-columns: 1fr;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions .btn,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar .btn {
      width: 100%;
      justify-content: center;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
      min-height: 112px;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
      max-height: 520px !important;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
      grid-template-columns: 1fr;
      gap: 0.25rem;
      text-align: left !important;
    }
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(56, 189, 248, 0.1), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fcfd 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05) !important;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 13px;
  color: var(--ss-blue);
  background: linear-gradient(145deg, #ecfeff 0%, #e0f2fe 100%);
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-kicker {
  margin-bottom: 0.18rem;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-description {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions {
  flex: 0 0 auto;
  padding: 0.32rem;
  border-radius: 14px;
}

body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions .btn {
  min-height: 38px;
  padding-inline: 0.9rem;
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-bar {
      align-items: stretch;
      flex-direction: column;
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions {
      width: 100%;
      margin-left: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions .btn {
      width: 100%;
      justify-content: center;
    }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-card--compact .hr-self-service-nav-actions {
      grid-template-columns: 1fr;
    }
}

/* =========================================================
   HR RECENT MANAGER DECISION AUDIT CARDS - v1.0.0

   Presentation only.
   Applies exclusively to HR Review > Recent Manager Leave Decisions.
   ========================================================= */

body.bexhr-hr-visual-refresh
  #recentManagerLeaveDecisionsCard
  .dashboard-table-hint {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper {
  max-height: min(68vh, 660px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.35rem 0 0;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper
  table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper
  tbody {
  display: grid;
  width: 100%;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper
  .hr-manager-decision-card-row,
body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper
  .hr-manager-decision-card-cell {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh
  #managerLeaveDecisionsTableWrapper
  .hr-manager-decision-card-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.08),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-employee {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-employee-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-employee-name {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-email {
  overflow: hidden;
  color: var(--bexhr-muted, #64748b);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-department {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  max-width: 100%;
  margin-top: 0.15rem;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.65rem;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.38rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-status--approved {
  border-color: #b8e4ce;
  color: #087a48;
  background: #eaf8f1;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-status--rejected {
  border-color: #f4c3c8;
  color: #b42335;
  background: #fff0f1;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-status--returned {
  border-color: #f4d6a0;
  color: #9a5b00;
  background: #fff7e8;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-status--cancelled {
  border-color: #cbd5e1;
  color: #475569;
  background: #f1f5f9;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-status--neutral {
  border-color: #dbe3ec;
  color: #475569;
  background: #f8fafc;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-action
  .dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 11px;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-details {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(190px, 1.35fr)
    minmax(90px, 0.65fr)
    minmax(150px, 1fr)
    minmax(150px, 0.9fr);
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  border-bottom: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.76);
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0.28rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-detail:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-detail-label {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-detail strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.84rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-detail-support {
  color: var(--bexhr-muted, #64748b);
  font-size: 0.73rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.2rem 1rem;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.09);
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-note-copy {
  min-width: 0;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-note-copy p {
  margin: 0.28rem 0 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 0.8rem;
  line-height: 1.5;
}

body.bexhr-hr-visual-refresh
  .hr-manager-decision-note-copy
  .hr-manager-decision-note-empty {
  color: #94a3b8;
  font-style: italic;
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh
    .hr-manager-decision-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh
    .hr-manager-decision-detail:nth-child(3) {
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-manager-decision-detail:nth-child(n + 4) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    .hr-manager-decision-card-header {
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh
    .hr-manager-decision-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-hr-visual-refresh
    .hr-manager-decision-details {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh
    .hr-manager-decision-detail,
  body.bexhr-hr-visual-refresh
    .hr-manager-decision-detail:nth-child(3),
  body.bexhr-hr-visual-refresh
    .hr-manager-decision-detail:nth-child(n + 4) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-manager-decision-detail:first-child {
    border-top: 0;
  }
}

/* =========================================================
   HR PROFILE CORRECTION REQUEST REVIEW CARDS - v1.0.0

   Presentation-only modernisation of HR Review > Profile
   Correction Requests. Existing renderer IDs, decision controls,
   saved HR responses, employee drilldown, permissions, tenant
   filters, Supabase operations, and lifecycle logic remain intact.
   ========================================================= */

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper {
  max-height: min(70vh, 720px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.3rem 0 0;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  table,
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  tbody {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  tbody {
  display: grid !important;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  .hr-review-request-row {
  display: grid !important;
  grid-template-columns:
    minmax(175px, 1fr)
    minmax(150px, 0.85fr)
    minmax(112px, 0.62fr)
    minmax(145px, 0.78fr)
    minmax(275px, 1.35fr);
  grid-template-areas:
    "employee field status submitted action"
    "details details details details action";
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  .hr-review-request-row--closed {
  background:
    radial-gradient(circle at top right, rgba(13, 148, 136, 0.07), transparent 34%),
    #ffffff;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td {
  position: relative !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 1rem !important;
  border: 0 !important;
  background: transparent;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td::before {
  content: attr(data-label);
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 0 0 0.48rem;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(1) {
  grid-area: employee;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(2) {
  grid-area: field;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(3) {
  grid-area: details;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(4) {
  grid-area: status;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(5) {
  grid-area: submitted;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(6) {
  grid-area: action;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(1),
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(2),
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(4),
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(5) {
  border-right: 1px solid #e8edf3 !important;
  border-bottom: 1px solid #e8edf3 !important;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(3) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 0.7rem;
  padding: 0.9rem 1rem 1rem !important;
  background: #fbfcfe;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(3)::before {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(3) > .small {
  margin: 0 !important;
  padding: 0.75rem 0.8rem;
  border: 1px solid #e3eaf1 !important;
  border-radius: 12px;
  background: #ffffff;
  line-height: 1.5;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(3) > .small.border-top {
  grid-column: 1 / -1;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(6) {
  min-width: 0 !important;
  padding: 1rem !important;
  border-left: 1px solid #dfe7ef !important;
  background: linear-gradient(180deg, #f8fbfc 0%, #ffffff 100%);
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(1)
  .btn-link {
  color: #0f5fd8;
  font-size: 0.98rem;
  font-weight: 800 !important;
  line-height: 1.3;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(1)
  .btn-link:hover,
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(1)
  .btn-link:focus-visible {
  color: #0849aa;
  text-decoration: underline !important;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(1)
  .small {
  margin-top: 0.22rem;
  line-height: 1.45;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(2)
  .fw-semibold {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(4)
  .badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  #profileCorrectionRequestsTableWrapper
  td:nth-child(5) {
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.45;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  .hr-review-closed-audit,
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  .hr-review-read-only-action {
  width: 100%;
  margin: 0;
  border-radius: 14px;
  box-shadow: none;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  .hr-review-closed-audit {
  padding: 0.9rem;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  .hr-review-closed-audit p,
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  .hr-review-read-only-action span {
  line-height: 1.5;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  [data-profile-correction-status],
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  [data-profile-correction-response] {
  border-radius: 10px;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  [data-profile-correction-response] {
  min-height: 78px;
  resize: vertical;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  [data-profile-correction-save],
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsCard
  [data-profile-correction-edit-employee] {
  min-height: 38px;
  border-radius: 10px;
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    .hr-review-request-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "employee status"
      "field submitted"
      "details details"
      "action action";
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(2),
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(5) {
    border-bottom: 1px solid #e8edf3 !important;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(2) {
    border-right: 1px solid #e8edf3 !important;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(4),
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(5) {
    border-right: 0 !important;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(6) {
    border-top: 1px solid #dfe7ef !important;
    border-left: 0 !important;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper {
    max-height: min(66vh, 620px) !important;
    padding-right: 0.15rem;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    .hr-review-request-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "employee"
      "field"
      "status"
      "submitted"
      "details"
      "action";
    border-radius: 15px;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td,
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(1),
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(2),
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(4),
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(5),
  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(6) {
    padding: 0.9rem !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #e8edf3 !important;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(3) {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.9rem !important;
    border-bottom: 1px solid #e8edf3 !important;
  }

  body.bexhr-hr-visual-refresh
    #profileCorrectionRequestsCard
    #profileCorrectionRequestsTableWrapper
    td:nth-child(6) {
    border-bottom: 0 !important;
  }
}

/* =========================================================
   HR PROFILE CORRECTION MODERN REVIEW CARDS - v1.0.0

   Presentation only for HR Review > Profile Correction Requests.
   The renderer retains all existing workflow data attributes and event wiring.
   ========================================================= */

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper {
  max-height: min(72vh, 760px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.35rem 0 0;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper
  table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper
  tbody {
  display: grid;
  width: 100%;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper
  .hr-profile-correction-modern-row,
body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper
  .hr-profile-correction-modern-cell {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh
  #profileCorrectionRequestsTableWrapper
  .hr-profile-correction-modern-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-review-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.07),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-modern-row--closed
  .hr-profile-correction-review-card {
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.06), transparent 34%),
    #ffffff;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-employee {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-employee-copy {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-employee-link,
body.bexhr-hr-visual-refresh
  .hr-profile-correction-employee-name {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--bexhr-text, #0f172a);
  background: transparent;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-employee-link:hover,
body.bexhr-hr-visual-refresh
  .hr-profile-correction-employee-link:focus-visible {
  color: var(--hr-primary, #008f88);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-field-name {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-category {
  color: var(--bexhr-muted, #64748b);
  font-size: 0.72rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-review-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 32px;
  padding: 0.38rem 0.68rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-status--completed {
  border-color: #b8e4ce;
  color: #087a48;
  background: #eaf8f1;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-status--rejected {
  border-color: #f4c3c8;
  color: #b42335;
  background: #fff0f1;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-status--approved {
  border-color: #b9ddf6;
  color: #075985;
  background: #eff8ff;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-status--review {
  border-color: #c9c2f7;
  color: #5b21b6;
  background: #f5f3ff;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-status--pending {
  border-color: #f4d6a0;
  color: #9a5b00;
  background: #fff7e8;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-submitted {
  display: grid;
  gap: 0.12rem;
  min-width: 145px;
  text-align: right;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-submitted span,
body.bexhr-hr-visual-refresh
  .hr-profile-correction-label {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-submitted strong {
  color: var(--bexhr-text, #0f172a);
  font-size: 0.8rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-review-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  min-width: 0;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-request-content {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
  padding: 1rem 1.15rem 1.15rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-value-panel {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 13px;
  background: #f8fafc;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-value-panel--requested {
  border-color: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.24);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.055);
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-value-panel strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.88rem;
  line-height: 1.4;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-reason-panel {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 13px;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-reason-icon,
body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.09);
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-reason-panel p {
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.5;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-saved-response:empty {
  display: none;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-saved-response
  hr {
  margin: 0.2rem 0 0.75rem;
  border-color: var(--bexhr-line, #dce5ee);
  opacity: 1;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-saved-response
  .small {
  padding: 0.8rem 0.9rem;
  border: 1px solid #cfe7e3;
  border-radius: 12px;
  color: #334155;
  background: #f2fbf9;
  line-height: 1.5;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel {
  min-width: 0;
  padding: 1rem;
  border-left: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.76);
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-heading > div {
  display: grid;
  gap: 0.18rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-heading strong {
  color: var(--bexhr-text, #0f172a);
  font-size: 0.86rem;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  .hr-review-closed-action {
  padding: 0.85rem !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  .hr-review-closed-action
  p,
body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  .hr-review-closed-action
  span:last-child {
  font-size: 0.76rem;
  line-height: 1.45;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  label {
  margin-bottom: 0.35rem !important;
  color: #334155;
  font-size: 0.74rem !important;
  font-weight: 750 !important;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  .form-select,
body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  .form-control {
  border-radius: 10px;
}

body.bexhr-hr-visual-refresh
  .hr-profile-correction-action-panel
  [data-profile-correction-save] {
  min-height: 40px;
  border-radius: 10px;
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh
    .hr-profile-correction-review-body {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh
    .hr-profile-correction-action-panel {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    .hr-profile-correction-review-header,
  body.bexhr-hr-visual-refresh
    .hr-profile-correction-review-meta {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh
    .hr-profile-correction-review-meta {
    width: 100%;
  }

  body.bexhr-hr-visual-refresh
    .hr-profile-correction-submitted {
    min-width: 0;
    text-align: left;
  }

  body.bexhr-hr-visual-refresh
    .hr-profile-correction-comparison-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HR ALLOWANCE RECORDS MODERN CARDS - v1.0.0

   Presentation only. Replaces the legacy Allowance Records table view with
   employee-first cards while preserving the existing tbody, search, sorting,
   edit action, inner scroll, and payroll setup workflows.
   ========================================================= */

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableWrapper {
  max-height: min(66vh, 620px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.35rem 0 0;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableWrapper
  table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableWrapper
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableBody {
  display: grid;
  width: 100%;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableBody
  > tr {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableBody
  > tr
  > td[colspan="7"] {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh
  #payrollAllowanceRecordsTableBody
  .hr-allowance-record-card-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.08),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-identity-copy {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-employee-name {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-context {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--bexhr-muted, #64748b);
  font-size: 0.75rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-context i {
  color: var(--hr-primary, #008f88);
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.65rem;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem !important;
  border-radius: 11px;
  font-size: 0.78rem;
  font-weight: 750;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-details {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.1fr)
    minmax(170px, 1fr)
    minmax(150px, 0.9fr)
    minmax(150px, 0.9fr);
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.78);
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-detail:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-detail-label {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-detail strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.86rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-detail--amount strong {
  color: #087a48;
  font-size: 0.94rem;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1.15rem 0.95rem;
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  background: #ffffff;
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.09);
}

body.bexhr-hr-visual-refresh
  .hr-allowance-record-note p {
  margin: 0.28rem 0 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh
    .hr-allowance-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-detail:nth-child(2) {
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-detail:nth-child(n + 3) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    .hr-allowance-record-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-details {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-detail,
  body.bexhr-hr-visual-refresh
    .hr-allowance-record-detail:nth-child(2),
  body.bexhr-hr-visual-refresh
    .hr-allowance-record-detail:nth-child(n + 3) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-detail:first-child {
    border-top: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-edit-btn span {
    display: none;
  }

  body.bexhr-hr-visual-refresh
    .hr-allowance-record-edit-btn {
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
  }
}

/* =========================================================
   HR DEDUCTION RECORDS MODERN CARDS - v1.0.1

   Presentation-only modernisation for:
   - Statutory Deduction Records
   - Other Deduction Records

   Existing forms, search, refresh, edit actions, payroll calculations,
   Supabase operations, permissions, and tenant controls remain unchanged.
   ========================================================= */

body.bexhr-hr-visual-refresh
  :is(#payrollStatutoryRecordsTableWrapper, #payrollOtherDeductionRecordsTableWrapper) {
  max-height: min(68vh, 660px) !important;
  padding: 0 0.4rem 0 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  :is(#payrollStatutoryRecordsTableWrapper, #payrollOtherDeductionRecordsTableWrapper)
  table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  :is(#payrollStatutoryRecordsTableWrapper, #payrollOtherDeductionRecordsTableWrapper)
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  :is(#payrollStatutoryRecordsTableWrapper, #payrollOtherDeductionRecordsTableWrapper)
  tbody {
  display: grid !important;
  width: 100% !important;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  :is(#payrollStatutoryRecordsTableWrapper, #payrollOtherDeductionRecordsTableWrapper)
  .hr-deduction-record-row {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bexhr-hr-visual-refresh
  :is(#payrollStatutoryRecordsTableWrapper, #payrollOtherDeductionRecordsTableWrapper)
  .hr-deduction-record-cell {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.08),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh .hr-deduction-record-card--other {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 34%),
    #ffffff;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.8rem;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-identity-copy {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-name {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-context-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.52rem;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.65rem;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 11px;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.76);
}

body.bexhr-hr-visual-refresh .hr-deduction-record-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0.3rem;
  padding: 0.92rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
  border-bottom: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-child(3n) {
  border-right: 0;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-last-child(-n + 3) {
  border-bottom: 0;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-detail--accent {
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.055);
}

body.bexhr-hr-visual-refresh .hr-deduction-record-label {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-detail strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.84rem;
  line-height: 1.4;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-footer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem 1rem;
  border-top: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh .hr-deduction-record-footer--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-footer-item {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 0.75rem;
}

body.bexhr-hr-visual-refresh .hr-deduction-record-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.09);
}

body.bexhr-hr-visual-refresh .hr-deduction-record-footer p {
  margin: 0.28rem 0 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh .hr-deduction-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-detail,
  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-child(3n),
  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-last-child(-n + 3) {
    border-right: 1px solid var(--bexhr-line, #dce5ee);
    border-bottom: 1px solid var(--bexhr-line, #dce5ee);
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-child(2n) {
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh .hr-deduction-record-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-details,
  body.bexhr-hr-visual-refresh .hr-deduction-record-footer--split {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-detail,
  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-child(2n),
  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-child(3n),
  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-last-child(-n + 2),
  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:nth-last-child(-n + 3) {
    border-right: 0;
    border-bottom: 1px solid var(--bexhr-line, #dce5ee);
  }

  body.bexhr-hr-visual-refresh .hr-deduction-record-detail:last-child {
    border-bottom: 0;
  }
}
/* =========================================================
   HR EMPLOYEE OVERRIDE RECORDS MODERN CARDS - v1.0.1

   Presentation only.
   Applies exclusively to Setup > Advanced Setup > Employee Override Records.
   Existing search, sorting, edit, save, tenant and payroll behaviour remains intact.
   ========================================================= */

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper {
  max-height: min(68vh, 680px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.35rem 0 0;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  tbody {
  display: grid;
  width: 100%;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  .hr-override-record-row,
body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  .hr-override-record-cell {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  .hr-override-record-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  #payrollEmployeeOverrideRecordsTableWrapper
  .hr-override-record-cell::before {
  display: none !important;
  content: none !important;
}

body.bexhr-hr-visual-refresh
  .hr-override-record-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.08),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh
  .hr-override-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-employee {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.24);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.bexhr-hr-visual-refresh
  .hr-override-employee-copy {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-employee-name {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-override-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  max-width: 100%;
  min-height: 26px;
  padding: 0.25rem 0.52rem;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-override-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.65rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-status {
  display: inline-flex;
  align-items: center;
}

body.bexhr-hr-visual-refresh
  .hr-override-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 11px;
}

body.bexhr-hr-visual-refresh
  .hr-override-detail-band {
  display: grid;
  grid-template-columns:
    minmax(170px, 1.2fr)
    minmax(140px, 0.9fr)
    minmax(160px, 1fr)
    minmax(170px, 1fr)
    minmax(130px, 0.8fr);
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  border-bottom: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.78);
}

body.bexhr-hr-visual-refresh
  .hr-override-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0.28rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-override-detail:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh
  .hr-override-label {
  display: block;
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh
  .hr-override-detail strong,
body.bexhr-hr-visual-refresh
  .hr-override-audit-item strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.84rem;
  line-height: 1.4;
}

body.bexhr-hr-visual-refresh
  .hr-override-detail > span:not(.hr-override-label) {
  color: var(--bexhr-muted, #64748b);
  font-size: 0.73rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh
  .hr-override-detail--value strong {
  color: #087a48;
  font-size: 0.92rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-audit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
  padding: 0.9rem 1.15rem 1rem;
}

body.bexhr-hr-visual-refresh
  .hr-override-audit-item {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 13px;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh
  .hr-override-audit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.09);
}

body.bexhr-hr-visual-refresh
  .hr-override-audit-item > div {
  min-width: 0;
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh
    .hr-override-detail-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh
    .hr-override-detail:nth-child(3) {
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-override-detail:nth-child(n + 4) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    .hr-override-record-header {
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh
    .hr-override-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-hr-visual-refresh
    .hr-override-detail-band {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh
    .hr-override-detail,
  body.bexhr-hr-visual-refresh
    .hr-override-detail:nth-child(3),
  body.bexhr-hr-visual-refresh
    .hr-override-detail:nth-child(n + 4) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-override-detail:first-child {
    border-top: 0;
  }
}

/* =========================================================
   HR PAYMENT SETUP MODERN RECORD CARDS - v1.0.0

   Presentation-only modernisation for:
   - Bank Directory Records
   - Employee Bank Records

   Existing forms, search inputs, sorting, edit actions, role restrictions,
   Supabase operations, and payroll-payment behaviour remain unchanged.
   ========================================================= */

body.bexhr-hr-visual-refresh #bankDirectoryTableWrapper,
body.bexhr-hr-visual-refresh #employeeBankDetailsTableWrapper {
  max-height: min(64vh, 620px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.35rem 0 0;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh #bankDirectoryTableWrapper table,
body.bexhr-hr-visual-refresh #employeeBankDetailsTableWrapper table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh #bankDirectoryTableWrapper thead,
body.bexhr-hr-visual-refresh #employeeBankDetailsTableWrapper thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh #bankDirectoryTableWrapper tbody,
body.bexhr-hr-visual-refresh #employeeBankDetailsTableWrapper tbody {
  display: grid;
  width: 100%;
  gap: 0.9rem;
}

body.bexhr-hr-visual-refresh .hr-payment-record-row,
body.bexhr-hr-visual-refresh .hr-payment-record-cell {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh .hr-payment-record-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh .hr-payment-record-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.075),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 9px 24px rgba(15, 23, 42, 0.05);
}

body.bexhr-hr-visual-refresh .hr-payment-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

body.bexhr-hr-visual-refresh .hr-payment-record-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh .hr-payment-record-icon,
body.bexhr-hr-visual-refresh .hr-payment-record-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
}

body.bexhr-hr-visual-refresh .hr-payment-record-icon {
  font-size: 1.05rem;
}

body.bexhr-hr-visual-refresh .hr-payment-record-avatar {
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.bexhr-hr-visual-refresh .hr-payment-record-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

body.bexhr-hr-visual-refresh .hr-payment-record-kicker,
body.bexhr-hr-visual-refresh .hr-payment-record-label {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .hr-payment-record-title {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-payment-record-context-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  max-width: 100%;
  margin-top: 0.15rem;
  padding: 0.25rem 0.52rem;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-payment-record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.65rem;
}

body.bexhr-hr-visual-refresh .hr-payment-record-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 11px;
}

body.bexhr-hr-visual-refresh .hr-payment-record-band {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.1fr)
    minmax(210px, 1.25fr)
    minmax(180px, 1fr);
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.78);
}

body.bexhr-hr-visual-refresh .hr-payment-record-band--bank {
  grid-template-columns:
    minmax(220px, 1.2fr)
    minmax(150px, 0.7fr)
    minmax(260px, 1.3fr);
}

body.bexhr-hr-visual-refresh .hr-payment-record-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh .hr-payment-record-detail:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh .hr-payment-record-detail strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.86rem;
  line-height: 1.35;
}

body.bexhr-hr-visual-refresh .hr-payment-record-support {
  color: var(--bexhr-muted, #64748b);
  font-size: 0.73rem;
  line-height: 1.42;
}

body.bexhr-hr-visual-refresh .hr-payment-record-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh .hr-payment-record-band,
  body.bexhr-hr-visual-refresh .hr-payment-record-band--bank {
    grid-template-columns: 1fr 1fr;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-detail:nth-child(2) {
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-detail:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--bexhr-line, #dce5ee);
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh .hr-payment-record-header {
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-band,
  body.bexhr-hr-visual-refresh .hr-payment-record-band--bank {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-detail,
  body.bexhr-hr-visual-refresh .hr-payment-record-detail:nth-child(2),
  body.bexhr-hr-visual-refresh .hr-payment-record-detail:nth-child(3) {
    grid-column: auto;
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-detail:first-child {
    border-top: 0;
  }

  body.bexhr-hr-visual-refresh .hr-payment-record-title {
    white-space: normal;
  }
}

/* =========================================================
   HR SETUP INTERNAL WORKSPACES - v1.0.0
   Keep Manage Organization and Email Integration concise by showing one
   focused internal workspace at a time. Existing forms, IDs, permissions,
   queries, records, refresh actions, and save logic remain unchanged.
   ========================================================= */

#hrSetupSection .hr-setup-internal-workspace {
  min-width: 0;
  margin-top: 1.25rem;
}

#hrSetupSection .hr-setup-internal-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.45rem;
  border: 1px solid var(--setup-line, #d7e4ea);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbfc 0%, #f1f7f9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#hrSetupSection .hr-setup-internal-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
  min-height: 46px;
  padding: 0.72rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #526173;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.2;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#hrSetupSection .hr-setup-internal-tab i {
  flex: 0 0 auto;
  color: #688093;
  font-size: 1rem;
}

#hrSetupSection .hr-setup-internal-tab:hover {
  border-color: rgba(18, 184, 181, 0.22);
  background: rgba(255, 255, 255, 0.82);
  color: #075f66;
}

#hrSetupSection .hr-setup-internal-tab:focus-visible {
  outline: none;
  border-color: var(--hr-primary-soft, #24b6b3);
  box-shadow: 0 0 0 0.2rem rgba(18, 184, 181, 0.14);
}

#hrSetupSection .hr-setup-internal-tab.active {
  border-color: rgba(18, 184, 181, 0.34);
  background: #ffffff;
  color: #007f83;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.07),
    inset 0 -2px 0 rgba(18, 184, 181, 0.82);
}

#hrSetupSection .hr-setup-internal-tab.active i {
  color: #00999c;
}

#hrSetupSection .hr-setup-internal-panel-host,
#hrSetupSection .hr-setup-internal-panel,
#hrSetupSection .hr-setup-internal-source {
  min-width: 0;
  width: 100%;
}

#hrSetupSection .hr-setup-internal-panel[hidden] {
  display: none !important;
}

#hrSetupSection .hr-setup-internal-source {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#hrSetupSection #organizationDepartmentsSection,
#hrSetupSection #organizationJobTitlesSection {
  padding-top: 0 !important;
  border-top: 0 !important;
}

#hrSetupSection #organizationDepartmentsSection > hr:first-child,
#hrSetupSection #organizationJobTitlesSection > hr:first-child {
  display: none !important;
}

#hrSetupSection #hrCommunicationInternalWorkspace .hr-setup-internal-source {
  height: auto !important;
}

#hrSetupSection #hrCommunicationInternalWorkspace .hr-setup-internal-panel > .border.rounded-4,
#hrSetupSection #hrOrganizationInternalWorkspace .hr-setup-internal-panel > :is(form, section, div) {
  width: 100%;
}

/* Lists scroll inside their own focused panel; the full expanded card does not. */
#hrSetupSection #hrOrganizationInternalWorkspace :is(
  #organizationDepartmentsTableWrapper,
  #organizationJobTitlesTableWrapper
),
#hrSetupSection #hrCommunicationInternalWorkspace :is(
  #hrp85RecipientsTableWrapper,
  #hrp85DeliveryLogsTableWrapper
) {
  max-height: min(52vh, 430px);
  overflow-y: auto !important;
  overflow-x: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 767.98px) {
  #hrSetupSection .hr-setup-internal-switcher {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    border-radius: 16px;
  }

  #hrSetupSection .hr-setup-internal-tab {
    justify-content: flex-start;
    min-height: 44px;
    padding-inline: 0.9rem;
    text-align: left;
  }

  #hrSetupSection #hrOrganizationInternalWorkspace :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  ),
  #hrSetupSection #hrCommunicationInternalWorkspace :is(
    #hrp85RecipientsTableWrapper,
    #hrp85DeliveryLogsTableWrapper
  ) {
    max-height: min(58vh, 380px);
  }
}
/* =========================================================
   HR ORGANIZATION INTERNAL WORKSPACE COMPLETION - v1.0.0

   Completes the existing Manage Organization tab layout:
   - each tab owns its complete form and records area;
   - hidden panels cannot leak content into the active panel;
   - Audit History is presented as a fourth workspace;
   - record-list scrolling remains inside its own panel.
   ========================================================= */

#hrSetupSection
  #hrOrganizationInternalWorkspace
  .hr-setup-internal-switcher {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  > .hr-setup-internal-panel-host
  > .hr-setup-internal-panel[hidden],
#hrSetupSection
  #hrOrganizationInternalWorkspace
  > .hr-setup-internal-panel-host
  > .hr-setup-internal-panel.d-none {
  display: none !important;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  > .hr-setup-internal-panel-host
  > .hr-setup-internal-panel:not([hidden]):not(.d-none) {
  display: block;
  width: 100%;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  [data-hr-setup-workspace-panel="departments"],
#hrSetupSection
  #hrOrganizationInternalWorkspace
  [data-hr-setup-workspace-panel="jobTitles"],
#hrSetupSection
  #hrOrganizationInternalWorkspace
  [data-hr-setup-workspace-panel="auditHistory"] {
  min-width: 0;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  ) {
  max-height: min(52vh, 430px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 991.98px) {
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    .hr-setup-internal-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    .hr-setup-internal-switcher {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HR ORGANIZATION DEPARTMENT AND JOB TITLE RECORD CARDS - v1.0.0

   Presentation-only modernization for:
   - Manage Organization > Departments > Department Records
   - Manage Organization > Job Titles > Job Title Records

   Existing forms, record IDs, edit actions, status values, sorting,
   tenant controls, Supabase operations, and audit behaviour are preserved.
   ========================================================= */

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  ) {
  width: 100%;
  max-height: min(56vh, 540px) !important;
  padding: 0.3rem 0.3rem 0.3rem 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  thead {
  display: none !important;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody {
  display: grid !important;
  width: 100% !important;
  gap: 0.85rem;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  tr {
  position: relative;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden;
  margin: 0 !important;
  border: 1px solid #dbe5ec !important;
  border-radius: 17px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.075),
      transparent 35%
    ),
    #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  tr {
  grid-template-columns:
    minmax(240px, 1.65fr)
    minmax(135px, 0.68fr)
    minmax(150px, 0.72fr)
    82px;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  tr {
  grid-template-columns:
    minmax(230px, 1.35fr)
    minmax(190px, 1fr)
    minmax(135px, 0.65fr)
    minmax(150px, 0.7fr)
    82px;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  tr:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.32) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.075);
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  tr::before {
  position: absolute;
  left: 1rem;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1;
  content: "";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  tr::before {
  content: "D";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  tr::before {
  content: "JT";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td {
  display: block !important;
  min-width: 0 !important;
  padding: 1rem 1.05rem !important;
  border: 0 !important;
  border-left: 1px solid #e5ebf1 !important;
  background: transparent !important;
  color: #0f172a;
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  vertical-align: middle !important;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td:first-child {
  padding-left: 4.9rem !important;
  border-left: 0 !important;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.012em;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td::before {
  display: block;
  margin-bottom: 0.3rem;
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.065em;
  line-height: 1.2;
  text-transform: uppercase;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  td:nth-child(1)::before {
  content: "Department";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  td:nth-child(2)::before {
  content: "Status";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  td:nth-child(3)::before {
  content: "Last updated";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  td:nth-child(4)::before {
  content: "Action";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(1)::before {
  content: "Job title";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(2)::before {
  content: "Department";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(3)::before {
  content: "Status";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(4)::before {
  content: "Last updated";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(5)::before {
  content: "Action";
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(2) {
  color: #334155;
  font-weight: 700;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td:has(.badge) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td
  .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.35rem 0.68rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationDepartmentsTableWrapper
  tbody
  td:nth-child(4),
#hrSetupSection
  #hrOrganizationInternalWorkspace
  #organizationJobTitlesTableWrapper
  tbody
  td:nth-child(5) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td:last-child
  .dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 12px;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  tr:has(td[colspan]) {
  display: block !important;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  tr:has(td[colspan])::before {
  display: none;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td[colspan] {
  width: 100% !important;
  padding: 1.25rem !important;
  border-left: 0 !important;
  text-align: center;
}

#hrSetupSection
  #hrOrganizationInternalWorkspace
  :is(
    #organizationDepartmentsTableWrapper,
    #organizationJobTitlesTableWrapper
  )
  tbody
  td[colspan]::before {
  display: none;
}

@media (max-width: 991.98px) {
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    td:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid #e5ebf1 !important;
  }

  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    td:nth-child(n + 2) {
    border-top: 1px solid #e5ebf1 !important;
    border-left: 0 !important;
  }

  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    td:nth-child(even) {
    border-right: 1px solid #e5ebf1 !important;
  }
}

@media (max-width: 767.98px) {
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    ) {
    max-height: min(64vh, 560px) !important;
    padding-right: 0.2rem !important;
  }

  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    tr {
    grid-template-columns: 1fr !important;
  }

  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    td,
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    td:first-child,
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    :is(
      #organizationDepartmentsTableWrapper,
      #organizationJobTitlesTableWrapper
    )
    tbody
    td:nth-child(even) {
    grid-column: auto;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  #hrSetupSection
    #hrOrganizationInternalWorkspace
    #organizationDepartmentsTableWrapper
    tbody
    td:nth-child(4),
  #hrSetupSection
    #hrOrganizationInternalWorkspace
    #organizationJobTitlesTableWrapper
    tbody
    td:nth-child(5) {
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================================================
   HR EMPLOYEE SALARY SETUP MODERN RECORD CARDS - v1.0.1

   Presentation-only treatment for Employee Salary Setup Records.
   Existing search, edit controls, statuses, payroll values, and data
   operations remain owned by the current HR dashboard implementation.
   ========================================================= */

body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-scroll {
  max-height: min(68vh, 720px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.15rem 0.35rem 0.15rem 0.15rem;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-table
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-table
  tbody {
  display: grid;
  width: 100%;
  gap: 0.9rem;
}

body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-row,
body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-card-cell {
  display: block;
  width: 100%;
}

body.bexhr-hr-visual-refresh
  .hr-salary-setup-modern
  .hr-salary-record-card-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.075),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 9px 24px rgba(15, 23, 42, 0.05);
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.8rem;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.77rem;
  font-weight: 850;
  letter-spacing: 0.025em;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-identity-copy {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-name {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-grade {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  padding: 0.28rem 0.58rem;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.7rem;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.38rem;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-status
  .badge,
body.bexhr-hr-visual-refresh
  .hr-salary-record-status
  [class*="status"] {
  border-radius: 999px;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-action
  .dashboard-action-btn,
body.bexhr-hr-visual-refresh
  .hr-salary-record-action
  .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 11px;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.78);
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-detail:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-detail-label {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh
  .hr-salary-record-detail-value {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.84rem;
  line-height: 1.35;
}

@media (max-width: 991.98px) {
  body.bexhr-hr-visual-refresh
    .hr-salary-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh
    .hr-salary-record-detail:nth-child(2) {
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-salary-record-detail:nth-child(n + 3) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    .hr-salary-record-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.bexhr-hr-visual-refresh
    .hr-salary-record-header-controls {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-hr-visual-refresh
    .hr-salary-record-details {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh
    .hr-salary-record-detail,
  body.bexhr-hr-visual-refresh
    .hr-salary-record-detail:nth-child(2),
  body.bexhr-hr-visual-refresh
    .hr-salary-record-detail:nth-child(n + 3) {
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-salary-record-detail:first-child {
    border-top: 0;
  }
}

/* =========================================================
   HR PAYROLL RECORDS MODERN CARDS - v1.0.0

   Presentation-only styling for the existing Payroll Records workflow.
   ========================================================= */
body.bexhr-hr-visual-refresh
  #payrollRecordsTableWrapper.hr-payroll-records-modern-wrap {
  max-height: min(72vh, 720px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.15rem 0.4rem 0.15rem 0.1rem;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-hr-visual-refresh
  #payrollRecordsTableWrapper
  .hr-payroll-records-modern-table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.bexhr-hr-visual-refresh
  #payrollRecordsTableWrapper
  .hr-payroll-records-modern-table
  thead {
  display: none !important;
}

body.bexhr-hr-visual-refresh
  #payrollRecordsTableWrapper
  .hr-payroll-records-modern-body {
  display: grid;
  width: 100%;
  gap: 1rem;
}

body.bexhr-hr-visual-refresh
  #payrollRecordsTableWrapper
  .hr-payroll-records-modern-body
  > tr {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh
  #payrollRecordsTableWrapper
  .hr-payroll-record-card-cell {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.08),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

body.bexhr-hr-visual-refresh .hr-payroll-record-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-selection {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  gap: 0.35rem;
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-selection
  input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-selection .badge,
body.bexhr-hr-visual-refresh .hr-payroll-record-selection small {
  font-size: 0.65rem;
  line-height: 1;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.85rem;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.24);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-identity-copy {
  display: grid;
  min-width: 0;
  gap: 0.38rem;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-employee-name {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.98rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-context-chip,
body.bexhr-hr-visual-refresh .hr-payroll-record-reference-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.24rem 0.48rem;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 999px;
  color: #52637a;
  background: #f8fafc;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-reference-chip {
  color: #667085;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-status .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 29px;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

/* =========================================================
   HR PAYROLL STATUS CHIP REFRESH - v1.0.0

   Presentation only.
   - preserves payroll status values and calculations;
   - preserves batch readiness logic;
   - preserves tenant behaviour and Supabase operations;
   - modernises residual Bootstrap badge presentation only.
   ========================================================= */

/* Shared compact chip shape inside the active HR Payroll workspace. */
body.bexhr-hr-visual-refresh #batchPayrollReviewPanel .badge,
body.bexhr-hr-visual-refresh .hr-payroll-record-status .badge,
body.bexhr-hr-visual-refresh .hr-payroll-record-selection .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 27px;
  padding: 0.32rem 0.68rem;
  border: 1px solid transparent !important;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  box-shadow: none !important;
}

/* Batch selection count - replace the old solid Bootstrap blue pill. */
body.bexhr-hr-visual-refresh #batchPayrollReviewCount {
  border-color: #b7e5e1 !important;
  background: #eafaf8 !important;
  color: #087f7a !important;
}

/* Batch period helper requirement. */
body.bexhr-hr-visual-refresh #batchPayrollPeriodPanel .badge {
  border-color: #d8e1ea !important;
  background: #f8fafc !important;
  color: #52647a !important;
}

/* Positive payroll states: Ready / Authorised and equivalent success states. */
body.bexhr-hr-visual-refresh #batchPayrollReviewPanel .badge.text-bg-success,
body.bexhr-hr-visual-refresh .hr-payroll-record-status .badge.text-bg-success {
  border-color: #bce7d0 !important;
  background: #ecfdf3 !important;
  color: #087443 !important;
}

/* Payroll setup gaps. */
body.bexhr-hr-visual-refresh #batchPayrollReviewPanel .badge.text-bg-warning {
  border-color: #f5d58b !important;
  background: #fff8e6 !important;
  color: #8a5a05 !important;
}

/* Neutral / inactive payroll states. */
body.bexhr-hr-visual-refresh #batchPayrollReviewPanel .badge.text-bg-secondary {
  border-color: #d7dee7 !important;
  background: #f1f5f9 !important;
  color: #52647a !important;
}

/* Not selected / Sent / Locked / View Only presentation. */
body.bexhr-hr-visual-refresh #batchPayrollReviewPanel .badge.text-bg-light,
body.bexhr-hr-visual-refresh .hr-payroll-record-selection .badge.text-bg-light {
  border-color: #dce4ec !important;
  background: #f8fafc !important;
  color: #52647a !important;
}

/* Keep compact chips readable without looking like legacy Bootstrap badges. */
body.bexhr-hr-visual-refresh #batchPayrollReviewPanel td .badge {
  white-space: nowrap;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-actions
  .dashboard-action-btn,
body.bexhr-hr-visual-refresh .hr-payroll-record-actions .btn {
  min-height: 38px;
  border-radius: 11px;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-details {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(220px, 0.95fr) minmax(320px, 1.45fr);
  border-top: 1px solid var(--bexhr-line, #dce5ee);
  background: rgba(248, 250, 252, 0.78);
}

body.bexhr-hr-visual-refresh .hr-payroll-record-detail-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.42rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-detail-panel:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-detail-label {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-detail-content {
  color: var(--bexhr-text, #0f172a);
  font-size: 0.78rem;
  line-height: 1.55;
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-detail-content
  strong,
body.bexhr-hr-visual-refresh
  .hr-payroll-record-detail-content
  .fw-semibold {
  color: var(--bexhr-text, #0f172a);
  font-weight: 800 !important;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #dce5ee);
  border-radius: 13px;
  background: #ffffff;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-summary-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.25rem;
  padding: 0.72rem 0.78rem;
  border-right: 1px solid var(--bexhr-line, #dce5ee);
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-summary-item:last-child {
  border-right: 0;
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-summary-item--net {
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.075);
}

body.bexhr-hr-visual-refresh .hr-payroll-record-summary-value {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.82rem;
  line-height: 1.3;
}

body.bexhr-hr-visual-refresh
  .hr-payroll-record-summary-item--net
  .hr-payroll-record-summary-value {
  color: #04766f;
  font-size: 0.9rem;
}

body.bexhr-hr-visual-refresh .hr-payroll-record-summary-original {
  grid-column: 1 / -1;
  padding: 0.75rem;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 1199.98px) {
  body.bexhr-hr-visual-refresh .hr-payroll-record-card-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-actions {
    grid-column: 2 / -1;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-pay-summary {
    grid-column: 1 / -1;
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-dates {
    border-right: 0;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-hr-visual-refresh
    #payrollRecordsTableWrapper.hr-payroll-records-modern-wrap {
    max-height: min(68vh, 620px) !important;
    padding-right: 0.2rem;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-card-header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-status,
  body.bexhr-hr-visual-refresh .hr-payroll-record-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-status {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 0.2rem;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-actions {
    justify-content: flex-start;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-details {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-detail-panel,
  body.bexhr-hr-visual-refresh .hr-payroll-record-dates,
  body.bexhr-hr-visual-refresh .hr-payroll-record-pay-summary {
    grid-column: auto;
    border-top: 1px solid var(--bexhr-line, #dce5ee);
    border-right: 0;
  }

  body.bexhr-hr-visual-refresh
    .hr-payroll-record-detail-panel:first-child {
    border-top: 0;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-summary-grid {
    grid-template-columns: 1fr;
  }

  body.bexhr-hr-visual-refresh .hr-payroll-record-summary-item {
    border-right: 0;
    border-bottom: 1px solid var(--bexhr-line, #dce5ee);
  }

  body.bexhr-hr-visual-refresh
    .hr-payroll-record-summary-item:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   SYSTEM-WIDE SELF-SERVICE PAYROLL HISTORY CARDS - v1.0.0

   Shared visual treatment for:
   - HR My Self-Service Payroll History
   - Manager My Self-Service Payroll History
   - Employee Dashboard Payroll History

   Presentation only. Payroll queries, filters, preview/PDF actions,
   authorised-record access, tenant controls, and calculations are unchanged.
   ========================================================= */

:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper) {
  max-height: min(68vh, 620px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.2rem 0.35rem 0.2rem 0.1rem;
  border: 0 !important;
  background: transparent !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper) table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper) thead {
  display: none !important;
}

:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper) tbody {
  display: grid;
  width: 100%;
  gap: 1rem;
}

:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper)
  .bexhr-self-service-payroll-row,
:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper)
  .bexhr-self-service-payroll-cell {
  display: block;
  width: 100%;
}

:where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper)
  .bexhr-self-service-payroll-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bexhr-self-service-payroll-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--bexhr-line, #d8e4ed);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.09),
      transparent 34%
    ),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.bexhr-self-service-payroll-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

.bexhr-self-service-payroll-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.8rem;
}

.bexhr-self-service-payroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.22);
  border-radius: 14px;
  color: var(--hr-primary, #008f88);
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.1);
  font-size: 1rem;
}

.bexhr-self-service-payroll-title-group {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.bexhr-self-service-payroll-eyebrow,
.bexhr-self-service-payroll-date span,
.bexhr-self-service-payroll-metric span {
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.bexhr-self-service-payroll-cycle {
  overflow: hidden;
  color: var(--bexhr-text, #0f172a);
  font-size: 1rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bexhr-self-service-payroll-group {
  justify-self: start;
  padding: 0.18rem 0.48rem;
  border: 1px solid var(--bexhr-line, #d8e4ed);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
}

.bexhr-self-service-payroll-date {
  display: grid;
  gap: 0.18rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bexhr-line, #d8e4ed);
  text-align: right;
}

.bexhr-self-service-payroll-date strong {
  color: var(--bexhr-text, #0f172a);
  font-size: 0.83rem;
  white-space: nowrap;
}

.bexhr-self-service-payroll-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 32px;
  padding: 0.36rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}

.bexhr-self-service-payroll-status.is-success {
  border-color: #b8e4ce;
  color: #087a48;
  background: #eaf8f1;
}

.bexhr-self-service-payroll-status.is-warning {
  border-color: #f4d6a0;
  color: #9a5b00;
  background: #fff7e8;
}

.bexhr-self-service-payroll-status.is-neutral {
  border-color: #d7e0ea;
  color: #475569;
  background: #f8fafc;
}

.bexhr-self-service-payroll-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--bexhr-line, #d8e4ed);
  border-bottom: 1px solid var(--bexhr-line, #d8e4ed);
  background: rgba(248, 250, 252, 0.78);
}

.bexhr-self-service-payroll-metric {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--bexhr-line, #d8e4ed);
}

.bexhr-self-service-payroll-metric:last-child {
  border-right: 0;
}

.bexhr-self-service-payroll-metric strong {
  overflow-wrap: anywhere;
  color: var(--bexhr-text, #0f172a);
  font-size: 0.84rem;
  line-height: 1.35;
}

.bexhr-self-service-payroll-metric strong.is-muted {
  color: #64748b;
  font-weight: 700;
}

.bexhr-self-service-payroll-metric.is-net-pay {
  background: rgba(var(--bexhr-accent-rgb, 13, 148, 136), 0.07);
}

.bexhr-self-service-payroll-metric.is-net-pay strong {
  color: var(--hr-primary, #008f88);
  font-size: 0.92rem;
}

.bexhr-self-service-payroll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem 1rem;
}

.bexhr-self-service-payroll-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 650;
}

.bexhr-self-service-payroll-note i {
  color: var(--hr-primary, #008f88);
}

.bexhr-self-service-payroll-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.bexhr-self-service-payroll-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0.45rem 0.72rem !important;
  border-radius: 11px !important;
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .bexhr-self-service-payroll-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bexhr-self-service-payroll-date {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.7rem 0 0;
    border-top: 1px solid var(--bexhr-line, #d8e4ed);
    border-left: 0;
    text-align: left;
  }

  .bexhr-self-service-payroll-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bexhr-self-service-payroll-metric:nth-child(2n) {
    border-right: 0;
  }

  .bexhr-self-service-payroll-metric:nth-child(n + 3) {
    border-top: 1px solid var(--bexhr-line, #d8e4ed);
  }

  .bexhr-self-service-payroll-metric.is-net-pay {
    grid-column: 1 / -1;
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  :where(#ssPayrollHistoryTableWrapper, #payrollHistoryTableWrapper) {
    max-height: min(66vh, 580px) !important;
    padding-right: 0.2rem;
  }

  .bexhr-self-service-payroll-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .bexhr-self-service-payroll-status {
    justify-self: start;
  }

  .bexhr-self-service-payroll-date {
    grid-column: auto;
    grid-row: auto;
  }

  .bexhr-self-service-payroll-metrics {
    grid-template-columns: 1fr;
  }

  .bexhr-self-service-payroll-metric,
  .bexhr-self-service-payroll-metric:nth-child(2n) {
    border-top: 1px solid var(--bexhr-line, #d8e4ed);
    border-right: 0;
  }

  .bexhr-self-service-payroll-metric:first-child {
    border-top: 0;
  }

  .bexhr-self-service-payroll-metric.is-net-pay {
    grid-column: auto;
  }

  .bexhr-self-service-payroll-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .bexhr-self-service-payroll-actions,
  .bexhr-self-service-payroll-action {
    width: 100%;
  }
}

/* =========================================================
   MANAGER PENDING LEAVE REQUEST MODERN CARDS - v1.0.1

   Direct-rendered, full-width queue cards.
   No leave workflow, authority, reporting-line, balance, or session change.
   ========================================================= */
body.bexhr-manager-visual-refresh
  #pendingRequestsCardCollapse
  .dashboard-table-hint {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(68vh, 700px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.15rem 0.45rem 0.15rem 0.05rem !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  > table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  table-layout: auto !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  > table
  > colgroup,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  > table
  > thead {
  display: none !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableBody {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableBody
  > .manager-pending-modern-row {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableBody
  > .manager-pending-modern-row:last-child {
  margin-bottom: 0 !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableBody
  > .manager-pending-modern-row
  > .manager-pending-modern-cell {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: normal !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8e5ee;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(15, 118, 110, 0.075), transparent 32%),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-card:hover {
  border-color: rgba(15, 118, 110, 0.3);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.085);
  transform: translateY(-1px);
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #e4edf3;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity {
  flex: 1 1 auto;
  min-width: 0;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-header-side {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-submitted,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-actions {
  min-width: 0;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-submitted {
  min-width: 150px;
  text-align: right;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-actions {
  min-width: 190px;
  text-align: right;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-actions
  > .d-inline-flex {
  align-items: center !important;
  justify-content: flex-end !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-actions
  .dashboard-action-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-label,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-meta-item
  > span {
  display: block;
  margin-bottom: 0.42rem;
  color: #64748b;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-meta-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.5fr) minmax(120px, 0.55fr);
  gap: 0;
  margin: 1rem 1.1rem 0;
  overflow: hidden;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #f8fbfd;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-meta-item {
  min-width: 0;
  padding: 0.9rem 1rem;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-meta-item
  + .manager-pending-modern-meta-item {
  border-left: 1px solid #dfe8ef;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-meta-item
  > strong {
  display: block;
  color: #0f172a;
  font-size: 0.94rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness {
  margin: 0.85rem 1.1rem 1.1rem;
  padding: 0.95rem 1rem;
  border: 1px solid #dce8ee;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7fbfd 0%, #ffffff 100%);
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness-content {
  min-width: 0;
  color: #0f172a;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness-content
  .badge {
  max-width: 100%;
  padding: 0.48rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  white-space: normal;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness-content
  .badge.text-bg-success {
  border-color: #bce7d0 !important;
  background: #ecfdf3 !important;
  color: #087443 !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness-content
  .badge.text-bg-warning {
  border-color: #f5d58b !important;
  background: #fff8e6 !important;
  color: #8a5a05 !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness-content
  .badge.text-bg-danger {
  border-color: #f4c2c7 !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-readiness-content
  .small.text-secondary {
  max-width: 100%;
  color: #52647a !important;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-header {
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-header-side {
    width: 100%;
    justify-content: space-between;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-submitted {
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper {
    max-height: min(66vh, 620px) !important;
    padding-right: 0.25rem !important;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-header-side {
    flex-direction: column;
    align-items: stretch;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-actions {
    min-width: 0;
    text-align: left;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-actions
    > .d-inline-flex {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-meta-grid {
    grid-template-columns: 1fr;
  }

  body.bexhr-manager-visual-refresh
    #pendingRequestsTableWrapper
    .manager-pending-modern-meta-item
    + .manager-pending-modern-meta-item {
    border-top: 1px solid #dfe8ef;
    border-left: 0;
  }
}

/* =========================================================
   MANAGER LEAVE DECISION MODAL MODERNISATION - v1.0.1

   Presentation only. Existing IDs, Bootstrap modal behaviour, decision
   validation, authority, RPC persistence, and audit handling are preserved.
   ========================================================= */
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity
  a,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity
  .btn-link {
  color: #0f766e !important;
  font-weight: 800;
  text-decoration: none !important;
  text-decoration-color: rgba(15, 118, 110, 0.35) !important;
  text-underline-offset: 0.18em;
}

body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity
  a:hover,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity
  a:focus-visible,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity
  .btn-link:hover,
body.bexhr-manager-visual-refresh
  #pendingRequestsTableWrapper
  .manager-pending-modern-identity
  .btn-link:focus-visible {
  color: #0b5f59 !important;
  text-decoration: underline !important;
}

#leaveDecisionModal.manager-leave-decision-modal {
  --manager-decision-accent: #0f766e;
  --manager-decision-accent-soft: #eafaf7;
  --manager-decision-accent-border: #b7e7df;
}

#leaveDecisionModal.manager-leave-decision-modal
  .min-w-0 {
  min-width: 0 !important;
}

#leaveDecisionModal.manager-leave-decision-modal
  .modal-dialog {
  width: min(900px, calc(100vw - 2rem));
  max-width: 900px;
  margin: 1rem auto;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content {
  position: relative;
  max-height: calc(100vh - 2rem);
  border: 1px solid #d9e5ec !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(15, 118, 110, 0.075), transparent 28%),
    #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24) !important;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-accent {
  height: 5px;
  flex: 0 0 5px;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 60%, #67e8f9 100%);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-header {
  align-items: flex-start;
  gap: 1rem;
  background: transparent;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--manager-decision-accent-border);
  border-radius: 15px;
  background: var(--manager-decision-accent-soft);
  color: var(--manager-decision-accent);
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.08);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-kicker {
  margin-bottom: 0.28rem;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-title {
  color: #0f172a;
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-subtext {
  max-width: 680px;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.55;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-close {
  margin: 0;
  padding: 0.72rem;
  border: 1px solid #d9e2e9;
  border-radius: 12px;
  background-color: #ffffff;
  opacity: 0.72;
  transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-close:hover,
#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-close:focus-visible {
  border-color: #b8c8d4;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1);
  opacity: 1;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-summary {
  overflow: hidden;
  border: 1px solid #dce7ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-primary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #e3ebf0;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.05rem 1.15rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-item + .manager-decision-summary-item {
  border-left: 1px solid #e3ebf0;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-icon,
#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-icon,
#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--manager-decision-accent-border);
  background: var(--manager-decision-accent-soft);
  color: var(--manager-decision-accent);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-label,
#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-heading {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-label {
  margin-bottom: 0.34rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-summary-value {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-date-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #f8fbfd;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-date-item {
  min-width: 0;
  padding: 1rem 1.15rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-date-item + .manager-decision-date-item {
  border-left: 1px solid #e3ebf0;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.95rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-item {
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid #dce7ee;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbfd 0%, #ffffff 100%);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.72rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 0.82rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-value {
  min-width: 0;
  color: #0f172a;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-value
  .badge {
  max-width: 100%;
  padding: 0.48rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  white-space: normal;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-value
  .badge.text-bg-success {
  border-color: #bce7d0 !important;
  background: #ecfdf3 !important;
  color: #087443 !important;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-value
  .badge.text-bg-danger {
  border-color: #f4c2c7 !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-review-value
  .badge.text-bg-warning {
  border-color: #f5d58b !important;
  background: #fff8e6 !important;
  color: #8a5a05 !important;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-comment-panel {
  margin-top: 0.95rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid #dce7ee;
  border-radius: 16px;
  background: #ffffff;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 0.86rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-privacy {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-input {
  min-height: 126px;
  resize: vertical;
  border-color: #cfdae3;
  border-radius: 13px;
  padding: 0.9rem 1rem;
  color: #0f172a;
  line-height: 1.55;
  box-shadow: none;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-input:focus {
  border-color: var(--manager-decision-accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.11);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-comment-help {
  margin-top: 0.58rem;
  color: #64748b;
  font-size: 0.82rem;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-footer {
  justify-content: flex-end;
  gap: 0.65rem;
  border-top: 1px solid #e3ebf0 !important;
  background: #f8fbfd;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-footer
  .dashboard-action-btn {
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  font-weight: 800;
}

#leaveDecisionModal.manager-leave-decision-modal
  #confirmDecisionBtn {
  min-width: 178px;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content:has(#confirmDecisionBtn.btn-success) {
  --manager-decision-accent: #128653;
  --manager-decision-accent-soft: #ecfdf3;
  --manager-decision-accent-border: #bce7d0;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content:has(#confirmDecisionBtn.btn-danger) {
  --manager-decision-accent: #be123c;
  --manager-decision-accent-soft: #fff1f2;
  --manager-decision-accent-border: #f4c2c7;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content:has(#confirmDecisionBtn.btn-warning) {
  --manager-decision-accent: #8a5a05;
  --manager-decision-accent-soft: #fff8e6;
  --manager-decision-accent-border: #f5d58b;
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content:has(#confirmDecisionBtn.btn-success)
  .manager-decision-modal-accent {
  background: linear-gradient(90deg, #128653 0%, #22c55e 100%);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content:has(#confirmDecisionBtn.btn-danger)
  .manager-decision-modal-accent {
  background: linear-gradient(90deg, #be123c 0%, #ef4444 100%);
}

#leaveDecisionModal.manager-leave-decision-modal
  .manager-decision-modal-content:has(#confirmDecisionBtn.btn-warning)
  .manager-decision-modal-accent {
  background: linear-gradient(90deg, #8a5a05 0%, #fbbf24 100%);
}

@media (max-width: 767.98px) {
  #leaveDecisionModal.manager-leave-decision-modal
    .modal-dialog {
    width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-modal-content {
    max-height: calc(100vh - 1rem);
    border-radius: 16px !important;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-modal-primary-grid,
  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-modal-date-grid,
  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-modal-review-grid {
    grid-template-columns: 1fr;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-summary-item + .manager-decision-summary-item,
  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-date-item + .manager-decision-date-item {
    border-top: 1px solid #e3ebf0;
    border-left: 0;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-comment-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-comment-privacy {
    white-space: normal;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-modal-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  #leaveDecisionModal.manager-leave-decision-modal
    .manager-decision-modal-footer
    .dashboard-action-btn,
  #leaveDecisionModal.manager-leave-decision-modal
    #confirmDecisionBtn {
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   MANAGER TEAM WORKSPACE SHELL MODERNISATION - v1.0.1

   Presentation-only Team workspace landing layer.
   Existing cards, tables, IDs, decisions, reporting-line access, RLS,
   queries, sessions, and approval authority remain unchanged.
   ========================================================= */
body.bexhr-manager-visual-refresh .manager-team-workspace-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid rgba(var(--bexhr-manager-accent-rgb), 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 12%, rgba(var(--bexhr-manager-accent-rgb), 0.12), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f7fbfc 58%, #f0fbfa 100%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

body.bexhr-manager-visual-refresh .manager-team-workspace-intro-copy {
  max-width: 780px;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-kicker {
  margin-bottom: 0.4rem;
  color: var(--bexhr-manager-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-intro h2 {
  margin: 0;
  color: var(--bexhr-manager-text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 820;
  letter-spacing: -0.035em;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-intro p {
  max-width: 720px;
  margin: 0.55rem 0 0;
  color: #64748b;
  line-height: 1.6;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--bexhr-manager-accent-rgb), 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #42526a;
  font-size: 0.78rem;
  font-weight: 700;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bexhr-manager-accent);
  box-shadow: 0 0 0 4px rgba(var(--bexhr-manager-accent-rgb), 0.12);
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.35rem;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric {
  min-width: 0;
  min-height: 82px;
  padding: 0.85rem;
  border: 1px solid #dce6ee;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric:hover,
body.bexhr-manager-visual-refresh .manager-team-workspace-metric:focus-visible {
  border-color: rgba(var(--bexhr-manager-accent-rgb), 0.42);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e8f8f6;
  color: var(--bexhr-manager-accent);
  font-size: 1rem;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric > span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric strong {
  color: var(--bexhr-manager-text);
  font-size: 1.2rem;
  line-height: 1;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric small {
  overflow: hidden;
  color: #667085;
  font-size: 0.69rem;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric--visibility .manager-team-workspace-metric-icon,
body.bexhr-manager-visual-refresh .manager-team-workspace-metric--history .manager-team-workspace-metric-icon {
  background: #edf6ff;
  color: #1769aa;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric--schedule .manager-team-workspace-metric-icon {
  background: #eef8ef;
  color: #168a55;
}

body.bexhr-manager-visual-refresh .manager-team-workspace-metric--people .manager-team-workspace-metric-icon {
  background: #fff6e8;
  color: #b56a05;
}

@media (max-width: 1199.98px) {
  body.bexhr-manager-visual-refresh .manager-team-workspace-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh .manager-team-workspace-intro {
    padding: 1.15rem;
    border-radius: 20px;
  }

  body.bexhr-manager-visual-refresh .manager-team-workspace-status {
    width: 100%;
    border-radius: 14px;
  }

  body.bexhr-manager-visual-refresh .manager-team-workspace-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479.98px) {
  body.bexhr-manager-visual-refresh .manager-team-workspace-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-manager-visual-refresh .manager-team-workspace-metric {
    transition: none;
  }

  body.bexhr-manager-visual-refresh .manager-team-workspace-metric:hover,
  body.bexhr-manager-visual-refresh .manager-team-workspace-metric:focus-visible {
    transform: none;
  }
}

/* =========================================================
   MANAGER SELF-SERVICE MOBILE RESPONSIVENESS - v1.0.2

   Scope and safety:
   - Manager embedded Self-Service only.
   - Mobile presentation only at 575.98px and below.
   - Prevents Current Payslip Summary and other card headings from
     collapsing into character-by-character text columns.
   - Keeps all existing HTML IDs, EmployeeSelfService JavaScript,
     payroll visibility, leave workflows, tenant scoping, permissions,
     desktop layout, and tablet layout unchanged.
   ========================================================= */
@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .card-body {
    padding: 1.15rem !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-heading,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    width: 100%;
    min-width: 0;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-main,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-context {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-card-heading-copy,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-context > div {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .section-heading,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .section-subtext,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-kicker,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-description {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .section-heading {
    line-height: 1.2;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 0.5rem;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-nav-actions .btn,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-card-toolbar .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssTogglePayrollFiguresBtn,
  body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssRefreshPayrollBtn {
    min-height: 40px;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection #ssCurrentPayrollSummaryGrid .info-tile {
    min-height: 112px;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .employee-leave-history-scroll-area {
    max-height: 520px !important;
  }

  body.bexhr-manager-visual-refresh #managerSelfServiceSection .hr-self-service-payroll-records tbody td {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    text-align: left !important;
  }
}

/* =========================================================
   SECONDARY MANAGER HELP GUIDE HR FORMAT - v1.0.1
   HR Workspace Guide is the visual and structural source pattern.
   Secondary Manager visibility and planning only.
   ========================================================= */
body.bexhr-manager-visual-refresh .manager-operating-guide-content {
  border-radius: 26px;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-header {
  padding: 1.45rem 1.6rem 1.25rem;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(110deg, #ffffff 0%, #f5fbfb 58%, #d8f3f1 100%);
}

body.bexhr-manager-visual-refresh .manager-operating-guide-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-heading-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #b7e3df;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf8f7;
  color: #0f766e;
  font-size: 1.15rem;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-kicker {
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-header h2 {
  margin: 0.2rem 0 0.35rem;
  color: #10233f;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-header p,
body.bexhr-manager-visual-refresh .manager-guide-recommended p,
body.bexhr-manager-visual-refresh .manager-guide-workspace-card p,
body.bexhr-manager-visual-refresh .manager-guide-help p {
  margin: 0;
  color: #667892;
  line-height: 1.5;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-body {
  padding: 1.25rem 1.6rem 1.45rem;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh .manager-guide-recommended {
  padding: 1.05rem 1.1rem;
  border: 1px solid #b8e2df;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  background: linear-gradient(105deg, #f0fbfa 0%, #ffffff 64%, #eefafa 100%);
}

body.bexhr-manager-visual-refresh .manager-guide-recommended-icon,
body.bexhr-manager-visual-refresh .manager-guide-workspace-icon,
body.bexhr-manager-visual-refresh .manager-guide-flow-icon,
body.bexhr-manager-visual-refresh .manager-guide-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.bexhr-manager-visual-refresh .manager-guide-recommended-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #12a6a0;
  color: #ffffff;
  font-size: 1.05rem;
}

body.bexhr-manager-visual-refresh .manager-guide-recommended h3,
body.bexhr-manager-visual-refresh .manager-guide-workspace-card h3,
body.bexhr-manager-visual-refresh .manager-guide-flow h3,
body.bexhr-manager-visual-refresh .manager-guide-help h3 {
  margin: 0.18rem 0 0.3rem;
  color: #10233f;
  font-size: 0.98rem;
  font-weight: 820;
  letter-spacing: -0.02em;
}

body.bexhr-manager-visual-refresh .manager-guide-open-link,
body.bexhr-manager-visual-refresh .manager-guide-card-link {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 820;
  text-align: left;
}

body.bexhr-manager-visual-refresh .manager-guide-open-link:hover,
body.bexhr-manager-visual-refresh .manager-guide-open-link:focus-visible,
body.bexhr-manager-visual-refresh .manager-guide-card-link:hover,
body.bexhr-manager-visual-refresh .manager-guide-card-link:focus-visible {
  color: #0b5f59;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-card {
  min-width: 0;
  min-height: 162px;
  padding: 0.95rem;
  border: 1px solid #dce6ee;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fbfcfd;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e5f8f5;
  color: #0f766e;
  font-size: 1rem;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-card--pending .manager-guide-workspace-icon,
body.bexhr-manager-visual-refresh .manager-guide-workspace-card--schedule .manager-guide-workspace-icon {
  background: #fff4d6;
  color: #c66a00;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-card--history .manager-guide-workspace-icon,
body.bexhr-manager-visual-refresh .manager-guide-workspace-card--profile .manager-guide-workspace-icon {
  background: #eaf3fd;
  color: #1769aa;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-card--selfservice .manager-guide-workspace-icon {
  background: #e7eef7;
  color: #475569;
}

body.bexhr-manager-visual-refresh .manager-guide-workspace-card p {
  flex: 1 1 auto;
  font-size: 0.76rem;
}

body.bexhr-manager-visual-refresh .manager-guide-card-link {
  margin-top: 0.65rem;
}

body.bexhr-manager-visual-refresh .manager-guide-flow {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px solid #dce6ee;
  border-radius: 17px;
  background: #f8fafc;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: #e7f7f5;
  color: #0f766e;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-list li > span {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f766e;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-list strong,
body.bexhr-manager-visual-refresh .manager-guide-flow-list small {
  display: block;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-list strong {
  color: #10233f;
  font-size: 0.76rem;
}

body.bexhr-manager-visual-refresh .manager-guide-flow-list small {
  margin-top: 0.18rem;
  color: #718198;
  font-size: 0.68rem;
  line-height: 1.4;
}

body.bexhr-manager-visual-refresh .manager-guide-help {
  margin-top: 0.85rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid #f2d183;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff9e8;
}

body.bexhr-manager-visual-refresh .manager-guide-help-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #fff0be;
  color: #c66a00;
}

body.bexhr-manager-visual-refresh .manager-guide-help h3 {
  margin: 0 0 0.18rem;
  font-size: 0.8rem;
}

body.bexhr-manager-visual-refresh .manager-guide-help p {
  font-size: 0.72rem;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-footer {
  padding: 0.85rem 1.6rem;
  justify-content: space-between;
  gap: 1rem;
  background: #ffffff;
}

body.bexhr-manager-visual-refresh .manager-operating-guide-footer span {
  color: #667892;
  font-size: 0.72rem;
}

@media (max-width: 991.98px) {
  body.bexhr-manager-visual-refresh .manager-guide-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-manager-visual-refresh .manager-guide-flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh .manager-operating-guide-header,
  body.bexhr-manager-visual-refresh .manager-operating-guide-body,
  body.bexhr-manager-visual-refresh .manager-operating-guide-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.bexhr-manager-visual-refresh .manager-operating-guide-heading {
    gap: 0.65rem;
  }

  body.bexhr-manager-visual-refresh .manager-operating-guide-heading-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  body.bexhr-manager-visual-refresh .manager-guide-recommended {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body.bexhr-manager-visual-refresh .manager-guide-open-link {
    grid-column: 1 / -1;
    padding-left: 0.1rem;
  }

  body.bexhr-manager-visual-refresh .manager-guide-workspace-grid,
  body.bexhr-manager-visual-refresh .manager-guide-flow-list {
    grid-template-columns: 1fr;
  }

  body.bexhr-manager-visual-refresh .manager-guide-workspace-card {
    min-height: 0;
  }

  body.bexhr-manager-visual-refresh .manager-operating-guide-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh .manager-operating-guide-footer .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-manager-visual-refresh .manager-operating-guide-modal *,
  body.bexhr-manager-visual-refresh .manager-operating-guide-modal *::before,
  body.bexhr-manager-visual-refresh .manager-operating-guide-modal *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Secondary Manager guide close-button alignment - corrected */
body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-operating-guide-header {
  position: relative !important;
  padding-right: 5.75rem !important;
}

body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-operating-guide-close {
  position: absolute !important;
  top: 1.45rem !important;
  right: 1.6rem !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 5 !important;
}

@media (max-width: 575.98px) {
  body.bexhr-manager-visual-refresh
    #managerOperatingGuideModal
    .manager-operating-guide-header {
    padding-right: 4.5rem !important;
  }

  body.bexhr-manager-visual-refresh
    #managerOperatingGuideModal
    .manager-operating-guide-close {
    top: 1rem !important;
    right: 1rem !important;
  }
}

/* Manager workspace loader - fully opaque background */
body.manager-workspace-booting .bexhr-workspace-loader {
  background: #ffffff !important;
}

/* Secondary Manager guide workspace-card interaction parity */
body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-guide-workspace-card {
  color: #172033;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-guide-workspace-card:hover,
body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-guide-workspace-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(15, 159, 154, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-guide-workspace-card:hover
  .manager-guide-card-link,
body.bexhr-manager-visual-refresh
  #managerOperatingGuideModal
  .manager-guide-workspace-card:focus-within
  .manager-guide-card-link {
  color: #0b5f59;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-manager-visual-refresh
    #managerOperatingGuideModal
    .manager-guide-workspace-card {
    transition: none;
  }

  body.bexhr-manager-visual-refresh
    #managerOperatingGuideModal
    .manager-guide-workspace-card:hover,
  body.bexhr-manager-visual-refresh
    #managerOperatingGuideModal
    .manager-guide-workspace-card:focus-within {
    transform: none;
  }
}
/* =========================================================
   MANAGER TEMPORARY APPROVAL ACCESS CLOSEOUT - v1.0.0
   Separate authority management from operational metrics and
   keep the control responsive and ready for shared theme tokens.
   ========================================================= */
body.bexhr-manager-visual-refresh .manager-delegation-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(var(--bexhr-manager-accent-rgb), 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.bexhr-manager-visual-refresh .manager-delegation-action-panel.d-none {
  display: none !important;
}

body.bexhr-manager-visual-refresh .manager-delegation-action-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

body.bexhr-manager-visual-refresh .manager-delegation-action-kicker {
  color: var(--bexhr-manager-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.bexhr-manager-visual-refresh .manager-delegation-action-copy strong {
  color: var(--bexhr-manager-text);
  font-size: 0.98rem;
}

body.bexhr-manager-visual-refresh .manager-delegation-action-copy small {
  color: #64748b;
  line-height: 1.45;
}

body.bexhr-manager-visual-refresh .manager-delegation-action-controls {
  flex: 0 0 auto;
}

body.bexhr-manager-visual-refresh .manager-delegation-action-button {
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  body.bexhr-manager-visual-refresh .manager-delegation-action-panel {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-manager-visual-refresh .manager-delegation-action-controls,
  body.bexhr-manager-visual-refresh .manager-delegation-action-button {
    width: 100%;
  }
}

/* HR ACCESS / REPORTING RESPONSIBILITY DECOUPLING - PHASE 2 */
.hr-employee-access-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(10px);
}

.hr-employee-access-dialog {
  width: min(960px, 100%);
  max-height: calc(100dvh - 2rem);
}

body.hr-employee-access-modal-open {
  overflow: hidden;
}

.hr-reporting-lines-focus {
  padding: 1rem;
  margin: -1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--hr-primary) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hr-primary) 16%, transparent);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.hr-employee-access-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 20%, #d7e1ea);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.hr-access-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-bottom: 1px solid #dce6ee;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hr-primary) 11%, #ffffff),
    #ffffff 68%
  );
}

.hr-access-modal-heading h2 {
  margin: 0.45rem 0 0.35rem;
  color: #172033;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 760;
  letter-spacing: -0.025em;
}

.hr-access-modal-heading p {
  max-width: 720px;
  margin: 0;
  color: #64748b;
  font-size: 1rem;
  line-height: 1.55;
}

.hr-access-modal-kicker {
  color: var(--hr-primary);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.hr-access-modal-close {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  color: #475569;
  background: rgba(255, 255, 255, 0.78);
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.hr-access-modal-close:hover,
.hr-access-modal-close:focus-visible {
  color: var(--hr-primary);
  border-color: var(--hr-primary);
  transform: translateY(-1px);
}

.hr-access-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #f7fafc;
}

.hr-access-employee-summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid #d8e5ec;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.hr-access-employee-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 12%, #ffffff);
}

.hr-access-employee-copy {
  display: grid;
  gap: 0.15rem;
}

.hr-access-employee-copy strong {
  color: #172033;
  font-size: 1rem;
}

.hr-access-employee-copy span {
  color: #64748b;
  font-size: 0.9rem;
}

.hr-access-section-grid {
  display: grid;
  gap: 1.25rem;
}

.hr-access-section-card {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid #d8e5ec;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.hr-access-section-card--primary {
  border-color: color-mix(in srgb, var(--hr-primary) 30%, #d8e5ec);
}

.hr-access-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}

.hr-access-section-step {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--hr-primary);
  font-size: 0.8rem;
  font-weight: 800;
}

.hr-access-section-heading h3 {
  margin: 0 0 0.25rem;
  color: #172033;
  font-size: 1.05rem;
  font-weight: 750;
}

.hr-access-section-heading p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hr-access-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.75rem;
  color: #64748b;
  font-size: 0.86rem;
}

.hr-reporting-direction-list {
  display: grid;
  gap: 0.9rem;
}

.hr-reporting-direction-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid #e0e8ef;
  border-radius: 16px;
  background: #fbfdfe;
}

.hr-reporting-direction-card:last-child {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.hr-reporting-direction-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 10%, #ffffff);
}

.hr-reporting-direction-copy {
  display: grid;
  gap: 0.2rem;
}

.hr-reporting-direction-copy strong {
  color: #1e293b;
  font-size: 0.95rem;
}

.hr-reporting-direction-copy span {
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.hr-reporting-assignment-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.8fr);
  gap: 0.85rem;
  padding-top: 0.35rem;
}

.hr-reporting-assignment-fields .form-label {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
}

.hr-reporting-prepare-button {
  grid-column: 1 / -1;
  justify-self: end;
}

.hr-access-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid #dce6ee;
  background: #ffffff;
}

.hr-access-modal-footer p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 560px;
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.hr-access-modal-footer p i {
  color: var(--hr-primary);
}

.hr-access-modal-actions {
  display: flex;
  gap: 0.65rem;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .hr-create-employee-submit-wrap {
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-top: 0.15rem;
  }

  .hr-employee-access-overlay {
    align-items: end;
    padding: 0;
  }

  .hr-employee-access-dialog,
  .hr-employee-access-modal {
    max-height: 94dvh;
  }

  .hr-employee-access-modal {
    border-radius: 22px 22px 0 0;
  }

  .hr-access-modal-header {
    padding: 1.25rem;
  }

  .hr-access-modal-body {
    padding: 1rem;
  }

  .hr-reporting-direction-card,
  .hr-reporting-direction-card:last-child {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hr-reporting-direction-card > .btn,
  .hr-reporting-assignment-fields,
  .hr-reporting-prepare-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hr-reporting-assignment-fields {
    grid-template-columns: 1fr;
  }

  .hr-access-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hr-access-modal-actions,
  .hr-access-modal-actions .btn {
    width: 100%;
  }
}


/* =========================================================
   MULTI-WORKSPACE ACCOUNT SWITCHER - v1.0.0
   ---------------------------------------------------------
   Keeps system access separate from reporting responsibilities.
   ========================================================= */
.bexhr-workspace-account-area {
  position: relative;
}

.bexhr-workspace-menu[hidden] {
  display: none !important;
}

.bexhr-workspace-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 48px;
  z-index: 1200;
  width: min(390px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.bexhr-workspace-menu-heading {
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.bexhr-workspace-menu-heading span,
.bexhr-workspace-menu-heading small {
  display: block;
}

.bexhr-workspace-menu-heading span {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 800;
}

.bexhr-workspace-menu-heading small {
  margin-top: 3px;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.45;
}

.bexhr-workspace-menu-options {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.bexhr-workspace-menu-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #0f172a;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease,
    transform 160ms ease;
}

.bexhr-workspace-menu-option:hover,
.bexhr-workspace-menu-option:focus-visible {
  border-color: rgba(13, 148, 136, 0.24);
  background: rgba(240, 253, 250, 0.88);
  color: #0f172a;
  outline: none;
  transform: translateY(-1px);
}

.bexhr-workspace-menu-option.is-current {
  border-color: rgba(13, 148, 136, 0.28);
  background: rgba(204, 251, 241, 0.48);
}

.bexhr-workspace-menu-option-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 1rem;
}

.bexhr-workspace-menu-option-copy {
  min-width: 0;
}

.bexhr-workspace-menu-option-copy strong,
.bexhr-workspace-menu-option-copy small {
  display: block;
}

.bexhr-workspace-menu-option-copy strong {
  font-size: 0.86rem;
  font-weight: 800;
}

.bexhr-workspace-menu-option-copy small {
  margin-top: 2px;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.38;
}

.bexhr-workspace-menu-current {
  padding: 4px 7px;
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  .bexhr-workspace-menu {
    right: 0;
    width: min(360px, calc(100vw - 24px));
  }
}

/* COMPACT ACCOUNT RESPONSIBILITY BADGES - v1.0.2 */
.hr-modern-account-responsibilities {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
  margin-top: 0.18rem;
  overflow: hidden;
}

.hr-modern-account-responsibility-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 132px;
  padding: 0.14rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hr-modern-account-responsibility-pill--hr {
  flex: 0 0 auto;
  max-width: 76px;
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.hr-modern-account-responsibility-pill--manager {
  flex: 0 1 auto;
  border-color: rgba(5, 150, 105, 0.24);
  background: rgba(5, 150, 105, 0.09);
  color: #047857;
}

/* MANAGER HEADER RESPONSIBILITY BADGE - v1.0.0 */
.manager-modern-account-responsibilities {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin-top: 0.18rem;
  overflow: hidden;
}

.manager-modern-account-responsibility-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 148px;
  padding: 0.16rem 0.44rem;
  border: 1px solid rgba(5, 150, 105, 0.24);
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.09);
  color: #047857;
  font-size: 0.59rem;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-modern-account-responsibility-pill--primary {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.manager-modern-account-responsibility-pill--secondary {
  border-color: rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}

.manager-modern-account-responsibility-pill--mixed {
  border-color: rgba(5, 150, 105, 0.24);
  background: rgba(5, 150, 105, 0.09);
  color: #047857;
}

.manager-modern-account-responsibility-pill--acting {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(217, 119, 6, 0.09);
  color: #b45309;
}
/* =========================================================
   HR ACCESS + REPORTING MODAL CORRECTION - v1.0.0
   Shared presentation for HR Admin and HR Standard flows.
   No permission, route, RLS or reporting-authority changes.
   ========================================================= */

.hr-reporting-direction-card:last-child {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.hr-reporting-direction-card {
  column-gap: 0.7rem;
  row-gap: 0.6rem;
}

.hr-reporting-direction-icon {
  align-self: start;
}

.hr-reporting-direction-copy {
  min-width: 0;
}

.hr-reporting-direction-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  white-space: nowrap;
  min-height: 42px;
  padding-inline: 1rem;
}

.hr-access-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 12px;
  color: #52657b;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.hr-access-back-link:hover,
.hr-access-back-link:focus-visible {
  color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 9%, #ffffff);
  transform: translateX(-2px);
}

.hr-access-back-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hr-primary) 20%, transparent);
  outline-offset: 2px;
}

.hr-supporting-manager-modal-body {
  display: grid;
  gap: 1.25rem;
}

.hr-supporting-manager-modal-body > .hr-access-employee-summary,
.hr-supporting-manager-modal-body > .hr-access-section-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.hr-supporting-manager-modal-body .hr-access-section-heading {
  gap: 0.7rem;
}

.hr-supporting-manager-modal-body
  #hrSupportingManagerPrimarySummary
  > .border {
  margin-top: 0.2rem;
}

@media (max-width: 767.98px) {
  .hr-reporting-direction-card,
  .hr-reporting-direction-card:last-child {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .hr-reporting-direction-action {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.25rem;
  }

  .hr-access-modal-header > .d-flex {
    align-items: flex-start !important;
  }

  .hr-access-back-link {
    padding-inline: 0.55rem;
  }

  .hr-access-back-link span {
    max-width: 112px;
  }

  .hr-supporting-manager-modal-body {
    gap: 1rem;
  }
}
/* =========================================================
   HR ADMIN PROTECTED ACCESS NOTICE SPACING - v1.0.0
   Presentation only. No access, role or reporting changes.
   ========================================================= */

#hrEmployeeAccessSelfNotice:not(.d-none) {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  #hrEmployeeAccessSelfNotice:not(.d-none) {
    margin-top: 1rem;
  }
}
/* =========================================================
   HR SELF-SERVICE SMALL-PHONE WIDTH PARITY - v1.0.0
   Mirrors the approved Manager self-service mobile treatment.
   Presentation only: no payroll, leave, role, session, tenant,
   permission, reporting-line or Supabase behaviour changes.
   ========================================================= */
@media (max-width: 575.98px) {
  body.bexhr-hr-visual-refresh #hrSelfServiceSection {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .dashboard-section-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .card-body {
    min-width: 0;
    padding: 1.15rem !important;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-card-heading,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-nav-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    width: 100%;
    min-width: 0;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-card-heading-main,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-nav-context {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-card-heading-copy,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-nav-context > div {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .section-heading,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .section-subtext,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-kicker,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-nav-description {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .section-heading {
    line-height: 1.2;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-card-toolbar,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    gap: 0.6rem;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-card-toolbar
    .dashboard-action-btn,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-nav-actions
    .dashboard-action-btn {
    flex: 1 1 140px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    #ssTogglePayrollFiguresBtn,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    #ssRefreshPayrollBtn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-payroll-summary-grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .hr-self-service-payroll-summary-grid
    > [class*="col-"] {
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .info-tile,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .info-tile-value,
  body.bexhr-hr-visual-refresh
    #hrSelfServiceSection
    .info-tile-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* =========================================================
   ADMIN WORKSPACE LOADER - ADMIN VISIBILITY v1.0.2

   Presentation only.
   Extends the existing BexHR workspace loader to Admin.
   ========================================================= */

body.admin-workspace-booting .bexhr-workspace-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   ADMIN WORKSPACE LOADER VISUAL PARITY - v1.0.3

   Admin is a platform-level workspace.
   Use the modern BexHR teal loader identity instead of the
   legacy amber HR token values while Admin is booting.

   Presentation only.
   ========================================================= */

body.admin-workspace-booting {
  --hr-primary: #087f7a;
  --hr-primary-soft: #16b8ae;
  --hr-primary-dark: #056864;
  --hr-text: #101828;
  --hr-muted: #667085;
  --hr-border: #d9e7e6;
  --hr-soft-surface: #eef9f8;
}

body.admin-workspace-booting .bexhr-workspace-loader {
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.98),
      rgba(245, 250, 250, 0.99) 48%,
      rgba(238, 247, 246, 1) 100%
    );
}


/* =========================================================
   ADMIN AUTHORITATIVE SHELL REFRESH - v1.0.0
   Presentation only. No Admin workflow behaviour changes.
   ========================================================= */

body.bexhr-admin-visual-refresh {
  --admin-primary: #087f7a;
  --admin-primary-soft: #16b8ae;
  --admin-primary-dark: #056864;
  --admin-navy: #091a2e;
  --admin-navy-soft: #102a46;
  --admin-page: #f4f7fb;
  --admin-text: #172033;
  --admin-muted: #667085;
  --admin-border: #dfe7ef;
  background: var(--admin-page);
  color: var(--admin-text);
}

body.bexhr-admin-visual-refresh main.container {
  width: min(100%, 1500px);
  max-width: 1500px;
  padding-top: 1.15rem !important;
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

@media (min-width: 992px) {
  body.bexhr-admin-visual-refresh {
    --sidebar-width: 220px;
    padding-left: var(--sidebar-width);
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar {
    width: var(--sidebar-width);
    padding: 1.2rem 0.9rem;
    background: linear-gradient(180deg, var(--admin-navy) 0%, var(--admin-navy-soft) 100%);
    border-right: 0;
    box-shadow: 12px 0 38px rgba(9, 26, 46, 0.16);
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-brand {
    min-height: 60px;
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-brand .hr-brand-mark {
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-soft) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(8, 127, 122, 0.28);
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item {
    position: relative;
    color: #b7c4d1;
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item i {
    color: #8398ad;
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #ffffff;
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item:hover i {
    color: #8de0da;
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item.active {
    color: #ffffff;
    background: rgba(22, 184, 174, 0.14);
    box-shadow: inset 0 0 0 1px rgba(141, 224, 218, 0.12);
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item.active::before {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #71ded6, var(--admin-primary-soft));
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-item.active i {
    color: #71ded6;
  }

  body.bexhr-admin-visual-refresh .bexhr-sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
  }
}

/* =========================================================
   ADMIN HEADER CORRECTION - v1.0.0
   Presentation only. No Admin workflow behaviour changes.
   ========================================================= */

/* Sidebar brand parity */
body.bexhr-admin-visual-refresh .bexhr-sidebar-brand {
  color: #ffffff;
}

body.bexhr-admin-visual-refresh .bexhr-sidebar-brand .brand-text,
body.bexhr-admin-visual-refresh .bexhr-sidebar-brand strong,
body.bexhr-admin-visual-refresh .bexhr-sidebar-brand span:not(.hr-brand-mark) {
  color: #ffffff !important;
}

/* Replace legacy amber hero with modern BexHR application header */
body.bexhr-admin-visual-refresh .dashboard-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.15rem, 2vw, 1.55rem) !important;
  border: 1px solid #dfe7ef;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f5fbfa 100%) !important;
  color: #172033 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}

body.bexhr-admin-visual-refresh .dashboard-hero::before,
body.bexhr-admin-visual-refresh .dashboard-hero::after {
  display: none !important;
}

body.bexhr-admin-visual-refresh .dashboard-hero .hero-badge {
  width: fit-content;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(8, 127, 122, 0.18);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.07) !important;
  color: #087f7a !important;
  font-size: 0.72rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .dashboard-hero h1 {
  margin-top: 0.55rem;
  margin-bottom: 0.35rem;
  color: #172033 !important;
  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
  letter-spacing: -0.045em;
}

body.bexhr-admin-visual-refresh .dashboard-hero p {
  color: #667085 !important;
  font-size: 0.9rem;
}

body.bexhr-admin-visual-refresh .dashboard-hero .dashboard-avatar {
  background: linear-gradient(135deg, #087f7a, #16b8ae) !important;
  color: #ffffff;
  border-color: rgba(8, 127, 122, 0.18) !important;
  box-shadow: 0 10px 24px rgba(8, 127, 122, 0.18);
}

body.bexhr-admin-visual-refresh .dashboard-hero #logoutBtn {
  border-color: #d8e1e9;
  background: #ffffff;
  color: #52657b;
}

body.bexhr-admin-visual-refresh .dashboard-hero #logoutBtn:hover {
  border-color: #b9cbc9;
  background: #f5fbfa;
  color: #056864;
}

/* Metadata cards */
body.bexhr-admin-visual-refresh .hero-meta-grid {
  gap: 0.75rem;
  margin-top: 1.15rem;
}

body.bexhr-admin-visual-refresh .hero-meta-card {
  padding: 0.85rem 1rem;
  border: 1px solid #e2e9ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none;
}

body.bexhr-admin-visual-refresh .hero-meta-label {
  color: #7a899b !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.bexhr-admin-visual-refresh .hero-meta-value {
  margin-top: 0.2rem;
  color: #172033 !important;
  font-size: 0.86rem;
  font-weight: 750;
}

@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh .dashboard-hero {
    border-radius: 16px;
  }

  body.bexhr-admin-visual-refresh .hero-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ADMIN PROFILE AUTHORITATIVE VISUAL PARITY - v1.0.0

   Presentation only:
   - scoped to Admin Profile;
   - existing Admin IDs and JavaScript remain unchanged;
   - no Supabase, role, session, company, email or access logic changes.
   ========================================================= */

body.bexhr-admin-visual-refresh #adminProfileSection .admin-profile-workspace-card {
  overflow: visible;
}

body.bexhr-admin-visual-refresh #adminProfileSection .admin-profile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-admin-visual-refresh #adminProfileSection .admin-profile-eyebrow {
  margin-bottom: 0.35rem;
  color: #087f7a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

/* Security/member chips */
body.bexhr-admin-visual-refresh #adminProfileSection
:is(
  .admin-profile-security-badge,
  .admin-profile-member-pill
) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(8, 127, 122, 0.2);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.07);
  color: #056864;
  font-size: 0.76rem;
  font-weight: 750;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-security-badge {
  min-height: 34px;
  padding: 0.4rem 0.72rem;
  white-space: nowrap;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-member-pill {
  padding: 0.38rem 0.68rem;
}

/* Main two-column Profile layout */
body.bexhr-admin-visual-refresh #adminProfileSection .admin-profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 315px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

body.bexhr-admin-visual-refresh #adminProfileSection
:is(
  .admin-profile-identity-panel,
  .admin-profile-details-panel
) {
  border: 1px solid #dfe7ef;
  border-radius: 18px;
  background: #ffffff;
}

/* Identity panel */
body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-identity-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 1.45rem;
  text-align: center;
  background:
    radial-gradient(
      circle at top right,
      rgba(22, 184, 174, 0.08),
      transparent 34%
    ),
    #ffffff;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-avatar-stage {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 1rem;
}

/* Existing initials fallback */
body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-main-avatar {
  width: 112px;
  height: 112px;
  border: 4px solid #ffffff;
  background: linear-gradient(135deg, #e8f8f6, #d7f3f0);
  color: #056864;
  font-size: 1.8rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

/* Existing saved / pending image */
body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-main-image {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-avatar-status {
  position: absolute;
  right: 5px;
  bottom: 6px;
  width: 17px;
  height: 17px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #16a34a;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-name {
  color: #172033;
  font-size: 1.08rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-email {
  max-width: 100%;
  color: #667085;
  font-size: 0.82rem;
}

/* Profile photo controls */
body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-photo-panel {
  width: 100%;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid #e1e8ef;
  border-radius: 15px;
  background: #f8fafc;
  text-align: left;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-photo-title {
  display: block;
  color: #172033;
  font-size: 0.85rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-photo-help {
  color: #667085;
  font-size: 0.72rem;
  line-height: 1.45;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-photo-icon {
  color: #087f7a;
  font-size: 1.2rem;
}

body.bexhr-admin-visual-refresh #adminProfileSection
#adminProfileImageInput {
  min-height: 42px;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
}

/* Detail panel */
body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-details-panel {
  min-width: 0;
  padding: 1.45rem;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-details-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(8, 127, 122, 0.18);
  border-radius: 12px;
  background: rgba(8, 127, 122, 0.07);
  color: #087f7a;
  font-size: 1.1rem;
}

/* System-controlled fields */
body.bexhr-admin-visual-refresh #adminProfileSection
input.form-control[readonly] {
  background-color: #f5f7fa !important;
  border-color: #dfe5ec;
  color: #667085;
  cursor: not-allowed;
  box-shadow: none;
}

/* Footer */
body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid #dfe7ef;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-system-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 540px;
  color: #667085;
  font-size: 0.78rem;
  line-height: 1.5;
}

body.bexhr-admin-visual-refresh #adminProfileSection
.admin-profile-system-note i {
  margin-top: 0.1rem;
  color: #087f7a;
}

body.bexhr-admin-visual-refresh #adminProfileSection
#saveAdminProfileBtn {
  flex: 0 0 auto;
  min-width: 190px;
}

/* ---------------------------------------------------------
   RESPONSIVE PROFILE PARITY
   --------------------------------------------------------- */

@media (max-width: 1199.98px) {
  body.bexhr-admin-visual-refresh #adminProfileSection
  .admin-profile-layout {
    grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  body.bexhr-admin-visual-refresh #adminProfileSection
  .admin-profile-layout {
    grid-template-columns: 1fr;
  }

  body.bexhr-admin-visual-refresh #adminProfileSection
  .admin-profile-identity-panel {
    align-items: flex-start;
    text-align: left;
  }

  body.bexhr-admin-visual-refresh #adminProfileSection
  .admin-profile-avatar-stage {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh #adminProfileSection
  :is(
    .admin-profile-card-header,
    .admin-profile-details-heading,
    .admin-profile-form-footer
  ) {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh #adminProfileSection
  .admin-profile-security-badge {
    align-self: flex-start;
  }

  body.bexhr-admin-visual-refresh #adminProfileSection
  #saveAdminProfileBtn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   ADMIN AUTHORITATIVE SHELL + OVERVIEW WELCOME - v1.0.0

   Presentation only.
   Mirrors the approved HR/Employee dashboard hierarchy.
   No Admin authentication, Supabase, tenant, invite, access,
   email, password, MFA, or profile workflow logic changes.
   ========================================================= */

/* ---------------------------------------------------------
   ADMIN APPLICATION HEADER
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh .admin-modern-app-header {
  /* ADMIN STICKY HEADER PARITY - v1.0.0
     Match the established Employee / HR desktop header stacking
     without changing Admin content, navigation, or account controls. */
  position: relative;
  z-index: 1030;
  padding: 1.1rem 1.25rem;
  border: 1px solid #dce5ec;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

body.bexhr-admin-visual-refresh .admin-modern-app-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

body.bexhr-admin-visual-refresh .admin-modern-page-heading {
  min-width: 0;
}

body.bexhr-admin-visual-refresh .admin-modern-context-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  color: #718096;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

body.bexhr-admin-visual-refresh .admin-modern-context-name {
  color: #087f7a;
}

body.bexhr-admin-visual-refresh .admin-modern-context-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b7c3cf;
}

body.bexhr-admin-visual-refresh .admin-modern-page-heading h1 {
  margin: 0;
  color: #142033;
  font-size: clamp(1.65rem, 2.2vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

body.bexhr-admin-visual-refresh .admin-modern-page-heading p {
  margin: 0.25rem 0 0;
  color: #667085;
  font-size: 0.86rem;
}

/* Account control */
body.bexhr-admin-visual-refresh .admin-modern-account-area {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

body.bexhr-admin-visual-refresh .admin-modern-account-button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 245px;
  padding: 0.45rem 0.65rem;
  border: 1px solid #d8e1e8;
  border-radius: 14px;
  background: #ffffff;
  color: #172033;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

body.bexhr-admin-visual-refresh .admin-modern-account-button:hover {
  border-color: rgba(8, 127, 122, 0.35);
  background: #f8fbfb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

body.bexhr-admin-visual-refresh .admin-modern-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

body.bexhr-admin-visual-refresh
.admin-modern-avatar-wrap .dashboard-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(8, 127, 122, 0.18);
  background: #dff5f2;
  color: #056864;
  font-size: 0.82rem;
  font-weight: 800;
  object-fit: cover;
}

body.bexhr-admin-visual-refresh .admin-modern-account-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

body.bexhr-admin-visual-refresh .admin-modern-account-copy strong {
  overflow: hidden;
  color: #172033;
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bexhr-admin-visual-refresh .admin-modern-account-copy small {
  color: #087f7a;
  font-size: 0.7rem;
  font-weight: 700;
}

body.bexhr-admin-visual-refresh .admin-modern-account-button > i {
  color: #8a98a8;
  font-size: 0.75rem;
}

body.bexhr-admin-visual-refresh .admin-modern-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
}

/* ---------------------------------------------------------
   SIDEBAR BRAND CLEANUP
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh .bexhr-sidebar-brand {
  color: #ffffff;
}

/* ---------------------------------------------------------
   ADMIN OVERVIEW WELCOME BANNER
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh .admin-overview-welcome {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2.2rem;
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(26, 179, 171, 0.2),
      transparent 34%
    ),
    linear-gradient(
      110deg,
      #081d33 0%,
      #0b2945 58%,
      #176e73 100%
    );
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

/* ADMIN HEADER ACCOUNT PILL PARITY
   Match the compact HR account identity treatment. */
body.bexhr-admin-visual-refresh .admin-modern-account-pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.18rem;
}

body.bexhr-admin-visual-refresh .admin-modern-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0.12rem 0.42rem;
  border: 1px solid rgba(8, 127, 122, 0.22);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.08);
  color: #087f7a;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

body.bexhr-admin-visual-refresh .admin-overview-welcome-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 0.75rem;
  color: #67e8df;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.bexhr-admin-visual-refresh .admin-overview-welcome-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 3.3vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

body.bexhr-admin-visual-refresh .admin-overview-welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.55;
}

/* =========================================================
   ADMIN STICKY APPLICATION HEADER - v1.0.0

   Uses the same desktop-only sticky pattern as the approved
   Employee and HR application headers.

   Presentation only:
   - no Admin navigation changes;
   - no account/profile changes;
   - no authentication or tenant changes.
   ========================================================= */

@media (min-width: 992px) {
  body.bexhr-admin-visual-refresh
    .admin-modern-app-header {
    position: sticky;
    top: 0.75rem;
  }
}

/* END ADMIN STICKY APPLICATION HEADER - v1.0.0 */

/* ---------------------------------------------------------
   DESKTOP: sidebar replaces duplicate workspace switcher
   --------------------------------------------------------- */

@media (min-width: 992px) {
  body.bexhr-admin-visual-refresh
  .workspace-switcher-card {
    display: none;
  }
}

/* ---------------------------------------------------------
   RESPONSIVE SHELL
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
  body.bexhr-admin-visual-refresh .admin-modern-app-header-main {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh .admin-modern-account-area {
    justify-content: space-between;
  }

  body.bexhr-admin-visual-refresh .admin-modern-account-button {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-admin-visual-refresh .admin-modern-app-header {
    padding: 1rem;
    border-radius: 15px;
  }

  body.bexhr-admin-visual-refresh .admin-modern-account-copy {
    display: none;
  }

  body.bexhr-admin-visual-refresh .admin-modern-account-button {
    flex: 0 0 auto;
    min-width: 0;
  }

  body.bexhr-admin-visual-refresh .admin-overview-welcome {
    padding: 1.65rem 1.4rem;
    border-radius: 17px;
  }
}

/* ADMIN SIDEBAR BRAND PARITY
   Use the same explicit icon + wordmark alignment as HR. */
body.bexhr-admin-visual-refresh .bexhr-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

body.bexhr-admin-visual-refresh .bexhr-sidebar-brand-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   ADMIN SIDEBAR BRAND FINAL PARITY - v1.0.1

   Matches the approved HR sidebar:
   - dark initials inside the teal brand mark;
   - one BexHR wordmark only;
   - suppresses any legacy generated Admin wordmark.
   ========================================================= */

body.bexhr-admin-visual-refresh
.bexhr-sidebar-brand
.hr-brand-mark {
  color: #172033 !important;
}

/* Remove the old generated brown/amber duplicate BexHR label. */
body.bexhr-admin-visual-refresh
.bexhr-sidebar-brand::after {
  content: none !important;
  display: none !important;
}

/* Keep the explicit current BexHR wordmark aligned with HR. */
body.bexhr-admin-visual-refresh
.bexhr-sidebar-brand-text {
  margin: 0;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   ADMIN OVERVIEW METRIC PARITY - v1.0.0
   Approved HR-style operational summary cards.
   ========================================================= */

body.bexhr-admin-visual-refresh
.admin-overview-metric-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 132px;
  padding: 1.15rem;
  border: 1px solid #dce5ec;
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.05rem;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-icon-company {
  background: #d9f6f1;
  color: #087f7a;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-icon-active {
  background: #e8f7ed;
  color: #16834b;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-icon-linked {
  background: #e4f3fb;
  color: #1477a8;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-icon-warning {
  background: #fff3d5;
  color: #b66c00;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-content {
  min-width: 0;
  flex: 1;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-label {
  margin-bottom: 0.25rem;
  color: #65758b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-value {
  color: #0f1f35;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}

body.bexhr-admin-visual-refresh
.admin-overview-metric-support {
  margin-top: 0.45rem;
  color: #718096;
  font-size: 0.72rem;
  line-height: 1.35;
}

/* =========================================================
   ADMIN OVERVIEW OPERATIONAL UI - v1.0.1
   Responsive, actionable, platform-admin focused.
   ========================================================= */

body.bexhr-admin-visual-refresh .admin-overview-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.bexhr-admin-visual-refresh .admin-overview-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0.34rem 0.68rem;
  border: 1px solid rgba(8, 127, 122, 0.18);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.07);
  color: #056864;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Action cards */
body.bexhr-admin-visual-refresh .admin-overview-action-card {
  position: relative;
  appearance: none;
  border: 1px solid #dce5ec;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

body.bexhr-admin-visual-refresh .admin-overview-action-card:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 127, 122, 0.32);
  background: #fbfefe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

body.bexhr-admin-visual-refresh .admin-overview-action-card:focus-visible {
  outline: 3px solid rgba(8, 127, 122, 0.18);
  outline-offset: 3px;
}

body.bexhr-admin-visual-refresh .admin-overview-card-arrow {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #8795a7;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

body.bexhr-admin-visual-refresh
.admin-overview-action-card:hover
.admin-overview-card-arrow {
  opacity: 1;
  transform: translate(0, 0);
  background: rgba(8, 127, 122, 0.08);
  color: #087f7a;
}

/* Access readiness panel */
body.bexhr-admin-visual-refresh .admin-overview-access-health {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e8d59f;
  border-radius: 15px;
  background: #fff9e8;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-content {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff0bf;
  color: #a96500;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-kicker {
  margin-bottom: 0.15rem;
  color: #9a6a00;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-title {
  color: #654600;
  font-size: 0.84rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-message {
  margin-top: 0.16rem;
  color: #7e621d;
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Current Admin session */
body.bexhr-admin-visual-refresh .admin-current-session-card {
  overflow: hidden;
}

body.bexhr-admin-visual-refresh .admin-session-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 92px;
  padding: 1rem;
  border: 1px solid #dfe7ef;
  border-radius: 15px;
  background: #ffffff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

body.bexhr-admin-visual-refresh .admin-session-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 127, 122, 0.22);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

body.bexhr-admin-visual-refresh .admin-session-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #e8f7f5;
  color: #087f7a;
  font-size: 0.95rem;
}

body.bexhr-admin-visual-refresh .admin-session-content {
  min-width: 0;
}

body.bexhr-admin-visual-refresh .admin-session-label {
  margin-bottom: 0.2rem;
  color: #78879a;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

body.bexhr-admin-visual-refresh .admin-session-value {
  color: #172033;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh .admin-overview-panel-header {
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh .admin-overview-status-chip {
    align-self: flex-start;
  }

  body.bexhr-admin-visual-refresh .admin-overview-access-health {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh
  .admin-overview-access-health
  .dashboard-action-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-admin-visual-refresh .admin-overview-action-card,
  body.bexhr-admin-visual-refresh .admin-session-card,
  body.bexhr-admin-visual-refresh .admin-overview-card-arrow {
    transition: none;
  }

  body.bexhr-admin-visual-refresh .admin-overview-action-card:hover,
  body.bexhr-admin-visual-refresh .admin-session-card:hover {
    transform: none;
  }
}
/* =========================================================
   ADMIN OVERVIEW VISUAL CORRECTION - v1.0.2
   Operational Admin overview final layout.
   ========================================================= */

body.bexhr-admin-visual-refresh .admin-overview-metric-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  min-height: 132px;
  padding: 1rem;
  border: 1px solid #dce5ec;
  border-radius: 16px;
  background: #ffffff;
  color: inherit;
  text-align: left;
}

body.bexhr-admin-visual-refresh .admin-overview-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

body.bexhr-admin-visual-refresh .admin-overview-metric-content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

body.bexhr-admin-visual-refresh .admin-overview-metric-label {
  display: block;
  width: 100%;
  margin: 0 0 0.3rem;
  padding-right: 1.2rem;
  color: #65758b;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.025em;
}

body.bexhr-admin-visual-refresh .admin-overview-metric-value {
  display: block;
  margin: 0;
  color: #0f1f35;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

body.bexhr-admin-visual-refresh .admin-overview-metric-support {
  display: block;
  margin-top: 0.45rem;
  color: #718096;
  font-size: 0.7rem;
  line-height: 1.35;
}

body.bexhr-admin-visual-refresh .admin-overview-action-card {
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

body.bexhr-admin-visual-refresh .admin-overview-action-card:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 127, 122, 0.34);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

body.bexhr-admin-visual-refresh .admin-overview-action-card:focus-visible {
  outline: 3px solid rgba(8, 127, 122, 0.18);
  outline-offset: 3px;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid;
  border-radius: 14px;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-warning {
  border-color: #ead69c;
  background: #fff8df;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-success {
  border-color: #b9dfcf;
  background: #f0faf6;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-content {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  flex: 1 1 auto;
}

body.bexhr-admin-visual-refresh .admin-overview-access-health-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

body.bexhr-admin-visual-refresh
.admin-overview-access-health-warning
.admin-overview-access-health-icon {
  background: #ffefb9;
  color: #a86600;
}

body.bexhr-admin-visual-refresh
.admin-overview-access-health-success
.admin-overview-access-health-icon {
  background: #dff4e9;
  color: #087f55;
}

body.bexhr-admin-visual-refresh
.admin-overview-access-health
#adminOverviewOpenCompaniesBtn {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh .admin-overview-access-health {
    align-items: stretch;
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh
  .admin-overview-access-health
  #adminOverviewOpenCompaniesBtn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bexhr-admin-visual-refresh .admin-overview-action-card {
    transition: none;
  }

  body.bexhr-admin-visual-refresh .admin-overview-action-card:hover {
    transform: none;
  }
}

/* =========================================================
   ADMIN OPERATIONS CONSOLE - v1.0.0

   Admin-specific operational layer.
   Uses the established BexHR navy / teal system without
   copying the HR dashboard literally.
   ========================================================= */


/* ---------------------------------------------------------
   PLATFORM READINESS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
.admin-operations-readiness {
  padding: 1.2rem;
  border: 1px solid #dce5ec;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(8, 127, 122, 0.035),
      rgba(255, 255, 255, 0) 42%
    ),
    #f9fbfc;
}


body.bexhr-admin-visual-refresh
.admin-operations-readiness-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}


body.bexhr-admin-visual-refresh
.admin-operations-readiness-kicker {
  margin-bottom: 0.25rem;
  color: #087f7a;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.065em;
}


body.bexhr-admin-visual-refresh
.admin-operations-readiness-percent {
  flex: 0 0 auto;
  color: #0b2138;
  font-size: 1.45rem;
  font-weight: 800;
}


body.bexhr-admin-visual-refresh
.admin-operations-readiness-track {
  width: 100%;
  height: 8px;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e9ee;
}


body.bexhr-admin-visual-refresh
.admin-operations-readiness-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #087f7a,
    #18b9ad
  );
  transition: width 0.35s ease;
}


/* ---------------------------------------------------------
   EXCEPTION GRID
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
.admin-operations-exception-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid #dfe7ed;
  border-radius: 13px;
  background: #ffffff;
  color: #172033;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 127, 122, 0.3);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 10px;
  background: #e6f7f5;
  color: #087f7a;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card small {
  color: #718096;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card strong {
  margin-top: 0.15rem;
  color: #102038;
  font-size: 1.25rem;
  font-weight: 800;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card
span span {
  margin-top: 0.1rem;
  color: #7a8797;
  font-size: 0.68rem;
}


body.bexhr-admin-visual-refresh
.admin-operations-exception-card > i {
  color: #9aa6b4;
  font-size: 0.72rem;
}


/* ---------------------------------------------------------
   ACTION CENTRE
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
.admin-action-centre {
  padding-top: 1.15rem;
  border-top: 1px solid #e0e7ed;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-heading {
  margin-bottom: 0.85rem;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  min-height: 82px;
  padding: 0.9rem;
  border: 1px solid #dce5ec;
  border-radius: 14px;
  background: #ffffff;
  color: #172033;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-item:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 127, 122, 0.32);
  box-shadow: 0 9px 22px rgba(15, 23, 42, 0.07);
}


body.bexhr-admin-visual-refresh
.admin-action-centre-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #e7f7f5;
  color: #087f7a;
  font-size: 1rem;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-copy strong {
  color: #172033;
  font-size: 0.78rem;
  font-weight: 800;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-copy small {
  margin-top: 0.18rem;
  color: #748296;
  font-size: 0.67rem;
  line-height: 1.4;
}


body.bexhr-admin-visual-refresh
.admin-action-centre-item > i {
  color: #9aa6b4;
  font-size: 0.8rem;
}


/* ---------------------------------------------------------
   RESPONSIVE ADMIN OPERATIONS
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
  body.bexhr-admin-visual-refresh
  .admin-operations-exception-grid,
  body.bexhr-admin-visual-refresh
  .admin-action-centre-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 575.98px) {
  body.bexhr-admin-visual-refresh
  .admin-operations-readiness-heading {
    flex-direction: column;
  }
}


@media (prefers-reduced-motion: reduce) {
  body.bexhr-admin-visual-refresh
  .admin-operations-readiness-bar,
  body.bexhr-admin-visual-refresh
  .admin-operations-exception-card,
  body.bexhr-admin-visual-refresh
  .admin-action-centre-item {
    transition: none;
  }

  body.bexhr-admin-visual-refresh
  .admin-operations-exception-card:hover,
  body.bexhr-admin-visual-refresh
  .admin-action-centre-item:hover {
    transform: none;
  }
}

/* =========================================================
   ADMIN OPERATIONS SNAPSHOT - DISPLAY-ONLY METRICS v1.0.0

   These four cards are informational platform metrics only.
   They must not visually imply navigation or click behaviour.

   Navigation remains available through:
   - Platform Readiness
   - Action Centre

   This rule is intentionally scoped to Admin Overview only.
   ========================================================= */

body.bexhr-admin-visual-refresh
  #adminOverviewSection
  .admin-overview-metric-card {
  /* Use the normal cursor because these metrics are not actions. */
  cursor: default !important;
}
/* =========================================================
   ADMIN COMPANIES SUB-WORKSPACE NAVIGATION - v1.0.0

   Presentation only.
   Existing Admin authentication and Companies workflows remain unchanged.
   ========================================================= */

body.bexhr-admin-visual-refresh
  .admin-companies-sidebar-subnav {
  display: grid;
  gap: 0.25rem;
  margin: 0.25rem 0 0.45rem 2.45rem;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(100, 116, 139, 0.22);
}

body.bexhr-admin-visual-refresh
  .admin-companies-sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 34px;
  padding: 0.42rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: left;
}

body.bexhr-admin-visual-refresh
  .admin-companies-sidebar-subitem:hover {
  background: rgba(8, 127, 122, 0.06);
  color: #0f4f4c;
}

body.bexhr-admin-visual-refresh
  .admin-companies-sidebar-subitem.active {
  background: rgba(8, 127, 122, 0.1);
  color: #075f5b;
  font-weight: 700;
}

body.bexhr-admin-visual-refresh
  .admin-companies-sidebar-subitem i {
  width: 16px;
  text-align: center;
}

body.bexhr-admin-visual-refresh
  #adminTenantsSection
  .admin-companies-subworkspace.d-none {
  display: none !important;
}

@media (max-width: 991.98px) {
  body.bexhr-admin-visual-refresh
    .admin-companies-sidebar-subnav {
    display: none;
  }
}

/* =========================================================
   ADMIN COMPANIES STANDALONE SUB-WORKSPACES - v1.0.0

   The Companies section is a routing/container workspace.
   Company Identity, Email Setup and User Access provide their own
   authoritative card surfaces, so the parent Bootstrap card must
   not create a second visible card around them.

   Presentation only:
   - no workspace IDs change;
   - no navigation behaviour changes;
   - no company, email, user-access, auth, RPC or Supabase logic changes.
   ========================================================= */

body.bexhr-admin-visual-refresh
  #adminTenantsSection > .dashboard-section-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

body.bexhr-admin-visual-refresh
  #adminTenantsSection > .dashboard-section-card > .card-body {
  padding: 0 !important;
}

/* =========================================================
   ADMIN USER ACCESS TRUE STANDALONE LAYOUT - v1.0.1

   User Access is now a routing/workspace container only.
   Invite, Reassign and User Access Records are the visible
   operational surfaces.

   Safety:
   - .border remains in HTML for existing double-click lookup;
   - no IDs or forms change;
   - no auth, RPC, Supabase or access behaviour changes.
   ========================================================= */

/* ADMIN USER ACCESS PERSISTENT WORKSPACE SHELL - v1.0.3
   The User Access card owns the heading, collapse control and
   operational content. Individual operational sections remain
   visually distinct cards inside the workspace. */
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace.admin-user-access-workspace {
  position: relative;
  padding: 1.4rem;
  border: 1px solid #dbe7eb !important;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

/* ADMIN USER ACCESS PERSISTENT WORKSPACE SHELL - v1.0.3
   Match the authoritative Admin teal accent used across Companies. */
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace.admin-user-access-workspace::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--admin-primary);
}

/* =========================================================
   ADMIN USER ACCESS PERSISTENT HEADER CARD - v1.0.2

   User Access operational sections remain standalone cards.
   The workspace header is also a persistent card so Collapse never
   leaves Platform Admin looking at an empty/plain workspace.

   When collapsed:
   - this header card remains visible;
   - Admin controlled remains visible;
   - Expand remains available;
   - operational cards are hidden.

   When expanded:
   - this header remains the workspace introduction;
   - Invite, Reassign and Records remain separate cards beneath it.
   ========================================================= */

/* ADMIN USER ACCESS PERSISTENT WORKSPACE SHELL - v1.0.3
   Header belongs inside the workspace card; it must not create
   a second card around itself. */
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  > .admin-user-access-header {
  margin-bottom: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}


/* Give clear separation between the standalone operational cards. */
body.bexhr-admin-visual-refresh
  #adminUserCompanyAssignmentCollapse {
  display: grid;
  gap: 1rem;
}

/* ADMIN USER ACCESS PERSISTENT WORKSPACE SHELL - v1.0.3
   When operational content is collapsed, remove the header's
   bottom spacing so the remaining card stays compact. */
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace:has(
    > #adminUserCompanyAssignmentCollapse.d-none
  )
  > .admin-user-access-header {
  margin-bottom: 0;
}

/* Invite Company User and Reassign Existing User already have their
   own operation-card styling. Prevent inherited outer-card spacing. */
body.bexhr-admin-visual-refresh
  #adminUserCompanyAssignmentCollapse
  > .admin-user-access-operation-card {
  margin: 0;
}


/* User Access Records must be a peer card, not loose content beneath
   the two forms. */
body.bexhr-admin-visual-refresh
  #adminUserCompanyAssignmentCollapse
  > .admin-user-access-records-section {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid #dbe7eb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   ADMIN COMPANY IDENTITY AUTHORITATIVE UI - v1.0.0

   Presentation only.
   Existing company create/update/delete and tenant logic remain unchanged.
   ========================================================= */


/* Parent Companies admin-control pill */
body.bexhr-admin-visual-refresh
  #adminTenantsSection
  .admin-company-control-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
  padding: 0.38rem 0.75rem;
  border: 1px solid rgba(8, 127, 122, 0.16);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.06);
  color: #075f5b;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}


/* Main Company Identity card */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace.admin-company-identity-card {
  position: relative;
  padding: 1.55rem 1.65rem;
  border: 1px solid #dce5ec;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace.admin-company-identity-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #087f7a;
}


/* Identity icon */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-identity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(8, 127, 122, 0.16);
  border-radius: 12px;
  background: rgba(8, 127, 122, 0.07);
  color: #087f7a;
  font-size: 1.05rem;
}


/* Form controls */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  :is(.form-control, .form-select) {
  min-height: 46px;
  border-color: #d7e0e8;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: none;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  :is(.form-control, .form-select):focus {
  border-color: rgba(8, 127, 122, 0.62);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.08);
}


/* Form labels */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .form-label {
  color: #172033;
  font-size: 0.86rem;
}


/* Company Records divider */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  hr {
  border-color: #e2e8f0;
  opacity: 1;
}


/* Company records table */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .dashboard-table {
  border-collapse: separate;
  border-spacing: 0;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .dashboard-table thead th {
  padding: 0.78rem 0.7rem;
  border-bottom: 1px solid #dbe4eb;
  background: #f8fafc;
  color: #526176;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .dashboard-table tbody td {
  padding: 0.88rem 0.7rem;
  border-bottom-color: #e8edf2;
  vertical-align: middle;
}


/* Custom Company ID pill - replaces Bootstrap badge */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-code-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.28rem 0.62rem;
  border: 1px solid #d7e0e8;
  border-radius: 999px;
  background: #f8fafc;
  color: #46566b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}


/* Custom company status pill - replaces Bootstrap badge */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 28px;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
}


/* Active */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-status-pill-active {
  border: 1px solid rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.08);
  color: #137333;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-status-pill-active
  .admin-company-status-dot {
  background: #16a34a;
}


/* Inactive */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-status-pill-inactive {
  border: 1px solid rgba(100, 116, 139, 0.18);
  background: rgba(100, 116, 139, 0.08);
  color: #526176;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-status-pill-inactive
  .admin-company-status-dot {
  background: #64748b;
}


/* Action buttons */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .dashboard-table
  .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
}


/* Avoid decorative motion in operational setup */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  :is(
    .admin-company-identity-card,
    .admin-company-code-pill,
    .admin-company-status-pill,
    .dashboard-table .btn
  ) {
  transform: none !important;
}


/* Responsive Company Identity */
@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace.admin-company-identity-card {
    padding: 1.15rem;
    border-radius: 16px;
  }
}

/* =========================================================
   ADMIN COMPANY IDENTITY FORM REFRESH - v1.0.0

   Complete visual treatment for the Company Identity form.

   Scope:
   - Company Identity only.
   - Existing tenantCreateForm ID retained.
   - Existing inputs, save, refresh, edit, cancel and delete logic retained.
   - No Supabase / RPC / auth / company workflow changes.
   ========================================================= */


/* ---------------------------------------------------------
   FORM WORKSPACE SURFACE
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm {
  position: relative;
  margin-top: 1.5rem;
  padding: 1.35rem;
  border: 1px solid #dfe7ee;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(248, 251, 252, 0.94) 0%,
      #ffffff 100%
    );
}


/* Small visual anchor at top of form */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm::before {
  content: "COMPANY DETAILS";
  display: block;
  margin-bottom: 1rem;
  color: #087f7a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   LABELS + SUPPORTING TEXT
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  .form-label {
  margin-bottom: 0.45rem;
  color: #182337;
  font-size: 0.82rem;
  font-weight: 700;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  .form-text {
  margin-top: 0.45rem;
  color: #66758a;
  font-size: 0.75rem;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  :is(.form-control, .form-select) {
  min-height: 48px;
  padding-right: 0.95rem;
  padding-left: 0.95rem;
  border: 1px solid #d6e0e8;
  border-radius: 12px;
  background-color: #ffffff;
  color: #162033;
  box-shadow: none;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  :is(.form-control, .form-select)::placeholder {
  color: #8491a3;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  :is(.form-control, .form-select):focus {
  border-color: rgba(8, 127, 122, 0.62);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.08);
}


/* ---------------------------------------------------------
   REQUIRED MARKERS
   Keep them visible but less visually aggressive.
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  .text-danger {
  font-weight: 700;
}


/* ---------------------------------------------------------
   FORM ACTION AREA
   Give create / update / refresh / cancel a deliberate footer.
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  .col-12:last-child {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid #e4eaf0;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantCreateForm
  .dashboard-action-btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   COMPANY RECORDS SECTION
   Separate saved records from the editable form.
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantRecordsHeader {
  color: #122035;
  font-size: 1.05rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantRecordsTableWrapper {
  overflow: hidden;
  border: 1px solid #e0e7ee;
  border-radius: 14px;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantRecordsTableWrapper
  .dashboard-table {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantRecordsEmptyState {
  padding: 1rem 1.1rem;
  border-color: #dfe7ee !important;
  border-radius: 12px;
  background: #f8fafc;
  color: #65758a;
}


/* ---------------------------------------------------------
   ACTION BUTTON POLISH
   Preserve semantic edit/delete colours.
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantRecordsTableBody
  .btn-sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #tenantRecordsTableBody
  .btn-sm:hover {
  transform: none;
}


/* ---------------------------------------------------------
   COLLAPSED CARD
   Keep collapsed Company Identity compact and intentional.
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  #toggleAdminCompanyIdentityCardBtn {
  min-height: 40px;
  padding-right: 0.85rem;
  padding-left: 0.85rem;
  border-radius: 10px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    #tenantCreateForm {
    padding: 1.15rem;
  }
}

@media (max-width: 575.98px) {
  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    #tenantCreateForm {
    padding: 1rem;
    border-radius: 14px;
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    #tenantCreateForm
    .dashboard-action-btn {
    width: 100%;
  }
}

/* =========================================================
   ADMIN COMPANY IDENTITY MODERN FORM - v1.0.0

   Presentation only.
   Existing Company Identity workflows and field IDs remain intact.
   ========================================================= */


/* ---------------------------------------------------------
   FORM CONTAINER
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form {
  margin-top: 1.5rem;
  padding: 0;
  border: 1px solid #dce5ec;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}


/* ---------------------------------------------------------
   FORM INTRO
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 1.35rem;
  border-bottom: 1px solid #e3e9ef;
  background:
    linear-gradient(
      90deg,
      rgba(8, 127, 122, 0.055),
      rgba(248, 250, 252, 0.72)
    );
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-kicker {
  margin-bottom: 0.3rem;
  color: #087f7a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-title {
  margin: 0 0 0.25rem;
  color: #102036;
  font-size: 1rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-copy {
  max-width: 650px;
  margin: 0;
  color: #65758a;
  font-size: 0.78rem;
  line-height: 1.5;
}


/* Required-fields indicator */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-required-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.38rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-required-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc3545;
}


/* ---------------------------------------------------------
   FORM GRID
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(0, 1.05fr)
    minmax(210px, 0.75fr);
  gap: 1.25rem;
  padding: 1.35rem;
}


/* ---------------------------------------------------------
   FIELD
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-field {
  min-width: 0;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-field-label {
  display: block;
  margin-bottom: 0.48rem;
  color: #172337;
  font-size: 0.78rem;
  font-weight: 750;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-required {
  margin-left: 0.12rem;
  color: #dc3545;
}


/* ---------------------------------------------------------
   INPUT SHELLS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  :is(
    .admin-company-input-shell,
    .admin-company-select-shell
  ) {
  position: relative;
}


/* Modern input */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-input {
  min-height: 48px;
  padding: 0.7rem 0.95rem 0.7rem 2.55rem;
  border: 1px solid #d8e1e9;
  border-radius: 11px;
  background: #ffffff;
  color: #172033;
  font-size: 0.86rem;
  box-shadow: none;
}


/* Modern select */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-select {
  min-height: 48px;
  padding-left: 0.95rem;
  border: 1px solid #d8e1e9;
  border-radius: 11px;
  background-color: #ffffff;
  color: #172033;
  font-size: 0.86rem;
  box-shadow: none;
}


/* Focus */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  :is(
    .admin-company-input,
    .admin-company-select
  ):focus {
  border-color: rgba(8, 127, 122, 0.64);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.08);
}


/* Placeholder */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-input::placeholder {
  color: #94a0af;
}


/* Supporting text */
body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-field-help {
  margin-top: 0.45rem;
  color: #718096;
  font-size: 0.7rem;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   FORM FOOTER
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
  border-top: 1px solid #e3e9ef;
  background: #fbfcfd;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-actions-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form-actions
  .dashboard-action-btn {
  min-height: 40px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   REMOVE OLD BOOTSTRAP FORM-GRID VISUAL INFLUENCE
   FROM THIS NEW STRUCTURE
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminCompanyIdentityWorkspace
  .admin-company-form
  .invalid-feedback {
  margin-top: 0.4rem;
  font-size: 0.7rem;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-field-status {
    grid-column: 1 / -1;
  }
}


@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-form-intro {
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-form-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-field-status {
    grid-column: auto;
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-form-actions-primary {
    display: grid;
  }

  body.bexhr-admin-visual-refresh
    #adminCompanyIdentityWorkspace
    .admin-company-form-actions
    .dashboard-action-btn {
    width: 100%;
  }
}
/* =========================================================
   ADMIN EMAIL SETUP AUTHORITATIVE UI - v1.0.0

   Presentation only.
   Existing Admin Email Setup workflows remain unchanged.
   ========================================================= */


/* MAIN CARD */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace.admin-email-setup-card {
  position: relative;
  padding: 1.6rem;
  border-color: #dce5ec !important;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace.admin-email-setup-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #087f7a;
}


/* HEADER */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-header-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(8, 127, 122, 0.16);
  border-radius: 12px;
  background: rgba(8, 127, 122, 0.07);
  color: #087f7a;
  font-size: 1.05rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-eyebrow {
  margin-bottom: 0.25rem;
  color: #087f7a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-title {
  margin: 0 0 0.2rem;
  color: #122035;
  font-size: 1.05rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-copy {
  margin: 0;
  color: #66758a;
  font-size: 0.78rem;
  line-height: 1.5;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}


/* CUSTOM ADMIN CONTROL PILL */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(8, 127, 122, 0.17);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.06);
  color: #075f5b;
  font-size: 0.72rem;
  font-weight: 700;
}


/* CONTROL NOTE */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(8, 127, 122, 0.13);
  border-radius: 14px;
  background: rgba(8, 127, 122, 0.045);
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #ffffff;
  color: #087f7a;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-note strong,
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-note span {
  display: block;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-note strong {
  margin-bottom: 0.2rem;
  color: #172337;
  font-size: 0.82rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-control-note div > span {
  color: #66758a;
  font-size: 0.75rem;
  line-height: 1.5;
}


/* SUMMARY */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-summary-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 92px;
  padding: 0.95rem 1rem;
  border: 1px solid #dfe7ee;
  border-radius: 14px;
  background: #ffffff;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: rgba(8, 127, 122, 0.07);
  color: #087f7a;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-summary-label {
  display: block;
  margin-bottom: 0.25rem;
  color: #66758a;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-summary-value {
  display: block;
  color: #122035;
  font-size: 1.2rem;
  font-weight: 800;
}


/* FORM */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form {
  margin-bottom: 1.5rem;
  border: 1px solid #dce5ec;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e4eaf0;
  background:
    linear-gradient(
      90deg,
      rgba(8, 127, 122, 0.05),
      rgba(248, 250, 252, 0.82)
    );
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-kicker,
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-section-kicker {
  margin-bottom: 0.25rem;
  color: #087f7a;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-heading h4,
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-section-heading h4 {
  margin: 0 0 0.2rem;
  color: #122035;
  font-size: 0.95rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-heading p,
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-section-heading p {
  margin: 0;
  color: #66758a;
  font-size: 0.74rem;
  line-height: 1.5;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-required-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-required-note > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc3545;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-field {
  min-width: 0;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-field label {
  display: block;
  margin-bottom: 0.45rem;
  color: #172337;
  font-size: 0.76rem;
  font-weight: 750;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-field label > span {
  color: #dc3545;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-field :is(.form-control, .form-select) {
  min-height: 46px;
  border: 1px solid #d8e1e9;
  border-radius: 11px;
  background: #ffffff;
  color: #172033;
  font-size: 0.82rem;
  box-shadow: none;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-field :is(.form-control, .form-select):focus {
  border-color: rgba(8, 127, 122, 0.64);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.08);
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-field small {
  display: block;
  margin-top: 0.42rem;
  color: #718096;
  font-size: 0.68rem;
  line-height: 1.45;
}


/* FORM ACTIONS */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid #e4eaf0;
  background: #fbfcfd;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-form-actions-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}


/* RECORD SECTIONS */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-records-section,
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-history-section {
  padding-top: 1.35rem;
  border-top: 1px solid #e3e9ef;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-history-section {
  margin-top: 1.5rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-section-heading {
  margin-bottom: 0.9rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}


/* EMPTY STATES */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-empty-state {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid #e1e8ee;
  border-radius: 12px;
  background: #f8fafc;
  color: #66758a;
  font-size: 0.75rem;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-empty-state.d-none {
  display: none !important;
}


/* TABLE SHELLS */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  :is(
    .admin-email-table-shell,
    .admin-email-history-table-shell
  ) {
  overflow: auto;
  border: 1px solid #dfe7ee;
  border-radius: 14px;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-history-table-shell {
  max-height: 240px;
  overscroll-behavior: contain;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .dashboard-table thead th {
  padding: 0.75rem 0.7rem;
  border-bottom: 1px solid #dbe4eb;
  background: #f8fafc;
  color: #526176;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .dashboard-table tbody td {
  padding: 0.82rem 0.7rem;
  border-bottom-color: #e8edf2;
  vertical-align: middle;
}


/* RUNTIME STATUS PILLS */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0.25rem 0.58rem;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 700;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-status-pill.text-bg-success {
  border: 1px solid rgba(22, 163, 74, 0.18) !important;
  background: rgba(22, 163, 74, 0.08) !important;
  color: #137333 !important;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-status-pill.text-bg-danger {
  border: 1px solid rgba(220, 53, 69, 0.18) !important;
  background: rgba(220, 53, 69, 0.07) !important;
  color: #b42318 !important;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-status-pill.text-bg-secondary {
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  background: rgba(100, 116, 139, 0.08) !important;
  color: #526176 !important;
}

body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .admin-email-status-pill.text-bg-light {
  border: 1px solid #dce5ec !important;
  background: #f8fafc !important;
  color: #526176 !important;
}


/* TABLE ACTIONS */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  .dashboard-table
  .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  transform: none !important;
}


/* COLLAPSE */
body.bexhr-admin-visual-refresh
  #adminEmailSetupWorkspace
  #toggleAdminEmailSetupCardBtn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
}


/* RESPONSIVE */
@media (max-width: 1199.98px) {
  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-summary-grid,
  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace.admin-email-setup-card {
    padding: 1.15rem;
  }

  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-header,
  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-form-heading,
  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-history-heading {
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-summary-grid,
  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-form-grid {
    grid-template-columns: 1fr;
  }

  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-form-actions-primary {
    display: grid;
  }

  body.bexhr-admin-visual-refresh
    #adminEmailSetupWorkspace
    .admin-email-form-actions
    .dashboard-action-btn {
    width: 100%;
  }
}

/* =========================================================
   ADMIN USER ACCESS AUTHORITATIVE UI - v1.0.0

   Complete visual treatment for Companies > User Access.

   Presentation only.
   Existing invite, company assignment, security and RPC
   behaviour remains unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   MAIN WORKSPACE CARD
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace.admin-user-access-card {
  position: relative;
  padding: 1.6rem;
  border-color: #dce5ec !important;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace.admin-user-access-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #087f7a;
}


/* ---------------------------------------------------------
   WORKSPACE HEADER
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-header-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(8, 127, 122, 0.16);
  border-radius: 12px;
  background: rgba(8, 127, 122, 0.07);
  color: #087f7a;
  font-size: 1.05rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-eyebrow,
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-section-kicker {
  margin-bottom: 0.25rem;
  color: #087f7a;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-title {
  margin: 0 0 0.2rem;
  color: #122035;
  font-size: 1.05rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-copy {
  max-width: 720px;
  margin: 0;
  color: #66758a;
  font-size: 0.78rem;
  line-height: 1.5;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}


/* ---------------------------------------------------------
   CONTROL PILL
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-control-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(8, 127, 122, 0.17);
  border-radius: 999px;
  background: rgba(8, 127, 122, 0.06);
  color: #075f5b;
  font-size: 0.72rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   OPERATION CARDS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-operation-card {
  margin-bottom: 1.35rem;
  border: 1px solid #dce5ec;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-reassign-card {
  border-color: rgba(8, 127, 122, 0.2);
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-operation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e4eaf0;
  background:
    linear-gradient(
      90deg,
      rgba(8, 127, 122, 0.05),
      rgba(248, 250, 252, 0.82)
    );
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-operation-heading-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-operation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: rgba(8, 127, 122, 0.07);
  color: #087f7a;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-operation-heading h4,
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-records-heading h4 {
  margin: 0 0 0.2rem;
  color: #122035;
  font-size: 0.95rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-operation-heading p,
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-records-heading p {
  max-width: 700px;
  margin: 0;
  color: #66758a;
  font-size: 0.74rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   OPERATION STATUS PILLS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  :is(
    .admin-user-access-bootstrap-pill,
    .admin-user-access-impact-pill
  ) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-bootstrap-pill {
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(13, 110, 253, 0.06);
  color: #0b5ed7;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-impact-pill {
  border: 1px solid rgba(217, 119, 6, 0.18);
  background: rgba(217, 119, 6, 0.07);
  color: #9a5b05;
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  padding: 1.25rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-reassign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 1.25rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field-wide {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.625rem);
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field {
  min-width: 0;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field > label {
  display: block;
  margin-bottom: 0.45rem;
  color: #172337;
  font-size: 0.77rem;
  font-weight: 750;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field > label > span {
  color: #dc3545;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-optional {
  margin-left: 0.25rem;
  color: #718096 !important;
  font-size: 0.67rem;
  font-weight: 650;
  text-transform: uppercase;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field
  :is(.form-control, .form-select) {
  min-height: 48px;
  border: 1px solid #d8e1e9;
  border-radius: 11px;
  background-color: #ffffff;
  color: #172033;
  font-size: 0.84rem;
  box-shadow: none;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field
  :is(.form-control, .form-select):focus {
  border-color: rgba(8, 127, 122, 0.64);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.08);
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field
  :is(.form-control, .form-select):disabled {
  background: #f1f4f7;
  color: #66758a;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-field > small {
  display: block;
  margin-top: 0.42rem;
  color: #718096;
  font-size: 0.69rem;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   FORM ACTIONS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid #e4eaf0;
  background: #fbfcfd;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-form-actions-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}


/* ---------------------------------------------------------
   RECORDS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-records-section {
  padding-top: 1.4rem;
  border-top: 1px solid #e3e9ef;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-records-heading {
  margin-bottom: 0.9rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-empty-state {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid #e1e8ee;
  border-radius: 12px;
  background: #f8fafc;
  color: #66758a;
  font-size: 0.75rem;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-empty-state.d-none {
  display: none !important;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-user-access-table-shell {
  overflow: auto;
  border: 1px solid #dfe7ee;
  border-radius: 14px;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-access-table > thead th {
  padding: 0.78rem 0.75rem;
  border-bottom: 1px solid #dbe4eb;
  background: #f8fafc;
  color: #526176;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}


/* Existing grouped company rows get the new surface treatment. */
body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-access-company-toggle {
  border-left-color: #087f7a;
  background:
    linear-gradient(
      90deg,
      rgba(8, 127, 122, 0.045),
      #ffffff
    );
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-access-company-name {
  color: #122035;
}

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  :is(
    .admin-access-role-pill,
    .admin-access-company-id-pill
  ) {
  border-color: #dce5ec;
  background: #f8fafc;
  color: #526176;
}


/* ---------------------------------------------------------
   ACTION BUTTONS
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  .admin-access-company-inner-table
  .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  transform: none !important;
}


/* ---------------------------------------------------------
   COLLAPSE BUTTON
   --------------------------------------------------------- */

body.bexhr-admin-visual-refresh
  #adminUserAccessWorkspace
  #toggleAdminUserCompanyAssignmentCardBtn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    .admin-user-access-field-wide {
    max-width: none;
  }
}


@media (max-width: 767.98px) {

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace.admin-user-access-card {
    padding: 1.15rem;
  }

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    :is(
      .admin-user-access-header,
      .admin-user-access-operation-heading
    ) {
    flex-direction: column;
  }

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    :is(
      .admin-user-access-form-grid,
      .admin-user-access-reassign-grid
    ) {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    .admin-user-access-field-wide {
    grid-column: auto;
  }

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    .admin-user-access-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    .admin-user-access-form-actions-primary {
    display: grid;
  }

  body.bexhr-admin-visual-refresh
    #adminUserAccessWorkspace
    .admin-user-access-form-actions
    .dashboard-action-btn {
    width: 100%;
  }
}

/* =========================================================
   ADMIN HELP GUIDE ROLE PARITY - v1.1.1

   Approved operating-guide pattern:
   - recommended starting point
   - workspace flags
   - varied workspace colours
   - direct workspace links
   - suggested operating flow
   - yellow guidance banner

   Presentation only.
   ========================================================= */

body.bexhr-admin-visual-refresh .admin-operating-guide-modal .modal-dialog {
  max-width: 1080px;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-shell {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.20);
}

body.bexhr-admin-visual-refresh .admin-operating-guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.4rem 1.6rem 1.25rem;
  border-bottom: 1px solid #e5edf1;
  background:
    radial-gradient(
      circle at top right,
      rgba(20, 184, 166, 0.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fcfc 100%
    );
}

body.bexhr-admin-visual-refresh .admin-operating-guide-header-main {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-header-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #b7e3df;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf8f7;
  color: #0f766e;
  font-size: 1.15rem;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-kicker,
body.bexhr-admin-visual-refresh .admin-guide-flag,
body.bexhr-admin-visual-refresh .admin-guide-workspace-kicker {
  color: #0f8f89;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-title {
  margin: 0.2rem 0 0.35rem;
  color: #10233f;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-copy {
  margin: 0;
  color: #667892;
  line-height: 1.5;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #d4dee6;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #64748b;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-close:hover,
body.bexhr-admin-visual-refresh .admin-operating-guide-close:focus-visible {
  color: #0f766e;
  border-color: #9dd7d3;
  background: #f0fbfa;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-body {
  display: grid;
  gap: 0.95rem;
  padding: 1.25rem 1.6rem 1.45rem;
  background: #ffffff;
}


/* RECOMMENDED STARTING POINT */

body.bexhr-admin-visual-refresh .admin-guide-recommended {
  width: 100%;
  padding: 1.05rem 1.1rem;
  border: 1px solid #b8e2df;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  background:
    linear-gradient(
      105deg,
      #f0fbfa 0%,
      #ffffff 64%,
      #eefafa 100%
    );
  color: inherit;
  text-align: left;
}

body.bexhr-admin-visual-refresh .admin-guide-recommended:hover {
  border-color: #7bcac5;
  box-shadow: 0 9px 22px rgba(15, 118, 110, 0.08);
}

body.bexhr-admin-visual-refresh .admin-guide-recommended-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #14b8a6;
  color: #ffffff;
  font-size: 1.05rem;
}

body.bexhr-admin-visual-refresh .admin-guide-recommended-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

body.bexhr-admin-visual-refresh .admin-guide-recommended-copy > strong {
  color: #10233f;
  font-size: 0.98rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-recommended-copy > small {
  color: #667892;
  line-height: 1.5;
}


/* ROUTE LINKS */

body.bexhr-admin-visual-refresh .admin-guide-open-link,
body.bexhr-admin-visual-refresh .admin-guide-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f8f89;
  font-size: 0.76rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-card-link {
  margin-top: 0.55rem;
}

body.bexhr-admin-visual-refresh .admin-guide-route:hover .admin-guide-open-link,
body.bexhr-admin-visual-refresh .admin-guide-route:hover .admin-guide-card-link {
  color: #0b5f59;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* PLATFORM ADMINISTRATION */

body.bexhr-admin-visual-refresh .admin-guide-section-intro {
  margin-bottom: 0.8rem;
}

body.bexhr-admin-visual-refresh .admin-guide-section-intro h6 {
  margin: 0.18rem 0 0.25rem;
  color: #10233f;
  font-size: 1rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-section-intro p {
  margin: 0;
  color: #667892;
  font-size: 0.82rem;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-card {
  min-width: 0;
  min-height: 175px;
  padding: 0.95rem;
  border: 1px solid #dce6ee;
  border-radius: 17px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #ffffff;
  color: inherit;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(15, 23, 42, 0.06);
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* COMPANY IDENTITY - BLUE */

body.bexhr-admin-visual-refresh .admin-guide-workspace-icon-identity {
  background: #e8f3ff;
  color: #1976b9;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-card-identity:hover {
  border-color: #b8d9f0;
}


/* EMAIL SETUP - INDIGO */

body.bexhr-admin-visual-refresh .admin-guide-workspace-icon-email {
  background: #eef0ff;
  color: #5966c9;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-card-email:hover {
  border-color: #c8cdf1;
}


/* USER ACCESS - TEAL */

body.bexhr-admin-visual-refresh .admin-guide-workspace-icon-access {
  background: #e6f8f5;
  color: #0f8f89;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-card-access:hover {
  border-color: #a8ddd8;
}


/* MY PROFILE - SLATE */

body.bexhr-admin-visual-refresh .admin-guide-workspace-icon-profile {
  background: #eef2f7;
  color: #64748b;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-card-profile:hover {
  border-color: #cbd5e1;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-copy > strong {
  margin-top: 0.2rem;
  color: #10233f;
  font-size: 0.93rem;
  font-weight: 800;
  line-height: 1.35;
}

body.bexhr-admin-visual-refresh .admin-guide-workspace-copy > small {
  margin-top: 0.3rem;
  color: #667892;
  font-size: 0.78rem;
  line-height: 1.5;
}


/* SUGGESTED OPERATING FLOW */

body.bexhr-admin-visual-refresh .admin-guide-operating-flow {
  padding: 1rem 1.05rem;
  border: 1px solid #dce6ee;
  border-radius: 18px;
  background: #fbfcfe;
}

body.bexhr-admin-visual-refresh .admin-guide-operating-flow-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

body.bexhr-admin-visual-refresh .admin-guide-flow-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f5f4;
  color: #0f8f89;
}

body.bexhr-admin-visual-refresh .admin-guide-operating-flow-heading h6 {
  margin: 0.15rem 0 0;
  color: #10233f;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-operating-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

body.bexhr-admin-visual-refresh .admin-guide-operating-steps li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

body.bexhr-admin-visual-refresh .admin-guide-step-number {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f8f89;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-operating-steps strong {
  display: block;
  margin-bottom: 0.16rem;
  color: #10233f;
  font-size: 0.8rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-operating-steps small {
  display: block;
  color: #718096;
  font-size: 0.72rem;
  line-height: 1.45;
}


/* YELLOW GUIDANCE BANNER */

body.bexhr-admin-visual-refresh .admin-guide-help-note {
  padding: 0.9rem 1rem;
  border: 1px solid #f5c76a;
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: #fffaf0;
}

body.bexhr-admin-visual-refresh .admin-guide-help-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff0c2;
  color: #b76a00;
}

body.bexhr-admin-visual-refresh .admin-guide-help-note strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #7c4700;
  font-size: 0.82rem;
  font-weight: 800;
}

body.bexhr-admin-visual-refresh .admin-guide-help-note p {
  margin: 0;
  color: #a65d16;
  font-size: 0.76rem;
  line-height: 1.45;
}


/* FOOTER */

body.bexhr-admin-visual-refresh .admin-operating-guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.6rem;
  border-top: 1px solid #e4ebf0;
  background: #ffffff;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #667892;
  font-size: 0.76rem;
}

body.bexhr-admin-visual-refresh .admin-operating-guide-footer > span i {
  color: #0f8f89;
}


@media (max-width: 991.98px) {
  body.bexhr-admin-visual-refresh .admin-guide-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bexhr-admin-visual-refresh .admin-guide-operating-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 575.98px) {
  body.bexhr-admin-visual-refresh .admin-operating-guide-header,
  body.bexhr-admin-visual-refresh .admin-operating-guide-body,
  body.bexhr-admin-visual-refresh .admin-operating-guide-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.bexhr-admin-visual-refresh .admin-guide-recommended {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body.bexhr-admin-visual-refresh
    .admin-guide-recommended
    .admin-guide-open-link {
    grid-column: 2;
  }

  body.bexhr-admin-visual-refresh .admin-guide-workspace-grid,
  body.bexhr-admin-visual-refresh .admin-guide-operating-steps {
    grid-template-columns: 1fr;
  }

  body.bexhr-admin-visual-refresh .admin-operating-guide-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* END ADMIN HELP GUIDE ROLE PARITY - v1.1.1 */

/* END ADMIN HELP GUIDE ROLE PARITY - v1.1.1 */

/* =========================================================
   ADMIN MODAL CLOSE ALIGNMENT - v1.0.1

   Purpose:
   - Keep Admin modal close controls pinned to the true top-right.
   - Prevent long title/subtitle content from pushing the X inward.
   - Presentation only; no modal JS or destructive behaviour changes.
   ========================================================= */

body.bexhr-admin-visual-refresh
  #removeCompanyAccessModal
  .modal-header,
body.bexhr-admin-visual-refresh
  #permanentDeleteUserModal
  .modal-header {
  position: relative;
  align-items: flex-start;
  padding-right: 4rem !important;
}

body.bexhr-admin-visual-refresh
  #removeCompanyAccessModal
  .admin-modal-close,
body.bexhr-admin-visual-refresh
  #permanentDeleteUserModal
  .admin-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  margin: 0 !important;
  flex: 0 0 auto;
  z-index: 2;
}

/* =========================================================
   ADMIN MODAL CLOSE ALIGNMENT - v1.0.0

   Keeps destructive/admin modal close controls consistently
   anchored to the top-right of the modal header.
   ========================================================= */

.admin-modal-close {
  flex: 0 0 auto;
  margin: 0 0 0 auto !important;
  align-self: flex-start;
}

#removeCompanyAccessModal .modal-header,
#permanentDeleteUserModal .modal-header {
  align-items: flex-start;
}