:root, html[data-theme="light"], html.hrms-ui {
  color-scheme: light;
  --primary-color: #4f6fb8;
  --primary-color-hover: #3d5a96;
  --primary-rgb: 79, 111, 184;
  --secondary-color: #5b6472;
  --secondary-color-hover: #4a515c;
  --accent-color: #f97d48;
  --success-color: #0f766e;
  --danger-color: #c53030;
  --warning-color: #ca8a04;
  --info-color: #0369a1;
  --background-color: #f4f6fb;
  --background-secondary: #eef2f7;
  --surface-color: #ffffff;
  --surface-muted: #f8fafc;
  --surface-hover: #f1f5f9;
  --surface-active: #e2e8f0;
  --text-color: #1a2233;
  --text-muted-color: #4b5567;
  --text-primary: #1a2233;
  --text-secondary: #4b5567;
  --border-color: #d5dbe8;
  --border-hover: #9ca3af;
  --border-focus: #4f6fb8;
  --divider-color: #e5e7eb;
  --focus-ring: rgba(79, 111, 184,0.35);
  --selection-color: #dbeafe;
  --scrollbar-color: #4f6fb8;
  --scrollbar-track: #e5e7eb;
  --skeleton-color: #e2e8f0;
  --disabled-color: #94a3b8;
  --disabled-bg: #f1f5f9;
  --placeholder-token: #6b7280;
  --notification-color: #0369a1;
  --glow-color: rgba(79, 111, 184,0.35);
  --glass-color: rgba(255,255,255,0.72);
  --validation-color: #c53030;
  --app-accent-warm: #f97d48;
  --app-accent-cool: #6289c1;
  --app-header-gradient: linear-gradient(90deg, #f97d48 0%, #6289c1 100%);
  --app-sidebar-gradient: linear-gradient(180deg, #f97d48 0%, #6289c1 100%);
  --header-gradient: linear-gradient(90deg, #f97d48 0%, #6289c1 100%);
  --header-gradient-angle: 90deg;
  --sidebar-gradient: linear-gradient(180deg, #f97d48 0%, #6289c1 100%);
  --sidebar-gradient-angle: 180deg;
  --button-gradient: #4f6fb8;
  --button-gradient-angle: 90deg;
  --button-fill: #4f6fb8;
  --button-primary: #4f6fb8;
  --table-header-gradient: #4f6fb8;
  --table-header-angle: 90deg;
  --card-gradient: #ffffff;
  --card-gradient-angle: 135deg;
  --submenu-gradient: #2a383e;
  --submenu-gradient-angle: 180deg;
  --gradient-start: #f97d48;
  --gradient-mid: #a78bfa;
  --gradient-mid2: #38bdf8;
  --gradient-end: #6289c1;
  --gradient-angle: 90deg;
  --gradient-opacity: 1;
  --gradient-type: linear;
  --header-bg: #4f6fb8;
  --header-text: #ffffff;
  --header-hover: #3d5a96;
  --header-border: transparent;
  --header-height: 52px;
  --header-shadow: 0 1px 4px rgba(15,23,42,0.12);
  --header-transparency: 1;
  --sidebar-bg: #4f6fb8;
  --sidebar-text: #ffffff;
  --sidebar-icon: #ffffff;
  --sidebar-border: transparent;
  --sidebar-shadow: 0 8px 17px rgba(0,0,0,0.2);
  --menu-hover: #3d5a96;
  --menu-active: #334a7d;
  --menu-active-text: #ffffff;
  --menu-hover-text: #ffffff;
  --menu-font-size: 0.9rem;
  --menu-icon-size: 1.1rem;
  --menu-padding: 0.55rem 0.85rem;
  --menu-radius: 8px;
  --menu-group-bg: transparent;
  --submenu-bg: #2a383e;
  --submenu-hover: #3d4f56;
  --submenu-active: #4f6fb8;
  --submenu-text: #e8eef5;
  --submenu-icon: #c5d0db;
  --submenu-border: rgba(255,255,255,0.08);
  --submenu-indicator: #f97d48;
  --sidebar-mode: expanded;
  --hrms-gradient-from: #f97d48;
  --hrms-gradient-to: #6289c1;
  --hrms-gradient-brand: #4f6fb8;
  --hrms-action-primary: #4f6fb8;
  --hrms-action-primary-hover: #3d5a96;
  --hrms-action-primary-active: #334a7d;
  --hrms-focus-rgb: 79, 111, 184;
  --hrms-input-border: #d5dbe8;
  --hrms-input-bg: #ffffff;
  --hrms-input-focus-border: #4f6fb8;
  --hrms-input-placeholder: #4b5567;
  --label-color: #1a2233;
  --hrms-table-row-hover: #eef2fb;
  --table-stripe: #f8fafc;
  --table-selected: #dbeafe;
  --table-header-text: #ffffff;
  --hrms-btn-radius: 10px;
  --hrms-card-radius: 10px;
  --hrms-input-radius: 8px;
  --modal-radius: 12px;
  --hrms-shadow-md: 0 8px 24px rgba(15,23,42,0.1);
  --hrms-sidebar-width: 250px;
  --sidebar-expanded-width: 250px;
  --hrms-font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --hrms-text-base: 15px;
  --font-weight: 400;
  --heading-weight: 600;
  --line-height: 1.5;
  --letter-spacing: 0;
  --word-spacing: normal;
  --font-style: normal;
  --text-transform: none;
  --text-decoration: none;
  --text-align: left;
  --font-heading: 1.5rem;
  --font-subheading: 1.25rem;
  --font-title: 1.125rem;
  --font-body: 0.9375rem;
  --font-caption: 0.75rem;
  --font-badge: 0.75rem;
  --font-popup: 0.875rem;
  --font-h1: 2.25rem;
  --font-h2: 1.875rem;
  --font-h3: 1.5rem;
  --font-h4: 1.25rem;
  --font-h5: 1.125rem;
  --font-h6: 1rem;
  --font-label: 0.8125rem;
  --font-small: 0.75rem;
  --font-large: 1.125rem;
  --font-heading-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-menu-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-sidebar-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-header-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-button-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-input-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-table-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-popup-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-login-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --table-radius: 8px;
  --sidebar-radius: 0px;
  --menu-radius: 8px;
  --widget-radius: 10px;
  --card-shadow: 0 8px 24px rgba(15,23,42,0.1);
  --popup-shadow: 0 20px 50px rgba(15,23,42,0.28);
  --section-gap: 1rem;
  --card-gap: 1rem;
  --widget-gap: 1rem;
  --table-gap: 0.5rem;
  --form-gap: 1rem;
  --popup-gap: 1rem;
  --page-margin: 0;
  --page-padding: 1rem;
  --container-min-width: 320px;
  --container-max-width: 1400px;
  --container-padding: 1rem;
  --container-margin: 0 auto;
  --layout-density: comfortable;
  --scrollbar-width: 10px;
  --scrollbar-radius: 8px;
  --scrollbar-hover: #4f6fb8;
  --grid-columns: 12;
  --grid-row-gap: 1rem;
  --grid-column-gap: 1rem;
  --mobile-card-padding: 0.75rem;
  --mobile-table-font: 0.8125rem;
  --mobile-popup-width: 94vw;
  --mobile-form-gap: 0.75rem;
  --font-size-mobile: 15px;
  --font-size-tablet: 15px;
  --font-size-laptop: 15px;
  --font-size-desktop: 15px;
  --font-size-print: 12pt;
  --font-print-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-button: 0.875rem;
  --font-menu: 0.9rem;
  --font-table: 0.875rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: calc(2rem * 1.5);
  --sidebar-expanded-width: 250px;
  --sidebar-collapsed-width: 50px;
  --border-width: 1px;
  --elevation-1: 0 1px 2px rgba(15,23,42,0.08);
  --elevation-2: 0 8px 24px rgba(15,23,42,0.1);
  --elevation-3: 0 20px 50px rgba(15,23,42,0.28);
  --grid-gap: 1rem;
  --blur-strength: 12px;
  --bs-body-font-family: var(--hrms-font-sans);
  --bs-font-sans-serif: var(--hrms-font-sans);
  --container-width: 100%;
  --hrms-primary: #4f6fb8;
  --hrms-primary-hover: #3d5a96;
  --hrms-primary-active: #334a7d;
  --hrms-secondary: #5b6472;
  --hrms-success: #0f766e;
  --hrms-danger: #c53030;
  --hrms-warning: #ca8a04;
  --hrms-info: #0369a1;
  --hrms-bg: #f4f6fb;
  --hrms-surface: #ffffff;
  --hrms-text: #1a2233;
  --hrms-text-muted: #4b5567;
  --hrms-border: #d5dbe8;
  --hrms-head-bg: #4f6fb8;
  --hrms-head-text: #ffffff;
  --hrms-row-hover: #eef2fb;
  --hrms-radius: 10px;
  --card-bg: #ffffff;
  --card-header-bg: #4f6fb8;
  --card-footer-bg: #f8fafc;
  --card-padding: 1rem;
  --form-panel-header-bg: linear-gradient(90deg, #f97d48 0%, #6289c1 100%);
  --form-panel-header-text: #ffffff;
  --form-section-header-accent: #4f6fb8;
  --form-section-header-text: #4f6fb8;
  --form-action-footer-bg: #f8fafc;
  --footer-bg: #f4f6fb;
  --footer-text: #4b5567;
  --link-color: #4f6fb8;
  --overlay-color: rgba(15,23,42,0.45);
  --shadow-color: rgba(15,23,42,0.1);
  --button-text: #ffffff;
  --button-border: transparent;
  --button-height: 38px;
  --button-padding: 0.45rem 1rem;
  --button-font-size: 0.875rem;
  --button-font-weight: 600;
  --input-error: #c53030;
  --input-height: 38px;
  --input-hover-border: #9ca3af;
  --input-text: #1a2233;
  --input-shadow: none;
  --select-bg: #ffffff;
  --select-border: #d5dbe8;
  --select-focus: #4f6fb8;
  --select-arrow: #4b5567;
  --select-hover-border: #9ca3af;
  --checkbox-color: #4f6fb8;
  --radio-color: #4f6fb8;
  --switch-color: #4f6fb8;
  --pk-radio-border: #cbd5e1;
  --pk-radio-border-checked: #4f6fb8;
  --pk-radio-fill: #4f6fb8;
  --pk-radio-hover: #3d5a96;
  --pk-radio-bg: #ffffff;
  --pk-radio-label: #1a2233;
  --pk-radio-disabled: #94a3b8;
  --pk-radio-error: #c53030;
  --pk-radio-focus: #4f6fb8;
  --pk-radio-ripple: rgba(79,111,184,0.28);
  --pk-radio-border-width: 2px;
  --pk-radio-size: 1.15rem;
  --pk-radio-icon-size: 0.55rem;
  --pk-radio-label-size: 0.875rem;
  --pk-radio-label-weight: 500;
  --pk-radio-anim: 0.18s;
  --pk-radio-style: filled;
  --pk-check-border: #cbd5e1;
  --pk-check-mark: #ffffff;
  --pk-check-bg: #ffffff;
  --pk-check-checked-bg: #4f6fb8;
  --pk-check-hover-bg: #eef2fb;
  --pk-check-disabled-bg: #f1f5f9;
  --pk-check-disabled-border: #cbd5e1;
  --pk-check-label: #1a2233;
  --pk-check-error: #c53030;
  --pk-check-focus: #4f6fb8;
  --pk-check-tick-size: 0.65rem;
  --pk-check-border-width: 2px;
  --pk-check-size: 1.15rem;
  --pk-check-radius: 0.3rem;
  --pk-check-anim: 0.18s;
  --pk-check-style: rounded;
  --pk-selection-shape: rounded;
  --pk-selection-size: md;
  --pk-selection-layout: vertical;
  --pk-selection-anim: scale;
  --table-row-bg: #ffffff;
  --table-border: #d5dbe8;
  --table-font-size: 0.875rem;
  --table-cell-padding: 0.55rem 0.75rem;
  --modal-header-bg: #4f6fb8;
  --modal-header-text: #ffffff;
  --modal-body-bg: #ffffff;
  --modal-footer-bg: #f8fafc;
  --modal-text: #1a2233;
  --modal-border: #d5dbe8;
  --modal-close: #ffffff;
  --modal-shadow: 0 20px 50px rgba(15,23,42,0.28);
  --modal-blur: 0px;
  --icon-hover: #3d5a96;
  --icon-active: #334a7d;
  --icon-size: 1rem;
  --icon-badge: #c53030;
  --icon-muted: #6b7280;
  --animation-type: fade;
  --animation-duration: 0.22s;
  --animation-delay: 0s;
  --animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --animation-repeat: 1;
  --hrms-anim-duration: 0.22s;
  --hrms-anim-delay: 0s;
  --hrms-anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --hrms-anim-repeat: 1;
  --color-mode: light;
  --ui-corner: rounded;
  --icon-color: #4f6fb8;
  --loader-color: #4f6fb8;
  --loader: #4f6fb8;
  --loader-type: spinner;
  --loader-size: 2.5rem;
  --loader-speed: 0.8s;
  --loader-overlay-opacity: 0.55;
  --loader-logo: '';
  --loader-enabled: 1;
  --loader-text: Loading your workspace…;
  --loader-progress-style: bar;
  --loader-logo-size: 56px;
  --loader-min-duration: 400;
  --loader-please-wait: Please wait…;
  --chart-1: #4f6fb8;
  --chart-2: #f97d48;
  --chart-3: #0f766e;
  --chart-4: #0369a1;
  --chart-5: #ca8a04;
  --hrms-transition: 0.22s;
  --hrms-opacity: 1;
  --glass-blur: 12px;
  --container-width: 100%;
  --login-card-bg: #ffffff;
  --login-button: #4f6fb8;
  --login-overlay: rgba(15,23,42,0.35);
  --primary: #4f6fb8;
  --primary-hover: #3d5a96;
  --primary-light: #6289c1;
  --primary-dark: #334a7d;
  --secondary: #5b6472;
  --secondary-light: #4a515c;
  --secondary-dark: #4a515c;
  --accent: #f97d48;
  --success: #0f766e;
  --danger: #c53030;
  --warning: #ca8a04;
  --info: #0369a1;
  --light: #f8fafc;
  --dark: #1a2233;
  --background: #f4f6fb;
  --surface: #ffffff;
  --text: #1a2233;
  --text-primary: #1a2233;
  --text-secondary: #4b5567;
  --text-muted: #4b5567;
  --border: #d5dbe8;
  --sidebar: #4f6fb8;
  --sidebar-bg: #4f6fb8;
  --navbar: #4f6fb8;
  --navbar-bg: #4f6fb8;
  --table-header: #4f6fb8;
  --table-hover: #eef2fb;
  --table-row: #ffffff;
  --card: #ffffff;
  --popup-bg: #ffffff;
  --popup-header: #4f6fb8;
  --popup-footer: #f8fafc;
  --input-border: #d5dbe8;
  --input-bg: #ffffff;
  --menu-bg: #4f6fb8;
  --button-bg: #4f6fb8;
  --button-text: #ffffff;
  --badge-bg: #4f6fb8;
  --shadow: 0 8px 24px rgba(15,23,42,0.1);
  --radius: 10px;
  --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-size: 15px;
  --button: #4f6fb8;
  --button-hover: #3d5a96;
  --button-primary: #4f6fb8;
  --input-focus: #4f6fb8;
  --link: #4f6fb8;
  --link-hover: #3d5a96;
  --badge: #4f6fb8;
  --chart1: #4f6fb8;
  --chart2: #f97d48;
  --chart3: #0f766e;
  --chart4: #0369a1;
  --chart5: #ca8a04;
  --bs-primary: #4f6fb8;
  --bs-primary-rgb: 79, 111, 184;
  --bs-secondary: #5b6472;
  --bs-success: #0f766e;
  --bs-danger: #c53030;
  --bs-warning: #ca8a04;
  --bs-info: #0369a1;
  --bs-body-bg: #f4f6fb;
  --bs-body-color: #1a2233;
  --bs-border-color: #d5dbe8;
  --bs-link-color: #4f6fb8;
}
body.app header.app-header, .app-header {
  background: var(--app-header-gradient) !important;
  color: var(--header-text) !important;
  box-shadow: var(--header-shadow);
  border-bottom: 1px solid var(--header-border);
}
body.app aside.app-sidebar, .app-sidebar {
  background: var(--app-sidebar-gradient) !important;
  color: var(--sidebar-text) !important;
  box-shadow: var(--sidebar-shadow);
  border-right: 1px solid var(--sidebar-border);
}
.app-sidebar .app-menu__icon, .app-sidebar .icon { color: var(--sidebar-icon) !important; }
.app-sidebar .treeview-menu, .app-sidebar .subtreeview-menu { background: var(--submenu-bg) !important; }
.app-sidebar .treeview-item, .app-sidebar .subtreeview-item { color: var(--submenu-text) !important; border-left: 3px solid transparent; }
.app-sidebar .treeview-item:hover, .app-sidebar .subtreeview-item:hover { background: var(--submenu-hover) !important; }
.app-sidebar .treeview-item.active, .app-sidebar .subtreeview-item.active { background: var(--submenu-active) !important; border-left-color: var(--submenu-indicator) !important; }
.app-sidebar .treeview-item .icon, .app-sidebar .subtreeview-item .icon { color: var(--submenu-icon) !important; }
.app-header .app-nav__item, .app-header .app-sidebar__user-name, .app-header a { color: var(--header-text) !important; }
.app-header .fa, .app-header .fas, .app-header .far, .app-header .fal, .app-header .fab, .app-header [class*="fa-"] { font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free" !important; font-weight: 900; color: inherit; }
.btn-primary, .btn-hrms--primary, .btn.buttonstyle.btn-primary, a.btn.buttonstyle.btn-primary { background: var(--button-fill, var(--button-primary)) !important; border-color: var(--button-border, var(--button-primary)) !important; color: var(--button-text) !important; border-radius: var(--hrms-btn-radius); min-height: var(--button-height); padding: var(--button-padding); font-size: var(--button-font-size); font-weight: var(--button-font-weight); }
.btn-primary:hover, .btn-hrms--primary:hover, .btn.buttonstyle.btn-primary:hover { background-color: var(--button-hover) !important; border-color: var(--button-hover) !important; }
.advanced-filter-toggle, button.advanced-filter-toggle, .btn-advanced-filter, div.advanced-filter-toggle, body.app .advanced-filter-toggle, .tile .advanced-filter-toggle { background: var(--button-fill, var(--button-primary)) !important; color: var(--button-text, #fff) !important; border: none !important; border-radius: var(--hrms-btn-radius, 10px) !important; font-weight: var(--button-font-weight, 600) !important; min-height: var(--button-height, var(--hrms-btn-touch-min-h, 2.75rem)); padding: var(--button-padding, var(--hrms-btn-padding-y) var(--hrms-btn-padding-x)); box-shadow: var(--button-shadow, none); }
.advanced-filter-toggle:hover, button.advanced-filter-toggle:hover, .btn-advanced-filter:hover, div.advanced-filter-toggle:hover, body.app .advanced-filter-toggle:hover { background: var(--button-hover, var(--primary-color-hover)) !important; color: var(--button-text, #fff) !important; }
.tile section#advanced-filter #filterBtn, .tile .hrms-af-panel #filterBtn { background: var(--button-fill, var(--button-primary)) !important; color: var(--button-text, #fff) !important; border: none !important; border-radius: var(--hrms-btn-radius) !important; }
html { --button-fill: var(--button-primary); }
.card, .tile { background: var(--card-gradient, var(--card-bg)) !important; border-radius: var(--hrms-card-radius); box-shadow: var(--shadow); padding: var(--card-padding, 0); }
.card-footer, .tile-footer { background: var(--card-footer-bg) !important; }
.modal-content, .pk-modal-dialog { border-radius: var(--modal-radius); background: var(--modal-body-bg, #fff) !important; color: var(--modal-text); border-color: var(--modal-border) !important; box-shadow: var(--modal-shadow) !important; }
.modal-header, .pk-modal-header { background: var(--modal-header-bg, var(--primary)) !important; color: var(--modal-header-text, #fff) !important; border-color: var(--modal-border) !important; }
.modal-header .btn-close, .modal-header .close, .pk-modal-close { color: var(--modal-close, #fff) !important; opacity: 1; filter: none; }
.modal-body, .pk-modal-body { background: var(--modal-body-bg) !important; color: var(--modal-text) !important; }
.modal-footer, .pk-modal-footer { background: var(--modal-footer-bg) !important; border-color: var(--modal-border) !important; }
.modal-backdrop, .pk-overlay { background-color: var(--overlay-color) !important; backdrop-filter: blur(var(--modal-blur, 0px)); -webkit-backdrop-filter: blur(var(--modal-blur, 0px)); }
.pk-btn-primary { background: var(--button-fill, var(--button, var(--primary))) !important; border-color: var(--button, var(--primary)) !important; color: var(--button-text, #fff) !important; }
.pk-btn-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; }
.pk-btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; }
.pk-btn-success { background: var(--success) !important; border-color: var(--success) !important; }
.swal2-popup { background: var(--modal-body-bg) !important; color: var(--modal-text) !important; border-radius: var(--modal-radius) !important; }
.swal2-confirm { background: var(--primary) !important; }
.swal2-cancel, .swal2-deny { background: var(--secondary) !important; }
table thead th, .table thead th { background: var(--table-header-gradient, var(--table-header)) !important; color: var(--table-header-text) !important; font-size: var(--table-font-size); padding: var(--table-cell-padding) !important; }
.table tbody td, table.dataTable tbody td { background: var(--table-row-bg); border-color: var(--table-border) !important; font-size: var(--table-font-size); padding: var(--table-cell-padding) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-stripe) !important; }
.table-hover > tbody > tr:hover > *, table.dataTable tbody tr:hover { background-color: var(--table-hover) !important; }
.table thead th, table.dataTable thead th { position: sticky; top: 0; z-index: 2; }
.form-control, input.form-control, textarea.form-control { min-height: var(--input-height); border-radius: var(--hrms-input-radius); background: var(--hrms-input-bg) !important; color: var(--input-text, var(--text)) !important; border-color: var(--hrms-input-border) !important; box-shadow: var(--input-shadow, none); }
.form-control:hover, input.form-control:hover, textarea.form-control:hover { border-color: var(--input-hover-border) !important; }
.form-control:focus, input.form-control:focus, textarea.form-control:focus { border-color: var(--hrms-input-focus-border) !important; box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--hrms-input-focus-border) 25%, transparent) !important; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--hrms-input-placeholder) !important; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--input-error) !important; }
.form-select, select.form-select, select.form-control { min-height: var(--input-height); border-radius: var(--hrms-input-radius); background-color: var(--select-bg) !important; border-color: var(--select-border) !important; color: var(--input-text, var(--text)) !important; }
.form-select:hover, select.form-select:hover { border-color: var(--select-hover-border) !important; }
.form-select:focus, select.form-select:focus, select:focus { border-color: var(--select-focus) !important; box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--select-focus) 25%, transparent) !important; }
.select2-container--default .select2-selection--single { background-color: var(--select-bg) !important; border-color: var(--select-border) !important; border-radius: var(--hrms-input-radius) !important; min-height: var(--input-height); }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--select-arrow) transparent transparent transparent !important; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--select-focus) !important; }
.form-check-input:checked, .pk-checkbox input:checked + .pk-checkbox-icon { background-color: var(--pk-check-checked-bg, var(--checkbox-color)) !important; border-color: var(--pk-check-checked-bg, var(--checkbox-color)) !important; }
input[type=radio].form-check-input:checked, .pk-radio input:checked + .pk-radio-icon { background-color: var(--pk-radio-fill, var(--radio-color)) !important; border-color: var(--pk-radio-border-checked, var(--radio-color)) !important; }
.form-switch .form-check-input:checked { background-color: var(--switch-color) !important; border-color: var(--switch-color) !important; }
input[type=checkbox], .form-check-input[type=checkbox] { accent-color: var(--checkbox-color); }
input[type=radio], .form-check-input[type=radio] { accent-color: var(--radio-color); }
.pk-radio-label { color: var(--pk-radio-label, var(--label-color)); font-size: var(--pk-radio-label-size); font-weight: var(--pk-radio-label-weight); }
.pk-checkbox-label { color: var(--pk-check-label, var(--label-color)); font-size: var(--pk-radio-label-size); }
html { --pk-selection-size-token: md; --pk-radio-style-token: filled; --pk-check-style-token: rounded; }
html[data-pk-selection="1"] { --pk-selection-shape: rounded; --pk-selection-anim: scale; }
.form-label, label { color: var(--label-color); }
i, .bi, .fa, .app-menu__icon { font-size: var(--icon-size); }
.icon, .bi, .fa, i.app-menu__icon { color: var(--icon-color); }
a:hover i, .btn:hover i, .icon:hover, .bi:hover { color: var(--icon-hover); }
.active i, .active .bi, .active .icon, a.active i { color: var(--icon-active) !important; }
.text-muted i, .text-muted .bi, .icon-muted { color: var(--icon-muted) !important; }
.badge, .app-notification__number, .notify-badge { background-color: var(--icon-badge) !important; }
h1,h2,h3,h4,h5,h6,.hrms-heading-5 { font-weight: var(--heading-weight); font-family: var(--font-heading-family, var(--hrms-font-sans)); }
h1 { font-size: var(--font-h1, var(--font-heading)); }
h2 { font-size: var(--font-h2, var(--font-subheading)); }
h3 { font-size: var(--font-h3, var(--font-title)); }
h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-h5); }
h6 { font-size: var(--font-h6); }
body, .app-content, .tile-body { font-family: var(--font-body-family, var(--hrms-font-sans)); font-size: var(--hrms-text-base); font-weight: var(--font-weight); line-height: var(--line-height); letter-spacing: var(--letter-spacing); word-spacing: var(--word-spacing, normal); }
.app-header { font-family: var(--font-header-family, var(--hrms-font-sans)); }
.app-header .app-nav__item, .app-header .app-sidebar__user-name, .app-header .dropdown-toggle, .app-header .btn { font-family: var(--font-header-family, var(--hrms-font-sans)); }
.app-header .fa, .app-header .fas, .app-header .far, .app-header .fal, .app-header .fab, .app-header [class*="fa-"] { font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free" !important; }
.app-sidebar, .app-menu { font-family: var(--font-sidebar-family, var(--hrms-font-sans)); }
.app-menu__label, .treeview-item { font-family: var(--font-menu-family, var(--hrms-font-sans)); font-size: var(--font-menu); }
.btn, .pk-btn { font-family: var(--font-button-family, var(--hrms-font-sans)); font-size: var(--font-button); }
.form-control, .form-select, input, select, textarea { font-family: var(--font-input-family, var(--hrms-font-sans)); }
table, .table, .dataTable { font-family: var(--font-table-family, var(--hrms-font-sans)); font-size: var(--font-table); }
.modal, .pk-modal, .swal2-popup { font-family: var(--font-popup-family, var(--hrms-font-sans)); font-size: var(--font-popup); }
.login-page, #formm { font-family: var(--font-login-family, var(--hrms-font-sans)); }
.card, .tile, .widget-theme { border-radius: var(--widget-radius, var(--hrms-card-radius)); box-shadow: var(--card-shadow, var(--shadow)); }
.table, .dataTables_wrapper { border-radius: var(--table-radius); box-shadow: var(--table-shadow, none); }
.hrms-form-sections { gap: var(--section-gap, 0.85rem); }
.hrms-form-panel .form-group, .form-theme .row { row-gap: var(--form-gap, 1rem); }
html[data-smooth-scroll="1"] { scroll-behavior: smooth; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-hover, var(--scrollbar-color, var(--primary))) transparent; }
::-webkit-scrollbar { width: var(--scrollbar-width, 10px); height: var(--scrollbar-width, 10px); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-color, var(--primary)); border-radius: var(--scrollbar-radius, 8px); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover, var(--primary-hover)); }
.login-page .bg-white, #formm .bg-white { background: var(--login-card-bg) !important; }
.login-page .btn-primary, #formm .btn-primary { background: var(--login-button) !important; border-color: var(--login-button) !important; }
.hrms-grid { display: grid; grid-template-columns: repeat(var(--grid-columns, 12), minmax(0, 1fr)); row-gap: var(--grid-row-gap, var(--grid-gap, 1rem)); column-gap: var(--grid-column-gap, var(--grid-gap, 1rem)); }
.hrms-grid-nested, .hrms-card-grid { display: grid; gap: var(--card-gap, 1rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
html { scroll-behavior: smooth; }
html[data-smooth-scroll] { scroll-behavior: smooth; }
html { --sidebar-expanded-width: var(--hrms-sidebar-width, 250px); --sidebar-collapsed-width: 70px; }
@media (max-width: 575.98px) { body { font-size: var(--font-size-mobile, var(--font-md, var(--hrms-text-base))); } .modal-dialog, .pk-modal { width: var(--mobile-popup-width, 96vw); max-width: 100%; } table, .table { font-size: var(--mobile-table-font, var(--font-sm, 0.8125rem)); } .card, .tile { padding: var(--mobile-card-padding, var(--space-sm, 0.75rem)); } }
@media (min-width: 576px) and (max-width: 991.98px) { body { font-size: var(--font-size-tablet, var(--font-md, var(--hrms-text-base))); } }
@media (min-width: 992px) and (max-width: 1439.98px) { body { font-size: var(--font-size-laptop, var(--font-md, var(--hrms-text-base))); } }
@media (min-width: 1440px) and (max-width: 1919.98px) { body { font-size: var(--font-size-desktop, var(--font-md, var(--hrms-text-base))); } }
@media (min-width: 1920px) and (max-width: 2559.98px) { body { font-size: var(--font-size-desktop, var(--font-md, var(--hrms-text-base))); } body.app:not(.sidenav-toggled) .app-content { max-width: min(100%, var(--container-max-width, 1800px)); } body.app.sidebar-mini.sidenav-toggled .app-content, body.app.sidebar-mini.sidenav-toggled main.app-content { max-width: none; width: calc(100% - var(--sidebar-collapsed-width, 70px)); } }
@media (min-width: 2560px) and (max-width: 3839.98px) { body { font-size: var(--font-size-desktop, var(--font-md, var(--hrms-text-base))); } .hrms-grid, .dashboard-grid, .card-grid { gap: calc(var(--grid-gap, 1rem) * 1.15); } }
@media (min-width: 3840px) { body { font-size: var(--font-size-desktop, var(--font-md, var(--hrms-text-base))); } .hrms-grid, .dashboard-grid, .card-grid { gap: calc(var(--grid-gap, 1rem) * 1.35); } .app-content, main.app-content { padding: var(--container-padding, 1.5rem); } }
@media (max-width: 900px) and (orientation: landscape) { .app-sidebar { max-width: var(--sidebar-drawer-width, 220px); } }
@media print { body { font-size: var(--font-size-print, 12pt); font-family: var(--font-print-family, var(--hrms-font-sans)); } .app-sidebar, .app-header, .hrms-mobile-bottom-nav, .hrms-mobile-fab { display: none !important; } }
html[data-hrms-anim="1"] .btn, html[data-hrms-anim="1"] .card, html[data-hrms-anim="1"] .tile, html[data-hrms-anim="1"] .app-menu__item, html[data-hrms-anim="1"] .nav-link { transition: transform var(--hrms-anim-duration, var(--hrms-transition)) var(--hrms-anim-easing, ease), box-shadow var(--hrms-anim-duration, var(--hrms-transition)) var(--hrms-anim-easing, ease), background-color var(--hrms-anim-duration, var(--hrms-transition)) var(--hrms-anim-easing, ease), border-color var(--hrms-anim-duration, var(--hrms-transition)) var(--hrms-anim-easing, ease); }
@media (prefers-reduced-motion: reduce) { html[data-respect-reduced-motion="1"] *, html[data-respect-reduced-motion="1"] *::before, html[data-respect-reduced-motion="1"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
html { --hrms-allow-inspect: 1; --hrms-inspect-bypass-sa: 1; }