:root {
  color-scheme: light;
  --loader-bg: #f8fafc;
  --loader-surface: #ffffff;
  --loader-border: #e2e8f0;
  --loader-track: #dbe3ee;
  --loader-accent: #003d80;
  --loader-accent-soft: #3b82f6;
  --loader-shadow: rgba(15, 23, 42, 0.12);
}

html.dark {
  color-scheme: dark;
  --loader-bg: #09090b;
  --loader-surface: #18181b;
  --loader-border: #27272a;
  --loader-track: #3f3f46;
  --loader-accent: #60a5fa;
  --loader-accent-soft: #22d3ee;
  --loader-shadow: rgba(0, 0, 0, 0.42);
}

.loading_wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--loader-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.loading_wrap.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader_content {
  display: grid;
  place-items: center;
  gap: 22px;
}

.loader_logo {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 18px;
  border: 1px solid var(--loader-border);
  border-radius: 8px;
  background: var(--loader-surface);
  box-shadow: 0 16px 38px var(--loader-shadow);
}

.loader_logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.loading {
  position: relative;
  width: 44px;
  height: 44px;
  border: 3px solid var(--loader-track);
  border-top-color: var(--loader-accent);
  border-radius: 50%;
  animation: loader-spin 750ms linear infinite;
}

.loading::after {
  position: absolute;
  inset: 5px;
  content: "";
  border: 2px solid transparent;
  border-bottom-color: var(--loader-accent-soft);
  border-radius: inherit;
  animation: loader-spin 1.2s linear infinite reverse;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loading_wrap { transition-duration: 1ms; }
  .loading,
  .loading::after { animation-duration: 1.8s; }
}

/* HRM legacy tables: consistent controls in light and dark themes. */
.hrm-list-page .vgt-table input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: #4f46e5;
    color-scheme: light;
}

.hrm-list-page .vgt-wrap__actions,
.hrm-list-page .vgt-global-search__actions,
.hrm-list-page .vgt-wrap__actions-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    visibility: visible;
}

.hrm-list-page .vgt-table td span:has(> a) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.hrm-list-page .vgt-table td a[title="Edit"],
.hrm-list-page .vgt-table td a[title="Delete"] {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    cursor: pointer;
}

.hrm-list-page .vgt-table td a[title="Edit"]:hover {
    background: #ecfdf5;
}

.hrm-list-page .vgt-table td a[title="Delete"]:hover {
    background: #fef2f2;
}

.dark .hrm-list-page .vgt-table input[type="checkbox"] {
    accent-color: #818cf8;
    color-scheme: dark;
}

.dark .hrm-list-page .wrapper,
.dark .hrm-list-page .vgt-table,
.dark .hrm-list-page .vgt-table tbody,
.dark .hrm-list-page .vgt-table td {
    border-color: #3f3f46;
    background-color: #18181b;
    color: #e4e4e7;
}

.dark .hrm-list-page .vgt-table thead th,
.dark .hrm-list-page .vgt-table th.vgt-checkbox-col {
    border-color: #3f3f46;
    background: #27272a;
    color: #d4d4d8;
}

.dark .hrm-list-page .vgt-table tbody tr:hover td,
.dark .hrm-list-page .vgt-table td a[title="Edit"]:hover,
.dark .hrm-list-page .vgt-table td a[title="Delete"]:hover {
    background-color: #27272a;
}

.dark .hrm-list-page .vgt-selection-info-row {
    border-color: #3f3f46;
    background: #27272a;
    color: #c7d2fe;
}

/* Employee create/edit forms */
.employee-form-page .employee-form > .row {
    margin: 0;
}

.employee-form-page .employee-form > .row > .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

.employee-form-page .employee-form > .row > .col-md-12 {
    padding-right: 0;
    padding-left: 0;
}

.employee-form-page .card {
    border: 1px solid #e4e4e7;
    border-radius: .5rem;
    background: #fff;
    box-shadow: none;
}

.employee-form-page .card-body {
    padding: 1.25rem;
}

.employee-form-page .form-group {
    margin-bottom: .5rem;
}

.employee-form-page .form-group > label,
.employee-form-page legend {
    display: block;
    margin-bottom: .375rem;
    color: #3f3f46;
    font-size: .875rem;
    font-weight: 500;
}

.employee-form-page .form-control,
.employee-form-page .vdp-datepicker input,
.employee-form-page .vs__dropdown-toggle {
    min-height: 42px;
    border: 1px solid #d4d4d8;
    border-radius: .5rem;
    background: #fff;
    color: #18181b;
    box-shadow: none;
}

.employee-form-page .form-control,
.employee-form-page .vdp-datepicker input {
    width: 100%;
    padding: .625rem .75rem;
}

.employee-form-page .form-control:focus,
.employee-form-page .vdp-datepicker input:focus,
.employee-form-page .vs--open .vs__dropdown-toggle {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

.employee-form-page .vs__selected,
.employee-form-page .vs__search {
    color: #18181b;
}

.employee-form-page .vs__dropdown-menu {
    border: 1px solid #d4d4d8;
    border-radius: .5rem;
    background: #fff;
    color: #18181b;
}

.employee-form-page .custom-control-input,
.employee-form-page input[type="checkbox"],
.employee-form-page input[type="radio"] {
    accent-color: #4f46e5;
}

.employee-form-page .btn-primary {
    min-height: 40px;
    border-color: #4f46e5;
    border-radius: .5rem;
    background: #4f46e5;
    padding: .55rem 1rem;
    font-weight: 600;
}

.dark .employee-form-page .card {
    border-color: #3f3f46;
    background: #18181b;
}

.dark .employee-form-page .form-group > label,
.dark .employee-form-page legend,
.dark .employee-form-page .custom-control-label {
    color: #d4d4d8;
}

.dark .employee-form-page .form-control,
.dark .employee-form-page .vdp-datepicker input,
.dark .employee-form-page .vs__dropdown-toggle,
.dark .employee-form-page .vs__dropdown-menu {
    border-color: #52525b;
    background: #27272a !important;
    color: #f4f4f5;
}

.dark .employee-form-page .form-control:disabled {
    background: #3f3f46 !important;
    color: #a1a1aa;
}

.dark .employee-form-page .vs__selected,
.dark .employee-form-page .vs__search,
.dark .employee-form-page .vs__dropdown-option {
    color: #f4f4f5;
}

.dark .employee-form-page .vs__dropdown-option--highlight {
    background: #4f46e5;
    color: #fff;
}

.dark .employee-form-page input[type="checkbox"],
.dark .employee-form-page input[type="radio"] {
    color-scheme: dark;
    accent-color: #818cf8;
}

@media (max-width: 767px) {
    .employee-form-page .card-body {
        padding: 1rem;
    }

    .employee-form-page .employee-form > .row > .col-md-12.mt-3 {
        display: flex;
        align-items: center;
        gap: .75rem;
    }
}