/* 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:34px;padding:8px 11px;margin:14px 0 3px;color:#71849a;cursor:pointer;border-radius:5px}
.app-sidebar .nav-section:hover {background:#f1f4f8;color:#2a3f55}
/* A hairline above each group, so the sections read as groups without adding
   any extra chrome to the column. */
.app-sidebar .nav-section:not(:first-of-type) {border-top:1px solid #e8edf3;padding-top:13px;margin-top:11px}
.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}
/* Darker ink and a little more room. The old #213449 on white was legible but
   sat back; these items are the main way round the product. */
.app-sidebar .nav-link {min-height:40px;border-radius:7px;padding:9px 11px;gap:11px;margin:3px 0;color:#1b3249;line-height:1.45;position:relative;transition:background .14s,color .14s,box-shadow .14s}
.app-sidebar .nav-link i {color:#546980;opacity:1;font-size:16.5px;flex-shrink:0;transition:color .14s}

.app-sidebar .nav-link:hover {background:#edf3fa;color:#143c68}
.app-sidebar .nav-link:hover i {color:#245d9b}

/* A 4px bar rather than 3, a stronger tint, and the icon takes the accent
   colour too — so the current page is obvious at a glance rather than on
   inspection. */
.app-sidebar .nav-link.active {background:#e3eefb;color:#143c68;box-shadow:inset 4px 0 var(--hrms-primary)}
.app-sidebar .nav-link.active i {color:var(--hrms-primary)}

/* Keyboard users get the same clarity as the pointer. */
.app-sidebar .nav-link:focus-visible {outline:2px solid var(--hrms-primary);outline-offset:-2px;background:#edf3fa}
.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}
/* Size and weight come from typography.css, which loads after this file; what
   is set here is the accent that makes a page title read as a title rather
   than as large text. */
.page-header h1 {line-height:1.2;margin:7px 0 10px;position:relative;padding-bottom:9px}
.page-header h1::after {content:'';position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:2px;background:var(--hrms-primary)}
.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}

/* ---- Date fields and the topbar clock -------------------------------------
   A native <input type="date"> prints whatever the BROWSER's locale says. On
   these machines that is 11/02/2026 for the 2nd of November - which in a UAE
   product is also a perfectly good reading of the 11th of February. The date
   is the most load-bearing value on the attendance screen, so it has to be
   unambiguous.

   The native input is KEPT rather than replaced: the OS picker, keyboard
   entry, form submission and every existing `el.value` read and `change`
   listener go on working untouched. It is simply made transparent and laid
   over a label we control, which prints the weekday and a spelled-out month.
   176 of these inputs exist across 35 pages, so swapping in a custom widget
   would have been a rewrite with no upside. */
.hrms-datefield {
  position:relative; display:inline-flex; align-items:center; gap:8px;
  min-height:32px; padding:0 11px; background:#fff;
  border:1px solid var(--hrms-line); border-radius:7px;
  color:var(--hrms-ink); font-size:12.5px; line-height:1; white-space:nowrap;
  transition:border-color .14s, box-shadow .14s;
}
.hrms-datefield:hover { border-color:#b9c6d6; }
/* focus-within, not focus: the element actually focused is the hidden input */
.hrms-datefield:focus-within {
  border-color:var(--hrms-primary); box-shadow:0 0 0 3px rgba(36,93,155,.13);
}
.hrms-datefield > i { color:var(--hrms-primary); font-size:14px; flex-shrink:0; }
/* tabular-nums stops the field twitching as the day ticks 9 -> 10 */
.hrms-datefield__text { font-variant-numeric:tabular-nums; font-weight:500; }
.hrms-datefield__dow  { color:var(--hrms-muted); font-weight:400; }
.hrms-datefield--empty .hrms-datefield__text { color:#9aa8b8; font-weight:400; }
.hrms-datefield > input[type=date],
.hrms-datefield > input[type=month] {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:0; padding:0; margin:0; background:transparent; cursor:pointer;
  /* Bootstrap's .form-control-sm padding and line-height otherwise make the
     hit area 39px tall inside a 32px chip, overhanging it and swallowing
     clicks meant for the buttons beside it in the ledger's button group. */
  box-sizing:border-box; min-height:0; line-height:1; font-size:inherit;
}
/* Inside a btn-group the field has to square up against its neighbours. */
.btn-group > .hrms-datefield { border-radius:0; margin-left:-1px; }
.btn-group > .hrms-datefield:focus-within { z-index:2; }

/* Any date input the enhancer skipped still gets the same shell, so a page
   never shows two different-looking date controls side by side. */
input[type=time] { border-radius:7px; font-variant-numeric:tabular-nums; }

/* ---- Topbar clock ---------------------------------------------------------
   Was a 10px grey "2 Nov 2026 - UAE" with no time on it at all. Attendance is
   judged in minutes, so the hour being looked at matters as much as the day,
   and it should be Dubai's hour rather than the laptop's. */
.workspace-date {
  display:inline-flex; align-items:center; gap:9px;
  margin-left:24px; padding:5px 12px;
  background:var(--hrms-primary-soft); border:1px solid #d7e3f0; border-radius:999px;
  font-size:11.5px; line-height:1; color:#2b4a6b; white-space:nowrap; letter-spacing:0;
}
.workspace-date i { font-size:13px; color:var(--hrms-primary); }
.workspace-date .wd-time {
  font-weight:600; font-variant-numeric:tabular-nums;
  padding-left:9px; border-left:1px solid #c6d7e8;
}
.workspace-date .wd-zone { color:#6b8099; }
@media (max-width:1400px) { .workspace-date .wd-zone { display:none; } }

/* ---- Calendar popup -------------------------------------------------------
   Replaces the browser's own picker, which is cramped, styled by the OS and
   looks nothing like the rest of the product. One panel is built and reused
   for every field on the page rather than one per input - there are 176 of
   them and only ever one open at a time. */
.hrms-cal {
  position:absolute; z-index:1080; width:272px; padding:12px;
  background:#fff; border:1px solid var(--hrms-line); border-radius:12px;
  box-shadow:0 14px 36px rgba(21,45,72,.17), 0 2px 6px rgba(21,45,72,.06);
  font-family:'Poppins',sans-serif; font-size:12.5px; color:var(--hrms-ink);
  user-select:none;
}
.hrms-cal[hidden] { display:none; }

.hrms-cal__head { display:flex; align-items:center; gap:4px; margin-bottom:6px; }
.hrms-cal__title {
  flex:1; border:0; background:transparent; font:inherit; font-weight:600;
  font-size:13px; color:var(--hrms-ink); text-align:left; padding:5px 7px;
  border-radius:7px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.hrms-cal__title:hover { background:var(--hrms-primary-soft); color:var(--hrms-primary); }
.hrms-cal__title i { font-size:11px; color:var(--hrms-muted); }
.hrms-cal__nav {
  width:30px; height:30px; flex:0 0 30px; border:0; border-radius:8px;
  background:transparent; color:var(--hrms-muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.hrms-cal__nav:hover { background:var(--hrms-primary-soft); color:var(--hrms-primary); }
.hrms-cal__nav:disabled { opacity:.3; cursor:default; background:transparent; }

.hrms-cal__dow { display:grid; grid-template-columns:repeat(7,1fr); }
.hrms-cal__dow span {
  text-align:center; padding:6px 0; font-size:9.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--hrms-muted);
}
.hrms-cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.hrms-cal__day {
  height:32px; border:0; border-radius:8px; background:transparent;
  font:inherit; font-variant-numeric:tabular-nums; color:var(--hrms-ink);
  cursor:pointer; transition:background .12s, color .12s;
}
.hrms-cal__day:hover:not(:disabled) { background:var(--hrms-primary-soft); }
.hrms-cal__day:focus-visible { outline:2px solid var(--hrms-primary); outline-offset:-2px; }
/* Days spilling in from the neighbouring months stay visible but recede, so
   the shape of the month is readable at a glance. */
.hrms-cal__day--out { color:#b7c3d0; }
.hrms-cal__day--today { box-shadow:inset 0 0 0 1.5px var(--hrms-primary); color:var(--hrms-primary); font-weight:600; }
.hrms-cal__day--sel { background:var(--hrms-primary); color:#fff; font-weight:600; }
.hrms-cal__day--sel:hover { background:var(--hrms-primary-dark); }
.hrms-cal__day:disabled { color:#d2dae3; cursor:not-allowed; }

/* Month and year jump - paging one month at a time to reach last September
   is the main thing wrong with most date pickers. */
.hrms-cal__months { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.hrms-cal__month {
  height:38px; border:0; border-radius:8px; background:transparent;
  font:inherit; font-size:12px; color:var(--hrms-ink); cursor:pointer;
}
.hrms-cal__month:hover { background:var(--hrms-primary-soft); }
.hrms-cal__month--sel { background:var(--hrms-primary); color:#fff; font-weight:600; }

.hrms-cal__foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:9px; padding-top:9px; border-top:1px solid var(--hrms-line);
}
.hrms-cal__foot button {
  border:0; background:transparent; font:inherit; font-size:12px; font-weight:500;
  color:var(--hrms-primary); padding:5px 9px; border-radius:7px; cursor:pointer;
}
.hrms-cal__foot button:hover { background:var(--hrms-primary-soft); }
.hrms-cal__foot .hrms-cal__clear { color:var(--hrms-muted); }
.hrms-cal__foot .hrms-cal__clear:hover { color:var(--hrms-danger); background:var(--hrms-danger-soft); }

/* Time and datetime stay NATIVE - typing 09:30 beats any popup, and a custom
   time picker would be a worse control that merely matched. They only ever
   looked out of place beside the new date chips, so only the look changes. */
input[type=time], input[type=datetime-local] {
  min-height:32px; padding:0 11px; border:1px solid var(--hrms-line);
  border-radius:7px; background:#fff; color:var(--hrms-ink);
  font-size:12.5px; font-variant-numeric:tabular-nums;
  transition:border-color .14s, box-shadow .14s;
}
input[type=time]:hover, input[type=datetime-local]:hover { border-color:#b9c6d6; }
input[type=time]:focus, input[type=datetime-local]:focus {
  border-color:var(--hrms-primary); box-shadow:0 0 0 3px rgba(36,93,155,.13); outline:0;
}
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity:.45; cursor:pointer;
}
input[type=time]:hover::-webkit-calendar-picker-indicator { opacity:.8; }