/**
 * EasyPayroll WebScheduler — Premium Design System Overlay
 * Visual-only overrides. Does not change layout, UX, or behavior.
 * Load after theme/plugin CSS; keep seasonal.css after this file.
 */

:root {
  /* Neutrals / surfaces */
  --ep-page-bg: #ffffff;
  --ep-surface: #ffffff;
  --ep-surface-muted: #f5f8fb;
  --ep-surface-elevated: #ffffff;
  --ep-sidebar-bg: #ffffff;
  --ep-topbar-bg: #1f6fd1;
  --ep-topbar-bg-strong: #1859ad;
  --ep-temp-login: #22b573;
  --ep-temp-login-strong: #1c9c64;
  --ep-header-accent-blue: #1f6fd1;
  --ep-header-accent-green: #22b573;
  --ep-border: #d7e0ea;
  --ep-border-subtle: #e8eef4;
  --ep-divider: rgba(15, 36, 56, 0.08);

  /* Text */
  --ep-text: #1e2a3a;
  --ep-text-secondary: #5a6b7d;
  --ep-text-muted: #8494a7;
  --ep-text-on-accent: #ffffff;

  /* Brand / semantic — clean professional blue */
  --ep-primary: #1f6fd1;
  --ep-primary-hover: #1859ad;
  --ep-primary-soft: rgba(31, 111, 209, 0.12);
  --ep-primary-softer: rgba(31, 111, 209, 0.06);
  --ep-info: #1f6fd1;
  --ep-success: #22b573;
  --ep-success-soft: rgba(34, 181, 115, 0.12);
  --ep-warning: #f0a84a;
  --ep-warning-soft: #fff6e8;
  --ep-danger: #e85a5a;
  --ep-danger-soft: rgba(232, 90, 90, 0.12);
  --ep-tools: #f07800;
  --ep-tools-hover: #d96a00;

  /* Shape / elevation */
  --ep-radius-sm: 8px;
  --ep-radius: 12px;
  --ep-radius-lg: 16px;
  --ep-radius-input: 12px;
  --ep-input-border: #e2e8f0;
  --ep-input-shadow: 0 1px 2px rgba(15, 36, 56, 0.04);
  --ep-shadow-xs: 0 1px 2px rgba(15, 36, 56, 0.04);
  --ep-shadow-sm: 0 2px 8px rgba(15, 36, 56, 0.06);
  --ep-shadow-md: 0 6px 20px rgba(15, 36, 56, 0.08);
  --ep-shadow-lg: 0 12px 32px rgba(15, 36, 56, 0.12);
  --ep-focus-ring: 0 0 0 3px rgba(31, 111, 209, 0.28);

  /* Typography — single app font */
  --ep-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ep-font-size: 0.875rem;
  --ep-font-size-input: 0.9rem;
  --ep-letter-nav: 0.01em;

  /* Map Bootstrap 4 semantic vars where theme reads them */
  --primary: var(--ep-primary);
  --info: var(--ep-info);
  --success: var(--ep-success);
  --warning: var(--ep-warning);
  --danger: var(--ep-danger);
  --cyan: var(--ep-primary);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ep-font) !important;
  font-size: var(--ep-font-size);
  color: var(--ep-text) !important;
  background-color: var(--ep-page-bg) !important;
  letter-spacing: 0.005em;
}

body,
button,
input,
select,
textarea,
.form-control,
.navbar,
.left-sidebar,
.topbar,
.dropdown-menu,
.table,
.card,
.modal,
.swal2-popup {
  font-family: var(--ep-font) !important;
}

/* Text buttons use the UI font. A .btn that IS the icon (Adjustments edit/trash
   are <span class="fas fa-edit btn">) must keep Font Awesome — Rubik has no
   glyphs for those code points, so they painted as empty rounded boxes. */
.btn:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]) {
  font-family: var(--ep-font) !important;
}

.btn.fa,
.btn.fas,
.btn.far,
.btn.fal,
.btn.fa-solid,
.btn.fa-regular,
.btn[class*="fa-"]:not(.fab):not(.fa-brands) {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
  font-weight: 900;
}

.btn.fab,
.btn.fa-brands {
  font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ep-text);
  font-weight: 500;
  letter-spacing: -0.01em;
}

a {
  color: var(--ep-primary);
}

a:hover {
  color: var(--ep-primary-hover);
}

.text-muted {
  color: var(--ep-text-muted) !important;
}

hr {
  border-top-color: var(--ep-border-subtle);
}

/* -------------------------------------------------------------------------- */
/* Shell — SaaS header + full-height left menu with logo                       */
/* Conditional header: blue (default) / green (temp).                          */
/* Logo lives in the sidebar; topbar starts beside the menu.                   */
/* -------------------------------------------------------------------------- */

.topbar {
  background: linear-gradient(180deg, #3b82e6 0%, var(--ep-primary, #1f6fd1) 100%) !important;
  box-shadow: 0 3px 12px rgba(31, 111, 209, 0.18) !important;
  border-bottom: 0 !important;
  height: 60px;
  /* Above page content; below Bootstrap modals (1050) */
  z-index: 50;
}

/* Template login — emerald green mode */
#main-wrapper[data-logintype="temp"] .topbar {
  background: linear-gradient(180deg, #34c984 0%, var(--ep-temp-login, #22b573) 100%) !important;
  box-shadow: 0 3px 12px rgba(34, 181, 115, 0.18) !important;
}

#main-wrapper[data-logintype="temp"] .topbar .navbar-collapse,
#main-wrapper[data-logintype="temp"] .topbar .navbar-collapse[data-navbarbg="skin1"] {
  background: transparent !important;
}

.topbar .top-navbar {
  background: transparent !important;
  min-height: 60px;
  height: 60px;
  padding: 0 !important;
  width: 100%;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
}

.topbar .navbar-collapse {
  background: transparent !important;
  align-items: center;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: visible;
}

#main-wrapper[data-layout='vertical'] .topbar .navbar-collapse[data-navbarbg='skin1'],
#main-wrapper[data-layout='horizontal'] .topbar .navbar-collapse[data-navbarbg='skin1'],
.topbar .navbar-collapse[data-navbarbg='skin1'],
.navbar-collapse[data-navbarbg='skin1'] {
  background: transparent !important;
}

/*
 * Topbar width vs left menu
 * - Desktop (>1030): inset topbar + push page while menu is open (logo visible beside header).
 * - Tablet (≤1030): theme INVERTS hide-sidebar (class = menu open).
 *   Topbar stays full-width; sidebar overlays. No width jump on toggle.
 */
@media (min-width: 768px) {
  .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'] .topbar {
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
    z-index: 50 !important;
  }

  .topbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='full'] .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='overlay'] .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='mini-sidebar'] .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='overlay'].hide-sidebar .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay'] .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay'].hide-sidebar .topbar .top-navbar .navbar-collapse {
    margin-left: 0 !important;
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    height: 60px;
  }

  .topbar .top-navbar .navbar-header,
  #main-wrapper[data-layout='vertical'] .topbar .top-navbar .navbar-header[data-logobg='skin1'],
  #main-wrapper[data-layout='horizontal'] .topbar .top-navbar .navbar-header[data-logobg='skin1'],
  #main-wrapper[data-sidebartype='mini-sidebar'] .topbar .top-navbar .navbar-header,
  #main-wrapper[data-sidebartype='mini-sidebar'] .topbar .top-navbar .navbar-header.expand-logo,
  #main-wrapper[data-sidebartype='overlay'] .topbar .top-navbar .navbar-header,
  #main-wrapper[data-sidebartype='overlay'].hide-sidebar .topbar .top-navbar .navbar-header,
  .topbar .navbar-header {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .topbar .ep-topbar-mini-logo,
  #main-wrapper[data-sidebartype='mini-sidebar'] .topbar .ep-topbar-mini-logo,
  #main-wrapper[data-sidebartype='overlay'] .topbar .ep-topbar-mini-logo {
    display: none !important;
  }

  #main-wrapper[data-sidebartype='mini-sidebar'] .left-sidebar,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='mini-sidebar'] .left-sidebar {
    top: 60px !important;
    height: calc(100% - 60px) !important;
    min-height: calc(100vh - 60px) !important;
  }
}

/* Tablet / ≤1030: theme INVERTS hide-sidebar (class = menu OPEN) */
@media (min-width: 768px) and (max-width: 1030px) {
  .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'] .topbar,
  #main-wrapper[data-sidebartype='overlay']:not(.hide-sidebar) .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='overlay']:not(.hide-sidebar) .topbar {
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
    z-index: 50 !important;
  }

  /* Menu open on tablet = .hide-sidebar → shrink topbar */
  #main-wrapper[data-sidebartype='overlay'].hide-sidebar .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='overlay'].hide-sidebar .topbar,
  #main-wrapper[data-sidebartype='full'] .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='full'] .topbar {
    left: 250px !important;
    width: calc(100% - 250px) !important;
    z-index: 50 !important;
  }

  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay'] .page-wrapper,
  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay']:not(.hide-sidebar) .page-wrapper {
    margin-left: 0 !important;
  }

  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay'].hide-sidebar .page-wrapper,
  #main-wrapper[data-layout='vertical'][data-sidebartype='full'] .page-wrapper {
    margin-left: 250px !important;
  }

  #main-wrapper[data-sidebartype='overlay'].hide-sidebar .left-sidebar {
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 55 !important;
  }

  #main-wrapper[data-sidebartype='overlay']:not(.hide-sidebar) .left-sidebar {
    left: -250px !important;
  }
}

/* Desktop: push layout when menu open — logo sits beside header, content not covered */
@media (min-width: 1031px) {
  /* The bar itself never moves or resizes. The menu is opaque, starts at top:0 and sits
     above it (z-index 55 vs 50), so it covers the left 250px on its own, and the bar's
     gradient is vertical so a wider box paints identically. Insetting it instead meant
     animating left + width, which relaid out the whole header on every frame of the
     slide — only the content offset below actually needs to change. */
  #main-wrapper[data-sidebartype='full'] .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='full'] .topbar,
  #main-wrapper[data-sidebartype='overlay']:not(.hide-sidebar) .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='overlay']:not(.hide-sidebar) .topbar,
  #main-wrapper[data-sidebartype='mini-sidebar'] .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='mini-sidebar'] .topbar,
  #main-wrapper[data-sidebartype='overlay'].hide-sidebar .topbar,
  #main-wrapper[data-layout='vertical'][data-header-position='fixed'][data-sidebartype='overlay'].hide-sidebar .topbar {
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
    z-index: 50 !important;
  }

  /* Hold the header controls clear of the open menu. Deliberately not transitioned:
     it snaps while the menu slides over the gap, which is how the pre-redesign shell
     behaved. Transitioning it would put the relayout back, one frame at a time. */
  #main-wrapper[data-sidebartype='full'] .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='full'] .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-sidebartype='overlay']:not(.hide-sidebar) .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'][data-sidebartype='overlay']:not(.hide-sidebar) .topbar .top-navbar .navbar-collapse,
  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay']:not(.hide-sidebar) .topbar .top-navbar .navbar-collapse {
    padding-left: 250px !important;
  }

  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay']:not(.hide-sidebar) .page-wrapper,
  #main-wrapper[data-layout='vertical'][data-sidebartype='full'] .page-wrapper {
    margin-left: 250px !important;
  }

  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay'].hide-sidebar .page-wrapper {
    margin-left: 0 !important;
  }

  #main-wrapper[data-sidebartype='overlay']:not(.hide-sidebar) .left-sidebar,
  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay']:not(.hide-sidebar) .left-sidebar {
    left: 0 !important;
  }

  #main-wrapper[data-sidebartype='overlay'].hide-sidebar .left-sidebar,
  #main-wrapper[data-layout='vertical'][data-sidebartype='overlay'].hide-sidebar .left-sidebar {
    left: -250px !important;
  }
}
/* Mobile: slim header strip (bars + ⋯) + white expanded user menu */
@media (max-width: 767.98px) {
  .topbar .navbar-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 60px;
    padding: 0 10px !important;
  }

  /* Hamburger + ⋯ — same translucent chip, no solid white on the button */
  .topbar .navbar-header .nav-toggler,
  .topbar .navbar-header .topbartoggler,
  #main-wrapper .topbar .top-navbar .navbar-header .nav-toggler,
  #main-wrapper .topbar .top-navbar .navbar-header .topbartoggler {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    line-height: 1 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .topbar .navbar-header .nav-toggler i,
  .topbar .navbar-header .topbartoggler i,
  .topbar .navbar-header .nav-toggler .fas,
  .topbar .navbar-header .topbartoggler .fas {
    background: transparent !important;
    color: #fff !important;
    line-height: 1 !important;
  }

  /*
   * Expanded ⋯ menu strip (red box in screenshot) — white panel,
   * not the button.
   */
  .topbar .navbar-collapse,
  .topbar #navbarSupportedContent,
  #main-wrapper .topbar .navbar-collapse,
  #main-wrapper .topbar #navbarSupportedContent,
  #main-wrapper .topbar .navbar-collapse[data-navbarbg='skin1'],
  #main-wrapper[data-logintype="temp"] .topbar .navbar-collapse,
  #main-wrapper[data-logintype="temp"] .topbar #navbarSupportedContent {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top: 1px solid rgba(15, 36, 56, 0.08) !important;
    box-shadow: 0 6px 16px rgba(15, 36, 56, 0.1) !important;
    padding: 0.35rem 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .topbar .navbar-collapse .navbar-nav,
  .topbar #navbarSupportedContent .navbar-nav {
    height: auto !important;
    min-height: 48px;
    width: 100%;
  }

  .topbar .navbar-collapse .navbar-nav.float-left,
  .topbar #navbarSupportedContent .navbar-nav.float-left {
    display: none !important; /* company name row not needed on mobile strip */
  }

  .topbar .navbar-collapse .navbar-nav.float-right,
  .topbar #navbarSupportedContent .navbar-nav.float-right {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0;
  }

  .topbar .navbar-collapse .navbar-nav .nav-link,
  .topbar .navbar-collapse .navbar-nav .nav-item > a,
  .topbar .navbar-collapse .navbar-nav .text-white,
  .topbar #navbarSupportedContent .navbar-nav .nav-link,
  .topbar #navbarSupportedContent .navbar-nav .nav-item > a,
  .topbar #navbarSupportedContent .text-white {
    color: var(--ep-text, #1e2a3a) !important;
  }

  .topbar .navbar-collapse .navbar-nav .nav-link,
  .topbar #navbarSupportedContent .navbar-nav .nav-link {
    height: 44px !important;
    padding: 0 0.55rem !important;
  }

  .topbar .navbar-collapse .navbar-nav > .nav-item:hover,
  .topbar #navbarSupportedContent .navbar-nav > .nav-item:hover {
    background: rgba(31, 111, 209, 0.06) !important;
    border-radius: 10px;
  }

  .topbar .navbar-collapse #UserNamee,
  .topbar #navbarSupportedContent #UserNamee {
    color: var(--ep-text, #1e2a3a) !important;
    text-shadow: none !important;
    max-width: 42vw;
  }

  .topbar .navbar-collapse img.rounded-circle,
  .topbar #navbarSupportedContent img.rounded-circle {
    border-color: rgba(15, 36, 56, 0.12) !important;
    box-shadow: 0 1px 4px rgba(15, 36, 56, 0.1) !important;
  }

  .topbar .navbar-collapse .service-panel-toggle i,
  .topbar .navbar-collapse .servicePanel i,
  .topbar #navbarSupportedContent .service-panel-toggle i,
  .topbar #navbarSupportedContent .fas.fa-sliders {
    color: var(--ep-primary, #1f6fd1) !important;
  }

  .topbar .navbar-collapse #AlertsIconID > a,
  .topbar #navbarSupportedContent #AlertsIconID > a {
    background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
    color: var(--ep-primary, #1f6fd1) !important;
  }

  .topbar .navbar-collapse #AlertsIconID #btnAlertIconss,
  .topbar #navbarSupportedContent #AlertsIconID #btnAlertIconss,
  .topbar .navbar-collapse #AlertsIconID i,
  .topbar #navbarSupportedContent #AlertsIconID i {
    color: var(--ep-primary, #1f6fd1) !important;
  }

  .topbar .navbar-collapse #AlertsIconID #spnNotificationtxt.badge,
  .topbar #navbarSupportedContent #AlertsIconID #spnNotificationtxt.badge {
    border-color: #fff !important;
  }
}

.topbar .sidebartoggler {
  color: #fff !important;
}

/* Nav clusters — vertically centered, pill hovers */
.topbar .navbar-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  height: 60px;
  margin: 0 !important;
  min-width: 0;
}

.topbar .navbar-nav.float-left,
.topbar .navbar-nav.mr-auto {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.topbar .navbar-nav.float-right {
  flex: 0 1 auto;
  max-width: 100%;
  margin-left: auto !important;
  overflow: hidden;
}

.topbar .navbar-nav .nav-item {
  display: flex;
  align-items: center !important;
  height: 60px;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  transition: background-color 0.15s ease;
}

.topbar .navbar-nav .nav-item.d-none {
  display: none !important;
}

@media (min-width: 768px) {
  .topbar .navbar-nav .nav-item.d-md-flex {
    display: flex !important;
  }
}

.topbar .navbar-nav .nav-item.pt-3,
.topbar .navbar-nav .nav-item.pt-2,
.topbar .navbar-nav .nav-item.mr-3 {
  padding-top: 0 !important;
}

.topbar .navbar-nav > .nav-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.topbar .navbar-nav .nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  height: 60px !important;
  line-height: 1 !important;
  padding: 0 0.9rem !important;
  letter-spacing: 0.01em;
  color: #fff !important;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.topbar .navbar-nav .nav-link:hover {
  background-color: transparent;
  border-radius: 0;
}

/* Company title — vertically centered with the rest of the topbar */
.topbar #spnCompanyName {
  margin: 0 0 0 0.5rem !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  line-height: 1.25 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(40vw, 28rem);
  display: block;
}

.topbar .nav-item:has(> #spnCompanyName) {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  overflow: hidden;
}

.topbar #spandrpCompanies {
  margin: 0 0 0 0.15rem !important;
  padding: 0.35rem 0.45rem !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  transition: background-color 0.15s ease;
  flex: 0 0 auto;
}

.topbar #spandrpCompanies:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

.topbar #spandrpCompanies i {
  color: #fff !important;
}

/* Alerts chip */
.topbar #AlertsIconID > a {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  height: 34px !important;
  padding: 0 0.85rem !important;
  margin: 0 0.35rem;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: none;
}

.topbar #AlertsIconID > a:hover,
.topbar #AlertsIconID > a:focus,
.topbar #AlertsIconID > a:active {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  color: #fff !important;
}

.topbar .navbar-nav > #AlertsIconID.nav-item:hover {
  background: transparent !important;
}

.topbar #AlertsIconID #spnNotificationtxt.badge,
.topbar #AlertsIconID > a > #spnNotificationtxt {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 20px;
  width: auto;
  height: 20px;
  padding: 0 5px !important;
  margin: 0 0 0 0.1rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  background: #e53935 !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 1px 4px rgba(180, 40, 40, 0.3);
  vertical-align: middle;
}

/* Profile / user menu */
.topbar .navbar-nav.float-right .nav-item > a.dropdown-toggle,
.topbar .navbar-nav.float-right .nav-item > .nav-link {
  border-radius: 999px;
  max-width: 100%;
  min-width: 0;
}

.topbar .navbar-nav.float-right .nav-item.dropdown > .nav-link {
  overflow: hidden;
}

.topbar #UserNamee {
  display: inline-block;
  max-width: 14rem;
  margin-left: 0.5rem !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1.2 !important;
}

.topbar .navbar-nav.float-right .nav-item img.rounded-circle,
.topbar .user-pic img,
.topbar img.rounded-circle {
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}

/* md: tighter topbar — hide long labels, keep one-line name chips */
@media (min-width: 768px) and (max-width: 991.98px) {
  .topbar #spnCompanyName {
    font-size: 0.95rem !important;
    max-width: min(42vw, 16rem);
  }

  .topbar #UserNamee {
    max-width: 9rem;
  }

  .topbar #AlertsIconID .ep-alerts-label {
    display: none !important;
  }

  .topbar #AlertsIconID > a {
    padding: 0 0.55rem !important;
    gap: 0.3rem;
  }

  .topbar .navbar-nav .nav-link {
    padding: 0 0.55rem !important;
  }
}

/* lg: room for short labels, still no wrapping */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .topbar #spnCompanyName {
    max-width: min(36vw, 22rem);
  }

  .topbar #UserNamee {
    max-width: 12rem;
  }
}

.topbar .btn.btn-default.text-white {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: none !important;
  height: 34px;
  padding: 0 0.9rem !important;
  display: inline-flex;
  align-items: center;
}

.topbar .btn.btn-default.text-white:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

.topbar .dropdown-menu {
  margin-top: 0.45rem;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(15, 36, 56, 0.16) !important;
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Alerts + user menu — overflow so the cards paint; do not raise topbar       */
/* z-index unnecessarily (Bootstrap modals stay above the bar).                */
/* -------------------------------------------------------------------------- */

.topbar:has(#AlertsIconID.show),
.topbar:has(#AlertsIconID .ep-alerts-menu.show),
.topbar:has(.user-dd.show),
.topbar:has(.nav-item.dropdown.show > .user-dd),
#main-wrapper .topbar:has(#AlertsIconID.show),
#main-wrapper .topbar:has(.user-dd.show) {
  overflow: visible !important;
}

.topbar:has(#AlertsIconID.show) .top-navbar,
.topbar:has(#AlertsIconID.show) .navbar-collapse,
.topbar:has(#AlertsIconID.show) .navbar-nav,
.topbar:has(#AlertsIconID.show) .navbar-nav.float-right,
.topbar:has(.user-dd.show) .top-navbar,
.topbar:has(.user-dd.show) .navbar-collapse,
.topbar:has(.user-dd.show) .navbar-nav,
.topbar:has(.user-dd.show) .navbar-nav.float-right {
  overflow: visible !important;
  z-index: auto;
}

.topbar .ep-alerts-menu.mailbox,
.topbar #AlertsIconID .dropdown-menu.ep-alerts-menu,
.topbar #AlertsIconID.show > .dropdown-menu.ep-alerts-menu,
#main-wrapper .topbar #AlertsIconID .ep-alerts-menu {
  min-width: 300px !important;
  max-width: 340px;
  padding: 0.35rem 0.4rem 0.45rem !important;
  margin-top: 0.55rem !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(15, 36, 56, 0.16) !important;
  z-index: 20010 !important;
  position: absolute !important;
}

.topbar #AlertsIconID.dropdown,
.topbar #AlertsIconID.nav-item.dropdown,
.topbar #AlertsIconID.show,
#main-wrapper .topbar #AlertsIconID.show {
  z-index: 20005 !important;
  position: relative !important;
}

/* User profile menu — same stacking as alerts */
.topbar .dropdown-menu.user-dd,
.topbar .nav-item.dropdown.show > .dropdown-menu.user-dd,
#main-wrapper .topbar .dropdown-menu.user-dd {
  z-index: 20010 !important;
  position: absolute !important;
  min-width: 280px !important;
  max-width: 320px;
  padding: 0.55rem 0.55rem 0.65rem !important;
  margin-top: 0.55rem !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(15, 36, 56, 0.16) !important;
}

.topbar .nav-item.dropdown:has(> .user-dd),
.topbar .nav-item.dropdown:has(> .user-dd).show,
#main-wrapper .topbar .nav-item.dropdown:has(> .user-dd).show {
  z-index: 20005 !important;
  position: relative !important;
}

/* ---- User menu content ---- */
.topbar .user-dd .ep-user-dd-head {
  gap: 0.75rem;
  padding: 0.55rem 0.55rem 0.75rem !important;
  margin: 0 0 0.35rem !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
}

.topbar .user-dd .ep-user-dd-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(145deg, var(--ep-primary-soft, rgba(31, 111, 209, 0.18)), rgba(34, 181, 115, 0.18));
  box-shadow: 0 0 0 1px rgba(15, 36, 56, 0.06);
}

.topbar .user-dd .ep-user-dd-avatar img,
.topbar .user-dd #ImgChangeUser {
  display: block;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #fff;
  background: var(--ep-surface-muted, #f5f8fb);
}

.topbar .user-dd .ep-user-dd-meta h4 {
  margin: 0;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  color: var(--ep-text, #1e2a3a) !important;
  line-height: 1.25;
}

.topbar .user-dd .ep-user-dd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.15rem 0 0.35rem;
}

.topbar .user-dd .ep-user-dd-actions .dropdown-item,
.topbar .user-dd .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  margin: 0 !important;
  padding: 0.5rem 0.65rem !important;
  border-radius: 10px !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background: transparent !important;
}

.topbar .user-dd .ep-user-dd-actions .dropdown-item i,
.topbar .user-dd .dropdown-item i {
  width: 1.1rem;
  text-align: center;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-size: 0.9rem;
  opacity: 0.95;
}

.topbar .user-dd .ep-user-dd-actions .dropdown-item:hover,
.topbar .user-dd .ep-user-dd-actions .dropdown-item:focus,
.topbar .user-dd .dropdown-item:hover,
.topbar .user-dd .dropdown-item:focus {
  background: var(--ep-primary-softer, rgba(31, 111, 209, 0.06)) !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
}

.topbar .user-dd .ep-user-dd-actions .dropdown-item:active,
.topbar .user-dd .dropdown-item:active,
.topbar .user-dd .ep-user-dd-actions .dropdown-item.active {
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
}

.topbar .user-dd .ep-user-dd-actions .dropdown-item:hover i,
.topbar .user-dd .ep-user-dd-actions .dropdown-item:focus i,
.topbar .user-dd .ep-user-dd-actions .dropdown-item:active i {
  color: var(--ep-text-secondary, #5a6b7d) !important;
}

.topbar .user-dd .ep-user-dd-lang {
  margin-top: 0.25rem;
  padding: 0.55rem 0.45rem 0.35rem;
  border-top: 1px solid var(--ep-border-subtle, #e8eef4);
  border-radius: 0 0 10px 10px;
  background: var(--ep-surface-muted, #f5f8fb);
}

.topbar .user-dd .ep-user-dd-lang__title {
  margin: 0 0 0.45rem 0.2rem !important;
  padding: 0 !important;
  font-size: 0.7rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ep-text-muted, #8494a7) !important;
}

.topbar .user-dd .ep-user-dd-lang__list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.topbar .user-dd .ep-user-dd-lang__item {
  margin: 0;
  padding: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.topbar .user-dd .ep-user-dd-lang__item:hover {
  border-color: rgba(31, 111, 209, 0.18);
  box-shadow: var(--ep-shadow-xs, 0 1px 2px rgba(15, 36, 56, 0.04));
}

.topbar .user-dd .ep-user-dd-lang__item.is-active {
  border-color: rgba(31, 111, 209, 0.28);
  background: var(--ep-primary-softer, rgba(31, 111, 209, 0.06));
  box-shadow: none;
}

.topbar .user-dd .ep-user-dd-lang__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
}

.topbar .user-dd .ep-user-dd-lang__flag {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 36, 56, 0.08);
}

.topbar .user-dd .ep-user-dd-lang__flag .flag-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  background-size: cover !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.topbar .user-dd .ep-user-dd-lang__check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ep-success, #22b573);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  font-size: 7px;
  line-height: 1;
  z-index: 1;
}

.topbar .user-dd .ep-user-dd-lang__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.topbar .user-dd .ep-user-dd-lang__name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ep-text-secondary, #5a6b7d);
  line-height: 1.2;
}

.topbar .user-dd .ep-user-dd-lang__item.is-active .ep-user-dd-lang__name {
  color: var(--ep-primary, #1f6fd1);
}

.topbar .user-dd .ep-user-dd-lang__hint {
  display: block;
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.25;
  color: var(--ep-text-muted, #8494a7) !important;
}

.topbar .nav-link #smallAdminimage {
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(15, 36, 56, 0.08);
  object-fit: cover;
}

.topbar .ep-alerts-menu .with-arrow {
  display: none !important;
}

.topbar .ep-alerts-menu > .list-style-none {
  margin: 0 !important;
  padding: 0 !important;
}

.topbar .ep-alerts-menu .ep-alerts-header {
  list-style: none;
  margin: 0 0 0.25rem !important;
  padding: 0 !important;
}

.topbar .ep-alerts-menu .ep-alerts-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(15, 36, 56, 0.07);
}

.topbar .ep-alerts-menu .ep-alerts-title {
  margin: 0;
  color: var(--ep-text, #1e2a3a) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.topbar .ep-alerts-menu .ep-alerts-title #fullAlertCountspn {
  color: var(--ep-primary, #1f6fd1);
}

.topbar .ep-alerts-menu .ep-alerts-refresh {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.topbar .ep-alerts-menu .ep-alerts-refresh:hover {
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

.topbar .ep-alerts-menu .ep-alerts-refresh i {
  font-size: 0.85rem !important;
}

.topbar .ep-alerts-menu .message-center {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.topbar .ep-alerts-menu .message-item {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0.15rem 0 !important;
  padding: 0.65rem 0.6rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

.topbar .ep-alerts-menu .message-item.d-none,
.topbar .ep-alerts-menu li:has(> .message-center > .message-item.d-none),
.topbar .ep-alerts-menu li:has(.message-item.d-none) {
  display: none !important;
}

.topbar .ep-alerts-menu .message-item:hover {
  background: #f5f8fb !important;
}

.topbar .ep-alerts-menu .ep-alerts-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  box-shadow: none;
}

.topbar .ep-alerts-menu .ep-alerts-icon.is-success {
  background: linear-gradient(160deg, #34c984 0%, #22b573 100%);
}

.topbar .ep-alerts-menu .ep-alerts-icon.is-info,
.topbar .ep-alerts-menu .ep-alerts-icon.is-primary {
  background: linear-gradient(160deg, #3b82e6 0%, var(--ep-primary, #1f6fd1) 100%);
}

.topbar .ep-alerts-menu .mail-contnet {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.topbar .ep-alerts-menu .message-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ep-text, #1e2a3a) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.topbar .ep-alerts-menu .badgeClass.badge-danger,
.topbar .ep-alerts-menu .message-title .badge-danger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin: 0 0 0 auto !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 0 !important;
}

/* Subtle mode cue on the right edge of header */
.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

#main-wrapper[data-logintype="temp"] .topbar::after {
  background: rgba(255, 255, 255, 0.45);
}

/* Left menu — full height from top; logo lives here (beside header when menu open) */
.left-sidebar,
#main-wrapper[data-layout='vertical'][data-sidebar-position='fixed'] .left-sidebar,
#main-wrapper[data-sidebar-position='fixed'] .left-sidebar {
  top: 0 !important;
  padding-top: 0 !important;
  height: 100% !important;
  min-height: 100vh !important;
  z-index: 55 !important;
  background: linear-gradient(180deg, #fbfcfd 0%, #f3f7fa 100%) !important;
  /* Kept narrow on purpose: this element slides, so its shadow is re-blurred on every
     frame and a wide radius makes that strip the most expensive thing in the animation. */
  box-shadow: 2px 0 10px rgba(15, 36, 56, 0.08) !important;
  border-right: 1px solid rgba(15, 36, 56, 0.06) !important;
  transition: left 0.18s ease !important;
}

/* Match menu slide with the page push on desktop. The topbar is intentionally absent —
   see the desktop push block above; it no longer moves. */
@media (min-width: 1031px) {
  #main-wrapper[data-layout='vertical'] .page-wrapper {
    transition: margin-left 0.18s ease !important;
  }
}

.left-sidebar .ep-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(15, 36, 56, 0.06);
  background: #ffffff;
  flex-shrink: 0;
}

.left-sidebar .ep-sidebar-brand .navbar-brand {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.left-sidebar .ep-sidebar-brand img#logoBig,
.left-sidebar .ep-sidebar-brand .dark-logo {
  display: block !important;
  max-height: 34px;
  width: auto !important;
  max-width: 180px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mini sidebar (desktop): hide logo strip (no small logo) */
@media (min-width: 768px) {
  #main-wrapper[data-sidebartype='mini-sidebar'] .left-sidebar .ep-sidebar-brand {
    display: none !important;
  }

  #main-wrapper[data-sidebartype='mini-sidebar'] .left-sidebar .scroll-sidebar {
    height: 100% !important;
  }
}

.left-sidebar .scroll-sidebar {
  height: calc(100% - 60px) !important;
}

/* Mobile: always show large logo in left menu + dim backdrop when open */
@media (max-width: 767.98px) {
  .left-sidebar .ep-sidebar-brand,
  #main-wrapper[data-sidebartype='mini-sidebar'] .left-sidebar .ep-sidebar-brand,
  #main-wrapper[data-sidebartype='overlay'] .left-sidebar .ep-sidebar-brand {
    display: flex !important;
  }

  .left-sidebar .ep-sidebar-brand img#logoBig,
  .left-sidebar .ep-sidebar-brand .dark-logo {
    display: block !important;
    max-height: 34px;
    max-width: 180px;
  }

  #main-wrapper[data-sidebartype='mini-sidebar'] .left-sidebar .scroll-sidebar,
  .left-sidebar .scroll-sidebar {
    height: calc(100% - 60px) !important;
  }

  /* Backdrop while mobile left menu is open (theme uses .hide-sidebar to show mini menu) */
  #main-wrapper.hide-sidebar::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 36, 56, 0.4);
    z-index: 54;
    pointer-events: auto;
  }

  #main-wrapper[data-sidebartype='overlay']:not(.hide-sidebar)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 36, 56, 0.4);
    z-index: 54;
    pointer-events: auto;
  }
}

.left-sidebar .scroll-sidebar,
.left-sidebar .sidebar-nav,
.left-sidebar .sidebar-nav ul {
  background: transparent !important;
}

/* Theme default is solid gainsboro on every item — that made the menu look broken */
.sidebar-nav ul .sidebar-item,
.left-sidebar .sidebar-nav ul .sidebar-item,
#sidebarnav > .sidebar-item {
  width: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-nav .has-arrow::after {
  top: 23px !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link,
#sidebarnav .sidebar-link {
  color: var(--ep-text-secondary) !important;
  border-radius: 10px !important;
  margin: 2px 6px;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: var(--ep-letter-nav);
  background: transparent !important;
  opacity: 1 !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link i,
#sidebarnav .sidebar-link i {
  color: inherit !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover,
#sidebarnav .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--ep-primary) !important;
  box-shadow: 0 2px 10px rgba(15, 36, 56, 0.05);
}

/* Tools submenu labels must never get the white/primary hover pill */
#sidebarnav .ToolsMenuITem .sidebar-link:hover,
#sidebarnav .ToolsMenuITem:hover .sidebar-link,
.sidebar-nav ul .ToolsMenuITem .sidebar-link:hover,
.sidebar-nav ul .ToolsMenuITem:hover .sidebar-link {
  background: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item .sidebar-link.active,
#sidebarnav .sidebar-item.selected > .sidebar-link,
#sidebarnav .sidebar-link.active {
  background: #ffffff !important;
  color: var(--ep-primary) !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(31, 111, 209, 0.1), inset 3px 0 0 var(--ep-primary);
}

/* -------------------------------------------------------------------------- */
/* Criteria left menu — modern panel                                          */
/* -------------------------------------------------------------------------- */

.left-sidebar .CriteriaITems {
  padding: 0.25rem 0.2rem !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.left-sidebar .CriteriaITems > h2 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ep-text-secondary) !important;
  margin: 0 0 0.2rem !important;
  padding: 0.2rem 0.15rem 0.35rem !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(15, 36, 56, 0.06);
}

.left-sidebar .CriteriaITems .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0.2rem !important;
}

.left-sidebar .CriteriaITems .row.mb-md-1 {
  margin-bottom: 0.2rem !important;
}

.left-sidebar .CriteriaITems .col-12.mb-2 {
  margin-bottom: 0.2rem !important;
}

.left-sidebar .CriteriaITems .col-12,
.left-sidebar .CriteriaITems [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.left-sidebar .CriteriaITems .col-12 > span:first-child,
.left-sidebar .CriteriaITems .col-12 > .d-flex > span:first-child,
.left-sidebar .CriteriaITems .row > .col-12:first-child:not(:has(.input-group)):not(:has(input)) {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ep-text-secondary);
  margin-bottom: 0.15rem;
  letter-spacing: 0.01em;
}

/* Job / Phase — login-style joined input group (white) */
.left-sidebar .CriteriaITems .input-group,
.left-sidebar .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100%;
  margin-bottom: 0.15rem !important;
  background: #ffffff !important;
  border: 1px solid var(--ep-input-border, rgba(15, 36, 56, 0.12)) !important;
  border-radius: 12px !important;
  box-shadow: var(--ep-input-shadow, 0 1px 2px rgba(15, 36, 56, 0.04)) !important;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.left-sidebar .CriteriaITems .input-group:focus-within,
.left-sidebar .input-group:focus-within {
  border-color: var(--ep-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.18) !important;
}

.left-sidebar .CriteriaITems .input-group > .form-control,
.left-sidebar .input-group > .form-control {
  flex: 1 1 auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: var(--ep-font-size-input, 0.9rem);
  color: var(--ep-text) !important;
}

.left-sidebar .CriteriaITems .input-group > .form-control:focus,
.left-sidebar .input-group > .form-control:focus {
  box-shadow: none !important;
  outline: 0;
  background: #ffffff !important;
}

.left-sidebar .CriteriaITems .input-group-addon,
.left-sidebar .input-group .input-group-addon,
.left-sidebar .CriteriaITems .input-group > .btn.input-group-addon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px !important;
  min-width: 38px;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--ep-text-muted, #8494a7) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.left-sidebar .CriteriaITems .input-group-addon:hover,
.left-sidebar .input-group .input-group-addon:hover {
  background: #ffffff !important;
  color: var(--ep-text-muted, #8494a7) !important;
}

.left-sidebar .CriteriaITems .input-group-addon i,
.left-sidebar .input-group .input-group-addon i {
  font-size: 0.95rem;
  color: inherit !important;
}

/* Job / Phase: code in the field; description on the line underneath (ellipsis) */
.left-sidebar .ep-left-job-group,
.left-sidebar .ep-left-phase-group {
  align-items: center !important;
}

.left-sidebar .ep-left-job-group > #LeftMenuJobinput,
.left-sidebar .ep-left-phase-group > #LeftMenuPhaseinput {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  font-family: var(--ep-font) !important;
  font-size: var(--ep-font-size-input) !important;
  font-weight: 500 !important;
  color: var(--ep-text) !important;
}

.left-sidebar .ep-left-code-desc {
  display: block;
  width: 100%;
  margin: 0.15rem 0 0;
  padding: 0 0.15rem;
  font-family: var(--ep-font) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.25;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left-sidebar .ep-left-code-desc.d-none {
  display: none !important;
}

.left-sidebar .ep-left-job-group > .input-group-addon,
.left-sidebar .ep-left-phase-group > .input-group-addon {
  margin-left: 0 !important;
}

/* Standalone date fields — white like login */
.left-sidebar .CriteriaITems .form-control:not(.input-group .form-control) {
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ep-input-border, rgba(15, 36, 56, 0.12)) !important;
  background: #ffffff !important;
  box-shadow: var(--ep-input-shadow, 0 1px 2px rgba(15, 36, 56, 0.04)) !important;
  font-size: 0.85rem;
  color: var(--ep-text) !important;
  margin-bottom: 0.25rem !important;
}

.left-sidebar .form-control {
  background: #ffffff !important;
  border-color: rgba(15, 36, 56, 0.1) !important;
}

/* Week navigation — compact */
.left-sidebar .CriteriaITems .d-flex:has(#btnThisWeek) {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.3rem;
  background: #f1f5f9;
  border: 1px solid rgba(15, 36, 56, 0.06);
  border-radius: 12px;
  align-items: stretch;
}

.left-sidebar .CriteriaITems .d-flex:has(#btnThisWeek) > .col-4 {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.35rem;
}

.left-sidebar .CriteriaITems .d-flex:has(#btnThisWeek) > .col-4:nth-child(2) {
  justify-content: stretch;
}

.left-sidebar #btnBakcWeeks,
.left-sidebar #btnBakcWeeks4,
.left-sidebar #btnForwardWeeks,
.left-sidebar #btnForwardWeeks4,
.left-sidebar #btnThisWeek {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1.15 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  background: #ffffff !important;
  color: var(--ep-text-secondary) !important;
  box-shadow: 0 1px 2px rgba(15, 36, 56, 0.04) !important;
  padding: 0.45rem 0.25rem !important;
  min-height: 34px;
  width: 100% !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.left-sidebar #btnThisWeek {
  height: 100% !important;
  min-height: 64px !important;
  font-size: 0.7rem !important;
  color: #fff !important;
  background: linear-gradient(160deg, var(--ep-primary) 0%, var(--ep-topbar-bg-strong, #1859ad) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(31, 111, 209, 0.28) !important;
}

#main-wrapper[data-logintype="temp"] .left-sidebar #btnThisWeek {
  background: linear-gradient(160deg, #22b573 0%, #147a4d 100%) !important;
  box-shadow: 0 6px 16px rgba(34, 181, 115, 0.28) !important;
}

.left-sidebar #btnThisWeek .fas,
.left-sidebar #btnThisWeek .fa-calendar-days {
  color: #fff !important;
  padding-top: 0.15rem !important;
  font-size: 1.05rem !important;
}

.left-sidebar #btnThisWeek .mt-2 {
  margin-top: 0.35rem !important;
}

.left-sidebar #btnBakcWeeks:hover,
.left-sidebar #btnBakcWeeks4:hover,
.left-sidebar #btnForwardWeeks:hover,
.left-sidebar #btnForwardWeeks4:hover {
  background: #ffffff !important;
  color: var(--ep-primary) !important;
  border-color: rgba(31, 111, 209, 0.35) !important;
  box-shadow: 0 2px 8px rgba(31, 111, 209, 0.12) !important;
}

.left-sidebar #btnThisWeek:hover {
  filter: brightness(1.05);
  color: #fff !important;
}

/* Criteria summary — visual skin only (do not alter DataTables scroll geometry) */
.left-sidebar .CriteriaITems .table-responsive.ep-criteria-summary,
.left-sidebar .CriteriaITems .ep-criteria-summary {
  margin-top: 0.5rem;
  padding: 0 !important;
  border-radius: 12px;
  border: 1px solid rgba(15, 36, 56, 0.08);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 36, 56, 0.05);
  overflow: hidden;
}

.left-sidebar .ep-criteria-summary .dataTables_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.left-sidebar .ep-criteria-summary .dataTables_info,
.left-sidebar .ep-criteria-summary .dataTables_paginate,
.left-sidebar .ep-criteria-summary .dataTables_filter,
.left-sidebar .ep-criteria-summary .dataTables_length {
  display: none !important;
}

.left-sidebar #Headertable,
.left-sidebar .ep-criteria-summary table.dataTable {
  margin: 0 !important;
  background: #fff !important;
  font-family: var(--ep-font) !important;
  font-size: 0.8125rem !important;
}

/* Keep header / body / footer columns on the same vertical lines */
.left-sidebar .ep-criteria-summary .dataTables_scrollHeadInner,
.left-sidebar .ep-criteria-summary .dataTables_scrollFootInner {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 0 !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollHead table,
.left-sidebar .ep-criteria-summary .dataTables_scrollBody table,
.left-sidebar .ep-criteria-summary .dataTables_scrollFoot table,
.left-sidebar #Headertable {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollHead th:nth-child(1),
.left-sidebar .ep-criteria-summary .dataTables_scrollBody td:nth-child(1),
.left-sidebar .ep-criteria-summary .dataTables_scrollBody th:nth-child(1),
.left-sidebar .ep-criteria-summary .dataTables_scrollFoot th:nth-child(1),
.left-sidebar #Headertable th:nth-child(1),
.left-sidebar #Headertable td:nth-child(1) {
  width: 62% !important;
  box-sizing: border-box !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollHead th:nth-child(2),
.left-sidebar .ep-criteria-summary .dataTables_scrollBody td:nth-child(2),
.left-sidebar .ep-criteria-summary .dataTables_scrollBody th:nth-child(2),
.left-sidebar .ep-criteria-summary .dataTables_scrollFoot th:nth-child(2),
.left-sidebar #Headertable th:nth-child(2),
.left-sidebar #Headertable td:nth-child(2) {
  width: 38% !important;
  box-sizing: border-box !important;
}

/* Tiny scrollbar for criteria summary (scroll still works via wheel) */
.left-sidebar .ep-criteria-summary .dataTables_scrollBody,
.left-sidebar #Headertable_wrapper .dataTables_scrollBody {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 36, 56, 0.35) transparent !important;
  scrollbar-gutter: auto !important;
}

/* Header colors (visible scrollHead clone only — never scrollBody sizing thead) */
.left-sidebar .ep-criteria-summary .dataTables_scrollHead,
.left-sidebar .ep-criteria-summary .dataTables_scrollFoot {
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th,
.left-sidebar #Headertable_wrapper .dataTables_scrollHead thead th {
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
  color: var(--ep-primary-hover, #1859ad) !important;
  border-color: rgba(31, 111, 209, 0.14) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none !important;
}

#main-wrapper[data-logintype="temp"] .left-sidebar .ep-criteria-summary .dataTables_scrollHead,
#main-wrapper[data-logintype="temp"] .left-sidebar .ep-criteria-summary .dataTables_scrollFoot {
  background: #eef8f2 !important;
}

#main-wrapper[data-logintype="temp"] .left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th,
#main-wrapper[data-logintype="temp"] .left-sidebar #Headertable_wrapper .dataTables_scrollHead thead th {
  background: #eef8f2 !important;
  color: #1a6b4a !important;
  border-color: rgba(34, 181, 115, 0.18) !important;
}

.left-sidebar #Headertable_wrapper .dataTables_scrollHead thead th.text-white,
.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th.text-white {
  color: var(--ep-primary-hover, #1859ad) !important;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
}

#main-wrapper[data-logintype="temp"] .left-sidebar #Headertable_wrapper .dataTables_scrollHead thead th.text-white,
#main-wrapper[data-logintype="temp"] .left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th.text-white {
  color: #1a6b4a !important;
  background: #eef8f2 !important;
}

.left-sidebar #Headertable thead th:first-child,
.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th:first-child {
  text-align: left !important;
}

.left-sidebar #Headertable thead th:last-child,
.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th:last-child {
  text-align: right !important;
}

.left-sidebar .ep-criteria-th-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.left-sidebar #Headertable thead th .viewActualCharts,
.left-sidebar #Headertable thead th .fa-circle-info,
.left-sidebar #Headertable thead th .fas.fa-circle-info,
.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th .viewActualCharts,
.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th .fa-circle-info,
.left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th .fas.fa-circle-info,
.left-sidebar .ep-criteria-info {
  margin-left: auto !important;
  flex: 0 0 auto;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  color: var(--ep-primary, #1f6fd1) !important;
  opacity: 1;
}

#main-wrapper[data-logintype="temp"] .left-sidebar .ep-criteria-info,
#main-wrapper[data-logintype="temp"] .left-sidebar #Headertable thead th .viewActualCharts,
#main-wrapper[data-logintype="temp"] .left-sidebar .ep-criteria-summary .dataTables_scrollHead thead th .viewActualCharts {
  color: var(--ep-success, #22b573) !important;
}

/* Body — no row borders; odd/even stripes instead */
.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody td,
.left-sidebar #Headertable tbody td {
  color: var(--ep-text) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody tr:nth-child(odd) td,
.left-sidebar #Headertable tbody tr:nth-child(odd) td {
  background: #ffffff !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody tr:nth-child(even) td,
.left-sidebar #Headertable tbody tr:nth-child(even) td {
  background: #f5f8fb !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody tr:hover td,
.left-sidebar #Headertable tbody tr:hover td {
  background: #eef6fb !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody td:first-child,
.left-sidebar #Headertable tbody td:first-child {
  color: var(--ep-text-secondary) !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody td:last-child,
.left-sidebar .ep-criteria-summary .dataTables_scrollBody tbody td.text-right,
.left-sidebar #Headertable tbody td:last-child,
.left-sidebar #Headertable tbody td.text-right {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
}

/* Footer */
.left-sidebar .ep-criteria-summary .dataTables_scrollFoot tfoot,
.left-sidebar #Headertable tfoot {
  background: #f1f5f9 !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollFoot tfoot th,
.left-sidebar #Headertable tfoot th {
  background: transparent !important;
  color: var(--ep-text) !important;
  border-color: rgba(15, 36, 56, 0.06) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollFoot tfoot th:first-child,
.left-sidebar #Headertable tfoot th:first-child {
  text-align: left !important;
  color: var(--ep-text-secondary) !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollFoot tfoot th:last-child,
.left-sidebar .ep-criteria-summary .dataTables_scrollFoot tfoot th.text-right,
.left-sidebar #Headertable tfoot th:last-child,
.left-sidebar #Headertable tfoot th.text-right {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  color: var(--ep-primary) !important;
}

.left-sidebar #Headertable_wrapper {
  width: 100% !important;
}
.left-sidebar #QuickTools .btn {
  border-radius: 8px !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0.25rem 0.45rem !important;
}

.left-sidebar #QuickTools .btn i {
  color: var(--ep-primary) !important;
}

/* Generic left-sidebar buttons (don't fight week/tools styles) */
.left-sidebar .btn-light {
  border-radius: 8px !important;
  border-color: rgba(15, 36, 56, 0.1) !important;
  background: #ffffff !important;
}

/* Left-menu footer — Tools + Template/Actual as paired buttons */
.left-sidebar {
  overflow: hidden !important;
}

.left-sidebar #epLeftMenuFooter.ep-left-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 300;
  margin: 0 !important;
  padding: 0.45rem 0.5rem !important;
  min-height: 48px;
  height: auto;
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 36, 56, 0.08) !important;
  box-shadow: 0 -8px 24px rgba(15, 36, 56, 0.06) !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

.left-sidebar #epLeftMenuFooter.ep-left-footer.d-none {
  display: none !important;
}

.left-sidebar .ep-footer-btns {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.4rem;
  box-sizing: border-box;
}

.left-sidebar .ep-footer-btn {
  flex: 1 1 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  height: 34px;
  margin: 0 !important;
  padding: 0 0.75rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 36, 56, 0.1) !important;
  background: #f1f5f9 !important;
  color: var(--ep-text, #1e2a3a) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--ep-shadow-xs, 0 1px 2px rgba(15, 36, 56, 0.04)) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.left-sidebar .ep-footer-btn.d-none {
  display: none !important;
}

.left-sidebar .ep-footer-btn .hide-menu {
  display: inline-block !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

.left-sidebar .ep-footer-btn i {
  flex: 0 0 auto;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

.left-sidebar .ep-footer-btn:hover {
  background: #e8eef4 !important;
  color: var(--ep-primary, #1f6fd1) !important;
  border-color: rgba(31, 111, 209, 0.28) !important;
  text-decoration: none !important;
}

/* Template mode — calendar icon green */
#main-wrapper[data-logintype="temp"] .left-sidebar #BTNCriteriaPanelTemp.ep-footer-btn i {
  color: var(--ep-success, #22b573) !important;
}

#main-wrapper[data-logintype="temp"] .left-sidebar #BTNCriteriaPanelTemp.ep-footer-btn:hover {
  color: var(--ep-success, #22b573) !important;
  border-color: rgba(34, 181, 115, 0.35) !important;
}

@media (min-width: 768px) {
  #main-wrapper[data-sidebartype='mini-sidebar'] .left-sidebar #epLeftMenuFooter {
    display: none !important;
  }
}

/* Topbar session countdown (was sidebar footer) */
.topbar .ep-topbar-session {
  margin-right: 0.35rem !important;
}

.topbar .ep-topbar-session__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 32px;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.topbar .ep-topbar-session__pill i {
  font-size: 0.85rem;
  opacity: 0.95;
}

.topbar .ep-topbar-session__pill .remindsession {
  color: #fff;
}

#main-wrapper[data-logintype="temp"] .topbar .ep-topbar-session__pill {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

.left-sidebar .scroll-sidebar {
  padding-bottom: 56px !important;
}

.page-wrapper {
  background: var(--ep-page-bg) !important;
}

.page-wrapper > .container-fluid,
.page-wrapper .container-fluid {
  padding-top: 0.75rem;
}

.page-wrapper .card,
.page-wrapper .material-card.card,
#roots .card,
#DashboardContent .card {
  border-radius: 12px !important;
  border: 1px solid rgba(15, 36, 56, 0.07) !important;
  box-shadow: 0 4px 16px rgba(15, 36, 56, 0.05) !important;
  background: #fff;
}

.footer,
.footer.ep-app-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 36, 56, 0.08) !important;
  color: var(--ep-text-muted, #8494a7);
  box-shadow: 0 -4px 18px rgba(15, 36, 56, 0.04);
  padding: 0.55rem 1.15rem !important;
  min-height: 48px;
}

.ep-app-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.ep-app-footer__brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

.ep-app-footer__manual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ep-app-footer__manual:hover,
.ep-app-footer__manual:focus {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c !important;
  text-decoration: none !important;
}

.ep-app-footer__manual i {
  font-size: 1rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  cursor: pointer;
}

.ep-app-footer__product {
  font-size: 0.9rem;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--ep-primary, #1f6fd1) !important;
  text-decoration: none !important;
}

.ep-app-footer__product:hover,
.ep-app-footer__product:focus {
  color: var(--ep-primary-hover, #1a5fb5) !important;
  text-decoration: underline !important;
}

.ep-app-footer__version {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ep-text-muted, #8494a7);
}

.ep-app-footer__license {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.4rem;
  text-align: right;
  margin-left: auto;
}

.ep-app-footer__license-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ep-text-muted, #8494a7);
}

.ep-app-footer__license-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ep-text, #1e2a3a);
}

@media (max-width: 767.98px) {
  .ep-app-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ep-app-footer__license {
    margin-left: 0;
    text-align: left;
    justify-content: flex-start;
  }
}

.page-breadcrumb {
  background: transparent;
}

.bg-title {
  background: transparent;
}

/* Tools / Other Tools — smooth modern menu (icons kept) */
.left-sidebar .BtnOpenToolsMenu {
  margin: 0.25rem 0 0.35rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Section header row — warning colors only (no active fill on Tools/Other Tools) */
.left-sidebar .BtnOpenToolsMenu > a.sidebar-link.lstMainHref,
.left-sidebar #BtnOpenPagesMenu > a.sidebar-link.lstMainHref,
.left-sidebar #BtnOpenToolsMenu > a.sidebar-link.lstMainHref,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  margin: 0 10px !important;
  padding: 0.55rem 0.7rem !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #856539 !important;
  border: 1px solid rgba(240, 168, 74, 0.28) !important;
  box-shadow: 0 1px 2px rgba(240, 168, 74, 0.06) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em;
  opacity: 1 !important;
  filter: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.left-sidebar .BtnOpenToolsMenu > a.sidebar-link.lstMainHref i,
.left-sidebar #BtnOpenPagesMenu > a.sidebar-link.lstMainHref i,
.left-sidebar #BtnOpenToolsMenu > a.sidebar-link.lstMainHref i,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: var(--ep-warning-soft, #fff6e8) !important;
  color: #b7791f !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
}

.left-sidebar .BtnOpenToolsMenu > a.sidebar-link.lstMainHref .hide-menu,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref .hide-menu {
  flex: 1 1 auto;
  min-width: 0;
  color: #856539 !important;
  font-weight: 600 !important;
}

.left-sidebar .BtnOpenToolsMenu > a.sidebar-link.has-arrow::after,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.has-arrow::after {
  margin-left: auto !important;
  margin-right: 0.1rem !important;
  color: #c47a1a !important;
  font-size: 0.65rem !important;
  opacity: 0.85;
}

/* Keep header colors steady — no active/selected fill on group headers */
.left-sidebar .BtnOpenToolsMenu.selected > a.sidebar-link,
.left-sidebar .BtnOpenToolsMenu > a.sidebar-link.active,
.left-sidebar .BtnOpenToolsMenu > a.sidebar-link:hover,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.Active,
.left-sidebar #sidebarnav .BtnOpenToolsMenu.selected > .sidebar-link,
.left-sidebar #sidebarnav .BtnOpenToolsMenu > .sidebar-link.active,
.left-sidebar #sidebarnav .BtnOpenToolsMenu > .sidebar-link:hover {
  background: #ffffff !important;
  color: #856539 !important;
  border-color: rgba(240, 168, 74, 0.28) !important;
  box-shadow: 0 1px 2px rgba(240, 168, 74, 0.06) !important;
  filter: none !important;
}

.left-sidebar .BtnOpenToolsMenu > a.sidebar-link:hover i,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover i,
.left-sidebar .BtnOpenToolsMenu.selected > a.sidebar-link i,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.Active i {
  background: var(--ep-warning-soft, #fff6e8) !important;
  color: #b7791f !important;
}

.left-sidebar .BtnOpenToolsMenu > a.sidebar-link:hover .hide-menu,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover .hide-menu,
.left-sidebar .BtnOpenToolsMenu > a.sidebar-link:hover::after,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover::after,
.left-sidebar .BtnOpenToolsMenu.selected > a.sidebar-link .hide-menu,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.Active .hide-menu {
  color: #856539 !important;
}

.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.Active,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover p,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.Active p {
  background: #ffffff !important;
  color: #856539 !important;
}

.left-sidebar .BtnOpenToolsMenu > a.lstMainHref.Active i,
.left-sidebar .BtnOpenToolsMenu > a.lstMainHref:hover i {
  background: var(--ep-warning-soft, #fff6e8) !important;
  color: #b7791f !important;
}

/* Submenu panel — overflow-x must NOT clip badges */
.left-sidebar .BtnOpenToolsMenu > ul.first-level,
.left-sidebar .BtnOpenToolsMenu > ul.collapse,
#sidebarnav .BtnOpenToolsMenu > ul,
.BtnOpenToolsMenu > ul {
  margin: 6px 10px 8px !important;
  padding: 0.35rem 0.45rem !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(15, 36, 56, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
}

.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.4rem !important;
  background: transparent !important;
  border-radius: 9px !important;
  margin: 2px 0 !important;
  padding: 0.35rem 0.55rem !important;
  min-height: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
  transition: background-color 0.15s ease;
}

.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem > div,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem > div {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Item icons — default neutral */
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem > div > i,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem i.fas,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem i.fa,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem i,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: #f1f5f9 !important;
  color: #5a6b7d !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

/*
 * Label: NEVER hover-style.
 * #sidebarnav .sidebar-link:hover paints white+primary — kill it here with ID specificity.
 */
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link:hover,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link:focus,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link:active,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover .sidebar-link,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .hide-menu,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .hide-menu:hover,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover .hide-menu,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link:hover,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem .hide-menu,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem .hide-menu:hover {
  color: #334155 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  border: 0 !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem .sidebar-link {
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0 !important;
  pointer-events: none !important; /* hover only on the row, never on the label */
}

/* Count badge — default neutral */
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem > .badge,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem .badge,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem > .badge,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem .badge {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.3rem;
  padding: 0 0.45rem !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #eef2f6 !important;
  color: #64748b !important;
  border: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1;
}

/* Hover — subtle gray only */
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem:hover {
  background: #f1f5f9 !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover > div,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem:hover > div {
  background: transparent !important;
  box-shadow: none !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover > div > i,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover i,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem:hover i {
  background: #e8edf2 !important;
  color: #5a6b7d !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover > .badge,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem:hover .badge,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem:hover .badge {
  background: #eef2f6 !important;
  color: #64748b !important;
}

/* Active only — warning-light smooth (row + label + icon + badge) */
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem.Active {
  background: #ffeed6 !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active > div,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem.Active > div {
  background: transparent !important;
  box-shadow: none !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active .sidebar-link,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active .hide-menu,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem.Active .sidebar-link,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem.Active .hide-menu {
  color: #8a5210 !important;
  font-weight: 600 !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active > div > i,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active i,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem.Active i {
  background: #ffe2b8 !important;
  color: #a16207 !important;
}

#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active > .badge,
#sidebarnav .BtnOpenToolsMenu .ToolsMenuITem.Active .badge,
.left-sidebar .BtnOpenToolsMenu .ToolsMenuITem.Active .badge {
  background: #ffe2b8 !important;
  color: #8a5210 !important;
}

.ToolsMenuITem {
  background: transparent !important;
  border-radius: 9px;
}

.SelectedRow {
  background: var(--ep-primary) !important;
  color: #fff !important;
}

.SelectedRow > td,
.SelectedRow > th,
table.dataTable tbody tr.SelectedRow > td {
  background: var(--ep-primary) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.SelectedRow td,
.SelectedRow td span,
.SelectedRow td div,
.SelectedRow td p,
.SelectedRow td a,
.SelectedRow td label,
.SelectedRow td strong,
.SelectedRow td b {
  color: #fff !important;
}

.SelectedRow td .text-danger,
.SelectedRow td .text-warning,
.SelectedRow td .text-secondary,
.SelectedRow td .text-muted,
.SelectedRow td .text-info,
.SelectedRow td .text-success,
.SelectedRow td .text-primary,
.SelectedRow td .text-dark {
  color: #fff !important;
}

.SelectedRow td i.fas,
.SelectedRow td i.fa,
.SelectedRow td i.far {
  color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* Cards & containers                                                         */
/* -------------------------------------------------------------------------- */

.card,
.material-card.card {
  background: var(--ep-surface);
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius) !important;
  box-shadow: var(--ep-shadow-sm) !important;
  /* clip children so bottom corners stay rounded */
  overflow: hidden;
}

.card-group > .card {
  border-radius: var(--ep-radius) !important;
}

.card > .card-body:last-child,
.page-wrapper .card > .card-body:last-child,
#roots .card > .card-body:last-child,
#DashboardContent .card > .card-body:last-child,
#showChartsModal .card > .card-body:last-child {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
}

.card > .card-header:last-child,
.page-wrapper .card > .card-header:last-child,
#roots .card > .card-header:last-child {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
}

.card-header {
  background: var(--ep-surface-muted) !important;
  border-bottom: 1px solid var(--ep-border) !important;
  color: var(--ep-text);
  font-weight: 500;
  border-top-left-radius: var(--ep-radius) !important;
  border-top-right-radius: var(--ep-radius) !important;
}

.card-footer {
  background: var(--ep-surface-muted) !important;
  border-top: 1px solid var(--ep-border) !important;
}

.card > .card-footer:last-child {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
}

.card-body {
  color: var(--ep-text);
}

.card-group .card {
  border: 1px solid var(--ep-border);
}

/* Scheduler shift cells — keep original chrome; restore muted footer strip */
#SchedulerTable .card,
.page-wrapper #SchedulerTable .card,
#roots #SchedulerTable .card {
  background: #fff !important;
  border: 1.8px solid lightgray !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  margin: 4px;
  overflow: visible !important;
}

/* Body/footer: no chrome. Header keeps shift color (do NOT force transparent). */
#SchedulerTable .card-body {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#SchedulerTable .card-header {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  /* Beat global .card-header muted fill; bg-* / inline hex rules re-apply color */
  background: transparent !important;
  background-color: transparent !important;
}

/* Restore original shift header color bars (same palette as Add Shift color select).
   Design-system had forced transparent backgrounds, leaving only white text → invisible numbers. */
#SchedulerTable .card-header.bg-primary {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-secondary {
  background-color: #6c757d !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-success {
  background-color: #198754 !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-danger {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}
#SchedulerTable .card-header.bg-info {
  background-color: #0dcaf0 !important;
  color: #212529 !important;
}
#SchedulerTable .card-header.bg-dark {
  background-color: #212529 !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-black {
  background-color: #000000 !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-light,
#SchedulerTable .card-header.bg-white,
#SchedulerTable .card-header.bg-transparent {
  background-color: transparent !important;
  color: #212529 !important;
}
#SchedulerTable .card-header.bg-primary-subtle {
  background-color: #cfe2ff !important;
  color: #084298 !important;
}
#SchedulerTable .card-header.bg-secondary-subtle {
  background-color: #e2e3e5 !important;
  color: #41464b !important;
}
#SchedulerTable .card-header.bg-success-subtle {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
}
#SchedulerTable .card-header.bg-danger-subtle {
  background-color: #f8d7da !important;
  color: #842029 !important;
}
#SchedulerTable .card-header.bg-warning-subtle {
  background-color: #fff3cd !important;
  color: #664d03 !important;
}
#SchedulerTable .card-header.bg-info-subtle {
  background-color: #cff4fc !important;
  color: #055160 !important;
}
#SchedulerTable .card-header.bg-dark-subtle {
  background-color: #ced4da !important;
  color: #212529 !important;
}
#SchedulerTable .card-header.bg-purple {
  background-color: #7460ee !important;
  color: #ffffff !important;
}
#SchedulerTable .card-header.bg-cyan {
  background-color: #4fc3f7 !important;
  color: #212529 !important;
}
#SchedulerTable .card-header.bg-orange {
  background-color: #fb8c00 !important;
  color: #ffffff !important;
}
/* Day number inherits header text color (white on dark fills, dark on light fills) */
#SchedulerTable .card-header .headerDay,
#SchedulerTable .card-header .month,
#SchedulerTable .card-header .dayMonthHeader {
  color: inherit !important;
}
#SchedulerTable .card-header .currentDay {
  color: #3fd7d7 !important;
}

/* Light gray footer strip (icons / status) — was wiped by transparent override */
#SchedulerTable .card-footer,
.page-wrapper #SchedulerTable .card-footer,
#roots #SchedulerTable .card-footer {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
  border: 0 !important;
  border-top: 1px solid #e9ecef !important;
  box-shadow: none !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--ep-radius-sm) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.1s ease;
  box-shadow: none;
}

.btn:focus,
.btn.focus {
  box-shadow: var(--ep-focus-ring) !important;
}

.btn-primary,
.btn-info,
.btn-custom {
  background: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
  color: var(--ep-text-on-accent) !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-custom:hover,
.btn-primary:focus,
.btn-info:focus,
.btn-custom:focus {
  background: var(--ep-primary-hover) !important;
  border-color: var(--ep-primary-hover) !important;
  color: var(--ep-text-on-accent) !important;
}

.btn-success {
  background: var(--ep-success) !important;
  border-color: var(--ep-success) !important;
}

.btn-success:hover,
.btn-success:focus {
  background: #1c9c64 !important;
  border-color: #1c9c64 !important;
}

.btn-warning {
  background: var(--ep-warning) !important;
  border-color: var(--ep-warning) !important;
  color: var(--ep-text) !important;
}

.btn-danger {
  background: var(--ep-danger) !important;
  border-color: var(--ep-danger) !important;
}

.btn-light,
.btn-default,
.btn-secondary {
  background: var(--ep-surface) !important;
  border: 1px solid var(--ep-border) !important;
  color: var(--ep-text-secondary) !important;
  box-shadow: var(--ep-shadow-xs);
}

.btn-light:hover,
.btn-default:hover,
.btn-secondary:hover {
  background: var(--ep-surface-muted) !important;
  border-color: var(--ep-border) !important;
  color: var(--ep-text) !important;
}

.btn-outline-info,
.btn-outline-primary {
  color: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
}

.btn-outline-info:hover,
.btn-outline-primary:hover {
  background: var(--ep-primary) !important;
  color: var(--ep-text-on-accent) !important;
}

.btn-circle {
  box-shadow: var(--ep-shadow-xs);
}

/*
 * Icon-only buttons — no border / background / hover chrome.
 * Keeps filled semantic CTAs (primary/info/success/warning/danger).
 * Exclude SweetAlert actions: those buttons have icon+text but CSS
 * :only-child ignores text nodes, so they falsely matched and went transparent.
 */
.btn.btn-default:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):not(.swal2-deny),
.btn.btn-light:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):not(.swal2-deny),
.btn.btn-secondary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):not(.swal2-deny),
.btn.btn-outline-info:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):not(.swal2-deny),
.btn.btn-outline-primary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):not(.swal2-deny),
.btn.btn-outline-secondary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):not(.swal2-deny),
span.btn.btn-default:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm),
span.btn.btn-light:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm),
span.btn.btn-secondary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm),
.btn.p-0:not(.btn-primary):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-custom):not(.swal2-cancel):not(.swal2-confirm):has(> i:only-child) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.btn.btn-default:has(> i:only-child):hover,
.btn.btn-default:has(> i:only-child):focus,
.btn.btn-default:has(> i:only-child):active,
.btn.btn-light:has(> i:only-child):hover,
.btn.btn-light:has(> i:only-child):focus,
.btn.btn-light:has(> i:only-child):active,
.btn.btn-secondary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):hover,
.btn.btn-secondary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):focus,
.btn.btn-secondary:has(> i:only-child):not(.swal2-cancel):not(.swal2-confirm):active,
.btn.btn-outline-info:has(> i:only-child):hover,
.btn.btn-outline-info:has(> i:only-child):focus,
.btn.btn-outline-primary:has(> i:only-child):hover,
.btn.btn-outline-primary:has(> i:only-child):focus,
.btn.btn-outline-secondary:has(> i:only-child):hover,
.btn.btn-outline-secondary:has(> i:only-child):focus,
span.btn.btn-default:has(> i:only-child):hover,
span.btn.btn-light:has(> i:only-child):hover,
span.btn.btn-secondary:has(> i:only-child):not(.swal2-cancel):hover,
.btn.p-0:not(.btn-primary):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-custom):not(.swal2-cancel):not(.swal2-confirm):has(> i:only-child):hover,
.btn.p-0:not(.btn-primary):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-custom):not(.swal2-cancel):not(.swal2-confirm):has(> i:only-child):focus {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  transform: none !important;
}

/* Labeled icon+text CTAs — keep a clear outline border (not icon-only chrome). */
.btn.ep-btn-labeled:not(.d-none) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem !important;
  min-height: 38px;
  border: 1px solid var(--ep-primary, #1f6fd1) !important;
  border-radius: var(--ep-radius-sm, 0.35rem) !important;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none !important;
  background: var(--ep-surface, #fff) !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

.btn.ep-btn-labeled.btn-outline-info:not(.d-none) {
  border-color: var(--ep-info, #1f6fd1) !important;
  color: var(--ep-info, #1f6fd1) !important;
}

.btn.ep-btn-labeled.btn-outline-info:not(.d-none):hover,
.btn.ep-btn-labeled.btn-outline-info:not(.d-none):focus {
  background: var(--ep-info, #1f6fd1) !important;
  border-color: var(--ep-info, #1f6fd1) !important;
  color: #fff !important;
}

.btn.ep-btn-labeled.btn-outline-success:not(.d-none) {
  border-color: var(--ep-success, #22b573) !important;
  color: var(--ep-success, #22b573) !important;
}

.btn.ep-btn-labeled.btn-outline-success:not(.d-none):hover,
.btn.ep-btn-labeled.btn-outline-success:not(.d-none):focus {
  background: var(--ep-success, #22b573) !important;
  border-color: var(--ep-success, #22b573) !important;
  color: #fff !important;
}

.btn.ep-btn-labeled.d-none,
#OpenAbsenseBtn.d-none {
  display: none !important;
}

.btn.ep-btn-labeled > i {
  font-size: 0.95rem !important;
  line-height: 1;
  margin: 0 !important;
  vertical-align: middle;
  color: inherit !important;
}

/* Tardiness wizard — soft Select Job/Phase & Select Employee */
#JobButtonDivBtn.ep-td-select-btn,
#EmployeeButtonDivBtn.ep-td-select-btn {
  min-width: 11.5rem;
  padding: 0.6rem 1.15rem !important;
  border-radius: 999px !important;
  background: var(--ep-surface-muted, #f5f8fb) !important;
  border: 1px solid color-mix(in srgb, var(--ep-primary, #1f6fd1) 28%, var(--ep-border, #d5dde8)) !important;
  color: var(--ep-primary, #1f6fd1) !important;
  box-shadow: var(--ep-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.06)) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#JobButtonDivBtn.ep-td-select-btn:hover,
#JobButtonDivBtn.ep-td-select-btn:focus,
#EmployeeButtonDivBtn.ep-td-select-btn:hover,
#EmployeeButtonDivBtn.ep-td-select-btn:focus {
  background: color-mix(in srgb, var(--ep-primary, #1f6fd1) 12%, #fff) !important;
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-primary, #1f6fd1) !important;
  box-shadow: var(--ep-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.08)) !important;
}

#JobButtonDivBtn.ep-td-select-btn:active,
#EmployeeButtonDivBtn.ep-td-select-btn:active {
  background: color-mix(in srgb, var(--ep-primary, #1f6fd1) 18%, #fff) !important;
  transform: translateY(0.5px);
}

#OpenAbsenseBtn.btn.ep-btn-labeled:not(.d-none) {
  border: 1px solid var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-primary, #1f6fd1) !important;
  background: var(--ep-surface, #fff) !important;
}

#OpenAbsenseBtn.btn.ep-btn-labeled:not(.d-none):hover,
#OpenAbsenseBtn.btn.ep-btn-labeled:not(.d-none):focus {
  background: var(--ep-primary, #1f6fd1) !important;
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-text-on-accent, #fff) !important;
}

/* -------------------------------------------------------------------------- */
/* Forms & inputs — smooth unified fields (screenshot look)                    */
/* Keep existing labels only; do not invent labels via CSS.                   */
/* -------------------------------------------------------------------------- */

.form-control,
.custom-select {
  color: var(--ep-text) !important;
  background-color: var(--ep-surface) !important;
  border: 1px solid var(--ep-input-border) !important;
  border-radius: var(--ep-radius-input) !important;
  box-shadow: var(--ep-input-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control-lg {
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  font-size: 0.95rem;
  border-radius: var(--ep-radius-input) !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--ep-primary) !important;
  box-shadow: var(--ep-focus-ring) !important;
  outline: 0;
}

.form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ep-surface-muted) !important;
  color: var(--ep-text-secondary) !important;
  box-shadow: none;
}

/* Kill browser autocomplete cyan/yellow paint — keep fields matching design */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ep-text) !important;
  caret-color: var(--ep-text);
  /* Long transition defeats Chrome’s autofill background flash */
  transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s !important;
  box-shadow: 0 0 0 1000px var(--ep-surface) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ep-surface) inset !important;
  border-color: var(--ep-input-border) !important;
}

.input-group > input.form-control:-webkit-autofill,
.input-group > input.form-control:-webkit-autofill:hover,
.input-group > input.form-control:-webkit-autofill:focus,
.input-group > input.form-control:-webkit-autofill:active,
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px var(--ep-surface) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ep-surface) inset !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.input-group:has(input:-webkit-autofill) {
  background: var(--ep-surface);
  border-color: var(--ep-input-border);
}

/* Existing labels only — darker, clearer hierarchy */
label:not(.switch):not(.custom-control-label):not(.btn):not(.sidebar-link) {
  color: #1e2a3a;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.col-form-label,
.form-group > label,
.form-horizontal .control-label {
  color: #1e2a3a !important;
  font-weight: 600 !important;
}

/*
 * Input groups (search / picker): same joined field as left-menu Job & Phase.
 * Outer shell owns radius + border; addon is flush (no Bootstrap .btn/.border box).
 */
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border: 1px solid var(--ep-input-border, rgba(15, 36, 56, 0.12)) !important;
  border-radius: 12px !important;
  box-shadow: var(--ep-input-shadow, 0 1px 2px rgba(15, 36, 56, 0.04)) !important;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.input-group:focus-within {
  border-color: var(--ep-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.18) !important;
}

.input-group > .form-control,
.input-group > .custom-select,
.input-group > .form-control-lg {
  flex: 1 1 auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  min-width: 0;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .form-control-lg:focus {
  box-shadow: none !important;
  outline: 0;
  background: #ffffff !important;
}

.input-group-prepend,
.input-group-append {
  display: flex;
  margin: 0 !important;
}

.input-group-text {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ep-text-muted, #8494a7) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.85rem;
  padding: 0.65rem 0.75rem; /* equal left/right */
}

.input-group-prepend .input-group-text {
  padding-left: 0.75rem;
  padding-right: 0.75rem; /* match left — was 0.35rem (icon hugged the divider) */
}

.input-group-append .input-group-text {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  cursor: pointer;
}

/* Search / picker addon — kill Bootstrap .btn .border radius & dual borders */
.input-group > .input-group-addon,
.input-group > .btn.input-group-addon,
.input-group > .input-group-addon.btn,
.input-group > .input-group-addon.border,
.input-group > .input-group-addon.bg-white,
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px !important;
  min-width: 38px;
  height: auto !important;
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--ep-text-muted, #8494a7) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-left: 0 !important;
  border-right: 1px solid rgba(15, 36, 56, 0.08) !important;
}

.input-group > .input-group-addon:hover,
.input-group > .btn.input-group-addon:hover,
.input-group > .input-group-addon.btn:hover,
.input-group > .input-group-append > .btn:hover,
.input-group > .input-group-prepend > .btn:hover {
  background: #ffffff !important;
  color: var(--ep-text-muted, #8494a7) !important;
}

.input-group > .input-group-addon i,
.input-group > .btn.input-group-addon i,
.input-group .input-group-addon .fa-search,
.input-group .input-group-addon .fa-magnifying-glass {
  font-size: 0.95rem;
  color: inherit !important;
}

.input-group-prepend .btn,
.input-group-append .btn {
  border-radius: 0 !important;
  margin: 0;
  box-shadow: none !important;
}

.input-group .form-control-lg {
  min-height: 3rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/*
 * Modal "login-style" icon fields (Template / Tablet / Geofence / etc.)
 * Soft joined chip; icons on left; same color as input text; no divider.
 */
.modal .input-group:has(> .input-group-prepend),
.modal .input-group:has(> .input-group-append),
#EditManageTemplateModal .input-group:has(> .input-group-prepend),
#EditTabletModal .input-group:has(> .input-group-prepend),
#EditGeolocationModal .input-group:has(> .input-group-prepend),
#PasswordTemplateModal .input-group:has(> .input-group-prepend),
#SaveAsTemplateModal .input-group:has(> .input-group-prepend),
#ChangePasswordModal .input-group:has(> .input-group-prepend),
#UserLockContent .input-group:has(> .input-group-prepend) {
  margin-bottom: 0 !important;
  min-height: 46px;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  box-shadow: 0 1px 2px rgba(15, 36, 56, 0.04) !important;
  overflow: hidden;
  flex-direction: row !important;
}

.modal .input-group:has(> .input-group-prepend):focus-within,
.modal .input-group:has(> .input-group-append):focus-within,
#EditManageTemplateModal .input-group:has(> .input-group-prepend):focus-within,
#EditTabletModal .input-group:has(> .input-group-prepend):focus-within,
#EditGeolocationModal .input-group:has(> .input-group-prepend):focus-within {
  border-color: var(--ep-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.16) !important;
}

.modal .input-group:has(> .input-group-prepend) > .form-control,
.modal .input-group:has(> .input-group-prepend) > .form-control-lg,
.modal .input-group:has(> .input-group-append) > .form-control,
.modal .input-group:has(> .input-group-append) > .form-control-lg,
#EditManageTemplateModal .input-group:has(> .input-group-prepend) .form-control,
#EditTabletModal .input-group:has(> .input-group-prepend) .form-control,
#EditGeolocationModal .input-group:has(> .input-group-prepend) .form-control {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0.5rem 0.9rem 0.5rem 0.25rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.3 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ep-text, #1e2a3a) !important;
  order: 2;
}

.modal .input-group > .input-group-prepend,
#EditManageTemplateModal .input-group > .input-group-prepend,
#EditTabletModal .input-group > .input-group-prepend,
#EditGeolocationModal .input-group > .input-group-prepend {
  order: 1;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: stretch !important;
}

.modal .input-group > .input-group-append,
#EditManageTemplateModal .input-group > .input-group-append {
  order: 3;
  flex: 0 0 auto !important;
}

/* Icon chip — left side, match input text color, no divider */
.modal .input-group:has(> .input-group-prepend) .input-group-text,
.modal .input-group:has(> .input-group-append) .input-group-text,
.modal .input-group > .input-group-prepend > .input-group-text,
.modal .input-group > .input-group-append > .input-group-text,
#EditManageTemplateModal .input-group-text,
#EditTabletModal .input-group-text,
#EditGeolocationModal .input-group-text,
#PasswordTemplateModal .input-group-text,
#SaveAsTemplateModal .input-group-text,
#ChangePasswordModal .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 2.25rem !important;
  padding: 0 0.3rem 0 0.55rem !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
  color: var(--ep-text-muted, #8494a7) !important;
  box-shadow: none !important;
}

.modal .input-group:has(> .input-group-prepend) .input-group-text i,
.modal .input-group:has(> .input-group-append) .input-group-text i,
.modal .input-group > .input-group-prepend > .input-group-text i,
.modal .input-group > .input-group-append > .input-group-text i,
#EditManageTemplateModal .input-group-text i,
#EditTabletModal .input-group-text i,
#EditGeolocationModal .input-group-text i,
#PasswordTemplateModal .input-group-text i,
#SaveAsTemplateModal .input-group-text i,
#ChangePasswordModal .input-group-text i {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  width: 1.15em;
  text-align: left;
  color: var(--ep-text-muted, #8494a7) !important;
}

/* Template modal read-only meta fields (label above, not icon chip) */
#EditManageTemplateModal .input-group.mt-2,
#EditManageTemplateModal .input-group.ep-jp-meta-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible;
  min-height: 0;
}

#EditManageTemplateModal .input-group.mt-2 > span.col-12,
#EditManageTemplateModal .input-group.ep-jp-meta-field > span {
  padding: 0 !important;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ep-text-muted, #8494a7);
  letter-spacing: 0.02em;
}

#EditManageTemplateModal .input-group.mt-2 > .form-control-lg,
#EditManageTemplateModal .input-group.ep-jp-meta-field > .form-control-lg {
  width: 100% !important;
  max-width: 100%;
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  border-radius: 12px !important;
  background: var(--ep-surface-muted, #f5f8fb) !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.9rem !important;
}

/* Modal icon grids — gutters on columns, never inside the input chip */
#EditManageTemplateModal .modal-body > .row,
#EditTabletModal .modal-body > .row,
#EditGeolocationModal .modal-body > .row {
  row-gap: 0.65rem;
}

#EditManageTemplateModal .modal-body > .row > [class*="col-"],
#EditTabletModal .modal-body > .row > [class*="col-"],
#EditGeolocationModal .modal-body > .row > [class*="col-"] {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* Safety: if input-group still has col-* on same node, kill inner gutter */
.modal .input-group[class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Grid header add (+) — match Special Days (fa-xl + success green)           */
/* -------------------------------------------------------------------------- */
table.table.text-inputs-searching thead th:first-child .fa-plus,
table.table.text-inputs-searching thead th:first-child .fas.fa-plus,
table.table.text-inputs-searching thead th:first-child .fa.fa-plus,
table.table.border thead th:first-child .fa-plus,
table.table.border thead th:first-child .fas.fa-plus,
.dataTables_wrapper table thead th:first-child .fa-plus,
.dataTables_wrapper table thead th:first-child .fas.fa-plus,
#btnAddTablet .fa-plus,
#btnAddGeolocation .fa-plus,
#btnAddTablet span.fas,
#btnAddGeolocation span.fas {
  font-size: 1.25rem !important; /* fa-xl */
  line-height: 1 !important;
  color: var(--ep-success, #22b573) !important;
  vertical-align: middle;
}

table.table.text-inputs-searching thead th:first-child .btn.p-0,
table.table.border thead th:first-child .btn.p-0,
#btnAddTablet,
#btnAddGeolocation {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Dense table / toolbar inputs stay compact but still smooth */
table .form-control,
table .input-group,
.dataTables_wrapper .form-control,
.dataTables_filter .form-control {
  border-radius: var(--ep-radius-sm) !important;
}

table .input-group {
  border-radius: var(--ep-radius-sm) !important;
  box-shadow: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--ep-focus-ring);
}

/* -------------------------------------------------------------------------- */
/* Smooth toggle switches (login options + general + DataTable header/body) */

.switch {
  position: relative;
  display: inline-block;
  width: 40px !important;
  height: 22px !important;
  vertical-align: middle;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider,
label.switch .slider,
.slider {
  width: 40px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background-color: #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(15, 36, 56, 0.08);
  transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.switch .slider:before,
label.switch .slider:before,
.slider:before {
  height: 18px !important;
  width: 18px !important;
  left: 2px !important;
  bottom: 2px !important;
  top: auto !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(15, 36, 56, 0.22) !important;
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  font: var(--fa-font-solid) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  padding: 0 !important;
  color: #94a3b8 !important;
  content: "\f00d" !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease !important;
}

.switch .slider:hover:before,
.slider:hover:before {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 36, 56, 0.28) !important;
}

.switch input:checked + .slider,
input:checked + .slider {
  background-color: rgba(31, 111, 209, 0.35) !important;
}

.switch input:checked + .slider:before,
input:checked + .slider:before {
  transform: translateX(18px) !important;
  -webkit-transform: translateX(18px) !important;
  -ms-transform: translateX(18px) !important;
  background-color: var(--ep-primary) !important;
  color: #ffffff !important;
  content: "\f00c" !important;
  padding: 0 !important;
  font-size: 9px !important;
  line-height: 18px !important;
  box-shadow: 0 1px 6px rgba(31, 111, 209, 0.45) !important;
}

/* Login option rows — align switch + label comfortably */
.auth-box .border-bottom,
.auth-box p.border-bottom {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.85rem !important;
  margin-bottom: 0.85rem !important;
  border-color: var(--ep-border-subtle) !important;
}

.auth-box .border-bottom .switch {
  margin: 0;
}

/* Green / orange variants keep semantic colors, same smooth size */
.greenSlider input:checked + .slider {
  background-color: rgba(34, 181, 115, 0.35) !important;
}

.greenSlider input:checked + .slider:before {
  background-color: var(--ep-success) !important;
  box-shadow: 0 2px 8px rgba(34, 181, 115, 0.45) !important;
}

.orangeSlider input:checked + .slider {
  background-color: rgba(240, 120, 0, 0.35) !important;
}

.orangeSlider input:checked + .slider:before {
  background-color: var(--ep-tools) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(240, 120, 0, 0.45) !important;
}

/* Header switches = same size as body; center in thead cells */
table.dataTable thead th .switch,
th .switch,
table.dataTable tbody td .switch,
td .switch {
  width: 40px !important;
  height: 22px !important;
  margin: 0 auto !important;
  vertical-align: middle;
}

table.dataTable thead th:has(.switch),
table.dataTable tbody td:has(.switch) {
  text-align: center !important;
  vertical-align: middle !important;
}

table.dataTable thead th .slider,
th .slider,
table.dataTable tbody td .slider,
td .slider {
  width: 40px !important;
  height: 22px !important;
}

table.dataTable thead th .slider:before,
th .slider:before,
table.dataTable tbody td .slider:before,
td .slider:before {
  height: 18px !important;
  width: 18px !important;
  left: 2px !important;
  bottom: 2px !important;
  font-size: 8px !important;
  line-height: 18px !important;
  transform: translateX(0) !important;
}

table.dataTable thead th input:checked + .slider:before,
th input:checked + .slider:before,
table.dataTable tbody td input:checked + .slider:before,
td input:checked + .slider:before {
  transform: translateX(18px) !important;
  -webkit-transform: translateX(18px) !important;
  -ms-transform: translateX(18px) !important;
  font-size: 9px !important;
  line-height: 18px !important;
  padding: 0 !important;
}

/* Global Adjustments page — tool header + filter toolbar */
#AdjustmentContent .ep-tool-page-header .ep-dash-tools,
#AdjustmentContent .ep-tool-page-header .ep-dash-tools--icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-left: auto;
}

#AdjustmentContent .ep-tool-page-header .ep-dash-tools .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#AdjustmentContent .ep-tool-page-header .ep-dash-tools .btn i,
#AdjustmentContent .ep-tool-page-header .ep-dash-tools .btn .fas {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

#AdjustmentContent .ep-adj-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0;
}

#AdjustmentContent .ep-adj-toolbar__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

#AdjustmentContent .ep-adj-toolbar__search .dataTables_filter,
#AdjustmentContent .ep-adj-toolbar__search .dataTables_filter > label {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  text-align: left !important;
  font-size: 0 !important;
  gap: 0;
}

#AdjustmentContent .ep-adj-toolbar__search .ep-dt-search-row {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  gap: 0.5rem;
  font-size: 0.875rem;
}

#AdjustmentContent .ep-adj-toolbar__search .ep-dt-search,
#AdjustmentContent .ep-adj-toolbar__search .input-group {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#AdjustmentContent .ep-adj-toolbar__search .ep-dt-search-actions {
  display: none !important; /* add action lives in toolbar filters now */
}

#AdjustmentContent .ep-adj-toolbar__search .form-control,
#AdjustmentContent .ep-adj-toolbar__search input[type="search"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: 0.875rem !important;
}

#AdjustmentContent .ep-adj-toolbar__filters {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  flex: 0 0 auto;
  margin-left: 0;
}

#AdjustmentContent #EmployeeIDForAdjustmentsTable {
  position: static !important;
  width: 8.5rem !important;
  max-width: 42vw;
  height: 38px !important;
  margin: 0 !important;
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  border-radius: 10px !important;
  box-shadow: var(--ep-input-shadow, 0 1px 2px rgba(15, 36, 56, 0.04)) !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 0.875rem !important;
  background: #fff !important;
}

#AdjustmentContent #AllEmps {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  margin: 0 !important;
  padding: 0.2rem 0.55rem 0.2rem 0.35rem;
  border-radius: 999px;
  background: var(--ep-surface-muted, #f5f8fb);
  border: 1px solid rgba(15, 36, 56, 0.06);
  height: 38px;
  box-sizing: border-box;
}

#AdjustmentContent .ep-adj-allemps__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ep-text-secondary, #5a6b7d);
  white-space: nowrap;
  line-height: 1.2;
}

#AdjustmentContent #AllEmps .switch {
  width: 36px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

#AdjustmentContent #AllEmps .slider {
  width: 36px !important;
  height: 20px !important;
}

#AdjustmentContent #AllEmps .slider:before {
  height: 16px !important;
  width: 16px !important;
  left: 2px !important;
  bottom: 2px !important;
  font-size: 8px !important;
  line-height: 16px !important;
}

#AdjustmentContent #AllEmps input:checked + .slider:before {
  transform: translateX(16px) !important;
}

#AdjustmentContent #AddNewAdjustment {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
}

#AdjustmentContent .ep-tool-page-header .ep-dash-icon i::before {
  content: "\f1de";
  font-weight: 900;
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
}

@media (max-width: 767.98px) {
  #AdjustmentContent .ep-adj-toolbar {
    flex-wrap: wrap;
  }

  #AdjustmentContent .ep-adj-toolbar__search {
    flex: 1 1 100%;
    max-width: 100%;
  }

  #AdjustmentContent .ep-adj-toolbar__filters {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Adjustments filter fieldsets — keep switch + label on one line */
#Adjustments fieldset .row > [class*="col-"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.3rem;
  white-space: nowrap;
  min-width: 0;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

#Adjustments fieldset .switch {
  width: 36px !important;
  height: 20px !important;
  flex: 0 0 auto;
  margin: 0 !important;
}

#Adjustments fieldset .switch .slider,
#Adjustments fieldset .slider {
  width: 36px !important;
  height: 20px !important;
}

#Adjustments fieldset .switch .slider:before,
#Adjustments fieldset .slider:before {
  height: 16px !important;
  width: 16px !important;
  left: 2px !important;
  bottom: 2px !important;
  font-size: 8px !important;
  line-height: 16px !important;
}

#Adjustments fieldset .switch input:checked + .slider:before,
#Adjustments fieldset input:checked + .slider:before {
  transform: translateX(16px) !important;
  -webkit-transform: translateX(16px) !important;
  -ms-transform: translateX(16px) !important;
  font-size: 9px !important;
  line-height: 16px !important;
}

#Adjustments fieldset .row > [class*="col-"] > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.84rem;
  line-height: 1.2;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--ep-input-border) !important;
  border-radius: var(--ep-radius-input) !important;
  min-height: calc(2.25rem + 2px);
  background: var(--ep-surface) !important;
  box-shadow: var(--ep-input-shadow);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ep-text);
  line-height: calc(2.0625rem);
  padding-left: 0.75rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ep-primary) !important;
  box-shadow: var(--ep-focus-ring);
}

.select2-dropdown {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-sm) !important;
  box-shadow: var(--ep-shadow-md);
  overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ep-primary) !important;
}

/* Flatpickr */
.flatpickr-calendar {
  border-radius: var(--ep-radius) !important;
  box-shadow: var(--ep-shadow-lg) !important;
  border: 1px solid var(--ep-border);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Tables / DataTables                                                        */
/* -------------------------------------------------------------------------- */

.table {
  color: var(--ep-text);
}

/* Soft headers — flat (no gradient / 3D); visible header only */
.dataTables_scrollHead table thead th:not(.text-white),
.dataTables_scrollHead table thead td:not(.text-white),
.dataTables_wrapper > table.table > thead > tr > th:not(.text-white),
.dataTables_wrapper > table.dataTable > thead > tr > th:not(.text-white),
.dataTables_wrapper > table.dataTable > thead > tr > td:not(.text-white),
.table-responsive > table.table > thead > tr > th:not(.text-white),
table.table:not(.dataTable) > thead > tr > th:not(.text-white) {
  background: #f4f7fb !important;
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 0.8125rem;
  border-bottom: 1px solid #e2e8f0 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  vertical-align: middle;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  box-shadow: none !important;
}

/*
 * DataTables scrollBody keeps a cloned <thead> for column width measurement.
 * Collapse vertically only — keep left/right padding (and sorting pad) so
 * header/body column widths stay in sync.
 */
div.dataTables_scrollBody > table > thead > tr {
  height: 0 !important;
  line-height: 0 !important;
}

div.dataTables_scrollBody > table > thead > tr > th,
div.dataTables_scrollBody > table > thead > tr > td {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  background: transparent !important;
  color: transparent !important;
  line-height: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  vertical-align: top !important;
}

div.dataTables_scrollBody > table > thead .dataTables_sizing,
div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep accent header cells (blue/green mode headers) — do not wash them out */
.table thead th.text-white,
table.dataTable thead th.text-white,
table.dataTable thead td.text-white,
th.text-white {
  color: #ffffff !important;
  border-bottom-color: transparent !important;
}

/* Smoother accent headers used across modals / criteria tables */
.ep-th-accent-blue,
th.ep-th-accent-blue {
  background: var(--ep-header-accent-blue) !important;
  color: #fff !important;
}

.ep-th-accent-green,
th.ep-th-accent-green {
  background: var(--ep-header-accent-green) !important;
  color: #fff !important;
}

#main-wrapper[data-logintype="temp"] .ep-th-accent-mode,
#main-wrapper[data-logintype="temp"] th.ep-th-accent-mode {
  background: var(--ep-header-accent-green) !important;
  color: #fff !important;
}

#main-wrapper:not([data-logintype="temp"]) .ep-th-accent-mode,
#main-wrapper:not([data-logintype="temp"]) th.ep-th-accent-mode {
  background: var(--ep-header-accent-blue) !important;
  color: #fff !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td,
table.dataTable.no-footer {
  border-color: var(--ep-border) !important;
}

.table-hover tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: var(--ep-primary-softer) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(15, 36, 56, 0.02);
}

table.dataTable tbody th,
table.dataTable tbody td {
  border-top-color: var(--ep-border-subtle) !important;
  color: var(--ep-text);
}

/* -------------------------------------------------------------------------- */
/* DataTables pagination / footer — shared across all tables                  */
/* -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
  padding: 0.65rem 0.15rem 0.15rem !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  line-height: 1.2 !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
  float: left !important;
  padding-right: 0.75rem !important;
}

.dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate {
  float: right !important;
  text-align: right !important;
  padding-top: 0.7rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate span .paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  margin: 0 0.15rem !important;
  padding: 0 0.7rem !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  min-width: auto;
  padding: 0 0.85rem !important;
  letter-spacing: 0.01em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled):not(.disabled *) {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  background-image: none !important;
  border-color: #e2e8f0 !important;
  color: #1e2a3a !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ep-primary, #1f6fd1) !important;
  background-color: var(--ep-primary, #1f6fd1) !important;
  background-image: none !important;
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(31, 111, 209, 0.28) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #cbd5e1 !important;
  cursor: default !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 2rem;
  color: #94a3b8 !important;
  padding: 0 0.2rem;
}

/* Bootstrap pagination (non-DataTables) — same language */
.pagination {
  gap: 0.2rem;
  margin-bottom: 0;
}

.pagination .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.7rem !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: 8px !important;
}

.pagination .page-link:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #1e2a3a !important;
}

.pagination .page-item.active .page-link {
  background: var(--ep-primary, #1f6fd1) !important;
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(31, 111, 209, 0.28) !important;
}

.pagination .page-item.disabled .page-link {
  background: transparent !important;
  border-color: transparent !important;
  color: #cbd5e1 !important;
}

.dataTables_wrapper .dataTables_filter input:not(.ep-select-listed-input),
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-sm) !important;
  padding: 0.25rem 0.5rem;
}

.dataTables_wrapper .dataTables_filter input:not(.ep-select-listed-input):focus {
  border-color: var(--ep-primary) !important;
  box-shadow: var(--ep-focus-ring);
  outline: 0;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  border-radius: 10px !important;
  padding: 0.25rem 0.5rem;
  height: 38px;
  background: #ffffff !important;
}

/*
 * Unified DataTables search — one modern field (GetSearchInput in JsHelpers).
 * No nested borders: outer shell only; icon + input + clear are flush inside.
 */
.dataTables_wrapper .dataTables_filter,
.dataTables_filter {
  float: none !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 0 0.55rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dataTables_filter > label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 0 !important; /* hide "Search:" text if present */
  color: transparent !important;
}

.ep-dt-search-wrap {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dataTables_filter .ep-dt-search,
.dataTables_filter .input-group-merge,
.dataTables_filter .input-group,
.ep-dt-search {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dataTables_filter .ep-dt-search:focus-within,
.dataTables_filter .input-group-merge:focus-within,
.dataTables_filter .input-group:focus-within,
.ep-dt-search:focus-within {
  border-color: var(--ep-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.16) !important;
}

.dataTables_filter .input-group-text,
.dataTables_filter .ep-dt-search-icon,
.dataTables_filter .ep-dt-search-clear,
.dataTables_filter .btnRemoveDataTableFilter,
.ep-dt-search .input-group-text,
.ep-dt-search .ep-dt-search-icon,
.ep-dt-search .ep-dt-search-clear,
.ep-dt-search .btnRemoveDataTableFilter,
#ClearSearchEmp {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 0.7rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  min-width: 2.25rem;
}

/* Clear must stay hidden until there is text (.d-none must win) */
.dataTables_filter .ep-dt-search-clear.d-none,
.dataTables_filter .btnRemoveDataTableFilter.d-none,
.ep-dt-search .ep-dt-search-clear.d-none,
.ep-dt-search .btnRemoveDataTableFilter.d-none,
#ClearSearchEmp.d-none,
.btnRemoveDataTableFilter.d-none,
.ep-dt-search-clear.d-none {
  display: none !important;
}

.ep-dt-search .ep-select-listed-wrap {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 0.35rem 0 0.15rem !important;
  background: transparent !important;
}

.ep-dt-search .ep-select-listed-wrap .switch {
  margin: 0 !important;
}

.ep-dt-search .ep-select-listed-input,
.dataTables_filter .ep-select-listed-input {
  position: absolute !important;
  flex: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
}

.dataTables_filter .ep-select-listed-wrap.d-none,
.ep-dt-search .ep-select-listed-wrap.d-none {
  display: none !important;
}

.dataTables_filter .ep-dt-search-icon i,
.dataTables_filter .input-group-text i.fa-search,
.dataTables_filter .input-group-text .fa-search,
.ep-dt-search .ep-dt-search-icon i,
.ep-dt-search .fa-search {
  font-size: 0.9rem !important;
  color: inherit !important;
  line-height: 1 !important;
}

/*
 * Unified search clear — always plain muted × (no circle / border / fill).
 * Covers fa-times, fa-times-circle, fa-circle-xmark leftovers.
 */
.dataTables_filter .ep-dt-search-clear,
.dataTables_filter .btnRemoveDataTableFilter,
.ep-dt-search .ep-dt-search-clear,
.ep-dt-search .btnRemoveDataTableFilter,
#ClearSearchEmp {
  width: 2.1rem !important;
  min-width: 2.1rem !important;
  height: auto !important;
  padding: 0 0.55rem !important;
}

.dataTables_filter .ep-dt-search-clear i,
.dataTables_filter .btnRemoveDataTableFilter i,
.ep-dt-search .ep-dt-search-clear i,
.ep-dt-search .btnRemoveDataTableFilter i,
#ClearSearchEmp i,
.dataTables_filter .ep-dt-search-clear .fa-times-circle,
.dataTables_filter .btnRemoveDataTableFilter .fa-times-circle,
.ep-dt-search .fa-times-circle,
.ep-dt-search .fa-circle-xmark,
#ClearSearchEmp .fa-times-circle {
  font-size: 0.9rem !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Force circle-x icons to render as plain × */
.dataTables_filter .btnRemoveDataTableFilter .fa-times-circle::before,
.dataTables_filter .ep-dt-search-clear .fa-times-circle::before,
.ep-dt-search .btnRemoveDataTableFilter .fa-times-circle::before,
.ep-dt-search .ep-dt-search-clear .fa-times-circle::before,
.ep-dt-search .fa-circle-xmark::before,
#ClearSearchEmp .fa-times-circle::before,
#ClearSearchEmp .fa-circle-xmark::before {
  content: "\f00d" !important; /* fa-times */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

.dataTables_filter .ep-dt-search-clear:hover,
.dataTables_filter .btnRemoveDataTableFilter:hover,
.ep-dt-search .ep-dt-search-clear:hover,
.ep-dt-search .btnRemoveDataTableFilter:hover,
#ClearSearchEmp:hover,
.dataTables_filter .ep-dt-search-clear:hover i,
.dataTables_filter .btnRemoveDataTableFilter:hover i,
.ep-dt-search .btnRemoveDataTableFilter:hover i,
#ClearSearchEmp:hover i {
  color: #64748b !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_filter input:not(.ep-select-listed-input),
.dataTables_filter input:not(.ep-select-listed-input),
.dataTables_filter .InputDataTableFilter,
.dataTables_filter .form-control,
.ep-dt-search input:not(.ep-select-listed-input),
.ep-dt-search .InputDataTableFilter,
.ep-dt-search .form-control,
#schedulerTableFilter {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0.35rem 0.15rem 0.35rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  color: var(--ep-text) !important;
}

.dataTables_wrapper .dataTables_filter input:not(.ep-select-listed-input):focus,
.dataTables_filter input:not(.ep-select-listed-input):focus,
.dataTables_filter .InputDataTableFilter:focus,
.dataTables_filter .form-control:focus,
.ep-dt-search input:not(.ep-select-listed-input):focus,
#schedulerTableFilter:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

.dataTables_filter input::placeholder,
.ep-dt-search input::placeholder,
#schedulerTableFilter::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

/* Hide native clear — custom .btnRemoveDataTableFilter is the only X */
.dataTables_filter input[type="search"]::-webkit-search-cancel-button,
.dataTables_filter input[type="search"]::-webkit-search-decoration,
.ep-dt-search input[type="search"]::-webkit-search-cancel-button,
.ep-dt-search input[type="search"]::-webkit-search-decoration,
input.InputDataTableFilter[type="search"]::-webkit-search-cancel-button,
input.InputDataTableFilter[type="search"]::-webkit-search-decoration,
#schedulerTableFilter::-webkit-search-cancel-button,
#schedulerTableFilter::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Extra action buttons sit OUTSIDE the search field so clear stays visible */
.ep-dt-search-row {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.ep-dt-search-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  margin: 0 !important;
  /* The filter label is font-size:0 / color:transparent to hide "Search:".
     These action icons sit inside that label, so they need their own size and color. */
  font-size: 0.875rem;
  color: #334155;
  cursor: pointer;
}

.ep-dt-search-actions.d-none,
.absoluteBtns.d-none {
  display: none !important;
}

.ep-dt-search-actions #exportBtn,
.ep-dt-search-actions #batchEmailBtn,
.ep-dt-search-actions #legendButton,
.ep-dt-search-actions #missingEmployeesBadge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* Keep danger text — outline-danger hover would go white on transparent bg */
#missingEmployeesBadge.btn-outline-danger,
#missingEmployeesBadge.btn-outline-danger:hover,
#missingEmployeesBadge.btn-outline-danger:focus,
#missingEmployeesBadge.btn-outline-danger:active {
  color: var(--ep-danger) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#missingEmployeesBadge.btn-outline-danger:hover {
  background: var(--ep-danger-soft) !important;
}

.dataTables_filter .ep-dt-search > .btn,
.dataTables_filter .input-group-merge > .btn,
.ep-dt-search > .btn {
  align-self: center;
  margin: 0 0.35rem 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ep-dt-search-actions > .btn,
.ep-dt-search-actions > .btn-default,
.ep-dt-search-actions > span.btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * Whole-table frame — radius on the OUTER shell only.
 * Do NOT overflow:hidden the whole .dataTables_scroll (breaks scrollbar
 * padding on scrollHeadInner → header/body column misalignment).
 * Single outline only (no box-shadow — reads as a second border).
 */
.dataTables_wrapper .dataTables_scroll,
.table-responsive.ReviewTable:not(:has(.dataTables_scroll)),
.table-responsive:has(> table.table.border) {
  border: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  border-radius: 10px !important;
  overflow: visible !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Card already has an outline — don't draw a second frame around the table */
.card .dataTables_wrapper .dataTables_scroll,
.card .table-responsive.ReviewTable:not(:has(.dataTables_scroll)),
.card .table-responsive:has(> table.table.border),
.card .dataTables_wrapper > table.table.border,
.modal-body .dataTables_wrapper .dataTables_scroll,
.modal-body .table-responsive:has(> table.table.border),
.modal-body .dataTables_wrapper > table.table.border {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Outer responsive must not double-frame when DT scroll already owns the chrome */
.table-responsive:has(.dataTables_scroll),
.table-responsive.ReviewTable:has(.dataTables_scroll) {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Clip only the header/body ends so the frame looks rounded without breaking widths */
.dataTables_wrapper .dataTables_scroll > .dataTables_scrollHead {
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}

.card .dataTables_wrapper .dataTables_scroll > .dataTables_scrollHead,
.card .dataTables_wrapper .dataTables_scroll > .dataTables_scrollBody {
  border-radius: 0 !important;
}

.dataTables_wrapper .dataTables_scroll > .dataTables_scrollBody {
  border-radius: 0 0 10px 10px !important;
}

/* Inner tables: no own radius / outer border (shell owns the chrome) */
.dataTables_wrapper table.table.border,
table.table.border.text-inputs-searching,
.table-responsive > table.table.border,
.modal .dataTables_wrapper table.table.border,
.modal table.table.border.text-inputs-searching,
.modal .table-responsive > table.table.border,
.dataTables_scrollHead table,
.dataTables_scrollBody table {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Non-scroll DataTables / plain bordered tables (single table node) */
.dataTables_wrapper > table.table.border {
  border: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #ffffff;
  box-shadow: none !important;
}

/* Avoid double frame when already inside a rounded shell or card */
.table-responsive.ReviewTable > .dataTables_wrapper > table.table.border,
.table-responsive:has(> .dataTables_wrapper) .dataTables_wrapper > table.table.border,
.dataTables_wrapper .dataTables_scroll table.table.border,
.card .dataTables_wrapper > table.table.border {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.dataTables_wrapper table.table.border th,
.dataTables_wrapper table.table.border td,
table.table.border.text-inputs-searching th,
table.table.border.text-inputs-searching td,
.modal .dataTables_wrapper table.table.border th,
.modal .dataTables_wrapper table.table.border td,
.modal table.table.border.text-inputs-searching th,
.modal table.table.border.text-inputs-searching td {
  border-color: #e8eef4 !important;
}

/* One seam under header (avoid thead bottom + first-row top stacking) */
.dataTables_scrollHead table thead th,
.dataTables_scrollHead table thead td,
.dataTables_wrapper > table.table > thead > tr > th,
.dataTables_wrapper > table.dataTable > thead > tr > th {
  border-bottom: 1px solid #e2e8f0 !important;
}

.dataTables_scrollBody table.dataTable tbody tr:first-child > th,
.dataTables_scrollBody table.dataTable tbody tr:first-child > td,
.dataTables_wrapper > table.dataTable tbody tr:first-child > th,
.dataTables_wrapper > table.dataTable tbody tr:first-child > td,
.dataTables_wrapper > table.table tbody tr:first-child > th,
.dataTables_wrapper > table.table tbody tr:first-child > td {
  border-top: 0 !important;
}

/* Keep thead/body pieces square so they join; shell provides the curve */
table.dataTable,
table.dataTable thead,
table.dataTable thead tr,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody td,
.dataTables_scrollHeadInner,
.dataTables_scrollHead table,
.dataTables_scrollBody table {
  border-radius: 0 !important;
}

table.dataTable thead th:first-child,
table.dataTable thead th:last-child,
table.dataTable thead td:first-child,
table.dataTable thead td:last-child,
.dataTables_scrollHead thead th:first-child,
.dataTables_scrollHead thead th:last-child {
  border-radius: 0 !important;
}

.dataTables_scrollHead {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.dataTables_scrollBody {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* 1. Remove DT default dark bottom rule on scrolled tables */
.dataTables_wrapper.no-footer .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollBody {
  border-bottom: 0 !important;
}

/* Collapse the 1px seam between DT scrollHead clone and body */
.dataTables_scrollHead table.dataTable,
.dataTables_scrollHead table {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.dataTables_scrollBody table.dataTable,
.dataTables_scrollBody table {
  border-top: 0 !important;
  margin-top: 0 !important;
}

table.dataTable thead th,
table.dataTable thead td {
  border-top: 0 !important;
}

/*
 * 2. Keep header / body column widths aligned across all scrolled DataTables.
 * Same box model + shared horizontal padding; preserve DT sorting pad on thead.
 */
div.dataTables_scrollHead table.dataTable,
div.dataTables_scrollBody table.dataTable {
  border-collapse: collapse !important;
  margin: 0 !important;
}

div.dataTables_scrollHead table.dataTable thead > tr > th,
div.dataTables_scrollHead table.dataTable thead > tr > td,
div.dataTables_scrollBody table.dataTable tbody > tr > th,
div.dataTables_scrollBody table.dataTable tbody > tr > td,
div.dataTables_scrollBody table.dataTable thead > tr > th,
div.dataTables_scrollBody table.dataTable thead > tr > td {
  box-sizing: border-box !important;
}

div.dataTables_scrollHead table.dataTable thead > tr > th,
div.dataTables_scrollBody table.dataTable tbody > tr > td {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* Sorting columns need the extra right pad on BOTH the visible header and the sizing thead */
div.dataTables_scrollHead table.dataTable thead > tr > th.sorting,
div.dataTables_scrollHead table.dataTable thead > tr > th.sorting_asc,
div.dataTables_scrollHead table.dataTable thead > tr > th.sorting_desc,
div.dataTables_scrollHead table.dataTable thead > tr > td.sorting,
div.dataTables_scrollHead table.dataTable thead > tr > td.sorting_asc,
div.dataTables_scrollHead table.dataTable thead > tr > td.sorting_desc,
div.dataTables_scrollBody table.dataTable thead > tr > th.sorting,
div.dataTables_scrollBody table.dataTable thead > tr > th.sorting_asc,
div.dataTables_scrollBody table.dataTable thead > tr > th.sorting_desc,
div.dataTables_scrollBody table.dataTable thead > tr > td.sorting,
div.dataTables_scrollBody table.dataTable thead > tr > td.sorting_asc,
div.dataTables_scrollBody table.dataTable thead > tr > td.sorting_desc {
  padding-right: 30px !important;
}

div.dt-buttons .dt-button,
.dt-button {
  background: var(--ep-surface) !important;
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-sm) !important;
  color: var(--ep-text-secondary) !important;
  box-shadow: var(--ep-shadow-xs);
}

div.dt-buttons .dt-button:hover {
  background: var(--ep-surface-muted) !important;
  color: var(--ep-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Reports modal — modern treeview                                            */
/* -------------------------------------------------------------------------- */

#BigActualPrintModal .ep-report-tree-panel {
  margin: 0;
  padding: 0.3rem 0.2rem 0.25rem;
  border: 1px solid var(--ep-border-subtle, #e8eef4);
  border-radius: var(--ep-radius, 12px);
  background: var(--ep-surface-muted, #f5f8fb);
  min-height: 0;
}

#BigActualPrintModal .ep-report-tree-panel > legend {
  width: auto;
  max-width: calc(100% - 1rem);
  margin: 0 0 0 0.15rem;
  padding: 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ep-text-muted, #8494a7);
  border: 0;
  background: transparent;
}

#ActualTreeView.ep-report-tree,
#ActualTreeView.ep-report-tree.treeview {
  background: transparent !important;
  border: 0 !important;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  overflow-x: auto;
  padding: 0.05rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 36, 56, 0.2) transparent;
}

#ActualTreeView.ep-report-tree .list-group {
  margin: 0;
  border: 0;
  background: transparent;
}

#ActualTreeView.ep-report-tree .list-group-item,
#ActualTreeView.ep-report-tree .node-ActualTreeView {
  display: flex !important;
  align-items: center;
  gap: 0;
  margin: 0.02rem 0 !important;
  padding: 0.18rem 0.2rem !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ep-text, #1e2a3a) !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Folder / category rows */
#ActualTreeView.ep-report-tree .list-group-item[data-customvalue="parent"] {
  font-weight: 600;
  color: var(--ep-text, #1e2a3a) !important;
}

#ActualTreeView.ep-report-tree .list-group-item:hover,
#ActualTreeView.ep-report-tree .list-group-item:focus {
  background: var(--ep-primary-softer, rgba(31, 111, 209, 0.06)) !important;
  color: var(--ep-text, #1e2a3a) !important;
}

#ActualTreeView.ep-report-tree .list-group-item.node-selected,
#ActualTreeView.ep-report-tree .list-group-item.node-selected:hover,
#ActualTreeView.ep-report-tree .list-group-item.node-selected:focus {
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12)) !important;
  color: var(--ep-primary, #1f6fd1) !important;
  font-weight: 600;
}

#ActualTreeView.ep-report-tree .list-group-item.node-selected .icon {
  color: var(--ep-primary, #1f6fd1) !important;
}

#ActualTreeView.ep-report-tree span.indent {
  margin-left: 0.12rem !important;
  margin-right: 0 !important;
  width: 0.35rem !important;
  min-width: 0.35rem !important;
  display: inline-block;
}

#ActualTreeView.ep-report-tree span.icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 0.85rem !important;
  min-width: 0.85rem;
  margin-right: 0.12rem !important;
  font-size: 0.68rem;
  color: var(--ep-text-muted, #8494a7);
}

#ActualTreeView.ep-report-tree span.icon.fa-chevron-right,
#ActualTreeView.ep-report-tree span.icon.fa-chevron-down,
#ActualTreeView.ep-report-tree span.icon.fas.fa-chevron-right,
#ActualTreeView.ep-report-tree span.icon.fas.fa-chevron-down {
  color: var(--ep-text-muted, #8494a7);
  font-size: 0.55rem;
  width: 0.7rem !important;
  min-width: 0.7rem;
}

#ActualTreeView.ep-report-tree span.icon.fa-folder,
#ActualTreeView.ep-report-tree span.icon.fas.fa-folder {
  color: var(--ep-warning, #f0a84a) !important;
  font-size: 0.75rem;
}

#ActualTreeView.ep-report-tree span.icon.fa-print,
#ActualTreeView.ep-report-tree span.icon.fas.fa-print {
  color: var(--ep-primary, #1f6fd1) !important;
  font-size: 0.7rem;
}

#ActualTreeView.ep-report-tree .node-disabled {
  display: none !important;
}

/* Smart Copy map — same tree as Reports, beside the destination table */
#SmartCopyModal .ep-report-tree-panel {
  margin: 0;
  padding: 0.3rem 0.2rem 0.25rem;
  border: 1px solid var(--ep-border-subtle, #e8eef4);
  border-radius: var(--ep-radius, 12px);
  background: var(--ep-surface-muted, #f5f8fb);
  min-height: 0;
  max-height: 40vh;
  overflow: auto;
}

#SmartCopyMapTree.ep-report-tree,
#SmartCopyMapTree.ep-report-tree.treeview {
  background: transparent !important;
  border: 0 !important;
  max-height: none;
  overflow: visible;
  padding: 0.05rem;
}

#SmartCopyMapTree.ep-report-tree .list-group {
  margin: 0;
  border: 0;
  background: transparent;
}

#SmartCopyMapTree.ep-report-tree .list-group-item,
#SmartCopyMapTree.ep-report-tree .node-SmartCopyMapTree {
  display: flex !important;
  align-items: center;
  margin: 0.02rem 0 !important;
  padding: 0.22rem 0.25rem !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ep-text, #1e2a3a) !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none !important;
}

#SmartCopyMapTree.ep-report-tree .list-group-item[data-customvalue="parent"] {
  font-weight: 600;
}

#SmartCopyMapTree.ep-report-tree .list-group-item:hover,
#SmartCopyMapTree.ep-report-tree .list-group-item:focus {
  background: var(--ep-primary-softer, rgba(31, 111, 209, 0.06)) !important;
  color: var(--ep-text, #1e2a3a) !important;
}

#SmartCopyMapTree.ep-report-tree .list-group-item[data-customvalue^="bad"],
#SmartCopyMapTree.ep-report-tree .list-group-item[data-customvalue^="bad"]:hover,
#SmartCopyMapTree.ep-report-tree .list-group-item[data-customvalue^="bad"] span.icon {
  color: var(--ep-danger, #e85a5a) !important;
  font-weight: 600;
}

#SmartCopyMapTree.ep-report-tree span.indent {
  margin-left: 0.12rem !important;
  margin-right: 0 !important;
  width: 0.35rem !important;
  min-width: 0.35rem !important;
  display: inline-block;
}

#SmartCopyMapTree.ep-report-tree span.icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 0.85rem !important;
  min-width: 0.85rem;
  margin-right: 0.2rem !important;
  font-size: 0.72rem;
  color: var(--ep-text-muted, #8494a7);
}

#SmartCopyMapTree.ep-report-tree span.icon.fa-chevron-right,
#SmartCopyMapTree.ep-report-tree span.icon.fa-chevron-down,
#SmartCopyMapTree.ep-report-tree span.icon.fas.fa-chevron-right,
#SmartCopyMapTree.ep-report-tree span.icon.fas.fa-chevron-down {
  color: var(--ep-text-muted, #8494a7);
  font-size: 0.55rem;
  width: 0.7rem !important;
  min-width: 0.7rem;
}

#SmartCopyMapTree.ep-report-tree span.icon.fa-folder,
#SmartCopyMapTree.ep-report-tree span.icon.fas.fa-folder {
  color: var(--ep-warning, #f0a84a) !important;
  font-size: 0.75rem;
}

/* Report viewer toolbar (#ShowReport) */
#ShowReport .ep-report-modal-header .ep-report-header-actions {
  gap: 0.15rem;
  flex-wrap: wrap;
  min-height: 0;
}

/* Express: Excel/Word/Email live in the viewer settings (⋮) menu — hide empty modal slot */
body.ep-pdf-express-on #ShowReport #epReportHeaderActionsSlot {
  display: none !important;
}

body.ep-pdf-express-on #ShowReport #epReportToolbarActionsSlot,
body.ep-pdf-express-on #ShowReport .ep-report-export-bar,
body.ep-pdf-mozilla-on #ShowReport #epReportToolbarActionsSlot,
body.ep-pdf-mozilla-on #ShowReport .ep-report-export-bar {
  display: none !important;
}

#ShowReport .ep-report-header-actions:empty {
  display: none !important;
}

#ShowReport .ep-report-export-actions {
  gap: 0.15rem;
}

#ShowReport .ep-report-header-actions > .btn,
#ShowReport .ep-report-export-actions > .btn {
  min-width: 36px;
  padding: 0.25rem 0.4rem !important;
}

#ShowReport .ep-pdf-express-host,
#ShowReport .ep-pdf-mozilla-host {
  display: none;
  width: 100%;
  height: min(75vh, 720px);
  min-height: 420px;
}

#ShowReport .ep-pdf-mozilla-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.ep-pdf-express-on #ShowReport .ep-pdf-express-host {
  display: block !important;
}

#ShowReport .ep-report-html-host {
  display: none;
  width: 100%;
  height: min(75vh, 720px);
  min-height: 420px;
  border: 0;
  background: #fff;
}

body.ep-report-html-on #ShowReport .ep-report-html-host {
  display: block !important;
}

body.ep-report-html-on #ShowReport .ep-pdf-express-host,
body.ep-report-html-on #ShowReport .ep-pdf-mozilla-host {
  display: none !important;
}

body.ep-pdf-mozilla-on #ShowReport .ep-pdf-mozilla-host {
  display: block !important;
}

body.ep-pdf-express-on #ShowReport #pdfControls1,
body.ep-pdf-mozilla-on #ShowReport #pdfControls1 {
  border: 0 !important;
}

#ShowReport .ep-report-toolbar {
  min-height: 52px;
}

#ShowReport .ep-report-toolbar__actions {
  min-height: 40px;
}

#ShowReport .ep-report-toolbar__actions > .btn:not(.d-none) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
}

#ShowReport .ep-report-toolbar__actions > .btn.d-none {
  display: none !important;
}

#ShowReport .ep-report-zoom {
  display: inline-flex !important;
  vertical-align: middle;
  gap: 0 !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 !important;
  padding: 0.35rem 0.75rem !important;
  background: #fff !important;
  border: 1px solid var(--ep-border, #d7e0ea) !important;
  border-radius: var(--ep-radius-sm, 8px) !important;
  color: var(--ep-text, #1e2a3a) !important;
  box-shadow: none !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn i {
  color: var(--ep-primary, #1f6fd1) !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn .ep-report-zoom__caret {
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-size: 0.7rem !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn:hover,
#ShowReport .ep-report-zoom > .ep-report-zoom__btn:focus,
#ShowReport .ep-report-zoom > .ep-report-zoom__btn:active {
  background: #f5f8fb !important;
  border-color: rgba(31, 111, 209, 0.35) !important;
  color: var(--ep-text, #1e2a3a) !important;
  box-shadow: none !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn:hover i,
#ShowReport .ep-report-zoom > .ep-report-zoom__btn:focus i {
  color: var(--ep-primary, #1f6fd1) !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn:hover .ep-report-zoom__caret,
#ShowReport .ep-report-zoom > .ep-report-zoom__btn:focus .ep-report-zoom__caret {
  color: var(--ep-text-secondary, #5a6b7d) !important;
}

#ShowReport .ep-report-zoom > .ep-report-zoom__btn::after {
  display: none !important;
  content: none !important;
}

/* -------------------------------------------------------------------------- */
/* Modals, dropdowns, alerts                                                  */
/* -------------------------------------------------------------------------- */

.modal-content {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-lg) !important;
  box-shadow: var(--ep-shadow-lg) !important;
  overflow: hidden;
}

/* Select Jobs/Phases — keep selected label left-aligned, vertically centered */
.ep-jobphase-selected {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 2rem;
  text-align: left;
}

.ep-jobphase-selected__label {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  font-weight: 600;
  color: var(--ep-primary, #3c9cf2) !important;
}

.ep-jobphase-selected__label #clearJobs,
.ep-jobphase-selected__label #clearPhases {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.35rem !important;
}

/*
 * Unified modal header — icon chip + title (+ optional subtitle) + tools + close.
 * Compatible with headers that also carry filters / search / extra actions.
 */
.modal-header,
.modal-header.ep-modal-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  color: var(--ep-text);
}

.modal-header .ep-modal-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary);
  box-shadow: none;
}

.modal-header .ep-modal-icon i,
.modal-header .ep-modal-icon .fas,
.modal-header .ep-modal-icon .fa,
.modal-header .ep-modal-icon .far {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
}

.modal-header .ep-modal-heading {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.modal-header .ep-modal-heading .modal-title,
.modal-header .ep-modal-title-text {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100%;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  color: var(--ep-text) !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* One icon only — hide raw title icons; chip (.ep-modal-icon) stays */
.modal-header.ep-modal-header .ep-modal-heading > i,
.modal-header.ep-modal-header .ep-modal-heading .modal-title > i,
.modal-header.ep-modal-header .ep-modal-title-text > i,
.modal-header.ep-modal-header .ep-modal-heading i.fa,
.modal-header.ep-modal-header .ep-modal-heading i.fas,
.modal-header.ep-modal-header .ep-modal-heading i.far,
.modal-header.ep-modal-header .ep-modal-heading i.fal,
.modal-header.ep-modal-header .ep-modal-heading i.fab,
.modal-header.ep-modal-header .ep-modal-heading i.fa-solid,
.modal-header.ep-modal-header .ep-modal-heading i.fa-regular,
.modal-header.ep-modal-header .ep-modal-heading span.fa,
.modal-header.ep-modal-header .ep-modal-heading span.fas,
.modal-header.ep-modal-header .ep-modal-heading span.far,
.modal-header.ep-modal-header .ep-modal-heading span.fa-solid,
.modal-header.ep-modal-header .ep-modal-heading span.fa-regular,
.modal-header.ep-modal-header .ep-modal-title-text > span.fas,
.modal-header.ep-modal-header .ep-modal-title-text > span.fa,
.modal-header.ep-modal-header .ep-modal-title-text > span.far {
  display: none !important;
}

/* Legacy titles before enhance — keep readable */
.modal-header > .modal-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ep-text) !important;
}

.modal-header .ep-modal-subtitle {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ep-text-muted, #8494a7);
}

.modal-header .ep-modal-subtitle:empty {
  display: none !important;
}

/* Extra header controls (search, filters, etc.) — grow between title and close */
.modal-header .ep-modal-tools {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.modal-header .ep-modal-tools .row {
  width: 100%;
  margin: 0 !important;
}

.modal-header .ep-modal-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

#DepartmentsModalForOptions .modal-header .ep-modal-actions .toggle,
#DepartmentsModalForOptions .modal-header .ep-modal-header-tools .toggle {
  margin: 0 !important;
}

.modal-header .close,
.modal-header .ep-modal-actions .close {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d0d7de !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #64748b !important;
  opacity: 1 !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  float: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.modal-header .close:hover,
.modal-header .close:focus,
.modal-header .ep-modal-actions .close:hover,
.modal-header .ep-modal-actions .close:focus {
  background: rgba(220, 53, 69, 0.08) !important;
  border-color: #f1aeb5 !important;
  color: #dc3545 !important;
  opacity: 1 !important;
  outline: 0;
  box-shadow: none !important;
}

.modal-header .close span {
  line-height: 1;
  color: inherit;
}

.modal-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  padding: 0.55rem 0.85rem !important;
}

.modal-backdrop.show {
  opacity: 0.45;
  animation: ep-modal-backdrop-in 0.16s linear;
}

/*
 * Soft entrance for the ~95 modals whose markup never carried Bootstrap's `fade`
 * (grid pickers for job, phase, cost code, positions, employees, and the rest), so
 * they snapped into place against a heavy shadow and 16px radius. Driven off the
 * `.show` class instead of adding `fade`: Bootstrap only defers `shown.bs.modal`
 * until after a transition when `fade` is present, and a lot of callers open a modal
 * and immediately size a DataTable inside it.
 *
 * No fill-mode: once it finishes the animation stops contributing entirely, so the
 * dialog is not left as a containing block for fixed-positioned children and nothing
 * here can outrank a transform set later from script.
 */
.modal.show .modal-dialog {
  animation: ep-modal-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.modal.fade.show .modal-dialog {
  animation: none;
}

@keyframes ep-modal-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ep-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.show .modal-dialog,
  .modal-backdrop.show {
    animation: none;
  }
}

.dropdown-menu {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius) !important;
  box-shadow: var(--ep-shadow-md) !important;
  padding: 0.35rem;
}

.dropdown-item {
  border-radius: var(--ep-radius-sm);
  color: var(--ep-text-secondary);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ep-primary-softer) !important;
  color: var(--ep-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--ep-primary) !important;
  color: var(--ep-text-on-accent) !important;
}

.alert {
  border-radius: var(--ep-radius-sm) !important;
  border-width: 1px;
}

.alert-info {
  background: var(--ep-primary-soft);
  border-color: rgba(31, 111, 209, 0.25);
  color: #0d6a8f;
}

.alert-success {
  background: var(--ep-success-soft);
  border-color: rgba(34, 181, 115, 0.25);
  color: #146b45;
}

.alert-warning,
.alert-warnings {
  background: var(--ep-warning-soft) !important;
  border-color: #ffeed6 !important;
  color: #856539 !important;
}

.alert-danger {
  background: var(--ep-danger-soft);
  border-color: rgba(232, 90, 90, 0.25);
  color: #9b2c2c;
}

.badge-info,
.badge-primary {
  background: var(--ep-primary) !important;
}

.badge-success {
  background: var(--ep-success) !important;
}

.nav-tabs {
  border-bottom-color: var(--ep-border);
}

.nav-tabs .nav-link {
  border-radius: var(--ep-radius-sm) var(--ep-radius-sm) 0 0;
  color: var(--ep-text-secondary);
  font-weight: 500;
}

.nav-tabs .nav-link:hover {
  border-color: var(--ep-border-subtle) var(--ep-border-subtle) var(--ep-border);
  color: var(--ep-primary);
}

.nav-tabs .nav-link.active {
  color: var(--ep-primary) !important;
  background: var(--ep-surface) !important;
  border-color: var(--ep-border) var(--ep-border) var(--ep-surface) !important;
  box-shadow: inset 0 -2px 0 var(--ep-primary);
}

.nav-pills .nav-link.active {
  background: var(--ep-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Scrollbars, tooltips, SweetAlert2, context menu                            */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Criteria summary table: tiny scrollbar (must beat global rule above) */
.left-sidebar .ep-criteria-summary .dataTables_scrollBody::-webkit-scrollbar,
.left-sidebar .ep-criteria-summary .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar,
.left-sidebar #Headertable_wrapper .dataTables_scrollBody::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody::-webkit-scrollbar-track,
.left-sidebar #Headertable_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
  background: transparent !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody::-webkit-scrollbar-thumb,
.left-sidebar #Headertable_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: rgba(15, 36, 56, 0.35) !important;
  border-radius: 999px !important;
  border: 0 !important;
}

.left-sidebar .ep-criteria-summary .dataTables_scrollBody,
.left-sidebar #Headertable_wrapper .dataTables_scrollBody {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 36, 56, 0.35) transparent !important;
}

::-webkit-scrollbar-track {
  background: var(--ep-surface-muted);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #a8b4c4 !important;
  border-radius: 8px !important;
  border: 2px solid var(--ep-surface-muted);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8494a7 !important;
}

.tooltip-inner {
  background: #1e2a3a;
  border-radius: var(--ep-radius-sm);
  box-shadow: var(--ep-shadow-sm);
  font-size: 0.75rem;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #1e2a3a;
}

.swal2-popup {
  width: 28em !important;
  max-width: calc(100vw - 2rem) !important;
  padding: 2.15rem 1.75rem 1.65rem !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 48px rgba(15, 36, 56, 0.18) !important;
  font-family: var(--ep-font) !important;
  background: #ffffff !important;
}

/* No backdrop-filter: blurring a full-viewport layer forces the whole page to be
   rasterized the instant a dialog opens, which is the hitch before every alert. The
   tint alone separates the dialog from the page. */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(15, 36, 56, 0.45) !important;
}

/* Modal icons — do not override width/height/border-width (breaks error X / success check geometry).
   Toast icons keep their own smaller rules below. */
.swal2-popup:not(.swal2-toast) .swal2-icon {
  margin: 0.15rem auto 1.05rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-icon-content {
  font-weight: 700 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning {
  border-color: var(--ep-warning, #f0a84a) !important;
  color: var(--ep-warning, #f0a84a) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
  border-color: var(--ep-danger, #e85a5a) !important;
  color: var(--ep-danger, #e85a5a) !important;
}

/* Error X lines — match brand danger; keep Swal geometry intact */
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^="swal2-x-mark-line"],
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: var(--ep-danger, #e85a5a) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
  border-color: var(--ep-success, #22b573) !important;
  color: var(--ep-success, #22b573) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^="swal2-success-line"],
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-long,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--ep-success, #22b573) !important;
  background-color: var(--ep-success, #22b573) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring {
  background-color: transparent !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question {
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

/* -------------------------------------------------------------------------- */
/* SweetAlert2 TOAST only — leave confirm/modal dialogs unchanged             */
/* -------------------------------------------------------------------------- */
.swal2-container:has(> .swal2-toast),
.swal2-container.swal2-top-end:has(.swal2-toast),
.swal2-container.swal2-top:has(.swal2-toast) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0.75rem !important;
}

.swal2-popup.swal2-toast {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(360px, calc(100vw - 1.5rem)) !important;
  padding: 0.7rem 1rem !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 36, 56, 0.16) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.swal2-popup.swal2-toast .swal2-icon {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  margin: 0 !important;
  border-width: 0.15em !important;
  flex-shrink: 0 !important;
  box-sizing: content-box !important;
}

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.swal2-popup.swal2-toast .swal2-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  color: var(--ep-text, #1e2a3a) !important;
  flex: 1 1 auto;
  min-width: 0;
}

.swal2-popup.swal2-toast .swal2-html-container,
.swal2-popup.swal2-toast .swal2-html-container#swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: left !important;
}

.swal2-popup.swal2-toast .swal2-actions {
  margin: 0 !important;
  gap: 0.35rem !important;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  background: rgba(31, 111, 209, 0.45);
}

.swal2-title {
  margin: 0 0 0.55rem !important;
  padding: 0 0.5rem !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ep-text, #1e2a3a) !important;
  letter-spacing: -0.015em;
}

.swal2-html-container,
.swal2-html-container#swal2-html-container {
  margin: 0 auto 1.35rem !important;
  padding: 0 0.65rem !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  max-height: 70vh;
  overflow-y: auto !important;
}

.swal2-actions {
  margin: 0.15rem 0 0 !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.swal2-styled,
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  margin: 0 !important;
  padding: 0.7rem 1.35rem !important;
  min-height: 2.65rem;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  /* Do NOT force display — Swal hides unused Deny/Cancel with inline display:none.
     display:inline-flex !important was forcing OK + No + Cancel on every modal. */
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
}

/* Flex layout only for buttons Swal has shown (modals only — never toast) */
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled:not([style*="display: none"]),
.swal2-popup:not(.swal2-toast) .swal2-actions .btn:not([style*="display: none"]) {
  display: inline-flex !important;
}

.swal2-styled:focus {
  box-shadow: var(--ep-focus-ring) !important;
}

.swal2-styled i,
.swal2-styled .fas,
.swal2-styled .fa {
  font-size: 0.95em;
  line-height: 1;
}

/* Single-action (OK) — primary */
.swal2-styled.swal2-confirm {
  background: var(--ep-primary, #1f6fd1) !important;
  background-color: var(--ep-primary, #1f6fd1) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(31, 111, 209, 0.28) !important;
}

.swal2-styled.swal2-confirm:hover {
  background: var(--ep-primary-hover, #1859ad) !important;
  background-color: var(--ep-primary-hover, #1859ad) !important;
}

/* Confirmation (has visible Cancel) — danger only when confirm is explicitly destructive */
.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-styled.swal2-confirm.btn-danger,
.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-styled.swal2-confirm:not(.btn-success):not(.btn-primary):not(.btn-info) {
  background: var(--ep-danger, #e85a5a) !important;
  background-color: var(--ep-danger, #e85a5a) !important;
  box-shadow: 0 8px 18px rgba(232, 90, 90, 0.32) !important;
}

.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-styled.swal2-confirm.btn-danger:hover,
.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-styled.swal2-confirm:not(.btn-success):not(.btn-primary):not(.btn-info):hover {
  background: #d94848 !important;
  background-color: #d94848 !important;
}

.swal2-styled.swal2-cancel {
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  border: 1px solid #d8dee6 !important;
  box-shadow: none !important;
  color: #5a6575 !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.35rem !important;
}

.swal2-styled.swal2-cancel:hover {
  background: #e6eaef !important;
  background-color: #e6eaef !important;
  border-color: #cfd6df !important;
  color: #3f4a5a !important;
  text-decoration: none !important;
}

.swal2-styled.swal2-cancel:focus {
  box-shadow: 0 0 0 3px rgba(90, 101, 117, 0.18) !important;
}

.swal2-styled.swal2-cancel i,
.swal2-styled.swal2-cancel .fas,
.swal2-styled.swal2-cancel .fa {
  color: #5a6575 !important;
  font-size: 1.05em;
}

.swal2-styled.swal2-deny {
  background: var(--ep-warning-soft, #fff6e8) !important;
  border: 1px solid rgba(240, 168, 74, 0.45) !important;
  color: #856539 !important;
}

/* Also restyle confirmations that use buttonsStyling:false + Bootstrap btn classes */
.swal2-popup:not(.swal2-toast) .swal2-actions .btn,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel {
  margin: 0 !important;
  padding: 0.7rem 1.35rem !important;
  min-height: 2.65rem;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: none !important;
}

.swal2-actions .btn-danger,
.swal2-actions .btn.btn-danger,
.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm.btn-danger,
.swal2-actions:has(.btn-secondary:not([style*="display: none"])) .btn-danger,
.swal2-actions:has(.btn-secondary:not([style*="display: none"])) .swal2-confirm.btn-danger {
  background: var(--ep-danger, #e85a5a) !important;
  background-color: var(--ep-danger, #e85a5a) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(232, 90, 90, 0.32) !important;
}

.swal2-actions .btn-danger:hover,
.swal2-actions .btn.btn-danger:hover,
.swal2-actions .swal2-confirm.btn-danger:hover {
  background: #d94848 !important;
  background-color: #d94848 !important;
  color: #fff !important;
}

/* Save / affirmative confirms — success green (not danger) */
.swal2-actions .btn-success,
.swal2-actions .btn.btn-success,
.swal2-actions .swal2-confirm.btn-success,
.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm.btn-success,
.swal2-actions:has(.btn-secondary:not([style*="display: none"])) .swal2-confirm.btn-success {
  background: var(--ep-success, #22b573) !important;
  background-color: var(--ep-success, #22b573) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(34, 181, 115, 0.28) !important;
}

.swal2-actions .btn-success:hover,
.swal2-actions .btn.btn-success:hover,
.swal2-actions .swal2-confirm.btn-success:hover,
.swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm.btn-success:hover {
  background: #1c9c64 !important;
  background-color: #1c9c64 !important;
  color: #fff !important;
}

.swal2-actions .btn-secondary,
.swal2-actions .btn.btn-secondary,
.swal2-actions .btn-default,
.swal2-actions .swal2-cancel,
.swal2-actions .swal2-styled.swal2-cancel,
.swal2-container .swal2-actions button.swal2-cancel,
.swal2-container .swal2-actions button.btn.btn-secondary.swal2-cancel,
.swal2-container button.swal2-cancel.btn.btn-secondary {
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  border: 1px solid #d8dee6 !important;
  color: #5a6575 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.35rem !important;
  font-weight: 600 !important;
}

.swal2-actions .btn-secondary:hover,
.swal2-actions .btn.btn-secondary:hover,
.swal2-actions .swal2-cancel:hover,
.swal2-actions .swal2-styled.swal2-cancel:hover,
.swal2-container .swal2-actions button.swal2-cancel:hover,
.swal2-container button.swal2-cancel.btn.btn-secondary:hover {
  background: #e6eaef !important;
  background-color: #e6eaef !important;
  border-color: #cfd6df !important;
  color: #3f4a5a !important;
  box-shadow: none !important;
}

.swal2-actions .swal2-cancel i,
.swal2-actions .btn-secondary i,
.swal2-container button.swal2-cancel i {
  color: #5a6575 !important;
}

.swal2-actions .btn-primary:not(.btn-danger) {
  background: var(--ep-primary, #1f6fd1) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(31, 111, 209, 0.28) !important;
}

.context-menu-list {
  border-radius: var(--ep-radius) !important;
  box-shadow: var(--ep-shadow-md) !important;
  border: 1px solid var(--ep-border) !important;
  padding: 0.25rem !important;
}

.context-menu-item {
  border-radius: var(--ep-radius-sm) !important;
}

.context-menu-item.hover,
.context-menu-item:hover {
  background: var(--ep-primary-soft) !important;
  color: var(--ep-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Loader / help / misc chrome                                                */
/* -------------------------------------------------------------------------- */

.custom-loader {
  background: radial-gradient(farthest-side, var(--ep-primary) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--ep-primary)) !important;
}

.help-button .btn {
  background-color: rgba(90, 120, 150, 0.65) !important;
  border-radius: 10px 0 0 10px !important;
  box-shadow: var(--ep-shadow-sm) !important;
}

.help-button .btn:hover {
  background-color: rgba(90, 120, 150, 0.9) !important;
}

/* -------------------------------------------------------------------------- */
/* System loading — compact modern spinner card + blurred overlay             */
/* -------------------------------------------------------------------------- */

.ep-loader {
  --ep-loader-size: 1.75rem;
  --ep-loader-thickness: 2.5px;
  --ep-loader-color: var(--ep-primary, #1f6fd1);
  width: var(--ep-loader-size);
  height: var(--ep-loader-size);
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--ep-loader-color) 94%, transparent) top / var(--ep-loader-thickness) var(--ep-loader-thickness) no-repeat,
    conic-gradient(transparent 18%, var(--ep-loader-color));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ep-loader-thickness)), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ep-loader-thickness)), #000 0);
  animation: ep-loader-spin 0.75s linear infinite;
  flex: 0 0 auto;
}

.ep-loader--lg {
  --ep-loader-size: 2.25rem;
  --ep-loader-thickness: 3px;
}

#main-wrapper[data-logintype="temp"] .ep-loader,
#main-wrapper[data-logintype="temp"] .ep-page-overlay .ep-loader {
  --ep-loader-color: var(--ep-temp-login, #22b573);
}

@keyframes ep-loader-spin {
  to { transform: rotate(1turn); }
}

#PageOverlay.ep-page-overlay:not(.d-none),
#PageOverlay:not(.d-none) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 200000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 1rem !important;
  /* Flat scrim, no backdrop-filter: this overlay is toggled on every AJAX call and
     blurring a full-viewport layer forces a repaint of the whole grid behind it. */
  background: rgba(15, 36, 56, 0.35) !important;
  cursor: wait !important;
  animation: ep-overlay-in 0.16s ease both;
}

#PageOverlay.d-none {
  display: none !important;
  animation: none !important;
}

@keyframes ep-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ep-overlay-card-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#PageOverlay .ep-page-overlay__card,
#PageOverlay .OverLayLoadingDiv {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(12rem, calc(100vw - 2rem));
  margin: 0 !important;
  padding: 0.85rem 1.15rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(215, 224, 234, 0.9);
  background: #ffffff !important;
  box-shadow:
    0 10px 28px rgba(15, 36, 56, 0.14),
    0 1px 2px rgba(15, 36, 56, 0.06) !important;
  color: var(--ep-text, #1e2a3a) !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: ep-overlay-card-in 0.2s ease both;
}

#PageOverlay #txtProcess,
#PageOverlay .ep-page-overlay__text {
  display: block;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  white-space: nowrap;
}

.preloader {
  /* Disabled — use #PageOverlay (loader + text) only */
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.borderLine {
  border-color: var(--ep-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Login — SaaS split-panel                                                   */
/* -------------------------------------------------------------------------- */

.ep-login-page {
  min-height: 100vh;
  font-family: var(--ep-font) !important;
}

.ep-login-shell.auth-wrapper {
  display: grid !important;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1.05fr);
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 111, 209, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(15, 36, 56, 0.08), transparent 50%),
    linear-gradient(160deg, #dce7f0 0%, #eef3f8 45%, #e4edf5 100%) !important;
}

.ep-login-card.auth-box {
  order: 1;
}

.ep-login-brand {
  order: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.25rem 3.5rem;
  color: #f4f8fb;
  background: linear-gradient(145deg, #0b1c33 0%, #123a5c 42%, #1a6f9c 78%, #2ca8d8 100%);
  overflow: hidden;
}

.ep-login-brand-arcs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 115% 110%, rgba(120, 210, 255, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 55% at 95% 85%, rgba(80, 180, 230, 0.22), transparent 60%);
}

.ep-login-brand-arcs::before,
.ep-login-brand-arcs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 48px solid rgba(140, 210, 245, 0.16);
  pointer-events: none;
}

.ep-login-brand-arcs::before {
  width: 120%;
  height: 95%;
  right: -42%;
  bottom: -48%;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(-8deg);
}

.ep-login-brand-arcs::after {
  width: 95%;
  height: 80%;
  right: -28%;
  bottom: -42%;
  border-width: 36px;
  border-color: rgba(160, 220, 250, 0.12);
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(-4deg);
}

.ep-login-brand-glow {
  position: absolute;
  width: 55%;
  height: 55%;
  right: -8%;
  bottom: -12%;
  background: radial-gradient(circle, rgba(180, 230, 255, 0.28), transparent 68%);
  pointer-events: none;
  filter: blur(2px);
}

.ep-login-brand-dots {
  position: absolute;
  top: 2rem;
  right: 2.25rem;
  width: 88px;
  height: 72px;
  background-image: radial-gradient(circle, rgba(170, 220, 250, 0.55) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  background-repeat: repeat;
  opacity: 0.35;
  pointer-events: none;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.9), transparent 85%);
}

.ep-login-brand-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

@media (max-width: 991.98px) {
  .ep-login-brand-network {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-login-brand-network {
    display: none !important;
  }
}

.ep-login-brand-content {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  animation: epLoginRise 0.7s ease both;
}

.ep-login-brand-kicker {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ep-login-brand-kicker-easy {
  color: #ffffff;
  margin-right: 0.35em;
}

.ep-login-brand-kicker-payroll {
  color: var(--ep-warning);
}

.ep-login-brand-title {
  margin: 0 0 1.1rem;
  font-size: clamp(2.35rem, 4.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.ep-login-brand-title-web {
  color: #ffffff;
  margin-right: 0.28em;
}

.ep-login-brand-title-sched {
  color: var(--ep-warning);
}

.ep-login-brand-copy {
  margin: 0 0 2.25rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 26rem;
}

.ep-login-brand-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.ep-login-brand-points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.ep-login-brand-points i {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 28, 48, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #fff;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.ep-login-brand-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.ep-login-brand-meta {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ep-login-brand-meta-line {
  display: block;
  width: 2.75rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}

.ep-login-brand-version {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(220, 235, 245, 0.75);
  letter-spacing: 0.04em;
}

.ep-login-brand-script {
  margin: 0 0.5rem 0.15rem 0;
  font-family: "Caveat", cursive;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 600;
  color: rgba(150, 215, 245, 0.88);
  transform: rotate(-14deg);
  transform-origin: right bottom;
  white-space: nowrap;
  user-select: none;
  text-shadow: 0 6px 18px rgba(8, 30, 50, 0.25);
}

.ep-login-card.auth-box {
  position: relative !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100%;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 1.35rem 2.75rem 2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  animation: epLoginRise 0.7s ease 0.08s both;
}

.ep-login-status {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: 1.25rem;
}

.ep-login-logo {
  margin-bottom: 1.25rem !important;
}

.ep-login-logo img {
  width: auto !important;
  max-width: 180px;
  max-height: 56px;
  object-fit: contain;
}

.ep-login-licensed {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--ep-text-secondary);
}

.ep-login-licensed strong {
  color: var(--ep-text);
  font-weight: 600;
}

.ep-login-heading {
  margin-bottom: 1.5rem;
}

.ep-login-heading h2 {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ep-text);
}

.ep-login-heading p {
  margin: 0;
  color: var(--ep-text-muted);
  font-size: 0.925rem;
}

.ep-login-field {
  margin-bottom: 0.9rem;
}

.ep-login-field .input-group {
  margin-bottom: 0 !important;
  min-height: 3.15rem;
}

/* Equal icon wells — same width, centered glyph (user + lock + eye) */
.ep-login-field .input-group > .input-group-prepend,
.ep-login-field .input-group > .input-group-append {
  display: flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
}

.ep-login-field .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  min-width: 3rem !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.ep-login-field .input-group-text i:not(.d-none) {
  display: block !important;
  width: 1.15rem;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  text-align: center;
  color: var(--ep-text-muted, #8494a7) !important;
}

/* Keep mode-swapped icons hidden (hashtag vs user) — do not override .d-none */
.ep-login-field .input-group-text i.d-none {
  display: none !important;
}

.ep-login-field .input-group > .input-group-prepend > .input-group-text {
  border-right: 1px solid var(--ep-input-border, #e2e8f0) !important;
}

.ep-login-field .input-group > .input-group-append > .input-group-text {
  border-left: 1px solid var(--ep-input-border, #e2e8f0) !important;
}

.ep-login-actions {
  margin-top: 0.35rem;
  margin-bottom: 1.35rem;
}

.ep-login-submit,
#btnLogin.ep-login-submit,
.ep-lock-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem;
  width: 100%;
  border: 1px solid rgba(31, 111, 209, 0.18) !important;
  border-radius: 16px !important;
  padding: 0.85rem 1rem !important;
  min-height: 3rem;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--ep-primary, #1f6fd1) !important;
  background: rgba(31, 111, 209, 0.08) !important;
  box-shadow: 0 4px 18px rgba(31, 111, 209, 0.18) !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease,
    opacity 0.3s ease !important;
}

.ep-login-submit > i,
.ep-lock-submit > i {
  color: inherit !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ep-login-submit:hover,
.ep-login-submit:focus,
.ep-lock-submit:hover,
.ep-lock-submit:focus {
  color: var(--ep-primary-hover, #1859ad) !important;
  text-decoration: none !important;
  background: rgba(31, 111, 209, 0.14) !important;
  border-color: rgba(31, 111, 209, 0.28) !important;
  box-shadow: 0 8px 24px rgba(31, 111, 209, 0.24) !important;
  transform: translateY(-2px);
}

.ep-login-submit:hover > i.fa-arrow-right,
.ep-login-submit:focus > i.fa-arrow-right,
.ep-lock-submit:hover > i.fa-arrow-right,
.ep-lock-submit:focus > i.fa-arrow-right {
  transform: translateX(3px);
}

.ep-login-submit:active,
.ep-lock-submit:active {
  background: rgba(31, 111, 209, 0.18) !important;
  border-color: rgba(31, 111, 209, 0.32) !important;
  box-shadow: 0 3px 12px rgba(31, 111, 209, 0.16) !important;
  transform: translateY(0);
  transition-duration: 0.15s !important;
}

.ep-login-submit.disabled,
.ep-login-submit[aria-disabled="true"],
.ep-login-submit.ux-btn-busy,
.ep-lock-submit.disabled,
.ep-lock-submit[aria-disabled="true"],
.ep-lock-submit.ux-btn-busy {
  opacity: 0.7;
  cursor: wait !important;
  box-shadow: 0 3px 12px rgba(31, 111, 209, 0.12) !important;
  transform: none !important;
}

.ep-login-forgot {
  text-align: center;
  margin-top: 0.85rem !important;
}

.ep-login-forgot a {
  color: var(--ep-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.ep-login-forgot a:hover {
  color: var(--ep-primary);
}

.ep-login-modes {
  border: 1px solid var(--ep-input-border);
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
}

.ep-login-modes-header {
  padding: 0.7rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ep-text-muted);
  border-bottom: 1px solid var(--ep-border-subtle);
  background: #fff;
}

.ep-login-mode-list {
  display: flex;
  flex-direction: column;
}

.ep-login-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.42rem 0.9rem;
  border-bottom: 1px solid var(--ep-border-subtle);
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 0;
}

.ep-login-mode-row:last-child {
  border-bottom: 0;
}

.ep-login-mode-row:hover {
  background: rgba(31, 111, 209, 0.06);
}

.ep-login-mode-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ep-text);
  line-height: 1.25;
}

.ep-login-mode-row .switch {
  margin: 0;
  transform: scale(0.86);
  transform-origin: right center;
}

.ep-login-footer {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--ep-text-muted);
}

.ep-login-footer-version {
  margin-top: 0.25rem !important;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

@keyframes epLoginRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  .ep-login-shell.auth-wrapper {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  /* Hide brand marketing panel on mobile — login form only */
  .ep-login-brand {
    display: none !important;
  }

  .ep-login-card.auth-box {
    order: 1;
    padding: 0.85rem 1.1rem 1.25rem !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  .ep-login-status {
    top: 0.65rem;
    right: 0.85rem;
    font-size: 1.05rem;
  }

  .ep-login-logo {
    margin-bottom: 0.65rem !important;
    margin-top: 0.15rem !important;
  }

  .ep-login-logo img {
    max-height: 44px;
    max-width: 150px;
  }

  .ep-login-licensed {
    margin-top: 0.4rem;
    font-size: 0.8rem;
  }

  .ep-login-heading {
    margin-bottom: 0.85rem;
  }

  .ep-login-heading h2 {
    font-size: 1.4rem;
  }

  .ep-login-actions {
    margin-bottom: 0.85rem;
  }

  /* Keep Access Mode header normal; only rows stay compact */
  .ep-login-modes-header {
    padding: 0.7rem 1rem;
    font-size: 0.72rem;
  }

  .ep-login-mode-row {
    padding: 0.38rem 0.85rem;
  }

  .ep-login-mode-label {
    font-size: 0.82rem;
  }

  .ep-login-mode-row .switch {
    transform: scale(0.86);
  }

  .ep-login-footer {
    margin-top: 0.85rem;
  }
}

/* Shared auth-box polish (lock screen + modals still using auth-box) */
.auth-wrapper:not(.ep-login-shell) {
  background-color: var(--ep-page-bg);
  background-size: cover !important;
  background-position: center !important;
}

.auth-box:not(.ep-login-card) {
  background: var(--ep-surface) !important;
  border-radius: var(--ep-radius-lg) !important;
  box-shadow: var(--ep-shadow-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 1.75rem 1.5rem !important;
}

.auth-box .form-control,
.auth-box .form-control-lg {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-box .form-control:focus,
.auth-box .form-control-lg:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

.auth-box .input-group {
  margin-bottom: 1rem !important;
  min-height: 3.15rem;
}

.auth-box .input-group-text {
  background: transparent !important;
  border: 0 !important;
  color: var(--ep-text-muted, #8494a7) !important;
}

.auth-box .input-group > .form-control,
.auth-box .input-group > .form-control-lg {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.auth-box .btn-info,
.auth-box .btn-primary,
.auth-box .btn-lg.btn-info {
  border-radius: var(--ep-radius-sm) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  box-shadow: 0 4px 14px rgba(31, 111, 209, 0.35);
}

.auth-box .btn-info:hover,
.auth-box .btn-primary:hover {
  box-shadow: 0 6px 18px rgba(31, 111, 209, 0.4);
}

/* User lock heading (legacy) */
.main-wrapper > div > h1 {
  color: var(--ep-text);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------- */
/* Lock screen — session unlock                                               */
/* -------------------------------------------------------------------------- */

.ep-lock-page {
  min-height: 100vh;
  margin: 0;
  font-family: var(--ep-font) !important;
  background: #0b1c33;
}

.ep-lock-page .ep-lock-wrapper.main-wrapper {
  min-height: 100vh;
  background: transparent !important;
}

.ep-lock-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  min-height: 100vh;
  padding: 2.5rem 1.25rem 2.75rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(44, 168, 216, 0.28), transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 85%, rgba(31, 111, 209, 0.22), transparent 50%),
    linear-gradient(155deg, #0b1c33 0%, #123a5c 48%, #1859ad 100%);
}

.ep-lock-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ep-lock-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.ep-lock-glow--a {
  width: 42rem;
  height: 42rem;
  right: -18%;
  bottom: -28%;
  background: radial-gradient(circle, rgba(120, 210, 255, 0.28), transparent 68%);
}

.ep-lock-glow--b {
  width: 28rem;
  height: 28rem;
  left: -10%;
  top: -12%;
  background: radial-gradient(circle, rgba(240, 168, 74, 0.14), transparent 70%);
}

.ep-lock-arcs {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(170, 220, 250, 0.45) 1.25px, transparent 1.35px);
  background-size: 18px 18px;
  opacity: 0.18;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%);
}

.ep-lock-brand {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: epLoginRise 0.65s ease both;
}

.ep-lock-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ep-lock-kicker-easy {
  color: #ffffff;
  margin-right: 0.35em;
}

.ep-lock-kicker-payroll {
  color: var(--ep-warning, #f0a84a);
}

.ep-lock-title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.ep-lock-title-web {
  color: #ffffff;
  margin-right: 0.28em;
}

.ep-lock-title-sched {
  color: var(--ep-warning, #f0a84a);
}

.ep-lock-company {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.ep-lock-card.auth-box {
  position: relative !important;
  z-index: 1;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 2rem 1.85rem 1.85rem !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 24px 48px rgba(8, 28, 48, 0.28),
    0 2px 0 rgba(255, 255, 255, 0.65) inset !important;
  backdrop-filter: blur(12px);
  text-align: center;
  animation: epLoginRise 0.7s ease 0.08s both;
}

.ep-lock-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 0.85rem;
}

.ep-lock-avatar-img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(15, 36, 56, 0.18);
}

.ep-lock-avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(31, 111, 209, 0.35);
  pointer-events: none;
}

.ep-lock-user {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ep-text, #1e2a3a);
  letter-spacing: -0.01em;
}

.ep-lock-hint {
  margin: 0 0 1.35rem;
  font-size: 0.82rem;
  color: var(--ep-text-muted, #8494a7);
}

.ep-lock-field {
  margin-bottom: 1rem;
  text-align: left;
}

/* Joined password shell — lock / input / eye perfectly centered */
.ep-lock-password.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100%;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 36, 56, 0.04) !important;
  overflow: hidden;
}

.ep-lock-password.input-group:focus-within {
  border-color: var(--ep-primary, #1f6fd1) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.16) !important;
}

.ep-lock-password > .input-group-prepend,
.ep-lock-password > .input-group-append {
  display: flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.ep-lock-password .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  min-width: 3rem !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ep-text-muted, #8494a7) !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.ep-lock-password .input-group-text i {
  display: block !important;
  width: 1.1rem;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  text-align: center;
  color: var(--ep-text-muted, #8494a7) !important;
}

.ep-lock-password > .input-group-prepend .input-group-text {
  border-right: 1px solid var(--ep-input-border, #e2e8f0) !important;
}

.ep-lock-password > .input-group-append .input-group-text {
  border-left: 1px solid var(--ep-input-border, #e2e8f0) !important;
  cursor: pointer;
}

.ep-lock-password > .form-control,
.ep-lock-password > .form-control-lg {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-height: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 0.85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  line-height: 52px !important;
  color: var(--ep-text, #1e2a3a) !important;
}

.ep-lock-password > .form-control:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Lock submit shares .ep-login-submit look — no separate solid override */

@media (max-width: 576px) {
  .ep-lock-shell {
    gap: 1.25rem;
    padding: 1.75rem 1rem 2rem;
  }

  .ep-lock-card.auth-box {
    padding: 1.65rem 1.25rem 1.4rem !important;
    border-radius: 16px !important;
  }
}

.main-wrapper > div > h2 {
  color: var(--ep-text-secondary);
  font-weight: 400;
}

/* Error page card */
.notfound {
  background: var(--ep-surface) !important;
  border-radius: var(--ep-radius-lg) !important;
  box-shadow: var(--ep-shadow-lg) !important;
  border: 1px solid var(--ep-border);
  padding: 2rem 1.5rem;
}

.notfound h1,
.notfound h2 {
  color: var(--ep-text);
  font-weight: 500;
}

.notfound a,
.notfound .btn {
  border-radius: var(--ep-radius-sm) !important;
}

/* -------------------------------------------------------------------------- */
/* jQuery UI / steps / toggles (light polish)                                 */
/* -------------------------------------------------------------------------- */

.ui-widget {
  font-family: var(--ep-font) !important;
}

.ui-widget-content {
  border-color: var(--ep-border) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  background: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
}

/* jQuery Steps circle wizard — never paint the whole step link blue
   (that created the solid rectangle behind Welcome / Option / etc.) */
.wizard-content .wizard > .steps .current a,
.wizard-content .wizard > .steps .current a:hover,
.wizard-content .wizard > .steps .current a:active,
.wizard-content .wizard > .steps .done a,
.wizard-content .wizard > .steps .done a:hover,
.wizard-content .wizard > .steps .done a:active,
.wizard-content .wizard > .steps .disabled a,
.wizard-content .wizard > .steps .disabled a:hover,
.wizard-content .wizard > .steps .disabled a:active {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.wizard-content .wizard > .steps > ul > li.current > a {
  color: var(--ep-text, #1e2a3a) !important;
  font-weight: 600;
}

.wizard-content .wizard > .steps > ul > li.current .step {
  border-color: var(--ep-primary, #1f6fd1) !important;
  background-color: #fff !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

.wizard-content .wizard > .steps > ul > li.done .step {
  background-color: var(--ep-primary, #1f6fd1) !important;
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: #fff !important;
}

.wizard-content .wizard.wizard-circle > .steps > ul > li:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li:before {
  background-color: var(--ep-primary, #1f6fd1);
}

.wizard-content .wizard.wizard-circle > .steps > ul > li.current:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:before {
  background-color: #e8eef5;
}

.wizard-content .wizard > .actions > ul > li > a {
  background: var(--ep-primary, #1f6fd1) !important;
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: #fff !important;
  border-radius: var(--ep-radius-sm, 8px) !important;
}

.wizard-content .wizard > .actions > ul > li > a[href="#previous"] {
  background: #fff !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  border: 1px solid var(--ep-border, #d7e0ea) !important;
}

.wizard-content .wizard > .actions > ul > li.disabled > a,
.wizard-content .wizard > .actions > ul > li.disabled > a:hover {
  opacity: 0.55;
  pointer-events: none;
}

.toggle.btn-primary,
.toggle-on.btn-primary {
  background: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Preserve functional scheduler highlights (do not restyle cell semantics)   */
/* -------------------------------------------------------------------------- */

/* Intentional no-op zone: leave inline/functional grid colors untouched.
   Only chrome around tables is styled above. */

/* -------------------------------------------------------------------------- */
/* Print                                                                      */
/* -------------------------------------------------------------------------- */

@media print {
  .topbar,
  .left-sidebar,
  .footer {
    box-shadow: none !important;
  }

  .card,
  .material-card.card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}


/* -------------------------------------------------------------------------- */
/* CSS-first headers — no FOUC (dashboard + modals + QDA look correct before JS)*/
/* -------------------------------------------------------------------------- */

/* Dashboard + QDA cards: style raw Bootstrap headers like the final design */
#DashboardContent .card,
#showChartsModal .card {
  overflow: hidden;
  margin-bottom: 1rem !important;
  background: #fff;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 36, 56, 0.04) !important;
}

/* Dashboard charts (ApexCharts) — light visual polish only; easy to undo */
#DashboardContent .apexcharts-canvas,
#showChartsModal .apexcharts-canvas {
  font-family: var(--ep-font, Rubik, sans-serif) !important;
}

#DashboardContent .apexcharts-gridline,
#showChartsModal .apexcharts-gridline {
  stroke: rgba(15, 36, 56, 0.06) !important;
}

#DashboardContent .apexcharts-xaxis-label,
#DashboardContent .apexcharts-yaxis-label,
#showChartsModal .apexcharts-xaxis-label,
#showChartsModal .apexcharts-yaxis-label {
  fill: var(--ep-text-muted, #8494a7) !important;
}

/* Soft tooltip look — line/area/bar only */
#DashboardContent .apexcharts-canvas:not(:has(.apexcharts-pie)) .apexcharts-tooltip,
#showChartsModal .apexcharts-canvas:not(:has(.apexcharts-pie)) .apexcharts-tooltip {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  box-shadow: 0 8px 20px rgba(15, 36, 56, 0.12) !important;
}

/* Line charts: tooltip above card header */
#DashboardContent .card:has(.apexcharts-line-series) > .card-header,
#DashboardContent .card:has(.apexcharts-area-series) > .card-header,
#showChartsModal .card:has(.apexcharts-line-series) > .card-header,
#showChartsModal .card:has(.apexcharts-area-series) > .card-header {
  z-index: 1;
}

#DashboardContent .card:has(.apexcharts-line-series),
#DashboardContent .card:has(.apexcharts-area-series),
#showChartsModal .card:has(.apexcharts-line-series),
#showChartsModal .card:has(.apexcharts-area-series) {
  overflow: visible !important;
}

#DashboardContent .card:has(.apexcharts-line-series) > .card-body,
#DashboardContent .card:has(.apexcharts-area-series) > .card-body,
#showChartsModal .card:has(.apexcharts-line-series) > .card-body,
#showChartsModal .card:has(.apexcharts-area-series) > .card-body {
  position: relative;
  z-index: 2;
  overflow: visible !important;
}

#DashboardContent .card:has(.apexcharts-line-series) .apexcharts-canvas,
#DashboardContent .card:has(.apexcharts-area-series) .apexcharts-canvas,
#DashboardContent .card:has(.apexcharts-line-series) .apexcharts-svg,
#DashboardContent .card:has(.apexcharts-area-series) .apexcharts-svg,
#DashboardContent .card:has(.apexcharts-line-series) .apexcharts-inner,
#DashboardContent .card:has(.apexcharts-area-series) .apexcharts-inner,
#showChartsModal .card:has(.apexcharts-line-series) .apexcharts-canvas,
#showChartsModal .card:has(.apexcharts-area-series) .apexcharts-canvas,
#showChartsModal .card:has(.apexcharts-line-series) .apexcharts-svg,
#showChartsModal .card:has(.apexcharts-area-series) .apexcharts-svg,
#showChartsModal .card:has(.apexcharts-line-series) .apexcharts-inner,
#showChartsModal .card:has(.apexcharts-area-series) .apexcharts-inner {
  overflow: visible !important;
}

#DashboardContent .card:has(.apexcharts-line-series) .apexcharts-tooltip,
#DashboardContent .card:has(.apexcharts-area-series) .apexcharts-tooltip,
#showChartsModal .card:has(.apexcharts-line-series) .apexcharts-tooltip,
#showChartsModal .card:has(.apexcharts-area-series) .apexcharts-tooltip {
  z-index: 40 !important;
}

#DashboardContent .apexcharts-legend-text,
#showChartsModal .apexcharts-legend-text {
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-family: var(--ep-font, Rubik, sans-serif) !important;
}

/* Stand-in legend for charts with too many series for the ApexCharts legend, which lays
   out by measuring each item. Scrolls rather than growing so a few hundred jobs cannot
   push the chart off screen. */
.ep-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 12px;
  max-height: 86px;
  overflow-y: auto;
  padding: 4px 10px 8px;
  font-family: var(--ep-font, Rubik, sans-serif);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ep-text-secondary, #5a6b7d);
}
.ep-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ep-chart-legend-item:hover {
  color: var(--ep-text-primary, #2b3945);
}
.ep-chart-legend-item.is-off {
  opacity: 0.35;
  text-decoration: line-through;
}
.ep-chart-legend-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Soft bar chart bars (Overtime Total Hours / By Department) */
#DashboardContent .apexcharts-bar-area {
  transition: opacity 0.15s ease;
}
#DashboardContent .apexcharts-series:hover .apexcharts-bar-area {
  opacity: 0.88;
}

#DashboardContent .card > .card-header,
#showChartsModal .card > .card-header {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 48px;
  background: #ffffff !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  color: var(--ep-text);
}

/* Icon chip before title (CSS-only — no JS icon node required) */
#DashboardContent .card > .card-header::before,
#showChartsModal .card > .card-header::before {
  content: "\f080";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary, #1f6fd1);
  font-size: 0.92rem;
  line-height: 1;
}

#DashboardContent .card > .card-header:has(.ep-dash-icon)::before,
#showChartsModal .card > .card-header:has(.ep-dash-icon)::before {
  display: none !important;
}

/* Flatten Bootstrap .row so cols participate in the header flex (OT cards) */
#DashboardContent .card > .card-header > .row,
#showChartsModal .card > .card-header > .row {
  display: contents !important;
}

#DashboardContent .card > .card-header [class*="col-"],
#showChartsModal .card > .card-header [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto;
  min-width: 0;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  float: none !important;
}

/* Never override Bootstrap hide — More/Less month title rows toggle via d-none */
#DashboardContent .card > .card-header .d-none,
#DashboardContent .card > .card-header [class*="col-"].d-none,
#showChartsModal .card > .card-header .d-none,
#showChartsModal .card > .card-header [class*="col-"].d-none {
  display: none !important;
}

/* Toggle title strips (More/Less month) occupy the full header tools area */
#DashboardContent .card > .card-header [id*="Moremonth"],
#DashboardContent .card > .card-header [id*="Lessmonth"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}

#DashboardContent .card > .card-header [class*="col-"]:has(h4, h5, h6, .card-title),
#showChartsModal .card > .card-header [class*="col-"]:has(h4, h5, h6, .card-title) {
  flex: 1 1 10rem;
  min-width: min(100%, 8rem);
}

#DashboardContent .card > .card-header [class*="col-"]:has(h4, h5, h6, .card-title) ~ [class*="col-"],
#showChartsModal .card > .card-header [class*="col-"]:has(h4, h5, h6, .card-title) ~ [class*="col-"] {
  flex: 0 1 auto;
  justify-content: flex-end;
  max-width: 100%;
}

#DashboardContent .card > .card-header [class*="col-"]:has(h4, h5, h6, .card-title) + [class*="col-"],
#showChartsModal .card > .card-header [class*="col-"]:has(h4, h5, h6, .card-title) + [class*="col-"] {
  margin-left: auto;
}

#DashboardContent .card > .card-header .card-title,
#DashboardContent .card > .card-header h4,
#DashboardContent .card > .card-header h5,
#DashboardContent .card > .card-header h6,
#showChartsModal .card > .card-header .card-title,
#showChartsModal .card > .card-header h4,
#showChartsModal .card > .card-header h5,
#showChartsModal .card > .card-header h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  color: var(--ep-text) !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  max-width: 100%;
}

#DashboardContent .card > .card-header .btn,
#DashboardContent .card > .card-header button,
#showChartsModal .card > .card-header .btn,
#showChartsModal .card > .card-header button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  margin: 0 !important;
  float: none !important;
}

#DashboardContent .card > .card-header .btn.p-0,
#DashboardContent .card > .card-header button.p-0,
#DashboardContent .card > .card-header .btn.py-0,
#showChartsModal .card > .card-header .btn.p-0,
#showChartsModal .card > .card-header button.p-0 {
  padding: 0.25rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#DashboardContent .card > .card-header .btn.p-0:hover,
#DashboardContent .card > .card-header button.p-0:hover,
#DashboardContent .card > .card-header .btn.py-0:hover,
#showChartsModal .card > .card-header .btn.p-0:hover,
#showChartsModal .card > .card-header button.p-0:hover {
  background: rgba(15, 36, 56, 0.04) !important;
  border-radius: 8px !important;
}

#DashboardContent .card > .card-header select,
#DashboardContent .card > .card-header .form-control,
#showChartsModal .card > .card-header select,
#showChartsModal .card > .card-header .form-control {
  width: auto !important;
  min-width: 5.5rem;
  max-width: 9rem;
  height: 32px !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  flex: 0 0 auto;
}

#DashboardContent .card > .card-header label,
#showChartsModal .card > .card-header label {
  margin: 0 !important;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ep-text-muted, #8494a7);
  white-space: nowrap;
}

/* Export/print forms in headers — hide without waiting for JS */
#DashboardContent .card > .card-header > form,
#DashboardContent .card > .card-header > [id^="Form"],
#showChartsModal .card > .card-header > form,
#showChartsModal .card > .card-header > [id^="Form"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none;
}

#DashboardContent .card > .card-body,
#DashboardContent .card > .card-body.border {
  border: 0 !important;
  border-top: 0 !important;
  padding: 0.85rem 1rem !important;
  background: #fff;
}

/* Headcount "By Job" + "By Department" table cards only — flush edges, square table */
#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) > .card-body,
#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) > .card-body.border,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) > .card-body,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) > .card-body.border {
  padding: 0 !important;
}

#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) .dataTables_wrapper .dataTables_scroll,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) .dataTables_wrapper .dataTables_scroll,
#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) .dataTables_wrapper > table.table.border,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) .dataTables_wrapper > table.table.border,
#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) .dataTables_wrapper .dataTables_scroll > .dataTables_scrollHead,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) .dataTables_wrapper .dataTables_scroll > .dataTables_scrollHead,
#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) .dataTables_wrapper .dataTables_scroll > .dataTables_scrollBody,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) .dataTables_wrapper .dataTables_scroll > .dataTables_scrollBody,
#DashboardContent .card:has(#HeadcountByJobTableDiv, #ResultTable) #HeadcountByJobTable,
#DashboardContent .card:has(#HeadcountPlantTableDiv, #ResultPlantTable) #HeadcountPlantTable,
#DashboardContent .card:has(#ResultTable) #HeadCountTableLessMonth,
#DashboardContent .card:has(#ResultPlantTable) #HeadCountPlantTableLessMonth {
  border-radius: 0 !important;
}

/* QDA split cards: body padding stays 0 so table|chart fill the card */
#showChartsModal .card > .card-body,
#showChartsModal .card > .card-body.border {
  border: 0 !important;
  border-top: 0 !important;
  padding: 0 !important;
  background: #fff;
}

/* Context icons — Headcount / Overtime / charts / tables */
#DashboardContent .card:has(.ct-sm-line-chartHeadcount, #ct-sm-line-chartHeadPlant, [id*="Headcount"], [id*="HeadCount"]) > .card-header::before,
#showChartsModal .card:has([id*="Headcount"], [id*="HeadCount"]) > .card-header::before { content: "\f201"; }
#DashboardContent .card:has([id*="HoursBySource"], [id*="HoursByEarning"], .chart-canvas) > .card-header::before,
#showChartsModal .card:has([id*="HoursBySource"], [id*="HoursByEarning"], .chart-canvas) > .card-header::before { content: "\f200"; }
#DashboardContent .card:has([id*="OverTime"], [id*="overtime"], [id*="OT"], [id*="Chart_TotalHours"]) > .card-header::before,
#DashboardContent #OverTimeDashboard .card > .card-header::before,
#DashboardContent .OverTimeDashboard .card > .card-header::before { content: "\f017"; }
#DashboardContent .card:has(table, .dataTables_wrapper) > .card-header::before,
#showChartsModal .card:has(table, .dataTables_wrapper) > .card-header::before { content: "\f0ce"; }
#DashboardContent .card:has([id*="donut"], [id*="Donut"], [id*="Pie"], [id*="pie"]) > .card-header::before { content: "\f200"; }
#DashboardContent .card:has([id*="bar"], [id*="Bar"], [id*="Bar"]) > .card-header::before { content: "\f080"; }

/* Modals: hide raw title icons (i + span.fas); chip via ::before */
.modal-header .modal-title > i.fas,
.modal-header .modal-title > i.fa,
.modal-header .modal-title > i.far,
.modal-header .modal-title > i.fa-solid,
.modal-header .modal-title > i.fa-regular,
.modal-header .modal-title > span.fas,
.modal-header .modal-title > span.fa,
.modal-header .modal-title > span.far,
.modal-header .modal-title > span.fa-solid,
.modal-header .modal-title > span.fa-regular,
.modal-header h4 > i.fas,
.modal-header h4 > i.fa,
.modal-header h4 > i.far,
.modal-header h4 > span.fas,
.modal-header h4 > span.fa,
.modal-header h4 > span.far,
.modal-header h5 > i.fas,
.modal-header h5 > i.fa,
.modal-header h5 > i.far,
.modal-header h5 > span.fas,
.modal-header h5 > span.fa,
.modal-header h5 > span.far,
.modal-header .ShiftsModalTitle > i,
.modal-header .ShiftsModalTitle > span.fas,
.modal-header .ShiftsModalTitle > span.fa,
.modal-header [class*="ModalTitle"] > i,
.modal-header [class*="ModalTitle"] > span.fas,
.modal-header [class*="ModalTitle"] > span.fa {
  display: none !important;
}

.modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f2d0";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary, #1f6fd1);
  font-size: 0.92rem;
  line-height: 1;
  order: -1;
}

/* Shift popup — calendar icon; hide redundant "Shift" title (tab already says it) */
#AddShiftModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f271"; /* calendar-plus */
}

#AddShiftModal .modal-header .ShiftsModalTitle {
  display: none !important;
}

#AddShiftModal .modal-header .modal-title > .row > .col-md-10 {
  flex: 1 1 auto;
  max-width: 100%;
  width: 100%;
  padding-left: 0.35rem !important;
}

#AddShiftModal .modal-header .modal-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tool / page modals — same glyph as card header + sidebar */
#DepartmentsModalForOptions .modal-header:not(:has(.ep-modal-icon))::before,
#addDeptModal .modal-header:not(:has(.ep-modal-icon))::before,
#DeptsModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f1ad"; /* building */
}

#EmployeesPopUp .modal-header:not(:has(.ep-modal-icon))::before,
#AddEditEmployeeLog .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f0c0"; /* users */
}

#JOBModal .modal-header:not(:has(.ep-modal-icon))::before,
#JobEmpRestrictedModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f0b1"; /* briefcase */
}

#PhaseModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f5fd"; /* layer-group */
}

#EditGeolocationModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f3c5"; /* location-dot */
}

#EditTabletModal .modal-header:not(:has(.ep-modal-icon))::before,
#EditTabletJobPhaseModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f3fa"; /* tablet-screen-button */
}

#EditManageTemplateModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f24d"; /* clone */
}

#AddEditSpecialDaysModal .modal-header:not(:has(.ep-modal-icon))::before,
#specialDaysConfigModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f005"; /* star */
}

/* Special Days usage scenario — simple compact notes */
#specialDaysConfigModal .ep-scenario-notes {
  margin-top: 0.35rem;
  padding: 0.4rem 0.65rem 0.45rem;
  border-left: 3px solid var(--ep-primary, #1f6fd1);
  border-radius: 0 6px 6px 0;
  background: rgba(31, 111, 209, 0.05);
}

#specialDaysConfigModal .ep-scenario-notes__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ep-text, #1e2a3a);
}

#specialDaysConfigModal .ep-scenario-notes__title > i {
  font-size: 0.78rem;
  color: var(--ep-primary, #1f6fd1);
  margin: 0;
}

#specialDaysConfigModal .ep-scenario-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#specialDaysConfigModal .ep-scenario-notes__list > li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  padding: 0.12rem 0;
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ep-text-secondary, #5a6b7d);
}

#specialDaysConfigModal .ep-scenario-notes__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

#specialDaysConfigModal .ep-scenario-notes__badge--amber {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

#specialDaysConfigModal .ep-scenario-notes__badge--green {
  background: rgba(34, 181, 115, 0.18);
  color: #15803d;
}

#specialDaysConfigModal .modal-body {
  padding-bottom: 0.65rem !important;
}

#specialDaysConfigModal .modal-body > .table-responsive {
  margin-bottom: 0;
}

#specialDaysConfigModal .modal-body > .table-responsive .table {
  margin-bottom: 0;
}

/* Edit Special Day (by date) — Search left, Date+label inline, then table */
#AddEditSpecialDaysModal .modal-body > .row:has(.tableSpecialDays:not(.d-none)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.55rem;
}

#AddEditSpecialDaysModal .modal-body > .row:has(.tableSpecialDays:not(.d-none)) > .col-md-4.pl-md-0 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 1 16rem;
  width: auto;
  max-width: 18rem;
  order: 2;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0;
}

#AddEditSpecialDaysModal .modal-body > .row:has(.tableSpecialDays:not(.d-none)) > .col-md-4.pl-md-0 > .col-12.float-left {
  float: none !important;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ep-text-secondary, #5a6b7d);
  line-height: 1.2;
}

#AddEditSpecialDaysModal .modal-body > .row:has(.tableSpecialDays:not(.d-none)) > .col-md-4.pl-md-0 > .col-12:not(.float-left) {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 9.5rem;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) {
  display: contents;
}

#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) > .dataTables_wrapper {
  display: contents;
}

#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_filter {
  flex: 1 1 14rem;
  order: 1;
  float: none !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 12rem;
}

#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_filter .ep-dt-search,
#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_filter .input-group {
  width: 100%;
  max-width: none;
}

#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_scroll,
#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_info,
#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_paginate,
#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_processing {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  order: 3;
}

#AddEditSpecialDaysModal .tableSpecialDays:not(.d-none) .dataTables_paginate {
  margin-top: 0.35rem;
}

#PayOptionsModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f1de"; /* sliders */
}

#PrintQrCodeModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f02f"; /* print */
}

#AddEditEmployeeLog .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f304"; /* pen */
}

#ImportPopUpSchedule .modal-header:not(:has(.ep-modal-icon))::before,
#ImportPopUpPunches .modal-header:not(:has(.ep-modal-icon))::before,
#ImportPopUp .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f1c3"; /* file-excel */
}

#EmployeesPunchesPopUp .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f017"; /* clock */
}

#ChangeEmailForUser .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f0e0"; /* envelope */
}

#ChangePasswordModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f084"; /* key */
}

#previewEmpBalancesModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f254"; /* hourglass */
}

#importScheduleModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f1c3"; /* file-excel */
}

#updatePunchRequest .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f304"; /* pen */
}

#ExportTDModal .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f1fa"; /* at */
}

#ModalAbsente .modal-header:not(:has(.ep-modal-icon))::before {
  content: "\f235"; /* user-times */
}

/* -------------------------------------------------------------------------- */
/* Add / Edit Adjustment modal                                                */
/* -------------------------------------------------------------------------- */

#ModalAdjustment .modal-header.ep-modal-header {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.55rem 0.75rem !important;
}

#ModalAdjustment .modal-header:not(:has(.ep-modal-icon))::before {
  display: none !important; /* real .ep-modal-icon chip is in markup */
}

#ModalAdjustment .ep-modal-heading {
  flex: 0 1 auto;
  min-width: 7.5rem;
  max-width: 11rem;
}

#ModalAdjustment .ep-adj-modal-emp {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-width: 0;
  margin: 0 !important;
}

#ModalAdjustment .ep-adj-modal-emp__label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ep-text-secondary, #5a6b7d);
  white-space: nowrap;
}

#ModalAdjustment .ep-adj-modal-emp__num {
  flex: 0 0 4.75rem;
  width: 4.75rem !important;
  max-width: 4.75rem;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0.25rem 0.45rem !important;
}

#ModalAdjustment .ep-adj-modal-emp__name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

#ModalAdjustment .ep-adj-modal-emp__name .form-control {
  height: 36px !important;
  min-height: 36px !important;
}

#ModalAdjustment .ep-adj-modal-emp__name .input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 0.65rem;
  border-radius: 0 var(--ep-radius-input, 12px) var(--ep-radius-input, 12px) 0;
}

#ModalAdjustment .ep-modal-actions {
  flex: 0 0 auto !important;
  margin-left: 0.25rem !important;
  align-self: center;
}

#ModalAdjustment .ep-adj-modal-body {
  padding-top: 1rem !important;
}

#ModalAdjustment .ep-adj-modal-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ep-text-secondary, #5a6b7d);
}

#ModalAdjustment .ep-adj-hours-rate {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

#ModalAdjustment .ep-adj-hours-rate__hours {
  flex: 1 1 5.5rem;
  min-width: 4.5rem;
  max-width: 7rem;
  height: 38px !important;
}

#ModalAdjustment .ep-adj-hours-rate__label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ep-text-secondary, #5a6b7d);
  white-space: nowrap;
}

#ModalAdjustment .ep-adj-hours-rate__rate {
  flex: 1 1 7rem;
  min-width: 6.5rem;
  max-width: 9.5rem;
  flex-wrap: nowrap;
}

#ModalAdjustment .ep-adj-hours-rate__rate .input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 2.25rem;
  padding: 0 0.55rem;
  background: var(--ep-surface-muted, #f5f8fb) !important;
  border: 1px solid var(--ep-input-border, #e2e8f0) !important;
  border-right: 0 !important;
  border-radius: var(--ep-radius-input, 12px) 0 0 var(--ep-radius-input, 12px);
  color: var(--ep-text-secondary, #5a6b7d);
  font-weight: 600;
  cursor: default !important;
  box-shadow: none !important;
}

#ModalAdjustment .ep-adj-hours-rate__rate .form-control {
  height: 38px !important;
  min-height: 38px !important;
  border-left: 0 !important;
}

/* When rate is hidden, hours fills the field */
#ModalAdjustment .ep-adj-hours-rate:has(.AdjustRate.d-none) .ep-adj-hours-rate__hours {
  max-width: none;
  flex: 1 1 auto;
}

#ModalAdjustment .AdjustRate.d-none {
  display: none !important;
}

#ModalAdjustment .ep-adj-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.35rem !important;
}

@media (max-width: 991.98px) {
  #ModalAdjustment .modal-header.ep-modal-header {
    flex-wrap: wrap !important;
  }

  #ModalAdjustment .ep-modal-heading {
    max-width: none;
    flex: 1 1 auto;
  }

  #ModalAdjustment .ep-adj-modal-emp {
    flex: 1 1 100%;
    order: 3;
  }

  #ModalAdjustment .ep-modal-actions {
    order: 2;
    margin-left: auto !important;
  }
}

.modal-header .modal-title,
.modal-header > h4,
.modal-header > h5 {
  margin: 0 !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ep-text) !important;
}

.modal-header > .close,
.modal-header > .d-flex:has(> .close) {
  margin-left: auto !important;
  order: 99;
}

/* -------------------------------------------------------------------------- */
/* Dashboard — enhanced helpers (optional classes; CSS-first already covers)  */
/* -------------------------------------------------------------------------- */

#DashboardContent .ep-dash-card,
#DashboardContent .card.ep-dash-card {
  overflow: hidden;
  margin-bottom: 1rem !important;
  background: #fff;
}

/* Equal-height cards within each Bootstrap row */
#DashboardContent > .HeadcountDashboard > .row,
#DashboardContent > .OverTimeDashboard > .row,
#DashboardContent #HeadcountDashboard > .row,
#DashboardContent #OverTimeDashboard > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#DashboardContent > .HeadcountDashboard > .row > [class*="col-"],
#DashboardContent > .OverTimeDashboard > .row > [class*="col-"],
#DashboardContent #HeadcountDashboard > .row > [class*="col-"],
#DashboardContent #OverTimeDashboard > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

#DashboardContent > .HeadcountDashboard > .row > [class*="col-"] > .card,
#DashboardContent > .OverTimeDashboard > .row > [class*="col-"] > .card,
#DashboardContent #HeadcountDashboard > .row > [class*="col-"] > .card,
#DashboardContent #OverTimeDashboard > .row > [class*="col-"] > .card {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#DashboardContent .ep-dash-card > .card-body,
#DashboardContent .ep-dash-card > .card-body.border {
  border: 0 !important;
  border-top: 0 !important;
  padding: 0.85rem 1rem !important;
  background: #fff;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#DashboardContent .ep-dash-card > .card-body > .mt-0,
#DashboardContent .ep-dash-card > .card-body > .row {
  flex: 1 1 auto;
  min-height: 0;
}

#DashboardContent .ep-dash-card-header,
#DashboardContent .card > .card-header.ep-dash-card-header {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 48px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  color: var(--ep-text);
}

/* Extra right room only when icon actions are absolutely pinned (Headcount-style) */
#DashboardContent .ep-dash-card-header:has(.ep-dash-tools--icons) {
  padding-right: 0.85rem !important;
}

#DashboardContent .ep-dash-card-header:has(.ep-dash-tools--filters) {
  flex-wrap: wrap;
  padding-right: 0.85rem !important;
}

/* Overtime headers always use normal padding (dropdowns live in the flow) */
#DashboardContent #OverTimeDashboard .ep-dash-card-header,
#DashboardContent .OverTimeDashboard .ep-dash-card-header {
  padding: 0.55rem 0.85rem !important;
}

/* Hidden export forms must not affect header flex layout */
#DashboardContent .ep-dash-header-aux,
#DashboardContent .ep-dash-card-header > form,
#DashboardContent .ep-dash-card-header > [id^="Form"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none;
}

#DashboardContent .ep-dash-icon {
  flex: 0 0 auto;
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary);
  box-shadow: none;
}

#DashboardContent .ep-dash-icon i,
#DashboardContent .ep-dash-icon .fas,
#DashboardContent .ep-dash-icon .fa,
#DashboardContent .ep-dash-icon .far {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

#DashboardContent .ep-dash-heading {
  flex: 1 1 10rem;
  order: 2;
  min-width: min(100%, 8rem);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

#DashboardContent .ep-dash-heading .card-title,
#DashboardContent .ep-dash-title-text {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100%;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  color: var(--ep-text) !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

#DashboardContent .ep-dash-tools {
  display: inline-flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end !important;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  order: 3;
}

/* Icon-only actions: same row when space allows; wrap as a group when not */
#DashboardContent .ep-dash-tools--icons {
  position: static !important;
  top: auto;
  right: auto;
  left: auto !important;
  transform: none;
  flex: 0 1 auto !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  z-index: auto;
}

#DashboardContent .ep-dash-tools--filters {
  position: static !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap;
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

#DashboardContent .ep-dash-tools .form-control,
#DashboardContent .ep-dash-tools select {
  width: auto !important;
  min-width: 5.5rem;
  max-width: 9rem;
  height: 32px !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
}

#DashboardContent .ep-dash-tools label {
  margin: 0 !important;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ep-text-muted, #8494a7);
  white-space: nowrap;
}

#DashboardContent .ep-dash-tools .btn,
#DashboardContent .ep-dash-tools button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0.25rem !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  float: none !important;
}

#DashboardContent .ep-dash-tools .btn:hover,
#DashboardContent .ep-dash-tools button:hover {
  background: rgba(15, 36, 56, 0.04) !important;
  border-radius: 8px !important;
}

#DashboardContent .ep-dash-toggle-row {
  position: static;
  flex: 1 1 auto;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
  max-width: none !important;
  width: auto !important;
  flex-basis: 0 !important;
  flex-grow: 1 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#DashboardContent .ep-dash-toggle-row.d-none {
  display: none !important;
}

#DashboardContent .ep-dash-toggle-row .ep-dash-heading {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}

/* Page chrome: no gray bar; match parent width (no theme padding / row bleed) */
#DashboardContent #DashboardBreadcrumb,
#DashboardContent #DashboardBreadcrumb.page-breadcrumb,
#DashboardContent #DashboardBreadcrumb.bg-white {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible;
}

#DashboardContent #DashboardBreadcrumb .breadcrumb,
#DashboardContent #DashboardBreadcrumb .row.breadcrumb,
#DashboardContent #DashboardBreadcrumb .page-breadcrumb .breadcrumb {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0.35rem 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#DashboardContent #DashboardBreadcrumb > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* Modern chevron tabs — full arrow shape via clip-path (Headcount / Overtime) */
#DashboardContent #Dash_breadcrumb.arrow-steps,
#DashboardContent .arrow-steps {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  float: none !important;
  clear: none !important;
  margin: 0;
  padding: 0;
  overflow: visible;
  flex: 0 0 auto;
}

/* Wizard + period badge on one row */
#DashboardContent .ep-dash-wizard-row {
  gap: 0.65rem 0.85rem;
  min-width: 0;
}

#DashboardContent .ep-dash-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 111, 209, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 244, 252, 0.95) 100%);
  box-shadow: 0 1px 2px rgba(15, 36, 56, 0.05);
  color: var(--ep-text, #1e2a3a);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
}

#DashboardContent .ep-dash-period-badge > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary, #1f6fd1);
  font-size: 0.72rem;
  flex: 0 0 auto;
}

#DashboardContent .ep-dash-period-badge .CardTitle {
  color: var(--ep-primary, #1f6fd1);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  #DashboardContent .ep-dash-period-badge {
    white-space: normal;
    border-radius: 12px;
  }
}

#DashboardContent .arrow-steps::after {
  display: none !important;
  content: none !important;
}

#DashboardContent .arrow-steps .step,
#DashboardContent .arrow-steps a.step {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 0 0 -10px !important;
  padding: 0.55rem 1.55rem 0.55rem 1.75rem !important;
  min-width: 0;
  min-height: 2.35rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e8eef8 !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
  clip-path: polygon(
    0% 0%,
    calc(100% - 14px) 0%,
    100% 50%,
    calc(100% - 14px) 100%,
    0% 100%,
    14px 50%
  );
  -webkit-clip-path: polygon(
    0% 0%,
    calc(100% - 14px) 0%,
    100% 50%,
    calc(100% - 14px) 100%,
    0% 100%,
    14px 50%
  );
}

#DashboardContent .arrow-steps .step:first-child {
  margin-left: 0 !important;
  padding-left: 1.15rem !important;
  z-index: 2;
  clip-path: polygon(
    0% 0%,
    calc(100% - 14px) 0%,
    100% 50%,
    calc(100% - 14px) 100%,
    0% 100%
  );
  -webkit-clip-path: polygon(
    0% 0%,
    calc(100% - 14px) 0%,
    100% 50%,
    calc(100% - 14px) 100%,
    0% 100%
  );
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

#DashboardContent .arrow-steps .step:last-child {
  z-index: 0;
}

#DashboardContent .arrow-steps .step:before,
#DashboardContent .arrow-steps .step:after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

#DashboardContent .arrow-steps .step span {
  position: relative;
  z-index: 1;
}

#DashboardContent .arrow-steps .step span:before {
  display: none !important;
  content: none !important;
}

#DashboardContent .arrow-steps .step:hover {
  background: #d7e4f6 !important;
  color: var(--ep-text, #1e2a3a) !important;
  filter: brightness(1.02);
  z-index: 3;
}

#DashboardContent .arrow-steps .step.current,
#DashboardContent .arrow-steps .step.ActiveColor,
#DashboardContent .arrow-steps .step.ActiveColor:hover {
  background: var(--ep-primary, #1f6fd1) !important;
  color: #fff !important;
  filter: none;
  z-index: 4;
  box-shadow: 0 2px 10px rgba(31, 111, 209, 0.28) !important;
}

#DashboardContent .arrow-steps .step.done:not(.ActiveColor):not(.current) {
  background: #cfe0f7 !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

/* Template (temp) login — green wizard accents to match topbar */
#main-wrapper[data-logintype="temp"] #DashboardContent .arrow-steps .step {
  background: #e6f6ee !important;
}

#main-wrapper[data-logintype="temp"] #DashboardContent .arrow-steps .step:hover {
  background: #d2f0e0 !important;
  color: var(--ep-text, #1e2a3a) !important;
}

#main-wrapper[data-logintype="temp"] #DashboardContent .arrow-steps .step.current,
#main-wrapper[data-logintype="temp"] #DashboardContent .arrow-steps .step.ActiveColor,
#main-wrapper[data-logintype="temp"] #DashboardContent .arrow-steps .step.ActiveColor:hover {
  background: var(--ep-temp-login, #22b573) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(34, 181, 115, 0.3) !important;
}

#main-wrapper[data-logintype="temp"] #DashboardContent .arrow-steps .step.done:not(.ActiveColor):not(.current) {
  background: #c6ebd7 !important;
  color: var(--ep-temp-login-strong, #1c9c64) !important;
}

#main-wrapper[data-logintype="temp"] #DashboardContent .ep-dash-period-badge {
  border-color: rgba(34, 181, 115, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 248, 239, 0.95) 100%);
}

#main-wrapper[data-logintype="temp"] #DashboardContent .ep-dash-period-badge > i {
  background: rgba(34, 181, 115, 0.14);
  color: var(--ep-temp-login, #22b573);
}

#main-wrapper[data-logintype="temp"] #DashboardContent .ep-dash-period-badge .CardTitle {
  color: var(--ep-temp-login-strong, #1c9c64);
}

#DashboardContent .arrow-steps a,
#DashboardContent .arrow-steps a:active,
#DashboardContent .arrow-steps a:hover,
#DashboardContent .arrow-steps a:focus {
  text-decoration: none !important;
  outline: none !important;
}

@media (max-width: 767.98px) {
  #DashboardContent .arrow-steps .step,
  #DashboardContent .arrow-steps a.step {
    font-size: 0.75rem !important;
    padding: 0.5rem 1.35rem 0.5rem 1.5rem !important;
    margin-left: -8px !important;
    clip-path: polygon(
      0% 0%,
      calc(100% - 11px) 0%,
      100% 50%,
      calc(100% - 11px) 100%,
      0% 100%,
      11px 50%
    );
    -webkit-clip-path: polygon(
      0% 0%,
      calc(100% - 11px) 0%,
      100% 50%,
      calc(100% - 11px) 100%,
      0% 100%,
      11px 50%
    );
  }

  #DashboardContent .arrow-steps .step:first-child {
    margin-left: 0 !important;
    clip-path: polygon(
      0% 0%,
      calc(100% - 11px) 0%,
      100% 50%,
      calc(100% - 11px) 100%,
      0% 100%
    );
    -webkit-clip-path: polygon(
      0% 0%,
      calc(100% - 11px) 0%,
      100% 50%,
      calc(100% - 11px) 100%,
      0% 100%
    );
  }
}

#DashboardContent .page-breadcrumb.bg-white {
  background: transparent !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#DashboardContent #ThisWeekLabel .btn {
  border-radius: 10px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  font-weight: 600;
  padding: 0.4rem 0.85rem !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#DashboardContent #ThisWeekLabel .btn i {
  color: inherit !important;
}

/* Reports — cyan outline + text */
#DashboardContent #ThisWeekLabel #BtnGoToReports {
  border-color: #0891b2 !important;
  color: #0891b2 !important;
}

#DashboardContent #ThisWeekLabel #BtnGoToReports:hover,
#DashboardContent #ThisWeekLabel #BtnGoToReports:focus {
  border-color: #06b6d4 !important;
  color: #06b6d4 !important;
  background: transparent !important;
}

/* Actual scheduler — primary blue outline + text */
#DashboardContent #ThisWeekLabel #BtnOpenActual {
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-primary, #1f6fd1) !important;
}

#DashboardContent #ThisWeekLabel #BtnOpenActual:hover,
#DashboardContent #ThisWeekLabel #BtnOpenActual:focus {
  border-color: var(--ep-primary-hover, #1a5fb5) !important;
  color: var(--ep-primary-hover, #1a5fb5) !important;
  background: transparent !important;
}

/* Template scheduler — success/template green */
#DashboardContent #ThisWeekLabel #BtnOpenTemplate {
  border-color: var(--ep-success, #22b573) !important;
  color: var(--ep-success, #22b573) !important;
}

#DashboardContent #ThisWeekLabel #BtnOpenTemplate:hover,
#DashboardContent #ThisWeekLabel #BtnOpenTemplate:focus {
  border-color: var(--ep-temp-login-strong, #1c9c64) !important;
  color: var(--ep-temp-login-strong, #1c9c64) !important;
  background: transparent !important;
}

/* Filter Dashboard — emerald outline + text */
#DashboardContent #ThisWeekLabel [data-target="#DashboardFilterModal"] {
  border-color: #059669 !important;
  color: #059669 !important;
}

#DashboardContent #ThisWeekLabel [data-target="#DashboardFilterModal"]:hover,
#DashboardContent #ThisWeekLabel [data-target="#DashboardFilterModal"]:focus {
  border-color: #10b981 !important;
  color: #10b981 !important;
  background: transparent !important;
}

#DashboardContent .page-breadcrumb h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ep-text);
  margin: 0.35rem 0 0.75rem !important;
}

#DashboardContent .borderLine {
  border: 0 !important;
  height: 0.35rem;
  margin: 0.15rem 0 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Scheduler action bar (Add Day / Shift / Copy Next / etc.)                   */
/* -------------------------------------------------------------------------- */

#ActualActionButtonsRow.ep-sched-action-bar,
#TemplateActionButtonsRow.ep-sched-action-bar,
.ep-sched-action-bar {
  margin-top: 0.35rem;
}

.ep-sched-action-bar > .col-lg-12 > .row {
  margin-left: -0.35rem;
  margin-right: -0.35rem;
}

.ep-sched-action-bar > .col-lg-12 > .row > [class*="col-"] {
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.ep-sched-action-bar .btn.btn-outline-dark,
.ep-sched-action-bar .btn {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.65rem !important;
  border-radius: 12px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  background: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.01em;
  line-height: 1.2 !important;
  box-shadow: 0 1px 3px rgba(15, 36, 56, 0.04);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ep-sched-action-bar .btn i,
.ep-sched-action-bar .btn .fas,
.ep-sched-action-bar .btn .fa {
  font-size: 1.05rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}

.ep-sched-action-bar .btn:hover,
.ep-sched-action-bar .btn:focus {
  background: transparent !important;
  box-shadow: 0 2px 8px rgba(15, 36, 56, 0.08);
}

.ep-sched-action-bar .btn:disabled,
.ep-sched-action-bar .btn.disabled {
  opacity: 0.45 !important;
  box-shadow: none !important;
}

/* Distinct outline + text colors (no fill, not muted, not danger) */
.ep-sched-action-bar #addDayButton {
  border-color: #0891b2 !important;
  color: #0891b2 !important;
}
.ep-sched-action-bar #addDayButton:hover:not(:disabled) {
  border-color: #06b6d4 !important;
  color: #06b6d4 !important;
}

.ep-sched-action-bar #BtnAddShiftPopup {
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-primary, #1f6fd1) !important;
}
.ep-sched-action-bar #BtnAddShiftPopup:hover:not(:disabled) {
  border-color: var(--ep-primary-hover, #1a5fb5) !important;
  color: var(--ep-primary-hover, #1a5fb5) !important;
}

.ep-sched-action-bar #btnActualCopyNext {
  border-color: var(--ep-warning, #f0a84a) !important;
  color: var(--ep-warning, #f0a84a) !important;
}
.ep-sched-action-bar #btnActualCopyNext:hover:not(:disabled) {
  border-color: #e09430 !important;
  color: #e09430 !important;
}

.ep-sched-action-bar #OpenAdjustmentPage {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
}
.ep-sched-action-bar #OpenAdjustmentPage:hover:not(:disabled) {
  border-color: #8b5cf6 !important;
  color: #8b5cf6 !important;
}

.ep-sched-action-bar #OpenTemplates {
  border-color: var(--ep-success, #22b573) !important;
  color: var(--ep-success, #22b573) !important;
}
.ep-sched-action-bar #OpenTemplates:hover:not(:disabled) {
  border-color: #1c9c64 !important;
  color: #1c9c64 !important;
}

.ep-sched-action-bar #ReturnActual {
  border-color: var(--ep-primary, #1f6fd1) !important;
  color: var(--ep-primary, #1f6fd1) !important;
}
.ep-sched-action-bar #ReturnActual:hover:not(:disabled) {
  border-color: var(--ep-primary-hover, #1859ad) !important;
  color: var(--ep-primary-hover, #1859ad) !important;
}

.ep-sched-action-bar #BTNPrintMainPagePopup {
  border-color: #4338ca !important;
  color: #4338ca !important;
}
.ep-sched-action-bar #BTNPrintMainPagePopup:hover:not(:disabled) {
  border-color: #4f46e5 !important;
  color: #4f46e5 !important;
}

/* -------------------------------------------------------------------------- */
/* Quick Data Analysis modal                                                  */
/* -------------------------------------------------------------------------- */

#showChartsModal .modal-dialog.modal-xl {
  max-width: min(1280px, 96vw);
}

#showChartsModal .modal-content {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
}

#showChartsModal .modal-body {
  padding: 0.75rem 1rem 1rem !important;
  background: #f5f7fa !important;
}

#showChartsModal #showChartsModalInfoText {
  background: #ffffff;
  border: 1px solid rgba(15, 36, 56, 0.08);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  margin: 0 0 0.85rem !important;
  font-size: 0.86rem;
  color: var(--ep-text-secondary, #5a6b7d);
  box-shadow: 0 1px 3px rgba(15, 36, 56, 0.04);
}

#showChartsModal #showChartsModalInfoText i.fa-circle-info {
  color: var(--ep-primary, #1f6fd1) !important;
}

#showChartsModal #showChartsModalInfoText i.text-white {
  color: transparent !important;
}

#showChartsModal .ep-qda-grid {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  align-items: stretch;
}

#showChartsModal .ep-qda-col {
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  margin-bottom: 0.85rem;
}

#showChartsModal .ep-qda-card,
#showChartsModal .card.ep-qda-card,
#showChartsModal .card.ep-dash-card {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 36, 56, 0.04) !important;
  overflow: visible !important;
}

#showChartsModal .ep-qda-card > .card-body,
#showChartsModal .ep-dash-card > .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

#showChartsModal .ep-qda-split {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

#showChartsModal .ep-qda-split > .ep-qda-table-wrap {
  flex: 1 1 52%;
  min-width: 0;
  border-right: 1px solid var(--ep-border-subtle, #e8eef4);
}

#showChartsModal .ep-qda-split > .ep-qda-chart-wrap {
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.25rem 0.5rem;
}

@media (max-width: 991.98px) {
  #showChartsModal .ep-qda-split {
    flex-direction: column;
  }

  #showChartsModal .ep-qda-split > .ep-qda-table-wrap {
    flex: 1 1 auto;
    border-right: 0;
    border-bottom: 1px solid var(--ep-border-subtle, #e8eef4);
  }

  #showChartsModal .ep-qda-split > .ep-qda-chart-wrap {
    flex: 1 1 auto;
  }
}

/* Dashboard-matching card headers inside QDA */
#showChartsModal .ep-dash-card-header,
#showChartsModal .card > .card-header.ep-dash-card-header,
#showChartsModal .ep-qda-card > .card-header {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 48px;
  background: #ffffff !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  color: var(--ep-text);
}

#showChartsModal .ep-dash-card-header:has(.ep-dash-tools--icons) {
  padding-right: 0.85rem !important;
}

#showChartsModal .ep-dash-icon {
  flex: 0 0 auto;
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary);
}

#showChartsModal .ep-dash-icon i,
#showChartsModal .ep-dash-icon .fas,
#showChartsModal .ep-dash-icon .fa {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

#showChartsModal .ep-dash-heading {
  flex: 1 1 10rem;
  order: 2;
  min-width: min(100%, 8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#showChartsModal .ep-dash-heading .card-title,
#showChartsModal .ep-dash-title-text,
#showChartsModal .ep-qda-card .card-header .card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  color: var(--ep-text) !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  max-width: 100%;
}

#showChartsModal .ep-dash-tools {
  display: inline-flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end !important;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  order: 3;
}

#showChartsModal .ep-dash-tools--icons {
  position: static !important;
  top: auto;
  right: auto;
  left: auto !important;
  transform: none;
  flex: 0 1 auto !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  z-index: auto;
}

#showChartsModal .ep-dash-tools .btn,
#showChartsModal .ep-dash-tools button,
#showChartsModal .ep-qda-card .card-header .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0.25rem !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  float: none !important;
}

#showChartsModal .ep-dash-tools .btn:hover,
#showChartsModal .ep-qda-card .card-header .btn:hover {
  background: rgba(15, 36, 56, 0.04) !important;
  border-radius: 8px !important;
}

#showChartsModal .ep-qda-chart-wrap {
  min-height: 250px;
}

#showChartsModal .ep-qda-table-wrap {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

/* Soft column headers — card title is the header; thead is just columns */
#showChartsModal table thead th,
#showChartsModal .dataTables_scrollHead table thead th {
  background: #f4f7fb !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 0.45rem 0.55rem !important;
  vertical-align: middle !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 36, 56, 0.08) !important;
  white-space: nowrap;
}

#showChartsModal table tbody td,
#showChartsModal table tfoot th {
  font-size: 0.84rem !important;
  padding: 0.4rem 0.55rem !important;
  vertical-align: middle !important;
  border-color: rgba(15, 36, 56, 0.06) !important;
}

#showChartsModal table tfoot th {
  background: #f8fafc !important;
  font-weight: 700 !important;
  border-top: 1px solid rgba(15, 36, 56, 0.1) !important;
}

#showChartsModal table.dataTable,
#showChartsModal table.table {
  margin: 0 !important;
  border: 0 !important;
  width: 100% !important;
}

#showChartsModal .dataTables_wrapper {
  width: 100% !important;
  padding: 0 !important;
}

#showChartsModal .dataTables_scroll {
  width: 100% !important;
}

#showChartsModal .dataTables_scrollHead {
  overflow: hidden !important;
  width: 100% !important;
  border-bottom: 0 !important;
}

#showChartsModal .dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
  width: 100% !important;
  border-bottom: 0 !important;
  scrollbar-gutter: stable;
}

#showChartsModal .dataTables_scrollBody::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#showChartsModal .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: rgba(15, 36, 56, 0.22);
  border-radius: 8px;
}

#showChartsModal .dataTables_scrollBody::-webkit-scrollbar-track {
  background: rgba(15, 36, 56, 0.05);
}

#showChartsModal .dataTables_scrollHeadInner,
#showChartsModal .dataTables_scrollHeadInner table,
#showChartsModal .dataTables_scrollBody table {
  width: 100% !important;
}

#showChartsModal .dataTables_scrollFoot {
  width: 100% !important;
  overflow: hidden !important;
}

#showChartsModal .dataTables_scrollFootInner,
#showChartsModal .dataTables_scrollFootInner table {
  width: 100% !important;
}

/* Hide DataTables duplicate sorting icons crowding narrow cols */
#showChartsModal table.dataTable thead .sorting:after,
#showChartsModal table.dataTable thead .sorting_asc:after,
#showChartsModal table.dataTable thead .sorting_desc:after {
  opacity: 0.35;
}

@media (max-width: 991.98px) {
  #showChartsModal .ep-qda-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Tool page cards — real card-header + card-body (dashboard match, CSS-first) */
/* -------------------------------------------------------------------------- */

#roots .ep-tool-page-card,
#roots .card.ep-tool-page-card {
  margin-bottom: 1rem !important;
  background: #fff !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 36, 56, 0.04) !important;
  /* header dropdowns (View Changes) must not be clipped */
  overflow: visible !important;
}

/* -------------------------------------------------------------------------- */
/* Tool pages — card fills viewport between fixed topbar and footer           */
/* topbar 60 + footer ~52 + page padding ~16 ≈ 128px                          */
/*                                                                            */
/* Keyed on .ep-has-tool-page, which ux-house-patterns syncs onto the wrapper  */
/* and #roots. These were :has(#roots .ep-tool-page-card), whose argument is   */
/* the very class that script adds during every page load — so each SPA        */
/* navigation re-evaluated them document-wide right when the new view was      */
/* trying to paint. The #main-wrapper prefix keeps the original specificity.   */
/* -------------------------------------------------------------------------- */

#main-wrapper .page-wrapper.ep-has-tool-page {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
}

#main-wrapper .page-wrapper.ep-has-tool-page > .page-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0 !important; /* override theme calc(100vh - 97px) */
  padding: 0.5rem !important;
}

#main-wrapper .page-wrapper.ep-has-tool-page > .footer,
#main-wrapper .page-wrapper.ep-has-tool-page > .footer.ep-app-footer {
  flex: 0 0 auto;
}

#main-wrapper .page-wrapper.ep-has-tool-page #roots {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
}

#roots.ep-has-tool-page > * {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
}

#roots.ep-has-tool-page > * > style,
#roots.ep-has-tool-page > * > script {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#roots .row:has(> [class*="col-"] > .ep-tool-page-card:has(> .ep-tool-page-body)) {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#roots .row:has(> [class*="col-"] > .ep-tool-page-card:has(> .ep-tool-page-body)) > [class*="col-"] {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

#roots .ep-tool-page-card:has(> .ep-tool-page-body),
#roots .card.ep-tool-page-card:has(> .ep-tool-page-body) {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
  /* Fallback when flex chain is interrupted — fills topbar→footer */
  min-height: calc(100vh - 128px);
}

#roots .ep-tool-page-card > .card-header.ep-tool-page-header,
#roots .card.ep-tool-page-card > .card-header {
  position: relative;
  /* Do NOT permanently raise z-index — in-page modals live under this header */
  z-index: auto;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
  min-height: 52px;
  height: auto !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  color: var(--ep-text);
  overflow: visible !important;
}

#roots .ep-tool-page-card > .card-header.ep-tool-page-header:last-child,
#roots .card.ep-tool-page-card > .card-header:last-child {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  border-bottom: 0 !important;
}

#roots .ep-tool-page-card > .card-body.ep-tool-page-body,
#roots .card.ep-tool-page-card > .card-body.ep-tool-page-body {
  position: relative;
  z-index: auto;
  flex: 1 1 auto;
  min-height: 0;
  border: 0 !important;
  padding: 0.85rem 1rem !important;
  background: #fff !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  overflow: hidden;
}

#roots .ep-tool-page-header .ep-dash-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary, #1f6fd1);
}

#roots .ep-tool-page-header .ep-dash-icon i {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

#roots .ep-tool-page-header .ep-dash-heading {
  /* Grow into free space; wrap tools when title + tools no longer fit */
  flex: 1 1 10rem;
  min-width: min(100%, 8rem);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

#roots .ep-tool-page-header .ep-dash-title-text,
#roots .ep-tool-page-header #txtPageTitle,
#roots .ep-tool-page-header #txtPageTitleDevices,
#roots .ep-tool-page-header .card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  color: var(--ep-text) !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  max-width: 100%;
}

#roots .ep-tool-page-header .ep-tool-page-subtitle,
#roots .ep-tool-page-header .EmployeeSearchControls {
  margin: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  white-space: normal;
  overflow: visible;
  max-width: 100%;
  word-break: break-word;
}

/* Right-side actions: stay on same row when space allows; wrap as a group when not */
#roots .ep-tool-page-header .ep-dash-tools {
  display: inline-flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  position: relative;
  z-index: auto;
  overflow: visible !important;
}

#roots .ep-tool-page-header .btn-group,
#roots .ep-tool-page-header .DeptControls,
#roots .ep-tool-page-header #OptionsControls {
  position: relative;
  z-index: auto;
  overflow: visible !important;
}

/* Elevate only while a header dropdown is open (still below Bootstrap modals ~1050) */
#roots .ep-tool-page-header .btn-group.show {
  z-index: 30;
}

#roots .ep-tool-page-header .dropdown-menu,
#roots .ep-tool-page-header .btn-group.show > .dropdown-menu,
#roots .ep-tool-page-header .btn-group > .dropdown-menu.show {
  z-index: 40 !important;
}

/* When any modal is open, keep tool-page headers from stacking above backdrop/dialog */
body.modal-open #roots .ep-tool-page-card > .card-header.ep-tool-page-header,
body.modal-open #roots .ep-tool-page-header .ep-dash-tools,
body.modal-open #roots .ep-tool-page-header .btn-group,
body.modal-open #roots .ep-tool-page-header .DeptControls,
body.modal-open #roots .ep-tool-page-header #OptionsControls {
  z-index: auto !important;
}

#roots .ep-tool-page-header .ep-tool-filter-label {
  font-size: 0.82rem;
  color: var(--ep-text-secondary, #5a6b7d);
  white-space: normal;
}

#roots .ep-tool-page-header .ep-dash-tools .form-control,
#roots .ep-tool-page-header .ep-dash-tools input.form-control {
  height: 34px !important;
  min-width: 0;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  border-radius: 8px !important;
}

#roots .ep-tool-page-header .ep-dash-tools .input-group {
  flex-wrap: nowrap;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
}

#roots .ep-tool-page-header .ep-dash-tools--icons {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap;
  gap: 0.15rem;
}

#roots .ep-tool-page-header .ep-dash-tools .btn.p-0,
#roots .ep-tool-page-header .ep-dash-tools--icons > .btn,
#roots .ep-tool-page-header .ep-dash-tools--icons > a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#roots .ep-tool-page-header .ep-dash-tools .btn.p-0:hover,
#roots .ep-tool-page-header .ep-dash-tools--icons > .btn:hover,
#roots .ep-tool-page-header .ep-dash-tools--icons > a.btn:hover {
  background: rgba(15, 36, 56, 0.04) !important;
  border-radius: 8px !important;
}

#roots .ep-tool-page-header .ep-dash-tools .btn.p-0 i,
#roots .ep-tool-page-header .ep-dash-tools--icons > .btn i,
#roots .ep-tool-page-header .ep-dash-tools--icons > a.btn i,
#roots .ep-tool-page-header .ep-dash-tools .fa-2x,
#roots .ep-tool-page-header .ep-dash-tools .fa-xl {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  vertical-align: middle;
}

#roots .ep-tool-page-header #OptionsControls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#roots .ep-tool-page-header #OptionsControls > .btn.p-0,
#roots .ep-tool-page-header #OptionsControls .btn-group > .btn.p-0 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Print + View Changes — one joined split control (Departments / Options) */
#roots .ep-tool-page-header .ep-view-changes-split {
  display: inline-flex !important;
  vertical-align: middle;
  gap: 0 !important;
}

#roots .ep-tool-page-header .ep-view-changes-split > .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  min-height: 34px;
  padding: 0.35rem 0.7rem !important;
  background: #fff !important;
  border: 1px solid var(--ep-border, #d7e0ea) !important;
  color: var(--ep-text, #1e2a3a) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#roots .ep-tool-page-header .ep-view-changes-split > .ep-view-changes-split__print {
  width: 36px;
  min-width: 36px;
  padding: 0.35rem 0.55rem !important;
  border-top-left-radius: var(--ep-radius-sm, 8px) !important;
  border-bottom-left-radius: var(--ep-radius-sm, 8px) !important;
  border-right-width: 0 !important;
}

#roots .ep-tool-page-header .ep-view-changes-split > .ep-view-changes-split__toggle {
  gap: 0.4rem;
  border-top-right-radius: var(--ep-radius-sm, 8px) !important;
  border-bottom-right-radius: var(--ep-radius-sm, 8px) !important;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

#roots .ep-tool-page-header .ep-view-changes-split > .btn i {
  color: var(--ep-primary, #1f6fd1) !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

#roots .ep-tool-page-header .ep-view-changes-split > .ep-view-changes-split__toggle::after {
  margin-left: 0.35rem;
  color: var(--ep-text-secondary, #5a6b7d);
}

#roots .ep-tool-page-header .ep-view-changes-split > .btn:hover,
#roots .ep-tool-page-header .ep-view-changes-split > .btn:focus,
#roots .ep-tool-page-header .ep-view-changes-split.show > .btn {
  background: #f5f8fb !important;
  border-color: rgba(31, 111, 209, 0.35) !important;
  color: var(--ep-text, #1e2a3a) !important;
  box-shadow: none !important;
  z-index: 1;
}

#roots .ep-tool-page-header .ep-view-changes-split > .ep-view-changes-split__print:hover,
#roots .ep-tool-page-header .ep-view-changes-split > .ep-view-changes-split__print:focus,
#roots .ep-tool-page-header .ep-view-changes-split.show > .ep-view-changes-split__print {
  border-right-width: 0 !important;
}

#roots .ep-tool-page-header .DeptControls.d-none,
#roots .ep-tool-page-header #OptionsControls.d-none,
#roots .ep-tool-page-header .EmployeeSearchControls.d-none {
  display: none !important;
}

/* Page-specific header icons */
#OptionsContent .ep-tool-page-header .ep-dash-icon i { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#OptionsContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f1de"; font-weight: 900; }
#EmployeesSearchContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f002"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#DepartmentsContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f1ad"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#TipsAnalysisContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f080"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#HistoricalAdjustmentPage .ep-tool-page-header .ep-dash-icon i::before { content: "\f1da"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }

/* Historical header — keep browse-employee search clickable */
#HistoricalAdjustmentPage .ep-tool-page-header .ep-dash-tools--filters {
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-left: 0.5rem;
  min-width: 0;
  gap: 0.5rem !important;
}

#HistoricalAdjustmentPage .ep-historical-emp-group {
  flex: 0 1 auto;
  max-width: 100%;
}

#HistoricalAdjustmentPage .ep-historical-week-group {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
}

#HistoricalAdjustmentPage #HistoricalBtnForEmployeeModel {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 5;
}

#HistoricalAdjustmentPage #HistoricalBtnForEmployeeModel i {
  pointer-events: none;
}

#HistoricalAdjustmentPage #BtnBackToActual .fa-calendar-days,
#HistoricalAdjustmentPage #BtnBackToActual .fas {
  color: var(--ep-primary, #1f6fd1) !important;
}

#HistoricalAdjustmentPage #btnPrintReport_HistoricalUpdates .fa-print,
#HistoricalAdjustmentPage #btnPrintReport_HistoricalUpdates .fas {
  color: var(--ep-primary, #1f6fd1) !important;
}

#HistoricalAdjustmentPage #SaveHistoricalAdjustment .fa-save,
#HistoricalAdjustmentPage #SaveHistoricalAdjustment .fas {
  color: var(--ep-success, #22b573) !important;
}

#ZonesContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f279"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#DefaultSchedContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f784"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#RecalculatePage .ep-tool-page-header .ep-dash-icon i::before { content: "\f1ec"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }

/* Recalculate — period under title + solid run CTA */
#RecalculatePage .ep-tool-page-header {
  align-items: center;
  min-height: 56px;
}

#RecalculatePage .ep-recalc-period {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0 0;
  min-width: 0;
  max-width: 100%;
  color: var(--ep-text-secondary, #5a6b7d);
}

#RecalculatePage .ep-recalc-period > i {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #94a3b8;
}

#RecalculatePage .ep-recalc-period-input,
#RecalculatePage #ExPayByDeptHDatesREportInputPDF {
  width: 23ch !important;
  min-width: 0 !important;
  max-width: 100% !important;
  field-sizing: content;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
  cursor: default;
  pointer-events: none;
}

#RecalculatePage .ep-dash-tools {
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  margin-left: auto;
}

#RecalculatePage #RecalculateDataBtn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.35rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#RecalculatePage #RecalculateDataBtn i {
  margin: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  color: inherit !important;
}
#RecoverPunchesContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f1da"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#EmployeeContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f0c0"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }

/* Employees header — compact outlined QR / Browse actions */
#EmployeeContent .ep-tool-page-header .ep-emp-header-action.ep-btn-labeled {
  min-height: 34px;
  padding: 0.3rem 0.7rem !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px !important;
}

#EmployeeContent .ep-tool-page-header .ep-emp-header-action.ep-btn-labeled > i {
  font-size: 0.9rem !important;
}

#EmployeeContent .ep-tool-page-header .ep-emp-header-action.ep-btn-labeled > span {
  line-height: 1.2;
}

/* Print QR Code modal — select employees row + print CTA */
#PrintQrCodeModal .ep-qr-emp-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0.85rem;
  margin-top: 0.15rem;
  border: 1px solid var(--ep-border-subtle, #e8eef4);
  border-radius: 10px;
  background: #fff;
}

#PrintQrCodeModal .ep-qr-emp-select__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

#PrintQrCodeModal .ep-qr-emp-select__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ep-text, #1e2a3a);
}

#PrintQrCodeModal .ep-qr-emp-select__browse.ep-btn-labeled {
  min-height: 34px;
  padding: 0.3rem 0.75rem !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Browse looks disabled while Select Employees is off */
#PrintQrCodeModal .ep-qr-emp-select:not(:has(#chkAllEmployeePrint:checked)) .ep-qr-emp-select__browse {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  border-color: #c5ced8 !important;
  color: #8494a7 !important;
  background: #f3f5f7 !important;
  box-shadow: none !important;
}

#PrintQrCodeModal .ep-qr-print-footer {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: 0;
}

#PrintQrCodeModal .ep-qr-print-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0.25rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ep-success, #22b573) !important;
}

#PrintQrCodeModal .ep-qr-print-btn:hover,
#PrintQrCodeModal .ep-qr-print-btn:focus {
  background: rgba(34, 181, 115, 0.1) !important;
  border-radius: 8px !important;
  color: var(--ep-success, #22b573) !important;
}

#PrintQrCodeModal .ep-qr-print-btn i,
#PrintQrCodeModal .ep-qr-print-btn .fas {
  color: inherit !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}
#GeolocationsContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f3c5"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }

/* Geofence table — employees count badge must stay inside the cell (no clip) */
#GeolocationsContent #tableGeolocations tbody td:has(.ep-geo-emps-link),
#tableGeolocations tbody td:has(.ep-geo-emps-link) {
  overflow: visible !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#GeolocationsContent .ep-geo-emps-link,
#tableGeolocations .ep-geo-emps-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0.2rem 0.35rem 0;
  vertical-align: middle;
  text-decoration: none;
}

#GeolocationsContent .ep-geo-emps-link > i,
#tableGeolocations .ep-geo-emps-link > i {
  font-size: 1.35rem !important;
  line-height: 1;
}

#GeolocationsContent .ep-geo-emps-badge,
#tableGeolocations .ep-geo-emps-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.55rem;
  z-index: 2;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  margin: 0;
  border-radius: 999px !important;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#JobContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f0b1"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#PhaseContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f5fd"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }

/* Jobs / Phases detail fields — white panels; 5px left accent + 2px sides */
#JobContent .ep-jp-field,
#PhaseContent .ep-jp-field,
#DetailsJob .ep-jp-field,
#DetailsPhase .ep-jp-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0 0.7rem;
  padding: 0.65rem 0.8rem 0.7rem;
  min-inline-size: 0;
  min-height: 100%;
  border-style: solid !important;
  border-image: none !important;
  border-width: 2px 2px 2px 5px !important;
  border-color: rgba(15, 36, 56, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#JobContent .ep-jp-field--editable,
#PhaseContent .ep-jp-field--editable,
#DetailsJob .ep-jp-field--editable,
#DetailsPhase .ep-jp-field--editable {
  background: #ffffff !important;
  border-color: rgba(196, 168, 80, 0.45) !important;
  border-left-color: rgba(196, 168, 80, 0.9) !important;
  box-shadow: none !important;
}

#JobContent .ep-jp-field--readonly,
#PhaseContent .ep-jp-field--readonly,
#DetailsJob .ep-jp-field--readonly,
#DetailsPhase .ep-jp-field--readonly {
  background: #ffffff !important;
  border-color: rgba(90, 107, 125, 0.28) !important;
  border-left-color: rgba(90, 107, 125, 0.55) !important;
  box-shadow: none !important;
}

/* Focus: stay white; keep 5px left accent; soft blue ring */
#JobContent .ep-jp-field--editable:focus-within,
#PhaseContent .ep-jp-field--editable:focus-within,
#DetailsJob .ep-jp-field--editable:focus-within,
#DetailsPhase .ep-jp-field--editable:focus-within {
  background: #ffffff !important;
  border-color: rgba(31, 111, 209, 0.35) !important;
  border-left-color: rgba(196, 168, 80, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.14) !important;
}

#JobContent .ep-jp-field--readonly:focus-within,
#PhaseContent .ep-jp-field--readonly:focus-within,
#DetailsJob .ep-jp-field--readonly:focus-within,
#DetailsPhase .ep-jp-field--readonly:focus-within {
  background: #ffffff !important;
  border-color: rgba(31, 111, 209, 0.3) !important;
  border-left-color: rgba(90, 107, 125, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.12) !important;
}

#JobContent .ep-jp-field > legend,
#PhaseContent .ep-jp-field > legend,
#DetailsJob .ep-jp-field > legend,
#DetailsPhase .ep-jp-field > legend {
  float: none !important;
  display: block;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ep-text-muted, #8494a7) !important;
  white-space: normal;
}

#JobContent .ep-jp-field > .form-control,
#PhaseContent .ep-jp-field > .form-control,
#DetailsJob .ep-jp-field > .form-control,
#DetailsPhase .ep-jp-field > .form-control {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  color: var(--ep-text, #1e2a3a) !important;
  resize: vertical;
  min-height: 1.45em;
}

#JobContent .ep-jp-field--readonly > .form-control,
#PhaseContent .ep-jp-field--readonly > .form-control,
#DetailsJob .ep-jp-field--readonly > .form-control,
#DetailsPhase .ep-jp-field--readonly > .form-control {
  color: var(--ep-text-secondary, #5a6b7d) !important;
  cursor: default;
}

#JobContent .ep-jp-field > .form-control:focus,
#PhaseContent .ep-jp-field > .form-control:focus,
#DetailsJob .ep-jp-field > .form-control:focus,
#DetailsPhase .ep-jp-field > .form-control:focus,
#JobContent .ep-jp-field > .form-control:active,
#PhaseContent .ep-jp-field > .form-control:active,
#DetailsJob .ep-jp-field > .form-control:active,
#DetailsPhase .ep-jp-field > .form-control:active {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#JobContent .ep-jp-field--with-save,
#PhaseContent .ep-jp-field--with-save,
#DetailsJob .ep-jp-field--with-save,
#DetailsPhase .ep-jp-field--with-save {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

#JobContent .ep-jp-field--with-save > legend,
#PhaseContent .ep-jp-field--with-save > legend,
#DetailsJob .ep-jp-field--with-save > legend,
#DetailsPhase .ep-jp-field--with-save > legend {
  flex: 1 0 100%;
}

#JobContent .ep-jp-field--with-save > .form-control,
#PhaseContent .ep-jp-field--with-save > .form-control,
#DetailsJob .ep-jp-field--with-save > .form-control,
#DetailsPhase .ep-jp-field--with-save > .form-control {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  resize: none;
  min-height: 1.45em;
  height: auto;
  padding: 0.1rem 0 !important;
}

#JobContent .ep-jp-field__save,
#PhaseContent .ep-jp-field__save,
#DetailsJob .ep-jp-field__save,
#DetailsPhase .ep-jp-field__save {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  margin-left: auto !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: var(--ep-success-soft, rgba(34, 181, 115, 0.12)) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, transform 0.12s ease;
}

#JobContent .ep-jp-field__save:hover,
#PhaseContent .ep-jp-field__save:hover,
#DetailsJob .ep-jp-field__save:hover,
#DetailsPhase .ep-jp-field__save:hover {
  background: rgba(34, 181, 115, 0.22) !important;
}

#JobContent .ep-jp-field__save:active,
#PhaseContent .ep-jp-field__save:active {
  transform: scale(0.96);
}

#JobContent .ep-jp-field__save i,
#PhaseContent .ep-jp-field__save i,
#DetailsJob .ep-jp-field__save i,
#DetailsPhase .ep-jp-field__save i {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--ep-success, #22b573) !important;
}

#JobContent .ep-jp-details > [class*="col-"],
#PhaseContent .ep-jp-details > [class*="col-"] {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

#JobContent .ep-jp-details > [class*="col-"] > .ep-jp-field,
#PhaseContent .ep-jp-details > [class*="col-"] > .ep-jp-field {
  flex: 1 1 auto;
}

@media (max-width: 1199.98px) {
  #JobContent .ep-jp-details > [class*="col-"],
  #PhaseContent .ep-jp-details > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}
#ManageDevicesContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f3fa"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#ManageTabletsContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f3fa"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#ManageTemplatesContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f24d"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }
#SpecialDaysContent .ep-tool-page-header .ep-dash-icon i::before { content: "\f005"; font-weight: 900; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; }

/* Legacy title strips (not yet migrated): still look like card headers, not bare body */
#roots .card.mb-1:has(#txtPageTitle):not(.ep-tool-page-card),
#roots .card.mb-1:has(#txtPageTitleDevices):not(.ep-tool-page-card) {
  margin-bottom: 1rem !important;
  background: #fff !important;
  border: 1px solid rgba(15, 36, 56, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 36, 56, 0.04) !important;
  overflow: hidden !important;
}

#roots .card.mb-1:has(#txtPageTitle):not(.ep-tool-page-card) > .card-body.p-0,
#roots .card.mb-1:has(#txtPageTitleDevices):not(.ep-tool-page-card) > .card-body.p-0 {
  display: flex !important;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.55rem 0.85rem !important;
  min-height: 52px;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ep-border-subtle, #e8eef4) !important;
}

#roots .card.mb-1:has(#txtPageTitle):not(.ep-tool-page-card) > .card-body.p-0::before,
#roots .card.mb-1:has(#txtPageTitleDevices):not(.ep-tool-page-card) > .card-body.p-0::before {
  content: "\f0ad";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ep-primary-soft, rgba(31, 111, 209, 0.12));
  color: var(--ep-primary, #1f6fd1);
  font-size: 0.92rem;
  flex: 0 0 auto;
}

#roots .card.mb-1:has(#txtPageTitle):not(.ep-tool-page-card) ~ hr,
#roots .card.mb-1:has(#txtPageTitleDevices):not(.ep-tool-page-card) ~ hr,
#roots .col-md-12:has(#txtPageTitle) > hr {
  display: none !important;
}

#roots .card.mb-1:has(#txtPageTitle):not(.ep-tool-page-card) #txtPageTitle,
#roots .card.mb-1:has(#txtPageTitleDevices):not(.ep-tool-page-card) #txtPageTitleDevices {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--ep-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Employee Search — compact filter bar above the table                       */
/* -------------------------------------------------------------------------- */

#EmployeesSearchContent .ep-emp-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#EmployeesSearchContent .ep-emp-search-field {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 0 0.15rem 0 0.55rem;
  background: #fff;
  border: 1px solid var(--ep-input-border, #e2e8f0);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#EmployeesSearchContent .ep-emp-search-field:focus-within {
  background: #fff;
  border-color: var(--ep-primary, #1f6fd1);
  box-shadow: 0 0 0 3px rgba(31, 111, 209, 0.14);
}

#EmployeesSearchContent .ep-emp-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #94a3b8;
  line-height: 1;
}

#EmployeesSearchContent .ep-emp-search-icon i,
#EmployeesSearchContent .ep-emp-search-icon .fa-search {
  font-size: 0.9rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

#EmployeesSearchContent .ep-emp-search-input,
#EmployeesSearchContent #InputSearchEmployee {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0.3rem 0.45rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  color: var(--ep-text) !important;
}

#EmployeesSearchContent .ep-emp-search-input:focus,
#EmployeesSearchContent #InputSearchEmployee:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

#EmployeesSearchContent .ep-emp-search-input::placeholder,
#EmployeesSearchContent #InputSearchEmployee::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

#EmployeesSearchContent #InputSearchEmployee::-webkit-search-cancel-button,
#EmployeesSearchContent #InputSearchEmployee::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#EmployeesSearchContent .ep-emp-search-clear,
#EmployeesSearchContent #ClearSearchEmp {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  margin: 0 0.2rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #94a3b8 !important;
  cursor: pointer;
  box-shadow: none !important;
}

#EmployeesSearchContent #ClearSearchEmp.d-none,
#EmployeesSearchContent .ep-emp-search-clear.d-none {
  display: none !important;
}

#EmployeesSearchContent .ep-emp-search-clear i,
#EmployeesSearchContent #ClearSearchEmp i {
  font-size: 0.85rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

#EmployeesSearchContent .ep-emp-search-clear:hover,
#EmployeesSearchContent #ClearSearchEmp:hover {
  color: #64748b !important;
  background: rgba(15, 36, 56, 0.05) !important;
}

/* Exact / Any Part / Start — segmented control */
#EmployeesSearchContent .ep-emp-match-modes {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  background: #f1f5f9;
  border: 1px solid var(--ep-border-subtle, #e8eef4);
  border-radius: 8px;
}

#EmployeesSearchContent .ep-emp-match-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

#EmployeesSearchContent .ep-emp-match-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

#EmployeesSearchContent .ep-emp-match-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.2rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ep-text-secondary, #5a6b7d);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

#EmployeesSearchContent .ep-emp-match-option:hover .ep-emp-match-label {
  color: var(--ep-text, #0f2438);
}

#EmployeesSearchContent .ep-emp-match-option input:checked + .ep-emp-match-label {
  background: #fff;
  color: var(--ep-primary, #1f6fd1);
  box-shadow: 0 1px 2px rgba(15, 36, 56, 0.08);
}

#EmployeesSearchContent .ep-emp-match-option input:focus-visible + .ep-emp-match-label {
  outline: 2px solid rgba(31, 111, 209, 0.35);
  outline-offset: 1px;
}

#EmployeesSearchContent > .row > .col-12 + .col-12 {
  margin-top: 0;
}

@media (max-width: 767.98px) {
  #EmployeesSearchContent .ep-emp-search-bar {
    padding: 0;
  }

  #EmployeesSearchContent .ep-emp-search-field {
    flex: 1 1 100%;
  }

  #EmployeesSearchContent .ep-emp-match-modes {
    width: 100%;
  }

  #EmployeesSearchContent .ep-emp-match-option {
    flex: 1 1 0;
  }

  #EmployeesSearchContent .ep-emp-match-label {
    width: 100%;
  }
}
/* ============================================================
   Dashboard cards: collapse / expand and maximize buttons
   (wwwroot/assets/JsHelpers/DashboardCardTools.js)
   ============================================================ */
.ep-ct-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Expand All / Collapse All in the dashboard top bar — slate outline + text,
   same pattern as Reports / Filter Dashboard (hover keeps a transparent fill). */
#DashboardContent #ThisWeekLabel .ep-ct-all {
  border-color: var(--ep-text-secondary, #5a6b7d) !important;
  color: var(--ep-text-secondary, #5a6b7d) !important;
}

#DashboardContent #ThisWeekLabel .ep-ct-all:hover,
#DashboardContent #ThisWeekLabel .ep-ct-all:focus {
  border-color: var(--ep-text, #1e2a3a) !important;
  color: var(--ep-text, #1e2a3a) !important;
  background: transparent !important;
}
/* The Excel / Print group the buttons join: one row, right-aligned. */
.card-header .ep-ct-actions {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.card-header .ep-ct-actions.d-none {
  display: none !important;
}

/* Those groups sit in narrow fixed Bootstrap columns: size them to the buttons
   and let the title column shrink instead. */
.card-header .ep-ct-actions-col {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.card-header .ep-ct-title-col {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0;
}

.ep-ct-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--ep-border);
  border-radius: 6px;
  background: var(--ep-surface);
  color: var(--ep-text-secondary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s, color .15s, border-color .15s;
}

.ep-ct-btn:hover,
.ep-ct-btn:focus-visible {
  background: var(--ep-primary-soft);
  border-color: var(--ep-primary);
  color: var(--ep-primary);
  outline: none;
}

.card.ep-card-collapsed > .card-header {
  border-bottom: 0;
}

body.ep-card-max-open {
  overflow: hidden;
}


.card.ep-card-max {
  position: fixed !important;
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 1036;
  display: flex;
  flex-direction: column;
  background: var(--ep-surface);
  border-radius: var(--ep-radius);
  /* The huge spread dims the page behind the card (no separate backdrop layer). */
  box-shadow: var(--ep-shadow-md), 0 0 0 100vmax rgba(15, 36, 56, 0.45);
}

.card.ep-card-max > .card-body {
  flex: 1 1 auto;
  overflow: auto;
}

@media (max-width: 575.98px) {
  .card.ep-card-max {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
}