:root {
  --hr-ink: #282b49;
  --hr-muted: #64677e;
  --hr-purple: #6658d3;
  --hr-line: #eeedf4;
  --hr-bg: #f8f8fc;
}

body { color: var(--hr-ink); font-family: 'Nunito', sans-serif; background: var(--hr-bg); }
.hr-navbar { background: #fff; box-shadow: 0 3px 20px rgba(35, 34, 74, .045); }
.hr-navbar .navbar-brand-wrapper { border-right: 1px solid #f1f0f6; }
.hr-brand { display: inline-flex !important; align-items: center; gap: 10px; color: var(--hr-ink) !important; font: 800 19px 'Nunito', sans-serif; letter-spacing: -.8px; text-decoration: none; }
.hr-brand:hover { color: var(--hr-ink); }
.hr-employee-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 28px; overflow-y: auto; border: 0; border-radius: 14px; color: var(--hr-ink); box-shadow: 0 24px 80px rgba(20,20,50,.25); }
.hr-employee-modal::backdrop { background: rgba(25,25,50,.5); }
.hr-employee-modal .form-label { font-size: 14px; font-weight: 600; }
.hr-employee-modal small { font-size: 13px; }
@media (max-width: 575px) { .hr-employee-modal { padding: 20px; } }
.hr-user-menu { border-radius: 9px; overflow: hidden; }
.hr-user-menu summary { cursor: pointer; list-style: none; }
.hr-user-menu summary::-webkit-details-marker { display: none; }
.hr-user-menu summary > .mdi-chevron-down { transform: rotate(-90deg); transition: transform .15s ease; }
.hr-user-menu[open] { background: #4b49ac; }
.sidebar .nav .nav-item .hr-user-menu[open] > summary.nav-link { color: #fff; background: transparent; font-weight: 700; }
.sidebar .nav .nav-item .hr-user-menu[open] > summary .menu-title,
.sidebar .nav .nav-item .hr-user-menu[open] > summary .menu-icon,
.sidebar .nav .nav-item .hr-user-menu[open] > summary > .mdi-chevron-down { color: #fff; }
.hr-user-menu[open] summary > .mdi-chevron-down { transform: rotate(0); }
.hr-user-submenu { list-style: none; padding: 4px 12px 14px 30px; margin: 0; }
.sidebar .nav .nav-item .hr-user-submenu a { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: #d2d1f0; font-size: 15px; line-height: 1.4; border-radius: 0; background: transparent; text-decoration: none; }
.hr-user-submenu a::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.sidebar .nav .nav-item .hr-user-submenu a:hover,
.sidebar .nav .nav-item .hr-user-submenu a.active { background: transparent; color: #fff; }
.sidebar .nav .nav-item .hr-user-submenu a.active { font-weight: 700; }
.hr-user-menu summary:focus-visible, .hr-user-submenu a:focus-visible { outline: 2px solid #a9a6ff; outline-offset: -3px; }
.hr-users-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.hr-users-pagination a { display: block; padding: 7px 12px; border: 1px solid #eeedf4; border-radius: 6px; color: #5142b5; }
.hr-users-pagination .active a { background: #f1efff; font-weight: 700; }
.hr-navbar .navbar-brand-wrapper .navbar-brand.hr-school-brand { width: 100%; min-width: 0; margin: 0; padding: 0 10px 0 0; gap: 8px; font-size: 16px; line-height: 1.3; letter-spacing: -.2px; text-align: left; white-space: normal; }
.hr-navbar .hr-school-brand > span { min-width: 0; font-size: 14px; line-height: 1.35; }
.hr-navbar .navbar-brand-wrapper .hr-school-logo { width: 36px; height: 36px; margin: 0; object-fit: contain; flex-shrink: 0; }
.hr-brand-mark { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #8975ed, #5f4ac8); font: 800 18px 'Nunito', sans-serif; box-shadow: 0 5px 12px rgba(102, 88, 211, .22); }
.hr-brand-mini { justify-content: center; }
.hr-brand-mini .hr-brand-mark { width: 31px; height: 31px; }
.hr-breadcrumb { align-items: center; gap: 10px; color: #a3a4b5; font-size: 15px; }
.hr-breadcrumb i { font-size: 16px; }
.hr-breadcrumb strong { color: #41435f; font-weight: 600; }
.hr-date { color: #777991; font-size: 15px; }
.hr-date i { color: var(--hr-purple); margin-right: 5px; }
.hr-profile-link { display: flex !important; align-items: center; gap: 9px; }
.hr-avatar { display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; border-radius: 50%; color: #6554c8; background: #eeeafe; font-size: 14px; font-weight: 700; }
.hr-profile-copy { flex-direction: column; color: var(--hr-ink); line-height: 1.3; }
.hr-profile-copy strong { font-size: 15px; font-weight: 700; }
.hr-profile-copy small { color: var(--hr-muted); font-size: 14px; }
.hr-profile-link > i { color: #9495aa; }
.sidebar { background: #fff; border-right: 1px solid #f0eff5; }
.sidebar .nav { padding-top: 21px; }
.sidebar-heading { margin: 13px 25px 9px; color: #64677e; font-size: 13px; font-weight: 700; letter-spacing: 1.1px; }
.sidebar .nav .nav-item { margin: 2px 12px; }
.sidebar .nav .nav-item .nav-link { height: 45px; padding: 0 13px; border-radius: 9px; color: #818399; font-size: 15px; font-weight: 500; }
.sidebar .nav .nav-item .nav-link .menu-icon { width: 21px; color: #a4a5b6; font-size: 17px; }
.sidebar .nav .nav-item.active > .nav-link { color: #6253cb; background: #f1efff; font-weight: 700; }
.sidebar .nav .nav-item.active > .nav-link .menu-icon { color: #6959d6; }
.sidebar-footer { position: absolute; bottom: 20px; left: 19px; right: 19px; display: flex; align-items: center; gap: 10px; padding: 13px 11px; border: 1px solid #eeedf4; border-radius: 11px; }
.sidebar-footer-icon { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #f1efff; color: var(--hr-purple); font-size: 17px; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { font-size: 14px; }
.sidebar-footer small { margin-top: 2px; color: var(--hr-muted); font-size: 13px; }
.main-panel { background: var(--hr-bg); }
.hr-content { padding: 31px 32px 22px; }
.hr-page-title { margin: 6px 0 5px; color: var(--hr-ink); font: 800 30px 'Nunito', sans-serif; letter-spacing: -.75px; }
.hr-page-subtitle { margin: 0; color: #64677e; font-size: 15px; }
.eyebrow { color: #9485df; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; }
.hr-wave { color: #f3a95e; font-size: 19px; vertical-align: 2px; }
.hr-primary-btn { padding: 10px 16px; border: 0; border-radius: 8px; background: #6859d4; box-shadow: 0 5px 12px rgba(102, 88, 211, .15); font-size: 14px; font-weight: 600; }
.hr-primary-btn:hover { background: #5646c2; }
.hr-primary-btn i { margin-right: 4px; vertical-align: -1px; font-size: 15px; }
.hr-stat-card, .hr-panel-card, .hr-role-card, .hr-mini-stat { overflow: hidden; border: 1px solid #f0eff5; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px rgba(35, 34, 74, .025); }
.hr-stat-card .card-body { padding: 19px 20px 17px; }
.hr-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.hr-stat-icon, .mini-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 11px; font-size: 20px; }
.icon-violet { color: #6c59d9; background: #f0edff; }
.icon-blue { color: #3984db; background: #eaf4ff; }
.icon-orange { color: #ed9d47; background: #fff4e7; }
.icon-green { color: #32aa80; background: #e9f8f2; }
.hr-stat-trend { color: #26a37a; font-size: 13px; font-weight: 600; }
.hr-stat-trend i { font-size: 16px; vertical-align: -2px; }
.hr-stat-tag { padding: 5px 7px; border-radius: 5px; color: #64677e; background: #f7f7fa; font-size: 12px; }
.hr-stat-label { margin: 0 0 4px; color: #64677e; font-size: 14px; }
.hr-stat-value { margin: 0; color: var(--hr-ink); font: 800 30px 'Nunito', sans-serif; }
.hr-stat-note { margin: 4px 0 0; color: #64677e; font-size: 13px; }
.hr-panel-card .card-body { padding: 21px; }
.hr-panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hr-panel-heading .card-title { margin: 0; color: var(--hr-ink); font: 700 16px 'Nunito', sans-serif; }
.hr-panel-heading .card-description { margin: 4px 0 0; color: #64677e; font-size: 14px; }
.hr-text-link { color: #6c5bd2; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hr-text-link:hover { color: #5142b5; }
.hr-text-link i { font-size: 16px; vertical-align: -2px; }
.hr-table { margin-bottom: 0; }
.hr-table thead th { padding: 10px 11px; border-top: 1px solid #f3f2f7; border-bottom: 1px solid #f3f2f7; color: #64677e; font-size: 12px; font-weight: 700; letter-spacing: .65px; white-space: nowrap; }
.hr-table tbody td { padding: 12px 11px; border-color: #f4f3f7; color: #696b83; font-size: 14px; vertical-align: middle; white-space: nowrap; }
.hr-table tbody tr:last-child td { border-bottom: 0; }
.hr-person { display: flex; align-items: center; gap: 9px; min-width: 160px; }
.hr-person-avatar, .hr-mini-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.hr-person strong, .hr-person small { display: block; }
.hr-person strong { color: #444660; font-size: 14px; font-weight: 600; }
.hr-person small { margin-top: 3px; color: #64677e; font-size: 12px; }
.avatar-purple { color: #735bd1; background: #f0eafd; }.avatar-peach { color: #bf7847; background: #fff0e4; }.avatar-blue { color: #367cc2; background: #e9f3fd; }.avatar-green { color: #28916c; background: #e8f7ef; }.avatar-violet { color: #6850b5; background: #f1eafa; }
.hr-status { display: inline-flex; padding: 5px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-active { color: #258b68; background: #e8f7f0; }.status-onboarding { color: #ad762e; background: #fff5e4; }.status-leave { color: #7480a2; background: #eff1f8; }
.hr-quick-card .card-body { padding: 21px 17px; }
.hr-quick-action { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #f4f3f7; color: inherit; text-decoration: none; }
.hr-quick-action:hover { color: inherit; transform: translateX(2px); }
.quick-icon { display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; font-size: 17px; }
.quick-violet { color: #705bd0; background: #f0edff; }.quick-blue { color: #3984db; background: #eaf4ff; }.quick-orange { color: #e89a43; background: #fff4e7; }
.hr-quick-action > span:nth-child(2) { flex: 1; }
.hr-quick-action strong, .hr-quick-action small { display: block; }
.hr-quick-action strong { color: #484a65; font-size: 14px; }
.hr-quick-action small { margin-top: 3px; color: #64677e; font-size: 12px; }
.hr-quick-action > i { color: #b5b5c3; font-size: 16px; }
.hr-tip { display: flex; gap: 9px; margin-top: 8px; padding: 11px; border-radius: 9px; background: #f8f6ff; color: #8a75d8; }
.hr-tip > i { font-size: 17px; }
.hr-tip strong, .hr-tip small { display: block; }
.hr-tip strong { color: #5f528d; font-size: 13px; }
.hr-tip small { margin-top: 4px; color: #9390ab; font-size: 12px; line-height: 1.5; }
.hr-footer { display: flex; justify-content: space-between; padding: 13px 31px; color: #64677e; background: transparent; font-size: 13px; }
.hr-info-banner { display: flex; gap: 12px; margin-bottom: 22px; padding: 14px 17px; border: 1px solid #e9e5ff; border-radius: 10px; background: #f4f2ff; }
.banner-icon { color: #7868d9; font-size: 20px; }
.hr-info-banner strong { color: #55506f; font-size: 14px; }
.hr-info-banner p { margin: 4px 0 0; color: #89879d; font-size: 14px; }
.hr-role-card { height: 100%; }
.hr-role-card .card-body { padding: 20px; }
.hr-role-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.role-icon { display: inline-flex; width: 43px; height: 43px; align-items: center; justify-content: center; border-radius: 12px; font-size: 21px; }
.role-admin { color: #7159d3; background: #f0edff; }.role-manager { color: #3282ca; background: #eaf4ff; }.role-member { color: #30a17c; background: #eaf8f2; }
.status-admin { color: #705ccc; background: #f0edff; }.status-manager { color: #397db6; background: #eaf4ff; }.status-member { color: #2a936d; background: #eaf8f2; }
.hr-role-card h4 { margin: 0 0 7px; color: var(--hr-ink); font: 700 18px 'Nunito', sans-serif; }
.hr-role-card p { min-height: 33px; margin: 0; color: #9495a6; font-size: 14px; line-height: 1.6; }
.hr-role-members { display: flex; align-items: center; margin: 17px 0 15px; }
.hr-mini-avatar { width: 25px; height: 25px; margin-right: -5px; border: 2px solid white; font-size: 12px; }
.hr-member-count { margin-left: 11px; color: #88899c; font-size: 13px; }
.hr-permission-list { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #f1f0f5; }
.hr-permission-list span { color: #77788f; font-size: 13px; }
.hr-permission-list i { margin-right: 6px; color: #39a77d; font-size: 16px; vertical-align: -2px; }
.hr-permission-list span:last-child i { color: #b5b5c2; }
.hr-form-body { padding: 23px 25px !important; }
.hr-step-label { color: #9b9cac; font-size: 13px; }
.hr-step-label i { margin-right: 3px; color: #7767d9; font-size: 15px; vertical-align: -2px; }
.hr-form-body .form-label { display: block; margin-bottom: 7px; color: #5c5d75; font-size: 14px; font-weight: 600; }
.required-mark { color: #e37b7b; }
.hr-form-control { height: 41px; border-color: #e9e8ef; border-radius: 7px; color: #55566e; background-color: #fff; font-size: 14px; }
.hr-form-control::placeholder { color: #b5b5c1; }
.hr-form-control:focus { border-color: #9c90e6; box-shadow: 0 0 0 3px rgba(102, 88, 211, .08); }
.hr-form-body .form-text { margin-top: 6px; font-size: 12px; }
.hr-form-divider { height: 1px; margin: 2px 0 17px; background: #f0eff5; }
.hr-form-footnote { margin: 0; color: #9293a5; font-size: 13px; }
.hr-form-footnote i { margin-right: 4px; color: #8171d6; font-size: 18px; vertical-align: -2px; }
.hr-cancel-btn { padding: 10px 15px; border: 1px solid #e9e8ef; border-radius: 7px; color: #77788e; background: #fff; font-size: 14px; }
.hr-guidance-card { background: linear-gradient(155deg, #fff 45%, #faf8ff); }
.hr-guidance-card .card-body { padding: 23px 20px; }
.guidance-icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 11px; color: #e6a050; background: #fff4e5; font-size: 20px; }
.hr-guidance-card h4 { margin: 15px 0 6px; color: var(--hr-ink); font: 700 16px 'Nunito', sans-serif; }
.hr-guidance-card > .card-body > p { margin: 0; color: #9697a7; font-size: 13px; line-height: 1.6; }
.hr-check-item { display: flex; gap: 9px; margin-top: 18px; }
.hr-check-item > i { color: #46ae88; font-size: 16px; }
.hr-check-item strong, .hr-check-item small { display: block; }
.hr-check-item strong { color: #585a73; font-size: 13px; }
.hr-check-item small { margin-top: 4px; color: #64677e; font-size: 12px; line-height: 1.5; }
.hr-mini-stat .card-body { display: flex; align-items: center; gap: 12px; padding: 15px 18px; }
.mini-stat-icon { width: 36px; height: 36px; font-size: 18px; }
.hr-mini-stat small, .hr-mini-stat strong { display: block; }
.hr-mini-stat small { color: #9192a4; font-size: 13px; }
.hr-mini-stat strong { margin-top: 2px; color: var(--hr-ink); font: 700 17px 'Nunito', sans-serif; }
.hr-count-pill { margin-left: 5px; padding: 4px 6px; border-radius: 10px; color: #6b5acb; background: #f1efff; font: 600 12px 'Nunito', sans-serif; vertical-align: 2px; }
.hr-search-wrap { position: relative; }
.hr-search-wrap > i { position: absolute; top: 9px; left: 10px; color: #a1a2b2; font-size: 15px; }
.hr-search-wrap input { width: 165px; height: 34px; padding: 0 10px 0 31px; border: 1px solid #eae9f0; border-radius: 7px; outline: 0; color: #55566e; font-size: 13px; }
.hr-search-wrap input:focus { border-color: #9c90e6; }
.hr-filter-select { width: auto; min-width: 105px; height: 34px; border-color: #eae9f0; border-radius: 7px; color: #77788e; font-size: 13px; }
.hr-employee-table tbody td { padding-top: 13px; padding-bottom: 13px; }
.hr-more-button { width: 28px; height: 28px; border: 0; border-radius: 6px; color: #a3a4b4; background: transparent; font-size: 16px; }
.hr-more-button:hover { color: #6859d4; background: #f4f2ff; }
.hr-table-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; color: #999aab; font-size: 13px; }
.hr-pagination { display: flex; align-items: center; gap: 4px; }
.hr-pagination button { min-width: 25px; height: 25px; border: 0; border-radius: 6px; color: #88899d; background: transparent; font-size: 13px; }
.hr-pagination button:disabled { color: #c9c9d2; }
.hr-pagination .current-page { color: #fff; background: #6c5bd2; }
.hr-empty-state { padding: 35px 10px; color: #9293a5; text-align: center; font-size: 14px; }
/* Keep navigation text legible over the theme's active-link styles. */
.sidebar .nav .nav-item .nav-link .menu-title { font-size: 15px; line-height: 1.4; }
.sidebar .nav .nav-item.active > .nav-link .menu-title { color: #5142b5; }
.hr-stat-note, .hr-panel-heading .card-description, .hr-person small, .hr-quick-action small { line-height: 1.5; }
.hr-stat-top { gap: 12px; flex-wrap: wrap; }
.hr-stat-tag { white-space: normal; }
.hr-login-page { min-height: 100vh; background: #fff; }
.hr-login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(400px, .93fr) 1.07fr; }
.hr-login-visual { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: center; overflow: hidden; padding: 36px 5%; background: linear-gradient(145deg, #6555c7 0%, #5645ae 58%, #443995 100%); }
.hr-college-brand { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; text-decoration: none; }
.hr-college-logo { display: block; width: 29%; max-width: 215px; height: auto; flex-shrink: 0; filter: drop-shadow(5px 7px 5px rgba(0,0,0,.35)); }
.hr-college-name { margin: 0; color: #f4f400; font: 700 clamp(20px, 2.3vw, 44px)/1.12 Georgia, 'Times New Roman', serif; text-align: center; text-transform: uppercase; letter-spacing: .3px; text-shadow: 7px 10px 9px rgba(0,0,0,.23); }
.hr-college-name span { display: block; }
.hr-login-mobile-brand.hr-college-brand { gap: 12px; }
.hr-login-mobile-brand .hr-college-name { font-size: clamp(17px, 4.5vw, 28px); }
.hr-login-mobile-brand .hr-college-logo { width: 24%; max-width: 90px; }
.hr-login-brand { z-index: 1; color: #fff !important; }
.hr-login-logo { display: block; width: 88px; height: 88px; object-fit: contain; }
.hr-login-mobile-brand .hr-login-logo { width: 52px; height: 52px; flex-shrink: 0; }
.hr-login-brand .hr-brand-mark, .hr-login-mobile-brand .hr-brand-mark { color: #6655c4; background: #fff; }
.hr-login-message { z-index: 1; margin: auto 0; padding-bottom: 10%; }
.hr-login-message .eyebrow { color: #c2b9f9; }
.hr-login-message h1 { margin: 16px 0; color: #fff; font: 800 clamp(38px, 4.3vw, 58px)/1.12 'Nunito', sans-serif; letter-spacing: -2.5px; }
.hr-login-message h1 em { color: #c8c0ff; font-style: normal; }
.hr-login-message p { max-width: 380px; margin: 0; color: #dedaf8; font-size: 13px; line-height: 1.8; }
.hr-login-decoration { position: absolute; right: -10%; bottom: 13%; width: 68%; height: 34%; opacity: .68; }
.decoration-orbit { position: absolute; right: 0; bottom: -48%; width: 95%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.orbit-two { right: 13%; bottom: -37%; width: 68%; }
.decoration-dot { position: absolute; border-radius: 50%; background: #f5b875; box-shadow: 0 0 0 8px rgba(245,184,117,.12); }
.dot-one { top: 24%; right: 31%; width: 9px; height: 9px; }
.dot-two { top: 58%; right: 9%; width: 6px; height: 6px; background: #aaa0f0; }
.decoration-card { position: absolute; top: 40%; right: 18%; display: grid; grid-template-columns: 32px auto; align-items: center; width: 210px; padding: 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.decoration-card i { grid-row: span 2; color: #d4ceff; font-size: 22px; }
.decoration-card strong { font-size: 10px; }
.decoration-card small { margin-top: 3px; color: #d1cbef; font-size: 8px; }
.hr-login-footnote { z-index: 1; color: #ccc5f0; font-size: 10px; }
.hr-login-footnote i { margin-right: 5px; font-size: 13px; vertical-align: -2px; }
.hr-login-content { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px; }
.hr-login-form-wrap { width: min(100%, 440px); }
.hr-login-form-wrap > .eyebrow { color: #6251bc; font-size: 14px; }
.hr-login-form-wrap h2 { margin: 10px 0 10px; color: #292b48; font: 800 32px/1.25 'Nunito', sans-serif; letter-spacing: -.7px; }
.hr-login-subtitle { margin: 0 0 30px; color: #606379; font-size: 16px; line-height: 1.6; }
.hr-login-form .form-label { display: block; margin-bottom: 10px; color: #383b55; font-size: 15px; font-weight: 700; }
.hr-login-form .hr-text-link { margin-bottom: 10px; color: #5845b2; font-size: 14px; }
.hr-input-wrap { position: relative; }
.hr-input-wrap > i { position: absolute; top: 50%; left: 15px; z-index: 1; transform: translateY(-50%); color: #64677e; font-size: 21px; pointer-events: none; }
.hr-input-wrap .form-control { height: 54px; padding: 0 54px 0 46px; border: 1px solid #c9cbd8; border-radius: 8px; color: #30334e; font-size: 16px; }
.hr-input-wrap .form-control::placeholder { color: #6c7085; opacity: 1; }
.hr-input-wrap .form-control:focus { border-color: #988be4; box-shadow: 0 0 0 3px rgba(102, 88, 211, .08); }
.hr-text-link { color: #7667d3; font-size: 9px; text-decoration: none; }
.hr-password-toggle { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; color: #51556f; background: transparent; cursor: pointer; }
.hr-password-toggle:hover { color: #4937a0; background: #f1efff; }
.hr-password-toggle:focus-visible { outline: 2px solid #6859d4; outline-offset: -2px; }
.hr-password-toggle .hr-eye-closed { display: none; }
.hr-password-toggle[aria-pressed="true"] .hr-eye-open { display: none; }
.hr-password-toggle[aria-pressed="true"] .hr-eye-closed { display: block; }
.hr-remember { margin: 16px 0 23px; color: #858699; font-size: 10px; }
.hr-remember .form-check-input { margin-top: 2px; }
.hr-remember .form-check-input:checked { border-color: #6a5bd0; background-color: #6a5bd0; }
.hr-signin-btn { display: flex; height: 54px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; background: #6859d4; box-shadow: 0 7px 17px rgba(102, 88, 211, .19); font-size: 17px; font-weight: 700; }
.hr-signin-btn:hover { background: #5646c2; }
.hr-signin-btn i { font-size: 16px; }
.hr-login-bottom { margin-top: 28px; color: #606379; font-size: 14px; line-height: 1.6; text-align: center; }
.hr-login-bottom a { color: #6d5dd2; font-weight: 600; text-decoration: none; }
.hr-login-copyright { position: absolute; right: 30px; bottom: 22px; color: #64677e; font-size: 13px; }
.hr-login-copyright span { margin: 0 4px; color: #d3d2dc; }
.hr-login-mobile-brand { display: none !important; margin-bottom: 35px; }

@media (max-width: 1199px) {
  .hr-content { padding-right: 23px; padding-left: 23px; }
  .hr-stat-card .card-body { padding-right: 15px; padding-left: 15px; }
  .hr-employee-toolbar { align-items: flex-start; gap: 12px; }
}
@media (max-width: 991px) {
  .hr-login-shell { grid-template-columns: minmax(310px, .85fr) 1.15fr; }
  .hr-login-visual { padding-right: 8%; padding-left: 8%; }
  .hr-login-decoration { right: -23%; width: 90%; }
}
@media (max-width: 767px) {
  .hr-content { padding: 25px 16px 16px; }
  .hr-breadcrumb { display: none !important; }
  .hr-page-title { font-size: 21px; }
  .sidebar-footer { display: none; }
  .hr-footer { padding: 12px 17px; }
  .hr-employee-toolbar { flex-direction: column; }
  .hr-login-shell { display: block; }
  .hr-login-visual { display: none; }
  .hr-login-content { min-height: 100vh; padding: 30px 24px 65px; }
  .hr-login-mobile-brand { display: inline-flex !important; }
  .hr-login-copyright { right: 0; left: 0; text-align: center; }
}
@media (max-width: 480px) {
  .hr-navbar .navbar-brand-wrapper { width: 55px; }
  .hr-navbar .navbar-menu-wrapper { padding-right: 10px; padding-left: 5px; }
  .hr-profile-copy, .hr-profile-link > i { display: none !important; }
  .hr-panel-card .card-body { padding: 16px; }
  .hr-employee-toolbar .d-flex { width: 100%; }
  .hr-search-wrap { flex: 1; }
  .hr-search-wrap input { width: 100%; }
  .hr-filter-select { min-width: 95px; }
  .hr-table-footer { align-items: flex-start; gap: 10px; flex-direction: column; }
  .hr-login-content { padding-right: 22px; padding-left: 22px; }
}