/**
 * Bootstrap-compatible utilities scoped to HRIS / Payroll / ESS pages.
 * Matches Inulvista class names so Blade UI can move here without rewriting CSS.
 * Theme tokens follow html.dark (see useTheme).
 */
:root {
  --hris-primary: #696cff;
  --hris-primary-hover: #5f61e6;
  --hris-primary-soft: #eef0ff;
  --hris-border: rgba(67, 89, 113, 0.12);
  --hris-border-strong: #d9dee3;
  --hris-muted: #a1acb8;
  --hris-text: #566a7f;
  --hris-heading: #433f5a;
  --hris-danger: #ff3e1d;
  --hris-success: #71dd37;
  --hris-warning: #ffab00;
  --hris-info: #03c3ec;
  --hris-surface: #ffffff;
  --hris-surface-2: #f5f5f9;
  --hris-surface-3: #f0f1ff;
  --hris-input-bg: #ffffff;
  --hris-input-border: #d9dee3;
  --hris-table-stripe: rgba(67, 89, 113, 0.03);
  --hris-table-head: #a1acb8;
  --hris-shadow: 0 2px 12px rgba(67, 89, 113, 0.1);
  --hris-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.03);
  --hris-chip-bg: #ffffff;
  --hris-chip-on: #696cff;
  --hris-seg-bg: #f3f4f8;
  --hris-kpi-icon-bg: #f0f1ff;
  --hris-kpi-icon: #696cff;
  --hris-hover: #f8f8fc;
  --hris-row-hover: rgba(105, 108, 255, 0.06);
}

html.dark {
  --hris-primary: #818cf8;
  --hris-primary-hover: #a5b4fc;
  --hris-primary-soft: rgba(129, 140, 248, 0.16);
  --hris-border: rgba(255, 255, 255, 0.08);
  --hris-border-strong: #404040;
  --hris-muted: #94a3b8;
  --hris-text: #cbd5e1;
  --hris-heading: #f1f5f9;
  --hris-danger: #f87171;
  --hris-success: #4ade80;
  --hris-warning: #fbbf24;
  --hris-info: #22d3ee;
  --hris-surface: #171717;
  --hris-surface-2: #262626;
  --hris-surface-3: #1f1f23;
  --hris-input-bg: #0a0a0a;
  --hris-input-border: #404040;
  --hris-table-stripe: rgba(255, 255, 255, 0.03);
  --hris-table-head: #94a3b8;
  --hris-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  --hris-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
  --hris-chip-bg: #262626;
  --hris-chip-on: #818cf8;
  --hris-seg-bg: #0a0a0a;
  --hris-kpi-icon-bg: rgba(129, 140, 248, 0.16);
  --hris-kpi-icon: #a5b4fc;
  --hris-hover: #262626;
  --hris-row-hover: rgba(129, 140, 248, 0.1);
}

.hris-page,
.pay-page,
.ess,
.hris-modal-root {
  color: var(--hris-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.hris-page .container-fluid,
.pay-page.container-fluid {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.hris-page .container-p-y,
.pay-page.container-p-y {
  padding-top: 0.25rem;
  padding-bottom: 1.5rem;
}

/* Flex / spacing */
.hris-page .d-flex,
.pay-page .d-flex,
.hris-modal-root .d-flex,
.ess .d-flex { display: flex !important; }
.hris-page .d-none, .pay-page .d-none, .hris-modal-root .d-none { display: none !important; }
.hris-page .flex-wrap, .pay-page .flex-wrap, .hris-modal-root .flex-wrap { flex-wrap: wrap !important; }
.hris-page .flex-grow-1, .pay-page .flex-grow-1, .hris-modal-root .flex-grow-1 { flex-grow: 1 !important; }
.hris-page .justify-content-between, .pay-page .justify-content-between, .hris-modal-root .justify-content-between { justify-content: space-between !important; }
.hris-page .justify-content-end, .pay-page .justify-content-end, .hris-modal-root .justify-content-end { justify-content: flex-end !important; }
.hris-page .align-items-start, .pay-page .align-items-start, .hris-modal-root .align-items-start { align-items: flex-start !important; }
.hris-page .align-items-end, .pay-page .align-items-end, .hris-modal-root .align-items-end { align-items: flex-end !important; }
.hris-page .align-items-center, .pay-page .align-items-center, .hris-modal-root .align-items-center { align-items: center !important; }
.hris-page .gap-2, .pay-page .gap-2, .hris-modal-root .gap-2 { gap: 0.5rem !important; }
.hris-page .gap-3, .pay-page .gap-3, .hris-modal-root .gap-3 { gap: 1rem !important; }
.hris-page .ms-auto, .pay-page .ms-auto, .hris-modal-root .ms-auto { margin-left: auto !important; }
.hris-page .me-1, .pay-page .me-1, .hris-modal-root .me-1, .ess .me-1 { margin-right: 0.25rem !important; }
.hris-page .mb-0, .pay-page .mb-0, .hris-modal-root .mb-0 { margin-bottom: 0 !important; }
.hris-page .mb-1, .pay-page .mb-1, .hris-modal-root .mb-1 { margin-bottom: 0.25rem !important; }
.hris-page .mb-3, .pay-page .mb-3, .hris-modal-root .mb-3 { margin-bottom: 1rem !important; }
.hris-page .mb-4, .pay-page .mb-4, .hris-modal-root .mb-4 { margin-bottom: 1.5rem !important; }
.hris-page .mt-1, .pay-page .mt-1, .hris-modal-root .mt-1 { margin-top: 0.25rem !important; }
.hris-page .mt-2, .pay-page .mt-2, .hris-modal-root .mt-2 { margin-top: 0.5rem !important; }
.hris-page .mt-3, .pay-page .mt-3, .hris-modal-root .mt-3 { margin-top: 1rem !important; }
.hris-page .pt-3, .pay-page .pt-3, .hris-modal-root .pt-3 { padding-top: 1rem !important; }
.hris-page .pb-0, .pay-page .pb-0, .hris-modal-root .pb-0 { padding-bottom: 0 !important; }
.hris-page .w-100, .pay-page .w-100, .hris-modal-root .w-100 { width: 100% !important; }
.hris-page .text-end, .pay-page .text-end, .hris-modal-root .text-end { text-align: right !important; }
.hris-page .text-center, .pay-page .text-center, .hris-modal-root .text-center { text-align: center !important; }
.hris-page .text-muted, .pay-page .text-muted, .hris-modal-root .text-muted { color: var(--hris-muted) !important; }
.hris-page .text-danger, .pay-page .text-danger, .hris-modal-root .text-danger { color: var(--hris-danger) !important; }
.hris-page .text-uppercase, .pay-page .text-uppercase, .hris-modal-root .text-uppercase { text-transform: uppercase !important; }
.hris-page .text-white, .pay-page .text-white { color: #fff !important; }
.hris-page .text-dark, .pay-page .text-dark { color: var(--hris-heading) !important; }
.hris-page .border-0, .pay-page .border-0, .hris-modal-root .border-0 { border: 0 !important; }

@media (min-width: 992px) {
  .hris-page .d-lg-block, .pay-page .d-lg-block { display: block !important; }
}

/* Grid */
.hris-page .row,
.pay-page .row,
.hris-modal-root .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
.hris-page .row.g-2 > *, .pay-page .row.g-2 > *, .hris-modal-root .row.g-2 > * { padding: 0.25rem; }
.hris-page .row.g-3 > *, .pay-page .row.g-3 > *, .hris-modal-root .row.g-3 > * { padding: 0.5rem; }
.hris-page .row > [class*="col-"],
.pay-page .row > [class*="col-"],
.hris-modal-root .row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.hris-page .col-12, .pay-page .col-12, .hris-modal-root .col-12 { flex: 0 0 100%; max-width: 100%; }
.hris-page .col-6, .pay-page .col-6, .hris-modal-root .col-6 { flex: 0 0 50%; max-width: 50%; }
.hris-page .col-md-1, .pay-page .col-md-1, .hris-modal-root .col-md-1,
.hris-page .col-md-2, .pay-page .col-md-2, .hris-modal-root .col-md-2,
.hris-page .col-md-3, .pay-page .col-md-3, .hris-modal-root .col-md-3,
.hris-page .col-md-4, .pay-page .col-md-4, .hris-modal-root .col-md-4,
.hris-page .col-md-6, .pay-page .col-md-6, .hris-modal-root .col-md-6,
.hris-page .col-md-8, .pay-page .col-md-8, .hris-modal-root .col-md-8,
.hris-page .col-lg-4, .pay-page .col-lg-4, .hris-modal-root .col-lg-4,
.hris-page .col-lg-5, .pay-page .col-lg-5, .hris-modal-root .col-lg-5,
.hris-page .col-lg-7, .pay-page .col-lg-7, .hris-modal-root .col-lg-7,
.hris-page .col-lg-8, .pay-page .col-lg-8, .hris-modal-root .col-lg-8,
.hris-page .col-sm-6, .pay-page .col-sm-6,
.hris-page .col-xl-3, .pay-page .col-xl-3,
.hris-page .col-xl-4, .pay-page .col-xl-4 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
  .hris-page .col-sm-6, .pay-page .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  .hris-page .col-md-1, .pay-page .col-md-1, .hris-modal-root .col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; }
  .hris-page .col-md-2, .pay-page .col-md-2, .hris-modal-root .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
  .hris-page .col-md-3, .pay-page .col-md-3, .hris-modal-root .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .hris-page .col-md-4, .pay-page .col-md-4, .hris-modal-root .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .hris-page .col-md-6, .pay-page .col-md-6, .hris-modal-root .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .hris-page .col-md-8, .pay-page .col-md-8, .hris-modal-root .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}
@media (min-width: 992px) {
  .hris-page .col-lg-4, .pay-page .col-lg-4, .hris-modal-root .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .hris-page .col-lg-5, .pay-page .col-lg-5, .hris-modal-root .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; }
  .hris-page .col-lg-7, .pay-page .col-lg-7, .hris-modal-root .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
  .hris-page .col-lg-8, .pay-page .col-lg-8, .hris-modal-root .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}
@media (min-width: 1200px) {
  .hris-page .col-xl-3, .pay-page .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .hris-page .col-xl-4, .pay-page .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; }
}

/* Buttons */
.hris-page .btn,
.pay-page .btn,
.hris-modal-root .btn,
.ess .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  transition: all .15s ease;
  background: transparent;
  color: var(--hris-text);
  text-decoration: none;
}
.hris-page .btn:disabled,
.pay-page .btn:disabled,
.hris-modal-root .btn:disabled { opacity: .55; pointer-events: none; }
.hris-page .btn-sm, .pay-page .btn-sm, .hris-modal-root .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
.hris-page .btn-primary, .pay-page .btn-primary, .hris-modal-root .btn-primary {
  background: var(--hris-primary);
  border-color: var(--hris-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(105, 108, 255, 0.35);
}
.hris-page .btn-primary:hover, .pay-page .btn-primary:hover, .hris-modal-root .btn-primary:hover {
  background: var(--hris-primary-hover);
  border-color: var(--hris-primary-hover);
  color: #fff;
}
.hris-page .btn-success, .pay-page .btn-success, .hris-modal-root .btn-success {
  background: #71dd37; border-color: #71dd37; color: #fff;
}
.hris-page .btn-outline-secondary, .pay-page .btn-outline-secondary, .hris-modal-root .btn-outline-secondary {
  border-color: var(--hris-input-border); color: var(--hris-text); background: var(--hris-surface);
}
.hris-page .btn-outline-secondary:hover, .pay-page .btn-outline-secondary:hover, .hris-modal-root .btn-outline-secondary:hover {
  background: var(--hris-surface-2); color: var(--hris-heading);
}
.hris-page .btn-outline-danger, .pay-page .btn-outline-danger, .hris-modal-root .btn-outline-danger {
  border-color: color-mix(in srgb, var(--hris-danger) 35%, transparent); color: var(--hris-danger); background: var(--hris-surface);
}
.hris-page .btn-outline-warning, .pay-page .btn-outline-warning, .hris-modal-root .btn-outline-warning {
  border-color: color-mix(in srgb, var(--hris-warning) 40%, transparent); color: var(--hris-warning); background: var(--hris-surface);
}
.hris-page .btn-outline-primary, .pay-page .btn-outline-primary, .hris-modal-root .btn-outline-primary {
  border-color: color-mix(in srgb, var(--hris-primary) 40%, transparent); color: var(--hris-primary); background: var(--hris-surface);
}

/* Forms */
.hris-page .form-label,
.pay-page .form-label,
.hris-modal-root .form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hris-text);
}
.hris-page .form-control,
.hris-page .form-select,
.pay-page .form-control,
.pay-page .form-select,
.hris-modal-root .form-control,
.hris-modal-root .form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hris-heading);
  background-color: var(--hris-input-bg);
  border: 1px solid var(--hris-input-border);
  border-radius: 0.375rem;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  color-scheme: light dark;
}
html.dark .hris-page .form-control,
html.dark .hris-page .form-select,
html.dark .pay-page .form-control,
html.dark .pay-page .form-select,
html.dark .hris-modal-root .form-control,
html.dark .hris-modal-root .form-select {
  color-scheme: dark;
  background-color: var(--hris-input-bg);
  border-color: var(--hris-input-border);
  color: var(--hris-heading);
}
.hris-page .form-control::placeholder,
.pay-page .form-control::placeholder,
.hris-modal-root .form-control::placeholder {
  color: var(--hris-muted);
}
.hris-page .form-control:focus,
.hris-page .form-select:focus,
.pay-page .form-control:focus,
.pay-page .form-select:focus,
.hris-modal-root .form-control:focus,
.hris-modal-root .form-select:focus {
  border-color: var(--hris-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--hris-primary) 25%, transparent);
}
.hris-page .form-select option,
.pay-page .form-select option,
.hris-modal-root .form-select option {
  background: var(--hris-surface);
  color: var(--hris-heading);
}
.hris-page .form-text,
.pay-page .form-text,
.hris-modal-root .form-text {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--hris-muted);
}
.hris-page .form-check,
.pay-page .form-check,
.hris-modal-root .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.4rem;
}
.hris-page .form-check-input,
.pay-page .form-check-input,
.hris-modal-root .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--hris-primary);
}
.hris-page .form-switch .form-check-input,
.pay-page .form-switch .form-check-input,
.hris-modal-root .form-switch .form-check-input {
  width: 2.2rem;
  height: 1.2rem;
}
.hris-page .form-check-label,
.pay-page .form-check-label,
.hris-modal-root .form-check-label { margin: 0; cursor: pointer; }

/* Cards / tables */
.hris-page .card,
.pay-page .card {
  background: var(--hris-surface);
  color: var(--hris-text);
  border: 1px solid var(--hris-border);
  border-radius: 0.5rem;
  box-shadow: var(--hris-shadow);
}
.hris-page .card-body,
.pay-page .card-body { padding: 1.25rem 1.35rem; }
.hris-page .card-title,
.pay-page .card-title { font-size: 0.875rem; margin-bottom: 0.25rem; color: var(--hris-muted); }
.hris-page .card-text,
.pay-page .card-text { font-size: 1.5rem; font-weight: 700; color: var(--hris-heading); }
.hris-page .bg-info { background: var(--hris-info) !important; }
.hris-page .bg-warning { background: var(--hris-warning) !important; }
.hris-page .bg-success { background: var(--hris-success) !important; }
.hris-page .bg-danger { background: var(--hris-danger) !important; }
.hris-page .table-responsive,
.pay-page .table-responsive { overflow-x: auto; width: 100%; }
.hris-page .table,
.pay-page .table,
.hris-modal-root .table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  color: var(--hris-text);
  background: transparent;
}
.hris-page .table th,
.hris-page .table td,
.pay-page .table th,
.pay-page .table td,
.hris-modal-root .table th,
.hris-modal-root .table td {
  padding: 0.85rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--hris-border);
  font-size: 0.875rem;
  background: transparent;
  color: inherit;
}
.hris-page .table thead th,
.pay-page .table thead th,
.hris-modal-root .table thead th {
  font-weight: 600;
  color: var(--hris-table-head);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-bottom-width: 1px;
  background: transparent;
}
.hris-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.pay-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.hris-modal-root .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: var(--hris-table-stripe);
}
.hris-page .table tbody tr:hover > *,
.pay-page .table tbody tr:hover > *,
.hris-modal-root .table tbody tr:hover > * {
  background: var(--hris-row-hover);
}
.hris-page .table-borderless th,
.hris-page .table-borderless td,
.pay-page .table-borderless th,
.pay-page .table-borderless td { border: 0; }

/* Tabs */
.hris-page .nav-pills,
.pay-page .nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.hris-page .nav-pills .nav-link,
.pay-page .nav-pills .nav-link {
  border: 0;
  background: transparent;
  color: var(--hris-muted);
  padding: 0.45rem 0.9rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
}
.hris-page .nav-pills .nav-link.active,
.pay-page .nav-pills .nav-link.active {
  background: var(--hris-primary-soft);
  color: var(--hris-primary);
}
.hris-page .tab-pane,
.pay-page .tab-pane { display: none; }
.hris-page .tab-pane.active,
.hris-page .tab-pane.show,
.pay-page .tab-pane.active,
.pay-page .tab-pane.show { display: block; }

/* Modal */
.hris-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.hris-modal-root .modal-backdrop-layer {
  position: absolute;
  inset: 0;
  background: rgba(32, 41, 54, 0.45);
}
.hris-modal-root .modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  z-index: 1;
}
.hris-modal-root .modal-dialog.modal-lg { max-width: 800px; }
.hris-modal-root .modal-dialog.modal-xl { max-width: 1140px; }
.hris-modal-root .modal-dialog-scrollable .modal-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
.hris-modal-root .modal-content {
  background: var(--hris-surface);
  color: var(--hris-text);
  border: 1px solid var(--hris-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(32, 41, 54, 0.22);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.hris-modal-root .modal-header,
.hris-modal-root .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}
.hris-modal-root .modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--hris-border);
}
.hris-modal-root .modal-body { padding: 0.5rem 1.25rem 1.25rem; }
.hris-modal-root .modal-title { font-size: 1.1rem; font-weight: 600; color: var(--hris-heading); margin: 0; }
.hris-modal-root .modal-header .text-muted { color: var(--hris-muted) !important; }
.hris-modal-root .btn-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23697a8d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
  opacity: 0.7;
  cursor: pointer;
  filter: none;
}
html.dark .hris-modal-root .btn-close {
  filter: invert(1) brightness(1.4);
}
.hris-modal-root .btn-close:hover { opacity: 1; }
html.dark .hris-modal-root .modal-backdrop-layer {
  background: rgba(0, 0, 0, 0.65);
}

/* Status summary cards */
.hris-page .jf-sum {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hris-page .jf-sum:hover { transform: translateY(-2px); }
.hris-page .jf-sum.is-on {
  outline: 2px solid rgba(105, 108, 255, 0.45);
  outline-offset: 1px;
}
.hris-page .jf-sum-sub { font-size: 0.75rem; opacity: 0.85; }

/* Pagination */
.hris-page .hris-pager,
.pay-page .hris-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--hris-muted);
  font-size: 0.8125rem;
}
.hris-page .hris-pager .btn,
.pay-page .hris-pager .btn { padding: 0.35rem 0.75rem; }

code {
  font-size: 0.85em;
  color: #696cff;
  background: rgba(105, 108, 255, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}