:root {
	/* Single source of truth for LillyXL's brand colors — same hex values as this
	theme's --vz-primary/--vz-secondary/--vz-success/--vz-info/--vz-warning/
	--vz-danger in assets/css/bootstrap.css. Kept as separate --lillyxl-* custom
	properties (rather than reusing --vz-* directly) so this file's colors stay
	stable even if the Bootstrap theme file is regenerated/upgraded. */
	--lillyxl-primary: #8C68CD;
  --lillyxl-primary-hover: #7758AE;
	--lillyxl-secondary: #4788FF;
  --lillyxl-secondary-hover: #3C74D9;
	--lillyxl-success: #40BB82;
  --lillyxl-success-hover: #369F6F;
	--lillyxl-info: #5EBCE6;
  --lillyxl-info-hover: #44ACDB;
	--lillyxl-warning: #FFCA5B;
  --lillyxl-warning-hover: #D9AC4D;
	--lillyxl-danger: #EE6352;
  --lillyxl-danger-hover: #CA5446;
  --lillyxl-disabled: #C6C6C6;
	--lillyxl-dark: #6C6C6C;
	--lillyxl-light: #F9F9F9;
  --lillyxl-light-hover: #D9D9D9;
  --lillyxl-white: #FFFFFF;
  --lillyxl-input-bg: #F3F3F3;
  --lillyxl-input-radius: 8px;
}

/* Fix: Add correct border radius class */
.btn,
.card,
.card-header,
.form-control,
.img-fluid,
.input-group,
.alert {
  border: none;
  border-radius: 8px;
}

/* Fix: .custom-border needs !important to win over Bootstrap's .rounded
   utility (border-radius ... !important), which some elements carry
   alongside .custom-border */
.custom-border {
  border-radius: 8px !important;
  border: none !important; /* Remove any borders */
  box-shadow: none !important; /* Prevent subtle shadows */
}

/* Fix: default-size .input-group-text (e.g. Rate Per Hour's "$" prefix) was
   left out of the block above, so it kept Bootstrap's default 4px corner
   instead of matching the 8px .form-control it's joined to — the sm/lg
   variants below were already fixed, this was the missing base case. */
.input-group-text {
  border-radius: 8px;
}

/* Fix: the Bonus/Allowances/13th Month Pay amount and notes inputs (hris/payroll's
   payroll details modal) use border-warning/border-secondary/border-success to visually
   separate each earnings type, but the ".form-control { border: none; }" rule above
   zeroes out border-width/style site-wide, leaving those color classes nothing to paint -
   so the inputs look invisible against their matching -subtle background. Re-enable just
   the border on these six fields rather than the global .form-control default, which
   every other form-control on the site relies on staying borderless. */
#bonus_input,
#allowances_input,
#thirteenth_month_pay_input,
#bonus_notes_input,
#allowances_notes_input,
#thirteenth_month_pay_notes_input {
  border-width: 1px;
  border-style: solid;
}

/* Fix: .input-group-sm/-lg > .form-control/.input-group-text override the
   border-radius above via Bootstrap's higher-specificity selector */
.input-group-sm > .form-control,
.input-group-sm > .input-group-text,
.input-group-lg > .form-control,
.input-group-lg > .input-group-text {
  border-radius: 8px;
}

/* Fix: flatpickr's hidden backing input is DOM-first, so Bootstrap's
   :not(:first-child) radius-reset wrongly hits the visible alt-input
   that follows it */
.input-group > input[type="hidden"] + .form-control {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

/* Fix: inputs were invisible against white modal/card backgrounds because
   .form-control/.form-select/Select2/SweetAlert2 inputs/flatpickr's
   alt-input all read background from Bootstrap/Velzon's single
   --vz-input-bg-custom variable, which defaults to #fff (see
   assets/css/bootstrap.css .form-control and assets/css/app.css
   .select2-selection--single). Overriding that one variable here fixes
   the background everywhere it's used, in one place, instead of per-view.
   Page-level inputs (outside any modal/SweetAlert popup) get --lillyxl-white -
   .modal/.swal2-popup set the variable again on themselves so their descendant
   inputs inherit the slightly darker --lillyxl-input-bg instead, since those sit on
   a white modal/card background needing more contrast than the plain page does.
   Scoped to light mode only: app.css redefines --vz-input-bg-custom to
   transparent under [data-bs-theme="dark"], and since custom.css loads
   after app.css, a bare :root override here would win the cascade tie and
   leak the light background into dark mode — so dark mode's transparent
   value is restated explicitly to keep it intact. */
:root {
  --vz-input-bg-custom: var(--lillyxl-white);
}
.modal,
.swal2-popup {
  --vz-input-bg-custom: var(--lillyxl-input-bg);
}
/* Login page only (application/views/login.php's <body class="auth-login-page">) -
   its inputs sit on the auth card's own background and need the same slightly darker
   fill as modals/SweetAlert2, not the page-wide white default. */
.auth-login-page {
  --vz-input-bg-custom: var(--lillyxl-input-bg);
}
[data-bs-theme="dark"] {
  --vz-input-bg-custom: transparent;
}

/* Fix: DataTables' generated search box (.dataTables_filter input, every table in the
   system since it's a shared library-generated class, not per-view markup) is a plain
   .form-control and so inherited the gray --vz-input-bg-custom background above - it
   should stay white instead. .form-control:focus (bootstrap.css) re-sets that same gray
   background at equal specificity, so the focus state needs its own override too. */
.dataTables_filter input,
.dataTables_filter input:focus {
  background-color: var(--lillyxl-white);
}

/* Fix: standardize modal and SweetAlert2 popup corners to 8px.
   NOTE: --vz-modal-border-radius can't be overridden via :root — Bootstrap's .modal
   selector (bootstrap.css) sets that custom property directly ON the .modal element
   itself (--vz-modal-border-radius: var(--vz-border-radius-lg), ~4.8px), so
   .modal-content (a child of .modal) always inherits it from that nearer ancestor
   instead of falling back to :root's value. Setting border-radius on .modal-content
   directly sidesteps that variable-scoping entirely. SweetAlert2's .swal2-popup uses
   the shared --vz-border-radius-lg too, but that one also drives unrelated components
   (nav dropdown menus, CKEditor panels), so it's overridden on the selector itself
   rather than via the shared variable, to avoid rounding those other components too. */
.modal-content {
  border-radius: 8px;
  overflow: hidden;
}
.swal2-popup {
  border-radius: 8px;
}

/* Fix: .form-select and Select2's selection box don't inherit the 8px
   radius above (.form-select isn't in that selector list, and Select2's
   selector reads border-radius from vendor CSS.) */
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border-radius: var(--lillyxl-input-radius);
}

/* Fix: Sidebar Icon Sizing - Override minified CSS */
/* Normal expanded sidebar */
.navbar-menu .navbar-nav .nav-link svg {
  width: 18px !important;
  height: 18px !important;
  display: inline-block;
}

/* Collapsed sidebar - larger icons when sidebar is minimized */
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link i {
  font-size: 24px !important;
  min-width: auto !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link i.las,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link i.lar,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link i.lab {
  font-size: 26px !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link svg {
  width: 24px !important;
  height: 24px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  display: block;
  margin: 0 auto;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link img {
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto;
  display: block;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Collapsed sidebar hover - reset to normal size when expanding */
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link {
  justify-content: flex-start !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link i {
  font-size: 18px !important;
  min-width: 1.75rem !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link i.las,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link i.lar,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link i.lab {
  font-size: 20px !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link svg {
  width: 18px !important;
  height: 18px !important;
  margin-right: 0.665rem !important;
  margin-left: 0 !important;
  display: inline-block;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover .nav-link img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 0.665rem !important;
  display: inline-block;
}

/* sm-hover state (initial collapsed state before any hover) */
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link i {
  font-size: 24px !important;
  min-width: auto !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link i.las,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link i.lar,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link i.lab {
  font-size: 26px !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link svg {
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto;
  display: block;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link img {
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto;
  display: block;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .nav-link {
  justify-content: center !important;
}

/* sm-hover state on menu hover - reset to normal when hovering whole menu */
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link {
  justify-content: flex-start !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link i {
  font-size: 18px !important;
  min-width: 1.75rem !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link i.las,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link i.lar,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link i.lab {
  font-size: 20px !important;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link svg {
  width: 18px !important;
  height: 18px !important;
  margin-right: 0.665rem !important;
  margin-left: 0 !important;
  display: inline-block;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm-hover] .navbar-menu:hover .nav-link img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 0.665rem !important;
  display: inline-block;
}

.dashboard-box {
  border-bottom: none !important;
  box-shadow: none !important;
}

.dashboard-box.page-title-box {
  padding: 25px 25px 8px 25px !important; /* top right bottom left */
}
.bg-active-primary-text-white {
  background-color: #540c8b;
  color: var(--lillyxl-white);
}

.gray-card {
  background-color: #f3f3f3;
  padding: 1rem;
  border: none !important; /* Remove any borders */
  box-shadow: none !important; /* Prevent subtle shadows */
}

.gray-card-no-padding {
  background-color: #f3f3f3;
  border: none !important; /* Remove any borders */
  box-shadow: none !important; /* Prevent subtle shadows */
}

.custom-icon-bg {
  background: none;
  padding: 0;
}

.text-secondary-font-style {
  color: #3d046b;
}

.tr-bg-datatable {
  background-color: #d9d9d9;
}

/* Fix: .table-bordered puts a light vertical border between cells
   (--vz-table-border-color), which reads as a white line on this darker
   header background - remove it for header cells only, body rows keep it */
.tr-bg-datatable th {
  border-left: none !important;
  border-right: none !important;
}

/* Fix: table/tr can't render border-radius under border-collapse:collapse;
   round the corner header cells directly instead. Scoped to thead specifically -
   several views (e.g. hris/dtr/employee_dtr.php, financial/index.php) reuse
   .tr-bg-datatable on a <tfoot> "Total" row for the same gray background, and an
   unscoped rule here would wrongly round that row's TOP corners instead of its
   bottom ones, since it's the last visible row, not the first. */
.dataTable thead .tr-bg-datatable th:first-child {
  border-top-left-radius: 8px;
}
.dataTable thead .tr-bg-datatable th:last-child {
  border-top-right-radius: 8px;
}

/* tbody intentionally gets no corner rounding of its own - only the header (top) and,
   when present, the footer (bottom) gray bands are rounded; plain body rows stay square
   regardless of row count or whether a <tfoot> follows. */

/* Fix: when a <tfoot> is present (e.g. a "Total" summary row), it's the table's actual
   bottom edge, so it gets the bottom-corner rounding instead of tbody's last row.
   :first-child/:last-child (not td/th specifically) since these rows mix <th> (e.g. the
   "Total:" label cell) and <td>. */
.dataTable tfoot tr:last-child > :first-child {
  border-bottom-left-radius: 8px;
}
.dataTable tfoot tr:last-child > :last-child {
  border-bottom-right-radius: 8px;
}

/* Fix: with scrollX (used by every DataTable in this codebase per convention),
   DataTables splits the table into 3 separate DOM tables and wraps the cloned
   header/footer in .dataTables_scrollHead / .dataTables_scrollFoot divs, which get
   overflow: hidden via inline style at runtime but no border-radius of their own. That
   sharp-cornered wrapper then clips away any rounding the inner cloned table/cells try
   to apply - the outer clip always wins over the inner curve. Round the wrapper divs
   themselves so their own clip preserves the shape instead of erasing it. */
.dataTables_scrollHead {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.dataTables_scrollFoot {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.btn-gray {
  background-color: #d9d9d9;
}

.btn-gray:hover {
  background-color: #f3f3f3;
}

.status-bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.badge-icon-size {
  width: 82px;
  height: 20px;
}

.badge-admin-color {
  background-color: #a13bdb;
}

/* ========================================
   PRELOADER ENHANCEMENTS
   ======================================== */
/* Smooth fade animations for preloader */
#preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
}

/* Hidden state - use opacity for smooth fade */
#preloader.preloader-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Visible state */
#preloader.preloader-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Spinner container - Override Velzon's absolute positioning */
#preloader #status {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
}

/* Custom spinner with three rotating rings */
.preloader-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: #405189;
  border-radius: 50%;
  animation: spinner-rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
  animation-delay: -0.45s;
  border-top-color: #405189;
}

.spinner-ring:nth-child(2) {
  animation-delay: -0.3s;
  border-top-color: #7b68ee;
  width: 85%;
  height: 85%;
  top: 7.5%;
  left: 7.5%;
}

.spinner-ring:nth-child(3) {
  animation-delay: -0.15s;
  border-top-color: #a13bdb;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Dark theme support */
[data-bs-theme="dark"] #preloader {
  background-color: rgba(30, 30, 46, 0.98);
}

[data-bs-theme="dark"] .spinner-ring:nth-child(1) {
  border-top-color: #7b68ee;
}

[data-bs-theme="dark"] .spinner-ring:nth-child(2) {
  border-top-color: #a13bdb;
}

[data-bs-theme="dark"] .spinner-ring:nth-child(3) {
  border-top-color: #c084fc;
}

/* Prevent body scroll when preloader is active */
body.preloader-active {
  overflow: hidden;
}

/* Page transition optimization */
.page-content {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.page-content.loading {
  opacity: 0.7;
}

/* Accessibility: Ensure focus is not trapped */
#preloader[aria-hidden="true"] {
  pointer-events: none;
}

.badge-instructor-color {
  background-color: var(--lillyxl-secondary);
}

.badge-assistant-color {
  background-color: var(--lillyxl-info);
}

.badge-logout-color {
  background-color: var(--lillyxl-danger);
}

.badge-login-color {
  background-color: var(--lillyxl-warning);
}

.badge-none-color {
  background-color: var(--lillyxl-disabled);
}

.badge-on-time {
  background-color: var(--lillyxl-success);
}

.swal-loading-title {
  color: var(--lillyxl-primary);
  font-weight: bold;
}

 /* Duplicate link icon hover effect */
  .duplicate-icon-img {
    transition: filter 0.3s ease;
    display: inline-block;
  }


/* Delete icon color */
.delete-icon-color {
  color: var(--lillyxl-primary);
}

/* Sidebar */
.sidebar {
  width: 240px;
  background-color: var(--lillyxl-white);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

/* Sidebar default */
.sidebar {
  width: 240px;
  height: 100vh;
  background-color: var(--lillyxl-white);
  transition: width 0.3s ease-in-out;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.apexcharts-pie text {
  fill: #000 !important;
}

.accordion-button {
  color: #8c8c8c;
}
.accordion-button:not(.collapsed) {
  color: #3d046b;
}

.alert.alert-gray {
  background-color: #d9d9d9 !important;
  color: #222 !important;
  border-color: #d9d9d9 !important;
}

/* Keep this for hover effect on inactive links */
.nav-link:hover,
.nav-link:hover svg {
  color: var(--lillyxl-primary) !important;
  
}

/* Add this for the active state */
.nav-link.active,
.nav-link.active svg {
  color: var(--lillyxl-white) !important;
}


/* Active/Inactive status slide switch in all modals */
.status-slide-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.status-slide-switch input:checked + .status-slider {
  background: #67C298; /* Active Green background*/
}

.status-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #7C7C7C; /* Inactive Grey button */
  transition: background 0.3s;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.status-slide-switch input:checked + .status-slider:before {
  transform: translateX(30px);
  background-color: var(--lillyxl-success-hover); /* Inactive Grey button */
}

.status-slider:before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background-color: #C3C3C3; /* Active Green button */
  border-radius: 6px; /* Change from 50px to 6px for square/rounded corners */
  transition: transform 0.3s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}


.status-slide-switch input:checked + .status-slider:after {
  opacity: 1;
}


/* Custome nav-link color */
.nav-pills .nav-link.active.nav-link-green {
  background-color: var(--lillyxl-success) !important;
  color: var(--lillyxl-white) !important;
}

/* HRIS Employee's Dashboard */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Default card has border */
.gray-card-box.card {
  border: 1px solid #e9ecef;
  transition: border-color 0.2s;
}

/* Remove border when accordion is open - use :has() to target the parent card if supported (modern browsers) */
.gray-card.card:has(.accordion-button:not(.collapsed)) {
  border: none !important;
}

.table-container {
  margin: 20px 16px 0 16px; /* Top, right, bottom, left (adjust as needed) */
}

/* ------------------------ Custom Styles for Payroll DataTable ------------------------ */
/* Limit search input width */
.dataTables_filter input[type="search"] {
  width: 250px !important;
  max-width: 250px;
}

/* Ensure table fits container without horizontal scroll */
#payrollTable {
  table-layout: fixed;
  width: 100% !important;
}

/* Prevent horizontal scroll on the table wrapper */
.dataTables_wrapper {
  overflow-x: visible !important;
}

/* DataTable pagination (Bootstrap5 adapter): li.page-item has no box of its own,
   the visible surface is the nested a.page-link */
.paginate_button .page-link {
  color: #171717;
}

.paginate_button.page-item .page-link {
  background: #F9F9F9;
}

.paginate_button.previous .page-link {
  background: #D9D9D9;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.paginate_button.next .page-link {
  background: #D9D9D9;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.paginate_button.page-item.active .page-link {
  /* repoint Bootstrap's own active border-color variable instead of
     redeclaring border geometry, so box sizing never diverges from siblings */
  --vz-pagination-active-border-color: var(--vz-pagination-border-color);
  background: #C3C3C3;
}

/* Adjust DataTable toolbar */
.dt-buttons {
  flex-wrap: wrap;
  gap: 5px;
}

/* Global DataTable button styling (pageLength, copy, csv, excel, pdf, print, colvis).
   DataTables' own buttons.dataTables.min.css targets button.dt-button (element+class)
   with a gradient background, which out-specifies and paints over a plain .dt-button
   rule - !important is required to win regardless of that specificity. */
.dt-button {
  background: #E5E5E5 !important;
  border-radius: 8px !important;
}

/* DataTable Button Velzon Theme Integration */
.dt-button.btn-success,
#teamStatusTable_wrapper .dt-button.btn-success,
.card-body .dt-button.btn-success {
  background-color: var(--lillyxl-success) !important;
  border-color: var(--lillyxl-success) !important;
  color: var(--lillyxl-white) !important;
  border-radius: 8px !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  border: 1px solid transparent !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
}

.dt-button.btn-success:hover,
#teamStatusTable_wrapper .dt-button.btn-success:hover,
.card-body .dt-button.btn-success:hover {
  background-color: var(--lillyxl-success-hover) !important;
  border-color: var(--lillyxl-success-hover) !important;
  color: var(--lillyxl-white) !important;
  transform: none !important;
  box-shadow: none !important;
}

.dt-button.btn-success:focus,
.dt-button.btn-success.focus,
#teamStatusTable_wrapper .dt-button.btn-success:focus,
#teamStatusTable_wrapper .dt-button.btn-success.focus,
.card-body .dt-button.btn-success:focus,
.card-body .dt-button.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(64, 187, 130, 0.25) !important;
  outline: none !important;
}

.dt-button.btn-success:active,
.dt-button.btn-success.active,
#teamStatusTable_wrapper .dt-button.btn-success:active,
#teamStatusTable_wrapper .dt-button.btn-success.active,
.card-body .dt-button.btn-success:active,
.card-body .dt-button.btn-success.active {
  background-color: #339668 !important;
  border-color: #339668 !important;
  color: var(--lillyxl-white) !important;
  transform: none !important;
  box-shadow: none !important;
}

.dt-button.btn-success:disabled,
.dt-button.btn-success.disabled,
#teamStatusTable_wrapper .dt-button.btn-success:disabled,
#teamStatusTable_wrapper .dt-button.btn-success.disabled,
.card-body .dt-button.btn-success:disabled,
.card-body .dt-button.btn-success.disabled {
  background-color: var(--lillyxl-success) !important;
  border-color: var(--lillyxl-success) !important;
  opacity: 0.65 !important;
}

/* Better responsive behavior */
@media (max-width: 768px) {
  .dataTables_filter input[type="search"] {
    width: 200px !important;
  }

  .dt-buttons .btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* Fix table cell wrapping */
#payrollTable td {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Employee name column specific styling */
#payrollTable td:nth-child(2) {
  white-space: normal;
  overflow: visible;
}

/* Custom styling for smaller toast notifications */
.swal2-toast-small {
  max-width: 300px !important;
  min-height: auto !important;
}

.swal2-toast-small .swal2-icon {
  width: 20px !important;
  height: 20px !important;
  margin: 0 8px 0 0 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

.swal2-toast-small .swal2-title {
  margin: 0 !important;
  line-height: 20px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
}

/* Style for when table is muted (no employee selected) */
.table-muted {
  opacity: 0.5;
  pointer-events: none;
}

/* Required field asterisk */
.text-danger {
  color: var(--lillyxl-danger) !important;
}

.swal2-toast-small .swal2-content {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
}

.swal2-toast-small .swal2-html-container {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
/* ------------------------ END Custom Styles for Payroll DataTable ------------------------ */

/* ------------------------ Custom Styles for Dashboards ------------------------ */
#imports_engagement_chart .apexcharts-pie text {
  fill: #343a40 !important;
}

#task_engagement_summary_chart .apexcharts-pie text {
  fill: #343a40 !important;
}

/* Remove all borders and box-shadows from all accordion headers */
.accordion,
.accordion .accordion-item,
.accordion .accordion-header,
.accordion .accordion-button {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Remove background color when accordion is expanded/collapsed */
.accordion .accordion-button:not(.collapsed) {
  background: transparent !important;
  color: inherit;
}

.accordion-button {
  color: #495057 !important;
  /* Default: black */
}

.accordion-button:not(.collapsed) {
  color: var(--lillyxl-primary) !important;
  /* Expanded: var(--lillyxl-primary) */
}

/* Ensure h5 inside accordion-button inherits color */
.accordion-button h5 {
  color: inherit !important;
}

.accordion-item {
  border: none !important;
  box-shadow: none !important;
}
/* ------------------------ END Custom Styles for Dashboards ------------------------ */

/* ------------------------ Custom Styles for Financial ------------------------ */
#course_monthly_royalty_statement_chart_viewMonthlyCourseRoyaltyChartModal {
  height: 370px;
  /* Set a fixed height */
  opacity: 0;
  /* Initially hidden */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity */
}

#loadingSpinner_viewMonthlyCourseRoyaltyChartModal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ------------------------ END Custom Styles for Financial ------------------------ */

/* ------------------------ HRIS Module Custom Styles ------------------------ */

/* Minimalist horizontal scrollbar for the payroll DataTable's scroll body (scrollX: true) */
#payrollTable_wrapper .dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-border-color) transparent;
}

#payrollTable_wrapper .dataTables_scrollBody::-webkit-scrollbar {
    height: 6px;
}

#payrollTable_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
    background: transparent;
}

#payrollTable_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: var(--vz-border-color);
    border-radius: 4px;
}

#payrollTable_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background-color: var(--vz-secondary-color);
}

/* Flatpickr Date Picker Styles */
.flatpickr-date {
    min-width: 110px;
    cursor: pointer;
}

.flatpickr-date:focus {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--vz-primary-rgb), 0.25);
}

/* Flatpickr custom styling to match theme */
.flatpickr-calendar {
    border: 1px solid var(--vz-border-color);
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

.flatpickr-calendar .flatpickr-day.selected {
    background: var(--vz-primary);
    border-color: var(--vz-primary);
}

.flatpickr-calendar .flatpickr-day.selected:hover {
    background: var(--vz-primary-darker);
    border-color: var(--vz-primary-darker);
}

/* Generate Payroll Draft cutoff-date picker: flatpickr has no z-index of its own, so opened
   inside a SweetAlert2 dialog it renders behind the modal's stacking context - raise it above.
   Colors are left on the site's default flatpickr theme (matches every other date picker). */
.payroll-cutoff-calendar.open {
    z-index: 10000 !important;
}

/* Inline filter controls */
.d-flex.gap-2.flex-nowrap {
    white-space: nowrap;
}

/* Status Indicator Styles */
.hris-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.hris-status-indicator.active {
    background-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3);
}

.hris-status-indicator.inactive {
    background-color: #6c757d;
}

.hris-status-indicator.offline {
    background-color: #dc3545;
}

/* Time Display Styling */
.hris-time-display {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

.hris-employee-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* DTR UI Enhancements */
.hris-swal2-toast-success {
    border-left: 4px solid var(--vz-success) !important;
}

#editableTable.hris-table-muted {
    opacity: 0.6;
    pointer-events: none;
}

#editableTable.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

/* Individual DTR Page Enhancements */
.hris-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hris-avatar-lg img:hover {
    transform: scale(1.05);
}

.hris-card-border-primary {
    border-width: 2px;
}

/* Modal styling */
.hris-modal-team-cover {
    width: 500px; 
    height: 100px; 
    background-color: #540C8B;
}

/* Common table column widths */
.hris-table-width-5 { width: 5%; }
.hris-table-width-8 { width: 8%; }
.hris-table-width-10 { width: 10%; }
.hris-table-width-12 { width: 12%; }
.hris-table-width-15 { width: 15%; }
.hris-table-width-20 { width: 20%; }
.hris-table-width-30 { width: 30%; }
.hris-table-width-50 { width: 50px; }
.hris-table-width-80 { width: 80px; }
.hris-table-width-100 { width: 100px; }
.hris-table-width-120 { width: 120px; }
.hris-table-width-160 { width: 160px; }
.hris-table-width-200 { width: 200px; }

/* Form control sizes */
.hris-input-width-80 { width: 80px; }
.hris-form-select-auto { width: auto; }
.hris-form-select-min-100 { min-width: 100px; }
.hris-form-select-min-120 { min-width: 120px; }

/* Background colors - Only custom ones not available in Bootstrap */

/* Avatar sizes - Convert to Bootstrap utilities */
/* Use: w-64 h-64, w-100 h-100, etc. or keep for non-standard sizes */

/* Large avatar container */
.hris-avatar-lg { 
    width: 80px; 
    height: 80px; 
    margin-top: 0;
    margin-bottom: 0;
}

/* Container heights */
.hris-height-280 { min-height: 280px; }
.hris-height-350 { min-height: 350px; }
.hris-height-400 { max-height: 400px; overflow-y: auto; }
.hris-height-300 { max-height: 300px; overflow-y: auto; }

/* Dropdown widths */
.hris-dropdown-300 { min-width: 300px; }

/* Icon sizes */
.hris-icon-75 { width: 75px; height: 75px; }
.hris-icon-100 { width: 100px; height: 100px; }
.hris-icon-120 { width: 120px; height: 120px; }

/* KPI Editor */
.hris-kpi-editor { 
    height: 200px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 10px; 
}

/* Responsive behavior for smaller screens */
@media (max-width: 1200px) {
    .d-flex.gap-2.flex-nowrap {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    
    .flatpickr-date {
        min-width: 100px;
    }
    
    .form-select-sm {
        min-width: 100px !important;
    }
}

@media (max-width: 768px) {
    .table-container {
        margin: 16px 4px 0 4px;
    }

    /* Team status responsive */
    .hris-team-cards-container .col-lg-4 {
        width: 100%;
    }

    /* Chart responsive */
    .hris-main-chart .list-inline-item {
        margin: 0.25rem 0.5rem;
        display: block;
        text-align: center;
    }

    .hris-chart-border-left {
        border-left: none;
        border-top: 1px solid rgba(108, 117, 125, 0.15);
        padding-left: 0;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }

    .hris-chart-border-left.border-0 {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    /* Filter controls responsive */
    .d-flex.gap-2.flex-nowrap {
        flex-direction: column;
        align-items: stretch;
    }
    
    .flatpickr-date, .form-select-sm {
        min-width: auto;
        width: 100%;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
    }

    /* DTR responsive */
    .card-header {
        padding: 1rem;
    }
    
    .btn-label {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .hris-table-responsive {
        font-size: 0.875rem;
    }
    
    .modal-dialog.modal-xl {
        max-width: 95%;
        margin: 1rem auto;
    }
    
    .d-flex.gap-3 {
        gap: 1rem !important;
        flex-wrap: wrap;
    }

    /* Individual DTR responsive */
    .hris-avatar-lg {
        margin-bottom: 1rem;
    }

    .d-flex.flex-wrap.gap-2 {
        justify-content: center;
    }

    .card-body {
        padding: 1rem;
    }

    /* filter-date-action-button */
    .filter-action-btn {
        min-width: 150px; /* consistent width */
        height: 40px; /* consistent height */
        gap: 8px;
        border-radius: 8px;
        padding: 0 16px;
        font-weight: 500;
        font-size: 15px;
    }

    .custom-input,
    .custom-btn {
        height: 48px; /* Or match your preferred height */
        border-radius: 8px;
        font-size: 1rem;
        box-sizing: border-box;
    }
    .custom-btn {
        padding: 0 24px; /* Or your preferred padding */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-secondary:disabled {
        background-color: #6c757d;
        border-color: #6c757d;
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-info:disabled {
        background-color: #0dcaf0;
        border-color: #0dcaf0;
        opacity: 0.5;
        cursor: not-allowed;
    }

    .bg-gray {
        background-color: #d9d9d9;
        border-color: #d9d9d9;
    }

    #clockInTime,
    #clockOutTime {
        font-weight: bold;
        color: #495057;
    }

    .clock-section {
        transition: all 0.3s ease;
    }

    .clock-section:hover {
        transform: translateY(-2px);
    }

    /* Custom styling for Quill editor in SweetAlert */
    .swal2-popup .ql-toolbar {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }

    .swal2-popup .ql-container {
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-radius: 0 0 4px 4px;
    }

    .swal2-popup .ql-editor {
        min-height: 150px;
        font-size: 14px;
    }

    .swal2-popup .ql-editor p,
    .swal2-popup .ql-editor ul,
    .swal2-popup .ql-editor ol {
        margin-bottom: 8px;
    }
    /* End HRIS Employee's Dashboard */

    /* Import Button */
    .custom-import-btn {
        background-color: #c3c3c3 !important;
        color: #222 !important;
        border: none !important;
        transition: background-color 0.2s, color 0.2s;
    }
    .custom-import-btn:hover,
    .custom-import-btn:focus {
        background-color: #ececec !important;
        /* similar to btn-light hover */
        color: #222 !important;
    }
}

/* ------------------------ END HRIS Module Custom Styles ------------------------ */

/* Import Button */
.custom-import-btn {
  background-color: #c3c3c3 !important;
  color: #222 !important;
  border: none !important;
  transition: background-color 0.2s, color 0.2s;
}
.custom-import-btn:hover,
.custom-import-btn:focus {
  background-color: #ececec !important;
  /* similar to btn-light hover */
  color: #222 !important;
}

/* Scalable dropdown switch that aligns to text/container - uses CSS custom properties */
.dropdown-item .form-check {
  /* tweak these to change overall size relative to text */
  --switch-track-w: 1.6em;   /* track width relative to font-size */
  --switch-track-h: 0.9em;   /* track height relative to font-size */
  --switch-knob: 0.8em;      /* knob diameter relative to font-size */
  --switch-gap: 0.5em;       /* spacing between switch and text */
}

.dropdown-item .financial-switch {
  /* native input kept interactive but visually hidden */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-track-w);
  height: var(--switch-track-h);
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

/* visual track */
.dropdown-item .form-check-label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

.dropdown-item .form-check-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-track-w);
  height: var(--switch-track-h);
  background: #7C7C7C; /* inactive */
  border-radius: calc(var(--switch-track-h) / 2);
  transition: background 0.18s ease;
  z-index: 1;
  box-sizing: border-box;
}

/* visual knob */
.dropdown-item .form-check-label::after {
  content: "";
  position: absolute;
  left: calc((var(--switch-track-h) - var(--switch-knob)) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-knob);
  height: var(--switch-knob);
  background: #C3C3C3;
  border-radius: 6px;
  transition: transform 0.18s ease, background 0.18s ease;
  z-index: 2;
}

/* checked state */
.dropdown-item .financial-switch:checked + .form-check-label::before {
  background: #67C298; /* active track */
}
.dropdown-item .financial-switch:checked + .form-check-label::after {
  background: var(--lillyxl-success-hover); /* knob tint */
  transform: translateY(-50%) translateX(calc(var(--switch-track-w) - var(--switch-knob) - ((var(--switch-track-h) - var(--switch-knob)) / 2)));
}

/* accessibility focus */
.dropdown-item .financial-switch:focus + .form-check-label::before {
  box-shadow: 0 0 0 0.08rem rgba(54,159,111,0.12);
}

.form-check.custom-switch {
  position: relative;
  --switch-track-w: 1.6em;   
  --switch-track-h: 0.9em;   
  --switch-knob: 0.7em;      
  
  width: var(--switch-track-w);
  height: var(--switch-track-h);
}

.form-check.custom-switch .form-check-input {
  position: absolute;
  inset: 0;
  width: 90%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
}

/* track */
.form-check.custom-switch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-track-w);
  height: var(--switch-track-h);
  background: #7C7C7C;
  border-radius: calc(var(--switch-track-h) / 2);
  transition: background 0.18s ease;
  z-index: 1;
  overflow: hidden;
}

/* knob */
.form-check.custom-switch::after {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-knob);
  height: var(--switch-knob);
  background: #C3C3C3;
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease;
  z-index: 2;
}

/* checked */
.form-check.custom-switch.checked::before {
  background: #67C298;
}

.form-check.custom-switch.checked::after {
  background: var(--lillyxl-success-hover);
  transform: translateY(-50%) translateX(calc(var(--switch-track-w) - var(--switch-knob) - 0.2em));
}

/* ======================== Course Wizard Stepper ======================== */
/* Modern numbered wizard stepper with progress line */

.wizard-stepper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	padding: 40px 0 70px 0;
	margin: 0 60px;
	gap: 0;
}

.wizard-stepper::before {
	content: '';
	position: absolute;
	top: 60px;
	left: 10%;
	right: 10%;
	height: 3px;
	background: #e9ecef;
	z-index: 1;
}

.wizard-step {
	position: relative;
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wizard-step-circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--lillyxl-white);
	border: 3px solid #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30px auto 20px auto;
	position: relative;
	z-index: 3;
	transition: all 0.3s ease;
	cursor: default;
}

.wizard-step.completed .wizard-step-circle {
	background: #482668;
	border-color: #482668;
	color: var(--lillyxl-white);
}

.wizard-step.active .wizard-step-circle {
	background: #482668;
	border-color: #482668;
	color: var(--lillyxl-white);
	box-shadow: 0 0 0 6px rgba(72, 38, 104, 0.15);
	transform: scale(1.05);
}

.wizard-step.pending .wizard-step-circle {
	background: var(--lillyxl-white);
	border-color: #dee2e6;
	color: #adb5bd;
}

.wizard-step-number {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.wizard-step-icon {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	color: #adb5bd;
	height: 24px;
}

.wizard-step.completed .wizard-step-icon {
	color: #482668;
}

.wizard-step.active .wizard-step-icon {
	color: #482668;
}

.wizard-step.pending .wizard-step-icon {
	color: #adb5bd;
}

.wizard-step-label {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #212529;
	line-height: 1.3;
}

.wizard-step.active .wizard-step-label {
	color: #482668;
}

.wizard-step.pending .wizard-step-label {
	color: #adb5bd;
}

.wizard-step-description {
	font-size: 13px;
	color: #6c757d;
	margin: 0;
	line-height: 1.4;
	max-width: 150px;
}

.wizard-step.active .wizard-step-description {
	color: #6c757d;
}

.wizard-step.pending .wizard-step-description {
	color: #ced4da;
}

.wizard-step-check {
	font-size: 28px;
	line-height: 1;
}

/* Progress line - colored line extends to the RIGHT from each completed/active step */
.wizard-step.completed::after,
.wizard-step.active::after {
	content: '';
	position: absolute;
	top: 60px;
	left: 50%;
	right: -50%;
	height: 3px;
	background: #482668;
	z-index: 2;
}

/* Last step - no line extending right */
.wizard-step:last-child.completed::after,
.wizard-step:last-child.active::after {
	display: none;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
	.wizard-stepper {
		margin: 0 30px;
	}
	
	.wizard-step-description {
		font-size: 12px;
	}
}

/* Responsive - Mobile */
@media (max-width: 768px) {
	.wizard-stepper {
		margin: 0 10px;
		padding: 30px 0 50px 0;
	}
	
	.wizard-step-circle {
		width: 50px;
		height: 50px;
	}
	
	.wizard-step-number {
		font-size: 16px;
	}
	
	.wizard-step-icon {
		font-size: 20px;
		margin-bottom: 6px;
	}
	
	.wizard-step-label {
		font-size: 13px;
	}
	
	.wizard-step-description {
		display: none;
	}
}

	/* Course Wizard Form Styling */
	.wizard-stepper ~ .tab-content .alert {
		border-radius: 8px;
	}

	.wizard-stepper ~ .tab-content .card {
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}

	.wizard-stepper ~ .tab-content .input-group .btn {
		border-radius: 0 8px 8px 0;
	}

	.wizard-stepper ~ .tab-content .badge {
		padding: 6px 12px;
		font-size: 12px;
	}

	.wizard-stepper ~ .tab-content .form-control,
	.wizard-stepper ~ .tab-content .form-select {
		border-radius: 8px;
	}

	.wizard-stepper ~ .tab-content .btn {
		border-radius: 8px;
		transition: all 0.3s ease;
	}

	.wizard-stepper ~ .tab-content .btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}

/* ======================== Form Validation ======================== */
/* Red border for invalid fields */
.is-invalid {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.is-invalid:focus {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ======================== Custom Icon Buttons ======================== */
.circle-checkbox {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #bbb;
	background: var(--lillyxl-white);
	outline: none;
	cursor: pointer;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	transition: border 0.2s, background 0.2s;
}

.circle-checkbox:checked {
	background-color: #bbb;
	border: 2px solid #bbb;
}

.circle-checkbox:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--lillyxl-white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	display: block;
}

.circle-checkbox+label {
	display: inline-block;
	width: 24px;
	height: 24px;
	cursor: pointer;
	vertical-align: middle;
}

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

.custom-violet-badge {
	background-color: var(--lillyxl-primary) !important;
	color: var(--lillyxl-white);
}

.custom-icon-linked {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url('../icons/link.svg') no-repeat center center;
	background-size: 24px 24px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	outline: none;
	transition: background-color 0.2s, opacity 0.2s;
	vertical-align: middle;
}

.custom-icon-linked:hover:not(:disabled) {
	background: url('../icons/link-hover.svg') no-repeat center center;
	background-size: 24px 24px;
}

.custom-icon-linked:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: grayscale(100%);
}

.nav-pills-bottom .nav-link.active {
	background-color: var(--lillyxl-success) !important;
	color: var(--lillyxl-white) !important;
}



.sway {
	animation: sway 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
	transform-origin: 50% 10%;
}

@keyframes sway {
	0% {
		transform: rotate(-10deg);
	}

	20% {
		transform: rotate(7deg);
	}

	40% {
		transform: rotate(-7deg);
	}

	60% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(-10deg);
	}
}

/* Custom striped table */
.custom-striped-table tbody tr:nth-of-type(odd) {
	background-color: var(--lillyxl-light) !important;
}

.custom-striped-table tbody tr:nth-of-type(even) {
	background-color: #EEEEEE !important;
}

/* Subtle vertical borders: match horizontal line color/strength */
.custom-striped-table th,
.custom-striped-table td {
	border-right: 0.5px solid #dee2e6;
	/* match Bootstrap horizontal border */
}

/* Remove the right border on the last column */
.custom-striped-table th:last-child,
.custom-striped-table td:last-child {
	border-right: none;
}

.circle-checkbox {
	cursor: pointer;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	/* Aligns with text/baseline in table cell */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	/* No fill when unchecked */
	border: 1.5px solid #808080;
	/* Gray border when unchecked */
	transition: border-color 0.2s, background-color 0.2s;
	position: relative;
	margin-top: 0;
	/* Remove extra vertical offset */
	display: inline-block;
	outline: none;
}

/* Checked state: fully filled violet, no white */
.circle-checkbox:checked {
	background-color: var(--lillyxl-primary);
	border-color: var(--lillyxl-primary);
}

/* Remove any native checkmark */
.circle-checkbox:checked::after {
	display: none;
}

.circle-checkbox:focus {
	box-shadow: none;
	outline: none;
}

.form-check-margin {
	margin-top: 3px;
}

.circle-checkbox-disabled {
	cursor: pointer;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	/* Aligns with text/baseline in table cell */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	background-color: #c3c3c3;
	border-color: #c3c3c3;
	/* Gray border when unchecked */
	transition: border-color 0.2s, background-color 0.2s;
	position: relative;
	margin-top: 0;
	/* Remove extra vertical offset */
	display: inline-block;
	outline: none;
}

/* Download file */
.custom-icon-download-file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	background-color: #D9D9D9;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	text-decoration: none;
	transition: background-color 0.2s;
	box-sizing: border-box;
	white-space: nowrap;
	min-width: 0;
}

.custom-icon-download-file:before {
	content: "";
	display: inline-block;
	width: 18px;
	/* icon size */
	height: 18px;
	background: url('../icons/download-file.svg') no-repeat center center;
	background-size: 18px 18px;
	flex-shrink: 0;
	vertical-align: middle;
}

/* view-data-icon */
.custom-icon-view-data {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url('../icons/file.svg') no-repeat center center;
	background-size: 24px 24px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-view-data:hover {
	background: url('../icons/file.svg') no-repeat center center;
	background-size: 24px 24px;
	opacity: 0.6;
}



/* Check (Approve) */
.custom-icon-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
	font-size: 20px;
	color: #28a745;
}

.custom-icon-check:before {
	content: "\eb7b";
	font-family: 'remixicon' !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
}

.custom-icon-check:hover {
	background-color: rgba(40, 167, 69, 0.1);
}

.custom-icon-check:disabled {
	opacity: 0.5;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* Close (Reject) */
.custom-icon-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
	font-size: 20px;
	color: #dc3545;
}

.custom-icon-close:before {
	content: "\eb99";
	font-family: 'remixicon' !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
}

.custom-icon-close:hover {
	background-color: rgba(220, 53, 69, 0.1);
}

.custom-icon-close:disabled {
	opacity: 0.5;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* ======================== Main Action Buttons ======================== */
/* View */
.custom-icon-view {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-secondary);
	-webkit-mask: url('../icons/file.svg') no-repeat center center;
	mask: url('../icons/file.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-view:hover {
	background-color: var(--lillyxl-secondary);
	filter: brightness(0.80);
}

.custom-icon-view:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-view {
	text-decoration: none;
}

/* Update */
.custom-icon-update {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-primary);
	-webkit-mask: url('../icons/update.svg') no-repeat center center;
	mask: url('../icons/update.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-update:hover {
	background-color: var(--lillyxl-primary);
	filter: brightness(0.80);
}

.custom-icon-update:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-update {
	text-decoration: none;
}

/* Remove */
.custom-icon-remove {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-danger);
	-webkit-mask: url('../icons/remove.svg') no-repeat center center;
	mask: url('../icons/remove.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-remove:hover {
	background-color: var(--lillyxl-danger);
	filter: brightness(0.80);
}

.custom-icon-remove:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-remove {
	text-decoration: none;
}

/* ======================== LillyXL Custom Buttons ======================== */
/* LinkedIn */
.custom-icon-linkedin {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-secondary);
	-webkit-mask: url('../icons/linkedin.svg') no-repeat center center;
	mask: url('../icons/linkedin.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-linkedin:hover {
	background-color: var(--lillyxl-secondary);
	filter: brightness(0.80);
}

.custom-icon-linkedin:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-linkedin {
	text-decoration: none;
}

/* Reanalyze */
.custom-icon-reanalyze {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-warning);
	-webkit-mask: url('../icons/reanalyze.svg') no-repeat center center;
	mask: url('../icons/reanalyze.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-reanalyze:hover {
	background-color: var(--lillyxl-warning);
	filter: brightness(0.80);
}

.custom-icon-reanalyze:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-reanalyze {
	text-decoration: none;
}

/* Backup */
.custom-icon-backup {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-dark);
	-webkit-mask: url('../icons/backup.svg') no-repeat center center;
	mask: url('../icons/backup.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-backup:hover {
	background-color: var(--lillyxl-dark);
	filter: brightness(0.80);
}

.custom-icon-backup:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-backup {
	text-decoration: none;
}

/* Booklet */
.custom-icon-booklet {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-primary);
	-webkit-mask: url('../icons/booklet.svg') no-repeat center center;
	mask: url('../icons/booklet.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-booklet:hover {
	background-color: var(--lillyxl-primary);
	filter: brightness(0.80);
}

.custom-icon-booklet:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-booklet {
	text-decoration: none;
}

/* Chart */
.custom-icon-chart {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-primary);
	-webkit-mask: url('../icons/chart.svg') no-repeat center center;
	mask: url('../icons/chart.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-chart:hover {
	background-color: var(--lillyxl-primary);
	filter: brightness(0.80);
}

.custom-icon-chart:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-chart {
	text-decoration: none;
}

/* Task */
.custom-icon-task {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-light);
	-webkit-mask: url('../icons/document-text.svg') no-repeat center center;
	mask: url('../icons/document-text.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-task:hover {
	background-color: var(--lillyxl-light);
	filter: brightness(0.80);
}

.custom-icon-task:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-task {
	text-decoration: none;
}

/* ======================== LillyXL HRIS Custom Buttons ======================== */
/* View Individual DTR Data */
.custom-icon-view-individual-dtr-data {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-success);
	-webkit-mask: url('../icons/arrow.svg') no-repeat center center;
	mask: url('../icons/arrow.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-view-individual-dtr-data:hover {
	background-color: var(--lillyxl-success);
	filter: brightness(0.80);
}

.custom-icon-view-individual-dtr-data:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-view-individual-dtr-data {
	text-decoration: none;
}

/* HRIS Time Adjustment */
.custom-icon-hris-time-adjustment {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-info);
	-webkit-mask: url('../icons/clock.svg') no-repeat center center;
	mask: url('../icons/clock.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-hris-time-adjustment:hover {
	background-color: var(--lillyxl-info);
	filter: brightness(0.80);
}

.custom-icon-hris-time-adjustment:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-hris-time-adjustment {
	text-decoration: none;
}

/* Payslip */
.custom-icon-payslip {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-success);
	-webkit-mask: url('../icons/payslip.svg') no-repeat center center;
	mask: url('../icons/payslip.svg') no-repeat center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-payslip:hover {
	background-color: var(--lillyxl-success);
	filter: brightness(0.80);
}

.custom-icon-payslip:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-payslip {
	text-decoration: none;
}

/* Payment URL */
.custom-icon-payment-url {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--lillyxl-info);
	-webkit-mask: url('../icons/external-link.svg') no-repeat center center;
	mask: url('../icons/external-link.svg') no-repeat center center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	border: none;
	cursor: pointer;
	padding: 0;
	outline: none;
	border-radius: 50%;
	transition: background-color 0.2s;
	vertical-align: middle;
}

.custom-icon-payment-url:hover {
	background-color: var(--lillyxl-info);
	filter: brightness(0.80);
}

.custom-icon-payment-url:disabled {
	background-color: var(--lillyxl-disabled);
	cursor: not-allowed;
}

a.custom-icon-payment-url {
	text-decoration: none;
}

/* Fix: this card has no .card-body, only a .card-header, so Bootstrap's default
   .card-header { border-bottom: ... } reads as a stray line under the whole card instead of
   separating a header from body content below it. Scoped to this one dashboard card
   (application/views/hris/dashboard/dashboard_employee.php's clock in/out row) via a
   dedicated class, not .gray-card/.card-height, since both of those are shared by 50+ other
   cards across the system and removing this border there would be an unrelated, unintended
   change. */
.dtr-clock-card .card-header {
	border-bottom: none;
}

/* ======================== Centralized Icons with Labels Button ========================*/
.custom-icon-refresh::before {
	content: '';
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url('../icons/refresh-2.svg') no-repeat center / contain;
	mask: url('../icons/refresh-2.svg') no-repeat center / contain;
}

.custom-icon-clock-in::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url('../icons/clock-in.svg') no-repeat center / contain;
	mask: url('../icons/clock-in.svg') no-repeat center / contain;
}

.custom-icon-clock-out::before {
  margin-left: 0.5em;
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url('../icons/clock-out.svg') no-repeat center / contain;
	mask: url('../icons/clock-out.svg') no-repeat center / contain;
}

.custom-icon-pause::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url('../icons/pause.svg') no-repeat center / contain;
	mask: url('../icons/pause.svg') no-repeat center / contain;
}

.custom-icon-resume::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.1em;
	background-color: currentColor;
	-webkit-mask: url('../icons/resume.svg') no-repeat center / contain;
	mask: url('../icons/resume.svg') no-repeat center / contain;
}

.custom-icon-modal-save::before,
.custom-icon-modal-close::before,
.custom-icon-modal-remove::before,
.custom-icon-modal-clock-in::before,
.custom-icon-modal-clock-out::before,
.custom-icon-modal-pause::before,
.custom-icon-modal-resume::before,
.custom-icon-modal-check::before,
.custom-icon-modal-refresh::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
  margin-inline-end: 0.5rem;
}

.custom-icon-modal-save::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/save_button_icon.svg') no-repeat center / contain;
	mask: url('../icons/save_button_icon.svg') no-repeat center / contain;
}

.custom-icon-modal-close::before {
	width: 0.75em;
	height: 0.75em;
	-webkit-mask: url('../icons/close_button_icon.svg') no-repeat center / contain;
	mask: url('../icons/close_button_icon.svg') no-repeat center / contain;
}

.custom-icon-modal-remove::before {
	width: 1.25em;
	height: 1.25em;
	-webkit-mask: url('../icons/trash-white.svg') no-repeat center / contain;
	mask: url('../icons/trash-white.svg') no-repeat center / contain;
}

.custom-icon-modal-clock-in::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/clock-in.svg') no-repeat center / contain;
	mask: url('../icons/clock-in.svg') no-repeat center / contain;
}

.custom-icon-modal-clock-out::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/clock-out.svg') no-repeat center / contain;
	mask: url('../icons/clock-out.svg') no-repeat center / contain;
}

.custom-icon-modal-pause::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/pause.svg') no-repeat center / contain;
	mask: url('../icons/pause.svg') no-repeat center / contain;
}

.custom-icon-modal-resume::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/resume.svg') no-repeat center / contain;
	mask: url('../icons/resume.svg') no-repeat center / contain;
}

.custom-icon-modal-check::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/check.svg') no-repeat center / contain;
	mask: url('../icons/check.svg') no-repeat center / contain;
}

.custom-icon-modal-refresh::before {
	width: 1em;
	height: 1em;
	-webkit-mask: url('../icons/refresh-2.svg') no-repeat center / contain;
	mask: url('../icons/refresh-2.svg') no-repeat center / contain;
}

/* Save-button modifier for modals that confirm a money-affecting or already-approved
   action (payroll approval, loan disbursement) — keeps the existing green "this is a
   bigger deal" signal those two buttons already gave before this centralization. */
.custom-icon-modal-save.is-success {
	background-color: var(--lillyxl-success);
}

.custom-icon-modal-save.is-success:hover {
	background-color: var(--lillyxl-success-hover);
}

/* Submitted payroll status badge - same gray as the DataTable header (.tr-bg-datatable,
   #d9d9d9), but defined at top level unlike .bg-gray a few hundred lines up (that one
   only lives inside a max-width: 768px media query, so it has no effect at all on
   desktop - deliberately not "fixing" that one here since it also backs the unrelated
   "Unpaid" DTR badges elsewhere and wasn't part of this ask). */
.bg-gray-fixed {
	background-color: #d9d9d9;
	border-color: #d9d9d9;
}

/* Payroll table: tints a row still awaiting payment (submitted/approved) with the
   standard warning-subtle color, so it reads back to normal once paid. The table's own
   #id is needed here to outrank table-striped's tbody tr:nth-of-type(odd) zebra rule,
   which otherwise wins over a plain class on the row. */
#payrollTable tbody tr.payroll-row-pending > td {
	background-color: var(--vz-warning-bg-subtle);
}

/* Employee DTR roster: same "needs attention" treatment for employees flagged by the
   Auto Clock-out Records dashboard reminder. Same #id-for-specificity reasoning as
   #payrollTable above, to outrank table-striped's zebra rule. */
#manageTable tbody tr.dtr-row-needs-review > td {
	background-color: var(--vz-warning-bg-subtle);
}

/* Individual employee DTR page (#manageTable) and the employee's own dashboard DTR
   table (#dtrTable): a specific row still carrying the unedited auto clock-out KPI
   placeholder gets a danger tint, so it's obvious which record needs attention. */
#manageTable tbody tr.dtr-row-danger > td,
#dtrTable tbody tr.dtr-row-danger > td {
	background-color: var(--vz-danger-bg-subtle);
}