/* Shared HR interface. Layout and colour tokens are intentionally centralized. */
:root {
  --hrms-primary:#245d9b; --hrms-primary-dark:#194775; --hrms-primary-soft:#eaf1f8;
  --hrms-ink:#213449; --hrms-muted:#637488; --hrms-line:#dce3eb; --hrms-bg:#f3f5f8;
  --hrms-sidebar:#fff; --hrms-sidebar-hover:#f0f4f9; --hrms-sidebar-active:#eaf1f8;
  --hrms-success:#237758; --hrms-success-soft:#eaf6ef; --hrms-warning:#9a6419;
  --hrms-warning-soft:#fff5e4; --hrms-danger:#b23d48; --hrms-danger-soft:#fcecef;
  --bs-primary-rgb:36,93,155; --bs-body-color:#213449; --bs-body-bg:#f3f5f8;
  --bs-border-color:#dce3eb; --bs-link-color:#245d9b; --bs-link-hover-color:#194775;
  --bs-body-font-family:'Poppins',sans-serif; --nav-width:252px;
}
body {background:var(--hrms-bg); color:var(--hrms-ink);font-size:13px;line-height:1.6;letter-spacing:0}
h1,h2,h3,h4,h5,h6 {letter-spacing:-.025em;color:var(--hrms-ink)}
a {color:var(--hrms-primary)}
/* A light, clearly divided navigation column, anchored by the company mark. */
.app-sidebar {width:var(--nav-width);padding:0 14px 22px;background:#fff;border-right:1px solid var(--hrms-line);color:var(--hrms-ink);scrollbar-width:thin;scrollbar-color:#c9d4e0 transparent}
.app-sidebar .brand {margin:0 -14px 18px;padding:17px 22px;height:82px;min-height:82px;background:#20364b;justify-content:flex-start;border-bottom:3px solid #bd774a}
.app-sidebar .brand .logo-img {max-width:180px;max-height:45px;border-radius:0}
.sidebar-menu-tools {display:flex;justify-content:space-between;align-items:center;padding:0 10px 12px;border-bottom:1px solid var(--hrms-line);color:#6a798a;font-size:10px}
.sidebar-menu-tools>span {font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.sidebar-menu-tools button {background:transparent;border:0;color:var(--hrms-primary);font:inherit;font-weight:500;min-height:32px;padding:4px;cursor:pointer}
.app-sidebar .nav-section {display:flex;align-items:center;justify-content:space-between;min-height:37px;padding:9px 11px;margin:9px 0 2px;color:#637488;font-size:10px;font-weight:600;letter-spacing:.065em;cursor:pointer;border-radius:5px}
.app-sidebar .nav-section:hover {background:#f3f5f8;color:#213449}
.app-sidebar .nav-section::after {content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:3px;margin-top:-3px}
.app-sidebar .nav-section[aria-expanded=false]::after {transform:rotate(-45deg);margin-top:0}
.app-sidebar .nav-link {min-height:39px;border-radius:5px;padding:9px 11px;gap:10px;margin:2px 0;color:#45576b;font-size:11.5px;font-weight:400;line-height:1.45;position:relative}
.app-sidebar .nav-link i {color:#6d8095;opacity:1;font-size:16px;flex-shrink:0}
.app-sidebar .nav-link:hover {background:#f0f4f9;color:#194775}
.app-sidebar .nav-link.active {background:#eaf1f8;color:#194775;box-shadow:inset 3px 0 #245d9b;font-weight:600}
.app-sidebar .nav-link.active i {color:#245d9b}
.app-sidebar .nav-link[data-nav-collapsed=true] {display:none}
/* Compact top bar; page titles and actions stay in the content area. */
.app-topbar {left:var(--nav-width);height:70px;background:#fff;border-bottom:1px solid var(--hrms-line);padding:0 30px;box-shadow:none}
.app-content {margin-left:var(--nav-width);padding:98px 30px 42px;max-width:1920px}
#mod-search-btn {display:flex;align-items:center;gap:10px;width:min(370px,35vw);height:38px;border:1px solid #e0e6ee;border-radius:6px;padding:0 12px;background:#f7f9fb;color:#65768a;font-size:11px;text-align:left}
#mod-search-btn .search-hint {margin-left:auto;font-size:9px;border:1px solid #dce3eb;border-radius:3px;padding:1px 5px;background:#fff;white-space:nowrap}
.topbar-icon-btn {border-radius:6px;color:#50657b;background:transparent;border:1px solid transparent;min-width:36px;min-height:36px}
.topbar-icon-btn:hover {background:#eef3f8;border-color:#dce3eb}
.topbar-profile {border-left:1px solid var(--hrms-line);padding-left:17px;gap:10px}
.topbar-profile .avatar {border-radius:50%;background:#eaf1f8;color:#245d9b;box-shadow:none;width:35px;height:35px;font-size:12px}
.topbar-profile .meta strong {font-size:11px;font-weight:600}.topbar-profile .meta span {font-size:10px;color:#637488}
.workspace-date {font-size:10px;color:#637488;white-space:nowrap;margin-left:24px;letter-spacing:0}
.skip-link {position:fixed;top:-90px;left:270px;padding:12px;background:white;color:#194775;z-index:3000}.skip-link:focus {top:10px}
.page-header,.page-header:not(.page-header--plain) {background:none;border-radius:0;box-shadow:none;border:0;padding:0;margin:0 0 27px;align-items:center;gap:18px}
.page-header h1 {font-size:27px;font-weight:600;line-height:1.3;margin:7px 0 8px;letter-spacing:-.035em}
.page-header .lead {font-size:12px;color:var(--hrms-muted);line-height:1.7;max-width:750px;margin:0}
.breadcrumbs,.page-header .breadcrumbs {font-size:10px;font-weight:500;text-transform:none;letter-spacing:0;color:#728297}
.page-header:not(.page-header--plain) h1 {color:var(--hrms-ink)}
.page-header:not(.page-header--plain) .lead {color:var(--hrms-muted)}
.page-header:not(.page-header--plain) .breadcrumbs,.page-header:not(.page-header--plain) .breadcrumbs a,.page-header:not(.page-header--plain) .breadcrumbs span {color:#728297!important}
/* Reusable surfaces and data controls. */
.app-card {background:#fff;border:1px solid var(--hrms-line);border-radius:9px;box-shadow:0 2px 3px #21344903}
.app-card .card-section-header,.card-section-header {padding:18px 21px;border-bottom:1px solid #e5eaf0;background:#fff;gap:12px;flex-wrap:wrap}
.app-card .card-section-header h3,.card-section-header h3 {font-size:13px;font-weight:600;margin:0;letter-spacing:-.015em}
.app-card .card-section-body,.card-section-body {padding:21px}
.btn {border-radius:5px;font-size:11px;font-weight:500;padding:9px 15px;min-height:37px;box-shadow:none;line-height:1.55;letter-spacing:0}
.btn:hover {transform:none}.btn-sm {padding:6px 11px;font-size:10.5px;min-height:31px}.btn-lg {font-size:13px;padding:12px 20px}
.btn-primary,.page-header:not(.page-header--plain) .btn-primary {--bs-btn-bg:#245d9b;--bs-btn-border-color:#245d9b;--bs-btn-hover-bg:#194775;--bs-btn-hover-border-color:#194775;--bs-btn-active-bg:#194775;background:#245d9b;border-color:#245d9b;color:white;box-shadow:0 2px 2px #2134490d}
.btn-primary:hover,.page-header:not(.page-header--plain) .btn-primary:hover {background:#194775;border-color:#194775;color:white}
.btn-soft,.btn-light,.btn-outline-primary,.page-header:not(.page-header--plain) .btn:not(.btn-primary) {background:#fff;border:1px solid #d4dde7;color:#365774}
.btn-soft:hover,.btn-light:hover,.btn-outline-primary:hover,.page-header:not(.page-header--plain) .btn:not(.btn-primary):hover {background:#edf3f9;border-color:#bdccdc;color:#194775}
.btn-link {color:#245d9b}
.form-control,.form-select,.page-header:not(.page-header--plain) .form-control,.page-header:not(.page-header--plain) .form-select {border-radius:5px;border:1px solid #cdd7e2;font-size:12px;min-height:39px;background-color:#fff;color:#213449;line-height:1.6}
.form-control::placeholder,.page-header:not(.page-header--plain) .form-control::placeholder {color:#8492a3;opacity:1}
.form-control:focus,.form-select:focus {border-color:#668fb9;box-shadow:0 0 0 3px #245d9b16}
.form-control:disabled,.form-select:disabled {background:#f0f3f6;color:#728297}
.form-label,label {font-size:11px;font-weight:500}.form-label {margin-bottom:7px}.form-text {font-size:10px;color:#637488}
.form-check-input:checked {background-color:#245d9b;border-color:#245d9b}
:focus-visible {outline:2px solid #245d9b;outline-offset:3px}
.app-table {color:#213449;--bs-table-hover-bg:#f6f9fc;--bs-table-bg:#fff}
.app-table thead th {background:#f6f8fb;color:#627389;font-size:10px;font-weight:600;letter-spacing:.025em;text-transform:none;padding:13px 17px;border-bottom:1px solid var(--hrms-line);white-space:nowrap}
.app-table tbody td {padding:14px 17px;font-size:11.5px;border-bottom-color:#edf0f4;vertical-align:middle}
.app-table tbody tr:hover {background:#f6f9fc}.table-responsive {scrollbar-width:thin;scrollbar-color:#ccd6e1 transparent}
.kpi {border:1px solid var(--hrms-line);border-radius:8px;background:#fff;box-shadow:none;padding:20px;position:relative}
.kpi:hover {box-shadow:none;transform:none}.kpi .kpi-icon {width:34px;height:34px;border-radius:7px;font-size:17px;margin-bottom:14px;background:#eaf1f8;color:#245d9b}
.kpi .kpi-label {font-size:11px;text-transform:none;letter-spacing:0;font-weight:400;color:#637488}
.kpi .kpi-value {font-size:29px;font-weight:600;line-height:1.3;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:5px 0}
.kpi .kpi-trend {font-size:10px;line-height:1.6}
.chip,.badge {font-size:10px;font-weight:500;border-radius:4px;letter-spacing:0;line-height:1.5}
.chip.primary,.bg-soft-primary {background:#eaf1f8;color:#245d9b}.chip.success {background:#eaf6ef;color:#237758}.chip.warning {background:#fff5e4;color:#9a6419}.chip.danger {background:#fcecef;color:#b23d48}
.avatar {border-radius:50%;background:#eaf1f8;color:#245d9b}
.nav-tabs {border-bottom:1px solid var(--hrms-line);gap:6px}
.nav-tabs .nav-link {background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 17px;font-size:11px;color:#637488;font-weight:500}
.nav-tabs .nav-link.active {border-bottom-color:#245d9b;color:#245d9b;background:transparent}
.nav-pills {border:1px solid #dce3eb;background:#eaf0f6;padding:4px;border-radius:6px;gap:3px}
.nav-pills .nav-item .nav-link,.nav-pills>.nav-link {border-radius:4px;font-size:11px;padding:8px 14px;color:#637488}
.nav-pills .nav-link.active {color:#245d9b;background:#fff;box-shadow:0 1px 3px #21344914}
.modal-content {border:1px solid #dce3eb;border-radius:10px;box-shadow:0 18px 70px #172b4540}
.modal-header,.modal-content:not(.modal--plain) .modal-header {padding:20px 24px;background:#fff;color:#213449;border-bottom:1px solid #dce3eb;border-radius:10px 10px 0 0}
.modal-title,.modal-content:not(.modal--plain) .modal-header .modal-title {color:#213449;font-size:17px;font-weight:600}
.modal-content:not(.modal--plain) .modal-header .btn-close {filter:none}
.modal-body {padding:24px}.modal-footer {background:#f7f9fb;border-top:1px solid #e3e9f0;padding:15px 24px}
.modal .form-control,.modal .form-select {border-radius:5px}.modal-backdrop.show {opacity:.4}
.alert {border-radius:6px;font-size:12px;line-height:1.7}.progress {background:#edf1f6;border-radius:4px}.progress-bar {background:#245d9b}
.dropdown-menu {border:1px solid var(--hrms-line);border-radius:7px;font-size:12px;box-shadow:0 8px 28px #21344916}
.dropdown-item {padding:9px 16px}.dropdown-item:active {background:#245d9b}
.pagination .page-link {color:#245d9b;font-size:11px;border-color:#dce3eb}.pagination .active .page-link {background:#245d9b;color:#fff;border-color:#245d9b}
/* Dashboard: a slim task bar and individual, readable statistics. */
.work-strip {display:grid;grid-template-columns:.8fr repeat(3,1fr);margin:0 0 24px;background:#20364b;border-radius:8px;border:1px solid #20364b;color:#fff;overflow:hidden}
.work-strip>div,.work-strip>a {padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-right:1px solid #ffffff24;color:#fff;text-decoration:none}
.work-strip>:last-child {border:0}.work-strip>a:hover {background:#2c465f}.work-strip small {font-size:9px;letter-spacing:.04em;color:#bacada;text-transform:uppercase}.work-strip strong {font-size:12px;font-weight:500}.work-strip span {font-size:10px;color:#cad6e2}
.dashboard-note {font-size:10px;color:#637488}
body.workspace-dashboard .dcal-cell {background:#f2f5f9;border-radius:5px;box-shadow:none}
body.workspace-dashboard .dcal-today {outline-color:#245d9b;background:#eaf1f8}
body.workspace-dashboard .dcal-cell:hover {transform:none;background:#e3edf7}
body.workspace-dashboard #att-7day .bar {background:#edf2f7!important;border-radius:4px!important}
body.workspace-dashboard #att-7day .bar>span {background:#5981ab!important;border-radius:4px 4px 0 0!important}
body.workspace-dashboard #att-7day a {position:relative}
/* Login and public HR portals share the same typography and controls. */
.login-shell {grid-template-columns:minmax(360px,.9fr) 1.1fr;background:#f6f8fb}
.login-shell .login-art {background:#20364b;padding:55px;color:#fff;border-right:0}
.login-shell .login-art::before,.login-shell .login-art::after {display:none}
.login-art h1 {font-size:39px!important;font-weight:500!important;line-height:1.3!important;letter-spacing:-.04em!important;color:#fff;max-width:440px;border-top:3px solid #bd774a;padding-top:26px}
.login-art p {font-size:13px!important;color:#c8d5e2!important;line-height:1.9!important}
.login-art .d-flex.flex-wrap {gap:12px!important;display:grid!important;grid-template-columns:1fr 1fr;font-size:11px!important}
.login-art .d-flex.flex-wrap>div {padding:12px 0;border-top:1px solid #ffffff24}
.login-shell .login-form {padding:50px}.login-form>div {max-width:400px!important}.login-form h2 {font-size:25px!important;font-weight:600!important;line-height:1.4;letter-spacing:-.03em!important}
.login-form .form-control {min-height:46px;background:#fff}.login-form .btn[type=submit] {min-height:44px;margin-top:12px}.login-form .form-label {font-size:12px}
body.public-portal {background:#f3f5f8;color:#213449;padding:28px 18px}
.public-portal .card-wrap {border-radius:9px;border-color:#dce3eb;box-shadow:none}
.public-portal .hero {background:#20364b;color:#fff;border-radius:9px}
.public-portal .signature {color:#245d9b}
body.attendance-kiosk {background:#20364b;color:#fff;padding:20px}.attendance-kiosk h2 {color:#fff}.attendance-kiosk .muted {color:#c8d5e2}
/* Adaptation and keyboard access. */
@media(min-width:1600px){.app-content {padding-left:44px;padding-right:44px}}
@media(max-width:1200px){.workspace-date {display:none}.work-strip {grid-template-columns:repeat(2,1fr)}.work-strip>:nth-child(2) {border-right:0}.work-strip>:nth-child(-n+2) {border-bottom:1px solid #ffffff24}}
@media(max-width:991.98px){.app-topbar {left:0;padding:0 20px}.app-content {margin-left:0;padding:95px 22px 32px}.app-sidebar {width:252px;box-shadow:8px 0 40px #21344925}.page-header h1 {font-size:25px}#mod-search-btn {width:min(360px,50vw)}.login-shell {grid-template-columns:1fr}.skip-link {left:16px}}
@media(max-width:575.98px){.app-topbar {height:62px;padding:0 12px}.app-content {padding:84px 15px 30px}.page-header,.page-header:not(.page-header--plain) {margin-bottom:22px;gap:14px}.page-header h1 {font-size:23px}.page-header .lead {font-size:11px}.page-header>.btn {width:100%}.topbar-actions {gap:5px}.topbar-profile {padding-left:8px}#mod-search-btn {width:43vw;font-size:10px;height:36px}#mod-search-btn .search-hint {display:none}.work-strip {grid-template-columns:1fr 1fr}.work-strip>div,.work-strip>a {padding:14px}.work-strip strong {font-size:11px}.work-strip span {font-size:9px}.app-card .card-section-header {padding:16px}.app-card .card-section-body {padding:16px}.kpi {padding:17px}.kpi .kpi-value {font-size:25px}.kpi .kpi-label {font-size:10px}.login-shell .login-form {padding:32px 23px}.modal-body {padding:18px}.modal-header,.modal-content:not(.modal--plain) .modal-header {padding:18px}.public-portal .wrap {width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.app-sidebar,.app-topbar,.skip-link {display:none!important}.app-content {margin:0;padding:0}.app-card {break-inside:avoid}body {background:#fff}}

/* Module-specific surfaces use the same restrained treatment. */
.ap-hero,.company-banner,.profile-banner,.pp-hero {background:#20364b;border-radius:9px;box-shadow:none}
.ap-hero h1,.ap-hero h2,.company-banner h1,.company-banner h2,.profile-banner h1,.profile-banner h2,.pp-hero h1,.public-portal .hero h1,.app-head h1,.bday-hero h1,.bday-hero h2 {color:#fff}
.ap-hero::before,.ap-hero::after,.pp-hero::before,.pp-hero::after {display:none}
.kanban-col {border-radius:7px;background:#edf2f7}.kanban-card {border-radius:6px;border-color:#dce3eb;box-shadow:none}
.bar {background:#edf2f7}.bar>span {background:#5981ab}
.offcanvas-header {border-bottom:1px solid #dce3eb}.offcanvas-header h5 {color:inherit}
#candidateModal .modal-header {background:#fff;color:#213449;border-bottom:1px solid #dce3eb}
#candidateModal .modal-header .modal-title {color:#213449}#candidateModal .modal-header .btn-close {filter:none}
.public-portal .job-card {border-radius:8px;box-shadow:none}.public-portal .job-card:hover {transform:none;border-color:#94aec9}
.public-portal .app-head {background:#20364b}.public-portal .chip {background:#eaf1f8;color:#245d9b}
#mod-search-box {border-radius:9px!important;border:1px solid #dce3eb;box-shadow:0 20px 70px #21344930!important}
.app-table tbody td:has(>.btn) {white-space:nowrap}
.app-table tbody td>.btn {padding:6px 9px;min-width:30px}
.app-card .card-section-header {border-radius:8px 8px 0 0}
@media(max-width:575.98px){.card-section-header>.d-flex {flex-wrap:wrap;width:100%}.card-section-header .form-control,.card-section-header .form-select {max-width:100%}}
@media(max-width:575.98px){
 .row>[class*="col"]:has(>.kpi) {width:50%}
 .kpi {height:100%}.kpi .kpi-icon {width:29px;height:29px;margin-bottom:10px}
 .btn,.form-control,.form-select {min-height:40px}.app-table tbody td>.btn {min-height:34px}
 .app-sidebar .nav-link {min-height:42px}
}
.btn {white-space:nowrap}
.card-section-header>.d-flex {flex-wrap:wrap}
.nav-tabs {overflow-y:hidden;flex-wrap:nowrap}