:root {
    --bs-body-font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    --icon: #475569;
    --icon-hover: #0F172A;
    --primary: #0F766E;
    --primary-hover: #115E59;
    --primary-pressed: #134E4A;
    --sidebar: #F3F5F8;
    --text: #374151;
    --muted: #64748B;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --surface: #FFFFFF;
    --page: #F8FAFC;
    --soft: #F1F5F9;
    --teal-soft: #F0FDFA;
    --teal-selected: #CCFBF1;
}

/* COC and CTO monitoring */
.coc-page-heading,.coc-heading-actions,.coc-toolbar,.coc-filter-form,.coc-view-tabs{display:flex;align-items:center;gap:10px}.coc-page-heading{justify-content:space-between}.coc-rule-banner{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;padding:13px 16px;border:1px solid #9adbd2;border-radius:14px;background:#effcf9;color:#115f59}.coc-rule-banner span{font-size:.82rem;color:#466d6a}.coc-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.coc-summary-grid article{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid #d6e1eb;border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.05)}.coc-summary-grid span{font-size:.78rem;color:#64748b}.coc-summary-grid strong{font-size:1.5rem;color:#0f766e}.coc-summary-grid small{font-size:.7rem;color:#8190a5}.coc-summary-grid .is-warning strong{color:#c56a0a}.coc-monitor-shell{overflow:hidden}.coc-toolbar{justify-content:space-between;padding:14px 16px}.coc-view-tabs{padding:4px;border-radius:12px;background:#eef3f7}.coc-view-tabs button{border:0;border-radius:9px;padding:8px 12px;background:transparent;color:#526174;font-weight:700}.coc-view-tabs button.is-active{background:#fff;color:#087c73;box-shadow:0 2px 8px rgba(15,23,42,.09)}.coc-filter-form label{display:flex;align-items:center;gap:6px;font-size:.76rem;color:#5d6d80}.coc-filter-form input[name=year]{width:92px}.coc-filter-form input[name=q]{width:240px}.coc-table{margin:0}.coc-table th{white-space:nowrap}.coc-table td{vertical-align:middle}.coc-employee-cell{display:flex;flex-direction:column}.coc-employee-cell small{color:#718096}.coc-balance-value{font-weight:800;color:#087c73}.coc-empty-cell{text-align:center!important;padding:28px!important;color:#718096}.coc-print-link{display:inline-flex;padding:6px 11px;border:1px solid #85cfc6;border-radius:9px;color:#087c73;font-weight:700;text-decoration:none}.coc-modal-backdrop{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;overflow:auto;padding:22px;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}.coc-modal{width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid #d6e1eb;border-radius:20px;background:#fff;box-shadow:0 25px 70px rgba(15,23,42,.32)}.coc-modal.is-compact{width:min(720px,calc(100vw - 32px))}.coc-modal>header,.coc-modal footer{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}.coc-modal>header h2{margin:0;font-size:1.05rem;color:#087c73}.coc-modal>header p{margin:3px 0 0;font-size:.78rem;color:#718096}.coc-modal footer{justify-content:flex-end;border-top:1px solid #e2e8f0;border-bottom:0}.coc-modal-body{padding:18px 20px}.coc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.coc-field{display:flex;flex-direction:column;gap:5px}.coc-field.is-wide{grid-column:1/-1}.coc-field>span,.coc-computation span{font-size:.74rem;color:#607086}.coc-field textarea{min-height:72px;resize:vertical}.coc-computation{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border:1px solid #d8e2ea;border-radius:11px;background:#f8fafc}.coc-computation.is-total{border-color:#81d4ca;background:#ebfaf7}.coc-computation strong{color:#087c73}.coc-form-note{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#fff8e7;color:#7c5b18;font-size:.76rem}.coc-print-toolbar{position:fixed;z-index:5;top:16px;right:18px;display:flex;gap:8px}.coc-print-toolbar button{padding:9px 14px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font-weight:700}.coc-certificate-sheet{width:210mm;min-height:297mm;margin:0 auto;padding:24mm 22mm;background:#fff;color:#111;font-family:"Times New Roman",serif}.coc-certificate-header{display:flex;flex-direction:column;align-items:center;line-height:1.35}.coc-certificate-header strong{font-size:1.1rem}.coc-certificate-sheet h1{margin:28px 0 5px;text-align:center;font-size:1.25rem}.coc-certificate-number{text-align:center}.coc-certificate-paragraph{margin:28px 0;text-align:justify;line-height:1.6;text-indent:36px}.coc-certificate-details{width:100%;border-collapse:collapse}.coc-certificate-details th,.coc-certificate-details td{padding:8px 10px;border:1px solid #444;text-align:left;vertical-align:top}.coc-certificate-details th{width:38%}.coc-credit-row{font-size:1.05rem}.coc-certificate-signatures{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:55px}.coc-certificate-signatures section{display:flex;flex-direction:column;min-height:95px;text-align:center}.coc-certificate-signatures span{text-align:left}.coc-certificate-signatures strong{margin-top:auto;border-bottom:1px solid #111;padding-bottom:3px}.coc-certificate-signatures small{margin-top:4px}.coc-certificate-sheet>footer{margin-top:60px;text-align:center;font-size:.78rem}

body.dark-mode .coc-rule-banner{border-color:#245f5a;background:#102c2b;color:#80e2d6}body.dark-mode .coc-rule-banner span{color:#9db7b8}body.dark-mode .coc-summary-grid article,body.dark-mode .coc-modal{border-color:#294550;background:#10242d;color:#e6f0f2}body.dark-mode .coc-summary-grid strong,body.dark-mode .coc-balance-value,body.dark-mode .coc-modal>header h2{color:#65d8ca}body.dark-mode .coc-view-tabs{background:#0c1d25}body.dark-mode .coc-view-tabs button{color:#9eb1bd}body.dark-mode .coc-view-tabs button.is-active{background:#17343d;color:#79e0d4}body.dark-mode .coc-computation{border-color:#31505c;background:#10242d}body.dark-mode .coc-computation.is-total{border-color:#28756c;background:#10312f}body.dark-mode .coc-form-note{background:#352b14;color:#e7c878}body.dark-mode .coc-modal>header,body.dark-mode .coc-modal footer{border-color:#294550}

body.coc-modal-open{overflow:hidden}.coc-modal-backdrop[hidden]{display:none!important}.coc-view-tabs a{display:inline-flex;align-items:center;border:0;border-radius:9px;padding:8px 12px;background:transparent;color:#526174;font-weight:700;text-decoration:none;white-space:nowrap}.coc-view-tabs a.is-active{background:#fff;color:#087c73;box-shadow:0 2px 8px rgba(15,23,42,.09)}body.dark-mode .coc-view-tabs a,html[data-theme="dark"] .coc-view-tabs a{color:#9eb1bd}body.dark-mode .coc-view-tabs a.is-active,html[data-theme="dark"] .coc-view-tabs a.is-active{background:#17343d;color:#79e0d4}

@media(max-width:900px){.coc-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coc-page-heading,.coc-toolbar{align-items:stretch;flex-direction:column}.coc-filter-form{flex-wrap:wrap}.coc-filter-form input[name=q]{width:min(100%,260px)}}@media(max-width:600px){.coc-summary-grid,.coc-form-grid{grid-template-columns:1fr}.coc-field.is-wide{grid-column:auto}.coc-heading-actions{width:100%}.coc-heading-actions .btn{flex:1}.coc-view-tabs{overflow:auto}.coc-modal-backdrop{padding:0}.coc-modal,.coc-modal.is-compact{width:100vw;max-height:100dvh;border-radius:0}}

.coc-table :is(th,td).coc-hours-cell { text-align: right !important; white-space: nowrap; }
.coc-application-actions{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}.coc-application-actions form{margin:0}.coc-application-actions .btn{min-height:30px;padding:4px 8px;border-radius:7px;font-size:.72rem}

/* COC/CTO forms use the same border-mounted label and control language as
   Employee Add/Edit. */
.coc-modal {
    --coc-control-height: 46px;
    --coc-control-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
.coc-modal > header h2,
.coc-modal .edit-section-heading h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}
.coc-modal > header p,
.coc-work-schedule > header small {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}
.coc-modal-backdrop[data-coc-modal="issue"] .coc-modal { height: min(820px, calc(100dvh - 36px)); }
.coc-modal > .coc-server-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
.coc-modal > header,.coc-modal .employee-edit-modal-footer { flex: 0 0 auto; }
.coc-modal .coc-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.coc-modal .employee-edit-modal-footer { position: relative; z-index: 20; background: var(--surface, #fff); box-shadow: 0 -5px 16px rgba(15,23,42,.05); }
.coc-field { position: relative; display: block; min-width: 0; padding-top: .45rem; }
.coc-field > span:first-child {
    position: absolute;
    z-index: 12;
    top: 0;
    left: .5rem;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface, #fff);
    color: var(--primary, #0f8177);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.coc-field.coc-has-selection > span:first-child {
    color: #0f8a7d !important;
}
.coc-field > :is(.form-control, .form-select),
.coc-field .coc-multiselect-button { height: var(--coc-control-height); min-height: var(--coc-control-height); max-height: var(--coc-control-height); box-sizing: border-box; border-color: #cbd5e1; border-radius: var(--coc-control-radius); font-size: 14px; font-weight: 400; }
.coc-field .smooth-select-shell { width: 100%; height: var(--coc-control-height); min-height: var(--coc-control-height); }
.coc-field .smooth-select-button { width: 100%; height: var(--coc-control-height); min-height: var(--coc-control-height); max-height: var(--coc-control-height); box-sizing: border-box; padding: .62rem .85rem; border-color: #cbd5e1; border-radius: var(--coc-control-radius); font-size: 14px; font-weight: 400; }
.coc-field .smooth-select-menu { z-index: 1900; max-height: 250px; }
.coc-field .smooth-select-option { min-height: 38px; font-weight: 400; }
.coc-field > :is(input.form-control, select.form-select) { width: 100%; height: var(--coc-control-height); min-height: var(--coc-control-height); max-height: var(--coc-control-height); box-sizing: border-box; padding-block: 0; border-radius: var(--coc-control-radius); line-height: normal; }
.coc-field > textarea.form-control { min-height: 78px; max-height: none; padding-top: 14px; border-radius: var(--coc-control-radius); }
.coc-field.coc-empty-floating > span:first-child {
    top: calc(.45rem + (var(--coc-control-height) / 2));
    left: .85rem;
    padding: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: top .2s ease, left .2s ease, transform .2s ease, color .16s ease, font-size .2s ease, background-color .16s ease, padding .16s ease;
}
.coc-field.coc-empty-floating-textarea > span:first-child {
    top: calc(.45rem + 14px);
    transform: none;
}
.coc-field.coc-empty-floating:focus-within > span:first-child,
.coc-field.coc-empty-floating:has(> input:not(:placeholder-shown)) > span:first-child,
.coc-field.coc-empty-floating:has(> textarea:not(:placeholder-shown)) > span:first-child {
    top: 0;
    left: .5rem;
    padding: 0 .25rem;
    background: var(--surface, #fff);
    font-size: 12px;
    font-weight: 500;
    transform: none;
}
.coc-modal .coc-computation { height: var(--coc-control-height); min-height: var(--coc-control-height); max-height: var(--coc-control-height); box-sizing: border-box; padding-block: 0; border-radius: var(--coc-control-radius); }
.coc-modal .coc-computation.is-wide { grid-column: 1 / -1; }
.coc-modal .coc-computation-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.coc-modal .coc-computation-row.is-wide { grid-column: 1 / -1; width: 100%; }
.coc-modal .coc-computation span { font-size: 12px; font-weight: 500; line-height: 1.1; white-space: nowrap; }
.coc-modal .coc-computation strong { font-size: 14px; font-weight: 700; line-height: 1.25; text-align: right; white-space: nowrap; }
.coc-modal .coc-computation.coc-floating-label-aligned { margin-top: .45rem; }
.coc-modal .employee-date-field .modern-date-control { width: 100%; height: var(--coc-control-height); min-height: var(--coc-control-height); max-height: var(--coc-control-height); box-sizing: border-box; border-radius: var(--coc-control-radius); }
.coc-modal .employee-date-field .modern-date-display.form-control { height: calc(var(--coc-control-height) - 2px); min-height: calc(var(--coc-control-height) - 2px); max-height: calc(var(--coc-control-height) - 2px); box-sizing: border-box; padding-block: 0; }
.coc-modal .employee-date-field .modern-date-trigger { width: var(--coc-control-height); min-width: var(--coc-control-height); height: calc(var(--coc-control-height) - 2px); min-height: calc(var(--coc-control-height) - 2px); max-height: calc(var(--coc-control-height) - 2px); box-sizing: border-box; }
.coc-employee-multiselect { position: relative; display: block; width: 100%; color: inherit; font-size: inherit; font-weight: inherit; }
.coc-multiselect-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .62rem .85rem; background: #fff; color: #334155; text-align: left; }
.coc-multiselect-button:focus,
.coc-employee-multiselect.is-open .coc-multiselect-button { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 .16rem rgba(20,184,166,.22); }
.coc-multiselect-chevron { flex: 0 0 10px; width: 10px; height: 10px; margin-right: 2px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.coc-employee-multiselect.is-open .coc-multiselect-chevron { transform: translateY(3px) rotate(225deg); }
.coc-multiselect-menu { position: absolute; z-index: 1900; top: calc(100% + 6px); right: 0; left: 0; padding: 8px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(15,23,42,.2); }
.coc-multiselect-menu[hidden] { display: none !important; }
.coc-multiselect-search-control { position: relative; display: block; margin-bottom: 6px; }
.coc-multiselect-search-control > .form-control { width: 100%; height: 40px; padding: 0 42px 0 10px; border-color: #cbd5e1; border-radius: 9px; font-size: .8rem; font-weight: 400; }
.coc-multiselect-search-control > .form-control:focus { border-color: #0f9b8e; box-shadow: 0 0 0 2px rgba(15,155,142,.12); }
.coc-multiselect-search-control > button { position: absolute; z-index: 2; top: 50%; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #64748b; font: 500 1.08rem/1 Arial,sans-serif; transform: translateY(-50%); }
.coc-multiselect-search-control > button:hover,.coc-multiselect-search-control > button:focus-visible { background: #e7f5f3; color: #0f766e; outline: 0; }
.coc-multiselect-search-control > .form-control:placeholder-shown + button { display: none; }
.coc-multiselect-options { display: grid; max-height: 250px; overflow-y: auto; scrollbar-gutter: stable; }
.coc-multiselect-options > label { display: flex; align-items: center; gap: 10px; min-height: 38px; margin: 0; padding: 7px 9px; border-radius: 8px; color: #334155; cursor: pointer; }
.coc-multiselect-options > label:hover { background: #edf8f6; }
.coc-multiselect-options > label[hidden] { display: none; }
.coc-multiselect-options input { width: 16px; height: 16px; accent-color: #0f8177; }
.coc-multiselect-options label > span { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; font-size: .8rem; font-weight: 400; }
.coc-multiselect-options small { overflow: hidden; color: #718096; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
body.dark-mode .coc-field > span:first-child,
html[data-theme="dark"] .coc-field > span:first-child { background: #10242d; color: #79e0d4; }
body.dark-mode .coc-field.coc-has-selection > span:first-child,
html[data-theme="dark"] .coc-field.coc-has-selection > span:first-child { color: #5eead4 !important; }
body.dark-mode .coc-field.coc-empty-floating > span:first-child,
html[data-theme="dark"] .coc-field.coc-empty-floating > span:first-child { background: transparent; }
body.dark-mode .coc-field.coc-empty-floating:focus-within > span:first-child,
body.dark-mode .coc-field.coc-empty-floating:has(> input:not(:placeholder-shown)) > span:first-child,
body.dark-mode .coc-field.coc-empty-floating:has(> textarea:not(:placeholder-shown)) > span:first-child,
html[data-theme="dark"] .coc-field.coc-empty-floating:focus-within > span:first-child,
html[data-theme="dark"] .coc-field.coc-empty-floating:has(> input:not(:placeholder-shown)) > span:first-child,
html[data-theme="dark"] .coc-field.coc-empty-floating:has(> textarea:not(:placeholder-shown)) > span:first-child { background: #10242d; }

.coc-work-schedule { grid-column: 1 / -1; height: 210px; min-height: 210px; max-height: 210px; padding: 14px; overflow: hidden; border: 1px solid #d8e2ea; border-radius: 14px; background: #f8fafc; }
.coc-work-schedule > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.coc-work-schedule > header div { display: flex; flex-direction: column; gap: 2px; }
.coc-work-schedule > header strong { color: #087c73; font-size: 14px; font-weight: 700; line-height: 1.35; }
.coc-work-schedule > header small { color: #718096; }
.coc-work-days { display: grid; height: 132px; min-height: 132px; max-height: 132px; align-content: start; gap: 10px; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.coc-work-days::-webkit-scrollbar,.coc-multiselect-options::-webkit-scrollbar { width: 8px; }
.coc-work-days::-webkit-scrollbar-thumb,.coc-multiselect-options::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #aebbc8; background-clip: padding-box; }
.coc-work-day-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(112px, .8fr) minmax(112px, .8fr) minmax(150px, 1fr) 40px 40px; align-items: end; gap: 8px; }
.coc-work-day-row .coc-field { margin: 0; }
.coc-work-day-row .coc-field > span:first-child { top: 2px; }
.coc-remove-day,.coc-add-day { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 3px; padding: 0; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; font-size: 1.08rem; line-height: 1; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease; }
.coc-remove-day { color: #e11d48; }
.coc-add-day { color: #087c73; }
.coc-remove-day:hover:not(:disabled) { border-color: #f2a5b8; background: #fff1f4; }
.coc-add-day:hover:not(:disabled) { border-color: #85cfc6; background: #ebfaf7; box-shadow: 0 3px 8px rgba(8,124,115,.12); }
.coc-remove-day:active:not(:disabled),.coc-add-day:active { transform: translateY(1px); }
.coc-remove-day:disabled,.coc-add-day:disabled { opacity: .34; cursor: not-allowed; box-shadow: none; }
.coc-work-schedule-cell { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
.coc-work-schedule-cell small { color: inherit; white-space: nowrap; }
.coc-certificate-schedules { display: flex; flex-direction: column; gap: 5px; }
body.dark-mode .coc-work-schedule,
html[data-theme="dark"] .coc-work-schedule { border-color: #31505c; background: #0c1d25; }
body.dark-mode .coc-work-schedule > header strong,
html[data-theme="dark"] .coc-work-schedule > header strong { color: #79e0d4; }
body.dark-mode .coc-remove-day,body.dark-mode .coc-add-day,
html[data-theme="dark"] .coc-remove-day,html[data-theme="dark"] .coc-add-day { border-color: #31505c; background: #10242d; }
body.dark-mode .coc-remove-day,html[data-theme="dark"] .coc-remove-day { color: #fb7185; }
body.dark-mode .coc-add-day,html[data-theme="dark"] .coc-add-day { color: #79e0d4; }

@media (max-width: 720px) {
    .coc-modal .coc-computation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coc-modal .coc-computation-row > .coc-computation:first-child { grid-column: 1 / -1; }
    .coc-work-day-row { grid-template-columns: 1fr 1fr 40px 40px; }
    .coc-work-day-row .employee-date-field { grid-column: 1 / -1; }
    .coc-work-day-row .employee-date-field + .coc-field { grid-column: 1; }
    .coc-work-day-row .coc-field:has([data-coc-work-classification]) { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
    .coc-modal .coc-computation-row { grid-template-columns: 1fr; }
    .coc-modal .coc-computation-row > .coc-computation:first-child { grid-column: auto; }
}
@media (max-width: 600px) {
    .coc-modal-backdrop[data-coc-modal="issue"] .coc-modal { height: 100dvh; }
}
body.dark-mode .coc-multiselect-button,
body.dark-mode .coc-multiselect-menu,
html[data-theme="dark"] .coc-multiselect-button,
html[data-theme="dark"] .coc-multiselect-menu { border-color: #31505c; background: #10242d; color: #e6f0f2; }
body.dark-mode .coc-modal .employee-edit-modal-footer,
html[data-theme="dark"] .coc-modal .employee-edit-modal-footer { background: #10242d; }
body.dark-mode .coc-multiselect-search-control > .form-control,
html[data-theme="dark"] .coc-multiselect-search-control > .form-control { border-color: #31505c; background: #0c1d25; color: #e6f0f2; }
body.dark-mode .coc-multiselect-options > label,
html[data-theme="dark"] .coc-multiselect-options > label { color: #e6f0f2; }
body.dark-mode .coc-multiselect-options > label:hover,
html[data-theme="dark"] .coc-multiselect-options > label:hover { background: #17343d; }

.coc-modal-backdrop[data-coc-modal="cto"] { place-items: start center; padding-top: clamp(22px, 5vh, 48px); padding-bottom: 22px; }
.coc-modal-backdrop[data-coc-modal="cto"] .cto-application-modal { display: flex; width: min(780px, calc(100vw - 36px)); height: auto; max-height: calc(100dvh - clamp(44px, 10vh, 96px)); flex-direction: column; transition: width .2s ease, max-height .24s ease; }
.coc-modal-backdrop[data-coc-modal="cto"] .cto-application-modal .coc-server-form { flex: 0 1 auto; }
.coc-modal-backdrop[data-coc-modal="cto"] .cto-application-modal .coc-modal-body { flex: 0 1 auto; }
.cto-employee-snapshot { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1.35fr) minmax(130px,.7fr) minmax(165px,.85fr); gap: 10px; }
.cto-employee-snapshot > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #d8e2ea; border-radius: var(--coc-control-radius); background: #f8fafc; }
.cto-employee-snapshot span { color: #64748b; font-size: 11px; }
.cto-employee-snapshot strong { overflow: hidden; color: #334155; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cto-employee-snapshot .cto-balance-summary { border-color: #82d8cf; background: #edfbf8; }
.cto-employee-snapshot .cto-balance-summary span { color: #167b72; }
.cto-employee-snapshot .cto-balance-summary strong { color: #087c73; font-weight: 700; }
.coc-form-grid > .is-wide { grid-column: 1 / -1; width: 100%; }
.cto-application-modal .coc-form-grid { grid-template-columns: minmax(190px,.55fr) minmax(0,1.45fr); }
.cto-application-schedule { --cto-application-schedule-height: 140px; --cto-application-days-height: 58px; height: var(--cto-application-schedule-height); min-height: 140px; max-height: 396px; padding: 14px; overflow: hidden; border: 1px solid #d8e2ea; border-radius: 14px; background: #f8fafc; transition: height .24s cubic-bezier(.22,1,.36,1), max-height .24s cubic-bezier(.22,1,.36,1); }
.cto-application-schedule > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cto-application-schedule > header > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.cto-application-schedule > header strong { color: #087c73; font-size: 14px; }
.cto-application-schedule > header small { color: #718096; font-size: 12px; }
.cto-schedule-totals { display: flex; gap: 12px; color: #607086; font-size: 12px; white-space: nowrap; }
.cto-schedule-totals b { color: #087c73; }
.cto-application-days { display: grid; height: var(--cto-application-days-height); min-height: 58px; max-height: 314px; align-content: start; gap: 10px; padding-right: 3px; overflow: hidden; transition: height .24s cubic-bezier(.22,1,.36,1); }
.cto-application-day { display: grid; grid-template-columns: minmax(230px,1.25fr) minmax(210px,1fr) 40px 40px; align-items: end; gap: 9px; }
.cto-application-day .coc-field { margin: 0; }
.cto-application-day .coc-remove-day,.cto-application-day .coc-add-day { margin-bottom: 3px; }
.cto-employee-search-field { align-self: end; margin-top: 0; }
.cto-employee-search-field .leave-ledger-export-search-control > .form-control { height: var(--coc-control-height); min-height: var(--coc-control-height); border-radius: var(--coc-control-radius); }
.cto-employee-search-field .leave-ledger-export-search-suggestions { max-height: 238px; }
.cto-period-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; height: var(--coc-control-height); padding: 3px; border: 1px solid #cbd5e1; border-radius: var(--coc-control-radius); background: #eef3f7; box-sizing: border-box; }
.cto-period-toggle-standalone { align-self: end; margin-bottom: 3px; }
.cto-period-toggle button { min-width: 0; height: 34px; padding: 0 14px; border: 0; border-radius: calc(var(--coc-control-radius) - 3px); background: transparent; color: #64748b; font-size: 13px; font-weight: 500; line-height: 1; transition: color .16s ease, background-color .18s ease, box-shadow .18s ease, transform .16s ease; }
.cto-period-toggle button:hover { color: #087c73; }
.cto-period-toggle button.is-active { background: #0f9487; color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(15,148,135,.22); }
.cto-period-toggle button:active { transform: translateY(1px); }
.cto-application-balance { min-height: 52px !important; height: 52px !important; max-height: 52px !important; padding-inline: 16px !important; }
.cto-application-balance span { color: #167b72 !important; }
.cto-application-balance strong { color: #087c73; font-size: 15px; }
.cto-authority-note { margin: 0; padding: 9px 12px; border-left: 3px solid #5fbdb2; border-radius: 4px 9px 9px 4px; background: #f0fdfa; color: #476b68; font-size: 12px; }
body.dark-mode .cto-employee-snapshot > div,body.dark-mode .cto-application-schedule,
html[data-theme="dark"] .cto-employee-snapshot > div,html[data-theme="dark"] .cto-application-schedule { border-color: #31505c; background: #0c1d25; }
body.dark-mode .cto-employee-snapshot strong,html[data-theme="dark"] .cto-employee-snapshot strong { color: #e6f0f2; }
body.dark-mode .cto-employee-snapshot .cto-balance-summary,html[data-theme="dark"] .cto-employee-snapshot .cto-balance-summary { border-color: #2d827a; background: #123431; }
body.dark-mode .cto-employee-snapshot .cto-balance-summary span,body.dark-mode .cto-employee-snapshot .cto-balance-summary strong,
html[data-theme="dark"] .cto-employee-snapshot .cto-balance-summary span,html[data-theme="dark"] .cto-employee-snapshot .cto-balance-summary strong { color: #8fe1d8; }
body.dark-mode .cto-authority-note,html[data-theme="dark"] .cto-authority-note { background: #10312f; color: #a5cfca; }
body.dark-mode .cto-period-toggle,html[data-theme="dark"] .cto-period-toggle { border-color: #31505c; background: #162c35; }
body.dark-mode .cto-period-toggle button,html[data-theme="dark"] .cto-period-toggle button { color: #a9bbc3; }
body.dark-mode .cto-period-toggle button.is-active,html[data-theme="dark"] .cto-period-toggle button.is-active { background: #128f84; color: #fff; }

@media (max-width: 720px) {
    .cto-application-modal .coc-form-grid { grid-template-columns: 1fr; }
    .cto-application-day { grid-template-columns: 1fr 1fr 40px 40px; }
    .cto-application-schedule > header { align-items: flex-start; flex-direction: column; }
}

@media print{.coc-print-toolbar{display:none!important}.coc-certificate-sheet{margin:0;padding:20mm 18mm;box-shadow:none}@page{size:A4 portrait;margin:0}}

/* Employee List service-record action and employee-specific modal editor. */
.action-button.service-record span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E");
}

/* Keep the embedded Employee Edit content as the modal's single scroll owner.
   The Documents panel can grow beyond the viewport once saved files are shown. */
body.is-embedded-edit form[data-employee-edit-tabs] .employee-edit-tabs-shell {
    min-height: 0;
}

body.is-embedded-edit form[data-employee-edit-tabs] .employee-edit-tab-panels {
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

body.is-embedded-edit form[data-employee-edit-tabs] .employee-edit-documents-panel {
    height: auto;
    min-height: 0;
}

body.is-embedded-edit form[data-employee-edit-tabs] .employee-documents-workspace {
    min-height: 0;
    overflow: visible;
}

/* Contract of Service employee form layout */
.cos-personal-layout,
.cos-two-column-layout,
.cos-education-layout,
.cos-employment-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.cos-personal-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cos-two-column-layout > *,
.cos-education-layout > *,
.cos-employment-layout > * {
    min-width: 0;
}

.cos-personal-layout > * {
    min-width: 0;
}

.cos-personal-layout .cos-status-field {
    grid-column: 1 / 3;
}

.cos-personal-layout .employee-id-field {
    grid-column: 3 / 5;
}

.cos-personal-layout .cos-photo-field {
    grid-column: 5 / 7;
}

.cos-personal-layout .cos-full-row,
.cos-two-column-layout .cos-full-row,
.cos-education-layout .cos-full-row,
.cos-employment-layout .cos-full-row,
.cos-education-layout .eligibility-list {
    grid-column: 1 / -1;
}

.cos-personal-layout .last-name-field,
.cos-personal-layout .first-name-field,
.cos-personal-layout .middle-name-field,
.cos-personal-layout .address-field {
    grid-column: 1 / -1;
}

.cos-personal-layout .name-extension-field,
.cos-personal-layout .birthdate-field,
.cos-personal-layout .civil-status-field,
.cos-personal-layout .contact-field {
    grid-column: 1 / 4;
}

.cos-personal-layout .gender-field,
.cos-personal-layout .birthplace-field,
.cos-personal-layout .maiden-name-field,
.cos-personal-layout .email-field {
    grid-column: 4 / 7;
}

.cos-employment-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cos-employee-edit-form :where(.cos-personal-layout, .cos-two-column-layout, .cos-education-layout, .cos-employment-layout) > label {
    position: relative;
    display: block;
    padding-top: .45rem;
}

.cos-employee-edit-form :where(.cos-personal-layout, .cos-two-column-layout, .cos-education-layout, .cos-employment-layout) > label > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 2;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transform-origin: left center;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, background-color .16s ease;
}

.cos-employee-edit-form :where(.cos-personal-layout, .cos-two-column-layout, .cos-education-layout, .cos-employment-layout) > label:focus-within > span:first-child,
.cos-employee-edit-form :where(.cos-personal-layout, .cos-two-column-layout, .cos-education-layout, .cos-employment-layout) > label.has-floating-label > span:first-child {
    color: var(--primary);
    background: var(--surface);
    transform: translateY(0) scale(1);
}

@media (max-width: 600px) {
    .cos-personal-layout,
    .cos-two-column-layout,
    .cos-education-layout,
    .cos-employment-layout {
        grid-template-columns: 1fr;
    }

    .cos-personal-layout > *,
    .cos-two-column-layout > *,
    .cos-education-layout > *,
    .cos-employment-layout > * {
        grid-column: 1 / -1 !important;
    }
}

/* Leave Ledger: use the same column-header treatment as Organization > Employees. */
.leave-ledger-table-header-wrap {
    background: #f8fafc;
}

.table.dashboard-table.leave-ledger-header-table thead th,
.table.dashboard-table.leave-ledger-header-table thead tr:first-child th[rowspan],
.table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,
.table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-vacation,
.table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-sick,
.table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th {
    height: auto;
    padding: .58rem .85rem;
    color: #475569 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #dbe4ea !important;
    background: #f8fafc !important;
    font-size: .71rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
    vertical-align: middle;
}

.table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading {
    text-align: center !important;
}

.table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th {
    text-align: right !important;
}

.leave-ledger-table-header-wrap::after {
    height: 100%;
    border: 0;
    border-bottom: 1px solid #dbe4ea;
    background: #f8fafc;
}

body.dark-mode .leave-ledger-table-header-wrap,
html[data-theme="dark"] .leave-ledger-table-header-wrap,
body.dark-mode .leave-ledger-table-header-wrap::after,
html[data-theme="dark"] .leave-ledger-table-header-wrap::after {
    background: #172d36;
}

body.dark-mode .table.dashboard-table.leave-ledger-header-table thead th,
body.dark-mode .table.dashboard-table.leave-ledger-header-table thead tr:first-child th[rowspan],
body.dark-mode .table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,
body.dark-mode .table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th,
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead th,
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead tr:first-child th[rowspan],
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th {
    color: #d4e0e5 !important;
    border-bottom-color: #3a515c !important;
    background: #172d36 !important;
}

body.dark-mode .leave-ledger-table-header-wrap::after,
html[data-theme="dark"] .leave-ledger-table-header-wrap::after {
    border-bottom-color: #3a515c;
}

/* Keep header columns distinct with the same subtle separators used by ledger rows. */
.table.dashboard-table.leave-ledger-header-table thead th,
.table.dashboard-table.leave-ledger-header-table thead tr:first-child th[rowspan],
.table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,
.table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th {
    border-right: 1px solid rgba(203, 215, 227, .72) !important;
}

.table.dashboard-table.leave-ledger-header-table thead tr:first-child th:last-child,
.table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th:last-child {
    border-right: 0 !important;
}

/* Final Leave Ledger print isolation.
   Shared certification rules force the root print box to A4 (210 mm). Restore
   the full named Legal-portrait content box for this report only. */
@media print {
    html:has(.leave-ledger-print-sheet),
    body:has(.leave-ledger-print-sheet),
    .print-only-layout:has(.leave-ledger-print-sheet) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .print-only-layout .leave-ledger-print-sheet {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}


/* Users workspace and sidebar-aligned access groups */
.users-page-heading {
    margin-bottom: 1rem;
}

.users-page-heading h1 {
    margin-bottom: .2rem !important;
}

.users-page-heading p {
    margin: 0;
    color: #64748b;
    font-size: .86rem;
}

.users-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
    font-family: "Microsoft New Tai Lue", "Segoe UI", sans-serif;
}

.users-overview-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid #dbe6e4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
}

.users-overview-card > div {
    min-width: 0;
    display: grid;
    gap: .05rem;
}

.users-overview-card strong {
    color: #172033;
    font-size: 1.28rem;
    line-height: 1.1;
    font-weight: 750;
}

.users-overview-card > div > span {
    overflow: hidden;
    color: #64748b;
    font-size: .76rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-overview-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #0f766e;
    background: #e7f6f3;
}

.users-overview-icon svg,
.users-search-control svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.users-overview-disabled .users-overview-icon {
    color: #b45309;
    background: #fff5e6;
}

.users-overview-roles .users-overview-icon {
    color: #4f46e5;
    background: #eef2ff;
}

.users-panel {
    gap: .85rem !important;
    padding: 1rem !important;
    border-color: #dbe6e4 !important;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .05) !important;
}

.users-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.users-panel-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}

.users-search-control {
    width: min(340px, 32vw);
    height: 40px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 .78rem;
    border: 1px solid #d5e1e6;
    border-radius: 10px;
    color: #64748b;
    background: #f8fafc;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.users-search-control:focus-within {
    border-color: #0f766e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .11);
}

.users-search-control svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.users-search-control input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0 !important;
    outline: 0;
    color: #334155;
    background: transparent;
    box-shadow: none !important;
    font: inherit;
    font-size: .8rem;
}

.users-search-control input::placeholder {
    color: #94a3b8;
}

.users-panel .table-responsive {
    border-radius: 11px;
}

.system-user-identity-cell {
    min-width: 245px;
    display: flex !important;
    align-items: center !important;
    gap: .7rem;
}

.system-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid !important;
    place-items: center;
    border: 1px solid #c4e3dc;
    border-radius: 10px;
    color: #0f766e !important;
    background: #ebf8f5;
    font-size: .7rem !important;
    font-weight: 800;
    letter-spacing: .02em;
}

.system-user-identity {
    min-width: 0;
}

.system-user-identity strong {
    overflow: hidden;
    color: #1e293b;
    font-size: .82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-user-identity > span {
    margin-top: .1rem;
    color: #64748b !important;
    font-size: .72rem !important;
}

.system-user-username {
    color: #334155 !important;
    font-size: .8rem !important;
    font-weight: 650;
}

.system-user-role-badge,
.system-user-status,
.system-user-password-state {
    width: fit-content;
    display: inline-flex !important;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .72rem !important;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}

.system-user-role-badge {
    color: #4338ca !important;
    background: #eef2ff;
}

.system-user-status {
    color: #047857 !important;
    background: #ecfdf5;
}

.system-user-status.is-disabled {
    color: #b45309 !important;
    background: #fff7ed;
}

.system-user-status > span {
    width: 6px;
    height: 6px;
    display: block !important;
    border-radius: 50%;
    background: currentColor;
}

.system-user-password-state {
    padding-inline: 0;
    color: #64748b !important;
}

.system-user-password-state.requires-change {
    color: #b45309 !important;
}

.system-users-empty-state {
    padding: 2rem !important;
    color: #64748b !important;
    text-align: center;
}

[data-system-user-row][hidden],
#system-users-no-results[hidden] {
    display: none !important;
}

.role-permissions-panel {
    gap: 1rem !important;
    padding: 1.15rem !important;
}

.role-permissions-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .15rem .1rem;
}

.role-permissions-header > div:first-child {
    max-width: 640px;
}

.role-permissions-eyebrow {
    display: block;
    margin-bottom: .25rem;
    color: #0f766e;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.role-permissions-header h2 {
    margin: 0;
    color: #172033;
    font-size: 1.08rem;
    font-weight: 750;
}

.role-permissions-header p {
    margin: .25rem 0 0;
    color: #64748b;
    font-size: .8rem;
}

.role-permissions-header .role-picker-form {
    width: min(310px, 100%);
    max-width: none;
    margin: 0;
}

.role-permissions-header .role-picker-form label {
    gap: .3rem;
}

.role-permission-summary {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(150px, 1fr));
    border: 1px solid #dbe6e4;
    border-radius: 12px;
    background: #f8fbfa;
}

.role-permission-summary > div {
    min-width: 0;
    display: grid;
    gap: .06rem;
    padding: .7rem .9rem;
    border-right: 1px solid #e1eae8;
}

.role-permission-summary > div:last-child {
    border-right: 0;
}

.role-permission-summary strong {
    overflow: hidden;
    color: #173b35;
    font-size: .86rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-permission-summary span {
    color: #64748b;
    font-size: .69rem;
    font-weight: 600;
}

.permission-menu-access {
    gap: 1.1rem !important;
    padding: 1rem !important;
    border-color: #dbe6e4 !important;
    border-radius: 14px !important;
    background: #fbfdfc !important;
}

.permission-section-heading {
    gap: .14rem;
    padding: 0 .1rem;
}

.permission-section-heading h3 {
    color: #172033 !important;
    font-size: .98rem !important;
    font-weight: 750 !important;
}

.permission-section-heading p {
    max-width: 740px;
    color: #64748b !important;
    font-size: .76rem !important;
}

.permission-group-list {
    display: grid;
    gap: .8rem;
}

.permission-menu-group {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 1rem;
    padding: .85rem;
    border: 1px solid #dfe9e6;
    border-radius: 13px;
    background: #fff;
}

.permission-menu-group-heading {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .15rem .1rem;
}

.permission-menu-group-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #0f766e;
    background: #e7f6f3;
    font-size: .72rem;
    font-weight: 800;
}

.permission-menu-group:nth-child(4) .permission-menu-group-mark {
    color: #4f46e5;
    background: #eef2ff;
}

.permission-menu-group:nth-child(5) .permission-menu-group-mark {
    color: #0369a1;
    background: #e0f2fe;
}

.permission-menu-group:nth-child(6) .permission-menu-group-mark {
    color: #b45309;
    background: #fff5e6;
}

.permission-menu-group-heading h4 {
    margin: .08rem 0 0;
    color: #1e293b;
    font-size: .84rem;
    font-weight: 750;
}

.permission-menu-group-heading p {
    margin: .18rem 0 0;
    color: #64748b;
    font-size: .69rem;
    line-height: 1.35;
}

.permission-menu-access .permission-menu-group .permission-card-grid {
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: .75rem !important;
}

.permission-menu-access .permission-menu-group .permission-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    gap: .55rem !important;
    padding: .75rem !important;
    overflow: visible !important;
    border: 1px solid #dce7e4 !important;
    border-radius: 11px !important;
    background: #fbfdfc !important;
}

.permission-menu-access .permission-card-header {
    min-height: 42px !important;
    align-items: flex-start !important;
    gap: .75rem !important;
    padding: 0 0 .58rem !important;
}

.permission-menu-access .permission-card-header > div {
    min-width: 0;
}

.permission-menu-access .permission-card-header h5 {
    margin: 0;
    color: #173b35;
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 750;
}

.permission-menu-access .permission-card-header p {
    margin: .16rem 0 0;
    color: #64748b;
    font-size: .67rem;
    line-height: 1.25;
}

.permission-menu-access .permission-card-submenus,
.permission-menu-access .permission-card-actions {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

.permission-menu-access .permission-card-row {
    min-height: 38px !important;
    height: auto !important;
    max-height: none !important;
    padding: .42rem .58rem !important;
    border-color: #e1e9e7 !important;
    border-radius: 8px !important;
    color: #334a46 !important;
    background: #fff !important;
    font-size: .74rem !important;
    font-weight: 650 !important;
}

.permission-menu-access .permission-submenu-summary {
    min-height: 40px !important;
    padding-left: 1.5rem !important;
}

.permission-menu-access .permission-submenu-summary::before {
    left: .55rem;
}

.permission-menu-access .permission-submenu-actions {
    margin: .38rem 0 .55rem .75rem !important;
    padding-left: .6rem !important;
    border-left-color: #bcded6 !important;
}

.permission-menu-access .permission-child-action {
    min-height: 36px !important;
    height: auto !important;
    max-height: none !important;
    background: #f5faf8 !important;
}

.permission-menu-access .permission-actions-details > summary {
    min-height: 36px;
    color: #526b66;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: none;
}

.permission-menu-access .permission-switch-track {
    width: 38px;
    height: 21px;
    padding: 3px;
}

.permission-menu-access .permission-switch-thumb {
    width: 15px;
    height: 15px;
}

.permission-menu-access .permission-switch input:checked + .permission-switch-track .permission-switch-thumb {
    transform: translateX(17px);
}

.role-permissions-form .permissions-save-button {
    min-width: 168px;
    margin-top: .05rem;
}

@media (max-width: 1180px) {
    .users-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .permission-menu-group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .users-panel-heading,
    .role-permissions-header {
        align-items: stretch;
        flex-direction: column;
    }

    .users-panel-tools {
        justify-content: stretch;
    }

    .users-search-control {
        width: 100%;
    }

    .role-permissions-header .role-picker-form {
        width: 100%;
    }

    .permission-menu-access .permission-menu-group .permission-card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .users-overview {
        grid-template-columns: 1fr;
    }

    .users-panel-tools {
        display: grid;
        grid-template-columns: 1fr;
    }

    .users-add-button {
        width: 100% !important;
    }

    .role-permission-summary {
        grid-template-columns: 1fr;
    }

    .role-permission-summary > div {
        border-right: 0;
        border-bottom: 1px solid #e1eae8;
    }

    .role-permission-summary > div:last-child {
        border-bottom: 0;
    }

    .permission-menu-access,
    .permission-menu-group {
        padding: .7rem !important;
    }
}


/* Menu Access: compact Data Exporter accordion pattern */
.permission-group-list {
    gap: .6rem;
    padding: .75rem;
    border-radius: 11px;
    background: #f8fafc;
}

.permission-menu-group {
    display: block;
    overflow: hidden;
    padding: 0;
    border: 1px solid #dce6ef;
    border-radius: 10px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.permission-menu-group[open] {
    border-color: #9ad9ce;
    box-shadow: 0 4px 14px rgba(15, 118, 110, .07);
}

.permission-menu-group-heading {
    min-height: 52px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    list-style: none;
    cursor: pointer;
}

.permission-menu-group-heading::-webkit-details-marker {
    display: none;
}

.permission-menu-group-heading::marker {
    content: "";
}

.permission-menu-group-heading > div {
    min-width: 0;
}

.permission-menu-group-heading h4 {
    margin: 0;
    color: #26364a;
    font-size: .8rem;
    font-weight: 750;
}

.permission-menu-group-heading p {
    overflow: hidden;
    margin: .08rem 0 0;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-menu-group-heading small {
    min-width: 82px;
    color: #64748b;
    font-size: .67rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.permission-group-chevron {
    color: #64748b;
    font-size: 1rem;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform .18s ease;
}

.permission-menu-group[open] .permission-group-chevron {
    transform: rotate(0deg);
}

.permission-menu-group-content.permission-card-grid,
.permission-menu-access .permission-menu-group .permission-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
    padding: .65rem !important;
    border-top: 1px solid #e7eef4;
    background: #fbfdfe;
}

.permission-menu-group-content > .permission-card:only-child {
    grid-column: 1 / -1;
}

.permission-menu-access .permission-menu-group .permission-card {
    gap: .4rem !important;
    padding: .58rem !important;
    border-color: #dfe8ee !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.permission-menu-access .permission-card-header {
    min-height: 34px !important;
    align-items: center !important;
    padding: 0 0 .4rem !important;
}

.permission-menu-access .permission-card-header h5 {
    font-size: .77rem;
}

.permission-menu-access .permission-card-header p {
    display: none;
}

.permission-menu-access .permission-card-submenus {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .35rem !important;
}

.permission-menu-access .permission-card-row {
    min-height: 34px !important;
    padding: .35rem .48rem !important;
    font-size: .71rem !important;
}

.permission-menu-access .permission-submenu-summary {
    min-height: 36px !important;
    padding-left: 1.35rem !important;
}

.permission-menu-access .permission-submenu-summary::before {
    left: .45rem;
}

.permission-menu-access .permission-submenu-actions {
    margin: .3rem 0 .4rem .55rem !important;
    padding-left: .48rem !important;
}

.permission-menu-access .permission-child-action {
    min-height: 32px !important;
}

.permission-menu-access .permission-switch,
.permission-menu-access .permission-switch-track {
    width: 36px;
}

.permission-menu-access .permission-switch {
    height: 22px;
    flex-basis: 36px !important;
}

.permission-menu-access .permission-switch-track {
    height: 20px;
    padding: 0;
    border: 1px solid #b6c2d1;
    background: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.permission-menu-access .permission-switch-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
}

.permission-menu-access .permission-switch input:checked + .permission-switch-track {
    border-color: #0f8b84;
    background: #14b8a6;
}

.permission-menu-access .permission-switch input:checked + .permission-switch-track .permission-switch-thumb {
    transform: translate(16px, -50%);
}

.permission-menu-access .permission-switch input:indeterminate + .permission-switch-track {
    border-color: #5aaea6;
    background: #8dd5cd;
}

.permission-menu-access .permission-switch input:indeterminate + .permission-switch-track .permission-switch-thumb {
    transform: translate(8px, -50%);
}

.permission-group-switch {
    align-self: center !important;
}

.permission-menu-access .permission-actions-details[open],
.permission-menu-access .permission-submenu-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.permission-menu-access .permission-actions-details[open] > summary {
    grid-column: 1 / -1;
}

.permission-direct-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    grid-column: 1 / -1;
    width: 100%;
}

@media (max-width: 820px) {
    .permission-menu-group-content.permission-card-grid,
    .permission-menu-access .permission-menu-group .permission-card-grid,
    .permission-menu-access .permission-card-submenus,
    .permission-menu-access .permission-actions-details[open],
    .permission-menu-access .permission-submenu-actions,
    .permission-direct-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .permission-group-list {
        padding: .5rem;
    }

    .permission-menu-group-heading {
        grid-template-columns: 38px minmax(0, 1fr) 16px;
    }

    .permission-menu-group-heading small {
        display: none;
    }
}

/* Civil Service Form No. 6 layout used by filed CTO applications. */
.cto-form6-sheet {
    width: 210mm;
    min-height: 297mm;
    margin: 18px auto;
    padding: 4mm 6mm 3mm;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .22);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    line-height: 1.15;
    page: cto-form6-print;
}

.cto-form6-header { position: relative; height: 42mm; }
.cto-form6-number { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; font-family: Georgia, "Times New Roman", serif; font-size: 9pt; font-style: italic; }
.cto-form6-letterhead { display: grid; width: 118mm; margin: 0 auto; padding-top: 5mm; grid-template-columns: 27mm 1fr; align-items: center; text-align: center; font-family: Georgia, "Times New Roman", serif; }
.cto-form6-letterhead img { width: 22mm; height: 22mm; object-fit: contain; justify-self: center; }
.cto-form6-letterhead p, .cto-form6-letterhead h2, .cto-form6-letterhead h3 { margin: 0; line-height: 1.28; }
.cto-form6-letterhead p { font-size: 10pt; }
.cto-form6-letterhead h2 { font-size: 10pt; font-weight: 700; }
.cto-form6-letterhead h3 { font-size: 10pt; font-weight: 700; }
.cto-form6-header > h1 { margin: 2.5mm 0 0; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 14pt; font-weight: 700; }

.cto-form6-bordered { border: 1.2px solid #000; border-radius: 2mm; overflow: hidden; }
.cto-form6-profile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 25mm; }
.cto-form6-profile > div { display: flex; min-width: 0; flex-direction: column; padding: 1.2mm 2mm; box-sizing: border-box; }
.cto-form6-profile span, .cto-form6-cell-title { display: block; font-size: 8.5pt; }
.cto-form6-profile strong { margin-top: 1mm; padding: 0; font-size: 10pt; line-height: 1.15; }
.cto-form6-profile :is(.cto-form6-office, .cto-form6-filing, .cto-form6-position, .cto-form6-salary) > strong { font-weight: 400; }
.cto-form6-office { grid-column: span 5; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.cto-form6-name { grid-column: span 7; border-bottom: 1px solid #000; }
.cto-form6-name-value { margin-top: 1mm !important; padding: 0 !important; text-align: left; text-transform: uppercase; }
.cto-form6-name em { font-family: Georgia, "Times New Roman", serif; font-size: 7.5pt; font-weight: 400; }
.cto-form6-filing { grid-column: span 3; border-right: 1px solid #000; }
.cto-form6-position { grid-column: span 6; border-right: 1px solid #000; }
.cto-form6-salary { grid-column: span 3; }
.cto-form6-section-title { height: 5mm; margin: 0; line-height: 5mm; text-align: center; font-size: 9pt; font-weight: 700; }

.cto-form6-application { display: grid; height: 111mm; grid-template-columns: 58% 42%; grid-template-rows: 76mm 35mm; }
.cto-form6-application > div { box-sizing: border-box; padding: 1.4mm 2.2mm; overflow: hidden; }
.cto-form6-leave-types { border-right: 1px solid #000; border-bottom: 1px solid #000; }
.cto-form6-details { border-bottom: 1px solid #000; }
.cto-form6-days { border-right: 1px solid #000; }
.cto-form6-leave-types p, .cto-form6-commutation p, .cto-form6-recommendation p { display: flex; align-items: center; gap: .8mm; margin: .55mm 0 0; white-space: nowrap; font-family: Georgia, "Times New Roman", serif; font-size: 8.5pt; line-height: 1; }
.cto-form6-leave-types p { font-size: 8.8pt; }
.cto-form6-leave-types small { font-size: 6.4pt; }
.cto-box { position: relative; display: inline-block; width: 3.5mm; height: 3.5mm; flex: 0 0 3.5mm; border: .7px solid #555; border-radius: .6mm; box-sizing: border-box; background: #fff; }
.cto-box.is-checked { border-color: #173b73; background-color: #fff; overflow: visible; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
/* Anchor the V bend horizontally at center, slightly below the vertical center.
   The long arm may extend beyond the box. */
.cto-box.is-checked::after { position: absolute; left: 50%; top: calc(50% + .35mm); width: 1.25mm; height: 2.95mm; content: ""; box-sizing: content-box; border: solid #173b73; border-width: 0 .85mm .85mm 0; border-radius: .15mm; transform: translate(calc(-100% + .425mm), calc(-100% + .425mm)) rotate(40deg); transform-origin: calc(100% - .425mm) calc(100% - .425mm); color: #173b73; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.cto-inline-line { display: inline-block; min-width: 44mm; flex: 1; border-bottom: 1px solid #000; }
.cto-form6-other-leave .cto-inline-line { align-self: flex-end; min-height: 1em; }
.cto-form6-detail-group { padding: 1.2mm 0 1mm; border-bottom: .7px solid #666; }
.cto-form6-detail-group:last-child { border-bottom: 0; }
.cto-form6-detail-group em { display: block; margin: 0 0 .7mm; font-size: 8.8pt; line-height: 1.05; }
.cto-form6-detail-group p { display: flex; align-items: center; gap: 1mm; margin: .55mm 0; font-family: Georgia, "Times New Roman", serif; font-size: 8.8pt; line-height: 1.05; white-space: nowrap; }
.cto-form6-detail-group .cto-box { width: 3.5mm; height: 3.5mm; flex-basis: 3.5mm; }
.cto-form6-detail-group .cto-inline-line { min-width: 20mm; }
.cto-form6-specify-entry .cto-inline-line { align-self: flex-end; min-height: 1em; }
.cto-form6-recommendation .cto-form6-specify-entry .cto-inline-line { min-width: 0; }
.cto-form6-detail-line { display: block; height: 5mm; margin: 0 2mm; border-bottom: 1px solid #000; }
.cto-form6-days p { display: flex; align-items: baseline; gap: 4mm; margin: 3mm 0 2mm; font-family: Georgia, "Times New Roman", serif; }
.cto-form6-days p strong { min-width: 25mm; border-bottom: 1px solid #000; text-align: center; font-weight: 700; }
.cto-form6-days > span:not(.cto-form6-cell-title) { display: block; margin-left: 0; }
.cto-form6-days > span.cto-form6-inclusive-dates { display: flex; min-height: 5mm; height: auto; margin: 0 2mm 0 0; align-items: center; padding: 0 1mm; border-bottom: 1px solid #000; box-sizing: border-box; font-family: Georgia, "Times New Roman", serif; font-size: 9pt; line-height: 1.15; font-weight: 400; }
.cto-form6-inclusive-dates strong { display: block; min-width: 0; font-weight: 400; transform: translateY(.35mm); }
.cto-form6-commutation { position: relative; }
.cto-form6-employee-signature { position: absolute; right: 7mm; bottom: 3mm; display: flex; min-width: 62mm; flex-direction: column; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 9pt; line-height: 1.1; }
.cto-form6-employee-signature strong { width: fit-content; max-width: 95%; margin: 0 auto; border-bottom: 1px solid #000; font-family: Arial, sans-serif; font-size: 9pt; font-weight: 700; text-transform: uppercase; }
.cto-form6-employee-signature span { font-size: 9pt; font-weight: 400; }

.cto-form6-action { position: relative; display: grid; height: 91mm; grid-template-columns: 58% 42%; grid-template-rows: 56mm 35mm; }
.cto-form6-action > div { box-sizing: border-box; padding: 1.4mm 2.2mm; overflow: hidden; }
.cto-form6-credit { position: relative; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.cto-form6-recommendation { position: relative; border-bottom: 1px solid #000; }
.cto-form6-approved { border-right: 0; }
.cto-form6-credit > p { margin: 2mm 6mm; font-family: Georgia, "Times New Roman", serif; }
.cto-form6-credit > p strong { display: inline-block; min-width: 45mm; border-bottom: 1px solid #000; text-align: center; font-weight: 400; }
.cto-form6-credit table { width: 78%; margin: 4mm auto 0; border-collapse: separate; border-spacing: 0; border: .7px solid #000; border-radius: 1.5mm; overflow: hidden; table-layout: fixed; font-family: Georgia, "Times New Roman", serif; font-size: 8pt; }
.cto-form6-credit-label-column { width: 28%; }
.cto-form6-credit-value-column { width: 24%; }
.cto-form6-credit th, .cto-form6-credit td { padding: .6mm 1mm; border: 0; border-right: .7px solid #000; border-bottom: .7px solid #000; text-align: center; font-weight: 400; }
.cto-form6-credit tr > :last-child { border-right: 0; }
.cto-form6-credit tbody tr:last-child > td { border-bottom: 0; }
.cto-form6-credit td:first-child { text-align: left; }
.cto-form6-authority { display: flex; flex-direction: column; margin: 7mm auto 0; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 9pt; line-height: 1.1; }
.cto-form6-authority strong { width: fit-content; max-width: 95%; margin: 0 auto; border-bottom: 1px solid #000; font-family: Arial, sans-serif; font-size: 9pt; font-weight: 700; text-transform: uppercase; }
.cto-form6-authority span { font-size: 9pt; font-weight: 400; }
.cto-form6-recommendation .cto-form6-authority { margin-top: 6mm; }
.cto-form6-recommendation .cto-form6-authority + .cto-form6-authority { margin-top: 5mm; }
.cto-form6-recommendation.has-no-division-head .cto-form6-authority.is-department-head { margin-top: 16mm; }
.cto-form6-credit > .cto-form6-authority,
.cto-form6-recommendation .cto-form6-authority.is-department-head { position: absolute; right: 2.2mm; bottom: 2mm; left: 2.2mm; margin: 0; }
.cto-form6-recommendation .cto-form6-authority.is-division-head { position: absolute; right: 2.2mm; bottom: 14mm; left: 2.2mm; margin: 0; }
.cto-form6-approved p { display: grid; width: 60%; height: 5mm; margin: 0 4mm; align-items: center; grid-template-columns: 26mm 1fr; line-height: 1.15; font-family: Georgia, "Times New Roman", serif; }
.cto-form6-approved p strong { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 0; box-sizing: border-box; margin: 0; padding: 0; border-bottom: 1px solid #000; line-height: 1.15; text-align: center; font-weight: 600; }
/* Center the visible digits, not just their line box: this font reserves more
   space below digits than above them. Keep the underline fixed in its row. */
.cto-form6-approved .cto-approved-number { display: block; transform: translateY(.35mm); }
.cto-form6-disapproved .cto-form6-detail-line { height: 5mm; margin: 0 4mm; }
.cto-form6-agency { position: absolute; left: 50%; bottom: .5mm; display: flex; width: 72mm; transform: translateX(-50%); flex-direction: column; align-items: center; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 9pt; line-height: 1.1; }
.cto-form6-agency strong { width: fit-content; max-width: 95%; margin: 0 auto; border-bottom: 1px solid #000; box-sizing: border-box; font-family: Arial, sans-serif; font-size: 9pt; font-weight: 700; text-align: center; text-transform: uppercase; white-space: nowrap; }
.cto-form6-agency span { font-size: 9pt; font-weight: 400; }
.cto-form6-footer { display: block; min-height: 5mm; margin-top: 2mm; padding: 1.5mm 0 0; border-top: 0; font-size: 7.5pt; line-height: 1.3; font-style: normal; font-weight: 400; text-transform: none; overflow-wrap: anywhere; break-inside: avoid; }

@media print {
    @page cto-form6-print { size: A4 portrait; margin: 0; }
    .cto-form6-sheet { width: 210mm; min-height: 297mm; margin: 0; padding: 4mm 6mm 3mm; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Filed CTO print action and application sheet */
.coc-icon-print-link {
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.coc-icon-print-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cto-application-sheet {
    width: 8.5in;
    min-height: 13in;
    margin: 22px auto;
    padding: .55in .65in;
    background: #fff;
    color: #111827;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .2);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    page: cto-application-print;
}

.cto-application-letterhead.universal-print-header {
    margin-bottom: .22in;
}

.cto-application-sheet > h1 {
    margin: 0 0 .22in;
    text-align: center;
    font-size: 14pt;
    font-weight: 700;
}

.cto-application-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .12in .32in;
    margin-bottom: .12in;
}

.cto-application-meta div {
    display: grid;
    grid-template-columns: 1.2in minmax(0, 1fr);
    gap: .08in;
}

.cto-application-meta strong,
.cto-application-information td {
    font-weight: 600;
}

.cto-application-information,
.cto-application-dates {
    width: 100%;
    border-collapse: collapse;
}

.cto-application-information th,
.cto-application-information td,
.cto-application-dates th,
.cto-application-dates td {
    padding: 6px 8px;
    border: 1px solid #64748b;
    text-align: left;
    vertical-align: top;
}

.cto-application-information th {
    width: 1.35in;
    background: #f8fafc;
    font-weight: 600;
}

.cto-application-sheet > h2 {
    margin: .22in 0 .08in;
    text-align: center;
    font-size: 10pt;
    font-weight: 700;
}

.cto-application-dates th {
    background: #f8fafc;
    text-align: center;
    font-size: 9pt;
    text-transform: uppercase;
}

.cto-application-dates td:last-child,
.cto-application-dates th:last-child {
    width: 1.15in;
    text-align: right;
}

.cto-application-dates tfoot th {
    font-weight: 700;
}

.cto-application-purpose {
    min-height: .72in;
    margin-top: .16in;
    padding: 8px 10px;
    border: 1px solid #64748b;
}

.cto-application-purpose > span {
    display: block;
    margin-bottom: 5px;
    font-size: 9pt;
    font-weight: 600;
}

.cto-application-purpose p {
    margin: 0;
}

.cto-application-signatories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .42in .75in;
    margin-top: .42in;
}

.cto-application-signatories > div {
    display: flex;
    min-height: .88in;
    flex-direction: column;
}

.cto-application-signatories span {
    margin-bottom: auto;
    font-size: 9pt;
}

.cto-application-signatories strong {
    padding-top: .28in;
    border-bottom: 1px solid #111827;
    text-align: center;
    text-transform: uppercase;
}

.cto-application-signatories small {
    margin-top: 3px;
    text-align: center;
    font-size: 9pt;
}

.cto-application-signatories .agency-head {
    grid-column: 1 / -1;
    width: 48%;
    margin: 0 auto;
}

@media print {
    @page cto-application-print {
        size: 8.5in 13in;
        margin: 0;
    }

    .cto-application-sheet {
        width: 8.5in;
        min-height: 13in;
        margin: 0;
        padding: .55in .65in;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* COC and CTO is presented as a dedicated module within Leave Ledger. */
.leave-ledger-coc-panel {
    margin-top: 0;
    padding: 20px;
    border: 1px solid #d6e1eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.leave-ledger-module-toggle {
    min-width: 178px;
    height: 42px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.leave-ledger-page-heading > div:first-child {
    min-width: 0;
}

.leave-ledger-page-heading .coc-heading-actions {
    flex: 0 0 auto;
}

.leave-ledger-page-heading .coc-heading-actions .btn {
    white-space: nowrap;
}

.leave-ledger-coc-panel .coc-page-heading {
    margin: 0 0 16px;
    padding: 0;
}

.leave-ledger-coc-panel .coc-page-heading h1 {
    font-size: 1.1rem;
}

.leave-ledger-coc-panel .coc-summary-grid {
    margin-bottom: 16px;
}

.leave-ledger-coc-panel .coc-summary-grid article {
    min-height: 112px;
    box-shadow: none;
}

.leave-ledger-coc-panel .coc-monitor-shell {
    margin: 0;
    box-shadow: none;
}

.leave-ledger-coc-panel .coc-filter-form input[type="number"] {
    width: 92px;
}

.leave-ledger-coc-panel .coc-filter-form input:not([type="number"]):not([type="hidden"]) {
    width: 240px;
}

.coc-filter-form .coc-filter-search {
    width: min(340px, 42vw);
}

.coc-filter-form .coc-filter-search > .form-control {
    width: 100% !important;
    height: 44px;
    padding-right: 76px;
}

.coc-filter-form .coc-filter-search > .leave-ledger-search-clear,
.coc-filter-form .coc-filter-search > .leave-ledger-search-clear:hover,
.coc-filter-form .coc-filter-search > .leave-ledger-search-clear:focus,
.coc-filter-form .coc-filter-search > .leave-ledger-search-clear:focus-visible,
.coc-filter-form .coc-filter-search > .leave-ledger-search-clear:active {
    right: 31px;
}

.coc-filter-form .coc-filter-search > .leave-ledger-search-chevron {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    pointer-events: none;
}

@media (max-width: 700px) {
    .coc-filter-form .coc-filter-search {
        width: 100%;
    }
}

body.dark-mode .leave-ledger-coc-panel,
html[data-theme="dark"] .leave-ledger-coc-panel {
    border-color: #294550;
    background: #0f222a;
}

@media (max-width: 900px) {
    .leave-ledger-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .leave-ledger-module-toggle {
        width: 100%;
    }

    .leave-ledger-coc-panel {
        padding: 16px;
    }
}

/* Leave Ledger export modal and toolbar action. */
.leave-ledger-search-controls {
    grid-template-columns: minmax(220px, 1fr) 132px 92px 92px;
}
.leave-ledger-search-controls > .search-suggestions { right: 348px; }
.leave-ledger-export-action {
    width: 92px;
    height: 44px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
}
.leave-ledger-export-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: none;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(4px);
}
.leave-ledger-export-backdrop[open] { display: grid; }
.leave-ledger-export-backdrop::backdrop { background: transparent; }
.leave-ledger-export-dialog {
    width: min(640px, calc(100vw - 32px));
    max-width: min(640px, calc(100vw - 32px));
    overflow: visible;
    border: 1px solid #d6e1eb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .3);
}
.leave-ledger-export-dialog > header,
.leave-ledger-export-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.leave-ledger-export-dialog > header h2 { margin: 0; color: #087c73; font-size: 1.05rem; font-weight: 800; }
.leave-ledger-export-dialog > header p { margin: 3px 0 0; color: #718096; font-size: .78rem; }
.leave-ledger-export-dialog footer { justify-content: flex-end; gap: 10px; border-top: 1px solid #e2e8f0; border-bottom: 0; }
.leave-ledger-export-body { display: grid; gap: 10px; padding: 12px 16px; }
.leave-ledger-export-section { margin: 0; padding: 12px; border: 1px solid #d8e2ea; border-radius: 13px; }
.leave-ledger-export-section legend { float: none; width: auto; margin: 0 0 8px; padding: 0 5px; color: #087c73; font-size: .78rem; font-weight: 800; }
.leave-ledger-export-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.leave-ledger-export-choice {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid #d8e2ea;
    border-radius: 12px;
    cursor: pointer;
}
.leave-ledger-export-choice.is-selected { border-color: #0f9b8e; background: #edf9f7; box-shadow: 0 0 0 2px rgba(15,155,142,.1); }
.leave-ledger-export-choice span { display: flex; flex-direction: column; gap: 2px; }
.leave-ledger-export-choice small { color: #718096; font-size: .72rem; }
.leave-ledger-export-scope-grid { display: flex; gap: 24px; margin-bottom: 14px; }
.leave-ledger-export-scope-grid label { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 650; }
.leave-ledger-export-scope-slider {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: min(100%, 330px);
    padding: 4px;
    border: 1px solid #d4dee8;
    border-radius: 12px;
    background: #edf2f6;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.05);
}
.leave-ledger-export-scope-slider::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 11px) / 2);
    border-radius: 9px;
    background: #0f9b8e;
    box-shadow: 0 4px 12px rgba(15,155,142,.24);
    content: "";
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease;
}
.leave-ledger-export-scope-slider:has(label:nth-child(2) input:checked)::before { transform: translateX(calc(100% + 3px)); }
.leave-ledger-export-scope-slider label { position: relative; z-index: 1; margin: 0; cursor: pointer; }
.leave-ledger-export-scope-slider input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.leave-ledger-export-scope-slider span {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 6px 15px;
    border-radius: 9px;
    color: #5d6b7e;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .26s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.leave-ledger-export-scope-slider label:has(input:checked) span {
    background: transparent;
    color: #fff;
    font-weight: 750;
    box-shadow: none;
}
.leave-ledger-export-scope-slider label:active span { transform: scale(.98); }
.leave-ledger-export-scope-slider input:focus-visible + span { outline: 3px solid rgba(20,184,166,.24); outline-offset: 2px; }
.leave-ledger-export-mode-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.leave-ledger-export-mode-row .leave-ledger-export-scope-slider { flex: 1 1 auto; width: auto; }
.leave-ledger-export-format { flex: 0 0 170px; width: 170px; margin-top: 0 !important; }
.leave-ledger-export-scope-note { display: block; margin: 7px 2px 14px; color: #718096; font-size: .69rem; }
.leave-ledger-export-select-field { position: relative; display: block; width: 100%; margin-top: 7px; }
.leave-ledger-export-select-field > span:first-child {
    position: absolute;
    z-index: 42;
    top: -7px;
    left: 12px;
    padding: 0 5px;
    background: #fff;
    color: #0f8177;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    transition: color .16s ease;
}
.leave-ledger-export-select-field.is-empty > span:first-child { color: #dc2626; }
.leave-ledger-export-select-field.has-content > span:first-child { color: #0f8177; }
.leave-ledger-export-select-field .smooth-select-button {
    min-height: 46px;
    padding: .62rem .85rem;
    border-color: #cbd5e1;
    border-radius: 13px;
    font-size: .84rem;
}
.leave-ledger-export-select-field .smooth-select-menu {
    z-index: 1805;
    max-height: 250px;
}
.leave-ledger-export-select-field .smooth-select-option { min-height: 38px; font-weight: 400; }
.leave-ledger-export-purpose { margin-top: 12px; }
.leave-ledger-export-purpose > span:first-child {
    top: 50%;
    left: .85rem;
    padding: 0;
    background: transparent;
    color: #64748b;
    font-size: .84rem;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: top .2s ease, transform .2s ease, color .16s ease, font-size .2s ease, background-color .16s ease, padding .16s ease;
}
.leave-ledger-export-purpose:focus-within > span:first-child,
.leave-ledger-export-purpose:has(> input:not(:placeholder-shown)) > span:first-child {
    top: -7px;
    left: 12px;
    padding: 0 5px;
    background: #fff;
    font-size: .72rem;
    transform: none;
}
.leave-ledger-export-purpose > .form-control {
    min-height: 46px;
    padding: .62rem .85rem;
    border-color: #cbd5e1;
    border-radius: 9px;
    font-size: .84rem;
}
.leave-ledger-export-select-field .smooth-select-search {
    position: sticky;
    z-index: 2;
    top: 0;
    width: 100%;
    min-height: 38px;
    margin-bottom: 4px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: .8rem;
}
.leave-ledger-export-select-field .smooth-select-search:focus { border-color: #0f9b8e; box-shadow: 0 0 0 2px rgba(15,155,142,.12); }
.leave-ledger-export-select-field .smooth-select-options { display: grid; }
.leave-ledger-export-select-field .smooth-select-empty { padding: 12px 9px; color: #718096; font-size: .76rem; text-align: center; }
.leave-ledger-export-search-control { position: relative; display: block; width: 100%; }
.leave-ledger-export-search-control > .form-control {
    width: 100%;
    height: 46px;
    padding: 0 76px 0 .85rem;
    border-color: #cbd5e1;
    border-radius: 13px;
    font-size: .84rem;
    font-weight: 400;
    line-height: 44px;
}
.leave-ledger-export-search-control > .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .16rem rgba(20,184,166,.22); }
.leave-ledger-export-search-chevron {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 15px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
}
.leave-ledger-export-search-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 31px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font: 500 1.15rem/1 Arial, sans-serif;
    transform: translateY(-50%);
}
.leave-ledger-export-search-clear:hover,
.leave-ledger-export-search-clear:focus-visible { background: #e7f5f3; color: #0f766e; outline: 0; }
.leave-ledger-export-search-control > .form-control:placeholder-shown + .leave-ledger-export-search-clear { display: none; }
.leave-ledger-export-search-suggestions {
    right: 0;
    left: 0;
    z-index: 1805;
    max-height: 268px;
    overflow-y: auto;
}
.leave-ledger-export-search-suggestions .search-suggestion { min-height: 34px; font-weight: 400 !important; }
.leave-ledger-export-switch-stage { position: relative; z-index: 50; display: grid; width: 100%; min-height: 53px; margin-top: 15px; }
.leave-ledger-export-switch-stage > .leave-ledger-export-employee,
.leave-ledger-export-switch-stage > .leave-ledger-export-department-row { grid-area: 1 / 1; margin-top: 0; }
.leave-ledger-export-employee {
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: width .3s cubic-bezier(.22,1,.36,1), opacity .16s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear;
}
.leave-ledger-export-department-row { display: grid; align-items: start; width: 100%; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(8px); transition: opacity .18s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s; }
.leave-ledger-export-department-row > .leave-ledger-export-select-field { margin-top: 0; }
.leave-ledger-export-employment-status { width: 170px; min-width: 170px; }
[data-leave-ledger-export-form].is-department-mode .leave-ledger-export-employee { width: calc(100% - 182px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px); transition: width .3s cubic-bezier(.22,1,.36,1), opacity .14s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s; }
[data-leave-ledger-export-form].is-department-mode .leave-ledger-export-department-row { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: opacity .2s ease .08s, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear; }
.leave-ledger-export-department-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid #d8e2ea;
    border-radius: 11px;
    background: #f7fafc;
}
.leave-ledger-export-department-filter[hidden] { display: none; }
.leave-ledger-export-department-filter span { color: #64748b; font-size: .7rem; }
.leave-ledger-export-department-filter strong { color: #0f766e; font-size: .74rem; font-weight: 600; text-align: right; }
body.dark-mode .leave-ledger-export-search-control > .form-control,
html[data-theme="dark"] .leave-ledger-export-search-control > .form-control { border-color: #31505c; background: #0c1d25; color: #e6f0f2; }
body.dark-mode .leave-ledger-export-department-filter,
html[data-theme="dark"] .leave-ledger-export-department-filter { border-color: #31505c; background: #0c1d25; }
.leave-ledger-export-filename { display: flex; align-items: center; justify-content: flex-start; padding: 9px 12px; border-radius: 11px; background: #f4f8fa; font-size: .78rem; }
.leave-ledger-export-filename span { color: #718096; }
.leave-ledger-export-filename strong { overflow-wrap: anywhere; color: #334155; }
body.dark-mode .leave-ledger-export-dialog,
html[data-theme="dark"] .leave-ledger-export-dialog { border-color: #294550; background: #10242d; color: #e6f0f2; }
body.dark-mode .leave-ledger-export-dialog > header,
body.dark-mode .leave-ledger-export-dialog footer,
html[data-theme="dark"] .leave-ledger-export-dialog > header,
html[data-theme="dark"] .leave-ledger-export-dialog footer { border-color: #294550; }
body.dark-mode .leave-ledger-export-section,
body.dark-mode .leave-ledger-export-choice,
html[data-theme="dark"] .leave-ledger-export-section,
html[data-theme="dark"] .leave-ledger-export-choice { border-color: #31505c; }
body.dark-mode .leave-ledger-export-choice.is-selected,
html[data-theme="dark"] .leave-ledger-export-choice.is-selected { background: #12332f; }
body.dark-mode .leave-ledger-export-scope-slider,
html[data-theme="dark"] .leave-ledger-export-scope-slider { border-color: #31505c; background: #0c1d25; }
body.dark-mode .leave-ledger-export-scope-slider::before,
html[data-theme="dark"] .leave-ledger-export-scope-slider::before { background: #12a99b; }
body.dark-mode .leave-ledger-export-scope-slider span,
html[data-theme="dark"] .leave-ledger-export-scope-slider span { color: #a7b7c2; }
body.dark-mode .leave-ledger-export-scope-slider label:has(input:checked) span,
html[data-theme="dark"] .leave-ledger-export-scope-slider label:has(input:checked) span { background: transparent; color: #fff; }
body.dark-mode .leave-ledger-export-filename,
html[data-theme="dark"] .leave-ledger-export-filename { background: #0c1d25; }
body.dark-mode .leave-ledger-export-select-field > span:first-child,
html[data-theme="dark"] .leave-ledger-export-select-field > span:first-child { background: #10242d; color: #79e0d4; }
body.dark-mode .leave-ledger-export-select-field.is-empty > span:first-child,
html[data-theme="dark"] .leave-ledger-export-select-field.is-empty > span:first-child { color: #f87171; }
body.dark-mode .leave-ledger-export-select-field.has-content > span:first-child,
html[data-theme="dark"] .leave-ledger-export-select-field.has-content > span:first-child { color: #79e0d4; }
body.dark-mode .leave-ledger-export-purpose > .form-control,
html[data-theme="dark"] .leave-ledger-export-purpose > .form-control { border-color: #31505c; background: #0c1d25; color: #e6f0f2; }
body.dark-mode .leave-ledger-export-purpose > span:first-child,
html[data-theme="dark"] .leave-ledger-export-purpose > span:first-child { background: transparent; color: #94a3b8; }
body.dark-mode .leave-ledger-export-purpose:focus-within > span:first-child,
body.dark-mode .leave-ledger-export-purpose:has(> input:not(:placeholder-shown)) > span:first-child,
html[data-theme="dark"] .leave-ledger-export-purpose:focus-within > span:first-child,
html[data-theme="dark"] .leave-ledger-export-purpose:has(> input:not(:placeholder-shown)) > span:first-child { background: #10242d; color: #79e0d4; }
body.dark-mode .leave-ledger-export-select-field .smooth-select-search,
html[data-theme="dark"] .leave-ledger-export-select-field .smooth-select-search { border-color: #31505c; background: #0c1d25; color: #e6f0f2; }
@media (max-width: 720px) {
    .leave-ledger-search-controls { grid-template-columns: minmax(0, 1fr) 104px 78px 78px; }
    .leave-ledger-search-controls > .search-suggestions { right: 280px; }
    .leave-ledger-print-action, .leave-ledger-export-action { width: 78px; padding-inline: 6px; }
    .leave-ledger-export-format-grid { grid-template-columns: 1fr; }
    .leave-ledger-export-mode-row { align-items: stretch; flex-direction: column; }
    .leave-ledger-export-format { flex-basis: auto; width: 100%; }
    .leave-ledger-export-department-row { grid-template-columns: 1fr; gap: 3px; }
    .leave-ledger-export-employment-status { width: 100%; min-width: 0; }
    .leave-ledger-export-switch-stage { min-height: 53px; transition: min-height .3s cubic-bezier(.22,1,.36,1); }
    [data-leave-ledger-export-form].is-department-mode .leave-ledger-export-switch-stage { min-height: 102px; }
    [data-leave-ledger-export-form].is-department-mode .leave-ledger-export-employee { width: 100%; }
}

.leave-ledger-other-balances > header.leave-ledger-force-balance {
    background: #f4faff;
}
.leave-ledger-other-balances > header.leave-ledger-force-balance strong {
    color: #1679c4;
}
.leave-ledger-other-balances > header.leave-ledger-force-balance small > span {
    color: #1679c4;
    font-weight: 700;
}
body.dark-mode .leave-ledger-other-balances > header.leave-ledger-force-balance,
html[data-theme="dark"] .leave-ledger-other-balances > header.leave-ledger-force-balance {
    background: #142f3d;
}
body.dark-mode .leave-ledger-other-balances > header.leave-ledger-force-balance strong,
body.dark-mode .leave-ledger-other-balances > header.leave-ledger-force-balance small > span,
html[data-theme="dark"] .leave-ledger-other-balances > header.leave-ledger-force-balance strong,
html[data-theme="dark"] .leave-ledger-other-balances > header.leave-ledger-force-balance small > span {
    color: #79c8ff;
}

/* Compact, uniform annual/compensatory balance cards. */
.leave-ledger-mini-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 16px;
}
.leave-ledger-mini-balance-card {
    --mini-accent: #64748b;
    --mini-soft: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 66px;
    padding: 10px 12px;
    border: 1px solid #d9e4ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}
.leave-ledger-mini-balance-card.is-force { --mini-accent: #1679c4; --mini-soft: #eaf5ff; }
.leave-ledger-mini-balance-card.is-special,
.leave-ledger-mini-balance-card.is-wellness,
.leave-ledger-mini-balance-card.is-cto { --mini-accent: #b77900; --mini-soft: #fff8d9; }
.leave-ledger-mini-balance-card > .leave-ledger-panel-icon,
.leave-ledger-mini-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--mini-soft);
    color: var(--mini-accent);
}
.leave-ledger-mini-icon .leave-type-dot { background: currentColor; box-shadow: none; }
.leave-ledger-mini-balance-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.leave-ledger-mini-balance-card small {
    overflow: hidden;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leave-ledger-mini-balance-card strong {
    color: var(--mini-accent);
    font-size: .94rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.leave-ledger-mini-balance-card strong > span {
    color: #87909d;
    font-size: .62rem;
    font-weight: 500;
}
body.dark-mode .leave-ledger-mini-balance-card,
html[data-theme="dark"] .leave-ledger-mini-balance-card {
    border-color: #294550;
    background: #10242d;
}
body.dark-mode .leave-ledger-mini-balance-card small,
html[data-theme="dark"] .leave-ledger-mini-balance-card small { color: #9eb0b8; }
@media (max-width: 980px) {
    .leave-ledger-mini-balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .leave-ledger-mini-balance-grid { grid-template-columns: 1fr; margin-inline: 10px; }
}

/* Leave Ledger all-years print action. */
.leave-ledger-search-controls {
    grid-template-columns: minmax(220px, 1fr) 132px 92px 92px;
}
.leave-ledger-search-controls > .search-suggestions { right: 348px; }
.leave-ledger-print-action {
    width: 92px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
}
@media (max-width: 600px) {
    .leave-ledger-search-controls { grid-template-columns: minmax(0, 1fr) 110px 84px 84px; }
    .leave-ledger-search-controls > .search-suggestions { right: 304px; }
    .leave-ledger-print-action, .leave-ledger-export-action { width: 84px; padding-inline: 9px; }
}

.leave-ledger-print-toolbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid #dbe4ea;
    background: #eef2f6;
}
.leave-ledger-print-toolbar button {
    min-width: 88px;
    padding: 8px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
}
.leave-ledger-print-toolbar button:last-child {
    border-color: #0f8177;
    background: #0f8177;
    color: #fff;
}
.leave-ledger-print-sheet {
    box-sizing: border-box;
    width: 8.5in;
    min-height: 13in;
    margin: 0 auto;
    padding: 7mm 9mm;
    background: #fff;
    color: #111827;
    font-family: "Microsoft New Tai Lue", "Segoe UI", sans-serif;
    page: leave-ledger-portrait;
}

/* Landscape backup retained for an easy rollback. Add the
   is-landscape-backup class to the sheet to restore the former orientation. */
.leave-ledger-print-sheet.is-landscape-backup {
    width: 13in;
    min-height: 8.5in;
    page: leave-ledger-landscape-backup;
}
.leave-ledger-print-letterhead {
    position: relative;
    display: block;
    width: 100%;
    min-height: .9in;
    margin: 0 auto 4mm;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    text-align: center;
}
.leave-ledger-print-letterhead img {
    position: absolute;
    top: 0;
    left: calc(50% - 69mm);
    width: .9in;
    height: .9in;
    margin: 0;
    object-fit: contain;
}
.leave-ledger-print-letterhead > div {
    width: 92mm;
    margin: 0 auto;
    text-align: center;
}
.leave-ledger-print-letterhead :is(p, h3, h5) {
    margin: 0;
    color: #000;
    font-family: inherit;
    line-height: 1.25;
    text-transform: uppercase;
}
.leave-ledger-print-letterhead p { font-size: 11pt; font-weight: 400; }
.leave-ledger-print-letterhead h3 { margin-top: 4px; font-size: 11pt; font-weight: 700; }
.leave-ledger-print-letterhead h5 { margin-top: 20px; font-size: 12pt; font-weight: 700; }
.leave-ledger-print-title {
    margin: 0 0 4mm;
    padding-bottom: 2mm;
    border-bottom: 1.5px solid #111827;
    text-align: center;
}
.leave-ledger-print-title h1 {
    margin: 0;
    font-family: inherit;
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: 0;
}
.leave-ledger-print-employee {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0 0 3mm;
    padding: 0;
    border: 0;
    background: transparent;
}
.leave-ledger-print-employee > div {
    display: grid;
    grid-template-columns: 36mm minmax(0, 1fr);
    column-gap: 3mm;
    align-items: baseline;
}
.leave-ledger-print-employee span { color: #475569; font-size: 11pt; font-weight: 400; text-transform: none; white-space: nowrap; }
.leave-ledger-print-employee strong { font-size: 11pt; font-weight: 600; }
.leave-ledger-print-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 9pt;
    line-height: 1.15;
}
.leave-ledger-print-table col.print-col-month { width: 8%; }
.leave-ledger-print-table col.print-col-inclusive { width: 23.25%; }
.leave-ledger-print-table col.print-col-description { width: 17%; }
.leave-ledger-print-table col.print-col-number { width: 5.75%; }
.leave-ledger-print-table th,
.leave-ledger-print-table td {
    padding: 3px 4px;
    border: 1px solid #cbd5e1;
    vertical-align: middle;
}
.leave-ledger-print-table thead th {
    background: #f1f5f9;
    color: #334155;
    font-size: 9pt;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}
.leave-ledger-print-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.leave-ledger-print-table thead tr:nth-child(2) th { font-weight: 400; }
.leave-ledger-print-table td.balance { font-weight: 700; }
.leave-ledger-print-table .leave-ledger-print-year td {
    padding-block: 5px;
    background: #e8eef5;
    color: #1e3a5f;
    font-size: 9pt;
    font-weight: 800;
}
.leave-ledger-print-legend {
    margin-top: 1.5mm;
    color: #334155;
    font-size: 9pt;
    font-weight: 600;
    line-height: 1.2;
    break-inside: avoid;
    page-break-inside: avoid;
}
.leave-ledger-print-signatories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "prepared certified"
        "approved .";
    column-gap: 18mm;
    row-gap: 8mm;
    width: 100%;
    margin: 8mm 0 5mm;
    break-inside: avoid;
    page-break-inside: avoid;
    color: #111827;
}
.leave-ledger-print-signatory {
    display: flex;
    flex-direction: column;
    min-height: 24mm;
    text-align: left;
}
.leave-ledger-print-signatory.is-prepared { grid-area: prepared; }
.leave-ledger-print-signatory.is-certified { grid-area: certified; }
.leave-ledger-print-signatory.is-approved { grid-area: approved; }
.leave-ledger-print-signatory p {
    margin: 0 0 6mm;
    font-size: 11pt;
    text-align: left;
}
.leave-ledger-print-signatory strong {
    font-size: 11pt;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}
.leave-ledger-print-signatory span {
    margin-top: .25mm;
    font-size: 11pt;
    line-height: 1.2;
}
.leave-ledger-print-footer {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
    width: 8.5in;
    margin: 0 auto;
    padding: 4px 9mm 7mm;
    background: #fff;
    color: #64748b;
    font-size: 7pt;
    line-height: 1.2;
}
.leave-ledger-print-audit {
    font-size: 7pt;
    font-style: normal;
}
.leave-ledger-print-privacy { font-size: 7pt; }
.leave-ledger-print-footer-details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.leave-ledger-print-page-number {
    margin-left: auto;
    font-size: 6pt;
    white-space: nowrap;
    text-align: right;
}

@media print {
    @page leave-ledger-portrait { size: 8.5in 13in; margin: 7mm 9mm 15mm; }
    @page leave-ledger-landscape-backup { size: 13in 8.5in; margin: 7mm 9mm 15mm; }
    .leave-ledger-print-toolbar { display: none !important; }
    .leave-ledger-print-sheet {
        width: auto;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .leave-ledger-print-table thead { display: table-header-group; }
    .leave-ledger-print-table tr { break-inside: avoid; page-break-inside: avoid; }
    .leave-ledger-print-legend { break-inside: avoid; page-break-inside: avoid; }
    .leave-ledger-print-signatories { break-inside: avoid; page-break-inside: avoid; }
    .leave-ledger-print-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: auto;
        margin: 0;
        padding: 2px 0 0;
        break-inside: avoid;
        border-top: 1px solid #cbd5e1;
        background: #fff;
    }
    .leave-ledger-print-page-number::after {
        content: "Page " counter(page) " of " counter(pages);
    }
}

body.dark-mode .table.dashboard-table.leave-ledger-header-table thead th,
body.dark-mode .table.dashboard-table.leave-ledger-header-table thead tr:first-child th[rowspan],
body.dark-mode .table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,
body.dark-mode .table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th,
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead th,
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead tr:first-child th[rowspan],
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,
html[data-theme="dark"] .table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th {
    border-right-color: #304a55 !important;
}

/* Match ledger row categories to their corresponding balance-card colors. */
.leave-ledger-merged-table tbody tr.leave-row-vacation > td {
    background: #e3f2fd !important;
}

.leave-ledger-merged-table tbody tr.leave-row-vacation:hover > td {
    background: #d5eafa !important;
}

.leave-ledger-merged-table tbody tr.leave-row-sick > td {
    background: #fff0e4 !important;
}

.leave-ledger-merged-table tbody tr.leave-row-sick:hover > td {
    background: #ffe6d2 !important;
}

.leave-ledger-merged-table tbody tr.leave-row-other > td {
    background: #f0e8ff !important;
}

.leave-ledger-merged-table tbody tr.leave-row-other:hover > td {
    background: #e7dcfb !important;
}

body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-vacation > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-vacation > td {
    background: #17384b !important;
}

body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-sick > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-sick > td {
    background: #432f24 !important;
}

body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-other > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-other > td {
    background: #332a48 !important;
}

/* Leave ledger cards and categorized panels */
.leave-ledger-redesign{display:flex;flex-direction:column;gap:18px;padding-bottom:18px}.leave-ledger-selected-employee{display:flex;flex-direction:column;gap:2px;min-width:0}.leave-ledger-selected-employee strong{overflow:hidden;color:#0f766e;font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}.leave-ledger-selected-employee span{color:#718096;font-size:.72rem}.leave-ledger-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 16px}.leave-ledger-summary-card{--leave-accent:#0f766e;--leave-soft:#e8f8f5;position:relative;display:flex;align-items:center;gap:13px;min-height:118px;padding:18px;border:1px solid #d9e4ec;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.05);overflow:hidden}.leave-ledger-summary-card::after{position:absolute;right:-26px;bottom:-38px;width:100px;height:100px;border-radius:50%;background:var(--leave-soft);content:""}.leave-ledger-summary-card.is-total{--leave-accent:#0d8178;--leave-soft:#d8f3ef}.leave-ledger-summary-card.is-vacation{--leave-accent:#1680d4;--leave-soft:#e3f2fd}.leave-ledger-summary-card.is-sick{--leave-accent:#d76821;--leave-soft:#fff0e4}.leave-ledger-summary-card.is-others{--leave-accent:#7c4fd1;--leave-soft:#f0e8ff}.leave-ledger-card-icon{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:var(--leave-soft);color:var(--leave-accent);font-weight:900}.leave-ledger-summary-card>div:last-child{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px}.leave-ledger-summary-card span{color:#64748b;font-size:.74rem}.leave-ledger-summary-card strong{color:var(--leave-accent);font-size:1.45rem;line-height:1.15}.leave-ledger-summary-card small{color:#8794a6;font-size:.68rem}.leave-ledger-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 16px}.leave-ledger-category-panel{min-width:0;border:1px solid #d9e4ec;border-radius:17px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.045);overflow:hidden}.leave-ledger-category-panel.is-others{grid-column:1/-1}.leave-ledger-category-panel>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid #e6edf3;background:#f9fbfd}.leave-ledger-category-panel>header>div{display:flex;align-items:center;gap:11px;min-width:0}.leave-ledger-panel-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#e5f2ff;color:#1679c4;font-size:.72rem;font-weight:900}.leave-ledger-category-panel.is-sick .leave-ledger-panel-icon{background:#fff0e4;color:#cc621f}.leave-ledger-category-panel.is-others .leave-ledger-panel-icon{background:#f0e8ff;color:#7041c5}.leave-ledger-category-panel h2{margin:0;color:#182437;font-size:.92rem}.leave-ledger-category-panel header p{margin:2px 0 0;color:#7a899c;font-size:.68rem}.leave-ledger-category-panel>header>strong{color:#0f766e;font-size:1.12rem}.leave-ledger-category-panel.is-vacation>header>strong{color:#1679c4}.leave-ledger-category-panel.is-sick>header>strong{color:#cc621f}.leave-ledger-category-panel.is-others>header>strong{color:#7041c5}.leave-ledger-category-table-wrap{max-height:420px;overflow:auto}.leave-ledger-category-table{min-width:720px;margin:0}.leave-ledger-category-table th{position:sticky;z-index:1;top:0;white-space:nowrap}.leave-ledger-category-table td:nth-child(2){min-width:190px}.leave-ledger-category-table td:nth-child(2)>strong,.leave-ledger-category-table td:nth-child(2)>span{display:block}.leave-ledger-category-table td:nth-child(2)>span{margin-top:2px;color:#7a899c;font-size:.68rem}.leave-ledger-category-table .leave-balance-cell{color:#0f766e;font-weight:900}.leave-ledger-panel-empty{padding:30px 18px;color:#7a899c;text-align:center}.leave-ledger-other-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px}.leave-ledger-other-list>article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border:1px solid #e2e9f0;border-radius:13px;background:#fbfcfe}.leave-ledger-other-list>article>div{display:flex;align-items:center;gap:10px}.leave-ledger-other-list>article div div{display:flex;flex-direction:column}.leave-ledger-other-list strong{color:#273449;font-size:.82rem}.leave-ledger-other-list>article>strong{color:#7041c5;font-size:1rem;white-space:nowrap}.leave-ledger-other-list small{color:#7b8999;font-size:.66rem;font-weight:500}.leave-type-dot{width:10px;height:10px;border-radius:50%;background:#8b5bd8;box-shadow:0 0 0 5px #f0e8ff}.leave-type-dot.is-wellness{background:#17a89b;box-shadow:0 0 0 5px #e4f8f5}.leave-type-dot.is-cto{background:#dc7a24;box-shadow:0 0 0 5px #fff0e2}.leave-ledger-pagination{margin:0 16px}.leave-ledger-pagination>div{display:flex;gap:8px}

body.dark-mode .leave-ledger-summary-card,body.dark-mode .leave-ledger-category-panel,html[data-theme="dark"] .leave-ledger-summary-card,html[data-theme="dark"] .leave-ledger-category-panel{border-color:#294550;background:#10242d;color:#e6f0f2}body.dark-mode .leave-ledger-category-panel>header,html[data-theme="dark"] .leave-ledger-category-panel>header{border-color:#294550;background:#122a34}body.dark-mode .leave-ledger-category-panel h2,body.dark-mode .leave-ledger-other-list strong,html[data-theme="dark"] .leave-ledger-category-panel h2,html[data-theme="dark"] .leave-ledger-other-list strong{color:#e6f0f2}body.dark-mode .leave-ledger-other-list>article,html[data-theme="dark"] .leave-ledger-other-list>article{border-color:#294550;background:#122a34}

.leave-ledger-toolbar .records-search-form{display:block!important;flex:0 1 560px!important;width:min(560px,100%)!important;max-width:min(560px,100%)!important}.leave-ledger-toolbar .search-composer.animated-search.is-open{width:100%!important;min-width:100%!important}.leave-ledger-toolbar .leave-ledger-search-icon{cursor:default}.leave-ledger-toolbar .leave-ledger-search-icon:active{transform:translateY(-50%)!important}.leave-ledger-summary-grid.is-empty .leave-ledger-summary-card{box-shadow:none}.leave-ledger-summary-grid.is-empty .leave-ledger-summary-card>div:last-child>strong{color:#94a3b8}.leave-ledger-panel-grid.is-empty .leave-ledger-category-panel{box-shadow:none}.leave-ledger-panel-empty{display:flex;min-height:112px;flex-direction:column;align-items:center;justify-content:center;gap:4px}.leave-ledger-panel-empty strong{color:#334155;font-size:.82rem}.leave-ledger-panel-empty span{color:#7a899c;font-size:.72rem;text-align:center}
.leave-ledger-panel-grid{grid-template-columns:minmax(0,1fr)}.leave-ledger-category-panel.is-others{grid-column:auto}.leave-ledger-card-icon::before,.leave-ledger-panel-icon::before{display:block;width:21px;height:21px;background:currentColor;content:"";mask-position:center;mask-repeat:no-repeat;mask-size:contain}.leave-ledger-panel-icon::before{width:19px;height:19px}.leave-icon-total::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")}.leave-icon-vacation::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12a10.06 10.06 0 0 0-20 0Z'/%3E%3Cpath d='M12 12v7a2 2 0 0 0 4 0'/%3E%3Cpath d='M12 12c0-4.4-1.8-8-4-8s-4 3.6-4 8'/%3E%3Cpath d='M12 12c0-4.4 1.8-8 4-8s4 3.6 4 8'/%3E%3C/svg%3E")}.leave-icon-sick::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Crect x='5' y='5' width='14' height='14' rx='3'/%3E%3C/svg%3E")}.leave-icon-others::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
.leave-ledger-category-table .leave-numeric-cell{text-align:right!important;font-variant-numeric:tabular-nums}.leave-ledger-category-table th.leave-numeric-cell{padding-right:16px}.leave-ledger-category-table td.leave-numeric-cell{padding-right:16px}
.leave-ledger-value{display:inline-flex;justify-content:flex-end;min-width:58px;font-weight:800;font-variant-numeric:tabular-nums}.leave-ledger-value.is-earned:not(:empty){color:#15803d}.leave-ledger-value.is-with-pay:not(:empty){color:#b77900}.leave-ledger-value.is-without-pay:not(:empty){color:#c62828}body.dark-mode .leave-ledger-value.is-earned:not(:empty),html[data-theme="dark"] .leave-ledger-value.is-earned:not(:empty){color:#75d89b}body.dark-mode .leave-ledger-value.is-with-pay:not(:empty),html[data-theme="dark"] .leave-ledger-value.is-with-pay:not(:empty){color:#f5cf63}body.dark-mode .leave-ledger-value.is-without-pay:not(:empty),html[data-theme="dark"] .leave-ledger-value.is-without-pay:not(:empty){color:#ff9999}
.leave-ledger-search-controls{position:relative;display:grid;grid-template-columns:minmax(220px,1fr) 132px;align-items:center;gap:12px;width:100%}.leave-ledger-employee-filter{position:relative;min-width:0}.leave-ledger-employee-filter>.form-control{width:100%;height:44px;padding-top:0;padding-right:42px;padding-bottom:0;font-weight:600;line-height:42px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.leave-ledger-employee-filter>.form-control::placeholder{font-weight:400}.leave-ledger-search-clear{position:absolute;top:50%;right:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:#64748b;font:500 1.25rem/1 Arial,sans-serif;transform:translateY(-50%);transition:background-color .15s ease,color .15s ease}.leave-ledger-search-clear:hover,.leave-ledger-search-clear:focus-visible{background:#e7f5f3;color:#0f766e;outline:0}.leave-ledger-employee-filter>.form-control:placeholder-shown+.leave-ledger-search-clear{display:none}.leave-ledger-search-controls>.search-suggestions{right:144px}.leave-ledger-year-filter{position:relative;display:block;margin:0}.leave-ledger-year-filter>span:first-child{position:absolute;z-index:2;top:-7px;left:12px;padding:0 5px;background:var(--page);color:#0f766e;font-size:.66rem;font-weight:500;line-height:1}.leave-ledger-year-native{display:none}.leave-ledger-year-button{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 12px 0 13px;border:1px solid var(--border-strong);border-radius:12px;background:var(--page);box-shadow:0 1px 2px rgba(15,23,42,.03);color:var(--text);font:inherit;font-size:.84rem;text-align:left;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.leave-ledger-year-button strong{font-weight:600}.leave-ledger-year-button:hover:not(:disabled){border-color:#91aaa8}.leave-ledger-year-button:focus,.leave-ledger-year-button[aria-expanded="true"]{border-color:var(--primary);outline:0;box-shadow:0 0 0 .16rem rgba(20,184,166,.22)}.leave-ledger-year-button:disabled{cursor:not-allowed;opacity:.58}.leave-ledger-year-chevron{width:17px;height:17px;background:#64748b;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .16s ease}.leave-ledger-year-button[aria-expanded="true"] .leave-ledger-year-chevron{transform:rotate(180deg)}.leave-ledger-year-suggestions{right:0;left:0;z-index:30;max-height:245px}.leave-ledger-year-suggestions .search-suggestion{font-weight:400!important}.leave-ledger-year-suggestions .search-suggestion.is-selected{background:var(--teal-soft);color:#0f766e;font-weight:600!important}body.dark-mode .leave-ledger-year-filter>span:first-child,html[data-theme="dark"] .leave-ledger-year-filter>span:first-child{background:#10242d;color:#79e0d4}body.dark-mode .leave-ledger-search-clear:hover,body.dark-mode .leave-ledger-search-clear:focus-visible,html[data-theme="dark"] .leave-ledger-search-clear:hover,html[data-theme="dark"] .leave-ledger-search-clear:focus-visible{background:#1b3942;color:#79e0d4}@media(max-width:600px){.leave-ledger-search-controls{grid-template-columns:minmax(0,1fr) 110px;gap:9px}.leave-ledger-search-controls>.search-suggestions{right:119px}}
.leave-ledger-category-table{min-width:980px}.leave-ledger-category-table th:nth-child(2),.leave-ledger-category-table td:nth-child(2){min-width:150px}.leave-ledger-category-table th:nth-child(3),.leave-ledger-category-table td:nth-child(3){min-width:180px}.leave-ledger-category-table th:nth-child(4),.leave-ledger-category-table td:nth-child(4){min-width:150px}
.leave-ledger-redesign.is-loading{pointer-events:none}.leave-ledger-load-error{margin:0 16px}
.leave-ledger-search-suggestions{max-height:390px}.leave-ledger-search-suggestions .search-suggestion{font-weight:400!important}
.leave-ledger-other-balances{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,2.3fr);align-items:stretch;gap:0;margin:0 16px;border:1px solid #dddff0;border-radius:15px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.04);overflow:hidden}.leave-ledger-other-balances>header{display:flex;align-items:center;gap:11px;padding:14px 16px;border-right:1px solid #e5e7f2;background:#faf9ff}.leave-ledger-other-balances>header>div{display:flex;flex-direction:column;gap:2px}.leave-ledger-other-balances>header strong{color:#44347a;font-size:.82rem}.leave-ledger-other-balances>header small{color:#7b7990;font-size:.67rem}.leave-ledger-other-balance-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}.leave-ledger-other-balance-items>article{display:flex;align-items:center;gap:11px;min-width:0;padding:12px 16px;border-right:1px solid #ececf4}.leave-ledger-other-balance-items>article:last-child{border-right:0}.leave-ledger-other-balance-items>article>div{display:flex;min-width:0;flex-direction:column;gap:2px}.leave-ledger-other-balance-items small{overflow:hidden;color:#6f7483;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.leave-ledger-other-balance-items strong{color:#2f3340;font-size:.88rem;font-variant-numeric:tabular-nums}.leave-ledger-other-balance-items strong>span{color:#87909d;font-size:.62rem;font-weight:500}.leave-ledger-other-table{min-width:900px}.leave-ledger-other-table th:first-child,.leave-ledger-other-table td:first-child{min-width:210px}.leave-ledger-other-table th:nth-child(2),.leave-ledger-other-table td:nth-child(2){min-width:105px}.leave-ledger-other-table th:nth-child(3),.leave-ledger-other-table td:nth-child(3){min-width:150px}.leave-ledger-other-table th:nth-child(4),.leave-ledger-other-table td:nth-child(4){min-width:190px}.leave-ledger-type-badge{display:inline-flex;color:#6744a4;font-weight:600}.leave-ledger-category-panel.is-others .leave-ledger-category-table-wrap{max-height:520px}body.dark-mode .leave-ledger-other-balances,html[data-theme="dark"] .leave-ledger-other-balances{border-color:#294550;background:#10242d}body.dark-mode .leave-ledger-other-balances>header,html[data-theme="dark"] .leave-ledger-other-balances>header{border-color:#294550;background:#122a34}body.dark-mode .leave-ledger-other-balances>header strong,html[data-theme="dark"] .leave-ledger-other-balances>header strong{color:#d8c6ff}body.dark-mode .leave-ledger-other-balance-items>article,html[data-theme="dark"] .leave-ledger-other-balance-items>article{border-color:#294550}body.dark-mode .leave-ledger-other-balance-items strong,html[data-theme="dark"] .leave-ledger-other-balance-items strong{color:#e6f0f2}body.dark-mode .leave-ledger-type-badge,html[data-theme="dark"] .leave-ledger-type-badge{color:#cbb3ff}@media(max-width:980px){.leave-ledger-other-balances{grid-template-columns:1fr}.leave-ledger-other-balances>header{border-right:0;border-bottom:1px solid #e5e7f2}.leave-ledger-other-balance-items>article{padding-block:14px}}@media(max-width:650px){.leave-ledger-other-balance-items{grid-template-columns:1fr}.leave-ledger-other-balance-items>article{border-right:0;border-bottom:1px solid #ececf4}.leave-ledger-other-balance-items>article:last-child{border-bottom:0}}
.leave-ledger-category-panel.is-merged .leave-ledger-panel-icon{background:#e6f5f2;color:#0f8177}.leave-ledger-category-panel.is-merged .leave-ledger-category-table-wrap{max-height:620px}.leave-ledger-merged-table{min-width:1320px}.leave-ledger-merged-table th:first-child,.leave-ledger-merged-table td:first-child{min-width:190px}.leave-ledger-merged-table th:nth-child(2),.leave-ledger-merged-table td:nth-child(2){min-width:100px}.leave-ledger-merged-table th:nth-child(3),.leave-ledger-merged-table td:nth-child(3){min-width:150px}.leave-ledger-merged-table th:nth-child(4),.leave-ledger-merged-table td:nth-child(4){min-width:190px}.leave-ledger-merged-table th:nth-child(5),.leave-ledger-merged-table td:nth-child(5){min-width:180px}.leave-ledger-type-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border:1px solid transparent;border-radius:999px;font-size:.7rem;font-weight:600;white-space:nowrap}.leave-ledger-type-badge.is-vacation{border-color:#b7dcf7;background:#edf7ff;color:#126cae}.leave-ledger-type-badge.is-sick{border-color:#ffd4b8;background:#fff4eb;color:#b75519}.leave-ledger-type-badge.is-cto{border-color:#a9e4de;background:#ebfaf8;color:#08796f}.leave-ledger-type-badge.is-family{border-color:#f1c3df;background:#fff0f8;color:#a93979}.leave-ledger-type-badge.is-special{border-color:#d8c5f6;background:#f7f1ff;color:#7041b3}.leave-ledger-type-badge.is-wellness{border-color:#bde6c9;background:#effbf3;color:#248142}.leave-ledger-type-badge.is-rehabilitation{border-color:#ffc9c5;background:#fff1f0;color:#b73c34}.leave-ledger-type-badge.is-other{border-color:#d7dee8;background:#f5f7fa;color:#536174}body.dark-mode .leave-ledger-type-badge.is-vacation,html[data-theme="dark"] .leave-ledger-type-badge.is-vacation{border-color:#285b7f;background:#173247;color:#79c8ff}body.dark-mode .leave-ledger-type-badge.is-sick,html[data-theme="dark"] .leave-ledger-type-badge.is-sick{border-color:#704526;background:#3f2c20;color:#ffb782}body.dark-mode .leave-ledger-type-badge.is-cto,html[data-theme="dark"] .leave-ledger-type-badge.is-cto{border-color:#24665f;background:#173d39;color:#70dbd0}body.dark-mode .leave-ledger-type-badge.is-family,html[data-theme="dark"] .leave-ledger-type-badge.is-family{border-color:#713457;background:#442438;color:#f4a9d3}body.dark-mode .leave-ledger-type-badge.is-special,html[data-theme="dark"] .leave-ledger-type-badge.is-special{border-color:#58417b;background:#302640;color:#cab0f2}body.dark-mode .leave-ledger-type-badge.is-wellness,html[data-theme="dark"] .leave-ledger-type-badge.is-wellness{border-color:#326947;background:#203d2b;color:#8cdaa3}body.dark-mode .leave-ledger-type-badge.is-rehabilitation,html[data-theme="dark"] .leave-ledger-type-badge.is-rehabilitation{border-color:#74403b;background:#432927;color:#ffaaa4}body.dark-mode .leave-ledger-type-badge.is-other,html[data-theme="dark"] .leave-ledger-type-badge.is-other{border-color:#435467;background:#293744;color:#b8c7d8}
.leave-ledger-merged-table{min-width:1180px}.leave-ledger-merged-table thead tr:first-child th{top:0;z-index:3;vertical-align:middle}.leave-ledger-merged-table thead tr:nth-child(2) th{top:34px;z-index:3}.leave-ledger-merged-table th:first-child,.leave-ledger-merged-table td:first-child{min-width:105px}.leave-ledger-merged-table th:nth-child(2),.leave-ledger-merged-table td:nth-child(2){min-width:150px}.leave-ledger-merged-table th:nth-child(3),.leave-ledger-merged-table td:nth-child(3){min-width:190px}.leave-ledger-merged-table th:nth-child(4),.leave-ledger-merged-table td:nth-child(4){min-width:210px}.leave-ledger-group-heading{text-align:center!important;letter-spacing:.035em}.leave-ledger-group-heading.is-vacation{color:#126cae}.leave-ledger-group-heading.is-sick{color:#b75519}.leave-ledger-description{display:inline-flex;align-items:center;gap:7px;font-weight:600}.leave-ledger-description::before{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:currentColor;content:""}.leave-ledger-description.is-vacation{color:#126cae}.leave-ledger-description.is-sick{color:#b75519}.leave-ledger-description.is-cto{color:#08796f}.leave-ledger-description.is-family{color:#a93979}.leave-ledger-description.is-special{color:#7041b3}.leave-ledger-description.is-wellness{color:#248142}.leave-ledger-description.is-rehabilitation{color:#b73c34}.leave-ledger-description.is-other{color:#536174}.leave-ledger-description.is-neutral{color:#64748b}.leave-ledger-value.is-deduction:not(:empty){color:#c62828}body.dark-mode .leave-ledger-group-heading.is-vacation,html[data-theme="dark"] .leave-ledger-group-heading.is-vacation,body.dark-mode .leave-ledger-description.is-vacation,html[data-theme="dark"] .leave-ledger-description.is-vacation{color:#79c8ff}body.dark-mode .leave-ledger-group-heading.is-sick,html[data-theme="dark"] .leave-ledger-group-heading.is-sick,body.dark-mode .leave-ledger-description.is-sick,html[data-theme="dark"] .leave-ledger-description.is-sick{color:#ffb782}body.dark-mode .leave-ledger-description.is-cto,html[data-theme="dark"] .leave-ledger-description.is-cto{color:#70dbd0}body.dark-mode .leave-ledger-description.is-family,html[data-theme="dark"] .leave-ledger-description.is-family{color:#f4a9d3}body.dark-mode .leave-ledger-description.is-special,html[data-theme="dark"] .leave-ledger-description.is-special{color:#cab0f2}body.dark-mode .leave-ledger-description.is-wellness,html[data-theme="dark"] .leave-ledger-description.is-wellness{color:#8cdaa3}body.dark-mode .leave-ledger-description.is-rehabilitation,html[data-theme="dark"] .leave-ledger-description.is-rehabilitation{color:#ffaaa4}body.dark-mode .leave-ledger-description.is-other,body.dark-mode .leave-ledger-description.is-neutral,html[data-theme="dark"] .leave-ledger-description.is-other,html[data-theme="dark"] .leave-ledger-description.is-neutral{color:#b8c7d8}body.dark-mode .leave-ledger-value.is-deduction:not(:empty),html[data-theme="dark"] .leave-ledger-value.is-deduction:not(:empty){color:#ff9999}
.leave-ledger-merged-table tbody tr.leave-row-earned>td{background:#f2f4f7!important}.leave-ledger-merged-table tbody tr.leave-row-vacation>td{background:#eaf5ff!important}.leave-ledger-merged-table tbody tr.leave-row-sick>td{background:#eaf8ee!important}.leave-ledger-merged-table tbody tr.leave-row-dtr>td{background:#fff0f0!important}.leave-ledger-merged-table tbody tr.leave-row-other>td{background:#fff8d9!important}.leave-ledger-merged-table tbody tr.leave-row-earned:hover>td{background:#e8ebef!important}.leave-ledger-merged-table tbody tr.leave-row-vacation:hover>td{background:#dceeff!important}.leave-ledger-merged-table tbody tr.leave-row-sick:hover>td{background:#dcf2e3!important}.leave-ledger-merged-table tbody tr.leave-row-dtr:hover>td{background:#ffe2e2!important}.leave-ledger-merged-table tbody tr.leave-row-other:hover>td{background:#fff1bd!important}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-earned>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-earned>td{background:#26343d!important}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-vacation>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-vacation>td{background:#17384b!important}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-sick>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-sick>td{background:#1d3c2c!important}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-dtr>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-dtr>td{background:#47292b!important}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-other>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-other>td{background:#453c1f!important}
.leave-ledger-merged-table{width:100%;min-width:1080px;table-layout:fixed}.leave-ledger-merged-table col.leave-col-month{width:7%}.leave-ledger-merged-table col.leave-col-reference{width:14%}.leave-ledger-merged-table col.leave-col-inclusive{width:17%}.leave-ledger-merged-table col.leave-col-description{width:20%}.leave-ledger-merged-table col.leave-col-number{width:7%}.leave-ledger-merged-table th.leave-numeric-cell,.leave-ledger-merged-table td.leave-numeric-cell{padding-right:9px;padding-left:7px}.leave-ledger-merged-table .leave-ledger-value{min-width:0;width:100%}
.leave-ledger-merged-table{border-collapse:separate;border-spacing:0}.leave-ledger-merged-table thead th{height:36px;padding:8px 10px;border-right:1px solid #d9e2ec!important;border-bottom:1px solid #cbd7e3!important;background:#f7f9fc;color:#34445a;font-size:.68rem;letter-spacing:.045em;line-height:1.15;vertical-align:middle}.leave-ledger-merged-table thead tr:first-child th[rowspan]{background:#f4f7fa}.leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading{position:sticky;text-align:center!important;font-size:.7rem;font-weight:800}.leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-vacation{border-left:2px solid #77bce8!important;background:#eaf5ff;color:#126cae}.leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-sick{border-left:2px solid #7bc394!important;background:#eaf8ee;color:#237a3e}.leave-ledger-merged-table thead tr:nth-child(2) th{text-align:center!important;font-size:.66rem;font-weight:700}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(-n+3){background:#f2f8fd;color:#256a9c}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(n+4){background:#f1f9f3;color:#327448}.leave-ledger-merged-table thead tr:nth-child(2) th:first-child{border-left:2px solid #77bce8!important}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(4){border-left:2px solid #7bc394!important}.leave-ledger-merged-table thead th:last-child{border-right:0!important}.leave-ledger-merged-table tbody td{border-right:1px solid rgba(203,215,227,.72)}.leave-ledger-merged-table tbody td:nth-child(5){border-left:2px solid rgba(67,151,207,.48)}.leave-ledger-merged-table tbody td:nth-child(8){border-left:2px solid rgba(69,157,96,.48)}.leave-ledger-merged-table tbody td:last-child{border-right:0}.leave-ledger-category-panel.is-merged{border-color:#cfdbe6}.leave-ledger-category-panel.is-merged .leave-ledger-category-table-wrap{border-top:1px solid #d8e2eb}body.dark-mode .leave-ledger-merged-table thead th,html[data-theme="dark"] .leave-ledger-merged-table thead th{border-color:#34505c!important;background:#172d36;color:#d4e0e5}body.dark-mode .leave-ledger-merged-table thead tr:first-child th[rowspan],html[data-theme="dark"] .leave-ledger-merged-table thead tr:first-child th[rowspan]{background:#152a33}body.dark-mode .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-vacation,html[data-theme="dark"] .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-vacation{border-left-color:#4c94c5!important;background:#17384b;color:#8cd0ff}body.dark-mode .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-sick,html[data-theme="dark"] .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-sick{border-left-color:#58a871!important;background:#1d3c2c;color:#91dda7}body.dark-mode .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(-n+3),html[data-theme="dark"] .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(-n+3){background:#193543;color:#8cd0ff}body.dark-mode .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(n+4),html[data-theme="dark"] .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(n+4){background:#203a2b;color:#91dda7}body.dark-mode .leave-ledger-merged-table tbody td,html[data-theme="dark"] .leave-ledger-merged-table tbody td{border-right-color:#304a55}body.dark-mode .leave-ledger-category-panel.is-merged,html[data-theme="dark"] .leave-ledger-category-panel.is-merged{border-color:#34505c}
.leave-ledger-category-panel.is-merged>header{border-bottom:0}.leave-ledger-category-panel.is-merged .leave-ledger-category-table-wrap{max-height:none;border-top:0;overflow-x:auto;overflow-y:hidden}.leave-ledger-table-content{min-width:1080px}.leave-ledger-table-header-wrap{padding-right:12px;background:#f7f9fc}.leave-ledger-header-table,.leave-ledger-body-table{min-width:0!important;margin:0!important}.leave-ledger-header-table thead th{position:static!important}.leave-ledger-table-body-scroll{max-height:548px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}.leave-ledger-body-table tbody tr:first-child td{border-top:0}body.dark-mode .leave-ledger-table-header-wrap,html[data-theme="dark"] .leave-ledger-table-header-wrap{background:#172d36}
.leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-vacation,.leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-sick,.leave-ledger-merged-table thead tr:nth-child(2) th:first-child,.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(4){border-left:1px solid #d9e2ec!important}.leave-ledger-merged-table tbody td:nth-child(5),.leave-ledger-merged-table tbody td:nth-child(8){border-left:0!important}.leave-ledger-merged-table tbody tr.leave-row-dtr>td{background:#fff!important}.leave-ledger-merged-table tbody tr.leave-row-dtr:hover>td{background:#f8fafc!important}body.dark-mode .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-vacation,body.dark-mode .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-sick,body.dark-mode .leave-ledger-merged-table thead tr:nth-child(2) th:first-child,body.dark-mode .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(4),html[data-theme="dark"] .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-vacation,html[data-theme="dark"] .leave-ledger-merged-table thead tr:first-child .leave-ledger-group-heading.is-sick,html[data-theme="dark"] .leave-ledger-merged-table thead tr:nth-child(2) th:first-child,html[data-theme="dark"] .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(4){border-left-color:#34505c!important}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-dtr>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-dtr>td{background:#10242d!important}
.leave-ledger-category-panel.is-merged{border-radius:0 0 17px 17px}.leave-ledger-header-table thead tr:first-child th{border-top:1px solid #cbd7e3!important}body.dark-mode .leave-ledger-header-table thead tr:first-child th,html[data-theme="dark"] .leave-ledger-header-table thead tr:first-child th{border-top-color:#34505c!important}
.leave-ledger-merged-table col.leave-col-month{width:7%}.leave-ledger-merged-table col.leave-col-reference{width:13%}.leave-ledger-merged-table col.leave-col-inclusive{width:15%}.leave-ledger-merged-table col.leave-col-description{width:17%}.leave-ledger-merged-table col.leave-col-number{width:6%}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(-n+4){background:#f2f8fd;color:#256a9c}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(n+5){background:#f1f9f3;color:#327448}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(4){border-left:0!important}.leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(5){border-left:1px solid #d9e2ec!important}.leave-ledger-merged-table tbody td:nth-child(9){border-left:0!important}.leave-ledger-merged-table tbody tr.leave-row-earned>td,.leave-ledger-merged-table tbody tr.leave-row-earned:hover>td{background:#fff!important}.leave-ledger-table-legend{display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:9px 16px;border-top:1px solid #d8e2eb;background:#f8fafc;color:#64748b;font-size:.68rem}.leave-ledger-table-legend strong{color:#334155;font-weight:700}body.dark-mode .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(-n+4),html[data-theme="dark"] .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(-n+4){background:#193543;color:#8cd0ff}body.dark-mode .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(n+5),html[data-theme="dark"] .leave-ledger-merged-table thead tr:nth-child(2) th:nth-child(n+5){background:#203a2b;color:#91dda7}body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-earned>td,html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-earned>td{background:#10242d!important}body.dark-mode .leave-ledger-table-legend,html[data-theme="dark"] .leave-ledger-table-legend{border-color:#34505c;background:#122a34;color:#9eb0b8}body.dark-mode .leave-ledger-table-legend strong,html[data-theme="dark"] .leave-ledger-table-legend strong{color:#e1ecef}@media(max-width:650px){.leave-ledger-table-legend{align-items:flex-start;flex-direction:column;gap:4px}}
.leave-ledger-table-header-wrap{position:relative}.leave-ledger-table-header-wrap::after{position:absolute;z-index:4;top:0;right:0;width:12px;height:72px;border-top:1px solid #cbd7e3;border-bottom:1px solid #cbd7e3;border-left:1px solid #d9e2ec;background:linear-gradient(to bottom,#eaf8ee 0,#eaf8ee 36px,#f1f9f3 36px,#f1f9f3 72px);content:"";pointer-events:none}.leave-ledger-header-table thead tr:first-child th:first-child,.leave-ledger-body-table tbody td:first-child{border-left:1px solid #d9e2ec!important}body.dark-mode .leave-ledger-table-header-wrap::after,html[data-theme="dark"] .leave-ledger-table-header-wrap::after{border-color:#34505c;background:linear-gradient(to bottom,#1d3c2c 0,#1d3c2c 36px,#203a2b 36px,#203a2b 72px)}body.dark-mode .leave-ledger-header-table thead tr:first-child th:first-child,body.dark-mode .leave-ledger-body-table tbody td:first-child,html[data-theme="dark"] .leave-ledger-header-table thead tr:first-child th:first-child,html[data-theme="dark"] .leave-ledger-body-table tbody td:first-child{border-left-color:#34505c!important}
.leave-ledger-header-table thead th,.leave-ledger-header-table thead tr:first-child th[rowspan],.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-vacation,.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-sick,.leave-ledger-header-table thead tr:nth-child(2) th:nth-child(-n+4),.leave-ledger-header-table thead tr:nth-child(2) th:nth-child(n+5){border-color:#d3dce6!important;background:#f4f7fa!important;color:#34445a!important}.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading{background:#eef2f6!important;font-weight:800}.leave-ledger-header-table thead tr:nth-child(2) th{background:#f8fafc!important;font-weight:700}.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-vacation,.leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-sick,.leave-ledger-header-table thead tr:nth-child(2) th:first-child,.leave-ledger-header-table thead tr:nth-child(2) th:nth-child(5){border-left:1px solid #d3dce6!important}.leave-ledger-table-header-wrap::after{border-color:#d3dce6;background:#f4f7fa}body.dark-mode .leave-ledger-header-table thead th,body.dark-mode .leave-ledger-header-table thead tr:first-child th[rowspan],body.dark-mode .leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-vacation,body.dark-mode .leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-sick,body.dark-mode .leave-ledger-header-table thead tr:nth-child(2) th:nth-child(-n+4),body.dark-mode .leave-ledger-header-table thead tr:nth-child(2) th:nth-child(n+5),html[data-theme="dark"] .leave-ledger-header-table thead th,html[data-theme="dark"] .leave-ledger-header-table thead tr:first-child th[rowspan],html[data-theme="dark"] .leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-vacation,html[data-theme="dark"] .leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading.is-sick,html[data-theme="dark"] .leave-ledger-header-table thead tr:nth-child(2) th:nth-child(-n+4),html[data-theme="dark"] .leave-ledger-header-table thead tr:nth-child(2) th:nth-child(n+5){border-color:#3a515c!important;background:#172d36!important;color:#d4e0e5!important}body.dark-mode .leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading,html[data-theme="dark"] .leave-ledger-header-table thead tr:first-child .leave-ledger-group-heading{background:#142832!important}body.dark-mode .leave-ledger-header-table thead tr:nth-child(2) th,html[data-theme="dark"] .leave-ledger-header-table thead tr:nth-child(2) th{background:#1a3039!important}body.dark-mode .leave-ledger-table-header-wrap::after,html[data-theme="dark"] .leave-ledger-table-header-wrap::after{border-color:#3a515c;background:#172d36}
.leave-ledger-category-panel.is-merged{border-radius:15px;overflow:hidden}.leave-ledger-header-table thead tr:first-child th{border-top:0!important}.leave-ledger-header-table thead tr:first-child th:first-child,.leave-ledger-body-table tbody td:first-child{border-left:0!important}.leave-ledger-table-header-wrap::after{border-top:0}
.leave-ledger-search-clear,.leave-ledger-search-clear:hover,.leave-ledger-search-clear:focus,.leave-ledger-search-clear:focus-visible,.leave-ledger-search-clear:active{top:8px;margin:0!important;transform:none!important}
@media(max-width:1180px){.leave-ledger-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.leave-ledger-panel-grid{grid-template-columns:1fr}.leave-ledger-category-panel.is-others{grid-column:auto}}@media(max-width:760px){.leave-ledger-summary-grid{grid-template-columns:1fr}.leave-ledger-other-list{grid-template-columns:1fr}.leave-ledger-summary-grid,.leave-ledger-panel-grid{padding-inline:10px}.leave-ledger-summary-card{min-height:96px}.leave-ledger-toolbar{align-items:stretch;flex-direction:column}.leave-ledger-toolbar .records-search-form{width:100%;max-width:none;margin-left:0}.leave-ledger-toolbar .leave-ledger-search,.leave-ledger-toolbar .leave-ledger-search.is-open{width:100%!important;min-width:100%!important}.leave-ledger-pagination{align-items:stretch;flex-direction:column;margin-inline:10px}.leave-ledger-pagination>div{display:grid;grid-template-columns:1fr 1fr}.leave-ledger-pagination .btn{width:100%}}

/* Employee Add/Edit: keep text, numeric, select, and custom date content on one
   horizontal guide. The floating-label text starts on the same 12px inset. */
form[data-employee-edit-tabs] :is(
    input.form-control,
    textarea.form-control,
    select.form-control,
    select.form-select,
    .smooth-select-button,
    .modern-date-display.form-control) {
    padding-left: 12px !important;
    text-align: left !important;
    text-align-last: left !important;
}

form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .personal-row,
    .employment-info-grid,
    .employment-row,
    .other-info-grid,
    .other-row,
    .education-info-grid,
    .education-row,
    .account-number-grid) label > span:first-child,
form[data-employee-edit-tabs] .eligibility-field > span:first-child {
    left: 8px !important;
    padding-inline: 4px !important;
}

/* Keep the notification overlay above dashboard pickers and lock background UI. */
.top-row:has(.notification-drawer-backdrop) {
    z-index: 20000;
}

.notification-drawer-backdrop,
.hr-tools-modal {
    background: rgba(15, 23, 42, .48);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body:has(.notification-drawer-backdrop) .page {
    pointer-events: none;
    user-select: none;
}

body:has(.notification-drawer-backdrop) .notification-drawer-backdrop {
    pointer-events: auto;
    user-select: text;
}

body:has(.notification-drawer-backdrop) .smooth-select-menu,
body:has(.notification-drawer-backdrop) .dashboard-picker-menu,
body:has(.notification-drawer-backdrop) .dropdown-menu,
body:has(.notification-drawer-backdrop) .filter-slide-panel,
body:has(.notification-drawer-backdrop) .dashboard-native-select-shell,
body:has(.notification-drawer-backdrop) .dashboard-picker,
body:has(.notification-drawer-backdrop) .chart-year-picker,
body:has(.notification-drawer-backdrop) .content select,
body:has(.hr-tools-modal) .dashboard-native-select-shell,
body:has(.hr-tools-modal) .dashboard-picker,
body:has(.hr-tools-modal) .chart-year-picker,
body:has(.hr-tools-modal) .content select {
    visibility: hidden !important;
    pointer-events: none !important;
}

.action-button.service-record {
    color: #0f766e;
    border-color: #a7dcd3;
    background: #f0fdfa;
}

.service-record-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(15, 23, 42, .64);
    backdrop-filter: blur(6px);
}

.service-record-modal-dialog {
    width: min(1180px, calc(100vw - 2rem));
    max-height: min(92dvh, 940px);
    overflow: auto;
    color: #172033;
    border: 1px solid #d7e2e7;
    border-radius: 22px;
    background: #f4f7f8;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .34);
}

.service-record-modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.4rem;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #115e59);
    box-shadow: 0 8px 24px rgba(15, 118, 110, .2);
}

.service-record-modal-header > div > span {
    display: block;
    margin-bottom: .2rem;
    color: #baf3ec;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.service-record-modal-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: 1.45rem;
    line-height: 1.2;
}

.service-record-modal-header p {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
    margin: .55rem 0 0;
    color: #d8f6f2;
    font-size: .82rem;
}

.service-record-modal-header p strong,
.service-record-modal-header p span { color: inherit; }

.service-record-modal-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    font-size: 1.55rem;
    line-height: 1;
    text-decoration: none;
}

.service-record-modal-close:hover,
.service-record-modal-close:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, .22);
    outline: 3px solid rgba(255, 255, 255, .2);
}

.service-record-modal-alert { margin: 1rem 1.25rem 0; }
.service-record-modal-empty { margin: 1.25rem; }

.service-record-modal-toolbar,
.service-record-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.service-record-modal-toolbar {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dbe5e9;
    background: #ffffff;
}

.service-record-modal-toolbar > div,
.service-record-section-heading > div { display: grid; gap: .15rem; }
.service-record-modal-toolbar strong { color: #172033; font-size: .92rem; }
.service-record-modal-toolbar span { color: #64748b; font-size: .78rem; }

.service-record-new-entry,
.service-record-existing-section {
    margin: 1rem 1.25rem;
    border: 1px solid #dbe5e9;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.service-record-new-entry {
    border-color: #a7dcd3;
    background: linear-gradient(180deg, #f4fffd 0%, #ffffff 44%);
}

.service-record-section-heading {
    padding: .9rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.service-record-section-heading span {
    color: #0f766e;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-record-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 1rem;
}

.service-record-entry-form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem;
}

.service-record-entry-form > label:not(.service-record-present-toggle) {
    display: grid;
    align-content: start;
    gap: .34rem;
    min-width: 0;
}

.service-record-entry-form > label > span {
    color: #526678;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: none;
}

.service-record-entry-form :where(.form-control, .form-select) {
    width: 100%;
    min-height: 42px;
    padding: .55rem .7rem;
    color: #172033;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font-size: .84rem;
}

.service-record-entry-form textarea.form-control {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: .55rem .7rem;
    overflow: hidden;
    line-height: 1.2;
    resize: none;
}

.service-record-entry-form > label.service-record-field {
    position: relative;
    display: block;
    padding-top: .45rem;
}

.service-record-entry-form > label.service-record-field > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 3;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #0F8A7D;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transform-origin: left center;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, background-color .16s ease;
}

.service-record-entry-form > label.service-record-field:focus-within > span:first-child,
.service-record-entry-form > label.service-record-field.has-floating-label > span:first-child {
    color: #0F8A7D;
    background: var(--surface);
    transform: translateY(0) scale(1);
}

.service-record-entry-form > label.service-record-field.is-empty > span:first-child {
    color: #DC2626 !important;
}

.service-record-entry-form > label.service-record-field.is-dirty > span:first-child {
    color: #CA8A04 !important;
}

.service-record-entry-form select.smooth-select.is-native-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.service-record-entry-form .employee-date-field > input.modern-date-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.service-record-entry-form .employee-date-field .modern-date-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    width: 100%;
    min-height: 44px;
    overflow: hidden;
    border: 1px solid #cfdae6;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.service-record-entry-form .employee-date-field .modern-date-control:hover:not(.is-disabled) { border-color: #8bbdb6; }
.service-record-entry-form .employee-date-field .modern-date-control.is-focused,
.service-record-entry-form .employee-date-field .modern-date-control.is-open {
    border-color: #0f8a7d;
    box-shadow: 0 0 0 .2rem rgba(15, 138, 125, .13), 0 10px 24px rgba(15, 23, 42, .08);
}

.service-record-entry-form .employee-date-field .modern-date-display.form-control {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: .62rem .86rem;
    color: #172033;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.service-record-entry-form .employee-date-field .modern-date-trigger {
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    min-height: 42px;
    padding: 0;
    color: #0f766e;
    border: 0;
    border-left: 1px solid #d9e5e3;
    background: #f0faf8;
}

.service-record-entry-form .employee-date-field .modern-date-trigger:hover:not(:disabled),
.service-record-entry-form .employee-date-field .modern-date-trigger:focus-visible {
    color: #0b5f58;
    background: #ddf4f0;
    outline: none;
}

.service-record-entry-form .employee-date-field .modern-date-trigger-icon {
    width: 19px;
    height: 19px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.service-record-entry-form .employee-date-field .modern-date-control.is-disabled {
    color: #94a3b8;
    border-color: #d7dee8;
    background: #f8fafc;
}

.service-record-record-type { grid-column: span 3; }
.service-record-status { grid-column: span 3; }
.service-record-designation { grid-column: span 6; }
.service-record-department { grid-column: span 6; }
.service-record-salary { grid-column: span 3; }
.service-record-salary-type { grid-column: span 3; }
.service-record-from { grid-column: span 3; }
.service-record-to { grid-column: span 3; }
.service-record-lwop { grid-column: span 2; }
.service-record-remarks { grid-column: span 4; }
.service-record-field-wide { grid-column: 1 / -1; }

.service-record-form-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: .25rem;
}

.service-record-present-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #334155;
    font-size: .8rem;
    font-weight: 750;
    margin-right: auto;
}

.service-record-present-toggle input { width: 18px; height: 18px; accent-color: #0f766e; }
.service-record-form-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.service-record-form-note { margin: -.35rem 1rem 1rem; color: #b45309; font-size: .76rem; }

.service-record-entry-list {
    display: grid;
    gap: .85rem;
    padding: 1rem;
}

.service-record-entry-card {
    overflow: visible;
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    background: #fbfdfe;
}

.service-record-entry-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.service-record-entry-card-header > div { display: grid; gap: .12rem; }
.service-record-entry-card-header > div > span { color: #0f766e; font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.service-record-entry-card-header strong { color: #172033; font-size: .86rem; }

.service-record-type-badge {
    padding: .24rem .55rem;
    color: #0f766e;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    background: #ecfdf5;
    font-size: .68rem;
    font-weight: 800;
}

.service-record-type-badge.is-separation {
    color: #9a3412;
    border-color: #fdba74;
    background: #fff7ed;
}

@media (max-width: 900px) {
    .service-record-modal-backdrop { padding: 0; }
    .service-record-modal-dialog { width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
    .service-record-entry-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-record-entry-form :where(.service-record-record-type, .service-record-status, .service-record-salary, .service-record-salary-type, .service-record-from, .service-record-to, .service-record-lwop) { grid-column: span 1; }
    .service-record-entry-form :where(.service-record-designation, .service-record-department, .service-record-remarks) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .service-record-modal-header,
    .service-record-modal-toolbar,
    .service-record-section-heading { padding-inline: .85rem; }
    .service-record-modal-toolbar { align-items: stretch; flex-direction: column; }
    .service-record-new-entry,
    .service-record-existing-section { margin: .75rem; }
    .service-record-entry-form { grid-template-columns: 1fr; padding: .85rem; }
    .service-record-entry-form :where(.service-record-field, .service-record-field-wide) { grid-column: auto; }
    .service-record-form-footer { align-items: stretch; flex-direction: column; }
    .service-record-form-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}

html,
body {
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
}

body.has-modal-open {
    overflow: hidden;
}

html.is-embedded-edit-root,
body.is-embedded-edit {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
}

body.is-embedded-edit {
    background: #FFFFFF;
}

body.is-embedded-edit .page {
    height: auto;
    min-height: 100vh;
    display: block;
    overflow: visible;
    background: #FFFFFF;
}

body.is-embedded-edit .sidebar,
body.is-embedded-edit .top-row,
body.is-embedded-edit .page-heading,
body.is-embedded-edit .employee-mobile-tabbar {
    display: none !important;
}

body.is-embedded-edit main,
body.is-embedded-edit .content {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

body.is-embedded-edit .employee-edit-form {
    padding: 0;
}

.employee-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.4rem;
    background: rgba(15, 23, 42, .54);
    backdrop-filter: blur(5px);
    animation: employeeModalFadeIn 160ms ease-out;
}

.employee-edit-modal[hidden] {
    display: none;
}

.employee-edit-modal-panel {
    width: min(900px, calc(100vw - 2.5rem));
    height: min(880px, calc(100vh - 2.5rem));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .35);
    animation: employeeModalRiseIn 190ms ease-out;
}

@keyframes employeeModalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes employeeModalRiseIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.employee-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid #E2E8F0;
}

.employee-edit-modal-title {
    margin: 0;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

.employee-edit-modal-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #475569;
    font-size: 1.35rem;
    line-height: 1;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: 9px;
}

.employee-edit-modal-close:hover,
.employee-edit-modal-close:focus-visible {
    color: #0F172A;
    background: #EEF2F7;
    outline: none;
}

.employee-edit-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #FFFFFF;
}

.employee-edit-modal-frame:not(.is-ready) {
    visibility: hidden;
}

.lucide-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-search {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
}

.icon-filter {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54L22 3Z'/%3E%3C/svg%3E");
}

.icon-x {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

.icon-wrench {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5-5l2 2-3 3-2-2a4 4 0 0 0 5 5l8.3 8.3a2.1 2.1 0 0 1-3 3l-8.3-8.3a4 4 0 0 1-5-5l2 2 3-3-2-2a4 4 0 0 1 5 5Z'/%3E%3C/svg%3E");
}

.icon-toolbox {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Crect width='20' height='15' x='2' y='6' rx='2'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M10 10v4h4v-4'/%3E%3C/svg%3E");
}

.icon-file-signature {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M8 18c1.5-2 3-2 4-1s2.5 1 4-1'/%3E%3Cpath d='M9 13h1'/%3E%3C/svg%3E");
}

.icon-chevron-right {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

.icon-trash-2 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cpath d='M19 6l-1 14c-.1 1.1-1 2-2.1 2H8.1C7 22 6.1 21.1 6 20L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.icon-print {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E");
}

.icon-bell {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10.27 21a2 2 0 0 0 3.46 0'/%3E%3Cpath d='M3.26 15.33A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.41 13.85 18 12.39 18 8a6 6 0 0 0-12 0c0 4.39-1.41 5.85-2.74 7.33Z'/%3E%3C/svg%3E");
}

.icon-chevron-down {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.icon-lock {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.icon-pencil {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.employee-portal {
    display: grid;
    gap: 1.25rem;
}

.employee-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1.35rem;
    border: 1px solid #D6E1DF;
    border-radius: 8px;
    background: #F5FAF8;
}

.employee-hero h1 {
    margin: .15rem 0 .25rem;
    color: #123C36;
    font-size: clamp(1.6rem, 2.5vw, 2.25rem);
    line-height: 1.1;
}

.employee-hero-id {
    display: block;
    margin-top: .75rem;
    color: #4b635f;
    font-size: 1rem;
    font-weight: 700;
}

.employee-hero p,
.employee-hero-meta {
    margin: 0;
    color: #4B635F;
}

.employee-hero strong {
    display: block;
    margin-top: .65rem;
    color: #354f4a;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.portal-kicker {
    color: #127C72;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-hero-meta {
    display: grid;
    gap: .25rem;
    justify-items: end;
    text-align: right;
}

.employee-hero-meta span {
    font-size: .84rem;
}

.employee-portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 1rem;
    align-items: start;
}

.employee-profile-panel,
.employee-actions-panel,
.employee-workflow-panel {
    display: grid;
    gap: 1rem;
    padding: .78rem;
    border: 1px solid #DDE6E4;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(17, 44, 39, .06);
}

.employee-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 0;
}

.employee-facts div {
    min-width: 0;
}

.employee-facts dt {
    color: #61736F;
    font-size: .78rem;
    font-weight: 700;
}

.employee-facts dd {
    margin: .2rem 0 0;
    color: #162B27;
    overflow-wrap: anywhere;
}

.employee-profile-id-link {
    min-width: 94px;
    font-weight: 900;
}

.employee-action-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.employee-action-card {
    display: grid;
    gap: .35rem;
    min-height: 96px;
    padding: .9rem;
    border: 1px solid #D7E3E0;
    border-radius: 8px;
    background: #F8FBFA;
    color: #1B3934;
    text-align: left;
}

.employee-action-card:disabled {
    cursor: not-allowed;
    opacity: .78;
}

.employee-action-card span {
    align-self: end;
    color: #127C72;
    font-size: .78rem;
    font-weight: 700;
}

a.employee-action-card {
    text-decoration: none;
}

.employee-workflow-panel {
    min-height: 150px;
}

.employee-payslip-latest-panel {
    gap: .8rem;
}

.employee-payslip-latest-list {
    display: grid;
    gap: .72rem;
}

.employee-payslip-latest-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .86rem;
    border: 1px solid #D7E3E0;
    border-radius: 10px;
    background: #FFFFFF;
    color: #162B27;
    text-decoration: none;
}

.employee-payslip-latest-card > div {
    display: grid;
    gap: .2rem;
}

.employee-payslip-latest-card span {
    color: #127C72;
    font-size: .9rem;
    font-weight: 650;
}

.employee-payslip-latest-card strong {
    color: #162B27;
    font-size: .96rem;
    font-weight: 760;
}

.employee-payslip-latest-card dl {
    display: grid;
    justify-items: end;
    gap: .12rem;
    margin: 0;
}

.employee-payslip-latest-card dt {
    color: #61736F;
    font-size: .68rem;
    font-weight: 700;
}

.employee-payslip-latest-card dd {
    margin: .16rem 0 0;
    color: #0F766E;
    font-size: .95rem;
    font-weight: 650;
    white-space: nowrap;
}

.employee-payslip-latest-card .net dd {
    color: #0F766E;
}

.employee-employment-page {
    display: grid;
    gap: .85rem;
}

.employee-employment-card {
    display: grid;
    gap: .72rem;
    padding: .82rem;
    border: 1px solid #D7E3E0;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: none;
}

.employee-employment-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.employee-employment-card-heading span {
    color: #127C72;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-employment-card-heading small {
    color: #61736F;
    font-size: .72rem;
    font-weight: 650;
}

.employee-employment-detail-grid,
.employee-employment-money-list {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.employee-employment-detail-grid div,
.employee-employment-money-list div {
    position: relative;
    display: grid;
    gap: .18rem;
    margin-top: .36rem;
    padding: .72rem .7rem .52rem;
    border: 1px solid #E2EBE9;
    border-radius: 10px;
    background: #FFFFFF;
}

.employee-employment-detail-grid > div:not(.employee-employment-pair) {
    min-height: 58px;
    padding-block: .82rem .62rem;
}

.employee-employment-detail-grid .employee-employment-pair,
.employee-employment-money-list .employee-employment-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    min-height: 0;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.employee-employment-detail-grid dt,
.employee-employment-money-list dt {
    position: absolute;
    top: -.48rem;
    left: .66rem;
    max-width: calc(100% - 1.32rem);
    padding: 0 .28rem;
    background: #FFFFFF;
    color: #61736F;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-employment-detail-grid dd,
.employee-employment-money-list dd {
    margin: 0;
    color: #162B27;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
}

.employee-employment-money-list div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.employee-employment-money-list dt {
    padding-right: .5rem;
}

.employee-employment-money-list dd {
    color: #0F766E;
    text-align: right;
    white-space: nowrap;
}

.employee-employment-section {
    display: grid;
    gap: .55rem;
}

.employee-employment-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.employee-employment-status-grid div {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 44px;
    margin-top: .36rem;
    padding: .72rem .7rem .52rem;
    border: 1px solid #E2EBE9;
    border-radius: 10px;
    background: #FFFFFF;
}

.employee-employment-status-grid span {
    position: absolute;
    top: -.48rem;
    left: .66rem;
    max-width: calc(100% - 1.32rem);
    padding: 0 .28rem;
    background: #FFFFFF;
    color: #334155;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-employment-empty {
    padding: .78rem;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    color: #64748B;
    font-size: .82rem;
    text-align: center;
}

.employee-service-record-table-wrap {
    overflow-x: auto;
    border: 1px solid #CBD5E1;
}

.employee-service-record-table {
    min-width: 1120px;
    table-layout: auto;
}

.employee-service-record-table th,
.employee-service-record-table td {
    vertical-align: middle;
}

.employee-service-record-card-list {
    display: none;
}

.employee-service-record-card {
    display: grid;
    gap: .5rem;
    width: 100%;
    padding: .86rem;
    border: 1px solid #dbe7f0;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.employee-service-record-card:hover,
.employee-service-record-card:focus-visible {
    border-color: rgba(15, 118, 110, .34);
    background: #fbfefd;
    outline: none;
    box-shadow: 0 12px 28px rgba(15, 118, 110, .12);
}

.employee-service-record-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.employee-service-record-card-head div {
    min-width: 0;
}

.employee-service-record-card-head span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.employee-service-record-card-head strong {
    display: block;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 760;
    line-height: 1.22;
    white-space: nowrap;
}

.employee-service-record-card-head small {
    flex: 0 0 auto;
    padding: .22rem .48rem;
    color: #0f766e;
    font-size: .62rem;
    font-weight: 760;
    line-height: 1;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 999px;
    background: #ecfdf5;
}

.employee-service-record-card-grid {
    display: grid;
    gap: .28rem;
    margin: 0;
}

.employee-service-record-card-grid p {
    min-width: 0;
    margin: 0;
    color: #1f2937;
    font-size: .78rem;
    font-weight: 560;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.employee-service-record-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(5px);
    animation: employeeModalFadeIn 160ms ease-out;
}

.employee-service-record-modal-panel {
    width: min(440px, calc(100vw - 2rem));
    max-height: min(720px, calc(100vh - 2rem));
    overflow: auto;
    border: 1px solid #dbe7f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    animation: employeeModalRiseIn 180ms ease-out;
}

.employee-service-record-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .9rem;
    padding: 1rem 1rem .8rem;
    border-bottom: 1px solid #e5edf3;
}

.employee-service-record-modal-header span {
    display: block;
    color: #0f766e;
    font-size: .66rem;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-service-record-modal-header h2 {
    margin: .16rem 0 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.25;
}

.employee-service-record-modal-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #64748b;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
}

.employee-service-record-modal-close .lucide-icon {
    width: 1.08rem;
    height: 1.08rem;
    flex-basis: 1.08rem;
}

.employee-service-record-modal-close:hover,
.employee-service-record-modal-close:focus-visible {
    color: #0f172a;
    background: #e2e8f0;
    outline: none;
}

.employee-service-record-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .72rem;
    margin: 0;
    padding: 1.15rem 1rem 1rem;
}

.employee-service-record-modal-grid div {
    position: relative;
    min-width: 0;
    padding: .9rem .72rem .68rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.employee-service-record-modal-grid div.wide {
    grid-column: 1 / -1;
}

.employee-service-record-modal-grid dt {
    position: absolute;
    top: -.52rem;
    left: .68rem;
    padding: 0 .26rem;
    color: #64748b;
    background: #fff;
    font-size: .68rem;
    font-weight: 620;
    line-height: 1.15;
}

.employee-service-record-modal-grid dd {
    margin: .22rem 0 0;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 520;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.employee-service-record-modal-date dd {
    white-space: nowrap;
}

.employee-service-date-col {
    width: 106px;
    white-space: nowrap;
}

.employee-service-status-col {
    width: 128px;
    min-width: 128px;
    white-space: nowrap;
}

.employee-service-salary-col {
    width: 136px;
    min-width: 136px;
    text-align: right;
    white-space: nowrap;
}

.employee-service-lwop-col {
    width: 70px;
    min-width: 70px;
    white-space: nowrap;
}

.head-approval-panel {
    border-color: #BBD9D3;
    background: #F2FAF8;
}

.empty-workflow-state {
    display: grid;
    place-items: center;
    min-height: 88px;
    padding: 1rem;
    border: 1px dashed #C5D4D1;
    border-radius: 8px;
    color: #60746F;
    text-align: center;
}

.empty-workflow-state strong {
    color: #24423D;
}

.employee-mobile-tabbar {
    display: none;
}

.employee-mobile-tab {
    color: inherit;
    text-decoration: none;
}

.employee-mobile-tab span {
    width: 1.45rem;
    height: 1.45rem;
    background: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.employee-mobile-tab.is-dashboard span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13h7V4H4v9Zm0 7h7v-5H4v5Zm9 0h7v-9h-7v9Zm0-16v5h7V4h-7Z'/%3E%3C/svg%3E");
}

.employee-mobile-tab.is-profile span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 1 1 16 0H4Z'/%3E%3C/svg%3E");
}

.employee-mobile-tab.is-more span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v3H4V6Zm0 5h16v3H4v-3Zm0 5h16v3H4v-3Z'/%3E%3C/svg%3E");
}

.employee-mobile-tab.is-service span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
}

.employee-mobile-tab.is-attendance span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2Zm11 8H6v10h12V10ZM8 12h4v4H8v-4Z'/%3E%3C/svg%3E");
}

.employee-mobile-tab.is-request span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18H5V3Zm3 4h8v2H8V7Zm0 4h8v2H8v-2Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E");
}

.employee-mobile-tab.is-leave span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2Zm11 8H6v10h12V10ZM6 8h12V6H6v2Z'/%3E%3C/svg%3E");
}

.employee-mobile-request-menu,
.employee-mobile-more-menu {
    position: relative;
}

.employee-mobile-request-menu summary,
.employee-mobile-more-menu summary {
    list-style: none;
    cursor: pointer;
}

.employee-mobile-request-menu summary::-webkit-details-marker,
.employee-mobile-more-menu summary::-webkit-details-marker {
    display: none;
}

.employee-mobile-request-panel,
.employee-mobile-more-panel {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .75rem);
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    width: min(260px, 86vw);
    padding: .65rem;
    background: #fff;
    border: 1px solid #dbe7f0;
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
    transform: translateX(-50%);
}

.employee-mobile-request-menu[open] .employee-mobile-request-panel,
.employee-mobile-more-menu[open] .employee-mobile-more-panel {
    display: grid;
    animation: employee-mobile-menu-grow .2s ease-out both;
}

.employee-mobile-request-menu.is-closing .employee-mobile-request-panel,
.employee-mobile-more-menu.is-closing .employee-mobile-more-panel {
    display: grid;
    pointer-events: none;
    animation: employee-mobile-menu-shrink .18s ease-in both;
}

.employee-mobile-request-panel a,
.employee-mobile-more-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}

.employee-mobile-more-panel {
    left: auto;
    right: 0;
    grid-template-columns: 1fr;
    width: max-content;
    min-width: max-content;
    max-width: calc(100vw - 1.5rem);
    justify-items: end;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    transform-origin: right bottom;
}

@keyframes employee-mobile-menu-grow {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px) scaleY(.72);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scaleY(1);
    }
}

.employee-mobile-more-menu[open] .employee-mobile-more-panel {
    animation-name: employee-mobile-more-menu-grow;
}

.employee-mobile-more-menu.is-closing .employee-mobile-more-panel {
    animation-name: employee-mobile-more-menu-shrink;
}

@keyframes employee-mobile-more-menu-grow {
    from {
        opacity: 0;
        transform: translateY(12px) scaleY(.72);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes employee-mobile-menu-shrink {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scaleY(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scaleY(.72);
    }
}

@keyframes employee-mobile-more-menu-shrink {
    from {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scaleY(.72);
    }
}

.employee-request-form {
    display: grid;
    gap: .85rem;
}

.employee-request-form label {
    display: grid;
    gap: .35rem;
}

.employee-request-form label span {
    color: #475569;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.employee-request-note {
    margin: -.25rem 0 .2rem;
    color: #64748b;
    font-size: .86rem;
    font-weight: 750;
}

.login-choice-shell,
.password-change-shell {
    display: grid;
    place-items: start center;
    padding: 2rem 1rem;
}

.login-choice-header {
    width: min(100%, 760px);
}

.login-choice-header {
    margin-bottom: 1rem;
}

.login-choice-header h1,
.password-change-panel h1 {
    margin: .2rem 0 .35rem;
    color: #123C36;
}

.login-choice-header p,
.password-change-panel p {
    color: #60746F;
}

.login-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(100%, 760px);
}

.login-choice-card,
.password-change-panel,
.users-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #DDE6E4;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(17, 44, 39, .06);
}

.password-change-panel {
    width: min(460px, calc(100vw - 2rem));
    padding: 2.15rem 1.8rem 1.65rem;
}

.login-choice-card {
    align-content: start;
    min-height: 210px;
}

.login-choice-card strong {
    color: #173B35;
    font-size: 1.1rem;
}

.login-choice-card span {
    color: #60746F;
}

.employee-mode {
    background: #F5FAF8;
}

.otp-request-form,
.password-change-form,
.employee-search-form,
.add-user-form,
.role-picker-form,
.role-permissions-form {
    display: grid;
    gap: .85rem;
}

.otp-request-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.password-change-form label,
.otp-request-form label,
.employee-search-form label,
.add-user-form label,
.role-picker-form label {
    display: grid;
    gap: .3rem;
    color: #344D49;
    font-size: .9rem;
    font-weight: 700;
}

.users-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .75fr);
    gap: 1rem;
    align-items: start;
}

.users-panel .table td strong,
.users-panel .table td span {
    display: block;
}

.users-panel .table td span {
    color: #60746F;
    font-size: .8rem;
}

.add-user-panel {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 80;
    width: min(550px, calc(100vw - 48px));
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Reserve space so the fixed Add User panel does not cover the users table. */
.users-layout {
    padding-right: min(570px, 38vw);
}

@media (max-width: 1100px) {
    .add-user-panel {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
    }

    .users-layout {
        padding-right: 0;
    }
}

.role-permissions-panel {
    grid-column: 1 / -1;
}

.role-picker-form {
    max-width: 360px;
    margin-bottom: 1rem;
}

.permission-section {
    display: grid;
    gap: .6rem;
}

.permission-section h3 {
    margin: 0;
    color: var(--primary);
    font-size: .92rem;
    font-weight: 800;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .45rem;
}

.permission-grid label {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    color: var(--text);
    font-size: .84rem;
    font-weight: 750;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.permission-grid input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.permission-grid .permission-parent {
    color: var(--primary);
    background: #ECFDF5;
    border-color: #BFE9DA;
}

.permission-grid .permission-child {
    padding-left: 1.2rem;
}

@media (max-width: 780px) {
    .employee-hero,
    .employee-portal-grid,
    .employee-facts,
    .employee-action-list,
    .login-choice-grid,
    .users-layout,
    .otp-request-form {
        grid-template-columns: 1fr;
    }

    .employee-hero-meta {
        justify-items: start;
        text-align: left;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Microsoft New Tai Lue", Arial, "Helvetica Neue", "Segoe UI", sans-serif;
    color: var(--text);
    background: #F6F8FB;
}

a,
.btn-link {
    color: var(--primary);
}

a:hover,
.btn-link:hover {
    color: var(--primary-hover);
}

h1,
h2,
h3,
p {
    letter-spacing: 0;
}

h1 {
    margin: 0;
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 700;
}

h1:focus {
    outline: none;
}

.form-label {
    margin-bottom: .35rem;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 38px;
    color: var(--text);
    font-size: .84rem;
    font-weight: 500;
    background-color: var(--page);
    border-color: var(--border-strong);
    border-radius: 12px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .16rem rgba(20, 184, 166, .22);
}

.btn {
    min-height: 38px;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 800;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-primary:active {
    background-color: var(--primary-pressed) !important;
    border-color: var(--primary-pressed) !important;
}

.btn-outline-secondary {
    color: #334155;
    background: var(--soft);
    border-color: var(--border);
}

.btn-outline-secondary:hover {
    color: var(--text);
    background: var(--border);
    border-color: var(--border-strong);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #DC2626;
}

.validation-message {
    color: #DC2626;
}

.employee-id-availability {
    display: block;
    margin-top: .35rem;
    padding-inline: .15rem;
    color: #64748B;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
}

.employee-id-availability[hidden] {
    display: none !important;
}

.employee-id-availability.is-available {
    color: #0F766E;
}

.employee-id-availability.is-duplicate {
    color: #DC2626;
}

.employee-id-availability.is-unavailable {
    color: #A16207;
}

form[data-employee-edit-tabs] .employee-id-field.has-employee-id-duplicate > span:first-child {
    color: #DC2626 !important;
}

form[data-employee-edit-tabs] .employee-id-field .is-employee-id-duplicate {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

.blazor-error-boundary {
    color: #334155;
    background: #B91C1C;
    border-radius: 12px;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.login-shell {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
}

.login-only-layout {
    min-height: 100vh;
    grid-template-columns: 1fr;
    background: #F4F7FA;
}

.login-only-layout main,
.login-only-layout .content {
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
}

.login-only-layout .login-shell {
    min-height: 100vh;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(15, 118, 110, .08), transparent 34%),
        #F4F7FA;
}

.login-panel {
    position: relative;
    width: min(430px, 100%);
    overflow: hidden;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.login-only-layout .login-panel {
    width: min(430px, calc(100vw - 2rem));
    padding: 2rem 1.6rem 1.55rem;
    border: 1px solid #E5ECF3;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .16);
}

.login-beta-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    pointer-events: none;
}

.login-beta-ribbon > span {
    position: absolute;
    top: 1.75rem;
    left: -2.25rem;
    display: block;
    width: 10.2rem;
    padding: .46rem 0;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 4px 10px rgba(194, 65, 12, .28);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .035em;
    text-align: center;
    transform: rotate(-45deg);
}

.login-brand {
    display: grid;
    justify-items: center;
    text-align: center;
}

.login-brand img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    padding: .42rem;
    margin-bottom: .9rem;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}

.login-brand p {
    margin: 0;
    color: #4F6B93;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.login-brand strong {
    display: block;
    margin-top: .25rem;
    color: #111827;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.login-title {
    margin: 1rem 0 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid #E6ECF3;
    text-align: center;
}

.login-title h1 {
    margin: 0;
    color: #111827;
    font-size: 1.35rem;
    font-weight: 700;
}

.login-title p {
    margin: .35rem 0 0;
    color: #64748B;
    font-size: .86rem;
    font-weight: 500;
}

.eyebrow {
    margin-bottom: .25rem;
    color: #4F6B93;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-only-layout .login-form {
    gap: .82rem;
}

.login-only-layout .login-form .form-label {
    margin-bottom: .32rem;
    color: #24314A;
    font-size: .78rem;
    font-weight: 500;
}

.login-only-layout .login-form .form-control {
    min-height: 42px;
    padding: .6rem .82rem;
    color: #1F2937;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid #C9D5E3;
    border-radius: 12px;
    background: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-only-layout .login-form .form-control:hover {
    border-color: #9DB0C5;
    background: #FFFFFF;
}

.login-only-layout .login-form .form-control:focus {
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    outline: none;
}

.login-actions {
    display: grid;
    grid-template-columns: minmax(86px, .75fr) minmax(120px, 1fr);
    gap: .65rem;
    justify-content: end;
    margin-top: 1.15rem;
}

.login-actions .btn {
    min-height: 38px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 650;
}

.login-actions .btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
}

.login-actions .btn-primary:hover,
.login-actions .btn-primary:focus-visible {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.login-actions .btn-light {
    color: #334155;
    border-color: transparent;
    background: #E8ECF1;
}

.login-actions .btn-light:hover,
.login-actions .btn-light:focus-visible {
    color: #111827;
    background: #DDE3EA;
}

.database-setup-panel {
    width: min(520px, 100%);
}

.setup-help {
    margin: .25rem 0 1.1rem;
    color: var(--muted);
    font-size: .92rem;
}

.database-auth-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #F8FAFC;
    color: var(--text);
    font-weight: 700;
}

.database-auth-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.database-auth-fields {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.database-setup-actions,
.login-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
}

.login-secondary-actions {
    margin-top: 1rem;
    color: var(--muted);
    font-size: .82rem;
}

.login-secondary-actions a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

.login-secondary-actions span {
    text-align: right;
}

@media (max-width: 640px) {
    .database-auth-fields,
    .database-setup-actions,
    .login-secondary-actions {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .login-secondary-actions span {
        text-align: left;
    }
}

.page {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F8FAFC;
    overflow: hidden;
}

main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sidebar {
    background: var(--sidebar);
    border-right: 1px solid var(--border);
}

.brand-panel {
    min-height: 188px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.65rem 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.brand-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    color: #0F172A;
    text-align: center;
    text-decoration: none;
}

.brand-logo {
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 124px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, .68);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
}

.brand-logo img {
    width: 116px;
    height: 116px;
    object-fit: contain;
}

.brand-copy {
    display: none;
}

.brand-link strong {
    display: block;
    color: #0F172A;
    font-size: 1rem;
    line-height: 1.1;
}

.brand-link small {
    display: block;
    margin-top: .2rem;
    color: #64748B;
    font-size: .78rem;
}

.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.35rem;
    color: #334155;
    position: absolute;
    top: 1.35rem;
    right: 1rem;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 12px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2851,65,85,.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.55rem rgba(255, 255, 255, .94);
}

.navbar-toggler:checked {
    background-color: rgba(15, 23, 42, .08);
}

.nav-scrollable {
    display: none;
    padding: .75rem;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

.nav-section-title {
    margin: .75rem .7rem .45rem;
    color: #64748B;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nav-cos-break {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .85rem .7rem .45rem;
    color: #64748B;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
}

.nav-cos-break::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: rgba(148, 163, 184, .55);
}

.nav-item {
    margin-bottom: .25rem;
}

.nav-item .nav-link,
.nav-reports-toggle {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .65rem .75rem;
    color: #334155;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.nav-reports-toggle {
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
}

.nav-reports-toggle:hover,
.nav-reports-toggle:focus {
    color: #0F172A;
    background: rgba(15, 23, 42, .06);
    outline: none;
}

.nav-item a.active {
    color: #FFFFFF;
    background: var(--primary);
    box-shadow: 0 10px 24px rgba(15, 118, 110, .18);
}

.nav-item .nav-link:hover {
    color: #0F172A;
    background: rgba(15, 23, 42, .06);
}

.nav-item a.active:hover {
    color: #FFFFFF;
    background: var(--primary-hover);
}

.nav-reports-group {
    margin-bottom: .25rem;
}

.nav-reports-toggle {
    list-style: none;
    cursor: pointer;
}

.nav-reports-toggle::-webkit-details-marker {
    display: none;
}

.nav-submenu {
    display: none;
    gap: .2rem;
    margin: .4rem 0 .65rem 1.55rem;
    padding-left: .65rem;
    border-left: 1px solid rgba(148, 163, 184, .35);
}

.nav-reports-group[open] .nav-submenu {
    display: grid;
}

.nav-reports-group[open] .nav-reports-toggle {
    color: #FFFFFF;
    background: var(--primary);
    box-shadow: 0 10px 24px rgba(15, 118, 110, .18);
}

.nav-submenu-link {
    min-height: 34px;
    display: flex;
    align-items: center;
    width: calc(100% - .25rem);
    padding: .45rem .7rem;
    color: #64748B;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.nav-submenu-link:hover,
.nav-submenu-link.active {
    color: var(--primary);
    background: var(--teal-soft);
}

.nav-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    background-color: currentColor;
    opacity: .95;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.home {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.dashboard {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
}

.icon-download {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}

.records {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 7h6v10h-6z'/%3E%3Cpath d='M2 7h6v10H2z'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

.leave {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2Z'/%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M8 13h4'/%3E%3Cpath d='M8 17h8'/%3E%3C/svg%3E");
}

.reports {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
}

.signin,
.signout {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

.top-row {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.35rem;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.system-title strong {
    display: block;
    color: #001A41;
    font-size: 1.46rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.system-title span {
    display: block;
    color: #536A8F;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.top-account-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.account-notification-area {
    position: relative;
}

.notification-button {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #334155;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.notification-button .lucide-icon {
    width: 1.45rem;
    height: 1.45rem;
    flex-basis: 1.45rem;
}

.notification-button:hover,
.notification-button:focus-visible {
    color: var(--primary);
    background: #F8FAFC;
    outline: none;
}

.hr-tools-button {
    color: #0F766E;
    border-color: #BFE4DF;
    background: linear-gradient(145deg, #FFFFFF, #ECFDF8);
}

.hr-tools-button .icon-toolbox {
    width: 1.5rem;
    height: 1.5rem;
    flex-basis: 1.5rem;
}

.hr-tools-modal {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
}

.hr-tools-dialog {
    width: min(590px, calc(100vw - 2rem));
    max-height: min(620px, calc(100svh - 2rem));
    overflow: auto;
    border: 1px solid #D8E3ED;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 26px 62px rgba(15, 23, 42, .26);
    outline: none;
}

.hr-tools-dialog.is-exporter {
    width: min(920px, calc(100vw - 2rem));
    max-height: min(780px, calc(100svh - 2rem));
}

.hr-tools-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: .85rem 1rem .85rem 1.2rem;
    border-bottom: 1px solid #E5EDF4;
}

.hr-tools-dialog-header h2 {
    margin: 0;
    color: #0F766E;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

.hr-tools-dialog-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.hr-tools-back {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #D8E3ED;
    border-radius: 6px;
    color: #0F766E;
    background: #F4FBFA;
}

.hr-tools-back:hover,
.hr-tools-back:focus-visible {
    border-color: #0F8B84;
    background: #E9F8F5;
    outline: none;
}

.hr-tools-exporter-shell {
    padding: 1rem;
}

.hr-tools-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #64748B;
    background: #F1F5F9;
}

.hr-tools-close:hover,
.hr-tools-close:focus-visible {
    color: #0F172A;
    background: #E2E8F0;
    outline: none;
}

.hr-tools-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
    padding: 1rem;
}

.hr-tool-panel {
    overflow: hidden;
    border: 1px solid #DCE6EF;
    border-radius: 8px;
    background: #FFFFFF;
}

.hr-tool-card {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 0;
    border-radius: 0;
    color: #1E293B;
    background: #FFFFFF;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s ease;
}

.hr-tool-card-link {
    text-decoration: none;
}

.hr-tool-card:hover,
.hr-tool-card:focus-visible,
.hr-tool-panel.is-open .hr-tool-card {
    background: #F4FBFA;
    outline: none;
}

.hr-tool-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0F766E;
    background: #E9F8F5;
}

.hr-tool-card-icon .lucide-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

.hr-tool-card-copy {
    min-width: 0;
    display: grid;
    gap: .18rem;
}

.hr-tool-card-copy strong {
    color: #102033;
    font-size: .88rem;
    font-weight: 760;
    line-height: 1.25;
}

.hr-tool-card-copy small {
    color: #64748B;
    font-size: .74rem;
    font-weight: 700;
}

.hr-tool-card-arrow {
    color: #94A3B8;
    transition: transform .18s ease;
}

.hr-tool-panel.is-open .hr-tool-card-arrow {
    transform: rotate(90deg);
}

.hr-tool-entry-form {
    padding: 1rem;
    border-top: 1px solid #DCE6EF;
    background: #FBFDFE;
}

.hr-tool-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.hr-tool-field {
    min-width: 0;
    display: grid;
    gap: .36rem;
}

.hr-tool-field-wide {
    grid-column: 1 / -1;
}

.hr-tool-field > span {
    color: #475569;
    font-size: .76rem;
    font-weight: 720;
}

.hr-tool-field .form-control,
.hr-tool-field .form-select {
    width: 100%;
    min-height: 42px;
    border-color: #C9D7E7;
    border-radius: 6px;
    color: #172033;
    background-color: #FFFFFF;
    font-size: .86rem;
}

.hr-tool-field .form-control:focus,
.hr-tool-field .form-select:focus {
    border-color: #0F8B84;
    box-shadow: 0 0 0 3px rgba(15, 139, 132, .12);
}

.hr-tool-entry-message {
    margin: .75rem 0 0;
    padding: .55rem .65rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 680;
}

.hr-tool-entry-message.is-error {
    border: 1px solid #FECACA;
    color: #B91C1C;
    background: #FEF2F2;
}

.hr-tool-entry-message.is-success {
    border: 1px solid #A7F3D0;
    color: #065F46;
    background: #ECFDF5;
}

.hr-tool-entry-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .9rem;
}

.hr-tool-entry-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.hr-tool-entry-actions .lucide-icon {
    width: 1rem;
    height: 1rem;
    flex-basis: 1rem;
}

body:has(.hr-tools-modal) {
    overflow: hidden;
}

.notification-menu {
    position: relative;
}

.notification-menu > summary {
    position: relative;
    cursor: pointer;
    list-style: none;
}

.notification-menu > summary::-webkit-details-marker {
    display: none;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 .24rem;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    color: #FFFFFF;
    background: #DC2626;
    font-size: .64rem;
    font-weight: 850;
    line-height: 1;
}

.notification-panel {
    position: absolute;
    top: calc(100% + .7rem);
    right: 0;
    z-index: 12000;
    width: min(340px, calc(100vw - 2rem));
    max-height: min(440px, calc(100vh - 120px));
    overflow: auto;
    padding: .8rem;
    border: 1px solid #DDE7EA;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .18);
}

.notification-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .1rem .12rem .72rem;
    border-bottom: 1px solid #EEF2F4;
}

.notification-panel header strong {
    color: #0F172A;
    font-size: .94rem;
    font-weight: 760;
}

.notification-panel header button {
    border: 0;
    color: var(--primary);
    background: transparent;
    font-size: .76rem;
    font-weight: 720;
}

.notification-list {
    display: grid;
    gap: .55rem;
    padding-top: .7rem;
}

.notification-item {
    display: grid;
    gap: .22rem;
    width: 100%;
    padding: .72rem .76rem;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    color: #334155;
    background: #FFFFFF;
    font: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.notification-item:hover,
.notification-item:focus-visible {
    border-color: #A7DCD3;
    background: #F8FFFD;
    outline: none;
    transform: translateY(-1px);
}

.notification-item.is-unread {
    border-color: #B7E6DD;
    background: #F0FDFA;
}

.notification-item strong {
    color: #102033;
    font-size: .86rem;
    font-weight: 760;
}

.notification-item span {
    color: #475569;
    font-size: .8rem;
    line-height: 1.35;
}

.notification-item small {
    color: #718096;
    font-size: .72rem;
    font-weight: 650;
}

.notification-empty {
    display: grid;
    gap: .2rem;
    padding: 1.45rem .6rem 1rem;
    color: #64748B;
    text-align: center;
}

.notification-empty strong {
    color: #334155;
    font-size: .88rem;
    font-weight: 760;
}

.notification-empty span {
    font-size: .78rem;
}

.employee-mobile-notification-menu {
    display: grid;
    place-items: center;
}

.employee-mobile-notification-menu .notification-panel {
    right: -4.1rem;
    width: min(310px, calc(100vw - 2rem));
    max-height: min(390px, calc(100svh - 150px));
    border-radius: 16px;
}

.employee-mobile-notification-menu .notification-badge {
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    font-size: .58rem;
}

.saved-notification {
    position: absolute;
    top: calc(100% + .45rem);
    right: -11.5rem;
    z-index: 45;
    min-width: 13.5rem;
    padding: .62rem .8rem;
    color: #064E3B;
    border: 1px solid #A7F3D0;
    border-radius: 10px;
    background: #ECFDF5;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    pointer-events: none;
    animation: savedNotificationFade 4.2s ease forwards;
}

.beta-welcome-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.beta-welcome-dialog {
    position: relative;
    width: min(31rem, calc(100vw - 2rem));
    overflow: hidden;
    color: #273548;
    border: 1px solid #d3e2e5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 28px 75px rgba(15, 23, 42, .3);
    text-align: center;
    animation: betaWelcomeEnter .24s ease-out both;
}

.beta-welcome-content {
    padding: 2.35rem 2rem 1.55rem;
}

.beta-welcome-dialog h1 {
    margin: 0;
    color: #132238;
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.25;
}

.beta-welcome-dialog p {
    margin: .85rem 0 0;
    color: #5c6c80;
    font-size: .9rem;
    line-height: 1.6;
}

.beta-welcome-actions {
    display: flex;
    justify-content: center;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #e1eaee;
    background: #f8fbfb;
}

.beta-welcome-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: .68rem 1.35rem;
    color: #fff;
    border: 1px solid #0f766e;
    border-radius: 9px;
    background: #0f766e;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .2);
    font-size: .88rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.beta-welcome-ok:disabled {
    cursor: wait;
    opacity: .65;
    box-shadow: none;
}

.beta-welcome-ok:not(:disabled):hover,
.beta-welcome-ok:focus-visible {
    color: #fff;
    border-color: #0a8d82;
    background: #0a8d82;
    transform: translateY(-1px);
}

@keyframes betaWelcomeEnter {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes savedNotificationFade {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }

    12%,
    72% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-4px);
        visibility: hidden;
    }
}

.account-menu {
    position: relative;
}

.account-menu summary {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem .65rem .4rem .45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    cursor: pointer;
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu summary:hover,
.account-menu summary:focus-visible,
.account-menu[open] summary {
    border-color: #B7C9C5;
    background: #F8FAFC;
    outline: none;
}

.account-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    overflow: hidden;
    color: #FFFFFF;
    border-radius: 50%;
    background: linear-gradient(135deg, #0F766E, #334155);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.account-identity {
    min-width: 0;
    display: grid;
    gap: .05rem;
}

.account-identity strong {
    max-width: 220px;
    overflow: hidden;
    color: var(--text);
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identity small {
    max-width: 220px;
    overflow: hidden;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-chevron {
    width: .9rem;
    height: .9rem;
    flex: 0 0 .9rem;
    color: #334155;
    transition: transform .16s ease;
}

.account-menu[open] .account-chevron {
    transform: rotate(180deg);
}

.account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    z-index: 40;
    min-width: 190px;
    padding: .45rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .14);
}

.account-menu-panel a {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: .55rem .7rem;
    color: #B91C1C;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 900;
    text-decoration: none;
}

.account-menu-panel a:hover,
.account-menu-panel a:focus-visible {
    background: #FEF2F2;
    outline: none;
}

.content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-heading p {
    margin: .3rem 0 0;
    color: var(--muted);
    font-size: .88rem;
}

.content-panel {
    margin: 1rem 0;
    padding: 1.15rem;
    border: 1px solid #E6ECF3;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.content.organization-structure-content:has(.organization-structure-shell) {
    width: 100%;
    height: calc(100dvh - 72px);
    display: flex;
    flex-direction: column;
    max-width: none;
    overflow: hidden;
    padding-right: 0;
    padding-bottom: 0;
}

.content.organization-structure-content:has(.organization-structure-shell) .page-heading {
    flex: 0 0 auto;
}

.content.organization-structure-content:has(.organization-structure-shell) .organization-structure-shell {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

@media (min-width: 721px) {
    html:has(.organization-structure-shell),
    body:has(.organization-structure-shell) {
        height: 100%;
        overflow: hidden;
    }

    .page:has(.organization-structure-shell) {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    .page:has(.organization-structure-shell) main {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
}

.content-panel h2,
.content-panel h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 650;
}

.user-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1rem;
}

.user-summary dt {
    color: var(--muted);
}

.user-summary dd {
    margin: 0;
    font-weight: 700;
}

.access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}

.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 96px;
    padding: .9rem 1rem .85rem 1.15rem;
    border: 1px solid #E5EAF1;
    border-radius: 14px;
    color: var(--text);
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--card-bg, var(--primary));
}

.metric-card span,
.metric-card small {
    color: #64748B;
    font-size: .76rem;
    font-weight: 650;
    text-transform: none;
}

.metric-card.total span {
    color: #64748B;
}

.metric-card strong {
    display: block;
    margin-top: .34rem;
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 720;
}

.status-meter {
    height: .35rem;
    margin: .5rem 0 .25rem;
    overflow: hidden;
    border-radius: 999px;
    background: #E5E7EB;
}

.status-meter span {
    display: block;
    height: 100%;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 430px);
    gap: 1rem;
    align-items: stretch;
}

.dashboard-top-grid {
    align-items: stretch;
    height: 590px;
    max-height: 590px;
}

.dashboard-primary {
    min-width: 0;
}

.dashboard-top-primary {
    display: flex;
    flex-direction: column;
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(390px, 1fr) minmax(240px, .58fr);
    gap: 1rem;
    align-items: start;
}

.dashboard-tasks-panel {
    height: 590px;
    max-height: 590px;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
}

.dashboard-tasks-panel .task-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    padding-right: .15rem;
}

.new-hired-chart-panel,
.gender-panel {
    min-height: 340px;
    height: 340px;
    display: flex;
    flex-direction: column;
}

.newly-hired-table-panel {
    width: 100%;
    margin-top: 1rem;
}

.new-hired-chart {
    display: grid;
    gap: .65rem;
    flex: 1;
}

.chart-year-picker,
.dashboard-picker {
    position: relative;
    z-index: 5;
}

.chart-year-select,
.dashboard-picker-button {
    width: 120px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .42rem 2rem .42rem .75rem;
    border: 1px solid #DDE5EE;
    border-radius: 12px;
    color: var(--text);
    font-family: "Microsoft New Tai Lue", Arial, "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: .82rem;
    font-weight: 600;
    background-color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .045);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.dashboard-picker-button {
    width: 100%;
}

.chart-year-select::after,
.dashboard-picker-button::after {
    content: "";
    width: .55rem;
    height: .55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .78;
}

.chart-year-select:hover,
.dashboard-picker-button:hover,
.chart-year-picker.is-open .chart-year-select,
.dashboard-picker.is-open .dashboard-picker-button {
    border-color: var(--primary);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 .16rem rgba(20, 130, 118, .16), 0 10px 20px rgba(15, 23, 42, .08);
}

.chart-year-menu,
.dashboard-picker-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    width: 120px;
    max-height: 190px;
    overflow-y: auto;
    padding: .28rem;
    border: 1px solid #DDE5EE;
    border-radius: 13px;
    background: #FFFFFF;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
}

.dashboard-picker-menu {
    width: 100%;
    max-height: 190px;
}

.chart-year-menu button,
.dashboard-picker-menu button {
    width: 100%;
    min-height: 34px;
    display: block;
    padding: .38rem .65rem;
    color: var(--text);
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
}

.chart-year-menu button:hover,
.chart-year-menu button.is-selected,
.dashboard-picker-menu button:hover,
.dashboard-picker-menu button.is-selected {
    color: #FFFFFF;
    background: var(--primary);
}

.new-hired-chart-frame {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: .55rem;
    min-height: 0;
}

.new-hired-y-axis {
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: .95rem;
    padding-bottom: .15rem;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    text-align: right;
}

.new-hired-plot {
    position: relative;
    height: 220px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .65rem;
    align-items: end;
    padding: 1rem .5rem .25rem;
    border-bottom: 1px solid #DDE5EE;
    background:
        linear-gradient(to top, #EEF2F7 1px, transparent 1px) 0 0 / 100% 25%;
}

.month-bar {
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: .18rem;
}

.month-bar .bar {
    width: min(15px, 36%);
    min-height: 2px;
    border-radius: 999px 999px 0 0;
    transition: transform .15s ease, filter .15s ease;
}

.month-bar .bar:hover {
    transform: translateY(-3px);
    filter: saturate(1.12);
}

.month-bar .regular {
    background: #38BDF8;
}

@media (max-width: 1320px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-top-grid {
        height: auto;
        max-height: none;
    }

    .dashboard-tasks-panel {
        height: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    .dashboard-tasks-panel .task-list {
        max-height: 360px;
    }
}

@media (max-width: 980px) {
    .dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .new-hired-chart-panel,
    .gender-panel {
        height: auto;
        min-height: 320px;
    }

    .dashboard-main-grid,
    .dashboard-overview-grid,
    .metric-grid {
        min-width: 0;
    }
}

@media (max-width: 860px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.month-bar .casual {
    background: #F97316;
}

.month-labels {
    display: grid;
    grid-template-columns: 32px repeat(12, minmax(0, 1fr));
    gap: .65rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

.gender-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.gender-panel-body {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(82px, 96px);
    gap: .35rem;
    align-items: center;
}

.gender-side-tools {
    display: grid;
    justify-items: end;
    gap: .65rem;
    align-self: center;
    justify-self: end;
    width: 100%;
    padding-top: 0;
}

.gender-status-select {
    min-width: 120px;
    max-width: 260px;
    min-height: 38px;
    padding: .42rem 2.15rem .42rem .75rem;
    border: 1px solid #D8DEE8;
    border-radius: 13px;
    color: var(--text);
    font-family: "Microsoft New Tai Lue", Arial, "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: .82rem;
    font-weight: 600;
    background-color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(15, 23, 42, .06);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.gender-status-select:focus {
    border-color: var(--primary);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 .16rem rgba(20, 130, 118, .16), 0 10px 20px rgba(15, 23, 42, .08);
}

.gender-pie-area {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .35rem;
    padding: 0;
    min-width: 0;
    min-height: 0;
}

.gender-pie-wrap {
    position: relative;
    width: min(300px, 100%);
    aspect-ratio: 1;
}

.gender-pie-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 14px 24px rgba(15, 23, 42, .10));
    transform-origin: center;
    transition: opacity .22s ease, transform .22s ease;
}

.gender-pie-wrap.is-updating .gender-pie-svg {
    opacity: .32;
    transform: scale(.96);
}

.gender-slice {
    cursor: pointer;
    fill-rule: evenodd;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .18s ease, filter .18s ease;
}

.gender-slice:hover {
    transform: translate(var(--slice-x), var(--slice-y));
    filter: saturate(1.08) brightness(1.02);
}

.gender-pie-tooltip {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    min-width: 120px;
    padding: .45rem .65rem;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
    color: var(--text);
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
    transform: translate(-50%, -120%) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.gender-pie-wrap.is-slice-hovered .gender-pie-tooltip {
    opacity: 1;
    transform: translate(-50%, -120%) scale(1);
}

.gender-donut-total {
    fill: var(--text);
    font-size: 13px;
    font-weight: 700;
    dominant-baseline: middle;
    pointer-events: none;
}

.gender-pie-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    color: #334155;
    font-size: .84rem;
    font-weight: 600;
    text-align: left;
}

.gender-pie-legend span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.gender-pie-legend i {
    width: .5rem;
    height: .5rem;
    display: inline-flex;
    border-radius: 999px;
}

.gender-pie-legend .male {
    background: #38BDF8;
}

.gender-pie-legend .female {
    background: #EC4899;
}

.task-list {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: .7rem;
}

.task-item {
    display: grid;
    gap: .5rem;
    min-height: 118px;
    max-height: 150px;
    padding: .72rem .78rem;
    color: var(--text);
    text-decoration: none;
    border: 1px solid #DDE5EE;
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.task-item:hover {
    border-color: var(--primary);
    background: #F8FEFC;
}

.task-type-label {
    width: max-content;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 760;
    text-transform: none;
}

.task-process-link {
    color: var(--text);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
}

.task-process-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.task-item strong {
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.25;
}

.task-item small {
    color: var(--muted);
    font-size: .78rem;
}

.task-actions,
.task-title-row {
    margin-top: .1rem;
}

.task-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    align-items: center;
}

.task-link-button {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .22rem .52rem;
    color: #FFFFFF;
    border-radius: 999px;
    background: var(--primary);
    font-size: .72rem;
    font-weight: 720;
    text-decoration: none;
}

.task-link-button:hover {
    color: #FFFFFF;
    background: var(--primary-hover);
}

.task-link-button.subtle {
    width: max-content;
    margin-top: .35rem;
    color: var(--primary);
    background: #ECFDF5;
}

.task-link-button.subtle:hover {
    color: #FFFFFF;
    background: var(--primary);
}

.task-confirm {
    display: flex;
    gap: .42rem;
    align-items: center;
    justify-content: flex-start;
    margin-top: .1rem;
}

.task-confirm small {
    color: #475569;
    font-size: .74rem;
}

.task-confirm-button {
    min-height: 26px;
    padding: .2rem .5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 720;
}

.task-confirm-button.yes {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

.task-confirm-button.yes:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.task-confirm-button.no {
    color: #334155;
    background: #F8FAFC;
}

.task-confirm-button.no:hover {
    background: #E2E8F0;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.panel-heading h2 {
    margin: 0;
}

.panel-heading span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}

.dashboard-table {
    margin-bottom: 0;
    color: var(--text);
    font-size: .84rem;
}

.dashboard-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    background: var(--page);
    border-bottom: 1px solid var(--border);
}

.dashboard-table thead th span {
    display: block;
    margin-bottom: .35rem;
}

.dashboard-table tbody td {
    vertical-align: middle;
    border-color: #F1F5F9;
}

.dashboard-table tbody tr:hover td {
    background: var(--teal-soft);
}

.dashboard-table td strong {
    font-weight: 650;
}

.dashboard-table td small {
    display: block;
    color: var(--muted);
    font-size: .78rem;
}

.employee-link {
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
}

.employee-link strong {
    font-weight: 650;
}

.employee-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.employee-filter-form {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: .85rem;
    align-items: center;
    min-width: 0;
}

.records-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: .85rem;
}

.records-search-form {
    display: contents;
}

.records-result-count {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
    white-space: nowrap;
}

.personnel-panel-heading {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.personnel-panel-heading h2 {
    margin: 0;
    color: var(--primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: normal;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.personnel-panel-heading .records-result-count {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

[data-personnel-add-loading].is-personnel-add-loading {
    pointer-events: none;
    cursor: wait;
    opacity: .78;
}

[data-personnel-add-loading].is-personnel-add-loading .salary-annex-settings-icon {
    color: transparent !important;
    font-size: 0 !important;
}

[data-personnel-add-loading].is-personnel-add-loading .salary-annex-settings-icon::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(15, 118, 110, .2);
    border-top-color: #0F766E;
    border-radius: 50%;
    animation: personnel-add-button-spin .65s linear infinite;
}

@keyframes personnel-add-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    [data-personnel-add-loading].is-personnel-add-loading .salary-annex-settings-icon::before {
        animation: none;
        border-color: #0F766E;
    }
}

.search-composer {
    position: relative;
    justify-self: end;
}

.animated-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    justify-self: end;
    width: 34px;
    max-width: 100%;
    overflow: visible;
    transition: width .22s ease;
    column-gap: .5rem;
}

.animated-search.is-open {
    width: min(260px, 100%);
}

.animated-search .form-control {
    grid-column: 1;
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: width .22s ease, opacity .16s ease, padding .18s ease, border-color .18s ease;
}

.animated-search.is-open .form-control {
    width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
    border-color: var(--border-strong);
    opacity: 1;
    pointer-events: auto;
}

.search-toggle-button {
    grid-column: 2;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--icon);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.search-toggle-button::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.search-toggle-button:hover,
.search-toggle-button:focus-visible,
.animated-search.is-open .search-toggle-button {
    color: var(--icon-hover);
    background: #F1F5F9;
    border-color: var(--border-strong);
    outline: none;
}

.search-toggle-button:active {
    background: #E2E8F0;
    transform: scale(.96);
}

.search-suggestions {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    top: calc(100% + .35rem);
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .14);
}

.search-suggestions.is-open {
    display: grid;
    gap: .2rem;
}

.search-suggestions .search-suggestion {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: .4rem .55rem;
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
    text-align: left;
    background: transparent;
    border: 0 !important;
    border-radius: 8px;
    font-family: inherit;
}

.search-suggestions .search-suggestion:hover,
.search-suggestions .search-suggestion:focus {
    background: var(--teal-soft);
    outline: none;
}

.filter-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.icon-button,
.filter-toggle-button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--icon);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.icon-button:hover,
.icon-button:focus-visible,
.filter-toggle-button:hover,
.filter-toggle-button:focus-visible,
.filter-toggle-button[aria-expanded="true"] {
    color: var(--icon-hover);
    background: #F1F5F9;
    border-color: var(--border-strong);
    outline: none;
}

.icon-button:active,
.filter-toggle-button:active {
    transform: scale(.96);
}

.filter-slide-panel {
    position: relative;
    z-index: 30;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) minmax(210px, 1.35fr) minmax(130px, .82fr) minmax(130px, .82fr) minmax(190px, 1.1fr) minmax(160px, 1fr);
    gap: .65rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    max-height: 0;
    margin-top: 0;
    padding: 0 .75rem;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    border: 1px solid transparent;
    border-radius: 12px;
    background: #F8FAFC;
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
    transition:
        max-height .34s cubic-bezier(.22, 1, .36, 1),
        opacity .22s ease,
        visibility .22s ease,
        transform .28s cubic-bezier(.22, 1, .36, 1),
        padding .28s ease,
        margin .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.filter-slide-panel.is-open {
    z-index: 60;
    max-height: 240px;
    margin-top: .45rem;
    padding: 1rem .75rem .75rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    border-color: var(--border);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .12);
    overflow: visible;
}

.filter-slide-panel.is-animating {
    overflow: hidden;
}

.filter-slide-panel.is-open.has-open-select {
    max-height: 240px;
    padding-bottom: .75rem;
}

.filter-slide-panel > * {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.filter-slide-panel.is-open > * {
    opacity: 1;
    transform: translateY(0);
}

.filter-slide-panel.is-open > *:nth-child(1) { transition-delay: .03s; }
.filter-slide-panel.is-open > *:nth-child(2) { transition-delay: .055s; }
.filter-slide-panel.is-open > *:nth-child(3) { transition-delay: .08s; }
.filter-slide-panel.is-open > *:nth-child(4) { transition-delay: .105s; }
.filter-slide-panel.is-open > *:nth-child(5) { transition-delay: .13s; }
.filter-slide-panel.is-open > *:nth-child(6) { transition-delay: .155s; }

.filter-slide-panel label {
    position: relative;
    display: block;
    min-width: 0;
    padding-top: .58rem;
}

.filter-slide-panel label > span {
    position: absolute;
    top: .22rem;
    left: .58rem;
    z-index: 3;
    display: inline-flex;
    max-width: calc(100% - 1.44rem);
    padding: 0 .26rem;
    margin: 0;
    color: #0F766E;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    background: #F8FAFC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
}

.filter-slide-panel .form-select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: .43rem 2.18rem .43rem .78rem;
    color: #5B6474;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    background-color: #FFFFFF;
    background-image: none !important;
    border: 2px solid #0F766E;
    border-radius: 5px;
    box-shadow: none;
}

.filter-slide-panel .form-select:hover,
.filter-slide-panel .form-select:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(9, 168, 182, .1);
    outline: none;
}

.filter-slide-panel.is-open {
    overflow: visible;
}

.filter-slide-panel select.form-select {
    appearance: auto;
}

.filter-slide-panel select.form-select option {
    color: #374151;
    background: #FFFFFF;
}

.filter-slide-panel select.form-select:not(.is-native-hidden) {
    display: block;
}

.employee-filter-form select.smooth-select.is-native-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.report-search-form .filter-slide-panel {
    grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1.35fr) minmax(130px, .78fr) minmax(130px, .78fr) minmax(150px, .9fr) minmax(170px, 1fr);
}

.report-search-form .report-filter-personnel-records {
    grid-template-columns: minmax(300px, 1.75fr) minmax(300px, 1.75fr) minmax(160px, .78fr) minmax(160px, .78fr) minmax(210px, 1fr);
}

.report-search-form .report-filter-loyalty-pay {
    grid-template-columns: minmax(330px, 1.9fr) minmax(330px, 1.9fr) minmax(150px, .78fr) minmax(150px, .78fr) minmax(210px, 1fr);
}

.report-search-form .report-filter-retirement {
    grid-template-columns: minmax(360px, 1.9fr) minmax(360px, 1.9fr) minmax(170px, .8fr) minmax(190px, .9fr);
}

.report-search-form .report-filter-step-increment {
    grid-template-columns: minmax(280px, 1.6fr) minmax(280px, 1.6fr) minmax(135px, .7fr) minmax(135px, .7fr) minmax(190px, 1fr);
}

.service-record-filter-panel {
    grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1.35fr) minmax(200px, 1.1fr) minmax(160px, 1fr);
}

.report-header .filter-slide-panel {
    position: relative;
    z-index: 100;
    align-items: start;
    background: #F8FAFC;
}

.report-header .filter-slide-panel.is-open {
    margin-bottom: .45rem;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .1);
}

.report-header .filter-slide-panel .smooth-select {
    width: 100%;
    min-width: 0;
    border-color: #CBD5E1;
    border-radius: 13px;
}

.cos-filter-panel {
    grid-template-columns: minmax(210px, 1.25fr) minmax(210px, 1.2fr) minmax(210px, 1.2fr) minmax(190px, 1.05fr) minmax(160px, .9fr);
}

.cos-export-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(4px);
}

.cos-export-modal[hidden] {
    display: none;
}

.cos-export-dialog {
    width: min(520px, calc(100vw - 2rem));
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.cos-export-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cos-export-header h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 800;
}

.cos-export-header span {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.cos-export-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--icon);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
}

.cos-export-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.cos-export-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
    color: var(--text);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 800;
}

.cos-export-switch {
    position: relative;
    width: 36px;
    height: 22px;
    flex: 0 0 36px;
}

.cos-export-switch input {
    position: absolute;
    opacity: 0;
}

.cos-export-switch span {
    position: absolute;
    inset: 0;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    background: #E2E8F0;
    transition: background-color .16s ease, border-color .16s ease;
}

.cos-export-switch span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transform: translateY(-50%);
    transition: transform .16s ease;
}

.cos-export-switch input:checked + span {
    background: #BBF7D0;
    border-color: #86EFAC;
}

.cos-export-switch input:checked + span::after {
    transform: translate(14px, -50%);
}

.cos-export-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

.sortable-header {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sortable-header:hover,
.sortable-header:focus-visible,
.sortable-header.is-active {
    color: var(--primary);
    text-decoration: underline;
    outline: none;
}

.employee-records-table-wrap {
    max-height: none;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #F1F5F9;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.employee-records-table {
    min-width: 1060px;
}

.employee-records-table td[data-label="Employee Name"],
.employee-records-table td[data-label="Position / Department"] {
    min-width: 220px;
}

.center-cell {
    text-align: center;
}

.action-cell {
    text-align: center;
}

.report-table th.center-cell,
.report-table td.center-cell,
.report-table th.action-cell,
.report-table td.action-cell {
    text-align: center;
}

.report-table td.action-cell .row-actions,
.report-table th.action-cell .row-actions {
    justify-content: center;
}

/* Employee Records table alignment refinement */
.employee-records-table th.sg-cell,
.employee-records-table td.sg-cell {
    text-align: left;
}

.employee-records-table th.salary-cell,
.employee-records-table td.salary-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.employee-records-table th.center-cell,
.employee-records-table td.center-cell,
.employee-records-table th.action-cell,
.employee-records-table td.action-cell {
    text-align: center;
}

.employee-records-table td.action-cell .row-actions {
    justify-content: center;
}

.employee-records-table th.sg-cell .sortable-header,
.employee-records-table th.salary-cell .sortable-header {
    display: inline-block;
    width: 100%;
}

.employee-records-table th.sg-cell .sortable-header {
    text-align: left;
}

.employee-records-table th.salary-cell .sortable-header {
    text-align: right;
}

.row-actions {
    justify-content: center;
}

.employee-records-table th.action-cell,
.employee-records-table td.action-cell,
.employee-records-table th.center-cell,
.employee-records-table td.center-cell {
    text-align: center;
}

.position-text {
    display: block;
    color: var(--text);
    font-size: .88rem;
    font-weight: 400;
}

.salary-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.row-actions {
    display: flex;
    gap: .35rem;
    align-items: center;
    white-space: nowrap;
}

.inline-action-form {
    margin: 0;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    color: var(--icon);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.action-button span {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.action-button.view span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.action-button.edit span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.action-button.save span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E");
}

.action-button.add span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.action-button.present span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-5'/%3E%3C/svg%3E");
}

.action-button.separated span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m17 8 5 5'/%3E%3Cpath d='m22 8-5 5'/%3E%3C/svg%3E");
}

.action-button.delete span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.action-button.set-active span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.action-button.disable span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6'/%3E%3Cpath d='M9 9l6 6'/%3E%3C/svg%3E");
}

.action-button.view {
    color: var(--icon);
    background: #F8FAFC;
    border-color: var(--border);
}

.action-button:hover {
    color: var(--icon-hover);
    background: #F1F5F9;
    border-color: var(--border-strong);
}

.action-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.action-button.delete {
    color: var(--icon);
    background: #F8FAFC;
    border-color: var(--border);
}

.action-button.disable {
    color: #9F1239;
    background: #FFF7F9;
    border-color: #FBCFE8;
}

.action-button.disable:hover {
    color: #881337;
    background: #FFE4E6;
    border-color: #FDA4AF;
}

.action-button.is-active {
    color: #0F766E;
    background: #CCFBF1;
    border-color: #5EEAD4;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    min-width: 72px;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}

.status-pill.active {
    color: #047857;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
}

.status-pill.inactive {
    color: #B91C1C;
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.employee-mobile-list {
    display: none;
}

.employee-mobile-card {
    margin-bottom: .9rem;
    padding: 1rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #dbe7f0;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
}

.employee-mobile-topline,
.employee-mobile-name-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.employee-mobile-topline {
    justify-content: flex-start;
}

.employee-mobile-name-row {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: .55rem;
}

.employee-mobile-id {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    color: #475569;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.employee-mobile-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 26px;
    padding: .18rem .65rem;
    font-size: .76rem;
    font-weight: 950;
    border-radius: 999px;
}

.employee-mobile-status.active {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.employee-mobile-status.inactive {
    color: #be123c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.employee-mobile-label {
    display: block;
    margin-bottom: .2rem;
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.employee-mobile-name {
    display: inline-flex;
    max-width: calc(100% - 84px);
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.25;
    text-decoration: none;
}

.employee-mobile-employment {
    flex: 0 0 min(42%, 150px);
    text-align: right;
}

.employee-mobile-employment strong {
    display: block;
    color: #334155;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.2;
}

.employee-mobile-position,
.employee-mobile-office {
    padding: 0;
    color: #64748b;
    font-size: .86rem;
    font-weight: 750;
    line-height: 1.35;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.employee-mobile-position {
    margin-top: .45rem;
    color: #334155;
}

.employee-mobile-office {
    margin-top: .12rem;
}

.employee-mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .95rem;
    padding-top: .85rem;
    border-top: 1px solid #edf2f7;
}

.employee-mobile-actions .btn,
.employee-mobile-disable-form,
.employee-mobile-disable-form button {
    width: 100%;
}

.employee-mobile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 11px;
    font-size: .78rem;
    font-weight: 850;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}

.pagination-row .btn + .btn {
    margin-left: .4rem;
}

.reports-shell {
    padding: 1rem;
}

.report-workspace {
    min-width: 0;
}

.report-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 48%) auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0;
    margin-bottom: .85rem;
}

.report-header h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.05rem;
    letter-spacing: 0;
}

.report-header span {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.report-search-form {
    display: contents;
}

.report-table-wrap {
    max-height: none;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #F1F5F9;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.report-table {
    min-width: 860px;
}

.leave-ledger-shell {
    min-width: 0;
}

.leave-ledger-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leave-ledger-toolbar .records-search-form {
    display: block;
    width: auto;
    max-width: min(560px, 100%);
    margin-left: auto;
}

.leave-ledger-toolbar .leave-ledger-search {
    justify-self: end;
    width: 38px;
}

.leave-ledger-toolbar .leave-ledger-search.is-open {
    width: min(560px, calc(100vw - 3rem));
}

.leave-ledger-table-wrap {
    max-height: none;
    overflow-x: auto;
    border: 1px solid #F1F5F9;
    border-radius: 14px;
}

.leave-ledger-table {
    min-width: 1420px;
}

.leave-ledger-table td:nth-child(3),
.leave-ledger-table td:nth-child(7),
.leave-ledger-table td:nth-child(8) {
    min-width: 190px;
}

.leave-ledger-table tbody tr:nth-child(even) td {
    background: #F8FAFC;
}

.leave-ledger-table .leave-section-divider {
    border-left: 3px solid #CBD5E1;
}

.leave-ledger-table .leave-balance-cell {
    font-weight: 900;
}

.leave-ledger-empty {
    min-height: 140px;
}

.leave-applications-table-wrap {
    overflow-x: auto;
    border: 1px solid #F1F5F9;
    border-radius: 14px;
}

.leave-applications-table {
    min-width: 1240px;
}

.leave-applications-table tbody tr:nth-child(even) td {
    background: #F8FAFC;
}

.service-records-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .35rem;
    min-height: calc(100vh - 126px);
}

.service-records-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.service-records-toolbar h2,
.service-employees-panel h3,
.service-record-details-heading h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.service-record-filter-form {
    display: contents;
}

.service-records-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.service-records-filter .form-select {
    min-width: 190px;
}

.service-record-filter-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-records-layout {
    display: grid;
    grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
    gap: .75rem;
    align-items: stretch;
    min-height: 0;
}

.service-employees-panel,
.service-record-details-panel {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 0;
    padding: .9rem;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
}

.service-employee-list {
    height: calc(100vh - 294px);
    min-height: 430px;
    overflow: auto;
    margin-top: .75rem;
    border: 1px solid #E2E8F0;
}

.service-employee-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .6rem;
    align-items: center;
    min-height: 36px;
    padding: .45rem .55rem;
    color: #1E293B;
    border-bottom: 1px solid #EDF2F7;
    font-size: .82rem;
    text-decoration: none;
}

.service-employee-row:hover,
.service-employee-row.is-selected {
    color: var(--text);
    background: #EEF2F7;
}

.service-employee-row span {
    color: #64748B;
    text-align: center;
    font-weight: 900;
}

.service-employee-row strong {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-record-details-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.service-record-import-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.service-record-import-form .btn {
    min-height: 30px;
    padding: .28rem .65rem;
    font-size: .74rem;
    border-radius: 9px;
}

.service-records-table-wrap {
    width: 100%;
    min-height: calc(100vh - 292px);
    overflow-x: auto;
    border: 1px solid #CBD5E1;
}

.service-records-table {
    width: 100%;
    min-width: 1360px;
    table-layout: auto;
}

.service-records-table th {
    white-space: nowrap;
}

.service-records-table td {
    padding: .3rem;
    vertical-align: middle;
}

.service-record-input {
    min-height: 30px;
    padding: .25rem .4rem;
    border-radius: 0;
    font-size: .78rem;
}

.service-record-state-control.is-empty {
    background-color: #FEF2F2;
    border-color: #F87171;
}

.service-record-state-control.is-dirty {
    background-color: #FEF9C3;
    border-color: #EAB308;
}

.service-record-date-stack {
    display: grid;
    gap: .22rem;
    min-width: 112px;
    position: relative;
}

.service-record-salary-control {
    display: grid;
    grid-template-columns: max-content auto;
    gap: .28rem;
    align-items: center;
}

.service-records-table th.salary-cell,
.service-records-table td.salary-cell {
    width: 132px;
    min-width: 132px;
    white-space: nowrap;
}

.service-records-table th.lwop-cell,
.service-records-table td.lwop-cell {
    width: 1%;
    white-space: nowrap;
}

.service-records-table td.salary-cell input[name="Salary"] {
    width: 11ch;
    text-align: right;
}

.service-records-table td.lwop-cell input[name="LWOP"] {
    width: 6.5ch;
    min-width: 6.5ch;
}

.service-records-table th:nth-child(1),
.service-records-table th:nth-child(2),
.service-records-table td:nth-child(1),
.service-records-table td:nth-child(2) {
    width: 118px;
}

.service-records-table th:nth-child(4),
.service-records-table td:nth-child(4) {
    width: 126px;
    min-width: 126px;
}

.service-record-rate-buttons {
    display: inline-grid;
    grid-template-columns: repeat(3, 26px);
    gap: .2rem;
}

.service-record-rate-button {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--muted);
    font-family: inherit;
    font-size: .62rem;
    font-weight: 900;
    font-variant: small-caps;
    line-height: 1;
    text-transform: lowercase;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #F8FAFC;
    cursor: pointer;
}

.service-record-rate-button.is-selected,
.service-record-rate-button:hover,
.service-record-rate-button:focus-visible {
    color: #0F766E;
    border-color: #5EEAD4;
    background: #CCFBF1;
    outline: none;
}

.service-record-check {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.service-record-check input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.service-record-to-label {
    position: absolute;
    left: 4px;
    bottom: -9px;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    min-width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0 .25rem;
    color: #0F766E;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    border-radius: 999px;
    background: #CCFBF1;
    transform: translateY(-2px);
}

.service-record-to-label.is-visible {
    opacity: 1;
}

.service-record-mode-button {
    width: fit-content;
    padding: .16rem .36rem;
    color: var(--primary);
    font-family: inherit;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1.1;
    border: 1px solid #99F6E4;
    border-radius: 999px;
    background: #ECFEFF;
}

.service-record-mode-button.is-selected {
    color: #7C2D12;
    border-color: #FDBA74;
    background: #FFEDD5;
}

.service-record-row-actions {
    justify-content: center;
    flex-wrap: wrap;
    width: 176px;
}

.service-record-add-row td {
    background: #F8FAFC;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
}

.status-pill.is-posted {
    color: #065F46;
    background: #D1FAE5;
}

.status-pill.is-pending {
    color: #92400E;
    background: #FEF3C7;
}

.report-print-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--icon);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}

.report-print-button:hover {
    color: var(--icon-hover);
    background: #F1F5F9;
    border-color: var(--border-strong);
}

.retirement-print-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .26);
    backdrop-filter: blur(3px);
}

.personnel-print-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .22);
}

.personnel-print-dialog {
    position: relative;
    width: min(420px, calc(100vw - 2rem));
    padding: 1.35rem;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.personnel-print-dialog h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 800;
}

.personnel-print-dialog > p {
    margin: .25rem 0 1rem;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 700;
}

.personnel-coe-panel {
    padding: .9rem;
    margin: -.35rem 0 .65rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #F8FAFC;
}

.personnel-coe-checks {
    display: grid;
    gap: .45rem;
    margin-bottom: .75rem;
    color: #0F172A;
    font-size: .86rem;
    font-weight: 700;
}

.personnel-coe-panel > label {
    display: block;
    margin: 0 0 .35rem .25rem;
    color: #334155;
    font-size: .78rem;
    font-weight: 700;
}

.coe-print-document {
    width: 8.5in;
    min-height: 11in;
    padding: .8in;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    color: #000;
}

.coe-header,
.service-record-header {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: start;
    margin-bottom: .35in;
}

.coe-header img {
    grid-column: 1 / span 2;
    width: 86px;
    height: 86px;
    justify-self: start;
    margin-left: 120px;
}

.coe-header > div,
.service-record-header > div {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.coe-header p,
.service-record-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    text-transform: uppercase;
}

.coe-header h3,
.service-record-header h3 {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
}

.coe-header h4,
.service-record-header h4 {
    margin: 24px 0 0;
    font-size: 17px;
    font-weight: 700;
}

.coe-document h2 {
    margin: .22in 0 .42in;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.coe-concern {
    margin: 0 0 .22in;
    font-size: 15px;
}

.coe-line {
    margin: 0 0 .22in;
    font-size: 15px;
    line-height: 1.65;
    text-align: justify;
    text-align-last: left;
    text-indent: .48in;
    word-spacing: .03em;
}

.coe-certify-line {
    margin-bottom: 0;
    text-align-last: justify;
}

.coe-employee-line {
    text-indent: 0;
}

.coe-purpose,
.coe-issued {
    margin-top: .08in;
}

.coe-signature {
    width: 260px;
    margin: .72in .32in 0 auto;
    text-align: center;
}

.coe-signature strong {
    display: block;
    text-decoration: underline;
}

.service-record-print-document {
    width: 8.5in;
    min-height: 13in;
    padding: .3in;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    color: #000;
    font-size: 12px;
    page: service-record-page;
}

.service-record-print-document * {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.service-record-header {
    grid-template-columns: 170px minmax(0, 1fr);
    margin-bottom: .1in;
}

.service-record-header img {
    width: 120px;
    height: 120px;
    justify-self: center;
}

.service-record-header > div {
    grid-column: 2;
    margin-top: 12px;
}

.service-record-header p {
    font-size: 18px;
    text-transform: none;
}

.service-record-header h3 {
    font-size: 20px;
}

.service-record-header h4 {
    margin-top: 0;
    font-size: 18px;
}

.service-form-no {
    margin: 0 0 0 70px;
    font-size: 14px;
}

.service-record-document h2 {
    margin: 0 0 .14in;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    text-decoration: underline;
}

.service-employee-table,
.service-record-table {
    width: 100%;
    border-collapse: collapse;
}

.service-employee-table {
    table-layout: fixed;
}

.service-employee-table td {
    padding: 1px 4px 5px;
    vertical-align: top;
    border: 0;
    line-height: 1.1;
}

.service-employee-table tr + tr td {
    padding-top: 6px;
}

.service-field-label {
    white-space: nowrap;
    vertical-align: middle;
}

.service-field-line {
    display: block;
    min-height: 14px;
    padding: 0 3px;
    overflow: hidden;
    border-bottom: 1px solid #000;
    line-height: 1.05;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-inline-fields {
    display: grid;
    align-items: end;
}

.service-name-fields {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(34px, .24fr);
    column-gap: 0;
}

.service-birth-fields {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(34px, .24fr);
    column-gap: 0;
}

.service-birth-fields > span:last-child {
    grid-column: 2 / 4;
}

.service-employee-table small {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    font-style: italic;
    line-height: 1;
    text-align: left;
}

.service-name-line {
    font-size: 12.8px;
}

.service-name-fields .service-field-line {
    padding-left: 5px;
}

.service-mi-line,
.service-birthdate-line,
.service-birthplace-line {
    font-size: 12.4px;
}

.service-note-cell {
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
}

.service-note-cell > span {
    display: block;
}

.service-maiden-name {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.05;
    text-decoration: none;
}

.service-cert-text,
.service-issued-text {
    margin: .05in 0 .04in;
    font-size: 10px;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    line-height: 1.15;
    text-align: justify;
    text-indent: .65in;
}

.service-record-table {
    border: 1px solid #000;
    font-size: 10px;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    table-layout: auto;
}

.service-date-col,
.service-status-col,
.service-lwop-col {
    width: 1%;
}

.service-salary-col {
    width: 1%;
    min-width: max-content;
}

.service-designation-col {
    width: 23%;
}

.service-office-col {
    width: 22%;
}

.service-remarks-col {
    width: 13%;
}

.service-record-table th,
.service-record-table td {
    padding: 1.5px 1.5px;
    border: .7px solid #000;
    text-align: center;
    vertical-align: middle !important;
    line-height: 1.15;
}

.service-record-table tbody td {
    padding-top: 1.5px;
    padding-bottom: 1.5px;
    vertical-align: middle !important;
}

.service-record-table th > *,
.service-record-table td > * {
    vertical-align: middle;
}

.service-record-table th {
    font-weight: 700;
}

.service-designation {
    font-weight: 400;
}

.service-date-cell,
.service-status-cell,
.service-lwop-cell,
.service-salary {
    white-space: nowrap;
}

.service-salary {
    text-align: right !important;
    width: 1%;
    min-width: max-content;
}

.service-wrap-cell {
    overflow-wrap: anywhere;
    word-break: normal;
}

.service-salary-rate {
    margin-left: 0;
    font-size: inherit;
    font-variant: normal;
    font-variant-caps: normal;
    line-height: inherit;
    text-transform: none;
}

.service-record-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .48in;
    margin-top: .15in;
    align-items: start;
    text-align: left;
}

.service-record-footer p {
    margin: 0 0 .42in;
}

.service-record-footer strong,
.service-record-footer span {
    display: block;
    font-weight: 700;
}

.service-record-footer strong {
    text-decoration: underline;
}

.service-signatory {
    display: grid;
    grid-template-rows: .56in auto auto;
    min-height: .96in;
    align-items: end;
    justify-self: start;
    width: max-content;
    max-width: 100%;
}

.service-signatory p {
    align-self: start;
}

.service-signatory-certified {
    justify-self: center;
}

.service-date {
    margin-top: .25in;
}

.retirement-print-overlay[hidden] {
    display: none;
}

.retirement-print-dialog {
    position: relative;
    width: min(430px, 100%);
    padding: 1.45rem 1.5rem 1.15rem;
    border: 1px solid #DDE5EE;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .20);
}

.retirement-print-dialog h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 760;
}

.retirement-print-dialog > p {
    margin: .2rem 0 1rem;
    color: #64748B;
    font-size: .84rem;
    font-weight: 650;
}

.retirement-dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #64748B;
    background: #F1F5F9;
    font-size: 1.2rem;
    line-height: 1;
}

.retirement-dialog-close:hover {
    color: var(--text);
    background: #E2E8F0;
}

.retirement-option-button {
    min-height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-bottom: .7rem;
    padding: .55rem .75rem;
    border: 1px solid #CBD5E1;
    border-radius: 13px;
    color: var(--text);
    background: #F8FAFC;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 650;
}

.retirement-option-button:hover,
.retirement-option-button.is-open {
    border-color: var(--primary);
    background: #ECFDF5;
}

.retirement-optional-toggle {
    position: relative;
}

.retirement-option-chevron {
    position: absolute;
    right: 1rem;
    color: #64748B;
    font-size: .72rem;
}

.retirement-optional-toggle.is-open .retirement-option-chevron {
    transform: rotate(180deg);
}

.print-option-icon {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.retirement-optional-panel {
    padding: .9rem;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: #F8FAFC;
}

.retirement-optional-panel[hidden] {
    display: none;
}

.retirement-optional-panel label {
    margin: 0 0 .42rem .1rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
}

.retirement-optional-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .65rem;
    align-items: center;
}

.retirement-icon-print-button {
    width: 44px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #FFFFFF;
    background: var(--primary);
}

.retirement-icon-print-button:hover {
    background: var(--primary-hover);
}

.report-table th.action-cell,
.report-table td.action-cell,
.report-table th.center-cell,
.report-table td.center-cell {
    text-align: center;
}

.report-row-due-soon td {
    background: #FEFCE8;
}

.report-row-past-due td {
    background: #FEF2F2;
}

/* Loyalty Pay: employees effective in the current calendar month */
.report-row-loyalty-current-month td {
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.report-row-loyalty-current-month td:first-child {
    box-shadow: inset 4px 0 0 #0F766E;
}

.report-row-loyalty-current-month:hover td {
    background: #D1FAE5;
}

.print-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: 1rem 1.5rem 0;
}

.print-page {
    display: grid;
    place-items: start center;
    padding: 1rem 1.5rem 2rem;
    background: #E5E7EB;
}

.print-document {
    width: min(8.5in, 100%);
    min-height: 11in;
    box-sizing: border-box;
    padding: .8in;
    color: #111827;
    background: #FFFFFF;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
}

.step-increment-document {
    width: min(210mm, calc(100vw - 3rem));
    min-height: 297mm;
    padding: 12mm;
}

.loyalty-document {
    width: min(8.5in, 100%);
    min-height: 11in;
    padding: .8in;
}

.retirement-document {
    width: min(8.5in, 100%);
    min-height: 13in;
    padding: .8in;
}

.print-letterhead {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 1rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #111827;
    text-align: center;
}

.print-letterhead img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.print-letterhead p {
    margin: 0;
    font-size: .86rem;
}

.print-letterhead h1 {
    margin: .12rem 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.print-title-block {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .6in 0 .35in;
}

.print-title-block h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
}

.print-title-block span {
    font-size: .86rem;
}

.print-body {
    font-size: .95rem;
    line-height: 1.7;
}

.print-body p {
    margin: 0 0 .35in;
    text-align: justify;
}

.print-details {
    display: grid;
    grid-template-columns: 1.8in 1fr;
    gap: .18rem .35rem;
    margin: 0 0 .35in;
}

.print-details dt {
    font-weight: 700;
}

.print-details dd {
    margin: 0;
    border-bottom: 1px solid #CBD5E1;
}

.print-signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7in;
    margin-top: .9in;
}

.print-signature div {
    display: grid;
    gap: .45in;
}

.print-signature span {
    padding-top: .12in;
    border-top: 1px solid #111827;
    text-align: center;
}

.retirement-letter {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    color: #111827;
    font-size: 14px;
    line-height: 1.55;
}

.retirement-letterhead {
    display: grid;
    grid-template-columns: 1.25in 1fr 1.25in;
    align-items: start;
    margin-bottom: .45in;
}

.retirement-letterhead img {
    width: .86in;
    height: .86in;
    grid-column: 1;
    justify-self: end;
    margin-right: .14in;
    object-fit: contain;
}

.retirement-letterhead div {
    grid-column: 2;
    text-align: center;
}

.retirement-letterhead p,
.retirement-letterhead h3,
.retirement-letterhead h4 {
    margin: 0;
}

.retirement-letterhead p {
    font-size: 14px;
    line-height: 1.25;
}

.retirement-letterhead h3 {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.retirement-letterhead h4 {
    margin-top: 24px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.retirement-date {
    margin: 0 0 28px;
}

.retirement-recipient {
    display: grid;
    gap: 1px;
    margin-bottom: 24px;
}

.retirement-recipient strong {
    font-weight: 700;
}

.retirement-salutation {
    margin: 0 0 22px;
}

.retirement-letter > p {
    margin: 0 0 22px;
    text-align: justify;
    white-space: pre-line;
}

.retirement-requirements {
    margin-left: 34px !important;
    text-align: left !important;
}

.retirement-signature {
    margin-top: 50px;
}

.retirement-signature p {
    margin: 0 0 45px;
}

.retirement-signature strong,
.retirement-signature span {
    display: block;
}

.retirement-signature strong {
    font-weight: 700;
}

.step-notice {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    color: #111827;
    font-size: 12px;
    line-height: 1.22;
}

.step-notice-header {
    display: grid;
    grid-template-columns: 32mm 1fr 32mm;
    align-items: start;
    margin-bottom: 8mm;
    font-family: "Segoe UI", Arial, sans-serif;
}

.step-notice-header img {
    width: 16mm;
    height: 16mm;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin-top: 0;
    margin-right: 3mm;
    object-fit: contain;
}

.step-notice-header div {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.step-notice-header p,
.step-notice-header h3,
.step-notice-header h4 {
    margin: 0;
}

.step-notice-header p {
    font-size: 10px;
    line-height: 1.18;
}

.step-notice-header h3 {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
}

.step-notice-header h4 {
    margin-top: 6mm;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.step-notice > h2 {
    margin: 0 0 9mm;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
}

.step-notice-date {
    display: grid;
    justify-content: end;
    width: 45mm;
    margin: 0 0 7mm auto;
    text-align: center;
}

.step-notice-date span {
    font-size: 12px;
}

.step-notice-date small {
    margin-top: 1mm;
    font-size: 11px;
}

.step-employee-block {
    display: grid;
    gap: 1px;
    margin-bottom: 8mm;
}

.step-employee-block strong {
    font-size: 13px;
}

.step-employee-block span {
    font-size: 12px;
}

.step-notice > p {
    margin: 0 0 6mm;
    font-size: 12px;
    text-align: justify;
}

.step-salary-grid {
    display: grid;
    grid-template-columns: 1fr 34mm;
    gap: 6mm;
    margin: 0 0 2mm 8mm;
    align-items: start;
}

.step-salary-grid p {
    margin: 0 0 7mm;
    font-size: 12px;
}

.step-salary-grid p span {
    padding-left: 1rem;
}

.step-salary-values {
    display: grid;
    grid-template-rows: repeat(3, 13mm);
    gap: 0;
    padding-top: 7mm;
}

.step-salary-values strong {
    align-self: start;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    text-decoration: underline;
}

.step-salary-grid + p {
    margin-bottom: 7mm;
}

.step-signature {
    width: 48mm;
    margin: 0 0 7mm auto;
}

.step-signature p {
    margin: 0 0 10mm;
    font-size: 12px;
}

.step-signature strong {
    display: block;
    font-size: 12px;
}

.step-signature span {
    display: block;
    margin-top: 1px;
    font-size: 12px;
}

.step-footer p {
    margin: 0 0 1mm;
    font-size: 11px;
    line-height: 1.2;
}

.step-footer p:nth-child(3) {
    margin-bottom: 4mm;
}

.loyalty-certification {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #000;
    font-size: 15px;
    line-height: 1.6;
}

.loyalty-header {
    display: grid;
    grid-template-columns: 1.25in 1fr 1.25in;
    align-items: start;
    margin-bottom: 35px;
}

.loyalty-header img {
    width: .9in;
    height: .9in;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin-right: .16in;
    object-fit: contain;
}

.loyalty-header div {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.loyalty-header p,
.loyalty-header h3,
.loyalty-header h4 {
    margin: 0;
}

.loyalty-header p {
    font-size: 14px;
    line-height: 1.25;
}

.loyalty-header h3 {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.loyalty-header h4 {
    margin-top: 24px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.loyalty-certification > h2 {
    margin: 15px 0 45px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.loyalty-concern {
    margin: 0 0 25px;
}

.loyalty-body-line {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    text-align: justify;
}

.loyalty-certify-line {
    width: auto;
    margin-left: 40px;
    text-align: justify;
    text-align-last: justify;
    word-spacing: normal;
    white-space: nowrap;
}

.loyalty-table {
    width: calc(100% - 20px);
    margin: 25px 10px 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.loyalty-table th,
.loyalty-table td {
    padding: 3px 8px;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}

.loyalty-table th {
    height: 42px;
    font-weight: 400;
    line-height: 1.2;
}

.loyalty-table td {
    height: 24px;
}

.loyalty-table th:nth-child(3),
.loyalty-table td:nth-child(3) {
    width: 27%;
}

.loyalty-support {
    margin-top: 25px;
    text-indent: .55in;
}

.loyalty-issued {
    margin-top: 25px;
    text-indent: .55in;
    text-align: left;
}

.loyalty-signature {
    width: 260px;
    margin: 95px 0 0 auto;
    text-align: center;
}

.loyalty-signature strong {
    display: block;
    font-size: 15px;
    text-decoration: underline;
}

.loyalty-signature span {
    display: block;
    font-size: 14px;
}

.universal-print-header {
    display: grid;
    grid-template-columns: 1.25in 1fr 1.25in;
    align-items: start;
    margin-bottom: 35px;
    border: 0;
    padding: 0;
    gap: 0;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    text-align: center;
}

.universal-print-header img {
    width: .9in;
    height: .9in;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin: 0 .16in 0 0;
    object-fit: contain;
    transform: translateX(.16in);
}

.universal-print-header > div {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: center;
}

.universal-print-header p,
.universal-print-header h3,
.universal-print-header h4,
.universal-print-header h5 {
    margin: 0;
    color: #000;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    line-height: 1.25;
    text-transform: uppercase;
}

.universal-print-header p {
    font-size: 14px;
    font-weight: 400;
}

.universal-print-header h3 {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
}

.universal-print-header h4 {
    margin-top: 24px;
    font-size: 17px;
    font-weight: 700;
}

.universal-print-header h5 {
    margin-top: 24px;
    font-size: 17px;
    font-weight: 700;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    @page service-record-page {
        size: 8.5in 13in;
        margin: .3in;
    }

    body {
        background: #FFFFFF;
    }

    .sidebar,
    .top-row,
    .print-toolbar,
    #blazor-error-ui {
        display: none !important;
    }

    .page,
    main,
    .content,
    .print-page {
        display: block;
        min-height: 0;
        padding: 0;
        background: #FFFFFF;
    }

    .print-document {
        width: auto;
        min-height: 0;
        padding: 0;
        box-shadow: none;
    }

    .step-increment-document {
        width: auto;
        min-height: 0;
        padding: 0;
    }

    .step-notice {
        font-size: 12px;
        line-height: 1.22;
    }

    .step-notice-header {
        margin-bottom: 8mm;
    }

    .step-notice > h2 {
        margin-bottom: 9mm;
    }

    .step-employee-block {
        margin-bottom: 8mm;
    }

    .step-notice > p {
        margin-bottom: 6mm;
    }

    .step-salary-grid p {
        margin-bottom: 7mm;
    }

    .step-signature {
        margin-bottom: 7mm;
    }

    .loyalty-document {
        width: auto;
        min-height: 0;
        padding: 0;
    }

    .retirement-document {
        width: auto;
        min-height: 0;
        padding: 0;
    }
}

/* Filed CTO Form No. 6: use the system typeface and certification letterhead. */
.cto-form6-sheet,
.cto-form6-sheet * {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.cto-form6-letterhead.universal-print-header {
    position: relative;
    display: grid;
    width: auto;
    min-height: 86px;
    margin: 0;
    padding-top: 5mm;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: start;
    text-align: center;
}

.cto-form6-letterhead.universal-print-header img {
    position: static !important;
    width: 86px !important;
    height: 86px !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin: -8px 0 0 120px !important;
    transform: none !important;
    object-fit: contain !important;
}

.cto-form6-letterhead.universal-print-header > div {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: center !important;
}

.cto-form6-letterhead.universal-print-header :is(p, h3, h4) {
    margin: 0;
    color: #000;
    line-height: 1.25 !important;
    text-transform: uppercase;
}

.cto-form6-letterhead.universal-print-header p {
    font-size: 11pt !important;
    font-weight: 400 !important;
}

.cto-form6-letterhead.universal-print-header h3 {
    margin-top: 4px !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
}

.cto-form6-letterhead.universal-print-header h4 {
    margin-top: 24px !important;
    font-size: 12pt !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.profile-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}

.detail-list {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: .65rem 1rem;
    margin: 0;
    font-size: .88rem;
}

.detail-list dt {
    color: var(--muted);
    font-weight: 800;
}

.detail-list dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 650;
}

.employee-profile-shell {
    --profile-ink: #0F172A;
    --profile-muted: #687589;
    --profile-line: #E8EDF2;
    --profile-card: #FFFFFF;
    display: grid;
    grid-template-rows: auto auto;
    gap: .75rem;
    align-content: start;
    margin-top: -.55rem;
    padding: .9rem 1.1rem 1.1rem;
    min-height: max(1120px, calc(100vh - 2rem));
    border: 1px solid #E4E9EE;
    border-radius: 8px;
    background: #F6F7F8;
    color: var(--profile-ink);
}

.employee-profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.employee-profile-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 42px;
    padding: .35rem .75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .84);
    color: var(--profile-muted);
    font-size: .86rem;
    font-weight: 600;
}

.employee-profile-breadcrumb a {
    color: var(--profile-muted);
    text-decoration: none;
}

.employee-profile-breadcrumb strong {
    color: var(--profile-ink);
    font-weight: 700;
}

.employee-profile-tools {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.employee-profile-tools button,
.employee-profile-panel-heading a,
.employee-profile-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5EAF0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1B2636;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.employee-profile-tools button {
    width: 38px;
    height: 38px;
}

.employee-profile-password-reset-form {
    margin: 0;
}

.employee-profile-password-reset-button {
    width: auto !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 132, 120, .22) !important;
    background: #ecfffb !important;
    color: #0f766e !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.employee-portal-password-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
}

.employee-portal-password-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(8px);
}

.employee-portal-password-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 26px;
    border: 1px solid rgba(20, 132, 120, .18);
    border-radius: 22px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.employee-portal-password-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #eef5f7;
    color: #475569;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.employee-portal-password-kicker {
    display: block;
    margin-bottom: 8px;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.employee-portal-password-dialog h2 {
    margin: 0;
    color: #102033;
    font-size: 1.35rem;
}

.employee-portal-password-help {
    margin: 10px 0 18px;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.55;
}

.employee-portal-password-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    margin: 0 0 14px;
    border: 1px solid rgba(20, 132, 120, .18);
    border-radius: 16px;
    background: #f8fffd;
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.employee-portal-password-countdown {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 6px auto 0;
    border: 1px solid rgba(20, 132, 120, .2);
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 58%, #effdfa 59%);
    color: #64748b;
    box-shadow: inset 0 0 0 7px #ffffff, 0 10px 24px rgba(15, 118, 110, .12);
}

.employee-portal-password-countdown strong {
    color: #0f766e;
    font-size: 1.45rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.employee-portal-password-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(20, 132, 120, .2);
    border-radius: 16px;
    background: #f4fffc;
    color: #334155;
    box-shadow: 0 18px 42px rgba(15, 118, 110, .08);
}

.employee-portal-password-notice span {
    display: block;
    margin-bottom: 4px;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-portal-password-notice strong {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.05rem;
    letter-spacing: .08em;
}

.employee-portal-password-notice p {
    max-width: 520px;
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
}

.employee-portal-password-notice.is-error {
    display: block;
    border-color: rgba(220, 38, 38, .24);
    background: #fff5f5;
    color: #991b1b;
}

.employee-profile-mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    background: #CFA58C;
    color: #1F2937;
    font-size: .78rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.employee-profile-tabs {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .1rem;
    overflow-anchor: none;
}

.employee-profile-tabs a,
.employee-profile-tabs button {
    flex: 0 0 auto;
    padding: .72rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0F172A;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.employee-profile-tabs a.is-active,
.employee-profile-tabs button.is-active {
    background: #111827;
    color: #FFFFFF;
    box-shadow: inset 0 -3px 0 #FACC15, inset 0 -5px 0 #B026FF;
}

.employee-profile-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-height: 0;
}

.employee-profile-card {
    position: sticky;
    top: .35rem;
    align-self: start;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #E3E9EF;
    border-radius: 8px;
    background: var(--profile-card);
    box-shadow: 0 24px 45px rgba(15, 23, 42, .08);
}

.employee-profile-cover {
    height: 132px;
    background:
        radial-gradient(circle at 24% 10%, rgba(255, 255, 255, .9), transparent 28%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, .32) 0 12px, rgba(201, 211, 219, .2) 12px 24px),
        linear-gradient(135deg, #DDDAD5, #C5D2D3);
}

.employee-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin: -48px 0 0 1.65rem;
    border: 5px solid #FFFFFF;
    border-radius: 999px;
    background: linear-gradient(135deg, #E2B99E, #F4D4BE);
    color: #1F2937;
    cursor: pointer;
    font-size: 1.45rem;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .18);
}

.employee-profile-mini-avatar.has-photo,
.employee-profile-avatar.has-photo {
    overflow: hidden;
    padding: 0;
    background: #FFFFFF;
}

.employee-profile-mini-avatar img,
.employee-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.employee-profile-name-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .45rem 1.65rem 0;
}

.employee-profile-name-row h1 {
    margin: 0;
    color: var(--profile-ink);
    font-size: 1.14rem;
    line-height: 1.2;
    font-weight: 700;
}

.employee-profile-status {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    padding: .13rem .42rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 700;
    vertical-align: .15rem;
}

.employee-profile-status.is-active {
    background: #DCFCE7;
    color: #166534;
}

.employee-profile-status.is-inactive {
    background: #FEE2E2;
    color: #991B1B;
}

.employee-profile-edit-button,
.employee-profile-panel-heading a {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: .68rem;
    font-weight: 700;
}

.employee-profile-edit-button {
    position: absolute;
    top: 112px;
    right: 1.25rem;
    z-index: 2;
    margin-top: 0;
}

.employee-profile-edit-button span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.employee-profile-role {
    display: inline-flex;
    margin: .45rem 1.65rem 1rem;
    padding: .28rem .55rem;
    border-radius: 6px;
    background: #EEF5FF;
    color: #2563EB;
    font-size: .72rem;
    font-weight: 600;
}

.employee-profile-basic {
    display: grid;
    gap: .9rem;
    padding: 1.15rem 1.65rem 1.65rem;
}

.employee-profile-basic h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.employee-profile-basic-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
}

.employee-profile-basic-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #F3F6F8;
    box-shadow: inset 0 0 0 1px #E7ECF0;
}

.employee-profile-basic-item small {
    display: block;
    color: var(--profile-muted);
    font-size: .72rem;
    font-weight: 600;
}

.employee-profile-basic-item strong {
    display: block;
    min-width: 0;
    color: #0F172A;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.25;
    font-weight: 500;
}

.employee-profile-tab-panel {
    grid-row: 2;
    grid-column: 1;
    display: grid;
    gap: .9rem;
    align-content: start;
    align-self: start;
    min-height: 0;
    margin-top: 0;
    overflow-anchor: none;
}

.employee-photo-modal[hidden] {
    display: none;
}

.employee-photo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.employee-photo-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .62);
}

.employee-photo-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .65rem;
    width: min(420px, 92vw);
    padding: 1.25rem;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.employee-photo-modal-close {
    justify-self: end;
    border: 1px solid #E5EAF0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0F172A;
    font-size: .72rem;
    font-weight: 700;
}

.employee-photo-modal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(240px, 58vw);
    height: min(240px, 58vw);
    border: 8px solid #FFFFFF;
    border-radius: 999px;
    background: linear-gradient(135deg, #E2B99E, #F4D4BE);
    color: #1F2937;
    font-size: clamp(2.6rem, 12vw, 4.8rem);
    font-weight: 700;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .22);
}

.employee-photo-modal-avatar.has-photo {
    display: block;
    overflow: hidden;
    width: min(420px, 86vw);
    height: auto;
    max-height: 72vh;
    padding: 0;
    border-radius: 12px;
    background: #FFFFFF;
}

.employee-photo-modal-avatar.has-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

.employee-photo-modal-dialog strong,
.employee-photo-modal-dialog span {
    text-align: center;
}

.employee-photo-modal-dialog strong {
    color: #0F172A;
    font-size: 1.1rem;
    font-weight: 700;
}

.employee-photo-modal-dialog span {
    color: #64748B;
    font-size: .88rem;
    font-weight: 500;
}

.employee-profile-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .9rem;
    align-content: start;
    align-self: start;
    min-width: 0;
    min-height: 860px;
    overflow-anchor: none;
}

.employee-profile-shell .employee-profile-panel {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #E3E9EF;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .06);
}

.employee-profile-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.employee-profile-panel-heading > div {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.employee-profile-panel-heading h2 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.employee-profile-panel-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
}

.employee-profile-panel-icon.blue {
    background: #DDF0FF;
    box-shadow: inset 0 0 0 8px #EAF6FF;
}

.employee-profile-panel-icon.orange {
    background: #FFE0C7;
    box-shadow: inset 0 0 0 8px #FFF0E5;
}

.employee-profile-panel-icon.teal {
    background: #CCFBF1;
    box-shadow: inset 0 0 0 8px #ECFEFF;
}

.employee-profile-panel-icon.violet {
    background: #EDE9FE;
    box-shadow: inset 0 0 0 8px #F5F3FF;
}

.employee-profile-panel-icon.green {
    background: #DCFCE7;
    box-shadow: inset 0 0 0 8px #F0FDF4;
}

.employee-profile-table {
    display: grid;
    margin: 0;
    padding: .15rem 1.35rem 1rem 4.75rem;
}

.employee-profile-table div {
    display: grid;
    grid-template-columns: minmax(150px, .62fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-height: 42px;
    padding: .65rem 0;
    border-top: 1px solid var(--profile-line);
}

.employee-profile-table dt,
.employee-profile-table dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #111827;
    font-size: .86rem;
    line-height: 1.25;
}

.employee-profile-table dt {
    font-weight: 600;
}

.employee-profile-table dd {
    font-weight: 500;
}

.employee-profile-table dd.is-important {
    font-weight: 700;
}

.employee-payslip-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    padding: 0 1.25rem 1rem 4.75rem;
}

.employee-payslip-summary div {
    display: grid;
    gap: .28rem;
    min-height: 82px;
    padding: .9rem 1rem;
    border: 1px solid #DDE7F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.employee-payslip-summary span {
    color: #64748B;
    font-size: .78rem;
    font-weight: 600;
}

.employee-payslip-summary strong {
    color: #111827;
    font-size: 1.2rem;
    font-weight: 700;
}

.employee-payslip-summary .net-pay {
    border-color: #A7DAD6;
    background: #F0FDFA;
}

.employee-payslip-summary .net-pay strong {
    color: var(--primary);
}

.payslip-profile-table {
    padding-top: 0;
}

.employee-payslip-years {
    max-height: 430px;
    overflow-y: auto;
    display: grid;
    gap: .8rem;
    padding-right: .25rem;
}

.employee-payslip-year {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.employee-payslip-year-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: .55rem .8rem;
    border: 0;
    background: #f8fafc;
    color: #173b35;
    font-size: .9rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    list-style: none;
}

.employee-payslip-year-toggle::-webkit-details-marker {
    display: none;
}

.employee-payslip-year-toggle:hover,
.employee-payslip-year-toggle:focus-visible {
    background: #eef7f5;
}

.employee-payslip-year[open] .employee-payslip-year-toggle {
    background: #eef7f5;
    border-bottom: 1px solid #e2e8f0;
}

.employee-payslip-year-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #55736c;
    border-bottom: 2px solid #55736c;
    transform: rotate(45deg);
    transition: transform .16s ease;
    margin-right: .2rem;
}

.employee-payslip-year[open] .employee-payslip-year-arrow {
    transform: rotate(225deg);
}

details.employee-payslip-year:not([open]) > .employee-payslip-month-list {
    display: none !important;
}

details.employee-payslip-year[open] {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}

details.employee-payslip-year[open] > .employee-payslip-month-list {
    display: flex !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.employee-payslip-month-grid {
    --month-gap: .45rem;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--month-gap);
    padding: .75rem .8rem .8rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.employee-payslip-month-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc((100% - (11 * var(--month-gap))) / 12);
    min-width: 0;
    min-height: 36px;
    padding: .38rem .45rem;
    border: 1.5px solid #2563eb;
    border-radius: 999px;
    background: #ffffff;
    color: #2563eb;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.employee-payslip-month-link:hover,
.employee-payslip-month-link:focus-visible {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    text-decoration: none;
    outline: none;
}

.employee-payslip-month-link.is-unavailable {
    cursor: default;
    color: #94a3b8;
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: none;
    opacity: .78;
}

.employee-payslip-month-link.is-unavailable:hover,
.employee-payslip-month-link.is-unavailable:focus-visible {
    color: #94a3b8;
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: none;
}

.payslip-preview-page {
    min-height: 100vh;
    padding: 1rem;
    background: #e5e7eb;
}

.payslip-preview-toolbar {
    width: min(420px, 100%);
    margin: 0 auto .6rem;
    display: flex;
    justify-content: flex-start;
    gap: .6rem;
    flex-wrap: wrap;
}

.payslip-preview-toolbar .btn {
    width: auto !important;
    min-height: 30px;
    padding: .25rem .85rem;
    font-size: .8rem;
    line-height: 1;
}

.payslip-document {
    width: 320px;
    min-height: 680px;
    margin: auto;
    padding: 14px 18px;
    background: #fff;
    color: #111;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.18;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .25);
}

.payslip-header {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: start;
    column-gap: 8px;
    min-height: 50px;
    margin-bottom: 8px;
}

.payslip-header-side {
    width: 42px;
    height: 42px;
}

.payslip-header-logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.payslip-header-center {
    width: 100%;
    min-width: 0;
    text-align: center !important;
}

.payslip-header-center p,
.payslip-header-center h1 {
    width: 100%;
    text-align: center !important;
}

.payslip-header img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}


.payslip-header p {
    margin: 0;
    line-height: 1.12;
}

.payslip-header h1 {
    margin: 8px 0 10px;
    font-size: 15px;
    line-height: 1.05;
}

.payslip-identity {
    margin: 0 0 4px;
}

.payslip-identity div {
    display: grid;
    grid-template-columns: 70px 1fr;
}

.payslip-identity dt,
.payslip-identity dd {
    margin: 0;
}

.payslip-document h2 {
    margin: 3px 0 2px;
    padding-top: 2px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    font-size: 11px;
    line-height: 1.1;
}

.payslip-document h3 {
    margin: 3px 0 1px;
    font-size: 11px;
    line-height: 1.1;
}

.payslip-document h4 {
    margin: 2px 0 0 10px;
    font-size: 11px;
    line-height: 1.08;
    font-weight: 700;
}

.payslip-row,
.payslip-net {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    align-items: baseline;
    column-gap: 8px;
    padding: 0;
    line-height: 1.25;
    box-sizing: border-box;
}

.payslip-row span:first-child {
    min-width: 0;
    padding-left: 10px;
}

.payslip-loan-row span:first-child {
    padding-left: 22px;
}

.payslip-row span:last-child,
.payslip-net strong:last-child {
    width: 92px;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.payslip-less {
    margin-top: 2px;
}

.payslip-net {
    margin-top: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #222;
    font-size: 12px;
}

.payslip-document footer {
    margin-top: 8px;
    padding-top: 3px;
    border-top: 1px dotted #888;
    text-align: center;
    font-size: 7px;
}

@media print {
    .app-sidebar,
    .app-header {
        display: none !important;
    }

    .payslip-preview-page {
        padding: 0;
        background: #fff;
    }

    .payslip-preview-toolbar {
        display: none;
    }

    .payslip-document {
        box-shadow: none;
        margin: 0 auto;
    }
}

.employee-profile-empty-state {
    margin: 0 1.25rem 1.1rem 4.75rem;
    padding: 1rem;
    border-top: 1px solid var(--profile-line);
    color: var(--profile-muted);
    font-size: .88rem;
    font-weight: 500;
}

.employee-profile-history-wrap {
    margin: 0 1rem 1rem;
    overflow-x: auto;
    border-top: 1px solid var(--profile-line);
}

.employee-profile-history-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    color: #111827;
    font-size: .82rem;
}

.employee-profile-history-table th,
.employee-profile-history-table td {
    padding: .72rem .65rem;
    border-bottom: 1px solid var(--profile-line);
    text-align: left;
    vertical-align: top;
}

.employee-profile-history-table th {
    color: var(--profile-muted);
    font-size: .74rem;
    font-weight: 650;
    text-transform: uppercase;
}

.employee-profile-history-table td {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.employee-profile-history-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 1080px) {
    .employee-profile-layout {
        grid-template-columns: 1fr;
    }

    .employee-profile-card {
        max-width: none;
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    .employee-profile-shell {
        padding: .8rem;
        border-radius: 0;
    }

    .employee-profile-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-profile-breadcrumb {
        width: 100%;
    }

    .employee-profile-tools {
        width: 100%;
        justify-content: flex-end;
    }

    .employee-profile-cover {
        height: 112px;
    }

    .employee-profile-avatar {
        width: 78px;
        height: 78px;
        margin-left: 1rem;
        font-size: 1.1rem;
    }

    .employee-profile-edit-button {
        top: 100px;
        right: 1rem;
    }

    .employee-profile-name-row,
    .employee-profile-basic {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .employee-profile-role {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .employee-profile-panel-heading {
        padding: .9rem;
    }

    .employee-profile-table {
        padding: 0 .95rem .9rem;
    }

    .employee-profile-table div {
        grid-template-columns: 1fr;
        gap: .2rem;
        min-height: 0;
    }

    .employee-payslip-summary {
        grid-template-columns: 1fr;
        padding: 0 .95rem .9rem;
    }

    .employee-profile-empty-state {
        margin: 0 .95rem .9rem;
    }

    .employee-profile-history-wrap {
        margin: 0 .9rem .9rem;
    }
}

.alert-danger {
    border-color: #FECACA;
    border-radius: 14px;
    color: #991B1B;
    background: #FEF2F2;
}

.employee-edit-form {
    display: grid;
    gap: 1rem;
}

.edit-section {
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.edit-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.edit-section-heading h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.edit-section-heading span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem 1rem;
}

.edit-grid label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.edit-grid label > span {
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
}

.edit-grid .wide {
    grid-column: span 2;
}

.personal-info-grid {
    display: grid;
    gap: .9rem;
}

.employment-info-grid {
    display: grid;
    gap: .9rem;
}

.other-info-grid {
    display: grid;
    gap: .9rem;
}

.education-info-grid {
    display: grid;
    gap: .9rem;
}

.personal-row {
    display: grid;
    gap: 1.25rem;
    align-items: end;
}

.employment-row,
.other-row,
.education-row {
    display: grid;
    gap: 1.25rem;
    align-items: end;
}

.personal-row-one {
    grid-template-columns: minmax(130px, .55fr) repeat(3, minmax(0, 1.45fr)) minmax(130px, .55fr);
}

.personal-row-two {
    grid-template-columns: minmax(150px, 1fr) minmax(260px, 2.5fr) repeat(3, minmax(150px, 1fr));
}

.personal-row-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employment-row-one {
    grid-template-columns: minmax(130px, .55fr) minmax(130px, .55fr) minmax(260px, 2.9fr) minmax(150px, .8fr) minmax(180px, .9fr);
}

.employment-row-two {
    grid-template-columns: minmax(240px, 2.4fr) repeat(4, minmax(160px, .85fr));
}

.other-row-one {
    grid-template-columns: minmax(260px, 2.1fr) repeat(3, minmax(160px, 1fr));
}

.other-row-two {
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.15fr) minmax(150px, 1fr) minmax(170px, 1.15fr) repeat(3, minmax(110px, .8fr));
}

.disability-row {
    grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr);
}

.education-row-one {
    grid-template-columns: minmax(150px, 1fr) minmax(260px, 2fr) minmax(260px, 2fr) minmax(110px, .8fr);
}

.cos-personal-row-two {
    grid-template-columns: minmax(150px, .8fr) minmax(300px, 1.9fr) minmax(300px, 1.9fr) minmax(180px, 1fr);
}

.cos-other-row-one {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(360px, 1.35fr);
}

.cos-employment-row-one {
    grid-template-columns: minmax(130px, .6fr) repeat(3, minmax(0, 1fr));
}

.cos-employment-row-two {
    grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .7fr) minmax(150px, .7fr) minmax(160px, .75fr) minmax(230px, 1.05fr);
}

.eligibility-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1.25rem;
    align-items: end;
}

.eligibility-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    align-items: end;
}

.eligibility-item.has-remove-button,
.eligibility-item:has([data-remove-eligibility]) {
    grid-template-columns: minmax(0, 1fr) 38px;
}

.eligibility-field {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.eligibility-control-wrap {
    position: relative;
    display: block;
    padding-left: 0 !important;
}

.eligibility-control {
    padding-right: 2.4rem;
}

.eligibility-arrow {
    position: absolute;
    right: .95rem;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #475569;
    pointer-events: none;
    transform: translateY(-40%);
}

.eligibility-remove-button,
.dialog-close-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #E11D48;
    font-size: .9rem;
    font-weight: 800;
    background: #FFF1F2;
    border: 0;
    border-radius: 9px;
}

.eligibility-remove-button:hover,
.dialog-close-button:hover {
    background: #FFE4E6;
}

.eligibility-add-button {
    width: min(170px, 100%);
    align-self: end;
}

.account-number-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem 1.25rem;
    align-items: end;
}

.account-number-grid label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.account-add-button {
    width: min(130px, 100%);
}

.account-dialog {
    width: min(520px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.account-dialog::backdrop,
.psgc-dialog::backdrop {
    background: rgba(15, 23, 42, .35);
}

.account-dialog-panel {
    padding: 1rem;
    background: var(--surface);
}

.account-dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.account-dialog-heading h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

.account-dialog-grid {
    display: grid;
    gap: .9rem;
}

.account-dialog-grid label {
    display: grid;
    gap: .35rem;
}

.account-dialog-grid label > span {
    padding-left: .85rem;
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
}

.account-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1rem;
}

.psgc-dialog {
    width: min(620px, calc(100vw - 2rem));
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
}

.psgc-dialog.is-birthplace-picker {
    overflow: visible;
    scrollbar-width: none;
}

.psgc-dialog.is-birthplace-picker::-webkit-scrollbar,
.psgc-dialog.is-birthplace-picker .smooth-select-menu::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.psgc-dialog.is-birthplace-picker .smooth-select-menu {
    scrollbar-width: none;
}

.psgc-dialog-panel {
    padding: 1.2rem;
    overflow: visible;
    border: 1px solid #D8E4EF;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.psgc-dialog-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.psgc-dialog-heading h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.psgc-dialog-heading p {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.psgc-dialog-grid {
    display: grid;
    gap: .85rem;
}

.psgc-dialog-grid label {
    display: grid;
    gap: .35rem;
}

.psgc-dialog-grid label > span {
    padding-left: .85rem;
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
}

.psgc-dialog-message {
    min-height: 1.25rem;
    margin-top: .6rem;
    color: #991B1B;
    font-size: .82rem;
}

.psgc-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: .35rem;
}

.personal-info-grid label,
.personal-row label,
.employment-info-grid label,
.employment-row label,
.other-info-grid label,
.other-row label,
.education-info-grid label,
.education-row label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label,
.employee-edit-form .account-number-grid label,
.employee-edit-form .eligibility-field {
    position: relative;
    display: block;
    padding-top: .45rem;
}

.personal-info-grid label > span,
.personal-row label > span,
.employment-info-grid label > span,
.employment-row label > span,
.other-info-grid label > span,
.other-row label > span,
.education-info-grid label > span,
.education-row label > span,
.eligibility-field > span,
.account-number-grid label > span {
    padding-left: .85rem;
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
}

.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label > span:first-child,
.employee-edit-form .account-number-grid label > span:first-child,
.employee-edit-form .eligibility-field > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 2;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transition:
        transform .24s cubic-bezier(.2, .8, .2, 1),
        color .18s ease,
        font-weight .18s ease,
        background-color .16s ease .04s;
    will-change: transform;
}

.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label:focus-within > span:first-child,
.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label.has-floating-label > span:first-child,
.employee-edit-form .account-number-grid label:focus-within > span:first-child,
.employee-edit-form .account-number-grid label.has-floating-label > span:first-child,
.employee-edit-form .eligibility-field:focus-within > span:first-child,
.employee-edit-form .eligibility-field.has-floating-label > span:first-child {
    color: var(--primary);
    font-weight: 500;
    background: var(--surface);
    transform: translateY(0) scale(1);
}

/* The inline slider remains focused after it enables an empty optional field.
   Keep these labels inside the entry until the text input itself is focused. */
.employee-edit-form .middle-name-field.has-inline-switch:not(.has-floating-label):focus-within > span:first-child,
.employee-edit-form .vocational-course-field.has-inline-switch:not(.has-floating-label):focus-within > span:first-child {
    color: #475569;
    font-weight: 500;
    background: transparent;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
}

.btn-soft-add {
    color: var(--primary);
    background: var(--teal-soft);
    border-color: transparent;
}

.btn-soft-add:hover {
    color: var(--primary-hover);
    background: var(--teal-selected);
}

.employee-id-field > span,
.employment-status-active-field > span,
.employment-item-field > span,
.employment-status-field > span {
    padding-left: .25rem;
    text-align: left;
}

.employee-id-control {
    color: #64748B;
    font-weight: 800;
    text-align: left;
    background-color: #FFFFFF;
}

.employment-status-active-field .form-control,
.employment-item-field .form-control,
.employment-status-field .form-control {
    text-align: left;
}

.amount-control {
    color: #64748B;
    text-align: left;
}

.employment-separator {
    width: 1px;
    height: 36px;
    align-self: end;
    margin-bottom: 1px;
    background: var(--border-strong);
}

.field-with-button {
    position: relative;
}

.field-with-button .form-control {
    padding-right: 3.2rem;
}

.inline-picker-button {
    position: absolute;
    right: .45rem;
    bottom: .42rem;
    width: 2.3rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    color: #334155;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .12em;
    background: transparent;
    border: 0;
    border-radius: 9px;
    opacity: 1;
}

.inline-picker-button.accent {
    color: var(--primary);
}

.inline-picker-button:hover {
    color: var(--primary);
    background: var(--teal-soft);
}

.edit-grid textarea.form-control {
    min-height: 92px;
}

.employee-edit-form .form-control,
.employee-edit-form .form-select {
    background-color: #FFFFFF;
    text-align: left;
    text-align-last: left;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .18s ease, transform .18s ease;
}

.employee-edit-form .form-control,
.employee-edit-form .form-select,
.smooth-select {
    min-height: 40px;
    border-color: #CBD5E1;
    border-radius: 12px;
}

.smooth-select {
    cursor: pointer;
    background-color: #FFFFFF;
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%);
    background-position:
        calc(100% - 1rem) 52%,
        calc(100% - .7rem) 52%;
    background-size: .32rem .32rem, .32rem .32rem;
    background-repeat: no-repeat;
    transition: border-color .18s ease, border-radius .18s ease, background-color .18s ease, background-position .22s ease, box-shadow .22s ease, transform .2s ease;
}

.smooth-select option {
    color: #0F172A;
    background: #FFFFFF;
    padding: .55rem .75rem;
}

.smooth-select:hover {
    border-color: #94A3B8;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
}

.smooth-select:focus,
.smooth-select:focus-visible,
.smooth-select.is-select-open {
    border-color: #94A3B8;
    border-radius: 12px 12px 8px 8px;
    background-color: #FFFFFF;
    background-position:
        calc(100% - .7rem) 52%,
        calc(100% - 1rem) 52%;
    box-shadow: 0 0 0 .13rem rgba(148, 163, 184, .2), 0 14px 28px rgba(15, 23, 42, .11);
    outline: none;
    transform: translateY(-1px);
}

select.smooth-select.is-native-hidden,
select.smooth-select:has(+ .smooth-select-shell) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

.smooth-select-shell {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    padding-left: 0 !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.smooth-select-button {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: .65rem;
    padding: .5rem .8rem;
    color: #0F172A;
    font: inherit;
    font-size: .84rem;
    font-weight: 500;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #D7DEE8;
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .18s ease, border-radius .18s ease, box-shadow .22s ease, transform .2s ease;
}

.employee-edit-form label:has(.smooth-select-shell),
.employee-edit-form label:has(.smooth-select-shell) .smooth-select-shell,
.employee-edit-form label:has(.smooth-select-shell) .smooth-select-button {
    width: 100%;
    justify-self: stretch;
}

.smooth-select-button:hover {
    border-color: #B8C4D3;
}

.smooth-select-button:focus-visible,
.smooth-select-shell.is-open .smooth-select-button {
    border-color: #B8C4D3;
    border-radius: 13px;
    box-shadow: 0 0 0 .12rem rgba(148, 163, 184, .16), 0 10px 22px rgba(15, 23, 42, .08);
    outline: none;
}

.smooth-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smooth-select-chevron {
    width: .48rem;
    height: .48rem;
    justify-self: end;
    border-right: 2px solid #64748B;
    border-bottom: 2px solid #64748B;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.smooth-select-shell.is-open .smooth-select-chevron {
    transform: translateY(2px) rotate(225deg);
}

.smooth-select-menu {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    max-height: 240px;
    padding: .32rem;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #D7DEE8;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transform-origin: top;
    transition: opacity .16s ease, transform .18s ease;
}

.smooth-select-shell.is-open .smooth-select-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.smooth-select-option {
    min-height: 34px;
    padding: .45rem .65rem;
    color: #0F172A;
    font: inherit;
    font-size: .84rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    transition: background-color .14s ease, color .14s ease;
}

.smooth-select-option:hover,
.smooth-select-option:focus-visible {
    background: #F1F5F9;
    outline: none;
}

.smooth-select-option[aria-selected="true"] {
    color: var(--primary);
    background: #ECFDF5;
}

.smooth-select-shell.is-disabled .smooth-select-button {
    color: #64748B;
    background: #FFFFFF;
    border-color: #D7DEE8;
    box-shadow: none;
    cursor: default;
}

.employee-edit-form .form-control[readonly],
.employee-edit-form .form-select[readonly] {
    color: #64748B;
    background-color: #FFFFFF;
}

.employee-edit-form .form-control:disabled,
.employee-edit-form .form-select:disabled {
    color: #64748B;
    background-color: #FFFFFF;
    border-color: #CBD5E1;
    opacity: 1;
}

.employee-edit-form input[name="MName"]:disabled::placeholder {
    font-style: italic;
}

.optional-field-switch {
    position: absolute !important;
    top: calc(.45rem + 20px) !important;
    right: .55rem !important;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 22px;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    border-radius: 999px;
    transform: translateY(-50%) !important;
    cursor: pointer;
    transition: box-shadow .18s ease;
}

.employee-edit-form .has-inline-switch .form-control {
    padding-right: 3.2rem;
}

.optional-field-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.optional-switch-track {
    position: relative !important;
    inset: auto !important;
    width: 30px;
    height: 18px;
    flex: 0 0 30px;
    padding: 0 !important;
    background: #CBD5E1;
    border: 1px solid #B6C2D1;
    border-radius: 999px;
    transform: none !important;
    transition: background-color .18s ease, border-color .18s ease;
}

.optional-switch-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
    transform: translateY(-50%);
    transition: transform .18s ease;
}

.optional-field-switch.is-on {
    background: transparent !important;
    border-color: transparent;
}

.optional-field-switch.is-on .optional-switch-track {
    background: #BBF7D0;
    border-color: #86EFAC;
}

.optional-field-switch.is-on .optional-switch-track::after {
    transform: translate(12px, -50%);
}

.employee-status-toggle-field {
    position: relative;
}

.employee-status-toggle-field .employee-status-display {
    padding-right: 3.2rem;
    font-weight: 800;
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.employee-status-toggle-field.is-status-active .employee-status-display {
    color: #0F766E;
    background-color: #FFFFFF !important;
}

.employee-status-toggle-field.is-status-inactive .employee-status-display {
    color: #64748B;
    background-color: #FFFFFF !important;
}

.employee-status-toggle-field .status-field-switch {
    top: calc(.45rem + 20px) !important;
}

.employee-status-toggle-field .status-field-switch .optional-switch-track {
    background: #CBD5E1 !important;
    border-color: #B6C2D1 !important;
}

.employee-status-toggle-field .status-field-switch.is-on .optional-switch-track,
.employee-status-toggle-field .status-field-switch.optional-field-switch.is-on .optional-switch-track,
.employee-status-toggle-field .status-field-switch.is-on .optional-switch-track,
.employee-status-toggle-field .optional-field-switch.is-on .optional-switch-track {
    background: #BBF7D0 !important;
    border-color: #86EFAC !important;
}

.employee-status-toggle-field.is-status-confirming {
    z-index: 30;
}

.status-inline-confirm {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    right: auto;
    z-index: 35;
    display: grid;
    gap: .45rem;
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 2rem);
    padding: .78rem .85rem;
    color: #334155;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .16);
}

.status-inline-confirm[hidden] {
    display: none !important;
}

.status-inline-confirm strong {
    color: #0F172A;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.2;
}

.status-inline-confirm small {
    color: #64748B;
    font-size: .74rem;
    line-height: 1.35;
}

.status-inline-confirm small:empty {
    display: none;
}

.status-inline-confirm-actions {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-top: .32rem;
    width: 100%;
}

.status-inline-confirm .btn-sm {
    min-height: 28px;
    padding: .28rem .65rem;
    font-size: .74rem;
    border-radius: 9px;
}

.optional-field-switch:has(input:focus-visible) {
    box-shadow: 0 0 0 .14rem rgba(20, 184, 166, .18);
}

.employee-edit-form .edit-control.is-empty {
    background-color: #FFFFFF;
    border-color: #CBD5E1;
}

.employee-edit-form .edit-control.is-dirty {
    background-color: #FFFFFF;
    border-color: #CBD5E1;
}

.employee-edit-form label.is-empty > span:first-child,
.employee-edit-form .eligibility-field.is-empty > span:first-child {
    color: #DC2626 !important;
}

.employee-edit-form label.is-dirty > span:first-child,
.employee-edit-form .eligibility-field.is-dirty > span:first-child {
    color: #CA8A04 !important;
}

.employee-edit-form label.has-assignment-error > span:first-child {
    color: #DC2626 !important;
}

.employee-edit-form label.has-assignment-error > .form-control {
    border-color: #FCA5A5;
    box-shadow: 0 0 0 .12rem rgba(220, 38, 38, .12);
}

.employee-edit-form .employment-current-date-field.is-empty.has-floating-label > input[type="date"] {
    padding-top: 1rem;
    padding-bottom: .18rem;
}

.employee-edit-form .employee-date-field > span:first-child {
    font-weight: 500;
    background: var(--surface);
    transform: translateY(0) scale(1);
}

.employee-edit-form .employee-date-field > input[type="date"],
.employee-edit-form .employee-date-field.is-empty.has-floating-label > input[type="date"] {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.same-salary-grade-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
}

.same-salary-grade-dialog[hidden] {
    display: none !important;
}

.same-salary-grade-panel {
    width: min(430px, 100%);
    padding: 1.35rem;
    border: 1px solid #D9E2EF;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1.35rem 3rem rgba(15, 23, 42, .22);
    color: #172033;
}

.same-salary-grade-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto .85rem;
    border: 1px solid #FBBF24;
    border-radius: 50%;
    background: #FFF7ED;
    color: #D97706;
    font-size: 1.25rem;
    font-weight: 800;
}

.same-salary-grade-panel h2 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #172033;
    text-align: center;
}

.same-salary-grade-panel p {
    margin: 0;
    color: #475569;
    font-size: .92rem;
    line-height: 1.45;
    text-align: center;
}

.same-salary-grade-actions {
    display: flex;
    justify-content: center;
    gap: .65rem;
    margin-top: 1.2rem;
}

.same-salary-grade-actions .btn {
    min-width: 92px;
}

body.has-same-salary-grade-dialog {
    overflow: hidden;
}

.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .25rem 0 1rem;
}

@media (min-width: 721px) and (max-width: 1460px) {
    .content {
        overflow-y: auto;
    }

    .employee-edit-form {
        max-width: 780px;
        margin-inline: auto;
    }

    .employee-edit-form .edit-section {
        padding: 1rem;
    }

    .employee-edit-form .edit-grid,
    .employee-edit-form .personal-info-grid,
    .employee-edit-form .employment-info-grid,
    .employee-edit-form .other-info-grid,
    .employee-edit-form .education-info-grid,
    .employee-edit-form .personal-row,
    .employee-edit-form .personal-row-one,
    .employee-edit-form .personal-row-two,
    .employee-edit-form .personal-row-three,
    .employee-edit-form .employment-row,
    .employee-edit-form .employment-row-one,
    .employee-edit-form .employment-row-two,
    .employee-edit-form .other-row,
    .employee-edit-form .other-row-one,
    .employee-edit-form .other-row-two,
    .employee-edit-form .education-row,
    .employee-edit-form .education-row-one,
    .employee-edit-form .eligibility-list,
    .employee-edit-form .account-number-grid {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .employee-edit-form .edit-grid .wide,
    .employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label,
    .employee-edit-form .account-number-grid label {
        grid-column: auto;
        width: 100%;
        justify-self: stretch;
    }

    .employee-edit-form .employment-separator {
        display: none;
    }

    .employee-edit-form .eligibility-item {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        justify-self: stretch;
    }

    .employee-edit-form .eligibility-item.has-remove-button,
    .employee-edit-form .eligibility-item:has([data-remove-eligibility]) {
        grid-template-columns: minmax(0, 1fr) 38px;
    }

    .employee-edit-form .eligibility-add-button,
    .employee-edit-form .account-add-button {
        width: min(170px, 100%);
        justify-self: start;
    }
}

@media (min-width: 641px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 272px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {
        display: block;
        height: calc(100vh - 188px);
        overflow-y: auto;
    }

    .top-row {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .content {
        height: calc(100vh - 72px);
        padding: 1.35rem 1.5rem 2rem;
    }
}

@media (max-width: 720px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }

    body {
        font-size: .92rem;
    }

    .page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    main {
        min-height: auto;
        overflow: visible;
    }

    h1 {
        font-size: 1.25rem;
    }

    .brand-panel {
        min-height: 72px;
        padding: .75rem 1rem;
        justify-content: flex-start;
    }

    .brand-link {
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: .7rem;
        text-align: left;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        box-shadow: none;
    }

    .brand-logo img {
        width: 36px;
        height: 36px;
    }

    .brand-copy {
        display: block;
    }

    .brand-link strong {
        max-width: 200px;
        color: #f8fafc;
        font-size: .66rem;
        font-weight: 900;
        letter-spacing: .01em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .brand-link small {
        max-width: 200px;
        margin-top: .15rem;
        color: #cbd5e1;
        font-size: .66rem;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .navbar-toggler {
        top: 1rem;
        right: .85rem;
    }

    .nav-scrollable {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        padding: .55rem;
    }

    .top-row {
        min-height: auto;
        align-items: start;
        flex-direction: column;
        gap: .5rem;
        padding: .75rem;
        position: static;
    }

    .system-title strong {
        font-size: .9rem;
    }

    .system-title span {
        font-size: .74rem;
    }

    .system-title {
        display: none;
    }

    .top-account-bar {
        max-width: 100%;
        gap: .45rem;
    }

    .top-account-bar.is-employee-mode {
        position: absolute;
        top: 1rem;
        right: 4.35rem;
        z-index: 90;
    }

    .top-account-bar.is-employee-mode .account-menu {
        display: none;
    }

    .top-account-bar.is-employee-mode .notification-button {
        width: 2.35rem;
        height: 2.35rem;
        color: rgba(255, 255, 255, .86);
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .16);
        box-shadow: none;
    }

    .top-account-bar.is-employee-mode .notification-button .lucide-icon {
        width: 1.18rem;
        height: 1.18rem;
        flex-basis: 1.18rem;
    }

    .account-menu summary {
        max-width: 210px;
        min-height: 54px;
    }

    .account-avatar {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .account-identity strong,
    .account-identity small {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content {
        height: auto;
        overflow-y: visible;
        padding: .75rem;
    }

    .employee-hero {
        display: block;
        padding: 1.15rem;
        border-radius: 12px;
    }

    .employee-hero-id {
        margin-top: .85rem;
        font-size: 1rem;
    }

    .employee-hero h1 {
        margin-top: .35rem;
        font-size: clamp(1.22rem, 5.8vw, 1.62rem);
        letter-spacing: .02em;
    }

    .employee-hero p {
        margin-top: .45rem;
        color: #475569;
        font-size: .95rem;
        font-weight: 750;
        line-height: 1.35;
    }

    .employee-hero strong {
        margin-top: .3rem;
        color: #475569;
        font-size: .95rem;
        font-weight: 750;
        line-height: 1.35;
    }

    .employee-profile-id-link {
        min-width: 84px;
    }

    .employee-mobile-tabbar {
        position: fixed;
        left: .65rem;
        right: .65rem;
        bottom: .65rem;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .15rem;
        align-items: stretch;
        padding: .45rem;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 22px;
        background: rgba(7, 13, 24, .96);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .35);
        backdrop-filter: blur(16px);
    }

    .employee-mobile-tab,
    .employee-mobile-request-menu {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: .25rem;
        min-width: 0;
        min-height: 62px;
        padding: .35rem .2rem;
        border-radius: 16px;
        color: #AEB9C8;
        text-align: center;
    }

    .employee-mobile-request-menu .employee-mobile-tab {
        min-height: 0;
        padding: 0;
    }

    .employee-mobile-tab:hover,
    .employee-mobile-tab:focus-visible,
    .employee-mobile-request-menu[open] .employee-mobile-tab {
        color: #FFFFFF;
        background: rgba(255, 255, 255, .08);
    }

    .employee-mobile-tab.active {
        color: #FFFFFF;
        background: #113B67;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    .employee-mobile-tab strong {
        max-width: 100%;
        font-size: clamp(.58rem, 2.45vw, .72rem);
        font-weight: 800;
        line-height: 1.05;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .employee-portal {
        padding-bottom: 5.75rem;
        scroll-padding-bottom: 6.25rem;
    }

    .page-heading {
        align-items: start;
        flex-direction: column;
        gap: .55rem;
        margin-bottom: .75rem;
    }

    .page-heading p {
        font-size: .8rem;
    }

    .content-panel,
    .edit-section,
    .metric-card {
        margin: .75rem 0;
        padding: .85rem;
        border-radius: 14px;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .metric-card {
        min-height: 104px;
    }

    .metric-card strong {
        font-size: 1.35rem;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .dashboard-top-grid {
        height: auto;
        max-height: none;
    }

    .dashboard-overview-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .dashboard-tasks-panel {
        position: static;
        min-height: auto;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .gender-panel-heading {
        align-items: start;
    }

    .gender-panel-body {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .gender-side-tools {
        order: -1;
        width: 100%;
    }

    .gender-status-select {
        width: min(180px, 52%);
    }

    .gender-pie-wrap {
        width: min(230px, 76vw);
    }

    .gender-pie-legend {
        grid-template-columns: 1fr 1fr;
        gap: .5rem 1rem;
    }

    .employee-filter-form {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .records-toolbar {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .records-search-form,
    .report-search-form {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .search-composer,
    .filter-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .animated-search {
        justify-self: stretch;
        width: 38px;
    }

    .animated-search.is-open {
        width: 100%;
    }

    .leave-ledger-toolbar .leave-ledger-search {
        grid-column: 1;
        justify-self: stretch;
    }

    .filter-slide-panel {
        grid-template-columns: 1fr;
    }

    .filter-slide-panel.is-open {
        max-height: 520px;
    }

    .employee-records-table-wrap,
    .report-table-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .employee-records-table,
    .report-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 .75rem;
    }

    .employee-records-table thead,
    .report-table thead {
        display: none;
    }

    .employee-records-table tbody,
    .employee-records-table tr,
    .employee-records-table td,
    .report-table tbody,
    .report-table tr,
    .report-table td {
        display: block;
        width: 100%;
    }

    .employee-records-table tbody tr,
    .report-table tbody tr {
        padding: .75rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .employee-records-table tbody tr:hover td,
    .report-table tbody tr:hover td {
        background: transparent;
    }

    .employee-records-table td,
    .report-table td {
        display: grid;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        gap: .55rem;
        align-items: start;
        padding: .45rem 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .employee-records-table td::before,
    .report-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }

    .employee-records-table td.action-cell,
    .report-table td.action-cell,
    .employee-records-table td.center-cell,
    .report-table td.center-cell,
    .salary-cell {
        text-align: right;
    }

    .row-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        white-space: normal;
    }

    .row-actions .btn,
    .report-print-button {
        min-width: 0;
    }

    .employee-records-table-wrap,
    .report-table-wrap {
        margin-inline: -.1rem;
    }

    .employee-records-table tbody,
    .report-table tbody {
        display: grid;
        gap: .85rem;
    }

    .employee-records-table tbody tr,
    .report-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem .75rem;
        padding: .9rem;
        border-color: #DDE7F0;
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
    }

    .employee-records-table td,
    .report-table td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        min-width: 0;
    }

    .employee-records-table td::before,
    .report-table td::before {
        content: none;
    }

    .employee-records-table td[data-label="#"],
    .report-table td[data-label="#"] {
        display: none;
    }

    .employee-records-table td[data-label="ID No."],
    .report-table td[data-label="ID No."] {
        position: absolute;
        top: .9rem;
        right: .9rem;
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: 34%;
        min-height: 28px;
        padding: .25rem .55rem;
        color: #475569;
        font-size: .76rem;
        font-weight: 800;
        white-space: nowrap;
        background: #F1F5F9;
        border: 1px solid var(--border);
        border-radius: 999px;
    }

    .employee-records-table td[data-label="Employee Name"],
    .report-table td[data-label="Employee Name"] {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 5.75rem;
    }

    .employee-records-table td[data-label="Employee Name"] .employee-link,
    .report-table td[data-label="Employee Name"] .employee-link {
        display: block;
        color: #0F172A;
        font-size: .98rem;
        line-height: 1.25;
        overflow-wrap: normal;
        word-break: normal;
    }

    .employee-records-table td[data-label="Employee Name"] .employee-link strong,
    .report-table td[data-label="Employee Name"] .employee-link strong {
        display: block;
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
    }

    .employee-records-table td[data-label="Employee Name"] small,
    .report-table td[data-label="Employee Name"] small {
        margin-top: .2rem;
        font-size: .74rem;
    }

    .employee-records-table td[data-label="Position / Department"],
    .report-table td[data-label="Position / Department"] {
        grid-column: 1 / -1;
        padding: .65rem .7rem;
        border-radius: 12px;
        background: #F8FAFC;
        border: 1px solid #EEF2F7;
    }

    .employee-records-table td[data-label="Position / Department"] .position-text,
    .report-table td[data-label="Position / Department"] .position-text {
        font-size: .88rem;
        line-height: 1.35;
    }

    .employee-records-table td[data-label="SG-SI"],
    .employee-records-table td[data-label="Basic Salary"],
    .employee-records-table td[data-label="Status"],
    .report-table td[data-label="Hired Date / Years"],
    .report-table td[data-label="Birthdate"],
    .report-table td[data-label="Age"],
    .report-table td[data-label="Appointment Date"],
    .report-table td[data-label="SG-SI"] {
        display: grid;
        gap: .15rem;
        align-content: center;
        min-height: 54px;
        width: auto;
        padding: .5rem .6rem;
        text-align: left;
        border: 1px solid #E5EEF6;
        border-radius: 12px;
        background: #FFFFFF;
    }

    .employee-records-table td[data-label="SG-SI"]::before,
    .employee-records-table td[data-label="Basic Salary"]::before,
    .employee-records-table td[data-label="Status"]::before,
    .report-table td[data-label="Hired Date / Years"]::before,
    .report-table td[data-label="Birthdate"]::before,
    .report-table td[data-label="Age"]::before,
    .report-table td[data-label="Appointment Date"]::before,
    .report-table td[data-label="SG-SI"]::before {
        content: attr(data-label);
        display: block;
        color: #64748B;
        font-size: .64rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }

    .employee-records-table td[data-label="SG-SI"],
    .employee-records-table td[data-label="Basic Salary"],
    .employee-records-table td[data-label="Status"] {
        grid-column: span 1;
    }

    .employee-records-table td[data-label="SG-SI"] {
        grid-column: 1;
    }

    .employee-records-table td[data-label="Basic Salary"] {
        grid-column: 2;
        min-width: 0;
    }

    .employee-records-table td[data-label="Status"] {
        grid-column: 1 / -1;
    }

    .report-table td[data-label="Hired Date / Years"],
    .report-table td[data-label="Birthdate"],
    .report-table td[data-label="Age"],
    .report-table td[data-label="Appointment Date"],
    .report-table td[data-label="SG-SI"] {
        grid-column: span 1;
    }

    .report-table td[data-label="Hired Date / Years"] {
        grid-column: 1 / -1;
        max-width: 75%;
    }

    .report-table td[data-label="Birthdate"] {
        grid-column: 1;
    }

    .report-table td[data-label="Age"] {
        grid-column: 2;
    }

    .report-table td[data-label="Appointment Date"] {
        grid-column: 1;
    }

    .report-table td[data-label="SG-SI"] {
        grid-column: 2;
    }

    .report-table td[data-label="Age"],
    .report-table td[data-label="SG-SI"] {
        min-width: 0;
    }

    .employee-records-table td.action-cell,
    .report-table td.action-cell {
        grid-column: 1 / -1;
        padding-top: .55rem;
        border-top: 1px solid #EEF2F7;
        text-align: left;
    }

    .employee-records-table td.action-cell::before,
    .report-table td.action-cell::before {
        content: none;
    }

    .row-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
        justify-content: stretch;
        width: 100%;
    }

    .row-actions .action-button,
    .report-print-button {
        justify-content: center;
        width: 100%;
        min-height: 36px;
    }

    .inline-action-form {
        width: 100%;
    }

    .status-pill {
        width: max-content;
        min-width: 80px;
    }

    .pagination-row {
        align-items: stretch;
        flex-direction: column;
    }

    .report-header,
    .report-search-form {
        grid-template-columns: 1fr;
    }

    .report-header {
        align-items: stretch;
        gap: .65rem;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .edit-grid {
        grid-template-columns: 1fr;
    }

    .personal-info-grid,
    .employment-info-grid,
    .other-info-grid,
    .education-info-grid {
        grid-template-columns: 1fr;
    }

    .personal-row,
    .personal-row-one,
    .personal-row-two,
    .personal-row-three,
    .employment-row,
    .employment-row-one,
    .employment-row-two,
    .other-row,
    .other-row-one,
    .other-row-two,
    .education-row,
    .education-row-one,
    .eligibility-list,
    .account-number-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .personal-info-grid label,
    .employment-info-grid label,
    .other-info-grid label,
    .education-info-grid label,
    .account-number-grid label,
    .employee-id-field,
    .first-name-field,
    .middle-name-field,
    .last-name-field,
    .birthdate-field,
    .birthplace-field,
    .gender-field,
    .civil-status-field,
    .maiden-name-field,
    .name-extension-field,
    .address-field,
    .contact-field,
    .email-field,
    .employment-status-active-field,
    .employment-item-field,
    .employment-position-field,
    .employment-status-field,
    .employment-current-date-field,
    .employment-department-field,
    .employment-monthly-field,
    .employment-annual-field,
    .employment-hired-date-field,
    .employment-original-date-field,
    .employment-loyalty-override-date-field,
    .employment-loyalty-overrides-field,
    .emergency-person-field,
    .relationship-field,
    .emergency-number-field,
    .religion-field,
    .indigenous-field,
    .indigenous-specify-field,
    .solo-parent-field,
    .solo-parent-id-field,
    .blood-type-field,
    .height-field,
    .weight-field {
        grid-column: auto;
        width: 100%;
        margin-top: 0;
        justify-self: stretch;
    }

    .employment-separator {
        display: none;
    }

    .personal-info-grid label > span,
    .personal-row label > span,
    .employment-info-grid label > span,
    .employment-row label > span,
    .other-info-grid label > span,
    .other-row label > span,
    .education-info-grid label > span,
    .education-row label > span,
    .eligibility-field > span,
    .account-number-grid label > span {
        padding-left: .35rem;
    }

    .eligibility-item {
        grid-template-columns: minmax(0, 1fr);
        gap: .45rem;
    }

    .eligibility-item.has-remove-button,
    .eligibility-item:has([data-remove-eligibility]) {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .eligibility-add-button,
    .account-add-button {
        width: min(170px, 100%);
        justify-self: start;
    }

    .edit-grid .wide {
        grid-column: auto;
    }

    .edit-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .account-dialog,
    .psgc-dialog {
        width: calc(100vw - 1rem);
    }

    .account-dialog-actions,
    .psgc-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .print-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: .75rem;
    }

    .print-page {
        padding: .75rem;
        overflow-x: hidden;
    }

    .print-document {
        width: 100%;
        min-height: auto;
        padding: .8in;
        overflow-wrap: anywhere;
    }

    .step-increment-document,
    .loyalty-document {
        width: 100%;
        min-height: auto;
        padding: .8in;
    }

    .step-notice-header,
    .loyalty-header {
        grid-template-columns: .72in 1fr;
        gap: .12in;
    }

    .step-notice-header img,
    .loyalty-header img {
        width: .58in;
        height: .58in;
        justify-self: start;
        margin-right: 0;
    }

    .step-notice-header div,
    .loyalty-header div {
        grid-column: 2;
    }

    .step-notice-header p,
    .step-notice > p,
    .step-salary-grid p,
    .step-footer p,
    .loyalty-header p,
    .loyalty-body-line {
        font-size: .78rem;
    }

    .step-notice-header h3,
    .loyalty-header h3 {
        font-size: .84rem;
    }

    .step-notice-header h4,
    .loyalty-header h4 {
        font-size: .92rem;
    }

    .step-notice > h2,
    .loyalty-certification > h2 {
        font-size: 1rem;
    }

    .step-salary-grid {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .step-salary-values {
        grid-template-rows: none;
        gap: .35rem;
        padding-top: 0;
    }

    .loyalty-certify-line,
    .loyalty-body-line {
        width: auto;
        margin-left: 0;
        text-align: left;
        text-align-last: auto;
        word-spacing: normal;
        white-space: normal;
    }

    .loyalty-table {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        font-size: .72rem;
    }

    .detail-list {
        grid-template-columns: 1fr;
    }

    .detail-list dt {
        margin-top: .2rem;
    }
}

.universal-print-header img {
    grid-column: 1 !important;
    justify-self: end !important;
    margin-right: 0 !important;
    transform: translateX(.28in) !important;
}

@media (max-width: 1180px) {
    .employee-records-table-wrap {
        display: none !important;
    }

    .employee-mobile-list {
        display: block;
        padding-bottom: 110px;
    }
}

@media (max-width: 420px) {
    .employee-mobile-card {
        padding: .85rem;
        border-radius: 14px;
    }

    .employee-mobile-name-row {
        display: block;
    }

    .employee-mobile-employment {
        margin-top: .6rem;
        text-align: left;
    }

    .employee-mobile-actions {
        gap: .45rem;
    }

    .employee-mobile-actions .btn {
        min-height: 36px;
        padding-inline: .35rem;
        font-size: .73rem;
    }
}

/* Step Increment font sizes matched exactly to the COE document.
   This block changes font sizes only; existing colors, weights and layout are preserved. */
.step-notice-header p {
    font-size: 14px !important;
}

.step-notice-header h3 {
    font-size: 15px !important;
}

.step-notice-header h4 {
    font-size: 17px !important;
}

.step-notice > h2,
.step-notice > h2.step-notice-title-match {
    font-size: 24px !important;
}

.step-notice-content-match,
.step-notice-date span,
.step-notice-date small,
.step-employee-block strong,
.step-employee-block span,
.step-notice-content-match > p,
.step-notice-content-match .step-salary-grid p,
.step-notice-content-match .step-salary-values strong,
.step-notice-content-match .step-signature p,
.step-notice-content-match .step-signature strong,
.step-notice-content-match .step-signature span,
.step-notice-content-match .step-footer p {
    font-size: 15px !important;
}

@media print {
    .step-notice-header p {
        font-size: 15px !important;
    }

    .step-notice-header h3 {
        font-size: 15px !important;
    }

    .step-notice-header h4 {
        font-size: 17px !important;
    }

    .step-notice > h2,
    .step-notice > h2.step-notice-title-match {
        font-size: 24px !important;
    }

    .step-notice-content-match,
    .step-notice-date span,
    .step-notice-date small,
    .step-employee-block strong,
    .step-employee-block span,
    .step-notice-content-match > p,
    .step-notice-content-match .step-salary-grid p,
    .step-notice-content-match .step-salary-values strong,
    .step-notice-content-match .step-signature p,
    .step-notice-content-match .step-signature strong,
    .step-notice-content-match .step-signature span,
    .step-notice-content-match .step-footer p {
        font-size: 15px !important;
    }
}


/* ============================================================
   STEP INCREMENT NOTICE — COMPLETE REBUILD
   Unique si-* selectors intentionally isolate this document from
   all legacy .step-notice rules and responsive overrides.
   Font sizes match the COE print hierarchy exactly:
   letterhead 14/15/17px, title 24px, body 15px.
   ============================================================ */
.si-document {
    width: 100%;
    min-height: calc(297mm - 1.6in);
    box-sizing: border-box;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.35;
    color: #000;
}

.si-document, .si-document * {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    color: #000;
    box-sizing: border-box;
}

.si-letterhead {
    display: grid;
    grid-template-columns: 1.25in 1fr 1.25in;
    align-items: start;
    margin: 0 0 34px;
}

.si-letterhead img {
    width: .9in;
    height: .9in;
    grid-column: 1;
    justify-self: end;
    margin-right: .16in;
    object-fit: contain;
}

.si-letterhead-text {
    grid-column: 2;
    text-align: center;
}

.si-letterhead-text p,
.si-letterhead-text h3,
.si-letterhead-text h4 {
    margin: 0;
    padding: 0;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    color: #000;
}

.si-letterhead-text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

.si-letterhead-text h3 {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.si-letterhead-text h4 {
    margin-top: 20px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.si-title {
    margin: 0 0 38px;
    padding: 0;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: #000;
}

.si-date {
    width: 150px;
    margin: 0 0 34px auto;
    display: grid;
    gap: 2px;
    text-align: center;
    font-size: 15px;
    line-height: 1.25;
}

.si-recipient {
    display: grid;
    gap: 1px;
    margin: 0 0 30px;
    font-size: 15px;
    line-height: 1.25;
}

.si-recipient strong {
    font-size: 15px;
    font-weight: 700;
}

.si-paragraph {
    margin: 0 0 24px;
    padding: 0;
    font-size: 15px;
    line-height: 1.35;
}

.si-justified {
    text-align: justify;
}

.si-salary-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 125px;
    column-gap: 24px;
    margin: 0 0 24px 30px;
    font-size: 15px;
    line-height: 1.3;
}

.si-salary-labels,
.si-salary-values {
    display: grid;
    grid-template-rows: repeat(3, 58px);
}

.si-salary-labels > div {
    display: grid;
    align-content: start;
}

.si-indent {
    display: block;
    padding-left: 18px;
}

.si-salary-values strong {
    align-self: start;
    justify-self: end;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
}

.si-understanding {
    margin-top: 4px;
}

.si-signature {
    width: 205px;
    margin: 28px 0 34px auto;
    font-size: 15px;
    line-height: 1.3;
}

.si-signature p {
    margin: 0 0 42px;
}

.si-signature strong,
.si-signature span {
    display: block;
    font-size: 15px;
}

.si-signature strong {
    font-weight: 700;
}

.si-footer {
    font-size: 15px;
    line-height: 1.25;
}

.si-footer p {
    margin: 0 0 3px;
    padding: 0;
    font-size: 15px;
}

.si-footer p:nth-child(3) {
    margin-bottom: 14px;
}

@media print {
    .si-document {
        width: 100%;
        min-height: 0;
        font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
        font-size: 15px !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .si-document * {
        font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
        color: #000 !important;
    }

    .si-letterhead-text p { font-size: 14px !important; }
    .si-letterhead-text h3 { font-size: 15px !important; }
    .si-letterhead-text h4 { font-size: 17px !important; }
    .si-title { font-size: 24px !important; }

    .si-date,
    .si-recipient,
    .si-recipient strong,
    .si-paragraph,
    .si-salary-table,
    .si-salary-values strong,
    .si-signature,
    .si-signature strong,
    .si-signature span,
    .si-footer,
    .si-footer p {
        font-size: 15px !important;
    }
}

/* ================================================================
   MODERN HR DASHBOARD - GLOBAL FALLBACK
   Kept in app.css so the dashboard works even when Blazor scoped CSS
   is not generated/served by the current deployment/startup method.
   ================================================================ */
.modern-dashboard {
    --dash-surface: #ffffff;
    --dash-border: #e3e9f0;
    --dash-text: #172033;
    --dash-muted: #68758a;
    --dash-primary: #127c72;
    --dash-primary-dark: #0e665e;
    --dash-soft: #edf9f6;
    display: grid;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    padding-bottom: 1.25rem;
}

.dashboard-welcome {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 150px;
    padding: 1.45rem 1.65rem;
    color: #fff;
    border-radius: 22px;
    background: linear-gradient(125deg, #0d625b 0%, #13877b 55%, #1aa091 100%);
    box-shadow: 0 18px 42px rgba(13, 98, 91, .2);
}

.dashboard-welcome::before,
.dashboard-welcome::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.dashboard-welcome::before {
    width: 260px;
    height: 260px;
    right: -70px;
    top: -155px;
}

.dashboard-welcome::after {
    width: 160px;
    height: 160px;
    right: 170px;
    bottom: -105px;
}

.welcome-eyebrow,
.card-kicker {
    display: block;
    margin-bottom: .25rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.welcome-eyebrow { color: rgba(255, 255, 255, .72); }

.dashboard-welcome h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 760;
    letter-spacing: -.035em;
}

.dashboard-welcome p {
    max-width: 720px;
    margin: .45rem 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    line-height: 1.55;
}

.welcome-date {
    flex: 0 0 auto;
    min-width: 170px;
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    text-align: right;
}

.welcome-date span,
.welcome-date strong { display: block; }
.welcome-date span { color: rgba(255,255,255,.7); font-size: .74rem; }
.welcome-date strong { margin-top: .12rem; color: #fff; font-size: .92rem; }

.summary-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) repeat(6, minmax(105px, 1fr));
    gap: .55rem;
    width: 100%;
    min-width: 0;
}

.summary-card {
    position: relative;
    overflow: hidden;
    display: flex;
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: 0 9px 25px rgba(20, 35, 55, .055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--summary-color, var(--dash-primary)) 35%, #dbe4ec);
    box-shadow: 0 15px 30px rgba(20, 35, 55, .09);
}

.summary-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.summary-label { display: block; overflow: hidden; color: var(--dash-muted); font-size: .74rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.summary-card strong { display: block; margin-top: .12rem; color: var(--dash-text); font-size: 1.65rem; line-height: 1; letter-spacing: -.04em; }
.summary-dot { width: .62rem; height: .62rem; border-radius: 999px; background: var(--summary-color, var(--dash-primary)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--summary-color, var(--dash-primary)) 13%, transparent); }
.summary-percentage, .summary-trend { color: var(--dash-muted); font-size: .67rem; font-weight: 750; }
.summary-progress { height: 4px; overflow: hidden; border-radius: 999px; background: #edf1f5; }
.summary-progress span { display: block; width: var(--summary-width); height: 100%; border-radius: inherit; background: var(--summary-color, var(--dash-primary)); }

.summary-total {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg, #127c72, #0f695f);
}
.summary-total .summary-label,
.summary-total .summary-trend { color: rgba(255,255,255,.75); }
.summary-total strong { color: #fff; }
.summary-icon.people { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.15); }
.summary-icon.people::before { content: ""; display: block; width: 14px; height: 14px; margin: 7px auto 0; border: 2px solid #fff; border-radius: 999px 999px 7px 7px; }
.summary-accent { position: absolute; right: -28px; bottom: -34px; width: 105px; height: 105px; border-radius: 999px; background: rgba(255,255,255,.08); }



.summary-cos {
    --summary-color: #2563eb;
    color: inherit;
    text-decoration: none;
    border-color: color-mix(in srgb, #2563eb 20%, var(--dash-border));
    background: linear-gradient(145deg, color-mix(in srgb, #2563eb 7%, var(--dash-surface)), var(--dash-surface));
}
.summary-cos:hover { color: inherit; text-decoration: none; border-color: color-mix(in srgb, #2563eb 45%, var(--dash-border)); }
.summary-icon.cos {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, #2563eb 12%, transparent);
}
.summary-icon.cos::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 7px;
    width: 12px;
    height: 14px;
    border: 2px solid #2563eb;
    border-radius: 3px;
}
.summary-icon.cos::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 7px;
    height: 2px;
    background: #2563eb;
    box-shadow: 0 4px 0 #2563eb;
}
.summary-personnel-label { color: #2563eb; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.summary-card-note { color: var(--dash-muted); font-size: .64rem; font-weight: 650; line-height: 1.2; }

.dashboard-priority-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    gap: 1rem;
    align-items: stretch;
}

.dashboard-card {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--dash-border);
    border-radius: 20px;
    background: var(--dash-surface);
    box-shadow: 0 10px 28px rgba(20, 35, 55, .055);
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.card-kicker { color: var(--dash-primary); }
.card-header h2 { margin: 0; color: var(--dash-text); font-size: 1.05rem; font-weight: 760; letter-spacing: -.015em; }
.card-header p { margin: .3rem 0 0; color: var(--dash-muted); font-size: .78rem; }
.count-badge { display: inline-flex; min-width: 32px; min-height: 32px; align-items: center; justify-content: center; padding: .25rem .6rem; color: #fff; border-radius: 999px; background: var(--dash-primary); font-size: .76rem; font-weight: 800; }
.count-badge.subtle { color: var(--dash-primary); background: var(--dash-soft); }

.tasks-card { max-height: 470px; display: flex; flex-direction: column; }
.modern-task-list { display: grid; gap: .65rem; min-height: 0; overflow-y: auto; padding-right: .18rem; }
.modern-task-item { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: .75rem; padding: .78rem; border: 1px solid #e7edf2; border-radius: 14px; background: #fbfcfd; transition: border-color .15s ease, background .15s ease; }
.modern-task-item:hover { border-color: #B7D8D3; background: #f8fdfc; }
.task-marker { border-radius: 999px; background: linear-gradient(#19a391, #127c72); }
.task-heading-row { display: flex; justify-content: space-between; gap: .75rem; }
.task-category { color: var(--dash-primary); font-size: .67rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.task-date { color: var(--dash-muted); font-size: .68rem; font-weight: 700; }
.task-employee { display: inline-block; margin-top: .2rem; color: var(--dash-text); font-size: .85rem; font-weight: 750; text-decoration: none; }
.task-employee:hover { color: var(--dash-primary); }
.task-content p { margin: .25rem 0 0; color: var(--dash-muted); font-size: .74rem; line-height: 1.35; }
.task-actions-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .62rem; }
.task-view-button, .task-done-button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: .32rem .68rem; border-radius: 9px; font: inherit; font-size: .7rem; font-weight: 750; text-decoration: none; }
.task-view-button { color: #3b4a60; border: 1px solid #dce4eb; background: #fff; }
.task-done-button { color: #fff; border: 1px solid var(--dash-primary); background: var(--dash-primary); }
.task-view-button:hover { color: var(--dash-primary); border-color: #8FC7BF; }
.task-done-button:hover { background: var(--dash-primary-dark); }

.workforce-card { min-height: 390px; }
.workforce-body { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(135px, .65fr); gap: 1rem; align-items: center; min-height: 290px; }
.gender-chart-wrap { position: relative; width: min(260px, 100%); aspect-ratio: 1; margin: auto; }
.gender-pie-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 12px 20px rgba(23, 32, 51, .08)); }
.gender-donut-caption { fill: var(--dash-muted); font-size: 5px; font-weight: 650; }
.gender-stat-list { display: grid; gap: .7rem; }
.gender-stat { padding: .75rem; border: 1px solid #e5ebf0; border-radius: 14px; background: #fbfcfd; }
.gender-stat span { display: flex; align-items: center; gap: .4rem; color: var(--dash-muted); font-size: .72rem; font-weight: 700; }
.gender-stat i { width: .52rem; height: .52rem; border-radius: 999px; }
.male-stat i { background: #38bdf8; }
.female-stat i { background: #ec4899; }
.gender-stat strong { display: block; margin-top: .28rem; color: var(--dash-text); font-size: 1.15rem; }
.gender-stat small { color: var(--dash-muted); font-size: .7rem; }

.appointments-card { overflow: hidden; }
.appointment-header { align-items: center; }
.appointment-controls { display: flex; align-items: center; gap: 1rem; }
.chart-legend { display: flex; gap: .75rem; color: var(--dash-muted); font-size: .7rem; font-weight: 700; }
.chart-legend span { display: flex; align-items: center; gap: .35rem; }
.chart-legend i { width: .55rem; height: .55rem; border-radius: 3px; }
.chart-legend .regular { background: #38bdf8; }
.chart-legend .casual { background: #f97316; }
.modern-appointment-chart { min-width: 0; padding-top: .2rem; }

.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); gap: 1rem; align-items: start; }
.records-card { overflow: hidden; }
.history-list { display: grid; gap: .25rem; }
.history-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .65rem .3rem; border-bottom: 1px solid #edf1f4; }
.history-item:last-child { border-bottom: 0; }
.history-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: var(--dash-primary); border-radius: 11px; background: var(--dash-soft); font-size: .78rem; font-weight: 850; }
.history-item strong { display: block; overflow: hidden; color: var(--dash-text); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.history-item small { display: block; margin-top: .12rem; overflow: hidden; color: var(--dash-muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.history-item time { color: var(--dash-muted); font-size: .65rem; font-weight: 650; white-space: nowrap; }

.empty-state { display: grid; justify-items: center; align-content: center; min-height: 220px; padding: 1rem; text-align: center; }
.empty-state.compact { min-height: 170px; }
.empty-state strong { color: var(--dash-text); font-size: .9rem; }
.empty-state p { margin: .25rem 0 0; color: var(--dash-muted); font-size: .76rem; }
.empty-check { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: .55rem; color: var(--dash-primary); border-radius: 999px; background: var(--dash-soft); font-weight: 900; }

.dashboard-error { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid #fecaca; border-radius: 16px; background: #fff7f7; }
.dashboard-error strong, .dashboard-error span { display: block; }
.dashboard-error strong { color: #9f1239; }
.dashboard-error span { margin-top: .15rem; color: #7f1d1d; font-size: .8rem; }
.dashboard-error button { padding: .5rem .8rem; color: #fff; border: 0; border-radius: 10px; background: #be123c; font-weight: 750; }

.dashboard-loading { display: grid; gap: 1rem; }
.loading-hero, .loading-cards span, .loading-panels span { overflow: hidden; border-radius: 18px; background: linear-gradient(100deg, #edf1f4 25%, #f7f9fa 40%, #edf1f4 55%) 0 0 / 220% 100%; animation: dashboard-shimmer 1.35s infinite linear; }
.loading-hero { height: 150px; }
.loading-cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: .8rem; }
.loading-cards span { height: 120px; }
.loading-panels { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1rem; }
.loading-panels span { height: 390px; }
@keyframes dashboard-shimmer { to { background-position-x: -220%; } }

::deep .dashboard-picker-button,
::deep .chart-year-select { min-height: 36px; border-radius: 10px; box-shadow: none; }
::deep .new-hired-chart-frame { min-width: 650px; }
::deep .new-hired-plot { height: 235px; border-bottom-color: #dfe6ec; }
::deep .new-hired-y-axis { height: 235px; }
::deep .month-labels { min-width: 650px; }
::deep .gender-slice { transition: transform .18s ease, filter .18s ease; }
::deep .gender-pie-tooltip { border-radius: 9px; }
::deep .records-card .content-panel { margin: 0; padding: 0; border: 0; box-shadow: none; }

@media (max-width: 1450px) {
    .summary-grid {
        grid-template-columns: 1.18fr repeat(6, minmax(0, 1fr));
        gap: .62rem;
    }
    .summary-card {
        min-height: 116px;
        padding: .82rem;
        border-radius: 16px;
    }
    .summary-card strong { font-size: 1.42rem; }
    .summary-label { font-size: .68rem; }
    .summary-personnel-label { font-size: .58rem; }
    .summary-card-note { font-size: .56rem; }
    .summary-icon.people { width: 30px; height: 30px; }
    .summary-icon.cos { width: 29px; height: 29px; }
}

@media (max-width: 760px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-total { grid-column: span 2; }
}

@media (max-width: 1120px) {
    .dashboard-priority-grid,
    .dashboard-lower-grid { grid-template-columns: 1fr; }
    .tasks-card { max-height: none; }
    .modern-task-list { max-height: 420px; }
    .workforce-body { grid-template-columns: minmax(220px, .8fr) minmax(180px, .5fr); }
}

@media (max-width: 820px) {
    .modern-dashboard { gap: .8rem; }
    .dashboard-welcome { align-items: flex-start; min-height: 0; padding: 1.2rem; }
    .welcome-date { min-width: 0; }
    .summary-card { min-height: 108px; }
    .appointment-header { align-items: flex-start; }
    .appointment-controls { align-items: flex-end; flex-direction: column-reverse; }
    .modern-appointment-chart { overflow-x: auto; padding-bottom: .45rem; }
}

@media (max-width: 600px) {
    .dashboard-welcome { border-radius: 17px; }
    .dashboard-welcome p { font-size: .8rem; }
    .welcome-date { display: none; }
    .summary-card { min-height: 105px; padding: .85rem; border-radius: 15px; }
    .summary-card strong { font-size: 1.4rem; }
    .dashboard-card { padding: .9rem; border-radius: 16px; }
    

.dashboard-priority-grid { display: contents; }
    .tasks-card { order: 1; }
    .workforce-card { order: 2; min-height: 0; }
    .appointments-card { order: 3; }
    .dashboard-lower-grid { display: contents; }
    .records-card { order: 4; }
    .history-card { order: 5; }
    .workforce-body { grid-template-columns: 1fr; min-height: 0; }
    .gender-chart-wrap { width: min(230px, 75vw); }
    .gender-stat-list { grid-template-columns: 1fr 1fr; }
    .card-header { gap: .65rem; }
    .card-header h2 { font-size: .98rem; }
    .appointment-header { flex-direction: column; }
    .appointment-controls { width: 100%; align-items: center; flex-direction: row; justify-content: space-between; }
    .chart-legend { gap: .55rem; }
    .task-heading-row { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .task-actions-row > * { flex: 1 1 auto; }
    .history-item { grid-template-columns: 34px minmax(0, 1fr); }
    .history-item time { grid-column: 2; }
}

/* Dashboard native selectors: reliable on first navigation and touch devices. */
.dashboard-native-select {
    min-height: 38px;
    padding: .48rem 2.15rem .48rem .78rem;
    border: 1px solid var(--dash-border);
    border-radius: 11px;
    color: var(--dash-text);
    background-color: var(--dash-surface);
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    box-shadow: 0 4px 12px rgba(20, 35, 55, .05);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.dashboard-native-select:hover,
.dashboard-native-select:focus {
    border-color: color-mix(in srgb, var(--dash-primary) 50%, var(--dash-border));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-primary) 12%, transparent);
}

.chart-year-native-select { width: 96px; }
.gender-status-select { max-width: 100%; }

/* Contract of Service icon: personnel group instead of document. */
.summary-icon.cos {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, #2563eb 12%, transparent);
}

.summary-icon.cos::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    width: 7px;
    height: 7px;
    border: 2px solid #2563eb;
    border-radius: 50%;
    box-shadow: 10px 2px 0 -1px color-mix(in srgb, #2563eb 18%, transparent), 10px 2px 0 1px #2563eb;
}

.summary-icon.cos::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 6px;
    width: 13px;
    height: 7px;
    border: 2px solid #2563eb;
    border-radius: 9px 9px 4px 4px;
    box-shadow: 9px 0 0 -1px color-mix(in srgb, #2563eb 14%, transparent), 9px 0 0 1px #2563eb;
}

/* ================================================================
   2026-06-12 UI shell refresh
   Sidebar and app chrome overrides kept global for deployments that
   do not serve the Blazor scoped layout bundle immediately.
   ================================================================ */
.page {
    background: #F5F7FA;
}

.sidebar {
    background: #F3F5F8;
    border-right: 1px solid #D9DEE7;
    box-shadow: 8px 0 22px rgba(39, 49, 66, .05);
}

.brand-panel {
    min-height: 158px;
    justify-content: center;
    padding: 1.15rem 1rem;
    border-bottom: 1px solid #DDE2EA;
}

.brand-link {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    color: #374151;
    text-align: center;
}

.brand-logo {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    border: 1px solid #E4E8EF;
    box-shadow: 0 10px 22px rgba(39, 49, 66, .08);
}

.brand-logo img {
    width: 104px;
    height: 104px;
}

.brand-copy {
    display: none;
}

.brand-link strong {
    color: #374151;
    font-size: .9rem;
    font-weight: 650;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-link small {
    color: #6B7280;
    font-size: .78rem;
    font-weight: 600;
}

.navbar-toggler {
    color: #4B5563;
    border-color: #D5DBE5;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2875,85,99,.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.1' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.55rem #FFFFFF;
}

.navbar-toggler:checked {
    background-color: rgba(255, 255, 255, .14);
}

.nav-scrollable {
    padding: .75rem .8rem 1rem;
}

.nav-section-title,
.nav-cos-break {
    color: #A3AAB6;
    font-weight: 600;
}

.nav-cos-break::after {
    background: #D5DBE5;
}

.nav-item .nav-link,
.nav-reports-toggle {
    min-height: 44px;
    padding: .68rem .78rem;
    color: #454B5B;
    border-radius: 12px;
    font-weight: 500;
}

.nav-reports-toggle {
    position: relative;
    padding-right: 2.1rem;
}

.nav-reports-toggle::after {
    content: "";
    position: absolute;
    right: .85rem;
    width: .42rem;
    height: .42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .78;
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.nav-item .nav-link:hover,
.nav-reports-toggle:hover,
.nav-reports-toggle:focus {
    color: #303747;
    background: #E8EDF3;
}

.nav-item a.active {
    color: #FFFFFF;
    background: #0F766E;
    box-shadow: 0 8px 18px rgba(9, 168, 182, .24);
}

.nav-item a.active:hover {
    color: #FFFFFF;
    background: #0795A3;
}

.nav-reports-group[open] .nav-reports-toggle {
    color: #303747;
    background: #E8EDF3;
    box-shadow: inset 3px 0 0 #0F766E;
}

.nav-reports-group[open] .nav-reports-toggle::after {
    transform: rotate(225deg);
}

.nav-submenu {
    gap: .18rem;
    margin: .38rem 0 .72rem 1.18rem;
    padding-left: .9rem;
    border-left: 1px solid #D5DBE5;
}

.nav-submenu-link {
    color: #606878;
    font-weight: 500;
}

.nav-submenu-link:hover,
.nav-submenu-link.active {
    color: #087E8C;
    background: #E7F8FA;
}

.top-row {
    min-height: 72px;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(203, 213, 225, .82);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
    backdrop-filter: blur(14px);
}

.content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 220px),
        #F5F7FA;
}

@media (min-width: 641px) {
    .sidebar {
        width: 260px;
    }

    .nav-scrollable {
        height: calc(100vh - 158px);
        scrollbar-color: rgba(148, 163, 184, .45) transparent;
    }
}

/* Department reference: division entry and editable section list. */
.reference-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.reference-division-popup {
    width: min(820px, calc(100vw - 2rem));
}

.reference-division-manager-popup {
    width: min(1120px, calc(100vw - 2rem));
    max-width: min(1120px, calc(100vw - 2rem));
}

.reference-division-manager-department {
    padding-bottom: 1rem;
}

.reference-division-manager-department-form,
.reference-division-selection-form {
    margin: 0;
}

.reference-division-manager-department label {
    display: grid;
    grid-template-columns: 145px minmax(260px, 1fr);
    align-items: center;
    gap: .8rem;
    margin: 0;
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
}

.reference-division-manager-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
}

.reference-division-manager-panel {
    min-width: 0;
}

.reference-division-manager-panel .reference-division-section-table-wrap {
    max-height: min(310px, 34vh);
}

.reference-division-manager-table th:last-child,
.reference-division-manager-table td:last-child {
    width: 104px;
    text-align: center;
}

.reference-division-manager-table tbody tr.is-selected > td {
    background: #DDF7F2 !important;
}

.reference-division-manager-table tbody tr.is-selected > td:first-child {
    box-shadow: inset 4px 0 0 #0F766E;
}

.reference-division-manager-table tbody tr.is-selected .reference-division-name-button {
    color: #0B5F59;
    font-weight: 900;
}

.reference-division-entry-row td {
    background: #F8FAFC;
}

.reference-division-entry-row .form-control,
.reference-division-manager-table .form-control {
    min-height: 36px;
    font-size: .8rem;
}

.reference-division-manager-table .reference-remarks-input {
    width: 100%;
    min-height: 96px;
    margin-top: .55rem;
    padding: .65rem .75rem;
    resize: vertical;
    line-height: 1.45;
    white-space: pre-wrap;
}

.reference-division-entry-row .action-cell,
.reference-division-manager-table tr:has(.reference-remarks-input) .action-cell {
    vertical-align: top;
    padding-top: 1rem;
}

.reference-divisions-heading-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.reference-division-popup-grid {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(300px, 1.55fr);
    gap: .85rem;
}

.reference-division-name-field {
    grid-column: 1 / -1;
}

.reference-division-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.reference-division-section-heading h3,
.reference-division-section-heading p {
    margin: 0;
}

.reference-division-section-heading h3 {
    color: #0F766E;
    font-size: .94rem;
    font-weight: 800;
}

.reference-division-section-heading p {
    margin-top: .16rem;
    color: #64748B;
    font-size: .76rem;
}

.reference-section-add-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
}

.reference-section-add-button > span {
    color: #0F766E;
    font-size: 1rem;
    font-weight: 900;
}

.reference-division-section-table-wrap {
    max-height: 285px;
    overflow: auto;
    border: 1px solid #DCE6EF;
    border-radius: 12px;
}

.reference-division-section-table {
    width: 100%;
    margin: 0;
}

.reference-division-section-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F5F8FB;
}

.reference-division-section-table th:first-child,
.reference-division-section-table td:first-child {
    width: 54px;
    text-align: center;
}

.reference-division-section-table th:last-child,
.reference-division-section-table td:last-child {
    width: 82px;
    text-align: center;
}

.reference-division-section-table td {
    vertical-align: middle;
}

.reference-division-section-table .form-control {
    width: 100%;
}

.reference-department-division-table th:nth-child(2),
.reference-department-division-table td:nth-child(2) {
    width: 120px;
    text-align: center;
}

.reference-department-division-table th:nth-child(3),
.reference-department-division-table td:nth-child(3) {
    width: auto;
}

.reference-department-division-table th:last-child,
.reference-department-division-table td:last-child {
    width: auto;
    text-align: left;
}

.reference-division-section-tags {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.reference-division-section-tags > span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: .25rem .55rem;
    border: 1px solid #CFE5E2;
    border-radius: 999px;
    color: #0F766E;
    background: #F0FDFA;
    font-size: .73rem;
    font-weight: 700;
}

.reference-division-no-sections {
    color: #94A3B8;
    font-size: .78rem;
}

.reference-department-division-table .reference-division-empty-state {
    width: auto;
    padding: 1.15rem;
    color: #64748B;
    text-align: center;
}

.reference-division-name-button {
    appearance: none;
    padding: 0;
    border: 0;
    color: #0F766E;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.reference-division-name-button:hover {
    color: #115E59;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reference-division-name-button:focus-visible {
    border-radius: 5px;
    outline: 3px solid rgba(20, 184, 166, .22);
    outline-offset: 3px;
}

.reference-division-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(2px);
}

.reference-division-detail-backdrop.is-open {
    display: flex;
}

.reference-division-detail-modal {
    width: min(620px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 16px;
    overflow: auto;
    border: 1px solid #D7E2EC;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .2);
}

.reference-division-detail-modal .reference-popup-heading {
    position: relative;
    padding-right: 2.5rem;
}

.reference-division-detail-close {
    position: absolute;
    top: .8rem;
    right: .85rem;
    width: 34px;
    height: 34px;
    border: 1px solid #D7E2EC;
    border-radius: 10px;
    color: #475569;
    background: #FFFFFF;
    font-size: 1.3rem;
    line-height: 1;
}

.reference-division-detail-close:hover {
    color: #0F766E;
    border-color: #99D5CE;
    background: #F0FDFA;
}

.reference-division-detail-table th:last-child,
.reference-division-detail-table td:last-child {
    width: auto;
    text-align: left;
}

.reference-division-detail-table .reference-division-empty-state {
    padding: 1.25rem;
    color: #64748B;
    text-align: center;
}

.reference-division-detail-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
}

@media (max-width: 720px) {
    .reference-heading-actions {
        width: 100%;
        justify-content: stretch;
    }

    .reference-heading-actions .reference-heading-action-button {
        flex: 1 1 0;
        justify-content: center;
    }

    .reference-division-popup-grid {
        grid-template-columns: 1fr;
    }

    .reference-division-manager-department label,
    .reference-division-manager-panels {
        grid-template-columns: 1fr;
    }

    .reference-division-manager-panel .reference-division-section-table-wrap {
        height: auto;
        max-height: 320px;
    }

    .reference-division-name-field {
        grid-column: auto;
    }

    .reference-division-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .reference-section-add-button {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .brand-panel {
        min-height: 72px;
        justify-content: flex-start;
        padding: .75rem 1rem;
        background: #F3F5F8;
    }

    .brand-link {
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: .72rem;
        text-align: left;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        box-shadow: none;
    }

    .brand-logo img {
        width: 36px;
        height: 36px;
    }

    .brand-link strong,
    .brand-link small {
        max-width: 210px;
        font-size: .66rem;
    }
}

body,
.content,
.content-panel,
.page-heading,
.top-row,
.system-title strong,
.account-identity strong,
.table,
.form-control,
.form-select {
    color: #374151;
}

.system-title strong,
.page-heading h1,
.content-panel h2,
.content-panel h3,
.account-identity strong {
    font-weight: 650;
}

.system-title span,
.page-heading p,
.account-identity small,
.form-label {
    color: #6B7280;
    font-weight: 500;
}

/* Dashboard and menu panels aligned with the refreshed light sidebar. */
.nav-reports-group[open] {
    padding: .25rem;
    border: 1px solid #DDE3EC;
    border-radius: 14px;
    background: #E9EEF5;
}

.nav-reports-group[open] .nav-reports-toggle {
    background: #F7F9FC;
}

.nav-reports-group[open] .nav-submenu {
    margin: .32rem 0 .35rem .8rem;
}

.modern-dashboard {
    --dash-surface: #FFFFFF;
    --dash-panel: #F8FAFC;
    --dash-border: #DDE3EC;
    --dash-text: #374151;
    --dash-muted: #6B7280;
    --dash-primary: #0F766E;
    --dash-primary-dark: #087E8C;
    --dash-soft: #E7F8FA;
    gap: 1rem;
}

.summary-grid {
    gap: .6rem;
}

.summary-card,
.dashboard-card {
    border-color: var(--dash-border);
    border-radius: 16px;
    background: var(--dash-surface);
    box-shadow: 0 6px 18px rgba(39, 49, 66, .055);
}

.summary-card:hover {
    border-color: color-mix(in srgb, var(--summary-color, var(--dash-primary)) 36%, var(--dash-border));
    box-shadow: 0 10px 24px rgba(39, 49, 66, .075);
}

.summary-total {
    background: linear-gradient(145deg, #10887D, #127A72);
    box-shadow: 0 10px 24px rgba(16, 136, 125, .2);
}

.summary-total .summary-label,
.summary-total .summary-trend {
    color: rgba(255, 255, 255, .82);
}

.summary-label,
.summary-percentage,
.summary-trend,
.summary-card-note,
.card-header p,
.task-date,
.task-content p,
.gender-stat span,
.gender-stat small,
.history-item small,
.history-item time,
.chart-legend {
    color: var(--dash-muted);
    font-weight: 500;
}

.summary-card strong,
.gender-stat strong,
.history-item strong {
    color: var(--dash-text);
    font-weight: 650;
}

.summary-card strong {
    letter-spacing: 0;
}

.summary-label {
    font-weight: 550;
}

.summary-progress {
    background: #EDF2F7;
}

.summary-cos {
    --summary-color: #3B82F6;
    background: #F4F8FF;
    border-color: #BFD3FF;
}

.summary-cos .summary-dot {
    background: #3B82F6;
    box-shadow: 0 0 0 5px color-mix(in srgb, #3B82F6 13%, transparent);
}

.dashboard-card {
    padding: 1rem;
}

.card-header {
    padding: .8rem 1rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid #DDE3EC;
    border-radius: 12px 12px 0 0;
    background: #F8FAFC;
}

.card-kicker {
    color: #087E8C;
    font-weight: 650;
    letter-spacing: .08em;
}

.card-header h2 {
    color: #273142;
    font-weight: 650;
    letter-spacing: 0;
}

.count-badge {
    background: #10887D;
    font-weight: 650;
}

.count-badge.subtle {
    color: #087E8C;
    background: #E7F8FA;
}

.modern-task-item,
.gender-stat,
.history-item {
    border-color: #DDE3EC;
    background: #FBFCFE;
}

.modern-task-item:hover {
    border-color: #B6E4E8;
    background: #F6FCFD;
}

.task-marker {
    background: #0F766E;
}

.task-category,
.task-employee:hover {
    color: #087E8C;
}

.task-employee {
    color: #273142;
    font-weight: 600;
}

.task-view-button,
.task-done-button {
    font-weight: 600;
}

.task-view-button {
    color: #374151;
    border-color: #DDE3EC;
    background: #FFFFFF;
}

.task-done-button {
    border-color: #087E8C;
    background: #087E8C;
}

.task-done-button:hover {
    background: #066D78;
}

.gender-pie-svg {
    filter: drop-shadow(0 10px 18px rgba(39, 49, 66, .08));
}

.gender-donut-total {
    fill: #374151;
    font-weight: 650;
}

.dashboard-native-select {
    color: #273142;
    border-color: #DDE3EC;
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(39, 49, 66, .055);
    font-weight: 600;
}

.records-card .content-panel {
    background: transparent;
}

.dashboard-priority-grid {
    grid-template-columns: minmax(440px, 1.25fr) minmax(320px, .75fr);
}

.tasks-card,
.workforce-card {
    min-height: 390px;
    max-height: 430px;
}

.tasks-card {
    overflow: hidden;
}

.modern-task-list {
    max-height: 294px;
}

.recent-leave-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.dashboard-activity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 1rem;
    align-items: stretch;
}

.dashboard-activity-grid .appointments-card,
.dashboard-activity-grid .recent-leave-card {
    min-height: 390px;
}

.recent-leave-table {
    display: grid;
    overflow: hidden;
    border: 1px solid #DDE3EC;
    border-radius: 12px;
    background: #FFFFFF;
}

.recent-leave-head,
.recent-leave-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(120px, .95fr);
    gap: .75rem;
    align-items: center;
}

.recent-leave-head {
    min-height: 38px;
    padding: .58rem .72rem;
    color: #6B7280;
    background: #F8FAFC;
    border-bottom: 1px solid #DDE3EC;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.recent-leave-row {
    min-height: 54px;
    padding: .68rem .72rem;
    color: #374151;
    font-size: .78rem;
    text-decoration: none;
    border-bottom: 1px solid #EEF2F7;
}

.recent-leave-row:last-child {
    border-bottom: 0;
}

.recent-leave-row:hover {
    color: #087E8C;
    background: #F6FCFD;
}

.recent-leave-row span,
.recent-leave-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.recent-leave-row span {
    font-weight: 500;
}

.recent-leave-row strong {
    color: #4B5563;
    font-weight: 600;
}

@media (max-width: 1320px) {
    .dashboard-priority-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    }

    .recent-leave-table {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dashboard-priority-grid,
    .dashboard-activity-grid,
    .recent-leave-table {
        grid-template-columns: 1fr;
    }
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
}

.top-row,
.nav-scrollable,
.modern-dashboard,
.dashboard-card,
.summary-card,
.account-menu,
.content-panel,
.table,
.form-control,
.form-select {
    font-weight: 400;
}

.modern-dashboard :where(h1, h2, h3),
.summary-card strong,
.count-badge,
.account-identity strong,
.system-title strong,
.task-employee,
.recent-leave-row strong {
    font-weight: 600;
}

.modern-dashboard :where(.summary-label, .summary-percentage, .summary-trend, .task-category, .task-date, .gender-stat span, .chart-legend, .dashboard-native-select),
.nav-item .nav-link,
.nav-reports-toggle,
.nav-submenu-link,
.account-identity small,
.system-title span {
    font-weight: 500;
}

.card-kicker {
    display: none;
}

.gender-filter-menu {
    position: relative;
    width: 156px;
    min-width: 156px;
    color: #4B5563;
    padding-top: .42rem;
}

.gender-filter-label {
    display: none;
}

.gender-filter-menu summary {
    position: relative;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .43rem 2.18rem .43rem .78rem;
    color: #5B6474;
    border: 2px solid #0F766E;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: none;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}

.gender-filter-menu summary::-webkit-details-marker {
    display: none;
}

.gender-filter-menu summary::before {
    content: "Status";
    position: absolute;
    left: .58rem;
    top: -.49rem;
    z-index: 2;
    padding: 0 .26rem;
    color: #0F766E;
    background: #FFFFFF;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.gender-filter-menu summary::after {
    content: "";
    position: absolute;
    right: .92rem;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid #5B6474;
    border-bottom: 2px solid #5B6474;
    transform: rotate(225deg) translate(-1px, -1px);
    transition: transform .16s ease;
}

.gender-filter-menu[open] summary {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(9, 168, 182, .1);
}

.gender-filter-menu[open] summary::after {
    transform: rotate(45deg) translateY(-1px);
}

.gender-filter-menu > button {
    width: 100%;
}

.gender-filter-menu[open] {
    z-index: 35;
}

.gender-filter-option {
    min-height: 36px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .72rem;
    color: #374151;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 500;
    text-align: left;
}

.gender-filter-option:hover,
.gender-filter-option:focus-visible,
.gender-filter-option.is-selected {
    color: #087E8C;
    background: #E7F8FA;
    outline: none;
}

.gender-filter-menu[open]::before {
    content: "";
    position: absolute;
    top: calc(100% + .34rem);
    right: 0;
    width: 100%;
    height: calc(37px * 5);
    border: 0;
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(39, 49, 66, .14);
}

.gender-filter-menu[open] .gender-filter-option {
    position: absolute;
    right: 0;
    z-index: 1;
    width: 100%;
    min-height: 37px;
    margin-left: auto;
    padding: .52rem .9rem;
    border-radius: 0;
    background-clip: padding-box;
    font-size: .82rem;
}

.gender-filter-menu[open] .gender-filter-option:first-of-type {
    top: calc(100% + .34rem);
    border-radius: 0;
}

.gender-filter-menu[open] .gender-filter-option:nth-of-type(2) {
    top: calc(100% + .34rem + 37px);
}

.gender-filter-menu[open] .gender-filter-option:nth-of-type(3) {
    top: calc(100% + .34rem + 74px);
}

.gender-filter-menu[open] .gender-filter-option:nth-of-type(4) {
    top: calc(100% + .34rem + 111px);
}

.gender-filter-menu[open] .gender-filter-option:nth-of-type(5) {
    top: calc(100% + .34rem + 148px);
    border-radius: 0 0 10px 10px;
}

.gender-filter-menu[open] .gender-filter-option:nth-of-type(6) {
    display: none;
}

.gender-filter-option.is-selected {
    color: #0F766E;
    background: #DCEFEB;
}

.gender-filter-option:hover,
.gender-filter-option:focus-visible {
    color: #087E8C;
    background: #F3F4F6;
}

.dashboard-filter-menu {
    position: relative;
    width: 156px;
    min-width: 156px;
    padding-top: .42rem;
    color: #4B5563;
}

.year-filter-menu {
    width: 96px;
    min-width: 96px;
}

.dashboard-filter-label {
    display: none;
}

.dashboard-filter-menu summary {
    position: relative;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .43rem 2.18rem .43rem .78rem;
    color: #5B6474;
    border: 2px solid #0F766E;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: none;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}

.dashboard-filter-menu summary::-webkit-details-marker {
    display: none;
}

.dashboard-filter-menu summary::before {
    content: none;
}

.gender-filter-menu summary::before,
.year-filter-menu summary::before {
    position: absolute;
    left: .58rem;
    top: -.49rem;
    z-index: 4;
    padding: 0 .26rem;
    color: #0F766E;
    background: #F8FAFC;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.gender-filter-menu summary::before {
    content: "Status";
}

.year-filter-menu summary::before {
    content: "Year";
}

.dashboard-filter-menu summary::after {
    content: "";
    position: absolute;
    right: .92rem;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid #5B6474;
    border-bottom: 2px solid #5B6474;
    transform: rotate(225deg) translate(-1px, -1px);
    transition: transform .16s ease;
}

.dashboard-filter-menu[open] summary {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(9, 168, 182, .1);
}

.dashboard-filter-menu[open] summary::after {
    transform: rotate(45deg) translateY(-1px);
}

.dashboard-filter-panel {
    position: absolute;
    top: calc(100% + .34rem);
    right: 0;
    z-index: 35;
    display: none;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(39, 49, 66, .14);
}

.dashboard-filter-menu[open] .dashboard-filter-panel {
    display: grid;
}

.dashboard-filter-option,
.dashboard-filter-menu[open] .gender-filter-option {
    position: static;
    min-height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .52rem .9rem;
    color: #374151;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
}

.dashboard-filter-option:hover,
.dashboard-filter-option:focus-visible {
    color: #087E8C;
    background: #F3F4F6;
    outline: none;
}

.dashboard-filter-option.is-selected {
    color: #0F766E;
    background: #DCEFEB;
}

.dashboard-filter-panel .dashboard-filter-option:last-child {
    border-radius: 0 0 10px 10px;
}

.dashboard-filter-menu[open]::before {
    content: none;
}

.filter-slide-panel .records-filter-menu {
    width: 100%;
    min-width: 0;
    padding-top: .42rem;
}

.filter-slide-panel .records-filter-menu summary {
    min-width: 0;
}

.filter-slide-panel .records-filter-menu summary::before {
    content: attr(data-label);
    position: absolute;
    left: .58rem;
    top: -.49rem;
    z-index: 4;
    max-width: calc(100% - 1.16rem);
    padding: 0 .26rem;
    color: #0F766E;
    background: #F8FAFC;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.filter-slide-panel .records-filter-menu .dashboard-filter-panel {
    right: auto;
    left: 0;
    z-index: 5000;
    max-height: 245px;
    overflow-y: auto;
    border: 1px solid rgba(8, 169, 186, .14);
    scrollbar-width: thin;
    scrollbar-color: #B6C2CF transparent;
}

.filter-slide-panel .records-filter-menu .dashboard-filter-panel::-webkit-scrollbar {
    width: 8px;
}

.filter-slide-panel .records-filter-menu .dashboard-filter-panel::-webkit-scrollbar-track {
    background: transparent;
}

.filter-slide-panel .records-filter-menu .dashboard-filter-panel::-webkit-scrollbar-thumb {
    background: #B6C2CF;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
}

.filter-slide-panel .records-filter-menu .dashboard-filter-option {
    text-decoration: none;
}

.filter-slide-panel .records-filter-menu[open] {
    z-index: 5100;
}

.records-toolbar {
    position: relative;
    z-index: 80;
}

.records-toolbar:has(.records-filter-menu[open]) {
    z-index: 300;
}

.employee-records-table-wrap {
    position: relative;
    z-index: 1;
}

.filter-slide-panel select.form-select.is-native-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.filter-slide-panel label:has(.filter-select-shell) {
    overflow: visible;
    padding-top: .42rem;
}

.filter-slide-panel label:has(.filter-select-shell) > span {
    position: absolute;
    top: .24rem;
    left: .58rem;
    z-index: 5;
    display: inline-flex;
    max-width: calc(100% - 1.16rem);
    padding: 0 .26rem;
    margin: 0;
    color: #0F766E;
    background: #F8FAFC;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.filter-slide-panel .filter-select-shell {
    position: relative;
    z-index: 2;
}

.filter-slide-panel .filter-select-shell::before {
    content: none;
}

.filter-slide-panel .filter-select-shell.is-open {
    z-index: 120;
}

.filter-slide-panel .filter-select-shell .smooth-select-button {
    min-height: 36px;
    padding: .43rem 2.18rem .43rem .78rem;
    color: #5B6474;
    border: 2px solid #0F766E;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: none;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
}

.filter-slide-panel .filter-select-shell .smooth-select-button:hover,
.filter-slide-panel .filter-select-shell .smooth-select-button:focus-visible,
.filter-slide-panel .filter-select-shell.is-open .smooth-select-button {
    border-color: #0F766E;
    border-radius: 5px;
    box-shadow: 0 0 0 3px rgba(9, 168, 182, .1);
    transform: none;
}

.filter-slide-panel .filter-select-shell .smooth-select-chevron {
    position: absolute;
    right: .92rem;
    width: .45rem;
    height: .45rem;
    border-color: #5B6474;
    transform: rotate(45deg) translateY(-1px);
}

.filter-slide-panel .filter-select-shell.is-open .smooth-select-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.filter-slide-panel .filter-select-shell .smooth-select-menu {
    position: absolute;
    top: calc(100% + .34rem);
    left: 0;
    right: 0;
    display: none;
    width: 100%;
    max-height: 240px;
    margin-top: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(8, 169, 186, .18);
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(39, 49, 66, .14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

.filter-select-portal {
    position: fixed;
    z-index: 5000;
    display: none;
    max-height: 240px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(8, 169, 186, .18);
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(39, 49, 66, .14);
}

.filter-select-portal.is-open {
    display: grid;
}

.filter-select-portal .smooth-select-option {
    min-height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .52rem .9rem;
    color: #374151;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
}

.filter-select-portal .smooth-select-option:hover,
.filter-select-portal .smooth-select-option:focus-visible {
    color: #087E8C;
    background: #F3F4F6;
    outline: none;
}

.filter-select-portal .smooth-select-option[aria-selected="true"] {
    color: #0F766E;
    background: #DCEFEB;
}

.filter-select-portal .smooth-select-option:last-child {
    border-radius: 0 0 10px 10px;
}

.filter-slide-panel .filter-select-shell.is-open .smooth-select-menu {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.filter-slide-panel .filter-select-shell .smooth-select-option {
    min-height: 37px;
    padding: .52rem .9rem;
    color: #374151;
    border-radius: 0;
    font-size: .82rem;
    font-weight: 500;
}

.filter-slide-panel .filter-select-shell .smooth-select-option:hover,
.filter-slide-panel .filter-select-shell .smooth-select-option:focus-visible {
    color: #087E8C;
    background: #F3F4F6;
}

.filter-slide-panel .filter-select-shell .smooth-select-option[aria-selected="true"] {
    color: #0F766E;
    background: #DCEFEB;
}

.filter-slide-panel .filter-select-shell .smooth-select-option:last-child {
    border-radius: 0 0 10px 10px;
}

.dashboard-lower-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.records-card,
.history-card {
    min-height: 430px;
}

.records-card .table-responsive {
    max-height: 300px;
    overflow: auto;
}

.history-list {
    max-height: 300px;
    overflow: auto;
}


/* Activity Logs */
.system-logs-page{display:grid;gap:1.25rem}.system-log-panels{display:grid;gap:1.25rem}.system-log-card{background:#fff;border:1px solid #dbe4e8;border-radius:16px;padding:1rem;box-shadow:0 8px 24px rgba(15,23,42,.05)}.system-log-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.system-log-card-header h2{margin:0;font-size:1.15rem}.system-log-card-header span{color:#64748b;font-size:.85rem}.system-log-table{width:100%;border-collapse:collapse}.system-log-table th{background:#f6f8fa;text-align:left;padding:.75rem;border-bottom:1px solid #dbe4e8;font-size:.82rem}.system-log-table td{padding:.75rem;border-bottom:1px solid #edf1f4;vertical-align:top}.system-log-table th:first-child,.system-log-table td:first-child{white-space:nowrap;width:180px}.system-log-table th:nth-child(2),.system-log-table td:nth-child(2){width:210px}.system-log-table th:nth-child(3),.system-log-table td:nth-child(3){width:105px}.log-action{display:inline-flex;padding:.22rem .55rem;border-radius:999px;font-weight:700;font-size:.76rem;background:#e2e8f0}.action-add{background:#dcfce7;color:#166534}.action-edit{background:#dbeafe;color:#1d4ed8}.action-delete{background:#fee2e2;color:#b91c1c}.action-print{background:#f3e8ff;color:#7e22ce}.action-export{background:#fef3c7;color:#92400e}.action-login{background:#dcfce7;color:#166534}.action-logout{background:#e2e8f0;color:#475569}.empty-state{text-align:center;color:#64748b;padding:2rem!important}@media(max-width:800px){.system-log-card{padding:.7rem}.system-log-table{min-width:760px}}


/* SYSTEM LOG STORAGE LOCATION */
.system-logs-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.25rem;
}

.system-log-storage-form {
    display: flex;
    align-items: end;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid #d9e3e0;
    border-radius: 12px;
    background: #fff;
    min-width: 430px;
}

.system-log-storage-form > div {
    flex: 1;
}

.system-log-storage-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 700;
    color: #36534d;
}

.system-log-storage-form .btn {
    white-space: nowrap;
}

.system-log-location-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid #cce7df;
    border-radius: 10px;
    background: #f0fbf7;
    color: #245b4f;
    font-size: .88rem;
}

.system-log-location-note span {
    color: #60756f;
}

@media (max-width: 900px) {
    .system-logs-heading,
    .system-log-storage-form,
    .system-log-location-note {
        align-items: stretch;
        flex-direction: column;
    }

    .system-log-storage-form {
        min-width: 0;
        width: 100%;
    }
}

/* Activity Logs: separate production panels */
.system-logs-page {
    display: grid;
    gap: 1.25rem;
}

.system-logs-heading {
    margin-bottom: .15rem;
}

.system-log-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid #dbe4ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.system-log-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.system-log-card-header h2 {
    margin: .12rem 0 .18rem;
    color: #1e293b;
    font-size: 1.08rem;
    font-weight: 750;
}

.system-log-card-header p {
    margin: 0;
    color: #64748b;
    font-size: .78rem;
}

.system-log-card-kicker {
    color: #0F766E;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.system-log-count {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .65rem;
    border-radius: 999px;
    color: #0b716c !important;
    background: #eaf8f7;
    font-size: .82rem !important;
    font-weight: 800;
}

.system-log-card .table-responsive {
    /* Pagination determines the row count; let each panel fit those rows. */
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

.system-log-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.system-log-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .72rem 1rem;
    color: #475569;
    border-bottom: 1px solid #dbe4ea;
    background: #f8fafc;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.system-log-table tbody td {
    padding: .72rem 1rem;
    color: #334155;
    border-bottom: 1px solid #edf2f7;
    background: #fff;
    font-size: .82rem;
}

.system-log-table tbody tr:hover td {
    background: #f8fcfc;
}

.system-log-table tbody tr:last-child td {
    border-bottom: 0;
}

.system-login-log-table th:nth-child(1),
.system-login-log-table td:nth-child(1) {
    width: 210px;
}

.system-login-log-table th:nth-child(3),
.system-login-log-table td:nth-child(3) {
    width: 130px;
}

@media (max-width: 800px) {
    .system-log-card-header {
        align-items: flex-start;
        padding: .85rem;
    }

    .system-log-table {
        min-width: 760px;
    }
}


/* User and Permission menu styles integrated from supplied version */
.permission-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.permission-card {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid #DDE6E4;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.permission-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #E8EFED;
}

.permission-card-eyebrow,
.permission-card-section-label {
    display: block;
    color: #6B7F7A;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.permission-card h4 {
    margin: .15rem 0 0;
    color: #173B35;
    font-size: 1rem;
    font-weight: 800;
}

.permission-card-submenus,
.permission-card-actions-grid {
    display: grid;
    gap: .55rem;
}

.permission-card-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.permission-card-row {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .55rem .7rem;
    border: 1px solid #E5ECEA;
    border-radius: 10px;
    background: #F8FAFC;
    color: #243B36;
    font-size: .86rem;
    font-weight: 750;
}

.permission-actions-card {
    background: #FCFEFD;
}

.permission-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
}

.permission-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.permission-switch-track {
    width: 44px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: #CBD5E1;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.permission-switch-thumb {
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
    transition: transform .18s ease;
}

.permission-switch input:checked + .permission-switch-track {
    background: var(--primary);
}

.permission-switch input:checked + .permission-switch-track .permission-switch-thumb {
    transform: translateX(20px);
}

.permission-switch input:focus-visible + .permission-switch-track {
    box-shadow: 0 0 0 3px rgba(15, 130, 120, .18);
}

@media (max-width: 780px) {
    .permission-card-grid,
    .permission-card-actions-grid {
        grid-template-columns: 1fr;
    }
}


/* USER PERMISSIONS — ACTIONS INSIDE THEIR MENU CARDS */
.permission-card-actions {
    display: grid;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid #e3ebe8;
}

.permission-card-actions .permission-card-row {
    background: #f3f8f6;
}

.permission-card-submenus + .permission-card-actions {
    margin-top: .75rem;
}

.permission-card .permission-card-actions .permission-card-section-label {
    margin-bottom: .1rem;
}

@media (max-width: 780px) {
    .permission-card-actions {
        margin-top: .7rem;
        padding-top: .7rem;
    }
}


/* USER PERMISSIONS — COMPACT TOP-ALIGNED CARDS */
.permission-card-grid {
    align-items: start !important;
    grid-auto-rows: max-content !important;
}

.permission-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: .9rem !important;
    gap: .7rem !important;
}

.permission-card-header {
    align-items: flex-start !important;
    min-height: 54px !important;
    padding-bottom: .65rem !important;
}

.permission-card-header > div {
    align-self: flex-start !important;
}

.permission-card-header .permission-switch {
    align-self: flex-start !important;
    margin-top: .05rem !important;
}

.permission-card-submenus,
.permission-card-actions {
    display: grid !important;
    grid-auto-rows: 44px !important;
    gap: .5rem !important;
    align-content: start !important;
}

.permission-card-submenus .permission-card-section-label,
.permission-card-actions .permission-card-section-label {
    height: 18px !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    margin: 0 0 .15rem !important;
}

.permission-card-row {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: .5rem .65rem !important;
    align-items: center !important;
}

.permission-card-row > span:first-child {
    align-self: center !important;
    line-height: 1.15 !important;
}

.permission-card-row .permission-switch {
    align-self: center !important;
}

.permission-card-submenus + .permission-card-actions {
    margin-top: .6rem !important;
}

.permission-card-actions {
    margin-top: .6rem !important;
    padding-top: .65rem !important;
}

@media (min-width: 1200px) {
    .permission-card-grid {
        grid-template-columns: repeat(4, minmax(250px, 1fr)) !important;
    }
}

@media (min-width: 780px) and (max-width: 1199px) {
    .permission-card-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 779px) {
    .permission-card-grid {
        grid-template-columns: 1fr !important;
    }
}


/* REPORT SUBMENU PERMISSIONS — COLLAPSIBLE */
.permission-submenu-details { border: 0; }
.permission-submenu-summary { cursor: pointer; list-style: none; position: relative; padding-left: 1.65rem !important; }
.permission-submenu-summary::-webkit-details-marker { display: none; }
.permission-submenu-summary::before { content: "▸"; position: absolute; left: .65rem; color: #55736c; transition: transform .15s ease; }
.permission-submenu-details[open] > .permission-submenu-summary::before { transform: rotate(90deg); }
.permission-submenu-actions { display: grid; gap: .4rem; margin: .4rem 0 .65rem 1.1rem; padding-left: .8rem; border-left: 2px solid #cfe3dd; }
.permission-child-action { min-height: 40px !important; height: 40px !important; background: #f3f8f6 !important; }
.permission-actions-details > summary { cursor: pointer; list-style: none; }
.permission-actions-details > summary::-webkit-details-marker { display:none; }
.permission-card { align-self: start !important; height: fit-content !important; }


/* USER PERMISSIONS — CLEAN ACCORDION CARDS */
.permission-card-eyebrow,
.permission-card-submenus > .permission-card-section-label {
    display: none !important;
}

.permission-card-header {
    min-height: 44px !important;
    padding-bottom: .55rem !important;
}

.permission-card-header h4 {
    margin: 0 !important;
    line-height: 1.25 !important;
}

.permission-card-submenus {
    display: grid !important;
    grid-auto-rows: auto !important;
    gap: .5rem !important;
    align-content: start !important;
}

.permission-submenu-details,
.permission-actions-details {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.permission-submenu-details[open],
.permission-actions-details[open] {
    height: auto !important;
}

.permission-submenu-summary {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

.permission-submenu-actions {
    display: grid !important;
    grid-auto-rows: 40px !important;
    gap: .4rem !important;
    margin: .4rem 0 .2rem 1rem !important;
    padding-left: .75rem !important;
    border-left: 2px solid #cfe3dd !important;
}

.permission-child-action {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

.permission-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.permission-card-grid {
    align-items: start !important;
    grid-auto-rows: max-content !important;
}

.permission-actions-details > summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 1.25rem;
}

.permission-actions-details > summary::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #55736c;
    transition: transform .15s ease;
}

.permission-actions-details[open] > summary::before {
    transform: rotate(90deg);
}


/* USER PERMISSIONS — UNIVERSAL MENU CARD HEIGHT */
.permission-card-grid {
    align-items: start !important;
}

.permission-card {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.permission-card-header {
    flex: 0 0 auto !important;
}

.permission-card-submenus,
.permission-card-actions,
.permission-actions-details {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.permission-card-submenus {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: .25rem !important;
}

.permission-card-submenus::-webkit-scrollbar {
    width: 6px;
}

.permission-card-submenus::-webkit-scrollbar-thumb {
    background: #bfd1cb;
    border-radius: 999px;
}

.permission-card-submenus::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 780px) {
    .permission-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .permission-card-submenus {
        overflow: visible !important;
        padding-right: 0 !important;
    }
}


/* USER PERMISSIONS — MATCH EQUAL-HEIGHT FOUR-CARD LAYOUT */
.permission-menu-access {
    gap: 1.65rem !important;
    padding: 1.6rem 1.75rem 1.75rem !important;
    border: 1px solid #cddbe8 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

.permission-section-heading {
    display: grid;
    gap: .18rem;
}

.permission-section-heading h3 {
    margin: 0 !important;
    color: #0f766e !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
}

.permission-section-heading p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: .95rem !important;
}

.permission-menu-access .permission-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.75rem !important;
    align-items: stretch !important;
    grid-auto-rows: 520px !important;
}

.permission-menu-access .permission-card {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    gap: .75rem !important;
    padding: 1rem !important;
    overflow: hidden !important;
    border: 1px solid #cddbd7 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.permission-menu-access .permission-card-header {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 0 .75rem !important;
    border-bottom: 1px solid #dbe5e2 !important;
}

.permission-menu-access .permission-card-header h4 {
    margin: 0 !important;
    color: #173b35 !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.permission-menu-access .permission-card-submenus,
.permission-menu-access .permission-card-actions {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: grid !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    gap: .42rem !important;
    margin: 0 !important;
    padding: .05rem .18rem 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.permission-menu-access .permission-card-actions {
    padding-top: .25rem !important;
    border-top: 0 !important;
}

.permission-menu-access .permission-card-row {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    padding: .48rem .72rem !important;
    border: 1px solid #d9e4e1 !important;
    border-radius: 9px !important;
    background: #f5f9f8 !important;
    color: #28443f !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
    box-sizing: border-box !important;
}

.permission-menu-access .permission-submenu-summary {
    padding-left: 1.65rem !important;
}

.permission-menu-access .permission-submenu-actions {
    display: grid !important;
    gap: .4rem !important;
    margin: .4rem 0 .6rem 1rem !important;
    padding-left: .75rem !important;
    border-left: 2px solid #cfe3dd !important;
}

.permission-menu-access .permission-child-action {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
}

.permission-menu-access .permission-switch {
    flex: 0 0 auto !important;
}

.permission-menu-access .permission-card-submenus::-webkit-scrollbar,
.permission-menu-access .permission-card-actions::-webkit-scrollbar {
    width: 6px;
}

.permission-menu-access .permission-card-submenus::-webkit-scrollbar-thumb,
.permission-menu-access .permission-card-actions::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #b9cec8;
}

.permission-menu-access .permission-card-submenus::-webkit-scrollbar-track,
.permission-menu-access .permission-card-actions::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 1280px) {
    .permission-menu-access .permission-card-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
        grid-auto-rows: 520px !important;
    }
}

@media (max-width: 760px) {
    .permission-menu-access {
        padding: 1rem !important;
    }

    .permission-menu-access .permission-card-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    .permission-menu-access .permission-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .permission-menu-access .permission-card-submenus,
    .permission-menu-access .permission-card-actions {
        overflow: visible !important;
    }
}

/* Add User panel: fixed viewport position with a permanently reserved right column. */
@media (min-width: 1301px) {
    .users-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 550px;
        gap: 1rem;
        align-items: start;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    .users-layout > .users-panel:not(.add-user-panel):first-child,
    .users-layout > .role-permissions-panel {
        grid-column: 1;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .users-layout > .role-permissions-panel {
        grid-column: 1 !important;
    }

    .users-layout > .add-user-panel {
        position: fixed !important;
        top: 98px;
        right: 26px;
        z-index: 90;
        width: 550px;
        max-width: calc(100vw - 52px);
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
    }
}

@media (max-width: 1300px) {
    .users-layout {
        grid-template-columns: 1fr !important;
        padding-right: 0 !important;
    }

    .users-layout > .add-user-panel {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .users-layout > .role-permissions-panel {
        grid-column: 1 !important;
    }
}

/* Users page final layout:
   Row 1: System Users | Add User
   Row 2: User Roles and Permissions full width. */
.users-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
    gap: 1rem !important;
    align-items: start !important;
    padding-right: 0 !important;
}

.users-layout > .users-panel:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
}

.users-layout > .add-user-panel {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
    box-shadow: var(--shadow-card, 0 4px 14px rgba(15, 23, 42, .06));
}

.users-layout > .role-permissions-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0;
}

@media (max-width: 1050px) {
    .users-layout {
        grid-template-columns: 1fr !important;
    }

    .users-layout > .users-panel:first-child,
    .users-layout > .add-user-panel,
    .users-layout > .role-permissions-panel {
        grid-column: 1 !important;
    }

    .users-layout > .users-panel:first-child { grid-row: 1 !important; }
    .users-layout > .add-user-panel { grid-row: 2 !important; }
    .users-layout > .role-permissions-panel { grid-row: 3 !important; }
}


/* STEP INCREMENT DESIGN IMPORT — isolated from StepTitleSingleLine14px_2 */
.print-document.step-increment-document {
    overflow: visible !important;
    max-height: none !important;
    padding-right: .8in !important;
}

.si-letterhead {
    position: relative !important;
    display: block !important;
    min-height: .95in !important;
    margin: 0 0 30px !important;
    text-align: center !important;
}

.si-letterhead-text {
    width: 100% !important;
    text-align: center !important;
}

.si-letterhead img {
    position: absolute !important;
    top: 0 !important;
    left: calc(50% - 245px) !important;
    width: .9in !important;
    height: .9in !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
}

.si-title {
    margin: 0 0 44px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
}

.si-tabbed {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 40px !important;
}

.si-salary-table {
    margin: 0 0 0 30px !important;
}

.si-understanding {
    margin-top: -4px !important;
}

@media print {
    .print-document.step-increment-document {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding-right: 0 !important;
    }

    .si-letterhead {
        position: relative !important;
        display: block !important;
        min-height: .95in !important;
        margin: 0 0 30px !important;
        text-align: center !important;
    }

    .si-letterhead-text {
        width: 100% !important;
        text-align: center !important;
    }

    .si-letterhead img {
        position: absolute !important;
        top: 0 !important;
        left: calc(50% - 245px) !important;
        width: .9in !important;
        height: .9in !important;
        margin: 0 !important;
        transform: none !important;
        object-fit: contain !important;
    }

    .si-title {
        margin: 0 0 44px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }

    .si-tabbed {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-indent: 40px !important;
    }

    .si-salary-table {
        margin: 0 0 0 30px !important;
    }

    .si-understanding {
        margin-top: -4px !important;
    }
}

/* Step Increment refinement: title size and clean print preview */
.si-title {
    font-size: 17px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    max-width: 6.3in;
    margin-left: auto !important;
    margin-right: auto !important;
}

.step-increment-document,
.step-increment-document .si-document {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

@media print {
    html,
    body,
    .page,
    main,
    .content,
    .print-page,
    .print-document,
    .step-increment-document,
    .si-document {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        scrollbar-width: none !important;
    }

    body::-webkit-scrollbar,
    .print-page::-webkit-scrollbar,
    .print-document::-webkit-scrollbar,
    .step-increment-document::-webkit-scrollbar,
    .si-document::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .si-title {
        font-size: 17px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        max-width: 6.3in !important;
    }
}

/* Step Increment A4 print normalization
   Uses the physical A4 page as the page box and keeps margins inside the document,
   preventing browser default margins and width reflow from creating a second page. */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body {
        width: 210mm !important;
        min-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-page {
        width: 210mm !important;
        min-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-document.step-increment-document {
        width: 210mm !important;
        min-width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        padding: 15mm 18mm 12mm !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .step-increment-document .si-document {
        width: 100% !important;
        max-width: 174mm !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .step-increment-document .si-letterhead {
        margin-bottom: 22px !important;
    }

    .step-increment-document .si-title {
        margin-bottom: 30px !important;
    }

    .step-increment-document .si-date {
        margin-bottom: 26px !important;
    }

    .step-increment-document .si-recipient {
        margin-bottom: 22px !important;
    }

    .step-increment-document .si-paragraph {
        margin-bottom: 18px !important;
    }

    .step-increment-document .si-salary-table {
        margin-bottom: 18px !important;
    }

    .step-increment-document .si-salary-labels,
    .step-increment-document .si-salary-values {
        grid-template-rows: repeat(3, 52px) !important;
    }

    .step-increment-document .si-signature {
        margin-top: 20px !important;
        margin-bottom: 24px !important;
    }

    .step-increment-document .si-signature p {
        margin-bottom: 34px !important;
    }
}

/* FINAL Step Increment A4 print correction
   Do not force a 210mm document inside the printer's printable area.
   The named page owns the paper size/margins; the document fills only that area. */
.print-document.step-increment-document {
    page: step-increment-a4;
}

@page step-increment-a4 {
    size: A4 portrait;
    margin: 12mm 14mm;
}

@media print {
    html,
    body,
    .page,
    main,
    .content,
    .print-page {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .print-document.step-increment-document {
        page: step-increment-a4;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        box-shadow: none !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    .print-document.step-increment-document .si-document {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .step-increment-document .si-letterhead {
        margin-bottom: 18px !important;
    }

    .step-increment-document .si-title {
        margin-bottom: 24px !important;
    }

    .step-increment-document .si-date {
        margin-bottom: 20px !important;
    }

    .step-increment-document .si-recipient {
        margin-bottom: 16px !important;
    }

    .step-increment-document .si-paragraph {
        margin-bottom: 13px !important;
    }

    .step-increment-document .si-salary-table {
        margin-bottom: 12px !important;
    }

    .step-increment-document .si-salary-labels,
    .step-increment-document .si-salary-values {
        grid-template-rows: repeat(3, 44px) !important;
    }

    .step-increment-document .si-signature {
        margin-top: 14px !important;
        margin-bottom: 16px !important;
    }

    .step-increment-document .si-signature p {
        margin-bottom: 26px !important;
    }

    .step-increment-document .si-footer {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* FINAL PAPER-INDEPENDENT STEP INCREMENT PRINT LAYOUT
   Uses one centered 174mm content box that fits both A4 and Letter.
   The browser controls the selected sheet size; the document no longer reflows
   according to Letter/A4 viewport width. */
@media print {
    @page {
        size: auto;
        margin: 0;
    }

    html,
    body,
    .page,
    main,
    .content,
    .print-page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .print-page {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }

    .print-document.step-increment-document {
        page: auto !important;
        width: 174mm !important;
        min-width: 174mm !important;
        max-width: 174mm !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 18mm auto 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        box-shadow: none !important;
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }

    .print-document.step-increment-document .si-document {
        width: 174mm !important;
        min-width: 174mm !important;
        max-width: 174mm !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        font-size: 10.5px !important;
        line-height: 1.28 !important;
    }

    /* Match the Certificate of Employment letterhead geometry exactly. */
    .step-increment-document .si-letterhead {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) 120px !important;
        align-items: start !important;
        min-height: 86px !important;
        margin: 0 0 .35in !important;
        text-align: center !important;
    }

    .step-increment-document .si-letterhead::after {
        content: none !important;
        display: none !important;
    }

    .step-increment-document .si-letterhead img {
        position: static !important;
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        width: 86px !important;
        height: 86px !important;
        justify-self: start !important;
        margin: 0 0 0 120px !important;
        transform: none !important;
        object-fit: contain !important;
    }

    .step-increment-document .si-letterhead-text {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .step-increment-document .si-letterhead-text p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
    }

    .step-increment-document .si-letterhead-text h3 {
        margin: 4px 0 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    .step-increment-document .si-letterhead-text h4 {
        margin: 24px 0 0 !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    .step-increment-document .si-title {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 9mm !important;
        font-size: 17px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .step-increment-document .si-date {
        margin-bottom: 8mm !important;
    }

    .step-increment-document .si-recipient {
        margin-bottom: 7mm !important;
    }

    .step-increment-document .si-paragraph {
        margin-bottom: 5mm !important;
    }

    .step-increment-document .si-tabbed {
        text-indent: 10mm !important;
    }

    .step-increment-document .si-salary-table {
        width: calc(100% - 8mm) !important;
        margin: 0 0 5mm 8mm !important;
    }

    .step-increment-document .si-salary-labels,
    .step-increment-document .si-salary-values {
        grid-template-rows: repeat(3, 13mm) !important;
    }

    .step-increment-document .si-understanding {
        margin-top: 0 !important;
    }

    .step-increment-document .si-signature {
        margin-top: 5mm !important;
        margin-bottom: 7mm !important;
    }

    .step-increment-document .si-signature p {
        margin-bottom: 9mm !important;
    }

    .step-increment-document .si-footer {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}


/* COE INTEGRATION FROM COEZeroAllowanceFilter_3 */
.coe-print-document {
    width: 8.5in;
    min-height: 11in;
    padding: .8in;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    color: #000;
}

.coe-header,
.service-record-header {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: start;
    margin-bottom: .35in;
}

.coe-header img {
    grid-column: 1 / span 2;
    width: 86px;
    height: 86px;
    justify-self: start;
    margin-left: 120px;
}

.coe-header > div,
.service-record-header > div {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.coe-header p,
.service-record-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    text-transform: uppercase;
}

.coe-header h3,
.service-record-header h3 {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
}

.coe-header h4,
.service-record-header h4 {
    margin: 24px 0 0;
    font-size: 17px;
    font-weight: 700;
}

.coe-document h2 {
    margin: .22in 0 .42in;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.coe-concern {
    margin: 0 0 .22in;
    font-size: 15px;
}

.coe-line {
    margin: 0 0 .22in;
    font-size: 15px;
    line-height: 1.65;
    text-align: justify;
    text-align-last: left;
    text-indent: .48in;
    word-spacing: .03em;
}

.coe-certify-line {
    margin-bottom: 0;
    text-align-last: justify;
}

.coe-employee-line {
    text-indent: 0;
}

.coe-purpose,
.coe-issued {
    margin-top: .08in;
}

.coe-signature {
    width: 260px;
    margin: .72in .32in 0 auto;
    text-align: center;
}

.coe-signature strong {
    display: block;
    text-decoration: underline;
}



/* Personnel print options dialog: options only, no live document preview */
.personnel-print-overlay[hidden] {
    display: none !important;
}

.personnel-print-overlay {
    align-items: center;
    justify-items: center;
    overflow: auto;
    padding: 2rem;
    background: rgba(226, 232, 240, .88);
    backdrop-filter: blur(4px);
}

.personnel-coe-workspace {
    width: min(560px, calc(100vw - 2rem));
    min-height: 0;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.personnel-coe-workspace .retirement-dialog-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.coe-options-card {
    min-height: 780px;
    display: flex;
    flex-direction: column;
    padding: 2.1rem 2.4rem;
    border: 1px solid #bfd0e4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.coe-options-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.8rem;
    line-height: 1.15;
}

.coe-options-card h3 {
    margin: .65rem 0 2rem;
    color: #172033;
    font-size: 1.55rem;
    line-height: 1.2;
}

.coe-options-card .personnel-coe-checks {
    gap: 1.65rem;
    margin: 0 0 2.4rem;
}

.coe-options-card .coe-option-switch {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    min-height: 52px;
    margin: 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 800;
}

.coe-options-card .coe-switch-slider {
    width: 64px;
    height: 36px;
}

.coe-options-card .coe-switch-slider::after {
    width: 27px;
    height: 27px;
}

.coe-options-card .coe-option-switch input:checked + .coe-switch-slider::after {
    transform: translateX(28px);
}

.coe-purpose-label {
    margin-top: auto;
    margin-bottom: .55rem;
    color: #334155;
    font-size: 1rem;
    font-weight: 800;
}

.coe-purpose-input {
    min-height: 56px;
    padding: .8rem 1rem;
    font-size: 1rem;
}

.coe-primary-print-button {
    min-width: 150px;
    min-height: 58px;
    align-self: flex-end;
    margin-top: 2.8rem;
    padding: .8rem 2rem;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #159589;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
}

.coe-primary-print-button:hover {
    background: #0f7e75;
}

.coe-other-documents {
    display: flex;
    gap: .65rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.coe-other-documents button {
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
}

.coe-live-preview {
    min-height: 840px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.coe-live-preview iframe {
    width: 100%;
    height: 840px;
    display: block;
    border: 0;
    background: #fff;
}

.print-page.embedded-coe-preview {
    min-height: 100vh;
    padding: 0;
    background: #fff;
}

.embedded-coe-preview .print-document {
    margin: 0 auto;
    box-shadow: none;
}

@media (max-width: 1180px) {
    .personnel-coe-workspace {
        width: min(560px, calc(100vw - 1.25rem));
    }

    .coe-options-card {
        min-height: auto;
    }

    .coe-live-preview,
    .coe-live-preview iframe {
        min-height: 720px;
        height: 720px;
    }
}


/* Clean layout for report preview and browser printing. */
.print-only-layout {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

.print-only-layout .print-page {
    margin-inline: auto;
}

html:has(.print-only-layout),
body:has(.print-only-layout) {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    background: #eef2f6;
}


/* Standalone personnel print workspace used by Employee Records > Print. */
.personnel-print-standalone {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    background: #e8edf3;
    box-sizing: border-box;
}

.personnel-print-standalone .coe-options-card {
    width: min(560px, 100%);
    min-height: auto;
}

@media (max-width: 1100px) {
    .personnel-print-standalone {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .personnel-print-standalone .coe-options-card {
        min-height: auto;
    }
}

/* Personnel Print Options slider restoration */
.coe-options-card .coe-option-switch {
    position: relative;
}

.coe-options-card .coe-option-switch > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.coe-options-card .coe-switch-slider {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
    transition: background-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

.coe-options-card .coe-switch-slider::after {
    content: "";
    position: absolute;
    top: 4.5px;
    left: 4.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .24);
    transition: transform .18s ease;
}

.coe-options-card .coe-option-switch > input[type="checkbox"]:checked + .coe-switch-slider {
    background: #159589;
}

.coe-options-card .coe-option-switch > input[type="checkbox"]:focus-visible + .coe-switch-slider {
    box-shadow: 0 0 0 4px rgba(21, 149, 137, .18);
}

.coe-options-card .personnel-coe-checks {
    display: grid;
}

.personnel-print-dialog.personnel-coe-workspace {
    margin: auto;
}

/* Personnel Print Options redesign to match modal mockup */
.personnel-print-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 1.25rem;
}

.personnel-print-dialog.personnel-coe-workspace,
.personnel-print-standalone {
    width: 100%;
}

.personnel-print-dialog.personnel-coe-workspace {
    max-width: 420px;
    position: relative;
}

.personnel-print-standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(226, 232, 240, .88);
}

.personnel-options-card {
    width: min(420px, 100%);
    min-height: 0;
    padding: 1.45rem 1.35rem 1.5rem;
    border: 1px solid #dce6f1;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}

.personnel-options-card h2 {
    margin: 0;
    color: #0F766E;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 800;
}

.personnel-options-subtitle {
    margin: .45rem 0 1rem;
    color: #64748b;
    font-size: .86rem;
    font-weight: 700;
}

.personnel-doc-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-bottom: .75rem;
    padding: .55rem 1rem;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-size: .95rem;
    font-weight: 800;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.personnel-coe-panel {
    padding: .95rem .95rem 1rem;
    border: 1px solid #e5ebf2;
    border-radius: 16px;
    background: #f8fafc;
}

.personnel-options-card .personnel-coe-checks {
    display: grid;
    gap: .8rem;
    margin: 0;
}

.personnel-options-card .coe-option-switch {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-height: 32px;
    color: #172033;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.35;
}

.personnel-options-card .coe-switch-slider {
    width: 44px;
    height: 24px;
}

.personnel-options-card .coe-switch-slider::after {
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
}

.personnel-options-card .coe-option-switch > input[type="checkbox"]:checked + .coe-switch-slider::after {
    transform: translateX(20px);
}

.personnel-options-card .coe-purpose-label {
    display: block;
    margin-top: .95rem;
    margin-bottom: .45rem;
    color: #475569;
    font-size: .92rem;
    font-weight: 800;
}

.coe-purpose-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: .65rem;
    align-items: center;
}

.personnel-options-card .coe-purpose-input {
    min-height: 46px;
    padding: .7rem .85rem;
    border-color: #c9d7e5;
    border-radius: 12px;
    font-size: .95rem;
    box-shadow: none;
}

.personnel-options-card .coe-purpose-input:focus {
    border-color: #88b7ff;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .12);
}

.coe-inline-print-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: #159589;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.coe-inline-print-button:hover,
.coe-inline-print-button:focus-visible {
    background: #0f7e75;
}

.coe-inline-print-button .print-option-icon,
.coe-other-documents-stacked .print-option-icon {
    width: 1rem;
    height: 1rem;
}

.coe-primary-print-button {
    display: none !important;
}

.coe-other-documents-stacked {
    display: grid;
    gap: .7rem;
    margin-top: .95rem;
}

.coe-other-documents-stacked button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 42px;
    padding: .75rem 1rem;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
}

.coe-other-documents-stacked button:hover {
    border-color: #bfd0e4;
    background: #f8fafc;
}

.personnel-dialog-close.retirement-dialog-close,
.personnel-coe-workspace .retirement-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.standalone-personnel-options-card {
    margin: 0 auto;
}

@media (max-width: 640px) {
    .personnel-options-card {
        width: min(100%, 420px);
        padding: 1.2rem 1rem 1.2rem;
    }

    .personnel-options-card .coe-option-switch {
        font-size: .92rem;
    }
}

/* COE options accordion: collapsed by default, slides open from the COE button */
.personnel-doc-pill {
    width: 100%;
    position: relative;
    cursor: pointer;
    font: inherit;
}

.personnel-doc-chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    color: #64748b;
    font-size: .78rem;
    transform: translateY(-50%);
    transition: transform .24s ease;
}

.personnel-doc-pill.is-open .personnel-doc-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.personnel-coe-panel[data-personnel-coe-panel] {
    max-height: 0;
    margin: 0;
    padding: 0 .95rem;
    overflow: hidden;
    border-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        max-height .32s ease,
        margin .28s ease,
        padding .28s ease,
        opacity .2s ease,
        transform .28s ease,
        visibility 0s linear .32s,
        border-color .2s ease;
}

.personnel-coe-panel[data-personnel-coe-panel].is-open {
    max-height: 520px;
    margin: 0 0 .75rem;
    padding: .95rem .95rem 1rem;
    border-color: #e5ebf2;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        max-height .36s ease,
        margin .28s ease,
        padding .28s ease,
        opacity .22s ease .06s,
        transform .28s ease,
        visibility 0s linear 0s,
        border-color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .personnel-coe-panel[data-personnel-coe-panel],
    .personnel-doc-chevron {
        transition: none;
    }
}

/* Tighter spacing between Certificate of Employment and Service Record */
.personnel-options-card .personnel-doc-pill {
    margin-bottom: .3rem;
}

.personnel-options-card .coe-other-documents-stacked {
    margin-top: .3rem;
}

.personnel-options-card .personnel-coe-panel[data-personnel-coe-panel].is-open {
    margin-bottom: .3rem;
}

/* Let the Personnel Print Options card shrink to its collapsed content height. */
.personnel-print-dialog.personnel-coe-workspace,
.personnel-options-card,
.standalone-personnel-options-card {
    height: auto;
    min-height: 0;
    max-height: none;
}

.personnel-options-card {
    padding-bottom: .9rem;
}

.personnel-options-card .coe-other-documents-stacked {
    margin-bottom: 0;
}

.personnel-options-card .coe-other-documents-stacked button:last-child {
    margin-bottom: 0;
}


/* Personnel Print Options sizing/style refinements to match provided mockup */

.personnel-print-dialog.personnel-coe-workspace {
    max-width: 420px;
}

.personnel-options-card {
    width: min(420px, 100%);
    padding: 1.3rem 1.25rem .95rem;
    border-radius: 26px;
}

.personnel-options-card h2 {
    color: #0F766E;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0;
}

.personnel-options-subtitle {
    margin: .35rem 0 .95rem;
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.personnel-options-card .personnel-doc-pill {
    min-height: 42px;
    margin-bottom: .2rem;
    border-radius: 14px;
    font-size: .92rem;
    font-weight: 700;
    color: #334155;
    justify-content: center;
}

.personnel-doc-chevron {
    right: .95rem;
    font-size: .72rem;
}

.personnel-options-card .coe-other-documents-stacked {
    display: grid;
    gap: .7rem;
    margin-top: .25rem;
    justify-items: end;
}

.personnel-options-card .coe-other-documents-stacked button {
    width: 165px;
    min-height: 48px;
    padding: .75rem .9rem;
    border-radius: 16px;
    justify-content: center;
    gap: .5rem;
    font-size: .94rem;
    font-weight: 800;
    color: #334155;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    background: #fff;
}

.personnel-options-card .coe-other-documents-stacked .print-option-icon {
    width: .95rem;
    height: .95rem;
    opacity: .9;
}

.personnel-options-card .personnel-coe-panel[data-personnel-coe-panel].is-open {
    margin-bottom: .2rem;
}

.personnel-coe-workspace .retirement-dialog-close,
.personnel-dialog-close.retirement-dialog-close {
    width: 36px;
    height: 36px;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1rem;
}

@media (max-width: 640px) {
    .personnel-options-card {
        width: min(100%, 420px);
    }

    .personnel-options-card .coe-other-documents-stacked {
        justify-items: stretch;
    }

    .personnel-options-card .coe-other-documents-stacked button {
        width: 100%;
    }
}

/* Final Personnel Print Options design matching the supplied reference */
.personnel-print-dialog.personnel-coe-workspace {
    max-width: 420px;
}

.personnel-options-card {
    width: min(420px, 100%);
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 24px;
}

.personnel-options-card h2 {
    color: #0F766E;
    font-size: 1.12rem;
    font-weight: 800;
}

.personnel-options-subtitle {
    margin: .4rem 0 1rem;
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.personnel-options-card .personnel-doc-pill,
.personnel-options-card .coe-other-documents-stacked button {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d6e0ea;
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-size: .94rem;
    font-weight: 700;
    box-shadow: none;
}

.personnel-options-card .personnel-doc-pill {
    margin-bottom: .55rem;
    justify-content: center;
}

.personnel-options-card .coe-other-documents-stacked {
    display: grid;
    gap: .65rem;
    margin-top: 0;
    justify-items: stretch;
}

.personnel-options-card .coe-other-documents-stacked button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem 1rem;
    text-decoration: none;
}

.personnel-options-card .coe-other-documents-stacked button:hover,
.personnel-options-card .personnel-doc-pill:hover {
    border-color: #bfd0e4;
    background: #f8fafc;
}

.personnel-options-card .coe-other-documents-stacked .print-option-icon {
    width: .95rem;
    height: .95rem;
    opacity: .9;
}

.personnel-doc-chevron {
    right: .9rem;
    color: #64748b;
    font-size: .72rem;
}

.personnel-coe-workspace .retirement-dialog-close,
.personnel-dialog-close.retirement-dialog-close {
    width: 34px;
    height: 34px;
    top: 14px;
    right: 14px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1rem;
}

.personnel-options-card .personnel-coe-panel[data-personnel-coe-panel].is-open {
    margin-bottom: .55rem;
}

/* Force Service Record and Leave Credits to full width like COE */
.personnel-options-card .coe-other-documents-stacked {
    justify-items: stretch !important;
}

.personnel-options-card .coe-other-documents-stacked button {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
}

/* COE certification format: match official reference layout */
.coe-document {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    color: #000;
}

.coe-document .coe-header {
    grid-template-columns: 104px minmax(0, 1fr) 104px;
    margin-bottom: .34in;
}

.coe-document .coe-header img {
    grid-column: 1;
    grid-row: 1;
    width: 78px;
    height: 78px;
    margin-left: 0;
    justify-self: center;
    align-self: start;
}

.coe-document .coe-header > div {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.coe-document .coe-header h5 {
    margin: 24px -80px 0;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.coe-document h2 {
    margin: .42in 0 .46in;
    font-size: 25px;
}

.coe-document .coe-concern {
    margin: 0 0 .24in;
}

.coe-document .coe-certify-line {
    margin-left: .42in;
    margin-right: .42in;
}

.coe-document .coe-employee-line {
    margin-left: 0;
    margin-right: 0;
    line-height: 1.55;
}

.coe-compensation-table {
    width: 3.25in;
    margin: .12in 0 .28in .82in;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
    line-height: 1.42;
}

.coe-compensation-table td {
    padding: 0 .02in;
    border: 0;
    vertical-align: baseline;
}

.coe-compensation-table td:first-child {
    width: 1.55in;
    padding-left: 0;
    text-align: left;
}

.coe-compensation-table td:last-child {
    width: 1.25in;
    padding-right: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.coe-compensation-table .coe-compensation-total td {
    padding-top: .05in;
    border-top: 1px solid #000;
}

.coe-document .coe-purpose {
    margin-top: .28in;
}

.coe-document .coe-issued {
    margin-top: .24in;
}

.coe-document .coe-signature {
    margin-top: .72in;
}

@media print {
    .coe-compensation-table {
        width: 3.25in !important;
        margin-left: .82in !important;
    }

    .coe-compensation-table td:last-child {
        text-align: right !important;
    }
}

/* COE paragraph and compensation alignment refinement */
.coe-document .coe-certify-line {
    margin-left: 0;
    margin-right: 0;
    text-indent: .48in;
    text-align: justify;
    text-align-last: justify;
}

.coe-compensation-table {
    width: 2.65in;
    margin-left: .82in;
}

.coe-compensation-table td:first-child {
    width: 1.35in;
}

.coe-compensation-table td:last-child {
    width: 1.02in;
}

@media print {
    .coe-compensation-table {
        width: 2.65in !important;
        margin-left: .82in !important;
    }
}

/* COE letterhead: match Step Increment logo/header spacing */
.coe-document .coe-header {
    grid-template-columns: 32mm minmax(0, 1fr) 32mm;
    align-items: start;
}

.coe-document .coe-header img {
    width: 16mm;
    height: 16mm;
    justify-self: end;
    align-self: start;
    margin: 0 3mm 0 0;
    object-fit: contain;
}

.coe-document .coe-header > div {
    grid-column: 2;
    text-align: center;
}

@media print {
    .coe-document .coe-header {
        grid-template-columns: 32mm minmax(0, 1fr) 32mm !important;
    }

    .coe-document .coe-header img {
        width: 16mm !important;
        height: 16mm !important;
        justify-self: end !important;
        margin-right: 3mm !important;
    }
}

/* COE letterhead: use the exact Step Increment logo size and position */
.coe-document .coe-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 120px !important;
    align-items: start !important;
    min-height: 86px !important;
    margin: 0 0 .35in !important;
    text-align: center !important;
}

.coe-document .coe-header img {
    position: static !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    width: 86px !important;
    height: 86px !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 0 0 120px !important;
    transform: none !important;
    object-fit: contain !important;
}

.coe-document .coe-header > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

.coe-document .coe-header p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.coe-document .coe-header h3 {
    margin: 4px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.coe-document .coe-header h5 {
    margin: 24px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* COE: use the exact Step Increment header geometry from logo through salutation */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead {
    margin-bottom: 0;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead img {
    width: 86px !important;
    height: 86px !important;
    object-fit: contain;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h4 {
    white-space: nowrap;
}

.coe-document.coe-step-header-layout .coe-copied-step-title {
    margin-top: 2.05rem !important;
    margin-bottom: 2.9rem !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-concern {
    margin: 0 0 2.2rem !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
}

@media print {
    .coe-document.coe-step-header-layout .coe-copied-step-letterhead {
        display: grid !important;
        grid-template-columns: 86px minmax(0, 1fr) 86px !important;
        column-gap: 18px !important;
        align-items: start !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-letterhead img {
        width: 86px !important;
        height: 86px !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-title {
        font-size: 17px !important;
    }
}

/* Final COE letterhead correction: use the exact Step Increment geometry */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 120px !important;
    align-items: start !important;
    min-height: 86px !important;
    margin: 0 0 .35in !important;
    text-align: center !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead::after {
    content: none !important;
    display: none !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead img {
    position: static !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    width: 86px !important;
    height: 86px !important;
    justify-self: start !important;
    margin: 0 0 0 120px !important;
    transform: none !important;
    object-fit: contain !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h3 {
    margin: 4px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h4 {
    margin: 24px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-title {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 9mm !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-concern {
    margin: 0 0 2.2rem !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
}

/* COE: move logo slightly upward to better match Step Increment print preview */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead img,
.coe-document .coe-header img {
    margin-top: -4px !important;
}

@media print {
    .coe-document.coe-step-header-layout .coe-copied-step-letterhead img,
    .coe-document .coe-header img {
        margin-top: -4px !important;
    }
}

/* COE: move logo one additional step upward */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead img,
.coe-document .coe-header img {
    margin-top: -8px !important;
}

@media print {
    .coe-document.coe-step-header-layout .coe-copied-step-letterhead img,
    .coe-document .coe-header img {
        margin-top: -8px !important;
    }
}

/* Loyalty Pay print header/body aligned to Step Increment header geometry */
.loyalty-document .loyalty-certification {
    font-family: Arial, "Segoe UI", sans-serif;
}

.loyalty-document .loyalty-header {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: start;
    min-height: 86px;
    margin: 0 0 .35in;
    text-align: center;
}

.loyalty-document .loyalty-header img {
    grid-column: 1 / span 2;
    grid-row: 1;
    width: 86px;
    height: 86px;
    justify-self: start;
    margin: 0 0 0 120px;
    object-fit: contain;
}

.loyalty-document .loyalty-header div {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    text-align: center;
}

.loyalty-document .loyalty-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    text-transform: uppercase;
}

.loyalty-document .loyalty-header h3 {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
}

.loyalty-document .loyalty-header h4 {
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}

.loyalty-document .loyalty-certification > h2 {
    width: 100%;
    max-width: none;
    margin: 0 0 9mm;
    font-size: 17px;
    line-height: 1.15;
    text-align: center;
    font-weight: 700;
}

.loyalty-document .loyalty-concern {
    margin: 0 0 7mm;
    font-size: 10.5px;
    line-height: 1.28;
}

.loyalty-document .loyalty-body-line {
    margin: 0 0 1.8mm;
    font-size: 10.5px;
    line-height: 1.28;
    text-align: justify;
}

.loyalty-document .loyalty-certify-line {
    margin-left: 10mm;
    margin-bottom: 1.8mm;
    text-indent: 0;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.loyalty-document .loyalty-table {
    width: calc(100% - 8mm);
    margin: 2mm 0 5mm 8mm;
    font-size: 10.5px;
}

.loyalty-document .loyalty-table th,
.loyalty-document .loyalty-table td {
    padding: 2px 6px;
}

.loyalty-document .loyalty-support,
.loyalty-document .loyalty-issued {
    margin-top: 5mm;
    text-indent: 10mm;
}

.loyalty-document .loyalty-signature {
    width: 260px;
    margin: 26mm 0 0 auto;
    text-align: center;
}

.loyalty-document .loyalty-signature strong {
    font-size: 10.5px;
}

.loyalty-document .loyalty-signature span {
    font-size: 10.5px;
}

@media print {
    .loyalty-document .loyalty-header {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) 120px !important;
        align-items: start !important;
        min-height: 86px !important;
        margin: 0 0 .35in !important;
        text-align: center !important;
    }

    .loyalty-document .loyalty-header img {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        width: 86px !important;
        height: 86px !important;
        justify-self: start !important;
        margin: 0 0 0 120px !important;
        object-fit: contain !important;
    }

    .loyalty-document .loyalty-header div {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .loyalty-document .loyalty-header p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
    }

    .loyalty-document .loyalty-header h3 {
        margin: 4px 0 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    .loyalty-document .loyalty-header h4 {
        margin: 24px 0 0 !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    .loyalty-document .loyalty-certification > h2 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 9mm !important;
        font-size: 17px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        font-weight: 700 !important;
    }

    .loyalty-document .loyalty-concern,
    .loyalty-document .loyalty-body-line,
    .loyalty-document .loyalty-signature strong,
    .loyalty-document .loyalty-signature span {
        font-size: 10.5px !important;
        line-height: 1.28 !important;
    }

    .loyalty-document .loyalty-concern {
        margin: 0 0 7mm !important;
    }

    .loyalty-document .loyalty-body-line {
        margin: 0 0 1.8mm !important;
        text-align: justify !important;
    }

    .loyalty-document .loyalty-certify-line {
        margin-left: 10mm !important;
        margin-bottom: 1.8mm !important;
        text-indent: 0 !important;
        text-align: justify !important;
        text-align-last: justify !important;
        white-space: nowrap !important;
    }

    .loyalty-document .loyalty-table {
        width: calc(100% - 8mm) !important;
        margin: 2mm 0 5mm 8mm !important;
        font-size: 10.5px !important;
    }

    .loyalty-document .loyalty-table th,
    .loyalty-document .loyalty-table td {
        padding: 2px 6px !important;
    }

    .loyalty-document .loyalty-support,
    .loyalty-document .loyalty-issued {
        margin-top: 5mm !important;
        text-indent: 10mm !important;
    }

    .loyalty-document .loyalty-signature {
        width: 260px !important;
        margin: 26mm 0 0 auto !important;
        text-align: center !important;
    }
}

/* Loyalty Pay: match COE body typography and increase logo-to-header spacing */
.loyalty-document .loyalty-certification {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    color: #000 !important;
}

.loyalty-document .loyalty-header img {
    margin-left: 92px !important;
}

.loyalty-document .loyalty-certification > h2 {
    margin: .42in 0 .46in !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.loyalty-document .loyalty-concern {
    margin: 0 0 .24in !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.loyalty-document .loyalty-body-line {
    margin: 0 0 .22in !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: justify !important;
    text-align-last: left !important;
    word-spacing: .03em !important;
}

.loyalty-document .loyalty-certify-line {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    text-indent: .48in !important;
    text-align: justify !important;
    text-align-last: justify !important;
    white-space: normal !important;
}

.loyalty-document .loyalty-table {
    width: calc(100% - 20px) !important;
    margin: .2in 10px .28in !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.loyalty-document .loyalty-table th,
.loyalty-document .loyalty-table td {
    padding: 3px 8px !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 14px !important;
}

.loyalty-document .loyalty-support,
.loyalty-document .loyalty-issued {
    margin-top: .24in !important;
    text-indent: .48in !important;
}

.loyalty-document .loyalty-signature {
    width: 260px !important;
    margin: .72in .32in 0 auto !important;
    text-align: center !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.loyalty-document .loyalty-signature strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-decoration: underline !important;
}

.loyalty-document .loyalty-signature span {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

@media print {
    .loyalty-document .loyalty-header img {
        margin-left: 92px !important;
    }

    .loyalty-document .loyalty-certification > h2 {
        margin: .42in 0 .46in !important;
        font-size: 25px !important;
        line-height: 1.2 !important;
    }

    .loyalty-document .loyalty-concern {
        margin: 0 0 .24in !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .loyalty-document .loyalty-body-line {
        margin: 0 0 .22in !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        text-align: justify !important;
        text-align-last: left !important;
        word-spacing: .03em !important;
    }

    .loyalty-document .loyalty-certify-line {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        text-indent: .48in !important;
        text-align-last: justify !important;
        white-space: normal !important;
    }

    .loyalty-document .loyalty-table {
        width: calc(100% - 20px) !important;
        margin: .2in 10px .28in !important;
        font-size: 14px !important;
    }

    .loyalty-document .loyalty-table th,
    .loyalty-document .loyalty-table td {
        padding: 3px 8px !important;
        font-size: 14px !important;
    }

    .loyalty-document .loyalty-support,
    .loyalty-document .loyalty-issued {
        margin-top: .24in !important;
        text-indent: .48in !important;
    }

    .loyalty-document .loyalty-signature {
        width: 260px !important;
        margin: .72in .32in 0 auto !important;
    }

    .loyalty-document .loyalty-signature strong {
        font-size: 15px !important;
    }

    .loyalty-document .loyalty-signature span {
        font-size: 14px !important;
    }
}

/* Synchronize COE and Loyalty Pay CERTIFICATION titles */
.coe-document.coe-step-header-layout .coe-copied-step-title,
.loyalty-document .loyalty-certification > h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 9mm !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

@media print {
    .coe-document.coe-step-header-layout .coe-copied-step-title,
    .loyalty-document .loyalty-certification > h2 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 9mm !important;
        font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* Universal certification body typography for COE, Loyalty Pay, and Step Increment */
:root {
    --cert-body-font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    --cert-body-font-size: 15px;
    --cert-body-line-height: 1.55;
    --cert-body-indent: .48in;
    --cert-body-small-size: 14px;
    --cert-signature-name-size: 15px;
    --cert-signature-role-size: 14px;
}

/* Step Increment: move logo slightly upward, matching COE header tuning */
.step-increment-document .si-letterhead img {
    margin-top: -8px !important;
}

/* Loyalty Pay: move logo slightly upward, matching COE header tuning */
.loyalty-document .loyalty-header img {
    margin-top: -8px !important;
}

/* Shared body typography */
.coe-document .coe-concern,
.coe-document .coe-certify-line,
.coe-document .coe-employee-line,
.coe-document .coe-purpose,
.coe-document .coe-issued,
.coe-compensation-table,
.coe-compensation-table td,
.coe-document .coe-signature,
.coe-document .coe-signature strong,
.coe-document .coe-signature span,

.loyalty-document .loyalty-concern,
.loyalty-document .loyalty-body-line,
.loyalty-document .loyalty-certify-line,
.loyalty-document .loyalty-support,
.loyalty-document .loyalty-issued,
.loyalty-document .loyalty-table,
.loyalty-document .loyalty-table th,
.loyalty-document .loyalty-table td,
.loyalty-document .loyalty-signature,
.loyalty-document .loyalty-signature strong,
.loyalty-document .loyalty-signature span,

.step-increment-document .si-recipient,
.step-increment-document .si-recipient strong,
.step-increment-document .si-recipient span,
.step-increment-document .si-paragraph,
.step-increment-document .si-salary-table,
.step-increment-document .si-salary-labels,
.step-increment-document .si-salary-values,
.step-increment-document .si-salary-labels span,
.step-increment-document .si-salary-values strong,
.step-increment-document .si-understanding,
.step-increment-document .si-signature,
.step-increment-document .si-signature p,
.step-increment-document .si-signature strong,
.step-increment-document .si-signature span,
.step-increment-document .si-footer,
.step-increment-document .si-footer p {
    font-family: var(--cert-body-font-family) !important;
}

.coe-document .coe-concern,
.coe-document .coe-certify-line,
.coe-document .coe-employee-line,
.coe-document .coe-purpose,
.coe-document .coe-issued,
.loyalty-document .loyalty-concern,
.loyalty-document .loyalty-body-line,
.loyalty-document .loyalty-certify-line,
.loyalty-document .loyalty-support,
.loyalty-document .loyalty-issued,
.step-increment-document .si-recipient,
.step-increment-document .si-recipient strong,
.step-increment-document .si-recipient span,
.step-increment-document .si-paragraph,
.step-increment-document .si-understanding,
.step-increment-document .si-footer,
.step-increment-document .si-footer p {
    font-size: var(--cert-body-font-size) !important;
    line-height: var(--cert-body-line-height) !important;
}

.coe-compensation-table,
.coe-compensation-table td,
.loyalty-document .loyalty-table,
.loyalty-document .loyalty-table th,
.loyalty-document .loyalty-table td,
.step-increment-document .si-salary-table,
.step-increment-document .si-salary-labels,
.step-increment-document .si-salary-values,
.step-increment-document .si-salary-labels span,
.step-increment-document .si-salary-values strong {
    font-size: var(--cert-body-font-size) !important;
    line-height: 1.4 !important;
}

.coe-document .coe-certify-line,
.loyalty-document .loyalty-certify-line,
.step-increment-document .si-tabbed {
    text-indent: var(--cert-body-indent) !important;
}

.coe-document .coe-signature strong,
.loyalty-document .loyalty-signature strong,
.step-increment-document .si-signature strong {
    font-size: var(--cert-signature-name-size) !important;
    line-height: 1.35 !important;
}

.coe-document .coe-signature span,
.loyalty-document .loyalty-signature span,
.step-increment-document .si-signature span,
.step-increment-document .si-signature p {
    font-size: var(--cert-signature-role-size) !important;
    line-height: 1.35 !important;
}

@media print {
    .step-increment-document .si-letterhead img {
        margin-top: -8px !important;
    }

    .loyalty-document .loyalty-header img {
        margin-top: -8px !important;
    }

    .coe-document .coe-concern,
    .coe-document .coe-certify-line,
    .coe-document .coe-employee-line,
    .coe-document .coe-purpose,
    .coe-document .coe-issued,
    .coe-compensation-table,
    .coe-compensation-table td,
    .coe-document .coe-signature,
    .coe-document .coe-signature strong,
    .coe-document .coe-signature span,

    .loyalty-document .loyalty-concern,
    .loyalty-document .loyalty-body-line,
    .loyalty-document .loyalty-certify-line,
    .loyalty-document .loyalty-support,
    .loyalty-document .loyalty-issued,
    .loyalty-document .loyalty-table,
    .loyalty-document .loyalty-table th,
    .loyalty-document .loyalty-table td,
    .loyalty-document .loyalty-signature,
    .loyalty-document .loyalty-signature strong,
    .loyalty-document .loyalty-signature span,

    .step-increment-document .si-recipient,
    .step-increment-document .si-recipient strong,
    .step-increment-document .si-recipient span,
    .step-increment-document .si-paragraph,
    .step-increment-document .si-salary-table,
    .step-increment-document .si-salary-labels,
    .step-increment-document .si-salary-values,
    .step-increment-document .si-salary-labels span,
    .step-increment-document .si-salary-values strong,
    .step-increment-document .si-understanding,
    .step-increment-document .si-signature,
    .step-increment-document .si-signature p,
    .step-increment-document .si-signature strong,
    .step-increment-document .si-signature span,
    .step-increment-document .si-footer,
    .step-increment-document .si-footer p {
        font-family: var(--cert-body-font-family) !important;
    }

    .coe-document .coe-concern,
    .coe-document .coe-certify-line,
    .coe-document .coe-employee-line,
    .coe-document .coe-purpose,
    .coe-document .coe-issued,
    .loyalty-document .loyalty-concern,
    .loyalty-document .loyalty-body-line,
    .loyalty-document .loyalty-certify-line,
    .loyalty-document .loyalty-support,
    .loyalty-document .loyalty-issued,
    .step-increment-document .si-recipient,
    .step-increment-document .si-recipient strong,
    .step-increment-document .si-recipient span,
    .step-increment-document .si-paragraph,
    .step-increment-document .si-understanding,
    .step-increment-document .si-footer,
    .step-increment-document .si-footer p {
        font-size: var(--cert-body-font-size) !important;
        line-height: var(--cert-body-line-height) !important;
    }

    .coe-compensation-table,
    .coe-compensation-table td,
    .loyalty-document .loyalty-table,
    .loyalty-document .loyalty-table th,
    .loyalty-document .loyalty-table td,
    .step-increment-document .si-salary-table,
    .step-increment-document .si-salary-labels,
    .step-increment-document .si-salary-values,
    .step-increment-document .si-salary-labels span,
    .step-increment-document .si-salary-values strong {
        font-size: var(--cert-body-font-size) !important;
        line-height: 1.4 !important;
    }

    .coe-document .coe-certify-line,
    .loyalty-document .loyalty-certify-line,
    .step-increment-document .si-tabbed {
        text-indent: var(--cert-body-indent) !important;
    }

    .coe-document .coe-signature strong,
    .loyalty-document .loyalty-signature strong,
    .step-increment-document .si-signature strong {
        font-size: var(--cert-signature-name-size) !important;
        line-height: 1.35 !important;
    }

    .coe-document .coe-signature span,
    .loyalty-document .loyalty-signature span,
    .step-increment-document .si-signature span,
    .step-increment-document .si-signature p {
        font-size: var(--cert-signature-role-size) !important;
        line-height: 1.35 !important;
    }
}

/* Final print synchronization: COE, Loyalty Pay, and Step Increment */
:root {
    --cert-universal-font: "Microsoft New Tai Lue", Arial, sans-serif;
    --cert-universal-body-size: 14px;
    --cert-universal-body-line-height: 1.5;
    --cert-universal-title-size: 18px;
    --cert-universal-office-size: 17px;
    --cert-universal-signatory-size: 14px;
    --cert-universal-signatory-role-size: 13px;
}

/* Keep the office headings equal in all three formats. */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h4,
.loyalty-document .loyalty-header h4,
.step-increment-document .si-letterhead-text h4 {
    font-family: var(--cert-universal-font) !important;
    font-size: var(--cert-universal-office-size) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* Titles are slightly larger than the office heading and share one location rhythm. */
.coe-document.coe-step-header-layout .coe-copied-step-title,
.loyalty-document .loyalty-certification > h2,
.step-increment-document .si-title {
    font-family: var(--cert-universal-font) !important;
    font-size: var(--cert-universal-title-size) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-top: 0 !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-title,
.loyalty-document .loyalty-certification > h2 {
    margin-bottom: 9mm !important;
}

.step-increment-document .si-title {
    margin-bottom: 9mm !important;
}

/* One body font, size, weight and line spacing for all three documents. */
.coe-document .coe-concern,
.coe-document .coe-certify-line,
.coe-document .coe-employee-line,
.coe-document .coe-purpose,
.coe-document .coe-issued,
.coe-document .coe-compensation-table,
.coe-document .coe-compensation-table td,

.loyalty-document .loyalty-concern,
.loyalty-document .loyalty-body-line,
.loyalty-document .loyalty-table,
.loyalty-document .loyalty-table th,
.loyalty-document .loyalty-table td,

.step-increment-document .si-recipient,
.step-increment-document .si-recipient strong,
.step-increment-document .si-recipient span,
.step-increment-document .si-paragraph,
.step-increment-document .si-salary-table,
.step-increment-document .si-salary-labels,
.step-increment-document .si-salary-values,
.step-increment-document .si-salary-labels span,
.step-increment-document .si-salary-values strong,
.step-increment-document .si-footer,
.step-increment-document .si-footer p {
    font-family: var(--cert-universal-font) !important;
    font-size: var(--cert-universal-body-size) !important;
    line-height: var(--cert-universal-body-line-height) !important;
    font-style: normal !important;
}

/* Preserve emphasis only where content is intentionally bold. */
.coe-document .coe-employee-line strong,
.loyalty-document .loyalty-body-line strong,
.step-increment-document .si-recipient strong,
.step-increment-document .si-salary-values strong {
    font-weight: 700 !important;
}

/* Unified paragraph indentation. */
.coe-document .coe-certify-line,
.loyalty-document .loyalty-certify-line,
.step-increment-document .si-tabbed {
    text-indent: .48in !important;
}

/* Unified signatory typography. */
.coe-document .coe-signature,
.loyalty-document .loyalty-signature,
.step-increment-document .si-signature,
.coe-document .coe-signature strong,
.loyalty-document .loyalty-signature strong,
.step-increment-document .si-signature strong,
.coe-document .coe-signature span,
.loyalty-document .loyalty-signature span,
.step-increment-document .si-signature span,
.step-increment-document .si-signature p {
    font-family: var(--cert-universal-font) !important;
    font-style: normal !important;
}

.coe-document .coe-signature strong,
.loyalty-document .loyalty-signature strong,
.step-increment-document .si-signature strong {
    font-size: var(--cert-universal-signatory-size) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.coe-document .coe-signature span,
.loyalty-document .loyalty-signature span,
.step-increment-document .si-signature span,
.step-increment-document .si-signature p {
    font-size: var(--cert-universal-signatory-role-size) !important;
    line-height: 1.35 !important;
}

/* Maintain the requested upward logo adjustment in Loyalty Pay and Step Increment. */
.loyalty-document .loyalty-header img,
.step-increment-document .si-letterhead img {
    margin-top: -8px !important;
}

@media print {
    .coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h4,
    .loyalty-document .loyalty-header h4,
    .step-increment-document .si-letterhead-text h4 {
        font-size: var(--cert-universal-office-size) !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-title,
    .loyalty-document .loyalty-certification > h2,
    .step-increment-document .si-title {
        font-size: var(--cert-universal-title-size) !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 9mm !important;
    }

    .coe-document .coe-concern,
    .coe-document .coe-certify-line,
    .coe-document .coe-employee-line,
    .coe-document .coe-purpose,
    .coe-document .coe-issued,
    .coe-document .coe-compensation-table,
    .coe-document .coe-compensation-table td,
    .loyalty-document .loyalty-concern,
    .loyalty-document .loyalty-body-line,
    .loyalty-document .loyalty-table,
    .loyalty-document .loyalty-table th,
    .loyalty-document .loyalty-table td,
    .step-increment-document .si-recipient,
    .step-increment-document .si-recipient strong,
    .step-increment-document .si-recipient span,
    .step-increment-document .si-paragraph,
    .step-increment-document .si-salary-table,
    .step-increment-document .si-salary-labels,
    .step-increment-document .si-salary-values,
    .step-increment-document .si-salary-labels span,
    .step-increment-document .si-salary-values strong,
    .step-increment-document .si-footer,
    .step-increment-document .si-footer p {
        font-family: var(--cert-universal-font) !important;
        font-size: var(--cert-universal-body-size) !important;
        line-height: var(--cert-universal-body-line-height) !important;
        font-style: normal !important;
    }

    .loyalty-document .loyalty-header img,
    .step-increment-document .si-letterhead img {
        margin-top: -8px !important;
    }
}

/* Final universal page geometry for COE, Loyalty Pay, and Step Increment */
:root {
    --cert-page-width: 210mm;
    --cert-page-height: 297mm;
    --cert-page-padding-top: 15mm;
    --cert-page-padding-right: 18mm;
    --cert-page-padding-bottom: 12mm;
    --cert-page-padding-left: 18mm;
    --cert-content-width: 174mm;
    --cert-header-bottom-space: 9mm;
    --cert-title-bottom-space: 9mm;
    --cert-section-gap: 5mm;
    --cert-signature-top-space: 18mm;
}

.print-document.coe-document,
.print-document.loyalty-document,
.print-document.step-increment-document {
    width: min(var(--cert-page-width), calc(100vw - 3rem)) !important;
    min-height: var(--cert-page-height) !important;
    padding: var(--cert-page-padding-top)
             var(--cert-page-padding-right)
             var(--cert-page-padding-bottom)
             var(--cert-page-padding-left) !important;
    box-sizing: border-box !important;
}

.print-document.coe-document > article,
.print-document.loyalty-document > article,
.print-document.step-increment-document > article,
.print-document.coe-document .coe-document,
.print-document.loyalty-document .loyalty-certification,
.print-document.step-increment-document .si-document {
    width: 100% !important;
    max-width: var(--cert-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Same header-to-title rhythm */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead,
.loyalty-document .loyalty-header,
.step-increment-document .si-letterhead {
    margin-bottom: var(--cert-header-bottom-space) !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-title,
.loyalty-document .loyalty-certification > h2,
.step-increment-document .si-title {
    margin-top: 0 !important;
    margin-bottom: var(--cert-title-bottom-space) !important;
}

/* Same content start and paragraph spacing */
.coe-document .coe-concern,
.loyalty-document .loyalty-concern,
.step-increment-document .si-date {
    margin-bottom: 7mm !important;
}

.coe-document .coe-certify-line,
.coe-document .coe-employee-line,
.coe-document .coe-purpose,
.coe-document .coe-issued,
.loyalty-document .loyalty-body-line,
.loyalty-document .loyalty-support,
.loyalty-document .loyalty-issued,
.step-increment-document .si-paragraph,
.step-increment-document .si-understanding {
    margin-top: 0 !important;
    margin-bottom: var(--cert-section-gap) !important;
}

/* Keep tables aligned to the same inner content edge */
.coe-document .coe-compensation-table,
.loyalty-document .loyalty-table,
.step-increment-document .si-salary-table {
    box-sizing: border-box !important;
}

/* Same signature top spacing */
.coe-document .coe-signature,
.loyalty-document .loyalty-signature,
.step-increment-document .si-signature {
    margin-top: var(--cert-signature-top-space) !important;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body,
    .print-page {
        width: var(--cert-page-width) !important;
        min-width: var(--cert-page-width) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-document.coe-document,
    .print-document.loyalty-document,
    .print-document.step-increment-document {
        width: var(--cert-page-width) !important;
        min-width: var(--cert-page-width) !important;
        min-height: var(--cert-page-height) !important;
        margin: 0 !important;
        padding: var(--cert-page-padding-top)
                 var(--cert-page-padding-right)
                 var(--cert-page-padding-bottom)
                 var(--cert-page-padding-left) !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .print-document.coe-document > article,
    .print-document.loyalty-document > article,
    .print-document.step-increment-document > article,
    .print-document.coe-document .coe-document,
    .print-document.loyalty-document .loyalty-certification,
    .print-document.step-increment-document .si-document {
        width: 100% !important;
        max-width: var(--cert-content-width) !important;
        min-height: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-letterhead,
    .loyalty-document .loyalty-header,
    .step-increment-document .si-letterhead {
        margin-bottom: var(--cert-header-bottom-space) !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-title,
    .loyalty-document .loyalty-certification > h2,
    .step-increment-document .si-title {
        margin-top: 0 !important;
        margin-bottom: var(--cert-title-bottom-space) !important;
    }

    .coe-document .coe-signature,
    .loyalty-document .loyalty-signature,
    .step-increment-document .si-signature {
        margin-top: var(--cert-signature-top-space) !important;
    }
}

/* Final alignment: match Loyalty Pay and Step Increment top position to COE */
.loyalty-document .loyalty-header img,
.step-increment-document .si-letterhead img {
    margin-top: 0 !important;
}

/* Remove the artificial gap between the first and second lines of the opening paragraph */
.coe-document .coe-certify-line,
.loyalty-document .loyalty-certify-line {
    margin-bottom: 0 !important;
}

.coe-document .coe-certify-line + .coe-employee-line,
.loyalty-document .loyalty-certify-line + .loyalty-body-line {
    margin-top: 0 !important;
}

@media print {
    .loyalty-document .loyalty-header img,
    .step-increment-document .si-letterhead img {
        margin-top: 0 !important;
    }

    .coe-document .coe-certify-line,
    .loyalty-document .loyalty-certify-line {
        margin-bottom: 0 !important;
    }

    .coe-document .coe-certify-line + .coe-employee-line,
    .loyalty-document .loyalty-certify-line + .loyalty-body-line {
        margin-top: 0 !important;
    }
}


/* Final tune: lower Loyalty Pay and Step Increment headers to match COE, tighten opening paragraph lines, and compact Loyalty Pay table headers */
.loyalty-document .loyalty-header,
.step-increment-document .si-letterhead {
    margin-top: 4mm !important;
}

.coe-document .coe-certify-line,
.loyalty-document .loyalty-certify-line {
    margin-bottom: -1.2mm !important;
}

.coe-document .coe-certify-line + .coe-employee-line,
.loyalty-document .loyalty-certify-line + .loyalty-body-line {
    margin-top: -0.8mm !important;
}

.loyalty-document .loyalty-table {
    width: calc(100% - 22mm) !important;
    margin: 2mm auto 5mm auto !important;
    color: #000 !important;
}

.loyalty-document .loyalty-table th,
.loyalty-document .loyalty-table td {
    color: #000 !important;
    text-align: center !important;
}

.loyalty-document .loyalty-table th {
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 4px 8px !important;
}

.loyalty-document .loyalty-table td {
    font-size: 12px !important;
}

.loyalty-document .loyalty-table th:nth-child(1),
.loyalty-document .loyalty-table td:nth-child(1) {
    width: 41% !important;
}

.loyalty-document .loyalty-table th:nth-child(2),
.loyalty-document .loyalty-table td:nth-child(2) {
    width: 37% !important;
}

.loyalty-document .loyalty-table th:nth-child(3),
.loyalty-document .loyalty-table td:nth-child(3) {
    width: 22% !important;
}

@media print {
    .loyalty-document .loyalty-header,
    .step-increment-document .si-letterhead {
        margin-top: 4mm !important;
    }

    .coe-document .coe-certify-line,
    .loyalty-document .loyalty-certify-line {
        margin-bottom: -1.2mm !important;
    }

    .coe-document .coe-certify-line + .coe-employee-line,
    .loyalty-document .loyalty-certify-line + .loyalty-body-line {
        margin-top: -0.8mm !important;
    }

    .loyalty-document .loyalty-table {
        width: calc(100% - 22mm) !important;
        margin: 2mm auto 5mm auto !important;
        color: #000 !important;
    }

    .loyalty-document .loyalty-table th,
    .loyalty-document .loyalty-table td {
        color: #000 !important;
        text-align: center !important;
    }

    .loyalty-document .loyalty-table th {
        white-space: nowrap !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        padding: 4px 8px !important;
    }

    .loyalty-document .loyalty-table td {
        font-size: 12px !important;
    }

    .loyalty-document .loyalty-table th:nth-child(1),
    .loyalty-document .loyalty-table td:nth-child(1) {
        width: 41% !important;
    }

    .loyalty-document .loyalty-table th:nth-child(2),
    .loyalty-document .loyalty-table td:nth-child(2) {
        width: 37% !important;
    }

    .loyalty-document .loyalty-table th:nth-child(3),
    .loyalty-document .loyalty-table td:nth-child(3) {
        width: 22% !important;
    }
}


/* Processed HR Actions remain visible even when pending count is zero */
.processed-hr-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}
.processed-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.processed-hr-actions h3 {
    margin: 0;
    color: #475569;
    font-size: .95rem;
    font-weight: 700;
}
.processed-toggle-button {
    min-height: 30px;
    padding: .3rem .75rem;
    border: 1px solid #d7e1ea;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}
.processed-toggle-button:hover {
    border-color: #8FC7BF;
    color: #0F766E;
}
.processed-task-list {
    margin-top: .75rem;
    max-height: 215px;
}
.modern-task-item.is-processed {
    background: #f8fafc;
    border-color: #dbe5ef;
}
.modern-task-item.is-processed .task-marker {
    background: #94a3b8;
}
.task-restore-button {
    min-height: 34px;
    padding: .45rem .85rem;
    border: 1px solid #0F766E;
    border-radius: 9px;
    background: #fff;
    color: #0F766E;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.task-restore-button:hover {
    background: #ECF8F6;
}


/* Pending HR Actions no longer renders processed tasks inside the dashboard card. */
.tasks-card { overflow: hidden; }


/* Reliable server-post actions for processed HR tasks */
.processed-log-restore-form,
.task-action-form {
    display: inline-flex;
    margin: 0;
}


/* Original Appointments year selector: use reliable full-page links */
.year-filter-menu .year-filter-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: .55rem .7rem;
    color: #334155;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.year-filter-menu .year-filter-link:hover,
.year-filter-menu .year-filter-link.is-selected {
    color: #0F766E;
    background: #ECF8F6;
}


/* Original Appointments year control: lower selected year and keep panel-only refresh */
.year-filter-menu summary {
    align-items: flex-end;
    padding-top: .72rem;
    padding-bottom: .28rem;
    line-height: 1;
}

.year-filter-menu summary::before {
    top: -.42rem;
}

.year-filter-option {
    cursor: pointer;
}

/* Center the selected year and dropdown arrow as one group */
.year-filter-menu summary {
    justify-content: center !important;
    gap: .72rem !important;
    padding-left: .72rem !important;
    padding-right: .72rem !important;
    text-align: center !important;
}

.year-filter-menu summary::after {
    position: static !important;
    right: auto !important;
    flex: 0 0 .45rem;
    margin: 0 !important;
}


/* Login account assistance links */
.login-actions-single {
    grid-template-columns: 1fr;
}

.login-account-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.15rem;
    font-size: .82rem;
}

.login-account-links a {
    color: var(--primary);
    font-weight: 650;
    text-decoration: none;
}

.login-account-links a:hover,
.login-account-links a:focus-visible {
    color: var(--primary-hover);
    text-decoration: underline;
}

.login-account-links strong {
    font-weight: 800;
}

.login-account-link-disabled {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font: inherit;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    cursor: not-allowed;
    opacity: .82;
}

.login-account-link-disabled strong {
    font-weight: 800;
}

.login-account-link-disabled:disabled {
    color: #9ca3af;
}

.login-account-links-centered {
    justify-content: center;
}

.login-assistance-panel {
    width: min(470px, calc(100vw - 2rem));
}

@media (max-width: 520px) {
    .login-account-links {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }

    .login-account-links-centered {
        align-items: center;
    }
}

/* Personnel Records: CS Form No. 7 clearance form. */
.print-document.clearance-form-print-document {
    width: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.clearance-form-set {
    display: grid;
    gap: 1rem;
    color: #000;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
}

.clearance-page {
    position: relative;
    width: min(210mm, calc(100vw - 3rem));
    min-height: 297mm;
    margin: 0 auto;
    padding: 8mm 5mm 4mm;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    font-size: 11pt;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    line-height: 1.06;
}

.clearance-page * {
    box-sizing: border-box;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.clearance-page .clearance-letterhead {
    position: relative !important;
    display: block !important;
    min-height: .72in !important;
    margin: 0 0 .08in !important;
    text-align: center !important;
}

.clearance-page .clearance-letterhead img {
    position: absolute !important;
    top: 0 !important;
    left: calc(50% - 185px) !important;
    width: .72in !important;
    height: .72in !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
}

.clearance-page .clearance-letterhead .si-letterhead-text {
    width: 100% !important;
    text-align: center !important;
}

.clearance-page .clearance-letterhead p,
.clearance-page .clearance-letterhead h3,
.clearance-page .clearance-letterhead h4 {
    margin: 0 !important;
    color: #000 !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

.clearance-page .clearance-letterhead p {
    font-size: 7.5pt !important;
    font-weight: 400 !important;
}

.clearance-page .clearance-letterhead h3 {
    margin-top: 1px !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
}

.clearance-page .clearance-letterhead h4 {
    margin-top: 1px !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
}

.clearance-form-heading {
    position: relative;
    display: block;
    min-height: 18mm;
    padding: 0 2mm 2mm;
}

.clearance-form-heading > p {
    position: absolute;
    top: 2mm;
    left: 2mm;
    margin: 0;
    font-size: 8pt;
    line-height: 1.05;
}

.clearance-form-heading > img {
    position: absolute;
    top: 0;
    left: calc(50% - 48mm);
    width: 15mm;
    height: 15mm;
    object-fit: contain;
}

.clearance-form-heading > div {
    position: absolute;
    top: 1mm;
    left: 50%;
    width: 82mm;
    transform: translateX(-50%);
    text-align: center;
}

.clearance-form-heading h3 {
    margin: 0;
    font-size: 10pt;
    line-height: 1.05;
}

.clearance-form-heading h1 {
    margin: 0;
    font-size: 12pt;
    line-height: 1.05;
}

.clearance-form-heading span {
    display: block;
    margin-top: 2px;
    font-size: 8pt;
    font-style: italic;
}

.clearance-section {
    border: 1.4px solid #000;
    border-bottom: 0;
}

.clearance-section:last-of-type {
    border-bottom: 1.4px solid #000;
}

.clearance-section h2 {
    display: grid;
    grid-template-columns: .27in 1fr;
    column-gap: 2mm;
    align-items: center;
    min-height: .22in;
    margin: 0;
    border-bottom: 1px solid #000;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.05;
}

.clearance-section h2 span {
    align-self: stretch;
    display: grid;
    place-items: center;
    border-right: 1px solid #000;
    font-weight: 600;
}

.clearance-purpose-body {
    position: relative;
    min-height: 1.22in;
    padding: .08in .12in .05in .72in;
}

.clearance-purpose-body p {
    margin: 0 0 .04in;
}

.clearance-filing-date {
    position: absolute;
    top: .08in;
    right: .22in;
    display: grid;
    min-width: 1.55in;
    text-align: center;
}

.clearance-filing-date strong {
    padding: 0 .08in .02in;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.clearance-filing-date span {
    margin-top: 2px;
}

.clearance-to {
    display: grid;
    grid-template-columns: .4in 1fr;
    padding-top: .28in;
}

.clearance-purpose-grid {
    display: grid;
    grid-template-columns: .62in 1fr 1fr 1.55fr;
    gap: .04in .12in;
    align-items: center;
}

.clearance-purpose-grid span {
    white-space: nowrap;
}

.clearance-box {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.2px solid #000;
    vertical-align: -1px;
}

.clearance-box.is-checked {
    background: #000;
}

.clearance-fill-line {
    display: inline-block;
    min-width: 1.25in;
    height: 10px;
    border-bottom: 1px solid #000;
    vertical-align: bottom;
}

.clearance-effectivity {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .05in;
    margin-top: .06in !important;
    padding-left: 0;
    text-align: left;
}

.clearance-effectivity > span {
    white-space: nowrap;
}

.clearance-effectivity strong,
.clearance-specify-line strong {
    flex: 1;
    min-height: 11px;
    padding: 0 .04in;
    border-bottom: 1px solid #000;
    text-align: left;
}

.clearance-specify-line {
    display: flex;
    align-items: baseline;
    gap: .04in;
}

.clearance-employee-grid {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    min-height: .67in;
    border-top: 1px solid #000;
}

.clearance-employee-grid > div {
    min-width: 0;
    padding: .08in .18in .04in;
}

.clearance-employee-grid > div + div {
    border-left: 1px solid #000;
}

.clearance-employee-grid p {
    margin: 0 0 .1in;
}

.clearance-data-line {
    display: grid;
    grid-template-columns: 1.52in minmax(0, 1fr);
    align-items: baseline;
    gap: .06in;
    width: 100%;
    min-width: 0;
}

.clearance-data-line > span {
    text-align: right;
    white-space: nowrap;
}

.clearance-data-line > strong {
    min-width: 0;
    padding: 0 .03in 1px;
    border-bottom: 1px solid #000;
    text-align: left;
}

/* These are form-field rules, not text underlines: both end at the same edge. */
.clearance-page .clearance-data-line > .clearance-field-value {
    display: block;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #000;
    text-decoration: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.clearance-employee-signature,
.clearance-supervisor-grid > div,
.clearance-mayor-signature {
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: center;
}

.clearance-employee-signature strong,
.clearance-supervisor-grid strong,
.clearance-mayor-signature strong {
    min-height: .18in;
    border-bottom: 1px solid #000;
}

.clearance-employee-signature strong,
.clearance-supervisor-grid > div:last-child strong,
.clearance-mayor-signature strong {
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.clearance-certify-line {
    min-height: .39in;
    margin: 0;
    padding: .07in .55in;
    text-align: center;
}

.clearance-supervisor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: .48in;
}

.clearance-supervisor-grid > div {
    padding: 0 .38in .04in;
}

.clearance-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11pt;
    line-height: 1;
}

.clearance-table th,
.clearance-table td {
    height: 5.4mm;
    padding: 1px 3px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    vertical-align: middle;
}

.clearance-table th:last-child,
.clearance-table td:last-child {
    border-right: 0;
}

.clearance-table th {
    height: 8mm;
    padding: 1mm 1.2mm;
    font-size: 7.5pt;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.clearance-table td:first-child {
    padding-left: .12in;
}

.clearance-table td:nth-child(2),
.clearance-table td:nth-child(3),
.clearance-table td:nth-child(4),
.clearance-table td:nth-child(5) {
    text-align: center;
}

.clearance-table td strong,
.clearance-table td span {
    display: block;
    font-weight: 400;
}

.clearance-unit-col {
    width: 41%;
}

.clearance-check-col {
    width: 9%;
}

.clearance-officer-col {
    width: 26%;
}

.clearance-signature-col {
    width: 15%;
}

.clearance-table .clearance-group-row td {
    height: 4.6mm;
    padding: 2px .15in;
    background: #e5e7eb;
    font-size: 9.5pt;
    font-style: italic;
}

.clearance-accountability-section .clearance-table tbody tr:not(.clearance-group-row) td {
    height: 5.4mm;
    font-size: 10pt;
}

.clearance-work-section h2,
.clearance-accountability-section h2 {
    font-size: 11pt;
    font-weight: 600;
}

.clearance-case-table td:first-child {
    font-size: 10pt;
}

.clearance-case-table td:nth-child(4) {
    font-size: 10pt;
}

.clearance-case-table td {
    height: 6mm;
}

.clearance-case-options {
    display: grid;
    gap: 2px;
    min-height: .42in;
    padding: .04in 0 .04in 1.2in;
}

.clearance-final-section {
    border-bottom: 1.4px solid #000;
}

.clearance-final-section > p {
    min-height: .45in;
    margin: 0;
    padding: .08in .28in 0;
    text-align: justify;
}

.clearance-mayor-signature {
    width: 2.6in;
    min-height: .56in;
    margin: 0 auto .04in;
}

.clearance-page-number {
    position: absolute;
    right: .32in;
    bottom: .12in;
    font-size: 6.75pt;
    font-style: italic;
}

.clearance-instructions-page {
    padding: .45in .55in;
    font-size: 10.5pt;
    line-height: 1.35;
}

.clearance-instructions-page .clearance-instructions-letterhead {
    margin-bottom: .35in !important;
}

.clearance-instructions-page h1 {
    margin: 0 0 .3in;
    font-size: 12.75pt;
    font-style: italic;
}

.clearance-instructions-page ol {
    display: grid;
    gap: .22in;
    margin: 0;
    padding-left: .35in;
}

.clearance-instructions-page li {
    padding-left: .08in;
    text-align: justify;
}

@page clearance-form-page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html:has(.clearance-form-set),
    body:has(.clearance-form-set),
    .print-only-layout:has(.clearance-form-set),
    .print-page:has(.clearance-form-set) {
        width: 210mm !important;
        min-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .print-document.clearance-form-print-document {
        width: 210mm !important;
        min-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    .clearance-form-set {
        display: block;
    }

    .clearance-page {
        page: clearance-form-page;
        width: 210mm !important;
        min-width: 210mm !important;
        min-height: 297mm !important;
        height: 297mm !important;
        margin: 0 !important;
        box-shadow: none !important;
        break-after: page;
        page-break-after: always;
        overflow: hidden;
    }

    .clearance-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }
}

/* Public account signup and password-recovery OTP flow */
.otp-account-panel { width: min(540px, calc(100vw - 2rem)); }
.otp-step-indicator { display: grid; grid-template-columns: repeat(3, 34px); justify-content: center; gap: 2.4rem; margin: .2rem 0 1rem; }
.otp-step-indicator span { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #cbd5e1; border-radius: 999px; color: #64748b; background: #fff; font-size: .78rem; font-weight: 800; }
.otp-step-indicator span:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 2.4rem; height: 1px; background: #dbe4ea; }
.otp-step-indicator span.is-active { color: #fff; border-color: #0F766E; background: #0F766E; }
.otp-method-fieldset { margin: 0; padding: 0; border: 0; }
.otp-method-fieldset legend { margin-bottom: .45rem; color: #24314a; font-size: .82rem; font-weight: 700; }
.otp-method-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.otp-method-options label { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid #cbd5e1; border-radius: 11px; color: #334155; background: #f8fafc; cursor: pointer; font-size: .82rem; font-weight: 700; }
.otp-method-options label:has(input:checked) { color: #0f766e; border-color: #0F766E; background: #ECF8F6; }
.otp-method-options input { accent-color: #0F766E; }
.otp-help-text { display: block; margin-top: .35rem; color: #64748b; font-size: .7rem; line-height: 1.35; }
.otp-delivery-note { margin: 0 0 .9rem; color: #475569; text-align: center; font-size: .82rem; }
.otp-code-input { text-align: center; letter-spacing: .45rem; font-size: 1.3rem; font-weight: 800; }
.otp-development-code { margin-bottom: .85rem; padding: .65rem .8rem; border: 1px dashed #f59e0b; border-radius: 10px; color: #92400e; background: #fffbeb; text-align: center; font-size: .78rem; }
.otp-secondary-link { display: block; margin-top: .8rem; color: #0F766E; text-align: center; font-size: .78rem; font-weight: 700; text-decoration: none; }
.otp-primary-link { width: 100%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 520px) { .otp-method-options { grid-template-columns: 1fr; } }


/* Step Increment list print dialog and printable list */
.step-list-print-modal[hidden] { display: none !important; }
.step-list-print-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(15,23,42,.42); backdrop-filter: blur(3px); }
.step-list-print-dialog { width: min(420px, 100%); padding: 1.2rem; border: 1px solid #dbe4ea; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.22); }
.step-list-print-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.step-list-print-header h2 { margin: 0; color: #172033; font-size: 1.2rem; }
.step-list-print-header span { display: block; margin-top: .25rem; color: #64748b; font-size: .82rem; }
.step-list-print-close { width: 34px; height: 34px; border: 0; border-radius: 999px; color: #64748b; background: #f1f5f9; font-size: 1.15rem; }
.step-list-print-year-label { display: block; margin-bottom: .4rem; color: #334155; font-size: .84rem; font-weight: 700; }
.step-list-print-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.step-list-print-button { position: relative; }

/* Modern print-list dropdowns and modal entrance. */
.step-list-print-modal:not([hidden]) {
    animation: print-list-backdrop-in .18s ease-out both;
}

.step-list-print-modal:not([hidden]) .step-list-print-dialog {
    overflow: visible;
    animation: print-list-dialog-in .24s cubic-bezier(.2, .8, .2, 1) both;
}

.print-list-native-select.is-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.print-list-select-shell {
    position: relative;
    z-index: 30;
    display: block;
    width: 100%;
}

.print-list-select-shell.is-open {
    z-index: 80;
}

.print-list-select-shell .smooth-select-button {
    min-height: 42px;
    padding: .58rem .8rem;
    border-color: #CBD5E1;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.print-list-select-shell .smooth-select-button:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
}

.print-list-select-shell.is-open .smooth-select-button,
.print-list-select-shell .smooth-select-button:focus-visible {
    border-color: #0F8A80;
    box-shadow: 0 0 0 3px rgba(15, 138, 128, .12);
    transform: none;
}

.print-list-select-shell .smooth-select-menu {
    top: calc(100% + 6px);
    display: grid;
    max-height: 202px;
    gap: 2px;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    border-color: #D7E1E8;
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px) scale(.98);
    transform-origin: top center;
    transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
}

.print-list-select-shell.is-open .smooth-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.print-list-select-shell .smooth-select-option {
    position: relative;
    min-height: 36px;
    padding: .48rem 2rem .48rem .7rem;
    border-radius: 6px;
    color: #1E293B;
    font-size: .84rem;
}

.print-list-select-shell .smooth-select-option:hover,
.print-list-select-shell .smooth-select-option:focus-visible {
    color: #0F766E;
    background: #F0FDFA;
}

.print-list-select-shell .smooth-select-option[aria-selected="true"] {
    color: #FFFFFF;
    background: #0F8278;
}

.print-list-select-shell .smooth-select-option[aria-selected="true"]::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    right: .7rem;
    font-weight: 700;
    transform: translateY(-50%);
}

.print-list-select-shell .smooth-select-menu::-webkit-scrollbar {
    width: 8px;
}

.print-list-select-shell .smooth-select-menu::-webkit-scrollbar-thumb {
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: #B8C4D3;
}

@@keyframes print-list-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@@keyframes print-list-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@@media (prefers-reduced-motion: reduce) {
    .step-list-print-modal:not([hidden]),
    .step-list-print-modal:not([hidden]) .step-list-print-dialog,
    .print-list-select-shell .smooth-select-menu {
        animation: none;
        transition: none;
    }
}

.step-list-print-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding: .75rem; background: #e5e7eb; }
.step-list-print-toolbar button { padding: .55rem 1.15rem; border: 0; border-radius: 9px; color: #fff; background: #0F766E; font-weight: 700; }
.step-list-print-toolbar .step-list-back-button { background: #475569; }
.print-list-lock-form { margin: 0; }
.step-list-print-toolbar .print-list-lock-button { background: #b45309; }
.step-list-print-toolbar .print-list-lock-button:hover:not(:disabled) { background: #92400e; }
.step-list-print-toolbar .print-list-lock-button:disabled { cursor: not-allowed; opacity: .55; }
.print-list-lock-status { display: inline-flex; align-items: center; min-height: 38px; padding: .45rem .8rem; border: 1px solid #86cbbf; border-radius: 9px; color: #075e54; background: #e8f7f4; font-size: .82rem; font-weight: 800; }
.step-list-print-toolbar .print-list-unlock-button { border: 1px solid #f59e0b; color: #92400e; background: #fffbeb; }
.step-list-print-toolbar .print-list-unlock-button:hover { color: #78350f; background: #fef3c7; }
.step-list-print-page { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 13mm 11mm 12mm; color: #000; background: #fff; font-family: "Microsoft New Tai Lue", Arial, sans-serif; box-sizing: border-box; }
.step-list-print-letterhead { position: relative; min-height: 31mm; display: flex; align-items: flex-start; justify-content: center; }
.step-list-print-letterhead img { position: absolute; left: 13mm; top: 0; width: 24mm; height: 24mm; object-fit: contain; }
.step-list-print-government { padding-top: 2mm; text-align: center; font-family: "Times New Roman", serif; font-size: 12pt; line-height: 1.05; }
.step-list-print-government strong { display: block; font-size: 12pt; }
.step-list-print-page h1 { margin: -2mm 0 2mm; color: #e11d1d; text-align: center; font-size: 15pt; font-weight: 800; }
.step-list-print-page h2 { margin: 0; text-align: center; font-size: 13pt; font-weight: 800; text-decoration: underline; text-decoration-color: #93c5fd; text-decoration-thickness: 5px; text-underline-offset: -2px; }
.step-list-print-page h3 { margin: 1mm 0 3mm; color: #e11d1d; text-align: center; font-size: 14pt; font-weight: 800; }
.step-list-print-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: "Times New Roman", serif; font-size: 8.5pt; line-height: 1.05; }
.step-list-print-table th, .step-list-print-table td { padding: 1.3mm 1.2mm; border: 1px solid #000; vertical-align: top; }
.step-list-print-table th { text-align: center; font-size: 8.7pt; font-weight: 700; }
.step-list-print-table .row-no { width: 6mm; padding-left: .8mm; padding-right: .5mm; border-right: 0; }
.step-list-print-table th:nth-child(2) { width: 43mm; border-left: 0; }
.step-list-print-table th:nth-child(3) { width: 51mm; }
.step-list-print-table th:nth-child(4), .step-list-print-table th:nth-child(5), .step-list-print-table th:nth-child(6) { width: 29mm; }
.step-list-print-table td:nth-child(2) { border-left: 0; }
.step-list-print-table .next-date { color: #000; font-weight: 400; text-align: center; }
.step-list-empty { margin: 1rem 0; text-align: center; font-weight: 700; }
@page step-increment-list-page { size: A4 portrait; margin: 0; }
@media print {
    body:has(.step-list-print-page) { margin: 0 !important; background: #fff !important; }
    .no-print { display: none !important; }
    .step-list-print-page { page: step-increment-list-page; width: 210mm; min-height: 297mm; margin: 0; box-shadow: none; }
    .step-list-print-table thead { display: table-header-group; }
    .step-list-print-table tr { break-inside: avoid; page-break-inside: avoid; }
}


/* Step Increment list print: centralized COE letterhead format */
.step-list-print-letterhead {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 120px !important;
    align-items: start !important;
    min-height: 112px !important;
    margin: 0 0 8mm !important;
    text-align: center !important;
}

.step-list-print-letterhead img {
    position: static !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    width: 86px !important;
    height: 86px !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 0 0 120px !important;
    transform: none !important;
    object-fit: contain !important;
}

.step-list-print-government {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.step-list-print-government p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.step-list-print-government h3 {
    margin: 4px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.step-list-print-government h5 {
    margin: 24px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.step-list-print-page > h2 {
    margin-top: 0 !important;
}

@media print {
    .step-list-print-letterhead {
        grid-template-columns: 120px minmax(0, 1fr) 120px !important;
        min-height: 112px !important;
        margin-bottom: 8mm !important;
    }

    .step-list-print-letterhead img {
        width: 86px !important;
        height: 86px !important;
        margin-left: 120px !important;
    }
}


/* Step Increment employee list: all active employees, A4 landscape, standardized report typography */
.step-list-print-page {
    width: 297mm !important;
    min-height: 210mm !important;
    margin: 0 auto !important;
    padding: 12mm 14mm 11mm !important;
    box-sizing: border-box !important;
    color: #000 !important;
    background: #fff !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
}

.step-list-print-letterhead {
    grid-template-columns: 145px minmax(0, 1fr) 145px !important;
    min-height: 104px !important;
    margin: 0 0 6mm !important;
}

.step-list-print-letterhead img {
    width: 82px !important;
    height: 82px !important;
    margin-left: 145px !important;
}

.step-list-print-government,
.step-list-print-government p,
.step-list-print-government h3,
.step-list-print-government h5,
.step-list-print-page > h2,
.step-list-print-page > h3,
.step-list-print-table,
.step-list-print-table th,
.step-list-print-table td {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.step-list-print-government p {
    font-size: 11pt !important;
    line-height: 1.15 !important;
}

.step-list-print-government h3 {
    margin-top: 2px !important;
    font-size: 11.5pt !important;
    line-height: 1.15 !important;
}

.step-list-print-government h5 {
    margin-top: 16px !important;
    font-size: 13pt !important;
    line-height: 1.2 !important;
}

.step-list-print-page > h2 {
    margin: 0 !important;
    font-size: 13pt !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

.step-list-print-page > h3 {
    margin: 1.5mm 0 4mm !important;
    color: #000 !important;
    font-size: 12pt !important;
    line-height: 1.2 !important;
}

.step-list-print-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 8.5pt !important;
    line-height: 1.2 !important;
}

.step-list-print-table th,
.step-list-print-table td {
    padding: 1.2mm 1.4mm !important;
    border: 1px solid #000 !important;
    vertical-align: middle !important;
}

.step-list-print-table th {
    font-size: 8.8pt !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.step-list-print-table td:nth-child(2),
.step-list-print-table td:nth-child(3) {
    text-align: left !important;
}

.step-list-print-table td:nth-child(4),
.step-list-print-table td:nth-child(5),
.step-list-print-table td:nth-child(6) {
    text-align: center !important;
    white-space: nowrap !important;
}

.step-list-print-table .row-no {
    width: 9mm !important;
    text-align: right !important;
    padding-right: 1mm !important;
    border-right: 1px solid #000 !important;
}

.step-list-print-table th:nth-child(2) { width: 57mm !important; border-left: 1px solid #000 !important; }
.step-list-print-table th:nth-child(3) { width: 78mm !important; }
.step-list-print-table th:nth-child(4) { width: 38mm !important; }
.step-list-print-table th:nth-child(5) { width: 40mm !important; }
.step-list-print-table th:nth-child(6) { width: 38mm !important; }
.step-list-print-table td:nth-child(2) { border-left: 1px solid #000 !important; }

@page step-increment-list-page {
    size: A4 landscape;
    margin: 0;
}

@media print {
    .step-list-print-page {
        page: step-increment-list-page !important;
        width: 297mm !important;
        min-height: 210mm !important;
        margin: 0 !important;
        padding: 12mm 14mm 11mm !important;
        box-shadow: none !important;
    }

    .step-list-print-letterhead {
        grid-template-columns: 145px minmax(0, 1fr) 145px !important;
        min-height: 104px !important;
        margin-bottom: 6mm !important;
    }

    .step-list-print-letterhead img {
        width: 82px !important;
        height: 82px !important;
        margin-left: 145px !important;
    }

    .step-list-print-table thead {
        display: table-header-group !important;
    }

    .step-list-print-table tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}


/* Step Increment list print refinements: compact rows, wider position, narrower dates, alternating columns, footer page number */
.step-list-print-page {
    position: relative !important;
    padding: 14mm 16mm 16mm !important;
}

.step-list-print-table {
    font-size: 8.1pt !important;
    line-height: 1.08 !important;
}

.step-list-print-table th,
.step-list-print-table td {
    padding: .75mm 1.1mm !important;
    min-height: 0 !important;
}

.step-list-print-table th:nth-child(1),
.step-list-print-table td:nth-child(1),
.step-list-print-table th:nth-child(3),
.step-list-print-table td:nth-child(3),
.step-list-print-table th:nth-child(5),
.step-list-print-table td:nth-child(5) {
    background: #f2f2f2 !important;
}

.step-list-print-table th:nth-child(2),
.step-list-print-table td:nth-child(2),
.step-list-print-table th:nth-child(4),
.step-list-print-table td:nth-child(4),
.step-list-print-table th:nth-child(6),
.step-list-print-table td:nth-child(6) {
    background: #ffffff !important;
}

.step-list-print-table .row-no {
    width: 8mm !important;
}

.step-list-print-table th:nth-child(2) { width: 58mm !important; }
.step-list-print-table th:nth-child(3) { width: 96mm !important; }
.step-list-print-table th:nth-child(4) { width: 31mm !important; }
.step-list-print-table th:nth-child(5) { width: 32mm !important; }
.step-list-print-table th:nth-child(6) { width: 31mm !important; }

.step-list-print-footer {
    display: none;
}

@page step-increment-list-page {
    size: A4 landscape;
    margin: 9mm 10mm 11mm;
}

@media print {
    .step-list-print-page {
        width: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 5mm 6mm 10mm !important;
    }

    .step-list-print-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: -7mm;
        display: flex !important;
        justify-content: center;
        align-items: center;
        color: #444;
        font-family: "Microsoft New Tai Lue", Arial, sans-serif;
        font-size: 8.5pt;
    }

    .step-list-print-footer .page-number::after {
        content: counter(page);
    }

    .step-list-print-table th,
    .step-list-print-table td {
        padding: .7mm 1mm !important;
    }
}


/* Step Increment list: add selected-year step column and rebalance landscape widths */
.step-list-print-table th:nth-child(1),
.step-list-print-table td:nth-child(1),
.step-list-print-table th:nth-child(3),
.step-list-print-table td:nth-child(3),
.step-list-print-table th:nth-child(5),
.step-list-print-table td:nth-child(5),
.step-list-print-table th:nth-child(7),
.step-list-print-table td:nth-child(7) {
    background: #f2f2f2 !important;
}

.step-list-print-table th:nth-child(2),
.step-list-print-table td:nth-child(2),
.step-list-print-table th:nth-child(4),
.step-list-print-table td:nth-child(4),
.step-list-print-table th:nth-child(6),
.step-list-print-table td:nth-child(6) {
    background: #ffffff !important;
}

.step-list-print-table th:nth-child(2) { width: 50mm !important; }
.step-list-print-table th:nth-child(3) { width: 90mm !important; }
.step-list-print-table th:nth-child(4) { width: 27mm !important; }
.step-list-print-table th:nth-child(5) { width: 28mm !important; }
.step-list-print-table th:nth-child(6) { width: 28mm !important; }
.step-list-print-table th:nth-child(7) { width: 25mm !important; }

.step-list-print-table .next-step {
    color: #e11d48;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* Final Step Increment list print layout: row shading, explicit pagination, centered cells, and Step 8 handling */
.step-list-print-document {
    background: #d9dde3;
}

.step-list-print-page {
    position: relative !important;
    width: 297mm !important;
    min-height: 210mm !important;
    margin: 0 auto 8mm !important;
    padding: 12mm 13mm 14mm !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #fff !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    break-after: page !important;
    page-break-after: always !important;
}

.step-list-print-page:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
}

.step-list-print-letterhead {
    position: relative !important;
    display: block !important;
    min-height: 31mm !important;
    margin: 0 0 5mm !important;
    text-align: center !important;
}

.step-list-print-letterhead img {
    position: absolute !important;
    left: 42mm !important;
    top: 0 !important;
    width: 22mm !important;
    height: 22mm !important;
    margin: 0 !important;
    object-fit: contain !important;
}

.step-list-print-government {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
}

.step-list-print-government p {
    margin: 0 !important;
    font-size: 10.5pt !important;
    line-height: 1.12 !important;
}

.step-list-print-government h3 {
    margin: 1mm 0 0 !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.step-list-print-government h5 {
    margin: 4mm 0 0 !important;
    color: #000 !important;
    font-size: 12.5pt !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

.step-list-print-page > h2 {
    margin: 0 !important;
    color: #000 !important;
    text-align: center !important;
    font-size: 12.5pt !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.step-list-print-page > h3 {
    margin: 1mm 0 3.5mm !important;
    color: #000 !important;
    text-align: center !important;
    font-size: 11.5pt !important;
    line-height: 1.15 !important;
}

.step-list-print-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    color: #000 !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 7.8pt !important;
    line-height: 1.05 !important;
}

.step-list-print-table th,
.step-list-print-table td {
    height: 6.8mm !important;
    padding: .45mm .9mm !important;
    border: 1px solid #000 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.step-list-print-table thead th {
    height: 12mm !important;
    background: #e9e9e9 !important;
    text-align: center !important;
    font-size: 7.8pt !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
}

.step-list-print-table tbody tr:nth-child(odd) td {
    background: #fff !important;
}

.step-list-print-table tbody tr:nth-child(even) td {
    background: #f1f1f1 !important;
}

.step-list-print-table .row-no {
    width: 8mm !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.step-list-print-table th:nth-child(2) { width: 46mm !important; }
.step-list-print-table th:nth-child(3) { width: 106mm !important; }
.step-list-print-table th:nth-child(4) { width: 25mm !important; }
.step-list-print-table th:nth-child(5) { width: 25mm !important; }
.step-list-print-table th:nth-child(6) { width: 33mm !important; }
.step-list-print-table th:nth-child(7) { width: 22mm !important; }

.step-list-print-table td:nth-child(2),
.step-list-print-table td:nth-child(3) {
    text-align: left !important;
}

.step-list-print-table .position-cell {
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 7.2pt !important;
}

.step-list-print-table td:nth-child(4),
.step-list-print-table td:nth-child(5),
.step-list-print-table td:nth-child(6),
.step-list-print-table td:nth-child(7) {
    text-align: center !important;
}

.step-list-print-table .next-date,
.step-list-print-table .next-step {
    color: #000 !important;
    font-weight: 400 !important;
}


.step-list-print-table .step-selected-year-row .next-date,
.step-list-print-table .step-selected-year-row .next-step,
.step-list-print-table .selected-year-step {
    color: #e11d48 !important;
    font-weight: 800 !important;
}

.step-list-print-table tr.step-row-current-year td,
.step-list-print-table tr.step-row-current-year td * {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

.step-list-print-table tr.step-row-same-salary-grade td,
.step-list-print-table tr.step-row-same-salary-grade td * {
    color: #15803d !important;
    font-weight: 700 !important;
}

.step-list-print-table tr.step-row-current-year td:nth-child(-n+5),
.step-list-print-table tr.step-row-current-year td:nth-child(-n+5) *,
.step-list-print-table tr.step-row-same-salary-grade td:nth-child(-n+5),
.step-list-print-table tr.step-row-same-salary-grade td:nth-child(-n+5) * {
    font-weight: 400 !important;
}

.step-list-print-table .next-date.maximum-step-note,
.step-list-print-table .maximum-step-note {
    color: #000 !important;
    font-size: 7.1pt !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

.step-list-print-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 5mm !important;
    display: block !important;
    color: #444 !important;
    text-align: center !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 8pt !important;
}

@page step-increment-list-page {
    size: A4 landscape;
    margin: 0;
}

@media print {
    body:has(.step-list-print-document) {
        margin: 0 !important;
        background: #fff !important;
    }

    .step-list-print-document {
        background: #fff !important;
    }

    .step-list-print-page {
        page: step-increment-list-page !important;
        width: 297mm !important;
        min-height: 210mm !important;
        margin: 0 !important;
        padding: 12mm 13mm 14mm !important;
        box-shadow: none !important;
    }
}


/* Step Increment print pagination correction: full header on page 1 only */
.step-list-print-page {
    height: 210mm !important;
    min-height: 210mm !important;
    max-height: 210mm !important;
    padding: 10mm 13mm 12mm !important;
    overflow: hidden !important;
}

.step-list-print-page.continuation-page {
    padding-top: 10mm !important;
}

.step-list-print-page.continuation-page .step-list-print-table {
    margin-top: 0 !important;
}

.step-list-print-table th,
.step-list-print-table td {
    height: 5.2mm !important;
    padding: .2mm .75mm !important;
    vertical-align: middle !important;
}

.step-list-print-table thead th {
    height: 10mm !important;
    padding: .35mm .65mm !important;
}

.step-list-print-footer {
    bottom: 3.5mm !important;
    line-height: 1 !important;
}

@media print {
    .step-list-print-page {
        height: 210mm !important;
        min-height: 210mm !important;
        max-height: 210mm !important;
        padding: 10mm 13mm 12mm !important;
        overflow: hidden !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .step-list-print-table tr.step-row-current-year td,
    .step-list-print-table tr.step-row-current-year td *,
    .step-list-print-table tr.step-row-same-salary-grade td,
    .step-list-print-table tr.step-row-same-salary-grade td *,
    .step-list-signatory .loyalty-color-legend li::before {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .step-list-print-page.continuation-page {
        padding-top: 10mm !important;
    }

    .step-list-print-table th,
    .step-list-print-table td {
        height: 5.2mm !important;
        padding: .2mm .75mm !important;
    }

    .step-list-print-table thead th {
        height: 10mm !important;
    }
}


/* Step Increment list final spacing and capacity refinement */
.step-list-print-letterhead {
    min-height: 28mm !important;
    margin-bottom: 2mm !important;
}

.step-list-print-letterhead img {
    left: 54mm !important;
    top: 0 !important;
}

.step-list-print-government h5 {
    margin-top: 2mm !important;
}

.step-list-print-page > h2 {
    margin-top: 0 !important;
}

.step-list-print-page > h3 {
    margin: .6mm 0 2.2mm !important;
}

.step-list-print-table th:nth-child(2) { width: 56mm !important; }
.step-list-print-table th:nth-child(3) { width: 96mm !important; }

.step-list-print-table th,
.step-list-print-table td {
    height: 4.6mm !important;
    padding: .12mm .65mm !important;
}

.step-list-print-table thead th {
    height: 9mm !important;
    padding: .25mm .55mm !important;
}

.step-list-print-page.first-page {
    padding-top: 8mm !important;
}

.step-list-print-page.continuation-page {
    padding-top: 8mm !important;
}

.step-list-print-footer {
    bottom: 3mm !important;
}

@media print {
    .step-list-print-page.first-page,
    .step-list-print-page.continuation-page {
        padding-top: 8mm !important;
    }

    .step-list-print-table th,
    .step-list-print-table td {
        height: 4.6mm !important;
        padding: .12mm .65mm !important;
    }

    .step-list-print-table thead th {
        height: 9mm !important;
        padding: .25mm .55mm !important;
    }
}


/* Step Increment: maximize page capacity after excluding Casual/COS */
.step-list-print-table th,
.step-list-print-table td {
    height: 4.1mm !important;
    padding: .06mm .55mm !important;
    line-height: 1.02 !important;
}
.step-list-print-table thead th {
    height: 8.2mm !important;
    padding: .15mm .45mm !important;
}
.step-list-print-page.first-page,
.step-list-print-page.continuation-page {
    padding-bottom: 9mm !important;
}
.step-list-print-footer {
    bottom: 2.2mm !important;
}
@media print {
    .step-list-print-table th,
    .step-list-print-table td {
        height: 4.1mm !important;
        padding: .06mm .55mm !important;
        line-height: 1.02 !important;
    }
    .step-list-print-table thead th {
        height: 8.2mm !important;
        padding: .15mm .45mm !important;
    }
    .step-list-print-page.first-page,
    .step-list-print-page.continuation-page {
        padding-bottom: 9mm !important;
    }
    .step-list-print-footer {
        bottom: 2.2mm !important;
    }
}


/* Step Increment continuation-page capacity and footer adjustment */
.step-list-print-footer {
    bottom: 4mm !important;
}
.step-list-print-page.continuation-page {
    padding-bottom: 7mm !important;
}
@media print {
    .step-list-print-footer {
        bottom: 4mm !important;
    }
    .step-list-print-page.continuation-page {
        padding-bottom: 7mm !important;
    }
}


/* Force the actual browser print sheet for the Step Increment list to A4 landscape. */
@media print {
    body:has(.step-list-print-document) {
        width: 297mm !important;
        min-width: 297mm !important;
    }

    .step-list-print-document,
    .step-list-print-page {
        width: 297mm !important;
    }
}

/* Final Step Increment print correction: preserve row shading and match Position font to Employee Name */
.step-list-print-page,
.step-list-print-table,
.step-list-print-table thead,
.step-list-print-table tbody,
.step-list-print-table tr,
.step-list-print-table th,
.step-list-print-table td {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

.step-list-print-table .position-cell {
    font-size: 7.8pt !important;
}

.step-list-print-table tbody tr:nth-child(odd) > td {
    background-color: #ffffff !important;
}

.step-list-print-table tbody tr:nth-child(even) > td {
    background-color: #f1f1f1 !important;
}

@media print {
    .step-list-print-page,
    .step-list-print-table,
    .step-list-print-table thead,
    .step-list-print-table tbody,
    .step-list-print-table tr,
    .step-list-print-table th,
    .step-list-print-table td {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .step-list-print-table .position-cell {
        font-size: 7.8pt !important;
    }

    .step-list-print-table tbody tr:nth-child(odd) > td {
        background-color: #ffffff !important;
    }

    .step-list-print-table tbody tr:nth-child(even) > td {
        background-color: #f1f1f1 !important;
    }
}


/* Original Appointments: reliable panel-only native year selector */
.appointment-year-select-wrap {
    position: relative;
    width: 96px;
    min-width: 96px;
    display: block;
}
.appointment-year-select-wrap > span {
    position: absolute;
    left: .58rem;
    top: -.38rem;
    z-index: 2;
    padding: 0 .26rem;
    color: #0F766E;
    background: #F8FAFC;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}
.appointment-year-select {
    width: 100%;
    min-height: 36px;
    padding: .48rem 2rem .42rem .78rem;
    color: #5B6474;
    border: 2px solid #0F766E;
    border-radius: 5px;
    background-color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
.appointment-year-select:focus {
    outline: none;
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(9,168,182,.1);
}


/* Gender Distribution: match the Original Appointments year selector */
.gender-status-select-wrap {
    width: 156px;
    min-width: 156px;
}
.gender-status-select {
    border-color: #0F766E;
    background-color: #fff;
}
.gender-chart-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.gender-active-summary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .32rem;
    margin-top: .35rem;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.2;
    text-align: center;
}
.gender-active-summary strong {
    color: #172033;
    font-size: .95rem;
    font-weight: 800;
}
.gender-active-summary span {
    font-weight: 600;
}


/* Teal application theme and Gender Distribution subtitle placement */
:root {
    --primary: #0F766E;
    --primary-hover: #0B766F;
    --primary-pressed: #095F5A;
    --teal-soft: #ECF8F6;
    --teal-selected: #CCFBF1;
    --dash-primary: #0F766E;
    --dash-primary-strong: #0B766F;
    --dash-accent: #0F766E;
}

.gender-active-summary-header {
    margin: .2rem 0 0;
    color: #64748B;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.25;
}

/* Replace remaining blue accents with teal across the application */
a,
.link-button,
.text-primary,
.nav-link.active,
.nav-link:hover,
.dropdown-item.active,
.dropdown-item:active {
    color: #0F766E;
}

.btn-primary,
.primary-button,
.action-primary,
button[type="submit"].btn-primary,
.login-submit,
.user-save-button,
.print-action-button,
.export-action-button {
    border-color: #0F766E;
    background-color: #0F766E;
}

.btn-primary:hover,
.primary-button:hover,
.action-primary:hover,
button[type="submit"].btn-primary:hover,
.login-submit:hover,
.user-save-button:hover,
.print-action-button:hover,
.export-action-button:hover {
    border-color: #0B766F;
    background-color: #0B766F;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 .18rem rgba(20, 184, 166, .14);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #0F766E;
}

.switch input:checked + .slider,
.toggle-switch input:checked + .toggle-slider,
.permission-toggle input:checked + span {
    background-color: #0F766E;
}

.badge-primary,
.status-primary,
.active-indicator,
.summary-cos,
.dashboard-accent,
.pagination .page-item.active .page-link {
    border-color: #0F766E;
    background-color: #0F766E;
    color: #fff;
}

.pagination .page-link,
.table-action-button:hover,
.modal-title,
.panel-title-accent {
    color: #0F766E;
}

/* Teal equivalents for legacy blue dashboard accents */
.summary-cos,
.summary-cos:hover,
.summary-personnel-label {
    --summary-color: #0F766E;
    color: #0F766E;
}

.summary-cos .summary-icon,
.summary-cos .summary-progress span {
    background: #0F766E;
}

.appointment-year-select,
.gender-status-select {
    border-color: #0F766E;
}

.appointment-year-select:focus,
.gender-status-select:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 143, 136, .12);
}

.appointment-year-select-wrap > span,
.gender-status-select-wrap > span {
    color: #0F766E;
}


/* Dashboard custom dropdowns and unified application accent */
:root {
    --primary: #0F766E;
    --primary-hover: #0795A3;
    --primary-pressed: #067F8B;
    --dash-primary: #0F766E;
    --dash-primary-strong: #0795A3;
    --dash-accent: #12B8C4;
    --teal-soft: #E8F5F3;
    --teal-selected: #D4F4F7;
}

.dashboard-select-shell {
    position: relative;
    z-index: 30;
    width: 100%;
    min-width: 96px;
}

.appointment-year-select-wrap.dashboard-select-shell {
    width: 96px;
    min-width: 96px;
}

.gender-status-select-wrap.dashboard-select-shell {
    width: 156px;
    min-width: 156px;
}

.dashboard-select-floating-label {
    position: absolute;
    left: .72rem;
    top: -.42rem;
    z-index: 3;
    padding: 0 .28rem;
    color: #0F766E;
    background: #fff;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.dashboard-select-button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .48rem .72rem .42rem .82rem;
    color: #5B6474;
    border: 1px solid #C9D8DF;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15,23,42,.045);
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.dashboard-select-button:hover,
.dashboard-select-button:focus-visible,
.dashboard-select-shell.is-open .dashboard-select-button {
    outline: none;
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(9,168,182,.12), 0 8px 20px rgba(15,23,42,.08);
}

.dashboard-select-chevron {
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
}

.dashboard-select-shell.is-open .dashboard-select-chevron {
    transform: rotate(225deg) translate(-1px,-1px);
}

.dashboard-select-menu {
    position: absolute;
    top: calc(100% + .42rem);
    right: 0;
    z-index: 50;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid #D9E5E8;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15,23,42,.15);
}

.dashboard-select-option {
    width: 100%;
    min-height: 34px;
    display: block;
    padding: .42rem .7rem;
    color: #475569;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.dashboard-select-option:hover,
.dashboard-select-option:focus-visible {
    outline: none;
    color: #115E59;
    background: #E8F5F3;
}

.dashboard-select-option.is-selected {
    color: #fff;
    background: #0F766E;
}

.dashboard-year-menu .dashboard-select-option {
    text-align: center;
}

/* Apply the active Dashboard menu color as the web app's main accent */
.nav-item a.active,
.nav-item a.active:hover,
.btn-primary,
.primary-button,
.action-primary,
button[type="submit"].btn-primary,
.login-submit,
.user-save-button,
.print-action-button,
.export-action-button,
.switch input:checked + .slider,
.toggle-switch input:checked + .toggle-slider,
.permission-toggle input:checked + span,
.badge-primary,
.status-primary,
.active-indicator,
.pagination .page-item.active .page-link {
    border-color: #0F766E !important;
    background-color: #0F766E !important;
}

.nav-item a.active:hover,
.btn-primary:hover,
.primary-button:hover,
.action-primary:hover,
button[type="submit"].btn-primary:hover,
.login-submit:hover,
.user-save-button:hover,
.print-action-button:hover,
.export-action-button:hover {
    border-color: #0795A3 !important;
    background-color: #0795A3 !important;
}

a,
.link-button,
.text-primary,
.pagination .page-link,
.table-action-button:hover,
.modal-title,
.panel-title-accent {
    color: #0F766E;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: #0F766E !important;
    box-shadow: 0 0 0 .18rem rgba(9,168,182,.14) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #0F766E;
}

/* Dashboard Year/Status dropdowns — match filter dropdown styling */
.dashboard-select-shell {
    z-index: 2;
}

.dashboard-select-shell.is-open {
    z-index: 120;
}

.dashboard-select-floating-label {
    top: -.38rem;
    left: .58rem;
    padding: 0 .26rem;
    color: #0F766E;
    background: #F8FAFC;
    font-size: .68rem;
    font-weight: 500;
}

.dashboard-select-button {
    min-height: 36px;
    padding: .43rem 2.18rem .43rem .78rem;
    color: #5B6474;
    border: 2px solid #0F766E;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: none;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
}

.dashboard-select-button:hover,
.dashboard-select-button:focus-visible,
.dashboard-select-shell.is-open .dashboard-select-button {
    border-color: #0F766E;
    border-radius: 5px;
    box-shadow: 0 0 0 3px rgba(9,168,182,.10);
    transform: none;
}

.dashboard-select-chevron {
    position: absolute;
    right: .92rem;
    width: .45rem;
    height: .45rem;
    border-color: #5B6474;
    transform: rotate(45deg) translateY(-1px);
}

.dashboard-select-shell.is-open .dashboard-select-chevron {
    transform: rotate(225deg) translate(-1px,-1px);
}

.dashboard-select-menu {
    top: calc(100% + .34rem);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 240px;
    margin-top: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(8,169,186,.18);
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(39,49,66,.14);
}

.dashboard-select-option {
    min-height: 37px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: .52rem .9rem;
    color: #374151;
    border-radius: 0;
    background: transparent;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
}

.dashboard-select-option:hover,
.dashboard-select-option:focus-visible {
    color: #087E8C;
    background: #F3F4F6;
}

.dashboard-select-option.is-selected {
    color: #0F766E;
    background: #DCEFEB;
}

.dashboard-select-option:last-child {
    border-radius: 0 0 10px 10px;
}

.dashboard-year-menu .dashboard-select-option {
    justify-content: flex-start;
    text-align: left;
}

/* Dashboard two-column panel sequence
   Match all upper rows to the original New Entrants / Recently Filed Leave widths. */
.dashboard-priority-grid,
.dashboard-activity-grid,
.dashboard-lower-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    align-items: stretch;
}

.dashboard-priority-grid > .dashboard-card,
.dashboard-activity-grid > .dashboard-card,
.dashboard-lower-grid > .dashboard-card {
    width: 100%;
    min-height: 390px;
}

.employee-request-card {
    display: flex;
    min-height: 390px;
    flex-direction: column;
}

.employee-request-table {
    overflow: hidden;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    background: #fff;
}

.employee-request-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(120px, .7fr) minmax(170px, .95fr);
    gap: .75rem;
    align-items: center;
    min-height: 42px;
    padding: .58rem .78rem;
    color: #374151;
    background: #f6f8fa;
    border-bottom: 1px solid var(--dash-border);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.employee-request-empty {
    display: grid;
    min-height: 230px;
    place-content: center;
    justify-items: center;
    padding: 1.25rem;
    color: var(--dash-muted);
    text-align: center;
}

.employee-request-empty span {
    color: var(--dash-text);
    font-size: .88rem;
    font-weight: 750;
}

.employee-request-empty small {
    max-width: 420px;
    margin-top: .35rem;
    font-size: .72rem;
    line-height: 1.45;
}

@media (max-width: 1120px) {
    .dashboard-priority-grid,
    .dashboard-activity-grid,
    .dashboard-lower-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard native selects: reliable after any navigation state */
.dashboard-native-select-form { margin: 0; }
.dashboard-native-select-shell {
    position: relative;
    display: block;
    width: 100%;
    min-width: 96px;
}
.dashboard-native-select {
    width: 100%;
    height: 38px;
    padding: 10px 34px 7px 13px;
    border: 2px solid #0F766E;
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: .82rem;
    line-height: 1.1;
    cursor: pointer;
}
.dashboard-native-select:focus {
    outline: none;
    border-color: #078d99;
    box-shadow: 0 0 0 3px rgba(9,168,182,.13);
}
.dashboard-native-select-shell .dashboard-select-floating-label {
    position: absolute;
    z-index: 2;
    top: -7px;
    left: 12px;
    padding: 0 5px;
    background: #fff;
    color: #0F766E;
    font-size: .65rem;
    line-height: 1;
    pointer-events: none;
}
.appointment-year-select-wrap.dashboard-native-select-shell { width: 96px; }
.gender-status-select-wrap.dashboard-native-select-shell { width: 156px; }


/* Dashboard reliable custom select skin over native server-backed selects */
.dashboard-native-select-shell {
    position: relative;
    z-index: 10;
}
.dashboard-native-select-shell.is-open {
    z-index: 500;
}
.dashboard-native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.dashboard-native-select-shell .dashboard-select-floating-label {
    top: -7px;
    left: 12px;
    padding: 0 5px;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
}
.dashboard-native-select-button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .43rem 2.18rem .43rem .78rem;
    color: #5B6474;
    border: 2px solid #0F766E;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: none;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
.dashboard-native-select-button:hover,
.dashboard-native-select-button:focus-visible,
.dashboard-native-select-shell.is-open .dashboard-native-select-button {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(9,168,182,.10);
    outline: none;
}
.dashboard-native-select-button .dashboard-select-chevron {
    position: absolute;
    right: .92rem;
    top: 50%;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid #5B6474;
    border-bottom: 2px solid #5B6474;
    transform: translateY(-68%) rotate(45deg);
    transition: transform .16s ease;
}
.dashboard-native-select-shell.is-open .dashboard-select-chevron {
    transform: translateY(-28%) rotate(225deg);
}
.dashboard-native-select-menu {
    position: absolute;
    top: calc(100% + .34rem);
    left: 0;
    right: 0;
    display: none;
    max-height: 240px;
    padding: 0;
    overflow-y: auto;
    border: 1px solid rgba(8,169,186,.18);
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(39,49,66,.14);
}
.dashboard-native-select-shell.is-open .dashboard-native-select-menu {
    display: grid;
}
.dashboard-native-select-menu .dashboard-select-option {
    min-height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .52rem .9rem;
    color: #374151;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.dashboard-native-select-menu .dashboard-select-option:hover,
.dashboard-native-select-menu .dashboard-select-option:focus-visible {
    color: #087E8C;
    background: #F3F4F6;
    outline: none;
}
.dashboard-native-select-menu .dashboard-select-option[aria-selected="true"] {
    color: #0F766E;
    background: #DCEFEB;
}
.dashboard-native-select-menu .dashboard-select-option:last-child {
    border-radius: 0 0 10px 10px;
}


/* Dashboard panel-only filter refresh */
[data-dashboard-panel] {
    transition: opacity .16s ease, filter .16s ease;
}
[data-dashboard-panel].is-panel-refreshing {
    opacity: .58;
    filter: saturate(.75);
    pointer-events: none;
}
.dashboard-native-select[aria-busy="true"] + .dashboard-select-button,
.dashboard-native-select-shell:has(.dashboard-native-select[aria-busy="true"]) .dashboard-select-button {
    cursor: progress;
}


/* Unified dashboard table styling: New Entrants, Recently Filed Leave, Pending Employees Request */
.unified-dashboard-table-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.unified-dashboard-table {
    overflow: hidden;
    border: 1px solid #DCE5EA;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: none;
}

.unified-dashboard-table .dashboard-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: #374151;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: .78rem;
}

.unified-dashboard-table .dashboard-table thead th,
.unified-dashboard-table .employee-request-head,
.unified-dashboard-table .recent-leave-head {
    min-height: 40px;
    padding: .62rem .72rem;
    color: #5F6B78;
    background: #F7FAFB;
    border-bottom: 1px solid #DCE5EA;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.unified-dashboard-table .dashboard-table thead th {
    position: static;
    vertical-align: middle;
}

.unified-dashboard-table .dashboard-table tbody td,
.unified-dashboard-table .employee-request-empty,
.unified-dashboard-table .recent-leave-row {
    min-height: 52px;
    padding: .68rem .72rem;
    color: #374151;
    background: #FFFFFF;
    border-bottom: 1px solid #EEF2F5;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.3;
    vertical-align: middle;
}

/* Keep the New Entrants status, appointment date, and action on one visual axis. */
.records-card .dashboard-table tbody td.new-entrant-aligned-cell {
    vertical-align: middle !important;
}

.records-card .new-entrant-aligned-value {
    display: flex;
    width: 100%;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

.records-card .dashboard-table thead th.new-entrant-aligned-header {
    vertical-align: middle !important;
}

.records-card .new-entrant-aligned-header-label {
    display: flex;
    width: 100%;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.unified-dashboard-table .dashboard-table tbody tr:last-child td,
.unified-dashboard-table .recent-leave-row:last-child {
    border-bottom: 0;
}

.unified-dashboard-table .dashboard-table tbody tr:hover td,
.unified-dashboard-table .recent-leave-row:hover {
    color: #087E8C;
    background: #F2FBFC;
}

.unified-dashboard-table .dashboard-table td strong,
.unified-dashboard-table .recent-leave-row span,
.unified-dashboard-table .recent-leave-row strong {
    color: #253041;
    font-size: .79rem;
    font-weight: 650;
}

.unified-dashboard-table .dashboard-table td small {
    margin-top: .15rem;
    color: #748091;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.25;
}

.unified-dashboard-table .employee-request-head,
.unified-dashboard-table .recent-leave-head,
.unified-dashboard-table .recent-leave-row {
    gap: .75rem;
    align-items: center;
}

.unified-dashboard-table .employee-request-empty {
    display: grid;
    place-items: center;
    min-height: 118px;
    color: #7A8696;
    text-align: center;
}

.unified-dashboard-table .recent-leave-row {
    text-decoration: none;
}

.unified-dashboard-table .recent-leave-row strong {
    color: #4B5563;
}

.unified-dashboard-table .employee-request-row span,
.unified-dashboard-table .employee-request-row strong {
    display: grid;
    gap: .15rem;
}

.unified-dashboard-table .employee-request-row small {
    color: #748091;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.25;
}

.employee-request-table.unified-dashboard-table .recent-leave-head,
.unified-dashboard-table .employee-request-row {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 1.1fr);
}

.employee-request-table.unified-dashboard-table .employee-request-row {
    min-height: 38px;
    padding: .34rem .55rem;
}

.employee-request-table.unified-dashboard-table .employee-request-name {
    font-weight: 400;
}

.unified-dashboard-table .employee-request-row .employee-request-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    width: 100%;
    min-width: 0;
    padding: .32rem .48rem;
    font: inherit;
    text-align: left;
    color: #0F766E;
    border: 1px solid #CFE8E6;
    border-radius: 7px;
    background: #EEF9F8;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.unified-dashboard-table .employee-request-row .employee-request-link:hover,
.unified-dashboard-table .employee-request-row .employee-request-link:focus-visible {
    color: #075E59;
    border-color: #75C9C2;
    background: #DDF4F1;
    outline: none;
}

.unified-dashboard-table .employee-request-row .employee-request-link > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unified-dashboard-table .employee-request-row .employee-request-link > small {
    flex: 0 0 auto;
    white-space: nowrap;
}

.unified-dashboard-table .employee-request-row .employee-request-link.is-disabled {
    color: #4B5563;
    cursor: default;
}

.employee-request-floating-window {
    position: fixed;
    right: 2rem;
    top: 6rem;
    z-index: 2147483000 !important;
    width: min(440px, calc(100vw - 2rem));
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 20px;
    background: #FFFFFF !important;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .22);
}

.employee-request-floating-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.05rem;
    color: #0F172A;
    background:
        radial-gradient(circle at 92% 18%, rgba(20, 184, 166, .18), transparent 32%),
        linear-gradient(135deg, #F8FCFB 0%, #EEF8F7 100%);
    border-bottom: 1px solid rgba(15, 118, 110, .12);
    cursor: move;
    user-select: none;
    touch-action: none;
}

.employee-request-floating-header span {
    display: block;
    margin-bottom: .2rem;
    color: #0F766E;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.employee-request-floating-header h3 {
    margin: 0;
    color: #132238;
    font-size: 1.04rem;
    font-weight: 650;
    line-height: 1.2;
}

.employee-request-floating-header a,
.employee-request-floating-header button {
    position: relative;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 0;
    border-radius: 999px;
    background: #EAF3F2;
    cursor: pointer;
}

.employee-request-floating-header a::before,
.employee-request-floating-header a::after,
.employee-request-floating-header button::before,
.employee-request-floating-header button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: #52606D;
}

.employee-request-floating-header a::before,
.employee-request-floating-header button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.employee-request-floating-header a::after,
.employee-request-floating-header button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.employee-request-floating-body {
    display: grid;
    gap: .82rem;
    padding: .95rem 1rem 1rem;
    background: #FFFFFF !important;
}

.employee-request-person-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .72rem;
    padding: .78rem;
    border: 1px solid #DCEBEE;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: none;
}

.employee-request-person-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: .86rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0F766E, #14B8A6);
    box-shadow: 0 8px 18px rgba(20, 184, 166, .23);
}

.employee-request-person-card strong {
    display: block;
    min-width: 0;
    color: #132238;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.employee-request-person-card small {
    display: block;
    margin-top: .14rem;
    color: #667085;
    font-size: .72rem;
    font-weight: 500;
}

.employee-request-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: .24rem .58rem;
    border-radius: 999px;
    color: #0F766E;
    font-size: .68rem;
    font-weight: 650;
    background: #E6F6F4;
    border: 1px solid #BDE8E2;
    white-space: nowrap;
}

.employee-request-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem .9rem;
    margin: .36rem 0 0;
    padding-top: .18rem;
}

.employee-request-detail-grid div {
    position: relative;
    display: grid;
    gap: .22rem;
    min-width: 0;
    padding: 1.08rem .75rem .7rem;
    border: 1px solid #E5EEF1;
    border-radius: 14px;
    background: #FFFFFF !important;
    box-shadow: none;
}

.employee-request-detail-grid .wide {
    grid-column: 1 / -1;
}

.employee-request-detail-grid dt {
    position: absolute;
    top: -.46rem;
    left: .82rem;
    z-index: 2;
    padding: 0 .22rem;
    background: #FFFFFF !important;
    color: #667085;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
}

.employee-request-detail-grid dd {
    margin: 0;
    color: #172033;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.employee-request-photo-preview {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    width: 100%;
    padding: .46rem;
    border: 1px solid #D9E7EA;
    border-radius: 12px;
    background: linear-gradient(135deg, #F8FBFC, #F1F8F8);
    color: #115E59;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.employee-request-photo-preview:hover {
    border-color: #9DD6DC;
    background: #F1FBFC;
}

.employee-request-photo-preview img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 9px;
    background: #E5EDF1;
}

.employee-request-photo-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 48px;
    border-radius: 9px;
    background: #EAF3F2;
}

.employee-request-photo-icon::before {
    content: "";
    width: 22px;
    height: 22px;
    background: #64748B;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.employee-request-photo-preview span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 500;
}

.employee-request-floating-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .72rem .95rem .86rem;
    border-top: 1px solid #E5EDF1;
    background: #FFFFFF;
}

.employee-request-floating-actions .btn {
    min-height: 32px;
    padding: .42rem .82rem;
    border-radius: 9px;
    font-size: .74rem;
    line-height: 1;
}

.receipt-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(31, 41, 55, .72);
    backdrop-filter: blur(3px);
}

.receipt-photo-lightbox-frame {
    display: grid;
    place-items: center;
    max-width: min(92vw, 980px);
    max-height: 88vh;
}

.receipt-photo-lightbox-frame img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .35);
}

.receipt-photo-missing {
    display: grid;
    place-items: center;
    gap: .45rem;
    min-width: min(360px, calc(100vw - 3rem));
    min-height: 220px;
    padding: 2rem;
    border-radius: 18px;
    color: #334155;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .35);
}

.receipt-photo-missing strong {
    color: #0F172A;
    font-size: 1rem;
    font-weight: 650;
}

.receipt-photo-missing span {
    color: #64748B;
    font-size: .84rem;
}

.receipt-photo-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    cursor: pointer;
}

.receipt-photo-lightbox-close::before,
.receipt-photo-lightbox-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #FFFFFF;
}

.receipt-photo-lightbox-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.receipt-photo-lightbox-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 700px) {
    .employee-request-floating-window {
        left: 1rem;
        right: 1rem;
        top: 4.8rem;
        width: auto;
    }

    .employee-request-person-card {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .employee-request-status-chip {
        grid-column: 2;
        justify-self: start;
    }
}

.unified-dashboard-table .action-button {
    border-color: #D5E1E6;
    background: #F8FBFC;
}

.unified-dashboard-table .action-button:hover {
    border-color: #9DD6DC;
    background: #EAF9FB;
}


/* System user administration */
.user-actions-column,
.user-actions-cell {
    width: 96px;
    text-align: center;
}
.system-user-dialog {
    width: min(460px, calc(100vw - 32px));
    border: 1px solid #d8e5e7;
    border-radius: 18px;
    padding: 0;
    color: #172033;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
.system-user-dialog::backdrop {
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
}
.system-user-dialog-close-form {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}
.system-user-dialog-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.system-user-dialog-heading {
    padding: 24px 62px 18px 24px;
    border-bottom: 1px solid #e5edf0;
}
.system-user-dialog-heading h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}
.system-user-dialog-heading p {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .83rem;
}
.system-user-manage-form {
    display: grid;
    gap: 14px;
    padding: 20px 24px 16px;
}
.system-user-manage-form label:not(.system-user-force-change) {
    display: grid;
    gap: 6px;
}
.system-user-manage-form label > span {
    color: #334155;
    font-size: .78rem;
    font-weight: 700;
}
.system-user-force-change {
    display: flex;
    align-items: center;
    gap: 9px;
}
.system-user-force-change input {
    accent-color: #0F766E;
}
.system-user-delete-form {
    padding: 0 24px 24px;
}
.system-user-delete-form .btn {
    width: 100%;
}


/* User Roles and Permissions: role changes update only the permission panel. */
.role-permissions-panel .role-picker-form {
    width: min(360px, 100%);
}

.role-permissions-form .permissions-save-button {
    width: auto !important;
    min-width: 150px;
    justify-self: end;
    align-self: center;
    padding-inline: 1.2rem;
}

@media (max-width: 640px) {
    .role-permissions-form .permissions-save-button {
        justify-self: stretch;
        width: 100% !important;
    }
}

/* Employee Edit: dark-teal floating labels and focused controls */
.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label > span:first-child,
.employee-edit-form .account-number-grid label > span:first-child,
.employee-edit-form .eligibility-field > span:first-child {
    color: #0F766E;
}

.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label:focus-within > span:first-child,
.employee-edit-form :where(.personal-info-grid, .personal-row, .employment-info-grid, .employment-row, .other-info-grid, .other-row, .education-info-grid, .education-row) label.has-floating-label > span:first-child,
.employee-edit-form .account-number-grid label:focus-within > span:first-child,
.employee-edit-form .account-number-grid label.has-floating-label > span:first-child,
.employee-edit-form .eligibility-field:focus-within > span:first-child,
.employee-edit-form .eligibility-field.has-floating-label > span:first-child {
    color: #0F766E;
}

.employee-edit-form .form-control:focus,
.employee-edit-form .form-select:focus,
.employee-edit-form .smooth-select:focus,
.employee-edit-form .smooth-select-button:focus-visible {
    border-color: #0F766E;
    box-shadow: 0 0 0 .18rem rgba(15, 118, 110, .16);
}


/* Unified dark-teal application theme */
:root {
  --primary: #0F766E !important;
  --primary-dark: #115E59 !important;
  --primary-light: #DCEFEB !important;
  --hris-accent: #0F766E !important;
  --dash-primary: #0F766E !important;
  --bs-primary: #0F766E !important;
  --bs-primary-rgb: 15, 118, 110 !important;
}

a, .link-button, .text-primary { color: #0F766E; }
a:hover, .link-button:hover { color: #115E59; }

button.primary, .btn-primary, .primary-button, .save-button,
input[type=submit].primary, .action-primary {
  background-color: #0F766E !important;
  border-color: #0F766E !important;
  color: #fff !important;
}
button.primary:hover, .btn-primary:hover, .primary-button:hover, .save-button:hover,
input[type=submit].primary:hover, .action-primary:hover {
  background-color: #115E59 !important;
  border-color: #115E59 !important;
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  border-color: #0F766E !important;
  box-shadow: 0 0 0 .18rem rgba(15,118,110,.16) !important;
}

input[type=checkbox], input[type=radio], input[type=range] { accent-color: #0F766E; }


/* User role selector: refresh only Menu Access panel */
#role-menu-access-panel {
    position: relative;
    transition: opacity .16s ease;
}
#role-menu-access-panel.is-loading {
    opacity: .55;
    pointer-events: none;
}
#role-menu-access-panel.is-loading::after {
    content: "Loading permissions...";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    padding-top: 1rem;
    color: #0f766e;
    font-weight: 700;
    background: rgba(255,255,255,.45);
    border-radius: inherit;
}
.permissions-save-button {
    width: auto !important;
    min-width: 160px;
    display: inline-flex !important;
    justify-content: center;
    align-self: flex-end;
}
@media (max-width: 640px) {
    .permissions-save-button { width: 100% !important; }
}


/* Users page reorganization and universal table system */
.users-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    padding-right: 0 !important;
}
.users-layout > .users-panel:first-child,
.users-layout > .role-permissions-panel {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0;
}
.users-layout > .users-panel:first-child { grid-row: 1 !important; }
.users-layout > .role-permissions-panel { grid-row: 2 !important; }
.users-panel-heading {
    align-items: center;
}
.users-panel-heading > div {
    display: grid;
    gap: .15rem;
}
.users-panel-heading h2,
.role-permissions-panel .panel-heading h2,
.system-log-card-header h2 {
    margin: 0;
    color: #172033;
    font-size: 1.05rem !important;
    line-height: 1.25;
    font-weight: 750;
}
.page-heading h1,
.system-logs-heading h1 {
    font-size: 1.45rem !important;
    line-height: 1.2;
}
.users-add-button {
    width: auto !important;
    min-width: 108px;
    padding-inline: 1rem;
}
.personnel-style-dialog {
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100vh - 48px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e5e7;
    border-radius: 20px;
    color: #172033;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}
.personnel-style-dialog::backdrop {
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(3px);
}
.personnel-style-dialog-close-form {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}
.personnel-style-dialog-close {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #64748b;
    background: #f1f5f9;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.personnel-style-dialog-heading {
    padding: 22px 62px 17px 22px;
    border-bottom: 1px solid #e5edf0;
    background: #f8fafc;
}
.personnel-style-dialog-heading h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
}
.personnel-style-dialog-heading p {
    margin: .3rem 0 0;
    color: #64748b;
    font-size: .8rem;
}
.add-system-user-dialog-body {
    max-height: calc(100vh - 150px);
    padding: 20px 22px 22px;
    overflow-y: auto;
}
.add-system-user-dialog-body .employee-search-form {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8eef2;
}
.add-user-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: .25rem;
}

/* Universal table style for data tables in all menus */
.table.dashboard-table,
.system-log-table,
.employee-profile-history-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    font-family: "Microsoft New Tai Lue", "Segoe UI", sans-serif;
    font-size: .82rem;
}
.table.dashboard-table thead th,
.system-log-table thead th,
.employee-profile-history-table thead th {
    padding: .58rem .85rem;
    color: #475569;
    border-bottom: 1px solid #dbe4ea;
    background: #f8fafc;
    font-size: .71rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .025em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
}
.table.dashboard-table tbody td,
.system-log-table tbody td,
.employee-profile-history-table tbody td {
    padding: .55rem .85rem;
    color: #334155;
    border-bottom: 1px solid #edf2f7;
    background: #fff;
    font-size: .82rem;
    line-height: 1.35;
    vertical-align: middle;
}
.table.dashboard-table tbody tr:hover td,
.system-log-table tbody tr:hover td,
.employee-profile-history-table tbody tr:hover td {
    background: #f2f8f7;
}
.table.dashboard-table tbody tr:last-child td,
.system-log-table tbody tr:last-child td,
.employee-profile-history-table tbody tr:last-child td {
    border-bottom: 0;
}
.table-responsive {
    overflow-x: auto;
    border: 1px solid #dbe4ea;
    border-radius: 12px;
    background: #fff;
}
.users-panel,
.system-log-card {
    border-radius: 14px !important;
}
@media (max-width: 640px) {
    .add-system-user-dialog-body .employee-search-form {
        grid-template-columns: 1fr;
    }
    .add-user-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


/* Step Increment list: standardized header shading and final-page signatories */
.step-list-print-table thead th {
    background: #e6e6e6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.step-list-print-signatories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22mm;
    margin: 12mm 8mm 0;
    font-family: var(--cert-universal-font, "Microsoft New Tai Lue", Arial, sans-serif);
    color: #000;
}

.step-list-signatory {
    display: flex;
    min-height: 31mm;
    flex-direction: column;
    justify-content: flex-end;
    font-style: normal;
}

.step-list-signatory p {
    margin: 0 0 8mm;
    font-size: var(--cert-universal-signatory-role-size, 13px);
    line-height: 1.35;
}

.step-list-signatory strong {
    display: block;
    margin: 0;
    font-size: var(--cert-universal-signatory-size, 14px);
    line-height: 1.35;
    font-weight: 700;
}

.step-list-signatory span {
    display: block;
    font-size: var(--cert-universal-signatory-role-size, 13px);
    line-height: 1.35;
}

.step-list-signatory em {
    display: block;
    margin-top: 4mm;
    color: #e11d1d;
    font-size: var(--cert-universal-signatory-role-size, 13px);
    line-height: 1.35;
    font-weight: 700;
    font-style: italic;
}

.step-list-signatory.certified-correct {
    text-align: center;
}

@media print {
    .step-list-print-table thead th {
        background: #e6e6e6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .step-list-print-signatories {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* Step Increment print: force visible gray header and align signatory blocks */
.step-list-print-table thead,
.step-list-print-table thead tr,
.step-list-print-table thead th {
    background-color: #e6e6e6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.step-list-print-table thead th {
    box-shadow: inset 0 0 0 1000px #e6e6e6 !important;
}

.step-list-signatory.certified-correct {
    text-align: left !important;
    align-items: flex-start !important;
}

.step-list-signatory.certified-correct strong,
.step-list-signatory.certified-correct span,
.step-list-signatory.certified-correct p {
    text-align: left !important;
}

@media print {
    .step-list-print-table thead,
    .step-list-print-table thead tr,
    .step-list-print-table thead th {
        background-color: #e6e6e6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .step-list-print-table thead th {
        box-shadow: inset 0 0 0 1000px #e6e6e6 !important;
    }
}


/* Step Increment signatories: keep both labels and signature blocks on the same top baseline */
.step-list-print-signatories {
    align-items: start !important;
}

.step-list-signatory {
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-self: start !important;
}

.step-list-signatory > p {
    min-height: 0 !important;
    margin: 0 0 8mm !important;
}

.step-list-signatory.certified-correct {
    justify-content: flex-start !important;
    align-self: start !important;
}

@media print {
    .step-list-print-signatories {
        align-items: start !important;
    }

    .step-list-signatory,
    .step-list-signatory.certified-correct {
        min-height: 0 !important;
        justify-content: flex-start !important;
        align-self: start !important;
    }
}

/* Loyalty Pay list print: same print system as Step Increment with loyalty-specific columns */
.loyalty-cutoff {
    margin: -1mm 0 2mm !important;
    text-align: center;
    color: #111;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 8.2pt;
}
.loyalty-list-print-table th:nth-child(2) { width: 54mm !important; }
.loyalty-list-print-table th:nth-child(3) { width: 88mm !important; }
.loyalty-list-print-table th:nth-child(4) { width: 34mm !important; }
.loyalty-list-print-table th:nth-child(5),
.loyalty-list-print-table th:nth-child(6) { width: 36mm !important; }
.loyalty-list-print-table th:nth-child(7) { width: 26mm !important; }
.loyalty-list-print-table td:nth-child(n+4) { text-align: center !important; }
.loyalty-current-year { color: #1d4ed8 !important; font-weight: 700 !important; }
.loyalty-list-print-table .position-cell { font-size: 7.8pt !important; }
.loyalty-list-print-table tr.loyalty-row-current-year td {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}
.loyalty-list-print-table tr.loyalty-row-break-service td {
    color: #dc2626 !important;
    font-weight: 700 !important;
}
.loyalty-list-print-table tr.loyalty-row-not-budgeted td {
    color: #15803d !important;
    font-weight: 700 !important;
}
.loyalty-list-print-table tr.loyalty-row-current-year td:nth-child(-n+5),
.loyalty-list-print-table tr.loyalty-row-current-year td:nth-child(-n+5) *,
.loyalty-list-print-table tr.loyalty-row-break-service td:nth-child(-n+5),
.loyalty-list-print-table tr.loyalty-row-break-service td:nth-child(-n+5) *,
.loyalty-list-print-table tr.loyalty-row-not-budgeted td:nth-child(-n+5),
.loyalty-list-print-table tr.loyalty-row-not-budgeted td:nth-child(-n+5) * {
    font-weight: 400 !important;
}
.step-list-signatory > p.loyalty-legend-title,
.loyalty-legend-title {
    margin: 3.8mm 0 0 !important;
    color: #111;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 8.8pt;
    font-style: normal !important;
    font-weight: 700;
    line-height: 1.1;
    text-align: left !important;
}
.loyalty-color-legend {
    display: grid;
    gap: .75mm;
    margin: 1.15mm 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 7.4pt;
    font-style: normal;
    font-weight: 400;
}
.loyalty-color-legend li {
    display: flex;
    align-items: center;
    gap: 1.8mm;
    position: relative;
    padding-left: 0;
    min-height: 3mm;
    line-height: 1;
}
.loyalty-color-legend li::before {
    content: "";
    position: static;
    display: block;
    width: 2.7mm;
    height: 2.7mm;
    flex: 0 0 2.7mm;
    border-radius: 50%;
}
.loyalty-legend-blue::before { background: #1d4ed8; }
.loyalty-legend-red::before { background: #dc2626; }
.loyalty-legend-green::before { background: #15803d; }
.loyalty-list-print-page.first-page { padding-top: 8mm !important; }
@media print {
    .loyalty-list-print-table thead,
    .loyalty-list-print-table thead tr,
    .loyalty-list-print-table thead th {
        background-color: #e6e6e6 !important;
        box-shadow: inset 0 0 0 1000px #e6e6e6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .loyalty-list-print-table tr.loyalty-row-current-year td,
    .loyalty-list-print-table tr.loyalty-row-break-service td,
    .loyalty-list-print-table tr.loyalty-row-not-budgeted td,
    .loyalty-current-year,
    .loyalty-color-legend li::before {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Loyalty Pay list final column balancing.
   Match the Step Increment page side margins and redistribute width so the
   Position column is wider while the loyalty-date/year columns are tighter. */
.loyalty-list-print-page {
    box-sizing: border-box !important;
    padding-left: 13mm !important;
    padding-right: 13mm !important;
}

.loyalty-list-print-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.loyalty-list-print-table .row-no,
.loyalty-list-print-table th:nth-child(1) {
    width: 8mm !important;
}

.loyalty-list-print-table th:nth-child(2) { width: 56mm !important; }
.loyalty-list-print-table th:nth-child(3) { width: 96mm !important; }
.loyalty-list-print-table th:nth-child(4) { width: 29mm !important; }
.loyalty-list-print-table th:nth-child(5) { width: 22mm !important; }
.loyalty-list-print-table th:nth-child(6) { width: 22mm !important; }
.loyalty-list-print-table th:nth-child(7) { width: 17mm !important; }

@media print {
    .loyalty-list-print-page {
        box-sizing: border-box !important;
        padding-left: 13mm !important;
        padding-right: 13mm !important;
    }

    .loyalty-list-print-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .loyalty-list-print-table .row-no,
    .loyalty-list-print-table th:nth-child(1) {
        width: 8mm !important;
    }

    .loyalty-list-print-table th:nth-child(2) { width: 56mm !important; }
    .loyalty-list-print-table th:nth-child(3) { width: 96mm !important; }
    .loyalty-list-print-table th:nth-child(4) { width: 29mm !important; }
    .loyalty-list-print-table th:nth-child(5) { width: 22mm !important; }
    .loyalty-list-print-table th:nth-child(6) { width: 22mm !important; }
    .loyalty-list-print-table th:nth-child(7) { width: 17mm !important; }
}


/* Employee Records > View > Payslips: keep the payslip panel at the full main-panel height.
   The year rows retain their normal compact height while the list itself scrolls. */
#profile-payslips {
    height: 100% !important;
    align-self: stretch !important;
}

#profile-payslips > .employee-profile-panel {
    min-height: 100% !important;
    height: 100% !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
}

#profile-payslips .employee-payslip-years {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    padding: 0 .25rem .9rem 0 !important;
}

#profile-payslips .employee-payslip-year {
    min-height: 42px !important;
    height: auto !important;
    align-self: start !important;
}

/* COE-specific typography requested June 2026. Keep these values independent
   from Loyalty Pay and Step Increment universal certificate sizing. */
.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text p {
    font-size: 12pt !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h3 {
    font-size: 12pt !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h4 {
    font-size: 14pt !important;
}

.coe-document.coe-step-header-layout .coe-copied-step-title {
    font-size: 18pt !important;
}

.coe-document .coe-concern,
.coe-document .coe-certify-line,
.coe-document .coe-employee-line,
.coe-document .coe-purpose,
.coe-document .coe-issued {
    font-size: 12pt !important;
}

.coe-document .coe-concern {
    font-size: 13pt !important;
}

.coe-document .coe-compensation-table,
.coe-document .coe-compensation-table td {
    font-size: 11.25pt !important;
}

.coe-document .coe-signature strong {
    font-size: 14pt !important;
}

.coe-document .coe-signature span {
    font-size: 12pt !important;
}

@media print {
    .coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text p {
        font-size: 12pt !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h3 {
        font-size: 12pt !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-letterhead .si-letterhead-text h4 {
        font-size: 14pt !important;
    }

    .coe-document.coe-step-header-layout .coe-copied-step-title {
        font-size: 18pt !important;
    }

    .coe-document .coe-concern,
    .coe-document .coe-certify-line,
    .coe-document .coe-employee-line,
    .coe-document .coe-purpose,
    .coe-document .coe-issued {
        font-size: 12pt !important;
    }

    .coe-document .coe-concern {
        font-size: 13pt !important;
    }

    .coe-document .coe-compensation-table,
    .coe-document .coe-compensation-table td {
        font-size: 11.25pt !important;
    }

    .coe-document .coe-signature strong {
        font-size: 14pt !important;
    }

    .coe-document .coe-signature span {
        font-size: 12pt !important;
    }
}


/* Service Record print typography update (point-based sizes). */
.service-record-print-document {
    font-size: 10pt !important;
}

.service-record-header p {
    font-size: 12pt !important;
}

.service-record-header h3 {
    font-size: 12pt !important;
}

.service-record-header h5 {
    font-size: 14pt !important;
}

.service-form-no {
    font-size: 12pt !important;
}

.service-record-document h2 {
    font-size: 16pt !important;
}

.service-name-line,
.service-mi-line,
.service-birthdate-line,
.service-birthplace-line {
    font-size: 12pt !important;
}

.service-employee-table small {
    font-size: 9pt !important;
}

.service-maiden-name {
    font-size: 10pt !important;
}

.service-cert-text,
.service-issued-text {
    font-size: 9pt !important;
}

.service-record-table {
    font-size: 7.5pt !important;
}

.service-note-cell {
    font-size: 7.5pt !important;
}

.service-record-footer,
.service-record-footer p,
.service-record-footer strong,
.service-record-footer span,
.service-date {
    font-size: 12pt !important;
}

@media print {
    .service-record-print-document {
        font-size: 10pt !important;
    }

    .service-record-header p { font-size: 12pt !important; }
    .service-record-header h3 { font-size: 12pt !important; }
    .service-record-header h5 { font-size: 14pt !important; }
    .service-form-no { font-size: 12pt !important; }
    .service-record-document h2 { font-size: 16pt !important; }
    .service-name-line,
    .service-mi-line,
    .service-birthdate-line,
    .service-birthplace-line { font-size: 12pt !important; }
    .service-employee-table small { font-size: 9pt !important; }
    .service-maiden-name { font-size: 10pt !important; }
    .service-cert-text,
    .service-issued-text { font-size: 9pt !important; }
    .service-record-table { font-size: 7.5pt !important; }
    .service-note-cell { font-size: 7.5pt !important; }
    .service-record-footer,
    .service-record-footer p,
    .service-record-footer strong,
    .service-record-footer span,
    .service-date { font-size: 12pt !important; }
}


/* Service Record layout refinement: COE-matched header, dynamic columns, and one-line remarks. */
.service-record-document .service-record-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 25mm !important;
    margin: 0 0 2mm !important;
    position: relative !important;
}

.service-record-document .service-record-header img {
    position: absolute !important;
    left: 37mm !important;
    top: 0 !important;
    width: 24mm !important;
    height: 24mm !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.service-record-document .service-record-header .si-letterhead-text {
    padding-top: 1mm !important;
    text-align: center !important;
}

.service-record-document .service-record-header p,
.service-record-document .service-record-header h3,
.service-record-document .service-record-header h4 {
    margin: 0 !important;
    line-height: 1.05 !important;
}

.service-record-document .service-record-header h4 {
    margin-top: 2mm !important;
    font-size: 14pt !important;
}

.service-record-table {
    width: 100% !important;
    table-layout: auto !important;
}

.service-record-table .service-salary-col,
.service-record-table .service-salary {
    width: auto !important;
    max-width: 23mm !important;
    white-space: nowrap !important;
}

.service-record-table .service-office-col,
.service-record-table .service-office-cell {
    width: auto !important;
    max-width: 42mm !important;
}

.service-record-table .service-remarks-col,
.service-record-table .service-remarks-cell {
    width: 31% !important;
    min-width: 31% !important;
}

.service-record-table .service-remarks-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: 7.5pt !important;
    letter-spacing: -.01em !important;
}

.service-record-table .service-remarks-cell.service-remarks-long {
    font-size: 6.5pt !important;
    letter-spacing: -.025em !important;
}

.service-record-table .service-remarks-cell.service-remarks-very-long {
    font-size: 5.5pt !important;
    letter-spacing: -.04em !important;
}

@media print {
    .service-record-document .service-record-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 25mm !important;
        margin-bottom: 2mm !important;
        position: relative !important;
    }

    .service-record-document .service-record-header img {
        position: absolute !important;
        left: 37mm !important;
        top: 0 !important;
        width: 24mm !important;
        height: 24mm !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .service-record-table .service-salary-col,
    .service-record-table .service-salary {
        width: auto !important;
        max-width: 23mm !important;
    }

    .service-record-table .service-office-col,
    .service-record-table .service-office-cell {
        width: auto !important;
        max-width: 42mm !important;
    }

    .service-record-table .service-remarks-col,
    .service-record-table .service-remarks-cell {
        width: 31% !important;
        min-width: 31% !important;
    }

    .service-record-table .service-remarks-cell {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        font-size: 7.5pt !important;
    }

    .service-record-table .service-remarks-cell.service-remarks-long {
        font-size: 6.5pt !important;
    }

    .service-record-table .service-remarks-cell.service-remarks-very-long {
        font-size: 5.5pt !important;
    }
}


/* Final refinements: Gender Distribution selector width and standardized Users labels */
.gender-status-select-wrap.dashboard-native-select-shell {
    width: 178px !important;
    min-width: 178px !important;
}

/* Users page typography standardization */
.users-layout,
.users-panel,
.role-permissions-panel,
.personnel-style-dialog,
.system-user-dialog {
    font-family: "Microsoft New Tai Lue", "Segoe UI", sans-serif !important;
}

.users-panel-heading h2,
.role-permissions-panel .panel-heading h2 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
}

.users-panel-heading span,
.role-permissions-panel .panel-heading > span,
.personnel-style-dialog-heading p,
.system-user-dialog-heading p {
    font-size: .78rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.employee-search-form label,
.add-user-form label,
.role-picker-form label,
.system-user-manage-form label:not(.system-user-force-change),
.system-user-manage-form label > span,
.system-user-force-change span {
    font-size: .78rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.permission-section-heading h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.permission-section-heading p {
    font-size: .78rem !important;
    line-height: 1.3 !important;
}

.permission-menu-access .permission-card-header h4 {
    font-size: .84rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.permission-menu-access .permission-card-row,
.permission-menu-access .permission-submenu-summary,
.permission-menu-access .permission-child-action {
    font-size: .80rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.personnel-style-dialog-heading h3,
.system-user-dialog-heading h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
}


/* Service Record final header and table balance refinement.
   Copy the exact COE letterhead geometry and give Status/Salary/Remarks safe inner spacing. */
.service-record-document .service-record-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 120px !important;
    align-items: start !important;
    justify-content: initial !important;
    min-height: 86px !important;
    margin: 0 0 .35in !important;
    text-align: center !important;
}

.service-record-document .service-record-header::after {
    content: none !important;
    display: none !important;
}

.service-record-document .service-record-header img {
    position: static !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    width: 76px !important;
    height: 76px !important;
    justify-self: start !important;
    margin: -8px 0 0 18px !important;
    transform: none !important;
    object-fit: contain !important;
}

.service-record-document .service-record-header .si-letterhead-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
}

.service-record-document .service-record-header .si-letterhead-text p {
    margin: 0 !important;
    font-size: 12pt !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.service-record-document .service-record-header .si-letterhead-text h3 {
    margin: 4px 0 0 !important;
    font-size: 12pt !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.service-record-document .service-record-header .si-letterhead-text h4 {
    margin: 24px 0 0 !important;
    font-size: 14pt !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.service-record-table {
    width: 100% !important;
    table-layout: auto !important;
}

/* Keep Status readable with one visual blank space on both sides. */
.service-record-table .service-status-col,
.service-record-table .service-status-cell {
    width: 1% !important;
    max-width: 22mm !important;
    padding-left: 1.2mm !important;
    padding-right: 1.2mm !important;
    white-space: nowrap !important;
}

/* Keep Salary readable with one visual blank space on the left. */
.service-record-table .service-salary-col,
.service-record-table .service-salary {
    width: 1% !important;
    max-width: 25mm !important;
    padding-left: 1.2mm !important;
    padding-right: .65mm !important;
    white-space: nowrap !important;
}

/* Department/office can grow into spare width but is limited to two text lines. */
.service-record-table .service-office-col,
.service-record-table .service-office-cell {
    width: auto !important;
    max-width: 47mm !important;
}

.service-record-table .service-office-cell {
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.08 !important;
    max-height: 2.16em !important;
    padding-left: .8mm !important;
    padding-right: .8mm !important;
}

/* Remarks use only the width needed by their content, up to a fixed maximum.
   Any unused width is left for Designation and Office/Entity/Division. */
.service-record-table .service-remarks-col,
.service-record-table .service-remarks-cell {
    width: 1% !important;
    min-width: 0 !important;
    max-width: 48mm !important;
}

.service-record-table .service-remarks-cell {
    padding-left: 1.2mm !important;
    padding-right: 1.2mm !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* Designation absorbs the largest share of remaining row width. */
.service-record-table .service-designation-col,
.service-record-table .service-designation {
    width: auto !important;
}

@media print {
    .service-record-document .service-record-header {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) 120px !important;
        align-items: start !important;
        min-height: 86px !important;
        margin: 0 0 .35in !important;
        text-align: center !important;
    }

    .service-record-document .service-record-header img {
        position: static !important;
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        width: 86px !important;
        height: 86px !important;
        justify-self: start !important;
        margin: 0 0 0 120px !important;
        transform: none !important;
        object-fit: contain !important;
    }

    .service-record-document .service-record-header .si-letterhead-text {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding-top: 0 !important;
        text-align: center !important;
    }

    .service-record-table .service-status-col,
    .service-record-table .service-status-cell {
        width: 1% !important;
        max-width: 22mm !important;
        padding-left: 1.2mm !important;
        padding-right: 1.2mm !important;
        white-space: nowrap !important;
    }

    .service-record-table .service-salary-col,
    .service-record-table .service-salary {
        width: 1% !important;
        max-width: 25mm !important;
        padding-left: 1.2mm !important;
        padding-right: .65mm !important;
        white-space: nowrap !important;
    }

    .service-record-table .service-office-col,
    .service-record-table .service-office-cell {
        width: auto !important;
        max-width: 47mm !important;
    }

    .service-record-table .service-office-cell {
        white-space: normal !important;
        overflow: hidden !important;
        line-height: 1.08 !important;
        max-height: 2.16em !important;
        padding-left: .8mm !important;
        padding-right: .8mm !important;
    }

    .service-record-table .service-remarks-col,
    .service-record-table .service-remarks-cell {
        width: 1% !important;
        min-width: 0 !important;
        max-width: 48mm !important;
    }

    .service-record-table .service-remarks-cell {
        padding-left: 1.2mm !important;
        padding-right: 1.2mm !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
}


/* Service Record final header text, black print color, and adaptive import-era layout. */
.service-record-print-document,
.service-record-print-document * {
    color: #000000 !important;
}

.service-record-table .service-inclusive-dates {
    display: inline-block !important;
    white-space: nowrap !important;
    text-transform: none !important;
}

@media print {
    .service-record-print-document,
    .service-record-print-document * {
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .service-record-table .service-inclusive-dates {
        display: inline-block !important;
        white-space: nowrap !important;
        text-transform: none !important;
    }
}


/* Employee Edit > Employment Information: requested two-row field order. */
.employment-row-one .employment-monthly-field > span:first-child,
.employment-row-two .employment-current-date-field > span:first-child,
.employment-row-two .employment-hired-date-field > span:first-child,
.employment-row-two .employment-original-date-field > span:first-child,
.employment-row-two .employment-loyalty-override-date-field > span:first-child,
.employment-row-two .employment-loyalty-overrides-field > span:first-child {
    white-space: nowrap;
}

.employment-row-two {
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) repeat(3, minmax(145px, .72fr)) minmax(116px, 116px);
}

.employment-row-two .employment-department-field {
    grid-column: 1 / span 2;
}

.employment-row-two .employment-current-date-field {
    grid-column: 3;
}

.employment-row-two .employment-hired-date-field {
    grid-column: 4;
}

.employment-row-two .employment-original-date-field {
    grid-column: 5;
}

.employment-row-two .employment-loyalty-overrides-field {
    grid-column: 6;
}

/* Add Employee: employment-status-first assignment layout. */
.employment-create-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
}

.employment-create-grid > label {
    position: relative;
    min-width: 0;
    padding-top: 7px;
}

form[data-employee-edit-tabs] .employment-create-grid > label > span:first-child {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
    padding-inline: 4px;
    color: #475569;
    font-family: inherit;
    font-size: var(--employee-edit-label-size);
    font-weight: 500;
    line-height: 1.2;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(19px) scale(1.08);
    transform-origin: left center;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, background-color .16s ease .04s;
}

form[data-employee-edit-tabs] .employment-create-grid > label:focus-within > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid > label.has-floating-label > span:first-child {
    color: var(--primary);
    background: var(--surface);
    transform: translateY(0) scale(1);
}

.employment-create-active-field,
.employment-create-status-field,
.employment-create-item-field,
.employment-create-sg-field,
.employment-create-step-field,
.employment-create-rate-field {
    grid-column: span 2;
}

.employee-edit-form .employee-id-photo-row {
    grid-template-columns: minmax(145px, .72fr) minmax(180px, 1fr) minmax(250px, 1.35fr) !important;
}

.employee-edit-form .personal-status-field,
.employee-edit-form .employee-id-photo-row > * {
    min-width: 0;
}

.employment-create-grid.is-nature-locked > :not(.employment-nature-field) {
    opacity: .68;
}

.employment-create-grid.is-nature-locked .employment-nature-field {
    opacity: 1;
}

.employment-create-grid.is-nature-locked :where(input, select, button):disabled {
    cursor: not-allowed;
}

.employment-create-position-field,
.employment-create-department-field {
    grid-column: 1 / -1;
}

.employment-create-grid > .employment-current-date-field,
.employment-create-grid > .employment-hired-date-field,
.employment-create-grid > .employment-original-date-field,
.employment-create-overrides-field {
    grid-column: span 3;
}

.employment-create-grid select:disabled,
.employment-create-grid input:disabled {
    color: #64748b;
    background-color: #f8fafc;
    opacity: 1;
}

.employment-create-grid label:has(.smooth-select-shell.is-open) {
    z-index: 70;
}

.employment-create-grid .smooth-select-button {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
    border-color: #cbd9e1;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .045);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease, transform .18s ease;
}

.employment-create-grid .smooth-select-button:hover:not([aria-disabled="true"]) {
    border-color: #72b9ae;
    box-shadow: 0 7px 18px rgba(15, 118, 110, .09);
    transform: translateY(-1px);
}

.employment-create-grid .smooth-select-shell.is-open .smooth-select-button,
.employment-create-grid .smooth-select-button:focus-visible {
    border-color: #0f8a7d;
    box-shadow: 0 0 0 .18rem rgba(15, 138, 125, .12), 0 12px 25px rgba(15, 23, 42, .1);
}

.employment-create-grid .smooth-select-menu {
    z-index: 90;
    padding: .42rem;
    border-color: #d4e2e7;
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .17), 0 5px 13px rgba(15, 23, 42, .07);
    transform: translateY(-9px) scale(.985);
    transition: opacity .17s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

.employment-create-grid .smooth-select-shell.is-open .smooth-select-menu {
    transform: translateY(0) scale(1);
}

.employment-create-grid .smooth-select-option {
    min-height: 38px;
    padding: .55rem .7rem;
    border-radius: 10px;
    transition: color .14s ease, background-color .14s ease, transform .14s ease;
}

.employment-create-grid .smooth-select-option:hover,
.employment-create-grid .smooth-select-option:focus-visible {
    color: #0f766e;
    background: #eaf8f5;
    transform: translateX(2px);
}

.employment-create-item-field input:not(:disabled) {
    font-variant-numeric: tabular-nums;
    letter-spacing: .015em;
}

.employment-create-grid.is-casual .employment-create-item-field > span:first-child {
    color: #0f8a7d;
}

.employment-create-grid.is-casual .employment-create-sg-field > span:first-child,
.employment-create-grid.is-casual .employment-create-step-field > span:first-child {
    color: #a16207;
}

/* Employment assignment label colors are mode-driven, not edit-state driven. */
form[data-employee-edit-tabs] .employment-create-grid.is-unselected :where(
    .employment-create-item-field,
    .employment-create-position-field,
    .employment-create-department-field,
    .employment-create-sg-field,
    .employment-create-step-field,
    .employment-create-rate-field) > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid.is-noncasual :where(
    .employment-create-position-field,
    .employment-create-department-field,
    .employment-create-sg-field,
    .employment-create-step-field,
    .employment-create-rate-field) > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid.is-casual :where(
    .employment-create-item-field,
    .employment-create-sg-field,
    .employment-create-step-field,
    .employment-create-rate-field) > span:first-child {
    color: #0f8a7d !important;
}

form[data-employee-edit-tabs] .employment-create-grid.is-noncasual .employment-create-item-field.is-empty > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid.is-casual :where(
    .employment-create-position-field,
    .employment-create-department-field) > span:first-child {
    color: #dc2626 !important;
}


@media (max-width: 720px) {
    .employment-create-grid {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .employment-create-grid > :where(label, .employment-create-overrides-field) {
        grid-column: 1 !important;
    }

    .employee-edit-form .employee-id-photo-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.employment-loyalty-overrides-field {
    display: flex;
    align-items: flex-start;
    align-self: end;
    justify-self: start;
}

.employment-action-buttons {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    justify-self: stretch;
}

.appointment-documents-button {
    flex: 1 1 auto;
    min-width: 178px;
    min-height: 38px;
    border-color: #0f766e !important;
    color: #0f766e !important;
    background: #ffffff !important;
    border-radius: 10px;
    font-weight: 700;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 118, 110, .12);
}

.appointment-documents-button:hover:not(:disabled),
.appointment-documents-button:focus-visible:not(:disabled),
.appointment-documents-button[aria-expanded="true"] {
    color: #ffffff !important;
    background: #0f766e !important;
    border-color: #0f766e !important;
}

.appointment-documents-button:disabled {
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: none;
    cursor: not-allowed;
}

.loyalty-overrides-button {
    width: 116px;
    min-height: 38px;
    border-color: #0f766e !important;
    color: #0f766e !important;
    background: #ffffff !important;
    border-radius: 10px;
    font-weight: 700;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 118, 110, .12);
}

.loyalty-overrides-button:hover,
.loyalty-overrides-button:focus-visible {
    color: #ffffff !important;
    background: #0f766e !important;
    border-color: #0f766e !important;
}

@media (max-width: 900px) {
    .employment-row-two .employment-department-field,
    .employment-row-two .employment-current-date-field,
    .employment-row-two .employment-hired-date-field,
    .employment-row-two .employment-original-date-field,
    .employment-row-two .employment-loyalty-overrides-field {
        grid-column: auto;
    }

    .employment-loyalty-overrides-field {
        justify-self: stretch;
    }
}

.loyalty-overrides-dialog {
    width: min(500px, calc(100vw - 2rem));
    border: 0;
    padding: 0;
    border-radius: 18px;
    background: transparent;
}

.loyalty-overrides-dialog::backdrop {
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(3px);
}

.loyalty-overrides-dialog.has-modern-date-popover {
    overflow: visible;
}

.loyalty-overrides-panel {
    padding: 1rem;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
}

.loyalty-overrides-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.loyalty-overrides-heading h3 {
    margin: 0;
    color: #006b5f;
    font-size: 1rem;
    font-weight: 800;
}

.loyalty-overrides-heading p {
    margin: .2rem 0 0;
    color: #53647a;
    font-size: .82rem;
}

.loyalty-overrides-option {
    position: relative;
    display: grid;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #dbe7f2;
    border-radius: 12px;
    background: #f8fbfd;
}

.loyalty-overrides-option + .loyalty-overrides-option {
    margin-top: .75rem;
}

.loyalty-overrides-option-title {
    padding-right: 3rem;
    color: #1f2a44;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.2;
}

.loyalty-overrides-option-description {
    margin: 0;
    padding-right: 3rem;
    color: #53647a;
    font-size: .78rem;
    line-height: 1.4;
}

.step-increment-override-option {
    gap: .35rem;
    padding: .65rem .75rem;
}

.step-increment-override-option .loyalty-overrides-option-description {
    line-height: 1.3;
}

.loyalty-option-switch {
    position: absolute !important;
    top: .85rem !important;
    right: .8rem !important;
    transform: none !important;
}

.loyalty-toggle-entry {
    position: relative;
    display: block;
}

.loyalty-toggle-entry > span:first-child {
    position: absolute;
    z-index: 2;
    top: -.45rem;
    left: .7rem;
    padding: 0 .25rem;
    background: #f8fbfd;
    color: #006b5f;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
}

.loyalty-toggle-display {
    min-height: 42px;
    padding-right: 4.2rem !important;
    color: #1f2a44;
    font-weight: 700;
    background: #fff !important;
}

.loyalty-entry-switch {
    position: absolute !important;
    top: 50%;
    right: .65rem;
    transform: translateY(-50%);
    z-index: 3;
}

.loyalty-break-toggle-field {
    position: relative;
    display: block;
}

.loyalty-break-toggle-field > input[type="date"] {
    min-height: 42px;
    padding-right: 2.7rem !important;
    background-color: #fff !important;
}

.employee-edit-form .loyalty-break-toggle-field > span:first-child {
    position: absolute;
    z-index: 4;
    top: -.45rem;
    left: .7rem;
    padding: 0 .25rem;
    background: #f8fbfd;
    color: #006b5f;
    font-size: .74rem;
    font-weight: 400;
    line-height: 1;
}

.loyalty-date-entry-switch {
    position: absolute !important;
    top: calc(.45rem + 20px) !important;
    right: .7rem !important;
    transform: translateY(-50%) !important;
    z-index: 3;
}

.loyalty-break-date-field.is-disabled > input {
    opacity: .55;
}

.loyalty-budget-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: .65rem;
}

.loyalty-budget-fields.is-disabled select {
    color: #64748b;
    opacity: .62;
}

.loyalty-budget-year-field {
    position: relative;
    display: block;
}

.loyalty-budget-year-field > span:first-child {
    position: absolute;
    z-index: 2;
    top: -.45rem;
    left: .7rem;
    padding: 0 .25rem;
    background: #f8fbfd;
    color: #006b5f;
    font-size: .74rem;
    font-weight: 400;
    line-height: 1;
}

.loyalty-budget-year-field > select {
    min-height: 42px;
    background-color: #fff;
}

.loyalty-overrides-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}


/* Contract of Service > Modify COS > Other Information */
.cos-other-info-grid {
    display: grid;
    gap: 1rem;
}

.cos-other-row {
    display: grid;
    gap: .9rem 1rem;
    align-items: end;
}

.cos-other-demographic-row {
    grid-template-columns: minmax(140px, .75fr) minmax(180px, 1fr) minmax(120px, .65fr) minmax(210px, 1.15fr) minmax(120px, .65fr);
}

.cos-other-work-row {
    grid-template-columns: minmax(250px, 1.35fr) minmax(220px, 1.15fr) minmax(180px, .9fr) minmax(170px, .85fr);
}

.cos-other-row > label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.cos-other-row > label > span {
    color: #334155;
    font-size: .78rem;
    font-weight: 700;
}

.cos-other-row input[readonly] {
    color: #475569;
    background: #f8fafc;
}

.cos-other-row input:disabled {
    color: #94a3b8;
    background: #f1f5f9;
}

.cos-employment-row-two {
    grid-template-columns: minmax(170px, .8fr) minmax(170px, .8fr) minmax(180px, .85fr) minmax(260px, 1.25fr) !important;
}

@media (max-width: 1100px) {
    .cos-other-demographic-row,
    .cos-other-work-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cos-other-demographic-row,
    .cos-other-work-row {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Forced first-login password change */
.password-change-security-note {
    margin: .2rem 0 0 !important;
    padding: .7rem .8rem;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    color: #475569 !important;
    background: #f8fafc;
    font-size: .78rem;
    line-height: 1.4;
}

/* COS employment history, reports, and Employee Edit-aligned sections */
.action-button.history span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.action-button.print span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}
.cos-history-panel .panel-heading-row { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem; }
.fixed-modal-backdrop { position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.45); }
.fixed-modal-dialog { width:min(860px,100%);max-height:90vh;overflow:auto;padding:1.25rem;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.28); }
.modal-heading { display:flex;justify-content:space-between;gap:1rem;margin-bottom:1rem; }
.modal-heading h2 { margin:0;font-size:1.05rem; }
.modal-heading p { margin:.25rem 0 0;color:#64748b;font-size:.8rem; }
.cos-history-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem; }
.cos-history-form-grid label { display:grid;gap:.35rem;font-size:.78rem;font-weight:700;color:#334155; }
.cos-history-form-grid .full-width { grid-column:1/-1; }
.cos-history-form-grid .checkbox-line { align-content:end;grid-template-columns:auto 1fr;align-items:center; }
.modal-actions { display:flex;justify-content:flex-end;gap:.65rem;margin-top:1rem; }
.cos-employment-info-grid .employment-row-two { grid-template-columns:minmax(190px,1.25fr) minmax(190px,1.25fr) repeat(4,minmax(130px,1fr)); }
.cos-employment-info-grid .employment-row-three { grid-template-columns:repeat(2,minmax(180px,1fr)); }
@media (max-width:900px){.cos-history-form-grid{grid-template-columns:1fr}.cos-history-form-grid .full-width{grid-column:auto}.cos-employment-info-grid .employment-row-two,.cos-employment-info-grid .employment-row-three{grid-template-columns:1fr}}

/* COS Certificate of Employment: personnel COE design with automatic continuous/break-in-service content. */
.cos-coe-print-page {
    background: #e5e7eb;
}

.cos-coe-document {
    margin: 0 auto;
}

.cos-coe-document .coe-copied-step-letterhead,
.cos-coe-document .coe-copied-step-title,
.cos-coe-document .coe-copied-step-concern,
.cos-coe-document .coe-line,
.cos-coe-document .coe-signature {
    color: #000 !important;
}

.cos-coe-intro-line {
    margin-bottom: .18in !important;
}

.cos-coe-history-table {
    width: 100%;
    margin: .08in 0 .30in;
    border-collapse: collapse;
    table-layout: fixed;
    color: #000;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 11.25pt;
}

.cos-coe-history-table th,
.cos-coe-history-table td {
    padding: 2.2mm 2.4mm;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
    line-height: 1.25;
}

.cos-coe-history-table th {
    font-weight: 700;
}

.cos-coe-history-table th:nth-child(1),
.cos-coe-history-table th:nth-child(2),
.cos-coe-history-table td:nth-child(1),
.cos-coe-history-table td:nth-child(2) {
    width: 18%;
}

.cos-coe-history-table th:nth-child(3),
.cos-coe-history-table td:nth-child(3) {
    width: 34%;
}

.cos-coe-history-table th:nth-child(4),
.cos-coe-history-table td:nth-child(4) {
    width: 30%;
}

.cos-coe-signature {
    margin-top: .72in !important;
}

@media print {
    .cos-coe-print-page {
        background: #fff !important;
    }

    .cos-coe-document {
        width: 8.27in !important;
        min-height: 11.69in !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    .cos-coe-history-table {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* COS COE print-preview correction: use the exact Personnel Records COE paper box. */
.cos-coe-print-page {
    min-height: calc(100vh - 70px);
    padding: 18px 24px 36px !important;
    background: #e5e7eb !important;
}

.cos-coe-paper {
    width: 8.5in !important;
    min-width: 8.5in !important;
    max-width: 8.5in !important;
    min-height: 11in !important;
    margin: 0 auto !important;
    padding: .8in !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18) !important;
}

.cos-coe-document {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* The stock COE first sentence uses text-align-last:justify.  That creates
   excessive gaps when the line is short, so keep normal word spacing in COS. */
.cos-coe-document .coe-certify-line,
.cos-coe-document .coe-employee-line,
.cos-coe-document .coe-purpose,
.cos-coe-document .coe-issued {
    word-spacing: normal !important;
}

.cos-coe-document .coe-certify-line {
    text-align: left !important;
    text-align-last: left !important;
}

.cos-coe-document .coe-employee-line {
    text-align: justify !important;
    text-align-last: left !important;
}

@page cos-coe-page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .cos-coe-print-page {
        display: block !important;
        width: 210mm !important;
        min-width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .cos-coe-paper {
        page: cos-coe-page !important;
        width: 210mm !important;
        min-width: 210mm !important;
        max-width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        padding: 20mm !important;
        box-sizing: border-box !important;
        background: #fff !important;
        box-shadow: none !important;
        overflow: hidden !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cos-coe-document {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* COS edit layout refinement: two employment rows, compact demographic controls, multiple eligibilities */
.cos-employment-info-grid .cos-employment-row-one {
    grid-template-columns: minmax(130px,.65fr) minmax(260px,1.45fr) minmax(220px,1.15fr) minmax(260px,1.45fr) !important;
}
.cos-employment-info-grid .cos-employment-row-two {
    grid-template-columns: minmax(150px,.75fr) minmax(170px,.85fr) minmax(170px,.85fr) minmax(260px,1.35fr) minmax(220px,1.1fr) !important;
}
.cos-employment-info-grid .cos-employment-row-three {
    grid-template-columns: minmax(260px,1.4fr) minmax(180px,.85fr) minmax(180px,.85fr) !important;
}
.cos-other-demographic-line {
    grid-template-columns: minmax(135px,.72fr) minmax(190px,1.1fr) minmax(125px,.68fr) minmax(180px,1fr) minmax(165px,.9fr) minmax(110px,.65fr) minmax(105px,.6fr) minmax(105px,.6fr) !important;
    gap: .85rem !important;
}
.cos-other-demographic-line .compact-yes-no {
    min-width: 0 !important;
}
@media (max-width: 1180px) {
    .cos-other-demographic-line { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width: 900px) {
    .cos-employment-info-grid .cos-employment-row-one,
    .cos-employment-info-grid .cos-employment-row-two,
    .cos-employment-info-grid .cos-employment-row-three,
    .cos-other-demographic-line { grid-template-columns: 1fr !important; }
}


/* Step Increment print-list header label and alignment refinement */
.step-list-print-table thead th:nth-child(2),
.step-list-print-table thead th:nth-child(3) {
    text-align: left !important;
}

.step-list-print-table thead th.row-no {
    text-align: center !important;
}

@media print {
    .step-list-print-table thead th:nth-child(2),
    .step-list-print-table thead th:nth-child(3) {
        text-align: left !important;
    }

    .step-list-print-table thead th.row-no {
        text-align: center !important;
    }
}


/* Step Increment and Loyalty Pay print-list alignment refinement */
.step-list-print-table thead th:nth-child(2),
.step-list-print-table thead th:nth-child(3),
.loyalty-list-print-table thead th:nth-child(2),
.loyalty-list-print-table thead th:nth-child(3) {
    text-align: left !important;
}

.step-list-print-table tbody td.row-no,
.loyalty-list-print-table tbody td.row-no,
.step-list-print-table thead th.row-no,
.loyalty-list-print-table thead th.row-no {
    text-align: center !important;
}

@media print {
    .step-list-print-table thead th:nth-child(2),
    .step-list-print-table thead th:nth-child(3),
    .loyalty-list-print-table thead th:nth-child(2),
    .loyalty-list-print-table thead th:nth-child(3) {
        text-align: left !important;
    }

    .step-list-print-table tbody td.row-no,
    .loyalty-list-print-table tbody td.row-no,
    .step-list-print-table thead th.row-no,
    .loyalty-list-print-table thead th.row-no {
        text-align: center !important;
    }
}


/* Step Increment print list: force Step Increment No. into exactly two lines. */
.step-list-print-table .step-increment-no-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.02 !important;
}

.step-list-print-table .step-increment-no-header > span {
    display: block !important;
    white-space: nowrap !important;
}

.step-list-print-table .step-increment-no-header > span:first-child {
    font-size: 6.7pt !important;
    letter-spacing: -.08pt !important;
}

.step-list-print-table thead th:nth-child(7) {
    line-height: 1.02 !important;
    padding-left: .2mm !important;
    padding-right: .2mm !important;
}

@media print {
    .step-list-print-table .step-increment-no-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        line-height: 1.02 !important;
    }

    .step-list-print-table .step-increment-no-header > span {
        display: block !important;
        white-space: nowrap !important;
    }

    .step-list-print-table .step-increment-no-header > span:first-child {
        font-size: 6.7pt !important;
        letter-spacing: -.08pt !important;
    }

    .step-list-print-table thead th:nth-child(7) {
        line-height: 1.02 !important;
        padding-left: .2mm !important;
        padding-right: .2mm !important;
    }
}


/* Loyalty Pay print: force Date of Latest Loyalty Pay into exactly two lines */
.loyalty-list-print-table thead th.loyalty-latest-header {
    white-space: normal !important;
    line-height: 1.05 !important;
}

.loyalty-list-print-table thead th.loyalty-latest-header > span {
    display: block !important;
    white-space: nowrap !important;
}

.loyalty-list-print-table thead th.loyalty-latest-header > span:first-child {
    font-size: 7.3pt !important;
}

@media print {
    .loyalty-list-print-table thead th.loyalty-latest-header {
        white-space: normal !important;
        line-height: 1.05 !important;
    }

    .loyalty-list-print-table thead th.loyalty-latest-header > span {
        display: block !important;
        white-space: nowrap !important;
    }

    .loyalty-list-print-table thead th.loyalty-latest-header > span:first-child {
        font-size: 7.3pt !important;
    }
}

/* Final print-header width balancing: retain normal font sizes and fit two-line labels. */
.step-list-print-table .step-increment-no-header > span:first-child,
.loyalty-list-print-table thead th.loyalty-latest-header > span:first-child {
    font-size: inherit !important;
    letter-spacing: normal !important;
}

/* Give Step Increment No. more room by slightly narrowing Date of Next Step Increment. */
.step-list-print-table th:nth-child(6) {
    width: 27mm !important;
}

.step-list-print-table th:nth-child(7) {
    width: 28mm !important;
}

/* Give Date of Latest Loyalty Pay more room by slightly reducing Employee Name and Position. */
.loyalty-list-print-table th:nth-child(2) {
    width: 52mm !important;
}

.loyalty-list-print-table th:nth-child(3) {
    width: 92mm !important;
}

.loyalty-list-print-table th:nth-child(5) {
    width: 30mm !important;
}

@media print {
    .step-list-print-table .step-increment-no-header > span:first-child,
    .loyalty-list-print-table thead th.loyalty-latest-header > span:first-child {
        font-size: inherit !important;
        letter-spacing: normal !important;
    }

    .step-list-print-table th:nth-child(6) { width: 27mm !important; }
    .step-list-print-table th:nth-child(7) { width: 28mm !important; }

    .loyalty-list-print-table th:nth-child(2) { width: 52mm !important; }
    .loyalty-list-print-table th:nth-child(3) { width: 92mm !important; }
    .loyalty-list-print-table th:nth-child(5) { width: 30mm !important; }
}


/* Loyalty Pay print-list: preserve long positions and force Number of Years to two lines. */
.loyalty-list-print-table th:nth-child(2) {
    width: 51mm !important;
}

.loyalty-list-print-table th:nth-child(3) {
    width: 98mm !important;
}

.loyalty-list-print-table th:nth-child(5) {
    width: 28mm !important;
}

.loyalty-list-print-table th:nth-child(7) {
    width: 14mm !important;
}

.loyalty-list-print-table thead th.loyalty-years-header {
    line-height: 1.05 !important;
    white-space: normal !important;
}

.loyalty-list-print-table thead th.loyalty-years-header > span {
    display: block !important;
    white-space: nowrap !important;
    font-size: inherit !important;
}

@media print {
    .loyalty-list-print-table th:nth-child(2) { width: 51mm !important; }
    .loyalty-list-print-table th:nth-child(3) { width: 98mm !important; }
    .loyalty-list-print-table th:nth-child(5) { width: 28mm !important; }
    .loyalty-list-print-table th:nth-child(7) { width: 14mm !important; }

    .loyalty-list-print-table thead th.loyalty-years-header {
        line-height: 1.05 !important;
        white-space: normal !important;
    }

    .loyalty-list-print-table thead th.loyalty-years-header > span {
        display: block !important;
        white-space: nowrap !important;
        font-size: inherit !important;
    }
}

/* Temporary COS Excel profile import */
.cos-temp-import-form {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.cos-temp-import-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 36px;
    white-space: nowrap;
}

.cos-temp-import-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M5 21h14a2 2 0 0 0 2-2v-4'/%3E%3Cpath d='M3 15v4a2 2 0 0 0 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 720px) {
    .cos-temp-import-form {
        width: 100%;
        margin-left: 0;
    }

    .cos-temp-import-button {
        width: 100%;
        justify-content: center;
    }
}


/* Temporary COS profile import result list */
.cos-import-result-panel { margin-bottom: 1rem; }
.cos-import-status { display:inline-flex; min-width:92px; justify-content:center; padding:.25rem .55rem; border-radius:999px; font-size:.76rem; font-weight:700; }
.cos-import-status.is-updated { color:#0f766e; background:#ccfbf1; }
.cos-import-status.is-skipped { color:#92400e; background:#fef3c7; }
.cos-import-status.is-not-updated { color:#b91c1c; background:#fee2e2; }


/* COS records toolbar alignment: keep Import, Search, Filter, and Export in one row. */
.cos-records-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: .75rem !important;
}

.cos-records-toolbar .records-result-count {
    grid-column: 1;
    align-self: center;
}

.cos-records-toolbar .cos-temp-import-form {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin-left: 0;
}

.cos-records-toolbar .search-composer {
    grid-column: 3;
    align-self: center;
}

.cos-records-toolbar .filter-actions {
    grid-column: 4;
    align-self: center;
    justify-self: end;
}

.cos-records-toolbar .filter-slide-panel {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .cos-records-toolbar {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
    }

    .cos-records-toolbar .records-result-count {
        grid-column: 1;
    }

    .cos-records-toolbar .cos-temp-import-form {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
    }

    .cos-records-toolbar .search-composer {
        grid-column: 2;
        grid-row: 1;
    }

    .cos-records-toolbar .filter-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .cos-records-toolbar .filter-slide-panel {
        grid-column: 1 / -1;
    }
}


/* Employee Records table final alignment override */
.employee-records-table thead th.sg-cell,
.employee-records-table tbody td.sg-cell {
    text-align: left !important;
}

.employee-records-table thead th.salary-cell,
.employee-records-table tbody td.salary-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.employee-records-table thead th.center-cell,
.employee-records-table tbody td.center-cell,
.employee-records-table thead th.action-cell,
.employee-records-table tbody td.action-cell {
    text-align: center !important;
}

.employee-records-table thead th.sg-cell > .sortable-header {
    display: flex !important;
    width: 100%;
    justify-content: flex-start !important;
    text-align: left !important;
}

.employee-records-table thead th.salary-cell > .sortable-header {
    display: flex !important;
    width: 100%;
    justify-content: flex-end !important;
    text-align: right !important;
}

.employee-records-table tbody td.action-cell .row-actions {
    justify-content: center !important;
}


@media (prefers-reduced-motion: reduce) {
    .filter-slide-panel,
    .filter-slide-panel > * {
        transition: none !important;
        transform: none !important;
    }
}


/* Login window polish */
.login-only-layout .login-panel {
    width: min(460px, calc(100vw - 2rem));
    padding: 2.15rem 1.8rem 1.65rem;
}

.login-brand img.login-logo-enhanced {
    width: 132px;
    height: 132px;
    padding: .22rem;
    margin-bottom: 1rem;
    object-fit: contain;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow:
        0 14px 34px rgba(15, 23, 42, .18),
        0 0 0 7px rgba(255, 255, 255, .88);
}

.login-title {
    margin: 1.05rem 0 1.3rem;
    padding-top: 1.05rem;
    border-top: 1px solid #E6ECF3;
    text-align: center;
}

.login-title h1 {
    display: none;
}

.login-title p {
    margin: 0;
    color: #0F172A;
    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: .01em;
}

.login-only-layout .login-form {
    gap: 1.05rem;
}

.login-floating-field {
    position: relative;
    display: block;
    margin: 0;
    padding-top: .18rem;
}

.login-floating-field .form-control {
    width: 100%;
    min-height: 50px;
    padding: 1.02rem .95rem .48rem;
    color: #1F2937;
    font-size: .95rem;
    font-weight: 600;
    border: 1.5px solid #C9D5E3;
    border-radius: 13px;
    background: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.login-floating-field > span {
    position: absolute;
    left: .78rem;
    top: calc(.18rem + 50%);
    z-index: 2;
    padding: 0 .28rem;
    color: #64748B;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    background: #FFFFFF;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition:
        top .16s ease,
        color .16s ease,
        font-size .16s ease,
        transform .16s ease;
}

.login-floating-field .form-control:hover {
    border-color: #9DB0C5;
    background: #FFFFFF;
}

.login-floating-field .form-control:focus {
    border-color: #0F766E;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    outline: none;
}

.login-floating-field:focus-within > span,
.login-floating-field:has(.form-control:not(:placeholder-shown)) > span {
    top: .18rem;
    color: #0F766E;
    font-size: .68rem;
    font-weight: 700;
    transform: translateY(-8%);
}

.login-floating-field:has(.form-control:not(:placeholder-shown)) .form-control {
    border-color: #0F766E;
}

.login-floating-field .form-control:-webkit-autofill + span {
    top: .18rem;
    color: #0F766E;
    font-size: .68rem;
    font-weight: 700;
    transform: translateY(-8%);
}

@media (max-width: 540px) {
    .login-brand img.login-logo-enhanced {
        width: 116px;
        height: 116px;
    }

    .login-title p {
        font-size: 1.08rem;
    }
}


/* Login password reveal and remember-me controls */
.login-password-field .form-control {
    padding-right: 3rem;
}

.password-toggle-button {
    position: absolute;
    right: .72rem;
    top: calc(.18rem + 50%);
    z-index: 4;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #64748B;
    border: 0;
    border-radius: 10px;
    background: transparent;
    transform: translateY(-50%);
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.password-toggle-button:hover,
.password-toggle-button:focus-visible {
    color: #0F766E;
    background: #ECFDF5;
    outline: none;
}

.password-toggle-button:active {
    transform: translateY(-50%) scale(.94);
}

.password-toggle-icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
}

.password-toggle-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 16px;
    height: 10px;
    border: 1.8px solid currentColor;
    border-radius: 999px / 70%;
    transform: rotate(0deg);
}

.password-toggle-icon::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 4px;
    height: 4px;
    border: 1.8px solid currentColor;
    border-radius: 999px;
    background: transparent;
}

.password-toggle-button:not(.is-visible) .password-toggle-icon {
    transform: rotate(-18deg);
}

.password-toggle-button:not(.is-visible) .password-toggle-icon::before {
    border-top-color: transparent;
}

.password-toggle-button:not(.is-visible) .password-toggle-icon::after {
    left: 1px;
    top: 9px;
    width: 18px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
}

.login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-top: -.28rem;
}

.remember-me-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 30px;
    margin: 0;
    color: #0F172A;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.remember-me-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    border: 2px solid #94A3B8;
    border-radius: 5px;
    background: #FFFFFF;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.remember-me-option input:checked {
    border-color: #0F766E;
    background: #0F766E;
    box-shadow: inset 0 0 0 3px #FFFFFF;
}

.remember-me-option input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .18);
}

.login-inline-link-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0;
    color: #0F766E;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
    border: 0;
    background: transparent;
    opacity: .72;
    cursor: not-allowed;
}

.login-inline-link-disabled strong {
    font-weight: 850;
}

.login-account-links {
    margin-top: .95rem;
}

.login-actions.login-actions-single {
    margin-top: .82rem;
}

@media (max-width: 420px) {
    .login-options-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
    }
}


/* Login floating-label and password-eye refinement */
.login-floating-field > span {
    background: #FFFFFF;
    box-shadow: 0 0 0 4px #FFFFFF;
}

.login-floating-field:focus-within > span,
.login-floating-field:has(.form-control:not(:placeholder-shown)) > span,
.login-floating-field .form-control:-webkit-autofill + span {
    top: .15rem;
    padding: 0 .36rem;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px #FFFFFF;
    line-height: 1.05;
    transform: translateY(-50%);
}

.password-toggle-button {
    right: .68rem;
    top: calc(.18rem + 50%);
    color: #64748B;
}

.password-toggle-button:hover,
.password-toggle-button:focus-visible {
    color: #0F766E;
    background: transparent;
}

.password-toggle-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
}

.password-toggle-icon::before,
.password-toggle-icon::after {
    content: "";
    position: absolute;
    display: block;
}

/* hidden state: clean slanted eye-off mark like the reference */
.password-toggle-button:not(.is-visible) .password-toggle-icon::before {
    left: 4px;
    top: 9px;
    width: 14px;
    height: 6px;
    border: 1.7px solid currentColor;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0 0 14px 14px;
    transform: rotate(18deg);
}

.password-toggle-button:not(.is-visible) .password-toggle-icon::after {
    left: 5px;
    top: 5px;
    width: 14px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(36deg);
    transform-origin: center;
}

/* visible state: simple eye outline */
.password-toggle-button.is-visible .password-toggle-icon::before {
    left: 2px;
    top: 6px;
    width: 18px;
    height: 10px;
    border: 1.7px solid currentColor;
    border-radius: 999px / 70%;
    transform: none;
}

.password-toggle-button.is-visible .password-toggle-icon::after {
    left: 8px;
    top: 9px;
    width: 4px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    transform: none;
}


/* Final login password icon fix: use inline SVG, no pseudo drawing */
.password-toggle-button {
    right: .7rem;
    width: 34px;
    height: 34px;
    color: #64748B;
}

.password-toggle-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-grid !important;
    place-items: center;
    transform: none !important;
}

.password-toggle-icon::before,
.password-toggle-icon::after {
    content: none !important;
    display: none !important;
}

.password-toggle-svg {
    grid-area: 1 / 1;
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.password-toggle-button .password-eye-on {
    opacity: 0;
    transform: scale(.92);
}

.password-toggle-button .password-eye-off {
    opacity: 1;
    transform: scale(1);
}

.password-toggle-button.is-visible .password-eye-on {
    opacity: 1;
    transform: scale(1);
}

.password-toggle-button.is-visible .password-eye-off {
    opacity: 0;
    transform: scale(.92);
}

.password-toggle-button:hover,
.password-toggle-button:focus-visible {
    color: #0F766E;
    background: #ECFDF5;
}



/* Pending HR Actions AJAX confirmation */
.modern-task-item {
    transition: opacity .22s ease, transform .22s ease, max-height .24s ease, margin .22s ease, padding .22s ease;
}

.modern-task-item.is-removing {
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(10px);
}

.pending-hr-confirm-dialog {
    width: min(430px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
}

.pending-hr-confirm-dialog::backdrop {
    background: rgba(15, 23, 42, .36);
    backdrop-filter: blur(2px);
}

.pending-hr-confirm-box {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 1.6rem 1.5rem 1.35rem;
    border: 1px solid #DDE7F2;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 26px 60px rgba(15, 23, 42, .24);
    text-align: center;
}

.pending-hr-confirm-icon {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    color: #0F766E;
    font-size: 1.35rem;
    font-weight: 800;
    border-radius: 999px;
    background: #E6FFFB;
}

.pending-hr-confirm-copy h3 {
    margin: 0;
    color: #0F172A;
    font-size: 1.05rem;
    font-weight: 800;
}

.pending-hr-confirm-copy p {
    margin: .45rem 0 0;
    color: #475569;
    font-size: .92rem;
    line-height: 1.45;
}

.pending-hr-confirm-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .7rem;
}

.pending-hr-confirm-actions .btn {
    min-width: 96px;
    border-radius: 12px;
}

.record-action-confirmation {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(2px);
}

.record-action-confirmation[hidden],
.record-action-password[hidden],
.record-action-error[hidden],
[data-record-action-warning-icon][hidden],
[data-record-action-delete-icon][hidden] {
    display: none;
}

.record-action-confirmation-panel {
    width: min(420px, calc(100vw - 2rem));
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .9rem 1rem;
    padding: 1.25rem;
    border: 1px solid #D9E3EF;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .24);
}

.record-action-confirmation-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    grid-row: span 1;
    border: 1px solid #FED7AA;
    border-radius: 50%;
    background: #FFF7ED;
    color: #C2410C;
    font-size: 1.2rem;
    font-weight: 800;
}

.record-action-confirmation-copy h2 {
    margin: .05rem 0 0;
    color: #0F172A;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: 0;
}

.record-action-confirmation-copy p {
    margin: .35rem 0 0;
    color: #52637A;
    font-size: .9rem;
    line-height: 1.45;
}

.record-action-password,
.record-action-error,
.record-action-confirmation-actions {
    grid-column: 1 / -1;
}

.record-action-password {
    display: grid;
    gap: .35rem;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.record-action-password input {
    width: 100%;
    min-height: 42px;
    padding: .6rem .75rem;
    border: 1px solid #C9D7E7;
    border-radius: 6px;
    background: #FFFFFF;
    color: #0F172A;
    outline: none;
}

.record-action-password input:focus {
    border-color: #0F8B84;
    box-shadow: 0 0 0 3px rgba(15, 139, 132, .12);
}

.record-action-error {
    margin: -.25rem 0 0;
    color: #B91C1C;
    font-size: .8rem;
    font-weight: 650;
}

.record-action-confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: .15rem;
}

.record-action-confirmation-actions .btn {
    min-width: 88px;
}

.record-action-confirmation.is-delete .record-action-confirmation-icon {
    border-color: #FECDD3;
    background: #FFF1F2;
    color: #E11D48;
}

.record-action-confirmation.is-delete .record-action-confirmation-icon .lucide-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

body.has-record-action-confirmation {
    overflow: hidden;
}

.is-employee-separation .record-action-confirmation-panel {
    box-sizing: border-box;
    align-content: start;
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
.employee-separation-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.employee-separation-fields[hidden], .employee-separation-fields [hidden] { display: none !important; }
.employee-separation-fields label { display: grid; gap: .35rem; min-width: 0; font-size: .82rem; font-weight: 600; color: #334155; }
.employee-separation-fields input, .employee-separation-fields select { width: 100%; min-width: 0; min-height: 42px; }
.employee-separation-employee, .employee-separation-range, .employee-separation-specify { grid-column: 1 / -1; }
.employee-separation-employee { margin: 0; padding: .65rem .8rem; border-radius: 8px; background: #eef8f7; color: #0f766e; font-weight: 600; overflow-wrap: anywhere; }
.employee-separation-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.employee-separation-range small { grid-column: 1 / -1; color: #64748b; }
.is-employee-separation :is(.employee-separation-fields label, .record-action-password) { position: relative; display: block; padding-top: .45rem; }
.is-employee-separation :is(.employee-separation-fields label, .record-action-password) > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 2;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    transform-origin: left center;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transition: transform .24s cubic-bezier(.2,.8,.2,1), background-color .16s ease;
}
.is-employee-separation :is(.employee-date-field, label:has(select), label:focus-within, label:has(input[placeholder]:not(:placeholder-shown))) > span:first-child {
    background: var(--surface, #fff);
    transform: translateY(0) scale(1);
}
.employee-separation-fields .modern-date-source { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.employee-separation-fields .modern-date-control { display: grid; grid-template-columns: minmax(0, 1fr) 42px; min-width: 0; border: 1px solid #c9d7e7; border-radius: 10px; overflow: hidden; background: white; }
.employee-separation-fields .modern-date-control:is(.is-open,.is-focused) { border-color: #0f8a7d; box-shadow: 0 0 0 3px #0f8a7d18; }
.employee-separation-fields .modern-date-control.is-invalid { border-color: #dc2626; }
.employee-separation-fields .modern-date-display.form-control { border: 0; border-radius: 0; box-shadow: none; background: transparent; font-weight: 400; padding: .6rem .7rem; }
.employee-separation-fields .modern-date-trigger { display: grid; place-items: center; border: 0; border-left: 1px solid #d9e5e3; background: #f0faf8; color: #0f766e; }
.employee-separation-fields .modern-date-trigger:hover { background: #ddf4f0; }
.employee-separation-fields .modern-date-trigger-icon { width: 19px; height: 19px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat; }
.employee-separation-schedule-hint { grid-column: 1 / -1; margin: 0; color: var(--muted, #526174); font-size: .8125rem; line-height: 1.5; }
.scheduled-separation-notice { margin-top: 6px; font-size: .75rem; line-height: 1.4; }
.scheduled-separation-notice small { display: block; white-space: normal; }
.scheduled-separation-notice form { margin: 0; }
.scheduled-separation-notice .btn { min-height: 28px; padding: 2px 0; font-size: .75rem; }
.employee-separation-fields .smooth-select-button { min-height: 44px; border-radius: 10px; font-weight: 400; }
.employee-separation-fields .smooth-select-shell.is-open .smooth-select-button { border-color: #0f8a7d; box-shadow: 0 0 0 3px #0f8a7d18; }
.employee-separation-fields .smooth-select-menu { max-height: 204px; padding: 5px; visibility: hidden; scrollbar-width: thin; scrollbar-color: #9bc7c0 transparent; }
.employee-separation-fields .smooth-select-shell.is-open .smooth-select-menu { visibility: visible; }
.employee-separation-fields .smooth-select-menu[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    transform: none;
    transition: none;
    box-sizing: border-box;
}
.employee-separation-fields .smooth-select-shell.is-inline-menu .smooth-select-menu { display: none; }
.employee-separation-fields .smooth-select-shell.is-inline-menu.is-open .smooth-select-menu { display: block; position: relative; inset: auto; }
.employee-separation-fields .smooth-select-option { min-height: 38px; font-weight: 400; }
.employee-separation-fields .smooth-select-option[aria-selected="true"] { background: #e5f5f1; color: #087f70; font-weight: 600; }
.employee-separation-fields .smooth-select-option:hover { background: #f0f8f6; }
.is-employee-separation [data-record-action-confirm] { background: #0f766e; border-color: #0f766e; }
.is-employee-separation [data-record-action-confirm]:hover { background: #0b625c; border-color: #0b625c; }
@media (max-width: 480px) { .employee-separation-fields { grid-template-columns: minmax(0, 1fr); } }

/* Oath of Office generator and legal-size print preview */
.employee-appointment-history { min-width: 0; }
.appointment-history-description { margin: -.15rem 0 .8rem; color: #64748b; font-size: .8rem; }
.appointment-history-empty { padding: 1rem; border: 1px dashed #c9d7e7; border-radius: 12px; color: #64748b; background: #f8fafc; font-size: .85rem; }
.appointment-history-table-wrap { overflow-x: auto; border: 1px solid #d6e2ef; border-radius: 12px; }
.appointment-history-table { width: 100%; min-width: 950px; border-collapse: collapse; font-size: .8rem; }
.appointment-history-table th { background: #f5f8fb; color: #52677f; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; white-space: nowrap; }
.appointment-history-table :is(th,td) { padding: .8rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e5edf5; }
.appointment-history-table tr:last-child td { border-bottom: 0; }
.appointment-history-table td { color: #334155; }
.appointment-history-table small { display: block; color: #718198; margin-top: .25rem; font-size: .7rem; }
.appointment-history-table .history-date { white-space: nowrap; }
.appointment-history-table .history-position { font-weight: 600; }
.appointment-history-table .amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.appointment-history-nature { display: inline-block; background: #e9f6f2; color: #0f766e; padding: .2rem .5rem; border-radius: 6px; font-weight: 600; }
@media (max-width: 720px) {
    .appointment-history-table-wrap { overflow: visible; border: 0; }
    .appointment-history-table, .appointment-history-table tbody { display: block; min-width: 0; }
    .appointment-history-table thead { display: none; }
    .appointment-history-table tr { display: block; margin-bottom: .8rem; padding: .45rem .75rem; border: 1px solid #d6e2ef; border-radius: 12px; }
    .appointment-history-table td, .appointment-history-table .amount { display: block; padding: .5rem 0; text-align: left; overflow-wrap: anywhere; white-space: normal; }
    .appointment-history-table td::before { content: attr(data-label); display: block; color: #64748b; font-size: .7rem; margin-bottom: .2rem; }
    .appointment-history-table tr:last-child td { border-bottom: 1px solid #e5edf5; }
    .appointment-history-table tr td:last-child { border-bottom: 0; }
}

.oath-print-toolbar {
    gap: .55rem;
}

.oath-print-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.oath-preview-shell {
    min-width: max-content;
    padding: 1.25rem;
    background: #EEF2F7;
}

.oath-office-document {
    width: 8.5in;
    height: 13in;
    box-sizing: border-box;
    margin: 0 auto;
    padding: .14in;
    border: .11in solid #D9D4E5;
    color: #333333;
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    font-family: "Times New Roman", Times, serif;
    page: oath-office-page;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.oath-office-inner {
    height: 100%;
    box-sizing: border-box;
    padding: .25in .44in .22in;
    border: 1.5px solid #4B4B4B;
    overflow: hidden;
}

.oath-form-header {
    min-height: 3.1in;
}

.oath-form-meta {
    display: grid;
    width: max-content;
    line-height: 1.08;
}

.oath-form-meta strong {
    font-size: 14px;
}

.oath-form-meta em {
    margin-bottom: .16in;
    font-size: 12px;
}

.oath-government-header {
    position: relative;
    width: 100%;
    min-height: 1.42in;
    display: block;
    margin: .04in auto 0;
}

.oath-government-header img {
    position: absolute;
    top: .18in;
    left: .5in;
    width: 1.08in;
    height: 1.08in;
    object-fit: contain;
}

.oath-government-header > div {
    width: 100%;
    display: grid;
    justify-items: center;
    line-height: 1.05;
    text-align: center;
}

.oath-government-header strong {
    margin-top: .13in;
    font-size: 20px;
}

.oath-government-header strong:first-child {
    margin-top: 0;
}

.oath-government-header em {
    font-size: 12px;
}

.oath-document-title {
    margin-top: .22in;
    text-align: center;
    line-height: 1.05;
}

.oath-document-title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .01em;
}

.oath-document-title em {
    display: block;
    margin-top: .03in;
    font-size: 13px;
}

.oath-body {
    font-size: 13.5px;
    line-height: 1.18;
}

.oath-ruby-paragraph {
    margin: .08in 0 .16in;
    color: #333333;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 2.35;
    text-align: justify;
    text-align-last: left;
    text-indent: 0;
    word-spacing: 0;
}

.oath-ruby-paragraph ruby {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    ruby-align: center;
    ruby-position: under;
}

.oath-ruby-paragraph rt {
    color: #4B4B4B;
    font-size: 11.5px;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.oath-ruby-paragraph ruby.oath-nowrap-ruby,
.oath-ruby-paragraph ruby.oath-nowrap-ruby rt {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.oath-value-ruby,
.oath-value-ruby .oath-variable {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.oath-value-ruby rt {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.oath-opening-tagalog {
    text-indent: 0;
}

.oath-nowrap-text {
    white-space: nowrap;
}

.oath-body-row {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: .025in;
    width: 100%;
    box-sizing: border-box;
    margin: .03in 0 .07in;
    line-height: 1.18;
    text-indent: 0;
}

.oath-opening-flow {
    width: 100%;
    box-sizing: border-box;
    line-height: 2.35;
    text-align: justify;
    text-align-last: justify;
    text-indent: .65in;
}

.oath-opening-closing-phrase {
    white-space: nowrap;
}

.oath-opening-english-line {
    margin: .025in 0 .07in;
}

.oath-tagalog-line {
    display: block;
    width: 100%;
    text-align: justify;
    text-align-last: justify;
}

.oath-body-row-short .oath-tagalog-line {
    text-align-last: left;
}

.oath-english-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: .2in;
    box-sizing: border-box;
    text-indent: 0;
    white-space: nowrap;
}

.oath-opening-line {
    margin: -.08in 0 .07in;
}

.oath-english-line > em {
    color: #4B4B4B;
    font-size: 11.5px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

.oath-punctuation {
    color: #333333 !important;
}

.oath-appointment-block {
    margin: .08in 0 .1in;
}

.oath-paired-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: .04in .025in;
    width: 100%;
    text-align: center;
}

.oath-paired-segment {
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    flex: 0 1 auto;
}

.oath-paired-segment > strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.16;
}

.oath-paired-segment > em {
    display: block;
    margin-top: .015in;
    color: #4B4B4B;
    font-size: 11.5px;
    line-height: 1.08;
}

.oath-name-segment {
    max-width: none;
    flex: 0 0 auto;
}

.oath-address-segment {
    max-width: none;
    flex: 0 0 auto;
}

.oath-name-segment > strong,
.oath-address-segment > strong,
.oath-position-segment > strong {
    white-space: nowrap;
}

.oath-position-flow {
    margin-top: .13in;
    row-gap: .08in;
}

.oath-position-segment {
    max-width: none;
    flex: 0 0 auto;
}

.oath-position-tail {
    flex: 0 0 auto;
}

.oath-clause-line {
    gap: .04in .18in;
    margin: 0 0 .14in;
}

.oath-clause-line .oath-paired-segment {
    flex: 1 1 2.7in;
}

.oath-clause-line .oath-paired-segment:only-child {
    flex-basis: 100%;
}

.oath-continuous-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: .14in .03in;
    width: 100%;
    margin-bottom: .04in;
    text-align: center;
}

.oath-position-and-body {
    align-items: baseline;
    margin-top: .11in;
}

.oath-position-and-body .oath-paired-segment {
    align-self: baseline;
}

.oath-flow-segment {
    flex: 0 0 auto;
}

.oath-flow-segment > strong,
.oath-flow-segment > em {
    white-space: nowrap;
}

.oath-flow-full {
    width: 100%;
    flex-basis: 100%;
}

.oath-flow-full > strong {
    font-size: 14.25px;
}

.oath-solemn-oath-phrase > strong {
    font-size: 14.25px;
}

.oath-filipino {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.oath-variable {
    display: inline;
    font-weight: 700;
    text-transform: uppercase;
}

.oath-person {
    color: #E56573;
}

.oath-position {
    color: #8ACFE7;
}

.oath-address {
    color: #30343A;
    text-transform: none;
}

.oath-translation {
    display: grid;
    margin-top: .02in;
    color: #4B4B4B;
    font-size: 11.5px;
    font-style: italic;
    text-align: center;
}

.oath-appointment-translation {
    grid-template-columns: .5fr 2.15fr 2.3fr 1.5fr;
}

.oath-position-line {
    margin-top: .14in;
}

.oath-position-translation {
    grid-template-columns: .7fr 5fr 1.5fr;
}

.oath-clause {
    margin: 0 0 .14in;
    text-align: center;
}

.oath-clause > p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.oath-clause > em {
    display: block;
    margin-top: .02in;
    font-size: 11.5px;
}

.oath-split-translation {
    display: flex;
    justify-content: space-around;
    gap: .18in;
    margin-top: .02in;
    font-size: 11.5px;
}

.oath-split-translation em {
    flex: 1 1 50%;
}

.oath-help {
    display: grid;
    width: max-content;
    margin: .2in 0 .12in .65in;
    line-height: 1.1;
    text-align: left;
}

.oath-help strong {
    font-size: 16px;
}

.oath-help em {
    font-size: 12px;
    text-align: left;
    text-indent: .22in;
}

.oath-signature-area {
    display: grid;
    grid-template-columns: 1fr 2.1fr;
    align-items: end;
    gap: .3in;
    min-height: .72in;
}

.oath-id-lines {
    display: grid;
    gap: .02in;
    font-size: 12px;
}

.oath-id-lines > div {
    display: grid;
    grid-template-columns: 1.45in minmax(0, 1fr);
    align-items: end;
    gap: .06in;
}

.oath-id-lines span {
    min-height: .16in;
    border-bottom: 1px solid #737373;
}

.oath-appointee-signature {
    display: grid;
    justify-items: center;
    align-self: start;
    margin-top: .02in;
    text-align: center;
}

.oath-appointee-signature strong {
    min-width: 0;
    color: #E56573;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    text-transform: uppercase;
}

.oath-appointee-signature span {
    font-size: 11.5px;
}

.oath-section-rule {
    height: 3px;
    margin: .16in 0 .12in;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #444444;
}

.oath-attestation {
    margin: 0 .22in;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.28;
    text-align: justify;
    text-indent: .34in;
}

.oath-final-signatures {
    min-height: 1.15in;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: end;
    gap: .3in;
    margin: .18in .3in 0;
}

.oath-documentary-stamp {
    width: .96in;
    height: .66in;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 1px solid #B3A9B8;
    font: 12px/1.15 Arial, sans-serif;
    text-align: center;
}

.oath-mayor-signature {
    display: grid;
    justify-items: center;
    text-align: center;
}

.oath-mayor-signature strong {
    min-width: 0;
    font-size: 16px;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.oath-mayor-signature span {
    font-size: 14px;
}

@media print {
    @page oath-office-page {
        size: 8.5in 13in;
        margin: 0;
    }

    .oath-preview-shell {
        min-width: 0;
        padding: 0;
        background: #FFFFFF;
    }

    .oath-office-document {
        width: 8.5in;
        height: 13in;
        margin: 0;
        box-shadow: none;
    }
}



/* Reports employee name status sublabel */
.report-table td[data-label="Employee Name"] .employee-link {
    display: inline-block;
}

.report-table td[data-label="Employee Name"] small {
    display: block;
    margin-top: .18rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
}



/* Login password toggle: keep icon centered and use slight resize animation only */
.password-toggle-button {
    top: 50% !important;
    right: .72rem !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translateY(-50%) !important;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

.password-toggle-button:active {
    transform: translateY(-50%) !important;
}

.password-toggle-icon {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.password-toggle-svg {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 20px !important;
    height: 20px !important;
    overflow: hidden !important;
    transform-origin: 50% 50% !important;
    transition: opacity .14s ease, transform .14s ease !important;
}

.password-toggle-button .password-eye-on {
    opacity: 0 !important;
    transform: scale(.86) !important;
}

.password-toggle-button .password-eye-off {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.password-toggle-button.is-visible .password-eye-on {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.password-toggle-button.is-visible .password-eye-off {
    opacity: 0 !important;
    transform: scale(.86) !important;
}

.password-toggle-button:active .password-eye-on,
.password-toggle-button:active .password-eye-off {
    transform: scale(.92) !important;
}


/* Login title weight adjustment */
.login-title p {
    font-weight: 500 !important;
}


/* Reports employee status and pagination jump controls */
.report-table td[data-label="Employee Name"] .employee-link {
    display: inline-block;
}

.report-table td[data-label="Employee Name"] small {
    display: block;
    margin-top: .18rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 400 !important;
    line-height: 1.2;
}

.pagination-row-with-jump {
    gap: .9rem;
    flex-wrap: wrap;
}

.pagination-jump-form {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.pagination-jump-form label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.pagination-page-input {
    width: 72px;
    min-height: 34px;
    padding: .35rem .45rem;
    color: var(--text);
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FFFFFF;
}

.pagination-page-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    outline: none;
}

.pagination-go-button {
    min-height: 34px;
    padding: .35rem .75rem;
    border-radius: 10px;
}


/* Panel-only refresh for pagination Go */
.report-workspace,
.content-panel {
    transition: opacity .16s ease, filter .16s ease;
}

.report-workspace.is-panel-refreshing,
.content-panel.is-panel-refreshing {
    opacity: .62;
    filter: saturate(.92);
    pointer-events: none;
}

.pagination-go-button:disabled {
    opacity: .62;
    cursor: wait;
}


/* Reports toolbar and column alignment correction */
.report-header {
    grid-template-columns: minmax(220px, 1fr) minmax(360px, auto) !important;
    align-items: center;
    column-gap: .75rem;
}

.report-search-form {
    grid-column: 2;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

.report-search-form .search-composer {
    order: 1;
    flex: 0 1 min(260px, 100%);
    justify-self: end;
}

.report-search-form .filter-actions {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin: 0;
}

.report-search-form .filter-slide-panel {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
}

.animated-search {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    column-gap: .5rem;
}

.animated-search .form-control {
    grid-column: 1;
}

.search-toggle-button {
    grid-column: 2;
    flex: 0 0 34px;
    background: #F8FAFC !important;
    border: 1px solid var(--border) !important;
}

.report-table th.center-cell,
.report-table td.center-cell,
.report-table th.action-cell,
.report-table td.action-cell,
.report-table td[data-label="Age"],
.report-table td[data-label="Appointment Date"],
.report-table td[data-label="SG-SI"],
.report-table td[data-label="Action"] {
    text-align: center !important;
}

.report-table th.center-cell > .sortable-header {
    display: inline-flex !important;
    width: 100%;
    justify-content: center !important;
    text-align: center !important;
}

.report-table td.action-cell .report-print-button,
.report-table td.action-cell .row-actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center !important;
}

@media (max-width: 900px) {
    .report-header {
        grid-template-columns: 1fr !important;
    }

    .report-search-form {
        grid-column: 1;
        justify-content: flex-end;
    }
}


/* Search toolbar final alignment fix */
.records-toolbar {
    align-items: center !important;
    column-gap: .5rem !important;
}

.report-header {
    grid-template-columns: minmax(220px, 1fr) minmax(430px, max-content) !important;
    align-items: center !important;
    column-gap: .75rem !important;
}

.report-search-form {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .5rem !important;
    width: auto !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
}

.report-search-form .search-composer {
    order: 1 !important;
}

.report-search-form .filter-actions {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: 0 !important;
}

.report-search-form .filter-slide-panel {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
}

.filter-actions {
    align-items: center !important;
    gap: .5rem !important;
}

.search-composer.animated-search {
    position: relative !important;
    display: block !important;
    justify-self: end !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 100% !important;
    min-height: 38px !important;
    overflow: visible !important;
    transition: width .22s ease !important;
}

.search-composer.animated-search.is-open {
    width: min(310px, 100%) !important;
    min-width: min(310px, 100%) !important;
}

.search-composer.animated-search .form-control {
    position: absolute !important;
    top: 50% !important;
    right: 46px !important;
    left: auto !important;
    z-index: 1 !important;
    width: 0 !important;
    max-width: calc(100% - 46px) !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    transition: width .22s ease, opacity .16s ease, padding .18s ease, border-color .18s ease !important;
}

.search-composer.animated-search.is-open .form-control {
    width: calc(100% - 46px) !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    border-color: var(--border-strong) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.search-composer.animated-search .search-toggle-button {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 2 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    color: var(--icon) !important;
    background: #F8FAFC !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    transform: translateY(-50%) !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.search-composer.animated-search .search-toggle-button:hover,
.search-composer.animated-search .search-toggle-button:focus-visible,
.search-composer.animated-search.is-open .search-toggle-button {
    color: var(--icon-hover) !important;
    background: #F1F5F9 !important;
    border-color: var(--border-strong) !important;
    outline: none !important;
}

.search-composer.animated-search .search-toggle-button:active {
    transform: translateY(-50%) scale(.96) !important;
}

.search-composer.animated-search .search-suggestions {
    left: 0 !important;
    right: 46px !important;
    top: calc(100% + .35rem) !important;
}

.icon-button,
.filter-toggle-button,
.search-toggle-button {
    width: 38px !important;
    height: 38px !important;
}

.report-table th.center-cell > .sortable-header,
.report-table th.action-cell > .sortable-header {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}

.report-table th.center-cell,
.report-table td.center-cell,
.report-table th.action-cell,
.report-table td.action-cell,
.report-table td[data-label="Age"],
.report-table td[data-label="Appointment Date"],
.report-table td[data-label="SG-SI"],
.report-table td[data-label="Action"] {
    text-align: center !important;
}

@media (max-width: 900px) {
    .report-header {
        grid-template-columns: 1fr !important;
    }

    .report-search-form {
        grid-column: 1 !important;
        width: 100% !important;
    }

    .search-composer.animated-search.is-open {
        width: min(310px, 100%) !important;
        min-width: min(310px, 100%) !important;
    }
}


/* Reports filter full-width dropdown correction */
.report-header {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    align-items: start !important;
    column-gap: .5rem !important;
    row-gap: .65rem !important;
}

.report-header > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.report-header .report-search-form {
    display: contents !important;
}

.report-header .search-composer {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
}

.report-header .filter-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: 0 !important;
}

.report-header .filter-slide-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    z-index: 1 !important;
    margin-top: .15rem !important;
}

.report-header .filter-slide-panel.is-open {
    margin-top: .15rem !important;
    margin-bottom: .55rem !important;
}

/* Keep the search button fixed while the input expands left. */
.report-header .search-composer.animated-search,
.records-toolbar .search-composer.animated-search {
    position: relative !important;
    display: block !important;
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    transition: width .22s ease !important;
}

.report-header .search-composer.animated-search.is-open,
.records-toolbar .search-composer.animated-search.is-open {
    width: min(310px, 100%) !important;
    min-width: min(310px, 100%) !important;
}

.report-header .search-composer.animated-search .form-control,
.records-toolbar .search-composer.animated-search .form-control {
    position: absolute !important;
    top: 50% !important;
    right: 46px !important;
    left: auto !important;
    z-index: 1 !important;
    width: 0 !important;
    max-width: calc(100% - 46px) !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    transition: width .22s ease, opacity .16s ease, padding .18s ease, border-color .18s ease !important;
}

.report-header .search-composer.animated-search.is-open .form-control,
.records-toolbar .search-composer.animated-search.is-open .form-control {
    width: calc(100% - 46px) !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.report-header .search-composer.animated-search .search-toggle-button,
.records-toolbar .search-composer.animated-search .search-toggle-button {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    transform: translateY(-50%) !important;
}

.report-header .search-composer.animated-search .search-toggle-button:active,
.records-toolbar .search-composer.animated-search .search-toggle-button:active {
    transform: translateY(-50%) scale(.96) !important;
}

@media (max-width: 900px) {
    .report-header {
        grid-template-columns: 1fr auto !important;
    }

    .report-header > div:first-child {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .report-header .search-composer {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .report-header .filter-actions {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .report-header .filter-slide-panel {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}


/* Reports search expand width correction */
.report-header .search-composer.animated-search {
    width: 38px !important;
    min-width: 38px !important;
    max-width: none !important;
}

.report-header .search-composer.animated-search.is-open {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

.report-header .search-composer.animated-search.is-open .form-control {
    width: 274px !important;
    max-width: 274px !important;
}

.report-header .search-composer.animated-search .search-toggle-button {
    right: 0 !important;
}

@media (max-width: 720px) {
    .report-header .search-composer.animated-search.is-open {
        width: min(320px, calc(100vw - 6rem)) !important;
        min-width: min(320px, calc(100vw - 6rem)) !important;
        max-width: min(320px, calc(100vw - 6rem)) !important;
    }

    .report-header .search-composer.animated-search.is-open .form-control {
        width: calc(100% - 46px) !important;
        max-width: calc(100% - 46px) !important;
    }
}


/* Reports filter dropdown above table header */
.report-workspace {
    position: relative;
}

.report-header {
    position: relative !important;
    z-index: 7000 !important;
    overflow: visible !important;
}

.report-header:has(.records-filter-menu[open]),
.report-header:has(.filter-select-shell.is-open) {
    z-index: 9000 !important;
}

.report-header .filter-slide-panel {
    position: relative !important;
    z-index: 8000 !important;
    overflow: visible !important;
}

.report-header .filter-slide-panel.is-open {
    overflow: visible !important;
}

.report-header .records-filter-menu,
.report-header .filter-select-shell,
.report-header .filter-slide-panel label:has(.filter-select-shell) {
    position: relative !important;
    z-index: 8010 !important;
    overflow: visible !important;
}

.report-header .records-filter-menu[open],
.report-header .filter-select-shell.is-open {
    z-index: 9500 !important;
}

.report-header .records-filter-menu .dashboard-filter-panel,
.report-header .filter-select-shell .smooth-select-menu {
    z-index: 9600 !important;
}

.report-table-wrap {
    position: relative !important;
    z-index: 1 !important;
}

.report-table thead,
.report-table th {
    position: relative;
    z-index: 1;
}


/* Gender Distribution donut segmented design */
.gender-chart-wrap {
    width: min(238px, 100%);
}

.gender-pie-svg {
    overflow: visible;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .07));
}

.gender-slice {
    fill: none !important;
    stroke-width: 14.25;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.gender-slice.female {
    stroke: #EC4899;
}

.gender-slice.male {
    stroke: #38BDF8;
}

.gender-slice:hover {
    transform: translate(var(--slice-x), var(--slice-y)) scale(1.015);
    filter: saturate(1.08) brightness(1.02);
}

.gender-donut-total {
    fill: #334155;
    font-size: 12px;
    font-weight: 800;
    dominant-baseline: middle;
}

.gender-donut-caption {
    fill: #64748B;
    font-size: 4.15px;
    font-weight: 600;
}

/* ==========================================================
   HRIS photo preview + top-right account photo enhancement
   Added by patch: photo-preview-topbar
   ========================================================== */

.employee-photo-modal {
    padding: clamp(.75rem, 2vw, 1.5rem);
}

.employee-photo-modal-dialog {
    width: min(860px, 94vw);
    min-width: min(360px, 94vw);
    min-height: min(440px, 90vh);
    max-width: 96vw;
    max-height: 94vh;
    overflow: auto;
    resize: both;
    align-content: start;
}

.employee-photo-modal-avatar.has-photo {
    width: 100%;
    max-width: none;
    max-height: none;
}

.employee-photo-modal-avatar.has-photo img {
    width: 100%;
    height: auto;
    max-height: calc(94vh - 9rem);
    object-fit: contain;
}

.employee-profile-mini-avatar {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: 3px solid #FFFFFF;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.employee-profile-mini-avatar:focus-visible {
    outline: 3px solid rgba(15, 118, 110, .35);
    outline-offset: 3px;
}

.account-avatar.has-photo {
    padding: 0;
    background: #FFFFFF;
}

.account-avatar.has-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.account-menu-panel a:first-child {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

/* ==========================================================
   HRIS employee photo links and resizable preview
   Patch marker: fixed-employee-photo-link-all-views
   ========================================================== */

.account-avatar.has-photo,
.employee-mobile-hero-badge.has-photo {
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
}

.account-avatar.has-photo img,
.employee-mobile-hero-badge.has-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.employee-mobile-hero-badge {
    color: inherit;
    text-decoration: none;
}

.employee-profile-mini-avatar {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}

.employee-profile-mini-avatar.has-photo,
.employee-profile-avatar.has-photo,
.employee-mobile-hero-badge.has-photo {
    cursor: pointer;
}

.employee-profile-mini-avatar:focus-visible,
.employee-profile-avatar:focus-visible,
.employee-mobile-hero-badge:focus-visible {
    outline: 3px solid rgba(15, 118, 110, .35);
    outline-offset: 3px;
}

.employee-photo-modal {
    padding: clamp(.75rem, 2vw, 1.5rem);
}

.employee-photo-modal-dialog {
    width: min(860px, 94vw);
    min-width: min(360px, 94vw);
    max-width: 96vw;
    max-height: 94vh;
    overflow: auto;
    resize: both;
}

.employee-photo-modal-avatar.has-photo {
    width: 100%;
    max-width: none;
    max-height: none;
}

.employee-photo-modal-avatar.has-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(94vh - 9rem);
    object-fit: contain;
}

/* ==========================================================
   Mobile employee dashboard photo size fix
   Patch marker: mobile-employee-dashboard-photo-size-fix
   ========================================================== */

@media (max-width: 768px) {
    .employee-mobile-hero {
        position: relative;
        overflow: hidden;
        min-height: 168px;
    }

    .employee-mobile-hero-badge {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;
        width: 74px !important;
        height: 74px !important;
        min-width: 74px !important;
        min-height: 74px !important;
        max-width: 74px !important;
        max-height: 74px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 4px solid rgba(255, 255, 255, .95) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .18) !important;
        text-decoration: none !important;
        z-index: 3 !important;
        transform: none !important;
    }

    .employee-mobile-hero-badge.has-photo img,
    .employee-mobile-hero-badge img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .employee-mobile-hero-badge span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        background: #0f766e !important;
    }

    .employee-mobile-hero-content,
    .employee-mobile-hero-text {
        padding-right: 98px !important;
    }
}

/* Keep expanded photo preview resizable, but never affect dashboard hero photo. */
.employee-photo-modal .employee-photo-modal-avatar.has-photo img {
    width: 100%;
    height: auto;
    max-height: calc(94vh - 9rem);
    object-fit: contain;
}

/* ==========================================================
   Top-right employee account photo button
   Patch marker: hris-top-right-employee-photo-button-fix
   ========================================================== */

.account-avatar.has-photo {
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid #ffffff !important;
    background: #ffffff !important;
    color: transparent !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .14) !important;
}

.account-avatar.has-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    image-rendering: auto !important;
    backface-visibility: hidden;
    filter: contrast(1.025) saturate(1.025);
    transform: none !important;
}

.top-account-bar.is-employee-mode .account-avatar.has-photo {
    border: 3px solid rgba(255, 255, 255, .95) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .18) !important;
}

/* ==========================================================
   Employee mobile photo placement fix
   Patch marker: employee-photo-corner-not-greeting-center
   ========================================================== */

@media (max-width: 768px) {
    .employee-mobile-hero-card {
        position: relative !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        min-height: 142px !important;
        padding: 1rem 5.8rem 1rem 1rem !important;
        overflow: hidden !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-copy {
        position: relative !important;
        z-index: 2 !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-badge {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
        max-width: 68px !important;
        max-height: 68px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 4px solid rgba(255, 255, 255, .96) !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .18) !important;
        overflow: hidden !important;
        transform: none !important;
        z-index: 4 !important;
        text-decoration: none !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-badge.has-photo img,
    .employee-mobile-hero-card .employee-mobile-hero-badge img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-badge span {
        width: 100% !important;
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #0f766e !important;
        color: #ffffff !important;
        font-size: 1.05rem !important;
        font-weight: 850 !important;
        letter-spacing: .02em !important;
    }

    .employee-mobile-avatar-trigger.has-photo,
    .employee-drawer-avatar.has-photo {
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        color: transparent !important;
    }

    .employee-mobile-avatar-trigger.has-photo img,
    .employee-drawer-avatar.has-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: inherit !important;
        object-fit: cover !important;
    }

    .employee-drawer-profile .employee-drawer-avatar.has-photo {
        position: absolute !important;
        top: 1.05rem !important;
        right: 1.05rem !important;
        margin: 0 !important;
        z-index: 2 !important;
        border: 3px solid rgba(255, 255, 255, .9) !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .2) !important;
    }

    .employee-drawer-profile {
        padding-top: 4.75rem !important;
    }
}

/* ==========================================================
   Keep employee drawer photo in original profile location
   Patch marker: keep-drawer-photo-original-location
   ========================================================== */

@media (max-width: 768px) {
    .employee-drawer-profile {
        position: relative !important;
        display: grid !important;
        align-content: end !important;
        min-height: 178px !important;
        padding: 2.15rem 1.2rem 1.15rem !important;
        overflow: hidden !important;
    }

    .employee-drawer-profile .employee-drawer-avatar,
    .employee-drawer-profile .employee-drawer-avatar.has-photo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 0 .85rem 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        border: 2px solid rgba(255, 255, 255, .72) !important;
        background: rgba(15, 23, 42, .18) !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transform: none !important;
        color: #ffffff !important;
    }

    .employee-drawer-profile .employee-drawer-avatar.has-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 999px !important;
        object-fit: cover !important;
    }

    .employee-mobile-avatar-trigger.has-photo {
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        color: transparent !important;
    }

    .employee-mobile-avatar-trigger.has-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: inherit !important;
        object-fit: cover !important;
    }
}

/* ==========================================================
   Remove employee photo from mobile greeting card only
   Patch marker: remove-employee-photo-from-greeting-card-only
   ========================================================== */

@media (max-width: 768px) {
    .employee-mobile-hero-card .employee-mobile-hero-badge,
    .employee-mobile-hero .employee-mobile-hero-card .employee-mobile-hero-badge {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .employee-mobile-hero-card {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-right: 1rem !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-copy,
    .employee-mobile-hero-card .employee-mobile-hero-content,
    .employee-mobile-hero-card .employee-mobile-hero-text {
        padding-right: 0 !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   Remove attendance schedule/accepted helper labels from day popup
   Patch marker: remove-attendance-schedule-accepted-labels
   ========================================================== */

/* Hide the shift summary line under the selected date. */
.employee-attendance-modal .attendance-shift-summary,
.employee-attendance-modal .attendance-shift-line,
.employee-attendance-modal .attendance-day-shift,
.employee-attendance-modal .attendance-selected-shift,
.employee-attendance-modal .employee-attendance-shift,
.attendance-detail-modal .attendance-shift-summary,
.attendance-detail-modal .attendance-shift-line,
.attendance-detail-modal .attendance-day-shift,
.attendance-day-popup .attendance-shift-summary,
.attendance-day-popup .attendance-shift-line,
.attendance-day-popup .attendance-day-shift {
    display: none !important;
}

/* Hide the Schedule:/Accepted: lines inside IN AM / OUT AM / IN PM / OUT PM cards. */
.employee-attendance-modal .attendance-slot-schedule,
.employee-attendance-modal .attendance-slot-accepted,
.employee-attendance-modal .attendance-slot-window,
.employee-attendance-modal .attendance-slot-range,
.employee-attendance-modal .attendance-slot-meta,
.employee-attendance-modal .attendance-log-slot-schedule,
.employee-attendance-modal .attendance-log-slot-accepted,
.employee-attendance-modal .attendance-log-slot-window,
.employee-attendance-modal .attendance-log-slot-range,
.employee-attendance-modal .attendance-log-slot-meta,
.employee-attendance-modal .employee-attendance-slot-schedule,
.employee-attendance-modal .employee-attendance-slot-accepted,
.employee-attendance-modal .employee-attendance-slot-window,
.employee-attendance-modal .employee-attendance-slot-range,
.employee-attendance-modal .employee-attendance-slot-meta,
.attendance-detail-modal .attendance-slot-schedule,
.attendance-detail-modal .attendance-slot-accepted,
.attendance-detail-modal .attendance-slot-window,
.attendance-detail-modal .attendance-slot-range,
.attendance-detail-modal .attendance-slot-meta,
.attendance-day-popup .attendance-slot-schedule,
.attendance-day-popup .attendance-slot-accepted,
.attendance-day-popup .attendance-slot-window,
.attendance-day-popup .attendance-slot-range,
.attendance-day-popup .attendance-slot-meta {
    display: none !important;
}

/* Keep the four time cards compact after removing the helper labels. */
.employee-attendance-modal .attendance-log-slot,
.employee-attendance-modal .attendance-slot-card,
.employee-attendance-modal .employee-attendance-slot-card,
.attendance-detail-modal .attendance-log-slot,
.attendance-detail-modal .attendance-slot-card,
.attendance-day-popup .attendance-log-slot,
.attendance-day-popup .attendance-slot-card {
    min-height: 84px !important;
    align-content: center !important;
}

/* Make the time value remain visually centered. */
.employee-attendance-modal .attendance-slot-time,
.employee-attendance-modal .attendance-log-slot-time,
.employee-attendance-modal .employee-attendance-slot-time,
.attendance-detail-modal .attendance-slot-time,
.attendance-detail-modal .attendance-log-slot-time,
.attendance-day-popup .attendance-slot-time,
.attendance-day-popup .attendance-log-slot-time {
    margin-bottom: 0 !important;
}

/* Keep print dialogs above report search, filters, and pagination controls. */
.personnel-print-overlay,
.retirement-print-overlay,
.step-list-print-modal {
    z-index: 20000 !important;
    isolation: isolate;
}

/* 2026-06-24 Desktop sidebar brand cleanup: logo only and non-clickable. */
.brand-link {
    cursor: default;
}

.brand-name {
    display: none;
}

@media (max-width: 720px) {
    .brand-name {
        display: inline-block;
        max-width: 210px;
        color: #087E8C;
        font-size: .84rem;
        font-weight: 500;
        line-height: 1.1;
    }
}

/* Reports print-list panel loading indicator */
.report-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 0 0 .85rem;
    padding: .7rem .95rem;
    color: #0F766E;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .01em;
    background: #ECFDF5;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.report-panel-loading[hidden] {
    display: none !important;
}

.report-panel-loading-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(15, 118, 110, .18);
    border-top-color: #0F766E;
    border-radius: 999px;
    animation: report-panel-loading-spin .8s linear infinite;
}

@keyframes report-panel-loading-spin {
    to { transform: rotate(360deg); }
}

/* Reports submenu navigation: structured full-panel loading treatment. */
.sidebar-navigation-pending .sidebar {
    cursor: wait;
}

/* Delayed, compact feedback for menu navigation; keep the content visible. */
.sidebar .nav-link[data-menu-loading="true"] .nav-icon::before,
.sidebar .nav-link[data-menu-loading="true"] .employee-drawer-icon::before {
    content: "";
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    background: transparent;
    mask-image: none;
    -webkit-mask-image: none;
    animation: sidebar-menu-loading-spin .8s linear infinite;
}

@keyframes sidebar-menu-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .nav-link[data-menu-loading="true"] .nav-icon::before,
    .sidebar .nav-link[data-menu-loading="true"] .employee-drawer-icon::before {
        animation: none;
    }
}

.sidebar-navigation-pending .sidebar .nav-link:not(.active),
.sidebar-navigation-pending .sidebar .nav-reports-toggle {
    opacity: 1;
}

.report-submenu-loading-host {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
}

.report-submenu-loading-host .report-workspace {
    opacity: 0 !important;
    filter: none !important;
    transform: translateZ(0);
    transition: opacity .14s ease;
    pointer-events: none;
    user-select: none;
}

.report-submenu-loading-host > :not(.report-submenu-loading-overlay) {
    filter: none;
    opacity: 0;
    transition: filter .18s ease, opacity .18s ease;
    animation: none;
    pointer-events: none;
    user-select: none;
}

.report-submenu-loading-host .report-header > div:first-child,
.report-submenu-loading-host .report-search-form,
.report-submenu-loading-host .search-toggle-button,
.report-submenu-loading-host .filter-toggle-button,
.report-submenu-loading-host [data-filter-toggle],
.report-submenu-loading-host [data-search-toggle] {
    opacity: 0 !important;
    visibility: hidden !important;
    filter: none !important;
    pointer-events: none !important;
}

.report-submenu-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    min-height: 100%;
    overflow: hidden;
    color: var(--primary, #0F766E);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: none;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    animation: report-submenu-overlay-enter .2s ease-out both;
    cursor: progress;
}

.report-submenu-loading-overlay.is-leaving {
    pointer-events: none;
    animation: report-submenu-overlay-leave .18s ease-in both;
}

.report-submenu-loading-skeleton {
    position: absolute;
    inset: 1rem;
    display: block;
    height: calc(100% - 2rem);
    opacity: .92;
    filter: blur(.45px);
    pointer-events: none;
}

.report-submenu-skeleton-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 1rem;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.report-submenu-skeleton-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.report-submenu-skeleton-titles {
    display: grid;
    gap: .5rem;
    padding-top: .1rem;
}

.report-submenu-skeleton-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.report-submenu-skeleton-box,
.report-submenu-skeleton-line {
    background: #E5E7EB;
    background-size: auto;
    animation: none;
}

.report-submenu-skeleton-line {
    display: block;
    height: 16px;
    border-radius: 999px;
}

.report-submenu-skeleton-box {
    display: inline-block;
    border-radius: 14px;
}

.report-submenu-skeleton-line.is-title {
    width: 210px;
    height: 20px;
}

.report-submenu-skeleton-line.is-count {
    width: 132px;
    height: 15px;
}

.report-submenu-skeleton-box.is-action {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.report-submenu-skeleton-table {
    display: grid;
    grid-template-rows: 48px repeat(12, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .45);
}

.report-submenu-skeleton-table-head,
.report-submenu-skeleton-table-row {
    display: grid;
    grid-template-columns: 42px 90px minmax(220px, 1.45fr) minmax(320px, 2.2fr) 128px 72px 64px;
    align-items: center;
    column-gap: 1.1rem;
    padding: .72rem .95rem;
}

.report-submenu-skeleton-table-head {
    min-height: 0;
    height: 48px;
    border-bottom: 1px solid rgba(148, 163, 184, .55);
    background: rgba(248, 250, 252, .78);
}

.report-submenu-skeleton-table-row {
    min-height: 0;
    height: 100%;
    border-bottom: 1px solid rgba(226, 232, 240, .92);
    background: rgba(255, 255, 255, .56);
    animation: none;
}

.report-submenu-skeleton-table-row:nth-child(2) { animation-delay: 35ms; }
.report-submenu-skeleton-table-row:nth-child(3) { animation-delay: 55ms; }
.report-submenu-skeleton-table-row:nth-child(4) { animation-delay: 75ms; }
.report-submenu-skeleton-table-row:nth-child(5) { animation-delay: 95ms; }
.report-submenu-skeleton-table-row:nth-child(6) { animation-delay: 115ms; }
.report-submenu-skeleton-table-row:nth-child(7) { animation-delay: 135ms; }
.report-submenu-skeleton-table-row:nth-child(8) { animation-delay: 155ms; }
.report-submenu-skeleton-table-row:nth-child(9) { animation-delay: 175ms; }
.report-submenu-skeleton-table-row:nth-child(10) { animation-delay: 195ms; }
.report-submenu-skeleton-table-row:nth-child(11) { animation-delay: 215ms; }
.report-submenu-skeleton-table-row:nth-child(12) { animation-delay: 235ms; }
.report-submenu-skeleton-table-row:nth-child(13) { animation-delay: 255ms; }

.report-submenu-skeleton-table-row:last-child {
    border-bottom: none;
}

.report-submenu-skeleton-table-row.is-highlight {
    background: rgba(241, 245, 249, .92);
}

.report-submenu-skeleton-cell-stack {
    display: grid;
    gap: .42rem;
    min-width: 0;
}

.report-submenu-skeleton-line.is-head,
.report-submenu-skeleton-line.is-cell {
    width: 100%;
    max-width: 100%;
}

.report-submenu-skeleton-line.is-head {
    height: 12px;
    opacity: .92;
}

.report-submenu-skeleton-line.is-cell {
    height: 12px;
}

.report-submenu-skeleton-line.is-col-num { width: 12px; }
.report-submenu-skeleton-line.is-col-id { width: 46px; }
.report-submenu-skeleton-line.is-col-name { width: 128px; }
.report-submenu-skeleton-line.is-col-position { width: 168px; }
.report-submenu-skeleton-line.is-col-date { width: 88px; }
.report-submenu-skeleton-line.is-col-grade { width: 34px; }
.report-submenu-skeleton-line.is-col-action { width: 40px; }

.report-submenu-skeleton-line.is-name-primary { width: 78%; height: 14px; }
.report-submenu-skeleton-line.is-name-secondary { width: 32%; height: 12px; }
.report-submenu-skeleton-line.is-position-primary { width: 66%; height: 14px; }
.report-submenu-skeleton-line.is-position-secondary { width: 48%; height: 12px; }

.report-submenu-skeleton-box.is-row-action {
    width: 34px;
    height: 34px;
    justify-self: center;
    border-radius: 12px;
}

@media (max-width: 1180px) {
    .report-submenu-loading-skeleton {
        inset: .85rem;
    }

    .report-submenu-skeleton-table-head,
    .report-submenu-skeleton-table-row {
        grid-template-columns: 36px 74px minmax(180px, 1.3fr) minmax(240px, 1.8fr) 110px 58px 52px;
        column-gap: .85rem;
        padding: .7rem .8rem;
    }
}

@media (max-width: 900px) {
    .report-submenu-skeleton-top {
        gap: .7rem;
    }

    .report-submenu-skeleton-actions {
        gap: .4rem;
    }

    .report-submenu-skeleton-box.is-action {
        width: 34px;
        height: 34px;
    }

    .report-submenu-skeleton-table-head,
    .report-submenu-skeleton-table-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .45rem;
    }

    .report-submenu-skeleton-table-head .report-submenu-skeleton-line.is-head:not(.is-col-name),
    .report-submenu-skeleton-table-row > .report-submenu-skeleton-line.is-cell:not(.is-col-date):not(.is-col-grade),
    .report-submenu-skeleton-table-row > .report-submenu-skeleton-box.is-row-action {
        display: none;
    }

    .report-submenu-skeleton-line.is-col-name,
    .report-submenu-skeleton-line.is-col-position,
    .report-submenu-skeleton-line.is-col-date,
    .report-submenu-skeleton-line.is-col-grade,
    .report-submenu-skeleton-cell-stack {
        width: 100%;
    }
}

.report-submenu-loading-center {
    position: absolute;
    top: var(--submenu-loader-center-y, 50%);
    left: var(--submenu-loader-center-x, 50%);
    z-index: 1;
    display: grid;
    place-items: center;
    gap: 0;
    min-width: 0;
    padding: 0;
    text-align: center;
    color: var(--primary, #0F766E);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.report-submenu-loading-center strong {
    color: var(--text, #1F2937);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow: none;
}

.report-submenu-loading-copy {
    display: grid;
    gap: .15rem;
}

.report-submenu-loading-copy small {
    color: #64748B;
    font-size: .72rem;
    font-weight: 600;
}

.report-submenu-loading-mark {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
}

.report-submenu-loading-core {
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 50%;
    filter: none;
    animation: report-submenu-core-pulse 1.05s ease-in-out infinite;
}

.report-submenu-loading-orbit {
    position: absolute;
    inset: 5px;
    border: 2px solid transparent;
    border-top-color: #0F766E;
    border-right-color: rgba(20, 184, 166, .35);
    border-radius: 50%;
    animation: report-submenu-orbit-spin 1.1s linear infinite;
}

.report-submenu-loading-orbit.is-two {
    inset: 0;
    border-top-color: transparent;
    border-right-color: #5EEAD4;
    border-bottom-color: rgba(15, 118, 110, .3);
    animation-duration: 1.65s;
    animation-direction: reverse;
}

.report-submenu-loading-progress {
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: #E2E8F0;
    border-radius: 999px;
}

.report-submenu-loading-progress i {
    display: block;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, #2DD4BF, #0F766E);
    border-radius: inherit;
    animation: report-submenu-progress 1.05s ease-in-out infinite;
}

@keyframes report-submenu-overlay-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes report-submenu-content-switch {
    from { opacity: .7; }
    to { opacity: .82; }
}

@keyframes report-submenu-overlay-leave {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes report-submenu-status-enter {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes report-submenu-skeleton-row-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes report-submenu-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes report-submenu-core-pulse {
    0%, 100% {
        opacity: .76;
        filter: drop-shadow(0 2px 3px rgba(15, 118, 110, .08));
        transform: scale(.94);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 8px 14px rgba(15, 118, 110, .28));
        transform: scale(1);
    }
}

@keyframes report-submenu-progress {
    0% { transform: translateX(-115%); }
    55% { transform: translateX(80%); }
    100% { transform: translateX(230%); }
}

@keyframes report-submenu-skeleton-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .report-submenu-loading-overlay,
    .report-submenu-loading-center,
    .report-submenu-loading-core,
    .report-submenu-loading-orbit,
    .report-submenu-loading-progress i,
    .report-submenu-loading-host > :not(.report-submenu-loading-overlay),
    .report-submenu-skeleton-table-row,
    .report-submenu-skeleton-line,
    .report-submenu-skeleton-box {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Print list button fix: keep Print and Cancel aligned in the modal actions. */
.step-list-print-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Print preview toolbar refinement: keep Back/Print beside each other without a full-width gray strip. */
.step-list-print-toolbar {
    width: min(297mm, 100%) !important;
    margin: 0 auto !important;
    padding: .55rem 3mm .35rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

.step-list-print-toolbar::before,
.step-list-print-toolbar::after {
    content: none !important;
    display: none !important;
}

@media print {
    .step-list-print-toolbar {
        display: none !important;
    }
}

/* Print preview toolbar position: keep Back/Print inside the gray right-side preview area, slightly lower. */
.step-list-print-toolbar {
    position: fixed !important;
    top: 106px !important;
    right: clamp(24px, calc((100vw - 210mm) / 8), 64px) !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1200 !important;
}

.step-list-print-toolbar button {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
}

@media (max-width: 900px) {
    .step-list-print-toolbar {
        top: 90px !important;
        right: 12px !important;
    }
}

@media print {
    .step-list-print-toolbar {
        display: none !important;
    }
}



/* Print list preview document zoom: Ctrl + scroll scales only the document, not the app shell or buttons. */
.step-list-print-document.print-preview-zoom-target {
    --print-preview-scale: 1;
    width: calc(297mm * var(--print-preview-scale)) !important;
    max-width: none !important;
    transform-origin: top center !important;
    transition: width 120ms ease-out;
}

.step-list-print-document.print-preview-zoom-target .step-list-print-page {
    transform: scale(var(--print-preview-scale));
    transform-origin: top center;
    transition: transform 120ms ease-out, margin-bottom 120ms ease-out;
}

@media print {
    .step-list-print-document.print-preview-zoom-target {
        width: auto !important;
        max-width: none !important;
    }

    .step-list-print-document.print-preview-zoom-target .step-list-print-page {
        transform: none !important;
        margin-bottom: 0 !important;
    }
}



/* Gender Distribution donut graph animation when Status changes. */
.gender-pie-wrap.is-animating .gender-pie-svg {
    animation: gender-donut-refresh-pop .72s cubic-bezier(.22, .85, .24, 1) both;
}

.gender-pie-wrap.is-animating .gender-slice {
    filter: saturate(1.08) brightness(1.03);
}

.gender-pie-wrap.is-animating .gender-donut-total {
    animation: gender-donut-count-pop .72s cubic-bezier(.22, .85, .24, 1) both;
}

@keyframes gender-donut-refresh-pop {
    0% {
        opacity: .78;
        transform: scale(.965) rotate(-2deg);
    }
    48% {
        opacity: 1;
        transform: scale(1.028) rotate(.7deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes gender-donut-count-pop {
    0% {
        opacity: .55;
        transform: scale(.9);
    }
    55% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gender-pie-wrap.is-animating .gender-pie-svg,
    .gender-pie-wrap.is-animating .gender-donut-total {
        animation: none !important;
    }
}



/* Original Appointments graph animation when the Year dropdown changes. */
.appointments-card.appointments-chart-animating .new-hired-plot {
    animation: appointments-chart-soft-pop .68s cubic-bezier(.22, .85, .24, 1) both;
}

.appointments-card.appointments-chart-animating .month-bar .bar {
    transition:
        height .78s cubic-bezier(.22, .85, .24, 1) var(--appointment-bar-delay, 0ms),
        transform .2s ease,
        filter .2s ease;
    filter: saturate(1.08) brightness(1.02);
}

.appointments-card.appointments-chart-animating .month-labels span {
    animation: appointments-month-fade .58s ease both;
}

@keyframes appointments-chart-soft-pop {
    0% {
        opacity: .72;
        transform: translateY(8px) scale(.985);
    }
    55% {
        opacity: 1;
        transform: translateY(-1px) scale(1.006);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes appointments-month-fade {
    0% {
        opacity: .5;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .appointments-card.appointments-chart-animating .new-hired-plot,
    .appointments-card.appointments-chart-animating .month-labels span {
        animation: none !important;
    }

    .appointments-card.appointments-chart-animating .month-bar .bar {
        transition: none !important;
    }
}



/* Dashboard: remove Recently Filed Leave panel and allow New Entrants to use the full lower row width. */
.dashboard-lower-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.dashboard-lower-grid .records-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Keep the New Entrants headings outside the employee-row scrollbar. */
.dashboard-lower-grid .records-card .table-responsive {
    position: relative;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.dashboard-lower-grid .records-card .new-entrants-table-shell {
    --new-entrants-scrollbar-width: 8px;
}

.dashboard-lower-grid .records-card .new-entrants-header-table,
.dashboard-lower-grid .records-card .new-entrants-table-body > .dashboard-table {
    min-width: 760px;
    table-layout: fixed;
}

.dashboard-lower-grid .records-card .new-entrants-header-table {
    width: calc(100% - var(--new-entrants-scrollbar-width));
}

.dashboard-lower-grid .records-card .new-entrants-table-body {
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: #8A98A8 transparent;
    scrollbar-width: thin;
}

.dashboard-lower-grid .records-card .new-entrants-table-body::-webkit-scrollbar {
    width: var(--new-entrants-scrollbar-width);
}

.dashboard-lower-grid .records-card .new-entrants-table-body::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-lower-grid .records-card .new-entrants-table-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #8A98A8;
    background-clip: padding-box;
}

.new-entrants-table-shell.has-actions .new-entrants-id-column { width: 10%; }
.new-entrants-table-shell.has-actions .new-entrants-name-column { width: 36%; }
.new-entrants-table-shell.has-actions .new-entrants-status-column { width: 20%; }
.new-entrants-table-shell.has-actions .new-entrants-date-column { width: 24%; }
.new-entrants-table-shell.has-actions .new-entrants-action-column { width: 10%; }
.new-entrants-table-shell.without-actions .new-entrants-id-column { width: 12%; }
.new-entrants-table-shell.without-actions .new-entrants-name-column { width: 40%; }
.new-entrants-table-shell.without-actions .new-entrants-status-column { width: 22%; }
.new-entrants-table-shell.without-actions .new-entrants-date-column { width: 26%; }

.dashboard-lower-grid .records-card .new-entrants-header-table th {
    position: static !important;
}

.dashboard-lower-grid .recent-leave-card {
    display: none !important;
}



/* Notification Bell: emphasize employee time-log notifications. */
.notification-item strong:first-child {
    display: block;
}

.notification-item:not(.is-unread) {
    opacity: .86;
}

.notification-badge {
    animation: notification-badge-pop .32s ease-out both;
}

@keyframes notification-badge-pop {
    0% {
        transform: scale(.82);
    }
    60% {
        transform: scale(1.16);
    }
    100% {
        transform: scale(1);
    }
}



/* Employee Payslip inline preview and button-card reset. */
.employee-payslip-inline-preview {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .6rem;
}

button.employee-payslip-latest-card {
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.employee-payslip-latest-card:hover,
button.employee-payslip-latest-card:focus-visible {
    border-color: rgba(15, 118, 110, .42);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .08);
    outline: none;
}



/* Employee Mobile Unified UI base reset */
button.employee-payslip-latest-card,
button.employee-service-record-card {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}



/* Employee Request menu card reset */
.employee-request-menu-card {
    font-family: inherit;
}



/* Employee Request inline card reset */
button.employee-request-menu-card {
    font-family: inherit;
}


/* Employee payroll preview summary flow */
.employee-payroll-preview-shell {
    width: min(440px, 100%);
    display: grid;
    gap: .8rem;
}

.employee-payroll-detail-heading {
    margin-bottom: 0;
}

.employee-payroll-back-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f766e;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}

.employee-payroll-back-button:hover,
.employee-payroll-back-button:focus-visible {
    color: #115e59;
    outline: none;
    text-decoration: underline;
}

.employee-payroll-preview-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #d6e0ea;
    border-radius: 1.5rem;
    background: #eef3f7;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.employee-payroll-stat-list {
    display: grid;
    gap: .8rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #dbe5ed;
}

.employee-payroll-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    color: #0f172a;
}

.employee-payroll-stat-row span {
    font-size: 1.02rem;
    font-weight: 600;
}

.employee-payroll-stat-row strong {
    font-size: 1.02rem;
    font-weight: 800;
    text-align: right;
    color: #111827;
}

.employee-payroll-breakdown {
    border: 1px solid transparent;
    border-radius: 1.35rem;
    overflow: hidden;
}

.employee-payroll-breakdown[open] {
    border-color: rgba(0, 0, 0, .04);
}

.employee-payroll-breakdown summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.employee-payroll-breakdown summary::-webkit-details-marker {
    display: none;
}

.employee-payroll-breakdown-arrow {
    font-size: 1.35rem;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}

.employee-payroll-breakdown[open] .employee-payroll-breakdown-arrow {
    transform: rotate(0deg);
}

.employee-payroll-breakdown-income {
    background: #dfeccd;
    color: #446d24;
}

.employee-payroll-breakdown-deduction {
    background: #f6dbe7;
    color: #c4336e;
}

.employee-payroll-breakdown-body {
    padding: .9rem 1.3rem 1.1rem;
    background: rgba(255, 255, 255, .22);
    border-top: 1px solid rgba(0, 0, 0, .04);
}

.employee-payroll-breakdown h4 {
    margin: .1rem 0 .5rem;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, .72);
}

.employee-payroll-breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .45rem 0;
    color: #111827;
}

.employee-payroll-breakdown-row span,
.employee-payroll-breakdown-row strong {
    font-size: .98rem;
}

.employee-payroll-breakdown-row strong {
    font-weight: 800;
    text-align: right;
}

.employee-payroll-breakdown-empty {
    font-size: .94rem;
    color: #475569;
}

.employee-payroll-preview-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1rem;
    padding-top: .1rem;
}

.employee-payroll-preview-total {
    display: grid;
    gap: .12rem;
}

.employee-payroll-preview-total span {
    font-size: .88rem;
    color: #475569;
    font-weight: 700;
}

.employee-payroll-preview-total strong {
    font-size: 1rem;
    color: #0f172a;
    font-weight: 800;
}

.employee-payroll-preview-total-net strong {
    color: #0f766e;
}

.employee-payroll-preview-actions {
    display: flex;
    justify-content: center;
    padding-top: .1rem;
}

.employee-payroll-download-button {
    min-width: min(280px, 100%);
    border-radius: 999px !important;
    padding: .85rem 1.4rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 20px rgba(15, 118, 110, .15);
}


/* Employee Employment redesigned content cards */
.employee-employment-panel {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid #D7E3E0;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
}

.employee-employment-hero-card {
    display: flex;
    align-items: center;
    gap: .82rem;
    padding: .92rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

.employee-employment-hero-icon {
    position: relative;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #159A8B 0%, #0F766E 100%);
    box-shadow: 0 8px 18px rgba(15, 118, 110, .16);
}

.employee-employment-hero-icon::before {
    content: "";
    width: 1.36rem;
    height: 1.36rem;
    display: block;
    background: #FFFFFF;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M10 12v2h4v-2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M10 12v2h4v-2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.employee-employment-hero-text {
    min-width: 0;
    display: grid;
    gap: .16rem;
}

.employee-employment-hero-text span,
.employee-employment-info-heading h2 {
    margin: 0;
    color: #64748B;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.employee-employment-hero-text strong {
    display: block;
    color: #0F172A;
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -.01em;
    line-height: 1.16;
}

.employee-employment-hero-text small {
    display: block;
    color: #64748B;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.18;
}

.employee-employment-info-group {
    display: grid;
    gap: .58rem;
}

.employee-employment-data-list {
    display: grid;
    gap: .52rem;
}

.employee-employment-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .74rem .82rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 14px;
    background: #FFFFFF;
}

.employee-employment-data-row span {
    color: #64748B;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.22;
}

.employee-employment-data-row strong {
    color: #0F172A;
    font-size: .84rem;
    font-weight: 780;
    line-height: 1.22;
    text-align: right;
}

.employee-employment-money-row strong {
    color: #0F766E;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.employee-employment-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .52rem;
}

.employee-employment-benefit-pill {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: .62rem .5rem;
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 14px;
    background: #ECFDF5;
    color: #0F766E;
}

.employee-employment-benefit-pill span {
    font-size: .78rem;
    font-weight: 780;
    line-height: 1.12;
    text-align: center;
}


/* Salary Adjustment notice print document */
.print-document.salary-adjustment-document {
    page: salary-adjustment-a4;
}

@page salary-adjustment-a4 {
    size: A4 portrait;
    margin: 12mm 14mm;
}

.salary-adjustment-notice-document,
.salary-adjustment-notice-document * {
    box-sizing: border-box;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    color: #000;
}

.salary-adjustment-notice-document {
    width: 100%;
    min-height: calc(297mm - 24mm);
    padding: 0 4mm;
    font-size: 12pt;
    line-height: 1.28;
}

.salary-adjustment-letterhead {
    margin: 0 0 12px;
}

.salary-adjustment-notice-document .si-letterhead-text h4 {
    margin-top: 4px;
}

.sa-title {
    margin: 6px 0 30px;
    text-align: center;
    font-size: 14pt;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.sa-date-block {
    display: grid;
    justify-items: center;
    width: 46mm;
    margin: 0 10mm 24px auto;
    font-size: 12pt;
    line-height: 1.2;
}

.sa-date-block span:first-child {
    font-size: 12pt;
}

.sa-date-block span:last-child {
    font-size: 12pt;
}

.sa-recipient-block {
    display: grid;
    gap: 2px;
    margin: 0 0 28px 0;
    font-size: 12pt;
    line-height: 1.18;
}

.sa-recipient-block strong {
    font-size: 12.5pt;
    font-weight: 800;
    text-transform: uppercase;
}

.sa-recipient-block span {
    display: block;
}

.sa-salutation {
    margin: 0 0 22px;
}

.sa-paragraph {
    margin: 0 0 18px;
}

.sa-justified {
    text-align: justify;
}

.sa-tabbed {
    text-indent: 36px;
}

.sa-adjustment-grid {
    display: grid;
    gap: 16px;
    margin: 0 10mm 24px 14mm;
}

.sa-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34mm;
    gap: 14px;
    align-items: start;
}

.sa-row div {
    display: grid;
    gap: 2px;
}

.sa-indent {
    padding-left: 18px;
}

.sa-row strong {
    display: block;
    text-align: right;
    font-weight: 800;
    text-decoration: underline;
    white-space: nowrap;
}

.sa-understanding {
    margin-top: 8px;
}

.sa-signature {
    width: 52mm;
    margin: 32px 14mm 22px auto;
    text-align: center;
    line-height: 1.22;
}

.sa-signature p {
    margin: 0 0 34px;
}

.sa-signature strong {
    display: block;
    font-weight: 800;
}

.sa-signature span {
    display: block;
    font-size: 12pt;
}

.sa-footer {
    margin: 0;
    font-size: 12pt;
    line-height: 1.35;
}

.sa-footer p {
    margin: 0 0 2px;
}

.sa-footer p:last-child {
    margin-top: 26px;
}


/* Salary Adjustment requested print font sizes */
.salary-adjustment-notice-document .si-letterhead-text p,
.salary-adjustment-notice-document .si-letterhead-text h3,
.salary-adjustment-notice-document .si-letterhead-text h4,
.salary-adjustment-notice-document .sa-date-block,
.salary-adjustment-notice-document .sa-date-block span,
.salary-adjustment-notice-document .sa-recipient-block,
.salary-adjustment-notice-document .sa-recipient-block span,
.salary-adjustment-notice-document .sa-salutation,
.salary-adjustment-notice-document .sa-paragraph,
.salary-adjustment-notice-document .sa-adjustment-grid,
.salary-adjustment-notice-document .sa-row,
.salary-adjustment-notice-document .sa-row strong,
.salary-adjustment-notice-document .sa-signature,
.salary-adjustment-notice-document .sa-signature p,
.salary-adjustment-notice-document .sa-signature strong,
.salary-adjustment-notice-document .sa-signature span,
.salary-adjustment-notice-document .sa-footer,
.salary-adjustment-notice-document .sa-footer * {
    font-size: 12pt !important;
}

.salary-adjustment-notice-document .sa-title {
    font-size: 14pt !important;
}

.salary-adjustment-notice-document .sa-recipient-block strong {
    font-size: 12.5pt !important;
}

@media print {
    .print-document.salary-adjustment-document {
        page: salary-adjustment-a4;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .salary-adjustment-notice-document {
        min-height: 0 !important;
    }
}


/* Salary Adjustment spacing alignment: match Step Increment print rhythm while preserving Salary Adjustment content */
.print-document.salary-adjustment-document {
    width: min(var(--cert-page-width), calc(100vw - 3rem)) !important;
    min-height: var(--cert-page-height) !important;
    padding: var(--cert-page-padding-top)
             var(--cert-page-padding-right)
             var(--cert-page-padding-bottom)
             var(--cert-page-padding-left) !important;
    box-sizing: border-box !important;
}

.print-document.salary-adjustment-document > article,
.print-document.salary-adjustment-document .salary-adjustment-notice-document {
    width: 100% !important;
    max-width: var(--cert-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.salary-adjustment-document .salary-adjustment-notice-document {
    min-height: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

.salary-adjustment-document .salary-adjustment-letterhead {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 120px !important;
    align-items: start !important;
    min-height: 86px !important;
    margin: 0 0 var(--cert-header-bottom-space) !important;
    text-align: center !important;
}

.salary-adjustment-document .salary-adjustment-letterhead img {
    position: static !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    width: 86px !important;
    height: 86px !important;
    justify-self: start !important;
    margin: 0 0 0 120px !important;
    transform: none !important;
    object-fit: contain !important;
}

.salary-adjustment-document .salary-adjustment-letterhead .si-letterhead-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
}

.salary-adjustment-document .salary-adjustment-letterhead .si-letterhead-text p {
    margin: 0 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.salary-adjustment-document .salary-adjustment-letterhead .si-letterhead-text h3 {
    margin: 4px 0 0 !important;
    line-height: 1.25 !important;
}

.salary-adjustment-document .salary-adjustment-letterhead .si-letterhead-text h4 {
    margin: 24px 0 0 !important;
    line-height: 1.25 !important;
}

.salary-adjustment-document .sa-title {
    margin-top: 0 !important;
    margin-bottom: var(--cert-title-bottom-space) !important;
    line-height: 1.15 !important;
}

.salary-adjustment-document .sa-date-block {
    margin: 0 0 8mm auto !important;
}

.salary-adjustment-document .sa-recipient-block {
    margin: 0 0 7mm 0 !important;
    gap: 1px !important;
    line-height: 1.2 !important;
}

.salary-adjustment-document .sa-salutation,
.salary-adjustment-document .sa-paragraph,
.salary-adjustment-document .sa-understanding {
    margin-top: 0 !important;
    margin-bottom: 5mm !important;
}

.salary-adjustment-document .sa-tabbed {
    text-indent: 10mm !important;
}

.salary-adjustment-document .sa-adjustment-grid {
    width: calc(100% - 8mm) !important;
    margin: 0 0 5mm 8mm !important;
    gap: 4.5mm !important;
}

.salary-adjustment-document .sa-row {
    grid-template-columns: minmax(0, 1fr) 36mm !important;
    gap: 12px !important;
    align-items: start !important;
}

.salary-adjustment-document .sa-row div {
    gap: 1px !important;
    line-height: 1.22 !important;
}

.salary-adjustment-document .sa-indent {
    padding-left: 10mm !important;
}

.salary-adjustment-document .sa-signature {
    width: 52mm !important;
    margin: 5mm 14mm 7mm auto !important;
    line-height: 1.2 !important;
}

.salary-adjustment-document .sa-signature p {
    margin: 0 0 9mm !important;
}

.salary-adjustment-document .sa-footer {
    margin-top: 0 !important;
    line-height: 1.35 !important;
}

.salary-adjustment-document .sa-footer p:last-child {
    margin-top: 5mm !important;
}

@media print {
    .print-document.salary-adjustment-document {
        width: var(--cert-page-width) !important;
        min-width: var(--cert-page-width) !important;
        min-height: var(--cert-page-height) !important;
        margin: 0 !important;
        padding: var(--cert-page-padding-top)
                 var(--cert-page-padding-right)
                 var(--cert-page-padding-bottom)
                 var(--cert-page-padding-left) !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .print-document.salary-adjustment-document > article,
    .print-document.salary-adjustment-document .salary-adjustment-notice-document {
        width: 100% !important;
        max-width: var(--cert-content-width) !important;
        min-height: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}


/* Salary Adjustment final vertical rhythm: align to current Step Increment notice preview */
.salary-adjustment-document .sa-salutation {
    margin-bottom: 7mm !important;
}

.salary-adjustment-document .sa-adjustment-grid {
    display: grid !important;
    grid-template-rows: repeat(3, 13mm) !important;
    gap: 0 !important;
    margin: 0 0 5mm 8mm !important;
}

.salary-adjustment-document .sa-row {
    min-height: 13mm !important;
    align-items: start !important;
}

.salary-adjustment-document .sa-understanding {
    margin-top: 7mm !important;
    margin-bottom: 0 !important;
}

.salary-adjustment-document .sa-signature {
    margin-top: var(--cert-signature-top-space) !important;
    margin-bottom: 7mm !important;
}

.salary-adjustment-document .sa-signature p {
    margin-bottom: 9mm !important;
}


/* Final margin sync: Salary Adjustment should use the same page margins/rhythm as Step Increment */
.print-document.salary-adjustment-document {
    page: auto !important;
}

.salary-adjustment-document .salary-adjustment-letterhead {
    margin-top: 4mm !important;
    margin-bottom: var(--cert-header-bottom-space) !important;
}

.salary-adjustment-document .sa-title {
    margin: 0 0 9mm !important;
}

.salary-adjustment-document .sa-date-block {
    width: 46mm !important;
    margin: 0 0 8mm auto !important;
}

.salary-adjustment-document .sa-recipient-block {
    margin-bottom: 7mm !important;
}

.salary-adjustment-document .sa-salutation,
.salary-adjustment-document .sa-paragraph {
    margin-bottom: 5mm !important;
}

.salary-adjustment-document .sa-understanding {
    margin-top: 0 !important;
    margin-bottom: 5mm !important;
}

.salary-adjustment-document .sa-adjustment-grid {
    width: calc(100% - 8mm) !important;
    margin: 0 0 5mm 8mm !important;
}

.salary-adjustment-document .sa-row {
    grid-template-columns: minmax(0, 1fr) 34mm !important;
}

.salary-adjustment-document .sa-signature {
    width: 52mm !important;
    margin-top: 5mm !important;
    margin-right: 0 !important;
    margin-bottom: 7mm !important;
    margin-left: auto !important;
}

.salary-adjustment-document .sa-footer {
    margin: 0 !important;
}

@media print {
    .print-document.salary-adjustment-document {
        page: auto !important;
        width: var(--cert-page-width) !important;
        min-width: var(--cert-page-width) !important;
        min-height: var(--cert-page-height) !important;
        margin: 0 !important;
        padding: var(--cert-page-padding-top)
                 var(--cert-page-padding-right)
                 var(--cert-page-padding-bottom)
                 var(--cert-page-padding-left) !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .print-document.salary-adjustment-document > article,
    .print-document.salary-adjustment-document .salary-adjustment-notice-document {
        width: 100% !important;
        max-width: var(--cert-content-width) !important;
        min-height: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .salary-adjustment-document .salary-adjustment-letterhead {
        margin-top: 4mm !important;
        margin-bottom: var(--cert-header-bottom-space) !important;
    }

    .salary-adjustment-document .sa-title {
        margin: 0 0 9mm !important;
    }

    .salary-adjustment-document .sa-date-block {
        margin: 0 0 8mm auto !important;
    }

    .salary-adjustment-document .sa-recipient-block {
        margin-bottom: 7mm !important;
    }

    .salary-adjustment-document .sa-salutation,
    .salary-adjustment-document .sa-paragraph,
    .salary-adjustment-document .sa-understanding {
        margin-bottom: 5mm !important;
    }

    .salary-adjustment-document .sa-understanding {
        margin-top: 0 !important;
    }

    .salary-adjustment-document .sa-adjustment-grid {
        width: calc(100% - 8mm) !important;
        margin: 0 0 5mm 8mm !important;
    }

    .salary-adjustment-document .sa-signature {
        width: 52mm !important;
        margin-top: 5mm !important;
        margin-right: 0 !important;
        margin-bottom: 7mm !important;
        margin-left: auto !important;
    }
}


/* Salary Adjustment final typography verification and signatory alignment */
.salary-adjustment-notice-document {
    font-size: 12pt !important;
}

.salary-adjustment-notice-document .si-letterhead-text p,
.salary-adjustment-notice-document .si-letterhead-text h3,
.salary-adjustment-notice-document .si-letterhead-text h4,
.salary-adjustment-notice-document .sa-date-block,
.salary-adjustment-notice-document .sa-date-block span,
.salary-adjustment-notice-document .sa-recipient-block,
.salary-adjustment-notice-document .sa-recipient-block span,
.salary-adjustment-notice-document .sa-salutation,
.salary-adjustment-notice-document .sa-paragraph,
.salary-adjustment-notice-document .sa-adjustment-grid,
.salary-adjustment-notice-document .sa-row,
.salary-adjustment-notice-document .sa-row div,
.salary-adjustment-notice-document .sa-row div span,
.salary-adjustment-notice-document .sa-row strong,
.salary-adjustment-notice-document .sa-signature,
.salary-adjustment-notice-document .sa-signature p,
.salary-adjustment-notice-document .sa-signature strong,
.salary-adjustment-notice-document .sa-signature span,
.salary-adjustment-notice-document .sa-footer,
.salary-adjustment-notice-document .sa-footer * {
    font-size: 12pt !important;
}

.salary-adjustment-notice-document .sa-title {
    font-size: 14pt !important;
}

.salary-adjustment-notice-document .sa-recipient-block strong {
    font-size: 12.5pt !important;
}

.salary-adjustment-document .sa-signature {
    text-align: left !important;
}

.salary-adjustment-document .sa-signature p,
.salary-adjustment-document .sa-signature strong,
.salary-adjustment-document .sa-signature span {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

@media print {
    .salary-adjustment-notice-document {
        font-size: 12pt !important;
    }

    .salary-adjustment-notice-document .sa-title {
        font-size: 14pt !important;
    }

    .salary-adjustment-notice-document .sa-recipient-block strong {
        font-size: 12.5pt !important;
    }

    .salary-adjustment-document .sa-signature,
    .salary-adjustment-document .sa-signature p,
    .salary-adjustment-document .sa-signature strong,
    .salary-adjustment-document .sa-signature span {
        text-align: left !important;
    }
}


/* Print preview scroll fix: keep standalone report pages scrollable on screen */
html:has(.print-only-layout),
body:has(.print-only-layout) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body:has(.print-only-layout).has-modal-open {
    overflow-y: auto !important;
}

.print-only-layout {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

.print-only-layout .print-page {
    min-height: calc(100vh - 72px) !important;
    height: auto !important;
    overflow: visible !important;
    align-items: flex-start !important;
}

.print-only-layout .print-document,
.print-only-layout .print-document.salary-adjustment-document,
.print-only-layout .salary-adjustment-notice-document {
    overflow: visible !important;
    max-height: none !important;
}

/* Salary Adjustment signatory alignment: center all signatory lines under the mayor name */
.salary-adjustment-document .sa-signature {
    text-align: center !important;
    display: grid !important;
    justify-items: center !important;
}

.salary-adjustment-document .sa-signature p,
.salary-adjustment-document .sa-signature strong,
.salary-adjustment-document .sa-signature span {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

@media print {
    html:has(.print-only-layout),
    body:has(.print-only-layout),
    .print-only-layout,
    .print-only-layout .print-page,
    .print-only-layout .print-document,
    .print-only-layout .print-document.salary-adjustment-document,
    .print-only-layout .salary-adjustment-notice-document {
        overflow: visible !important;
        max-height: none !important;
    }
}


/* Salary Adjustment Annex settings panel */
.report-filter-actions-stacked {
    align-items: flex-start;
}

.salary-annex-settings-trigger {
    margin-bottom: 8px;
}

.salary-annex-gear {
    font-size: 18px;
    line-height: 1;
}

.salary-annex-settings-panel {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid #d7e0ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.salary-annex-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.salary-annex-settings-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #10203a;
}

.salary-annex-settings-header p {
    margin: 4px 0 0;
    color: #64748b;
}

.salary-annex-settings-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
}

.salary-annex-list-panel,
.salary-annex-editor-panel {
    min-width: 0;
}

.salary-annex-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.salary-annex-list-item {
    display: grid;
    width: 100%;
    gap: 4px;
    margin-bottom: 8px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid #d7e0ea;
    border-radius: 14px;
    background: #f8fafc;
    color: #10203a;
}

.salary-annex-list-item.is-selected,
.salary-annex-list-item:hover,
.salary-annex-list-item:focus-visible {
    border-color: #0f766e;
    background: #eefbf8;
}

.salary-annex-list-item span {
    font-weight: 800;
}

.salary-annex-list-item small {
    color: #64748b;
}

.salary-annex-list-item[hidden] {
    display: none !important;
}

.salary-annex-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.salary-annex-editor-grid label {
    display: grid;
    gap: 5px;
    font-weight: 700;
    color: #344258;
}

.salary-annex-editor-grid label.wide,
.salary-annex-active-check {
    grid-column: 1 / -1;
}

.salary-annex-editor-grid label > span {
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.salary-annex-active-check {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    padding: 10px 12px;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    background: #f8fafc;
}

.salary-annex-table-wrap {
    max-height: 540px;
    overflow: auto;
    border: 1px solid #d7e0ea;
    border-radius: 16px;
    background: #fff;
}

.salary-annex-rate-table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
}

.salary-annex-rate-table th,
.salary-annex-rate-table td {
    padding: 8px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    white-space: nowrap;
}

.salary-annex-rate-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f5f9;
    font-weight: 800;
}

.salary-annex-rate-table tbody th {
    left: 0;
    z-index: 1;
    background: #f8fafc;
}

.salary-annex-rate-table input {
    width: 92px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    text-align: right;
}

.salary-annex-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .salary-annex-settings-layout {
        grid-template-columns: 1fr;
    }

    .salary-annex-editor-grid {
        grid-template-columns: 1fr;
    }
}


/* Salary Adjustment settings action: placed outside the search/filter button group */
.report-header.has-salary-annex-settings {
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    align-items: start !important;
}

.report-header.has-salary-annex-settings .salary-annex-settings-toolbar {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 0 .35rem !important;
    position: relative !important;
    z-index: 3 !important;
}

.salary-annex-settings-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    min-height: 38px !important;
    padding: .45rem .85rem !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 13px !important;
    background: #FFFFFF !important;
    color: #0F766E !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

.salary-annex-settings-link:hover,
.salary-annex-settings-link:focus {
    border-color: rgba(15, 118, 110, .38) !important;
    color: #0F766E !important;
    text-decoration: none !important;
}

.salary-annex-settings-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #0F766E !important;
}

.report-header.has-salary-annex-settings .report-search-form {
    display: contents !important;
}

.report-header.has-salary-annex-settings .search-composer {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
}

.report-header.has-salary-annex-settings .filter-actions {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
}

.report-header.has-salary-annex-settings .filter-slide-panel {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

.report-filter-actions-stacked {
    align-items: center !important;
}

@media (max-width: 900px) {
    .report-header.has-salary-annex-settings {
        grid-template-columns: 1fr auto !important;
    }

    .report-header.has-salary-annex-settings .salary-annex-settings-toolbar {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    .report-header.has-salary-annex-settings .search-composer {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .report-header.has-salary-annex-settings .filter-actions {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .report-header.has-salary-annex-settings .filter-slide-panel {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
    }
}


/* Salary Adjustment settings: keep button outside the report panel and open settings in its own panel */
.salary-annex-settings-outside-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
    padding: 0 2px;
}

.salary-annex-settings-outside-toolbar .salary-annex-settings-link {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #d9e3ee;
    background: #ffffff;
    color: #475569;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.salary-annex-settings-outside-toolbar .salary-annex-settings-link:hover,
.salary-annex-settings-outside-toolbar .salary-annex-settings-link:focus {
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.12);
}

.salary-annex-settings-standalone-panel {
    margin: 0 0 14px !important;
    padding: 18px !important;
}

.report-header .salary-annex-settings-toolbar {
    display: none !important;
}

.report-header.has-salary-annex-settings,
.report-header.has-salary-annex-settings .report-search-form {
    display: flex !important;
}

.report-header.has-salary-annex-settings .report-search-form {
    align-items: flex-start !important;
}

@media (max-width: 768px) {
    .salary-annex-settings-outside-toolbar {
        justify-content: stretch;
    }

    .salary-annex-settings-outside-toolbar .salary-annex-settings-link {
        width: 100%;
        justify-content: center;
    }
}


/* Salary Adjustment settings: align with Reports heading and keep outside report panel */
.reports-heading-with-settings {
    align-items: flex-start;
}

.reports-heading-with-settings .salary-annex-settings-heading-link {
    flex: 0 0 auto;
    margin-top: 0;
}

.salary-annex-settings-outside-toolbar {
    display: none !important;
}

.salary-annex-settings-heading-link,
a.salary-annex-settings-heading-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d7e0ea;
    border-radius: 14px;
    background: #ffffff;
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.salary-annex-settings-heading-link:hover,
.salary-annex-settings-heading-link:focus-visible {
    color: #0b5f59;
    border-color: #9ccbc5;
    background: #f7fffd;
    text-decoration: none;
}

.salary-annex-settings-panel.salary-annex-settings-standalone-panel {
    margin-top: 0;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .reports-heading-with-settings {
        align-items: flex-start;
    }

    .reports-heading-with-settings .salary-annex-settings-heading-link {
        align-self: flex-start;
    }
}


/* Salary Adjustment settings as popup modal, outside the report panel flow */
.reports-heading-with-settings {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.salary-annex-settings-heading-link,
button.salary-annex-settings-heading-link {
    appearance: none !important;
    border: 1px solid #d7e0ea !important;
    cursor: pointer !important;
}

.salary-annex-settings-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
}

.salary-annex-settings-backdrop {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(3px) !important;
    cursor: default !important;
}

.salary-annex-settings-popup-panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(1280px, calc(100vw - 64px)) !important;
    max-height: calc(100vh - 64px) !important;
    margin: 0 !important;
    overflow: auto !important;
    padding: 20px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28) !important;
}

.salary-annex-settings-popup-panel .salary-annex-settings-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    padding-bottom: 12px !important;
    background: #ffffff !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap {
    max-height: min(50vh, 540px) !important;
}

.salary-annex-settings-popup-panel .salary-annex-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    padding-top: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), #ffffff 42%) !important;
}

@media (max-width: 900px) {
    .salary-annex-settings-modal {
        align-items: flex-start !important;
        padding: 18px !important;
    }

    .salary-annex-settings-popup-panel {
        width: calc(100vw - 36px) !important;
        max-height: calc(100vh - 36px) !important;
    }

    .salary-annex-settings-layout {
        grid-template-columns: 1fr !important;
    }
}


/* Salary Adjustment settings popup cleanup: remove list-panel overlap and keep modal above all report content */
.salary-annex-settings-modal {
    z-index: 2147483000 !important;
}

.salary-annex-settings-backdrop {
    z-index: 0 !important;
}

.salary-annex-settings-popup-panel {
    z-index: 1 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Salary Adjustment Annex settings cleanup: compact table and simplified header */
.salary-annex-settings-popup-panel .salary-annex-settings-header h3 {
    margin-bottom: 0 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap {
    max-height: 520px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table {
    min-width: 760px !important;
    font-size: 12px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table th,
.salary-annex-settings-popup-panel .salary-annex-rate-table td {
    padding: 5px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table input {
    width: 76px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table thead th:first-child,
.salary-annex-settings-popup-panel .salary-annex-rate-table tbody th {
    width: 52px !important;
    min-width: 52px !important;
}


/* Salary Adjustment Annex popup: compressed header fields and cleaner scroll area */
.salary-annex-settings-popup-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: calc(100vh - 48px) !important;
    padding: 16px !important;
}

.salary-annex-settings-popup-panel .salary-annex-settings-header {
    flex: 0 0 auto !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}

.salary-annex-settings-popup-panel .salary-annex-settings-header h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
}

.salary-annex-settings-popup-panel .salary-annex-settings-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 14px !important;
}

.salary-annex-settings-popup-panel .salary-annex-list-panel {
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 3px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 transparent !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-panel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 1.8fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(150px, .8fr) !important;
    gap: 7px 10px !important;
    margin-bottom: 8px !important;
    align-items: end !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid label {
    gap: 3px !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid label > span {
    font-size: 11px !important;
    line-height: 1.1 !important;
    letter-spacing: .015em !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid .form-control {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.salary-annex-settings-popup-panel .salary-annex-active-check {
    grid-column: 1 / -1 !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.salary-annex-settings-popup-panel .salary-annex-active-check span {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap {
    flex: 1 1 auto !important;
    min-height: 270px !important;
    max-height: none !important;
    overflow: auto !important;
    border-radius: 14px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
    scrollbar-gutter: stable both-edges !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap::-webkit-scrollbar,
.salary-annex-settings-popup-panel .salary-annex-list-panel::-webkit-scrollbar {
    width: 9px !important;
    height: 9px !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap::-webkit-scrollbar-track,
.salary-annex-settings-popup-panel .salary-annex-list-panel::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 999px !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap::-webkit-scrollbar-thumb,
.salary-annex-settings-popup-panel .salary-annex-list-panel::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 999px !important;
    border: 2px solid #f1f5f9 !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table {
    min-width: 700px !important;
    font-size: 11px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table th,
.salary-annex-settings-popup-panel .salary-annex-rate-table td {
    padding: 4px 5px !important;
    font-size: 11px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table input {
    width: 68px !important;
    min-height: 25px !important;
    padding: 3px 5px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table thead th:first-child,
.salary-annex-settings-popup-panel .salary-annex-rate-table tbody th {
    width: 42px !important;
    min-width: 42px !important;
}

.salary-annex-settings-popup-panel .salary-annex-actions {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

@media (max-width: 1100px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .salary-annex-settings-popup-panel {
        overflow: auto !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-settings-layout {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-panel {
        overflow: visible !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-grid {
        grid-template-columns: 1fr !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-table-wrap {
        max-height: 50vh !important;
    }
}

/* Salary Adjustment annex slider + save submit fix */
.salary-annex-active-switch,
.salary-annex-settings-popup-panel .salary-annex-active-switch {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
}

.salary-annex-active-switch .salary-annex-active-label {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.015em !important;
    text-transform: uppercase !important;
    color: #344258 !important;
    font-weight: 700 !important;
}

.salary-annex-toggle-wrap {
    position: relative !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.salary-annex-toggle-wrap > input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.salary-annex-toggle-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    transition: background-color 0.2s ease !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
}

.salary-annex-toggle-slider::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
    transition: transform 0.2s ease !important;
}

.salary-annex-toggle-wrap > input[type="checkbox"]:checked + .salary-annex-toggle-slider {
    background: #0f766e !important;
}

.salary-annex-toggle-wrap > input[type="checkbox"]:checked + .salary-annex-toggle-slider::after {
    transform: translateX(22px) !important;
}

.salary-annex-toggle-wrap > input[type="checkbox"]:focus-visible + .salary-annex-toggle-slider {
    outline: 2px solid rgba(15, 118, 110, 0.35) !important;
    outline-offset: 2px !important;
}

.salary-annex-settings-popup-panel .salary-annex-actions .btn {
    min-width: 132px !important;
}

/* Salary Annex: active/current-date sliders and notice reference fields on one compact row */
.salary-annex-settings-popup-panel .salary-annex-switch-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(150px, .75fr) minmax(140px, .85fr) minmax(150px, .85fr) minmax(170px, .8fr) minmax(150px, .85fr) !important;
    gap: 8px !important;
    align-items: end !important;
}

.salary-annex-settings-popup-panel .salary-annex-switch-row .salary-annex-active-switch,
.salary-annex-settings-popup-panel .salary-annex-switch-row .salary-annex-executive-field,
.salary-annex-settings-popup-panel .salary-annex-switch-row .salary-annex-notice-date-field {
    grid-column: auto !important;
    min-height: 32px !important;
    margin: 0 !important;
}

.salary-annex-settings-popup-panel .salary-annex-switch-row .salary-annex-active-switch {
    padding: 5px 9px !important;
}

.salary-annex-settings-popup-panel .salary-annex-executive-field,
.salary-annex-settings-popup-panel .salary-annex-notice-date-field {
    display: grid !important;
    gap: 3px !important;
    font-weight: 700 !important;
    color: #344258 !important;
}

.salary-annex-settings-popup-panel .salary-annex-executive-field > span,
.salary-annex-settings-popup-panel .salary-annex-notice-date-field > span {
    font-size: 11px !important;
    line-height: 1.1 !important;
    letter-spacing: .015em !important;
    text-transform: uppercase !important;
}

.salary-annex-settings-popup-panel .salary-annex-notice-date-field .form-control:disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

@media (max-width: 1200px) {
    .salary-annex-settings-popup-panel .salary-annex-switch-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-switch-row {
        grid-template-columns: 1fr !important;
    }
}

/* Salary Adjustment annex settings: floating labels, softer typography, and active annex at top-right */
.salary-annex-settings-popup-panel .salary-annex-editor-grid {
    grid-template-columns: minmax(240px, 1.55fr) minmax(170px, .85fr) minmax(170px, .85fr) minmax(170px, .85fr) !important;
    gap: 10px 12px !important;
    align-items: end !important;
}

.salary-annex-settings-popup-panel .salary-annex-field {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    padding-top: .55rem !important;
}

.salary-annex-settings-popup-panel .salary-annex-field > span {
    position: absolute !important;
    top: 0 !important;
    left: .7rem !important;
    z-index: 2 !important;
    max-width: calc(100% - 1.4rem) !important;
    padding: 0 .28rem !important;
    background: #ffffff !important;
    color: #0F766E !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
}

.salary-annex-settings-popup-panel .salary-annex-field .form-control {
    min-height: 40px !important;
    height: 40px !important;
    padding: .88rem .85rem .34rem !important;
    border-radius: 12px !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
}

.salary-annex-settings-popup-panel .salary-annex-field:focus-within > span {
    color: #0F766E !important;
}

.salary-annex-settings-popup-panel .salary-annex-meta-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto !important;
    gap: 10px 12px !important;
    align-items: end !important;
}

.salary-annex-settings-popup-panel .salary-annex-active-switch {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: end !important;
    min-width: 210px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.salary-annex-settings-popup-panel .salary-annex-active-switch .salary-annex-active-label {
    margin: 0 !important;
    color: #475569 !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.salary-annex-settings-popup-panel .salary-annex-toggle-wrap {
    width: 48px !important;
    min-width: 48px !important;
    height: 28px !important;
}

.salary-annex-settings-popup-panel .salary-annex-settings-header h3,
.salary-annex-settings-popup-panel .salary-annex-list-heading strong {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (max-width: 1100px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-meta-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-active-switch {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid,
    .salary-annex-settings-popup-panel .salary-annex-meta-row {
        grid-template-columns: 1fr !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-active-switch {
        min-width: 0 !important;
    }
}


/* Salary Adjustment Annex settings: balanced field grid
   - Annex label is the only expanding field.
   - Budget Circular No., Budget Circular Date, Executive Order No., Executive Order Date, Effective Date, and Active Annex share the same width.
   - Budget Circular No. aligns with Effective Date.
   - Budget Circular Date aligns with Active Annex.
   - Annex label aligns with Executive Order No. */
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced {
    --salary-annex-balanced-field-width: clamp(190px, 14.5vw, 212px);
    display: grid !important;
    grid-template-columns:
        var(--salary-annex-balanced-field-width)
        var(--salary-annex-balanced-field-width)
        minmax(0, 1fr)
        var(--salary-annex-balanced-field-width)
        var(--salary-annex-balanced-field-width) !important;
    gap: 10px 12px !important;
    align-items: end !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
    display: contents !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-label-field {
    grid-column: 1 / 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-number-field {
    grid-column: 4 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-date-field {
    grid-column: 5 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(1) {
    grid-column: 1 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(2) {
    grid-column: 2 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-effectivity-field {
    grid-column: 4 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    grid-column: 5 !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-number-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-date-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-effectivity-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-active-switch {
    height: 40px !important;
    min-height: 40px !important;
    align-self: end !important;
}

@media (max-width: 1180px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-label-field {
        grid-column: 1 / -1 !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-number-field,
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-date-field,
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field,
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-effectivity-field,
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced {
        grid-template-columns: 1fr !important;
    }
}

/* Salary Adjustment Annex settings: force inner controls to follow their balanced grid cells. */
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-field .form-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Salary Adjustment Annex settings: lower row sizing pass.
   Keep the top row untouched for now. Make Executive Order No., Executive Order Date,
   Effective Date, and Active Annex four equal-width controls with no blank middle gap. */
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced {
    --salary-annex-lower-field-width: clamp(190px, 14.5vw, 212px);
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, var(--salary-annex-lower-field-width))) !important;
    gap: 10px 12px !important;
    align-items: end !important;
    justify-content: start !important;
    width: max-content !important;
    max-width: 100% !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(1),
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(2),
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-effectivity-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four .salary-annex-field .form-control,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four .salary-annex-active-switch {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    height: 40px !important;
    min-height: 40px !important;
    align-self: end !important;
}

@media (max-width: 1180px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
}

/* Salary Adjustment Annex settings: lower row full-width equal controls.
   Stretch Executive Order No., Executive Order Date, Effective Date, and Active Annex across the full editor width. */
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    align-items: end !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(1),
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(2),
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-effectivity-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four .salary-annex-field .form-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    height: 40px !important;
    min-height: 40px !important;
    align-self: end !important;
}

@media (max-width: 1180px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
}



/* Salary Adjustment Annex settings: top Budget Circular controls match Active Annex width
   The editor now uses four equal columns. Annex label spans the first two columns.
   Budget Circular No., Budget Circular Date, Executive Order No., Executive Order Date,
   Effective Date, and Active Annex all resolve to the same column width. */
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    align-items: end !important;
    width: 100% !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-label-field {
    grid-column: 1 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-number-field {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-date-field {
    grid-column: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    align-items: end !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(1),
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-executive-field:nth-child(2),
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-effectivity-field,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-field .form-control,
.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four .salary-annex-field .form-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row-four > .salary-annex-active-switch {
    height: 40px !important;
    min-height: 40px !important;
    align-self: end !important;
}

@media (max-width: 1180px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-label-field {
        grid-column: 1 / -1 !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-number-field,
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-budget-date-field {
        grid-column: auto !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced,
    .salary-annex-settings-popup-panel .salary-annex-editor-grid.salary-annex-editor-grid-balanced .salary-annex-meta-row.salary-annex-meta-row-four {
        grid-template-columns: 1fr !important;
    }
}

/* Salary Adjustment Annex settings: enhanced save notification and action buttons. */
.salary-annex-settings-popup-panel .salary-annex-actions.salary-annex-actions-enhanced {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 54px !important;
}

.salary-annex-settings-popup-panel .salary-annex-action-status {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.salary-annex-settings-popup-panel .salary-annex-save-toast {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    padding: 9px 13px !important;
    border: 1px solid #A7F3D0 !important;
    border-radius: 999px !important;
    background: #ECFDF5 !important;
    color: #065F46 !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    animation: salaryAnnexSaveToastFade 4.2s ease forwards !important;
}

.salary-annex-settings-popup-panel .salary-annex-save-toast::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0F766E;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, .12);
}

@keyframes salaryAnnexSaveToastFade {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    12%,
    72% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

.salary-annex-settings-popup-panel .salary-annex-action-buttons {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.salary-annex-settings-popup-panel .salary-annex-action-buttons .btn {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.salary-annex-settings-popup-panel .salary-annex-import-button {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.salary-annex-settings-popup-panel .salary-annex-import-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.salary-annex-settings-popup-panel .salary-annex-template-icon-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-inline: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.salary-annex-settings-popup-panel .salary-annex-template-icon-button .lucide-icon {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
}

@media (max-width: 760px) {
    .salary-annex-settings-popup-panel .salary-annex-actions.salary-annex-actions-enhanced {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .salary-annex-settings-popup-panel .salary-annex-action-status,
    .salary-annex-settings-popup-panel .salary-annex-action-buttons {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* Salary Annex action buttons: keep the template download as icon-only despite older button min-width rules. */
.salary-annex-settings-popup-panel .salary-annex-actions.salary-annex-actions-enhanced .salary-annex-template-icon-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Salary Adjustment Annex settings: make list items safe normal links so New/switch works before any save. */
.salary-annex-settings-popup-panel a.salary-annex-list-item {
    text-decoration: none !important;
    cursor: pointer;
}

.salary-annex-settings-popup-panel a.salary-annex-list-item:hover,
.salary-annex-settings-popup-panel a.salary-annex-list-item:focus-visible {
    color: #10203a;
    text-decoration: none !important;
}

/* Salary annex import/cell visibility final fix */
.salary-annex-settings-popup-panel .salary-annex-import-picker {
    position: relative !important;
    overflow: hidden !important;
}

.salary-annex-settings-popup-panel .salary-annex-import-picker .salary-annex-import-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table {
    min-width: 1160px !important;
    table-layout: fixed !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table th,
.salary-annex-settings-popup-panel .salary-annex-rate-table td {
    padding: 5px 7px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table thead th:first-child,
.salary-annex-settings-popup-panel .salary-annex-rate-table tbody th {
    width: 58px !important;
    min-width: 58px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table input,
.salary-annex-settings-popup-panel .salary-annex-rate-table .salary-annex-rate-input {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    text-align: right !important;
    box-sizing: border-box !important;
}


/* Salary annex import: show full salary values in the grid inputs. */
.salary-annex-settings-popup-panel .salary-annex-rate-table input[type=number],
.salary-annex-settings-popup-panel .salary-annex-rate-table .salary-annex-rate-input {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding-right: 10px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table input[type=number]::-webkit-outer-spin-button,
.salary-annex-settings-popup-panel .salary-annex-rate-table input[type=number]::-webkit-inner-spin-button {
    margin: 0 !important;
}

/* Salary annex import JS fallback and compact no-horizontal-scroll rate grid. */
.salary-annex-settings-popup-panel .salary-annex-import-native-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.salary-annex-settings-popup-panel .salary-annex-table-wrap {
    overflow-x: hidden !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table th,
.salary-annex-settings-popup-panel .salary-annex-rate-table td {
    padding: 3px 4px !important;
    min-width: 0 !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table thead th:first-child,
.salary-annex-settings-popup-panel .salary-annex-rate-table tbody th {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table input,
.salary-annex-settings-popup-panel .salary-annex-rate-table .salary-annex-rate-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 3px 4px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    text-align: right !important;
    box-sizing: border-box !important;
}

.salary-annex-settings-popup-panel .salary-annex-js-toast.is-error {
    color: #991b1b !important;
    border-color: rgba(220, 38, 38, .28) !important;
    background: #fef2f2 !important;
}


/* Salary Annex grid: compact full-width cells without horizontal scrolling. */
.salary-annex-settings-popup-panel .salary-annex-table-wrap {
    overflow-x: hidden !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table thead th:first-child,
.salary-annex-settings-popup-panel .salary-annex-rate-table tbody th {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table th,
.salary-annex-settings-popup-panel .salary-annex-rate-table td {
    padding: 3px 3px !important;
    min-width: 0 !important;
}

.salary-annex-settings-popup-panel .salary-annex-rate-table input,
.salary-annex-settings-popup-panel .salary-annex-rate-table .salary-annex-rate-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 27px !important;
    padding: 3px 3px !important;
    font-size: 11px !important;
    letter-spacing: -0.15px !important;
    text-align: right !important;
    box-sizing: border-box !important;
}

/* Salary Adjustment print list dialog and print layout */
.salary-adjustment-list-print-dialog {
    width: min(560px, 100%) !important;
}

.salary-adjustment-print-options-grid {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.salary-adjustment-print-options-grid .form-select,
.salary-adjustment-print-options-grid .form-control {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
}

.salary-adjustment-date-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
    margin-top: 0.15rem;
}

.salary-adjustment-date-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 40px;
    padding: 0.45rem 0.65rem;
    border: 1px solid #d7e4ef;
    border-radius: 12px;
    background: #f8fbfd;
    color: #334155;
    font-weight: 700;
}

.salary-adjustment-custom-date-field {
    display: grid;
    gap: 0.25rem;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 700;
}

.salary-adjustment-custom-date-field.is-disabled {
    opacity: 0.58;
}

.salary-adjustment-list-print-document .step-list-print-page {
    padding-bottom: 13mm;
}

.salary-adjustment-list-subtitle {
    margin: -1mm 0 3mm;
    text-align: center;
    font-family: "Times New Roman", serif;
    font-size: 10pt;
}

.salary-adjustment-list-print-table {
    table-layout: fixed !important;
    font-size: 8pt !important;
}

.salary-adjustment-list-print-table th,
.salary-adjustment-list-print-table td {
    padding: 1.1mm 1mm !important;
    vertical-align: middle !important;
}

.salary-adjustment-list-print-table th:nth-child(1),
.salary-adjustment-list-print-table td:nth-child(1) { width: 7mm !important; text-align: center; }
.salary-adjustment-list-print-table th:nth-child(2),
.salary-adjustment-list-print-table td:nth-child(2) { width: 43mm !important; }
.salary-adjustment-list-print-table th:nth-child(3),
.salary-adjustment-list-print-table td:nth-child(3) { width: 73mm !important; }
.salary-adjustment-list-print-table th:nth-child(4),
.salary-adjustment-list-print-table td:nth-child(4) { width: 13mm !important; }
.salary-adjustment-list-print-table th:nth-child(5),
.salary-adjustment-list-print-table td:nth-child(5) { width: 14mm !important; }
.salary-adjustment-list-print-table th:nth-child(6),
.salary-adjustment-list-print-table td:nth-child(6),
.salary-adjustment-list-print-table th:nth-child(7),
.salary-adjustment-list-print-table td:nth-child(7),
.salary-adjustment-list-print-table th:nth-child(8),
.salary-adjustment-list-print-table td:nth-child(8) { width: 31mm !important; }

.salary-adjustment-list-print-table .center-cell {
    text-align: center;
}

.salary-adjustment-list-print-table .money-cell {
    text-align: right;
    white-space: nowrap;
}

.salary-adjustment-list-print-table .adjustment-cell {
    font-weight: 700;
}

@media (max-width: 640px) {
    .salary-adjustment-date-toggle-row {
        grid-template-columns: 1fr;
    }
}

@media print {
    .salary-adjustment-list-print-table th,
    .salary-adjustment-list-print-table td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* Salary Adjustment print options: compact Employee Edit-style controls */
.salary-adjustment-list-print-dialog {
    width: min(520px, calc(100vw - 32px)) !important;
}

.salary-adjustment-print-options-grid {
    --salary-adjustment-print-options-width: 360px;
    display: grid !important;
    justify-content: start !important;
    justify-items: stretch !important;
    gap: .72rem !important;
    width: min(var(--salary-adjustment-print-options-width), 100%) !important;
    max-width: 100% !important;
    margin-top: .95rem !important;
}

.salary-adjustment-print-field {
    position: relative !important;
    display: block !important;
    isolation: isolate !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 7px !important;
    margin: 0 !important;
}

.salary-adjustment-print-field > span:first-child {
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    top: 0 !important;
    left: 10px !important;
    z-index: 4 !important;
    height: 15px !important;
    min-height: 15px !important;
    max-width: calc(100% - 20px) !important;
    padding: 0 4px !important;
    background: #ffffff !important;
    color: #0F766E !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.salary-adjustment-print-field .form-select,
.salary-adjustment-print-field .form-control {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

.salary-adjustment-print-field .form-select {
    padding-right: 2.1rem !important;
}

.salary-adjustment-print-field:focus-within > span:first-child {
    color: #0F766E !important;
}

.salary-adjustment-current-date-field.has-inline-switch .form-control {
    padding-right: 3.2rem !important;
}

.salary-adjustment-current-date-field .salary-adjustment-date-switch {
    position: absolute !important;
    top: 29px !important;
    right: .55rem !important;
    width: 34px !important;
    min-height: 22px !important;
    transform: translateY(-50%) !important;
}

.salary-adjustment-current-date-field .salary-adjustment-date-switch .optional-switch-track {
    width: 30px !important;
    height: 18px !important;
}

.salary-adjustment-current-date-field .salary-adjustment-current-date-text {
    position: absolute !important;
    left: .85rem !important;
    right: 3.2rem !important;
    top: 29px !important;
    z-index: 2 !important;
    transform: translateY(-50%) !important;
    color: #334155 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    pointer-events: none !important;
}

.salary-adjustment-current-date-field.is-current .form-control {
    color: transparent !important;
    caret-color: transparent !important;
}

.salary-adjustment-current-date-field.is-custom .salary-adjustment-current-date-text {
    display: none !important;
}

.salary-adjustment-current-date-field.is-custom .form-control {
    color: #0f172a !important;
    caret-color: auto !important;
}

.salary-adjustment-current-date-field.is-current .salary-adjustment-date-switch .optional-switch-track,
.salary-adjustment-current-date-field .salary-adjustment-date-switch.is-on .optional-switch-track {
    background: #BBF7D0 !important;
    border-color: #86EFAC !important;
}

.salary-adjustment-current-date-field.is-current .salary-adjustment-date-switch .optional-switch-track::after,
.salary-adjustment-current-date-field .salary-adjustment-date-switch.is-on .optional-switch-track::after {
    transform: translate(12px, -50%) !important;
}

.salary-adjustment-print-actions {
    width: min(var(--salary-adjustment-print-options-width, 360px), 100%) !important;
    justify-content: flex-end !important;
    margin-top: .85rem !important;
}

.salary-adjustment-print-actions .btn {
    min-width: 104px !important;
}

@media (max-width: 560px) {
    .salary-adjustment-print-options-grid,
    .salary-adjustment-print-actions {
        width: 100% !important;
    }
}


/* Salary Adjustment print options: Department spans Annex + Print Date width */
.salary-adjustment-list-print-dialog {
    width: min(calc(var(--salary-adjustment-print-options-width, 360px) + 210px), calc(100vw - 32px), 660px) !important;
}

.salary-adjustment-print-options-grid {
    --salary-adjustment-print-date-width: 180px;
    grid-template-columns: minmax(280px, var(--salary-adjustment-print-options-width, 360px)) var(--salary-adjustment-print-date-width) !important;
    align-items: end !important;
    column-gap: .72rem !important;
    row-gap: .66rem !important;
    width: min(calc(var(--salary-adjustment-print-options-width, 360px) + var(--salary-adjustment-print-date-width, 180px) + .72rem), 100%) !important;
}

.salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
}

.salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
}

.salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3) {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: var(--salary-adjustment-print-date-width, 180px) !important;
}

.salary-adjustment-current-date-field.has-inline-switch .form-control {
    padding-left: .75rem !important;
    padding-right: 2.75rem !important;
}

.salary-adjustment-current-date-field .salary-adjustment-current-date-text {
    left: .75rem !important;
    right: 2.75rem !important;
}

.salary-adjustment-current-date-field .salary-adjustment-date-switch {
    right: .42rem !important;
}

.salary-adjustment-print-actions {
    width: min(calc(var(--salary-adjustment-print-options-width, 360px) + var(--salary-adjustment-print-date-width, 180px) + .72rem), 100%) !important;
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        width: min(520px, calc(100vw - 32px)) !important;
    }

    .salary-adjustment-print-options-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1),
    .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2),
    .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
    }

    .salary-adjustment-print-actions {
        width: 100% !important;
    }
}

/* Stable custom page-size dropdown; avoids browser-native popup restyling. */
.pagination-size-label {
    font-weight: 650;
}

.pagination-size-picker {
    position: relative;
    width: 82px;
    flex: 0 0 82px;
}

.pagination-size-picker > summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: .42rem 2rem .42rem .75rem;
    border: 1px solid #86a8b8;
    border-radius: 10px;
    color: var(--text);
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.pagination-size-picker > summary::-webkit-details-marker {
    display: none;
}

.pagination-size-picker > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #476274;
    border-bottom: 2px solid #476274;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .16s ease;
}

.pagination-size-picker[open] > summary,
.pagination-size-picker > summary:hover {
    border-color: var(--primary);
    background: #f0fdfa;
}

.pagination-size-picker[open] > summary {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.pagination-size-picker[open] > summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.pagination-size-picker-menu {
    position: absolute;
    z-index: 80;
    left: 0;
    bottom: calc(100% + 7px);
    display: grid;
    width: 100%;
    padding: .3rem;
    border: 1px solid #c7d7df;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}

.pagination-size-picker-menu button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: .38rem .55rem;
    border: 0;
    border-radius: 7px;
    color: #334155;
    background: transparent;
    font: inherit;
    font-weight: 650;
    text-align: left;
}

.pagination-size-picker-menu button:hover {
    color: #0f766e;
    background: #e8f7f5;
}

.pagination-size-picker-menu button.is-selected {
    color: #fff;
    background: var(--primary);
}

body.dark-mode .pagination-size-picker > summary {
    border-color: #496176;
    color: #e5edf5;
    background: #182a3d;
}

body.dark-mode .pagination-size-picker > summary::after {
    border-color: #b8cad6;
}

body.dark-mode .pagination-size-picker-menu {
    border-color: #3a5268;
    background: #132132;
}

body.dark-mode .pagination-size-picker-menu button {
    color: #dbe7ef;
}

body.dark-mode .pagination-size-picker-menu button:hover {
    color: #99f6e4;
    background: #183b3c;
}

/* CTO application rows remain top-anchored and grow downward without clipping. */
.coc-modal-backdrop[data-coc-modal="cto"] .cto-application-schedule {
    height: auto;
    min-height: 140px;
    max-height: none;
    overflow: visible;
}

.coc-modal-backdrop[data-coc-modal="cto"] .cto-application-days {
    height: auto;
    min-height: 58px;
    max-height: none;
    overflow: visible;
    align-content: start;
}

.coc-modal-backdrop[data-coc-modal="cto"] .cto-application-day {
    position: relative;
    min-height: 58px;
}

/* Salary Adjustment mass print popup: compact panel with no unused right-side space */
.salary-adjustment-list-print-dialog {
    width: min(calc(var(--salary-adjustment-print-options-width, 360px) + var(--salary-adjustment-print-date-width, 180px) + .72rem), calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: content-box !important;
}

.salary-adjustment-print-options-grid,
.salary-adjustment-print-actions {
    width: min(calc(var(--salary-adjustment-print-options-width, 360px) + var(--salary-adjustment-print-date-width, 180px) + .72rem), 100%) !important;
}

.salary-adjustment-print-actions .btn {
    min-width: 96px !important;
}

/* Salary Adjustment mass print: each employee notice prints as an individual page */
.salary-adjustment-mass-print-document {
    background: transparent !important;
}

.salary-adjustment-mass-print-document .salary-adjustment-notice-document {
    break-after: page !important;
    page-break-after: always !important;
}

.salary-adjustment-mass-print-document .salary-adjustment-notice-document:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
}

@media print {
    .salary-adjustment-mass-print-document .salary-adjustment-notice-document {
        break-after: page !important;
        page-break-after: always !important;
    }

    .salary-adjustment-mass-print-document .salary-adjustment-notice-document:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }
}

/* Salary Adjustment mass print: centered A4 page preview and tighter options popup */
body:has(.salary-adjustment-mass-print-document) {
    background: #d9dde3 !important;
}

body:has(.salary-adjustment-mass-print-document) article.content,
body:has(.salary-adjustment-mass-print-document) .content,
body:has(.salary-adjustment-mass-print-document) .main-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.print-document.salary-adjustment-document.salary-adjustment-mass-print-document {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10mm !important;
    padding: 14mm 0 !important;
    margin: 0 auto !important;
    background: #d9dde3 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.print-document.salary-adjustment-document.salary-adjustment-mass-print-document > .salary-adjustment-notice-document {
    width: var(--cert-page-width) !important;
    min-width: var(--cert-page-width) !important;
    max-width: var(--cert-page-width) !important;
    min-height: var(--cert-page-height) !important;
    margin: 0 auto !important;
    padding: var(--cert-page-padding-top)
             var(--cert-page-padding-right)
             var(--cert-page-padding-bottom)
             var(--cert-page-padding-left) !important;
    background: #ffffff !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .22) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    break-after: page !important;
    page-break-after: always !important;
}

.print-document.salary-adjustment-document.salary-adjustment-mass-print-document > .salary-adjustment-notice-document:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
}

.salary-adjustment-list-print-dialog {
    --salary-adjustment-print-date-width: 150px;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    padding: 1.05rem 1.05rem 1rem !important;
}

.salary-adjustment-print-options-grid {
    width: min(calc(var(--salary-adjustment-print-options-width, 320px) + var(--salary-adjustment-print-date-width, 150px) + .62rem), calc(100vw - 64px)) !important;
    grid-template-columns: minmax(240px, var(--salary-adjustment-print-options-width, 320px)) var(--salary-adjustment-print-date-width, 150px) !important;
    column-gap: .62rem !important;
}

.salary-adjustment-print-actions {
    width: min(calc(var(--salary-adjustment-print-options-width, 320px) + var(--salary-adjustment-print-date-width, 150px) + .62rem), calc(100vw - 64px)) !important;
}

.salary-adjustment-current-date-field .salary-adjustment-current-date-text {
    font-size: .86rem !important;
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        width: min(420px, calc(100vw - 32px)) !important;
    }

    .salary-adjustment-print-options-grid,
    .salary-adjustment-print-actions {
        width: 100% !important;
    }
}

@media screen and (max-width: 820px) {
    .print-document.salary-adjustment-document.salary-adjustment-mass-print-document {
        align-items: flex-start !important;
        overflow-x: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media print {
    body:has(.salary-adjustment-mass-print-document) {
        background: #ffffff !important;
    }

    .print-document.salary-adjustment-document.salary-adjustment-mass-print-document {
        display: block !important;
        width: var(--cert-page-width) !important;
        min-width: var(--cert-page-width) !important;
        max-width: var(--cert-page-width) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .print-document.salary-adjustment-document.salary-adjustment-mass-print-document > .salary-adjustment-notice-document {
        width: var(--cert-page-width) !important;
        min-width: var(--cert-page-width) !important;
        max-width: var(--cert-page-width) !important;
        min-height: var(--cert-page-height) !important;
        margin: 0 !important;
        padding: var(--cert-page-padding-top)
                 var(--cert-page-padding-right)
                 var(--cert-page-padding-bottom)
                 var(--cert-page-padding-left) !important;
        background: #ffffff !important;
        box-shadow: none !important;
        overflow: visible !important;
        break-after: page !important;
        page-break-after: always !important;
    }

    .print-document.salary-adjustment-document.salary-adjustment-mass-print-document > .salary-adjustment-notice-document:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }
}


/* ==========================================================
   Salary Adjustment mass print popup tight width fix
   Patch marker: salary-adjustment-mass-print-popup-no-right-gap
   ========================================================== */
.salary-adjustment-list-print-dialog {
    --salary-adjustment-print-date-width: 150px;
    --salary-adjustment-print-form-width: calc(var(--salary-adjustment-print-options-width, 320px) + var(--salary-adjustment-print-date-width, 150px) + .62rem);
    width: min(calc(var(--salary-adjustment-print-form-width) + 2.1rem), calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 1.05rem 1.05rem 1rem !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: var(--salary-adjustment-print-form-width) !important;
    padding-right: 2.35rem !important;
    margin-bottom: .95rem !important;
}

.salary-adjustment-list-print-dialog .step-list-print-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.salary-adjustment-print-options-grid,
.salary-adjustment-print-actions {
    width: min(var(--salary-adjustment-print-form-width), calc(100vw - 64px)) !important;
    max-width: min(var(--salary-adjustment-print-form-width), calc(100vw - 64px)) !important;
}

.salary-adjustment-print-options-grid {
    grid-template-columns: minmax(240px, var(--salary-adjustment-print-options-width, 320px)) var(--salary-adjustment-print-date-width, 150px) !important;
    column-gap: .62rem !important;
}

.salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1) {
    grid-column: 1 / 3 !important;
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        width: min(420px, calc(100vw - 32px)) !important;
    }

    .salary-adjustment-list-print-dialog .step-list-print-header,
    .salary-adjustment-print-options-grid,
    .salary-adjustment-print-actions {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==========================================================
   Salary Adjustment mass print popup final tight width + gender update
   Patch marker: salary-adjustment-mass-print-final-tight-gender
   ========================================================== */
.salary-adjustment-list-print-dialog {
    --salary-adjustment-print-date-width: 150px;
    --salary-adjustment-print-form-width: calc(var(--salary-adjustment-print-options-width, 320px) + var(--salary-adjustment-print-date-width, 150px) + .62rem);
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.05rem 1rem 1rem !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header,
.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid,
.salary-adjustment-list-print-dialog .salary-adjustment-print-actions {
    width: min(var(--salary-adjustment-print-form-width), calc(100vw - 64px)) !important;
    max-width: min(var(--salary-adjustment-print-form-width), calc(100vw - 64px)) !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header {
    position: relative !important;
    display: block !important;
    padding-right: 2.15rem !important;
    margin-bottom: .9rem !important;
}

.salary-adjustment-list-print-dialog .step-list-print-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
    grid-template-columns: minmax(240px, var(--salary-adjustment-print-options-width, 320px)) var(--salary-adjustment-print-date-width, 150px) !important;
    column-gap: .62rem !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1) {
    grid-column: 1 / 3 !important;
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        display: flex !important;
        width: min(420px, calc(100vw - 32px)) !important;
    }
}

/* ==========================================================
   Salary Adjustment mass print: signatory center + popup full control width
   Patch marker: salary-adjustment-signatory-popup-right-gap-final
   ========================================================== */
.salary-adjustment-document .sa-signature {
    width: fit-content !important;
    min-width: 52mm !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.salary-adjustment-document .sa-signature p,
.salary-adjustment-document .sa-signature strong,
.salary-adjustment-document .sa-signature span {
    width: auto !important;
    min-width: 100% !important;
    display: block !important;
    text-align: center !important;
    align-self: center !important;
}

.salary-adjustment-list-print-dialog {
    --salary-adjustment-print-options-width: 390px;
    --salary-adjustment-print-date-width: 180px;
    --salary-adjustment-print-form-width: calc(var(--salary-adjustment-print-options-width, 390px) + var(--salary-adjustment-print-date-width, 180px) + .62rem);
    width: min(calc(var(--salary-adjustment-print-form-width) + 2rem), calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.05rem 1rem 1rem !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header,
.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid,
.salary-adjustment-list-print-dialog .salary-adjustment-print-actions {
    width: min(var(--salary-adjustment-print-form-width), calc(100vw - 56px)) !important;
    max-width: min(var(--salary-adjustment-print-form-width), calc(100vw - 56px)) !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
    grid-template-columns: minmax(0, var(--salary-adjustment-print-options-width, 390px)) var(--salary-adjustment-print-date-width, 180px) !important;
    column-gap: .62rem !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1) {
    grid-column: 1 / 3 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2) {
    grid-column: 1 / 2 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3) {
    grid-column: 2 / 3 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-actions {
    justify-content: flex-end !important;
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        width: min(430px, calc(100vw - 24px)) !important;
    }

    .salary-adjustment-list-print-dialog .step-list-print-header,
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid,
    .salary-adjustment-list-print-dialog .salary-adjustment-print-actions {
        width: 100% !important;
        max-width: 100% !important;
    }

    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
        grid-template-columns: 1fr !important;
    }

    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3) {
        grid-column: 1 / -1 !important;
    }
}

@media print {
    .salary-adjustment-document .sa-signature,
    .salary-adjustment-document .sa-signature p,
    .salary-adjustment-document .sa-signature strong,
    .salary-adjustment-document .sa-signature span {
        text-align: center !important;
        align-items: center !important;
    }
}


/* ==========================================================
   Salary Adjustment mass print popup + signatory actual final fix
   Patch marker: salary-adjustment-popup-signatory-real-fix
   ========================================================== */
.salary-adjustment-list-print-dialog {
    --salary-adjustment-print-options-width: 320px;
    --salary-adjustment-print-date-width: 178px;
    --salary-adjustment-print-button-width: 96px;
    --salary-adjustment-print-gap: .54rem;
    --salary-adjustment-print-form-width: calc(var(--salary-adjustment-print-options-width) + var(--salary-adjustment-print-date-width) + var(--salary-adjustment-print-button-width) + (var(--salary-adjustment-print-gap) * 2));
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    padding: 1.05rem 1rem 1rem !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header,
.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
    width: min(var(--salary-adjustment-print-form-width), calc(100vw - 56px)) !important;
    max-width: min(var(--salary-adjustment-print-form-width), calc(100vw - 56px)) !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header {
    position: relative !important;
    display: block !important;
    padding-right: 2.15rem !important;
    margin-bottom: .9rem !important;
}

.salary-adjustment-list-print-dialog .step-list-print-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
    display: grid !important;
    grid-template-columns: minmax(0, var(--salary-adjustment-print-options-width)) var(--salary-adjustment-print-date-width) var(--salary-adjustment-print-button-width) !important;
    column-gap: var(--salary-adjustment-print-gap) !important;
    row-gap: .7rem !important;
    align-items: end !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1) {
    grid-column: 1 / 4 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2) {
    grid-column: 1 / 2 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3) {
    grid-column: 2 / 3 !important;
    width: 100% !important;
}

.salary-adjustment-print-action-cell {
    grid-column: 3 / 4 !important;
    width: var(--salary-adjustment-print-button-width) !important;
    min-width: var(--salary-adjustment-print-button-width) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: stretch !important;
}

.salary-adjustment-print-action-cell .btn,
.salary-adjustment-list-print-dialog .salary-adjustment-print-action-cell .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    border-radius: 12px !important;
    padding-left: .8rem !important;
    padding-right: .8rem !important;
}

.salary-adjustment-print-actions {
    display: none !important;
}

.salary-adjustment-document .sa-signature,
.salary-adjustment-mass-print-document .sa-signature,
.salary-adjustment-notice-document .sa-signature {
    width: 64mm !important;
    min-width: 64mm !important;
    max-width: 64mm !important;
    margin-top: 5mm !important;
    margin-right: 6mm !important;
    margin-bottom: 7mm !important;
    margin-left: auto !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.2 !important;
}

.salary-adjustment-document .sa-signature p,
.salary-adjustment-document .sa-signature strong,
.salary-adjustment-document .sa-signature span,
.salary-adjustment-mass-print-document .sa-signature p,
.salary-adjustment-mass-print-document .sa-signature strong,
.salary-adjustment-mass-print-document .sa-signature span,
.salary-adjustment-notice-document .sa-signature p,
.salary-adjustment-notice-document .sa-signature strong,
.salary-adjustment-notice-document .sa-signature span {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.salary-adjustment-document .sa-signature p,
.salary-adjustment-mass-print-document .sa-signature p,
.salary-adjustment-notice-document .sa-signature p {
    margin-top: 0 !important;
    margin-bottom: 9mm !important;
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        width: min(420px, calc(100vw - 24px)) !important;
    }

    .salary-adjustment-list-print-dialog .step-list-print-header,
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
        width: 100% !important;
        max-width: 100% !important;
    }

    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
        grid-template-columns: 1fr !important;
    }

    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3),
    .salary-adjustment-print-action-cell {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ==========================================================
   Salary Adjustment mass print: requested print button row + left signatory axis
   Patch marker: salary-adjustment-mass-print-left-signatory-button-row
   ========================================================== */
.salary-adjustment-list-print-dialog {
    --salary-adjustment-print-options-width: 320px !important;
    --salary-adjustment-print-date-width: 178px !important;
    --salary-adjustment-print-button-width: 96px !important;
    --salary-adjustment-print-gap: .54rem !important;
    --salary-adjustment-print-form-width: calc(var(--salary-adjustment-print-options-width) + var(--salary-adjustment-print-date-width) + var(--salary-adjustment-print-gap)) !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    padding: 1.05rem 1rem 1rem !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog .step-list-print-header,
.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
    width: min(var(--salary-adjustment-print-form-width), calc(100vw - 56px)) !important;
    max-width: min(var(--salary-adjustment-print-form-width), calc(100vw - 56px)) !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
    display: grid !important;
    grid-template-columns: minmax(0, var(--salary-adjustment-print-options-width)) var(--salary-adjustment-print-date-width) !important;
    column-gap: var(--salary-adjustment-print-gap) !important;
    row-gap: .7rem !important;
    align-items: end !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1) {
    grid-column: 1 / 3 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2) {
    grid-column: 1 / 2 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3) {
    grid-column: 2 / 3 !important;
    width: 100% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-action-cell {
    grid-column: 1 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-print-action-cell .btn {
    width: var(--salary-adjustment-print-button-width) !important;
    min-width: var(--salary-adjustment-print-button-width) !important;
    max-width: var(--salary-adjustment-print-button-width) !important;
    height: 38px !important;
    border-radius: 12px !important;
    padding-left: .8rem !important;
    padding-right: .8rem !important;
}

.salary-adjustment-document .sa-signature,
.salary-adjustment-mass-print-document .sa-signature,
.salary-adjustment-notice-document .sa-signature {
    width: 64mm !important;
    min-width: 64mm !important;
    max-width: 64mm !important;
    margin-top: 5mm !important;
    margin-right: 6mm !important;
    margin-bottom: 7mm !important;
    margin-left: auto !important;
    text-align: left !important;
    display: block !important;
    line-height: 1.2 !important;
}

.salary-adjustment-document .sa-signature p,
.salary-adjustment-document .sa-signature strong,
.salary-adjustment-document .sa-signature span,
.salary-adjustment-mass-print-document .sa-signature p,
.salary-adjustment-mass-print-document .sa-signature strong,
.salary-adjustment-mass-print-document .sa-signature span,
.salary-adjustment-notice-document .sa-signature p,
.salary-adjustment-notice-document .sa-signature strong,
.salary-adjustment-notice-document .sa-signature span {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
}

@media print {
    .salary-adjustment-document .sa-signature,
    .salary-adjustment-document .sa-signature p,
    .salary-adjustment-document .sa-signature strong,
    .salary-adjustment-document .sa-signature span,
    .salary-adjustment-mass-print-document .sa-signature,
    .salary-adjustment-mass-print-document .sa-signature p,
    .salary-adjustment-mass-print-document .sa-signature strong,
    .salary-adjustment-mass-print-document .sa-signature span,
    .salary-adjustment-notice-document .sa-signature,
    .salary-adjustment-notice-document .sa-signature p,
    .salary-adjustment-notice-document .sa-signature strong,
    .salary-adjustment-notice-document .sa-signature span {
        text-align: left !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 680px) {
    .salary-adjustment-list-print-dialog {
        width: min(420px, calc(100vw - 24px)) !important;
    }

    .salary-adjustment-list-print-dialog .step-list-print-header,
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
        width: 100% !important;
        max-width: 100% !important;
    }

    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid {
        grid-template-columns: 1fr !important;
    }

    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(1),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(2),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-options-grid > .salary-adjustment-print-field:nth-child(3),
    .salary-adjustment-list-print-dialog .salary-adjustment-print-action-cell {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ==========================================================
   Salary Adjustment notice: add one line above signatory
   Patch marker: salary-adjustment-signatory-extra-space
   ========================================================== */
.salary-adjustment-document .sa-signature,
.salary-adjustment-mass-print-document .sa-signature,
.salary-adjustment-notice-document .sa-signature {
    margin-top: 10mm !important;
}

@media print {
    .salary-adjustment-document .sa-signature,
    .salary-adjustment-mass-print-document .sa-signature,
    .salary-adjustment-notice-document .sa-signature {
        margin-top: 10mm !important;
    }
}


/* ==========================================================
   Salary Adjustment print: budget circular label + continuation alignment
   Patch marker: salary-adjustment-budget-circular-line-alignment
   ========================================================== */
.salary-adjustment-document .sa-indent,
.salary-adjustment-mass-print-document .sa-indent,
.salary-adjustment-notice-document .sa-indent {
    padding-left: 5.8mm !important;
    text-indent: 0 !important;
}

.salary-adjustment-document .sa-row div,
.salary-adjustment-mass-print-document .sa-row div,
.salary-adjustment-notice-document .sa-row div {
    justify-items: start !important;
    text-align: left !important;
}

.salary-adjustment-document .sa-row div span,
.salary-adjustment-mass-print-document .sa-row div span,
.salary-adjustment-notice-document .sa-row div span {
    text-align: left !important;
}


/* ==========================================================
   Salary Adjustment print: tighter item 3 spacing + Plantilla wrap axis
   Patch marker: salary-adjustment-item3-plantilla-wrap-fix
   ========================================================== */
.salary-adjustment-document .sa-adjustment-grid,
.salary-adjustment-mass-print-document .sa-adjustment-grid,
.salary-adjustment-notice-document .sa-adjustment-grid {
    margin-bottom: 2.5mm !important;
}

.salary-adjustment-document .sa-understanding,
.salary-adjustment-mass-print-document .sa-understanding,
.salary-adjustment-notice-document .sa-understanding {
    margin-top: 0 !important;
}

.salary-adjustment-document .sa-footer .sa-plantilla-line,
.salary-adjustment-mass-print-document .sa-footer .sa-plantilla-line,
.salary-adjustment-notice-document .sa-footer .sa-plantilla-line {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 4px !important;
    align-items: start !important;
    margin-bottom: 2px !important;
}

.salary-adjustment-document .sa-footer .sa-plantilla-prefix,
.salary-adjustment-mass-print-document .sa-footer .sa-plantilla-prefix,
.salary-adjustment-notice-document .sa-footer .sa-plantilla-prefix {
    display: inline !important;
    white-space: nowrap !important;
}

.salary-adjustment-document .sa-footer .sa-plantilla-department,
.salary-adjustment-mass-print-document .sa-footer .sa-plantilla-department,
.salary-adjustment-notice-document .sa-footer .sa-plantilla-department {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-decoration: underline !important;
    text-align: left !important;
}

@media print {
    .salary-adjustment-document .sa-adjustment-grid,
    .salary-adjustment-mass-print-document .sa-adjustment-grid,
    .salary-adjustment-notice-document .sa-adjustment-grid {
        margin-bottom: 2.5mm !important;
    }

    .salary-adjustment-document .sa-understanding,
    .salary-adjustment-mass-print-document .sa-understanding,
    .salary-adjustment-notice-document .sa-understanding {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   Salary Adjustment print: salary item text axis exact alignment
   Patch marker: salary-adjustment-item-text-axis-exact
   ========================================================== */
.salary-adjustment-document .sa-item-lines,
.salary-adjustment-mass-print-document .sa-item-lines,
.salary-adjustment-notice-document .sa-item-lines {
    display: grid !important;
    row-gap: 1px !important;
    justify-items: stretch !important;
    text-align: left !important;
}

.salary-adjustment-document .sa-item-line,
.salary-adjustment-mass-print-document .sa-item-line,
.salary-adjustment-notice-document .sa-item-line {
    display: grid !important;
    grid-template-columns: 6.2mm minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    text-align: left !important;
}

.salary-adjustment-document .sa-item-number,
.salary-adjustment-mass-print-document .sa-item-number,
.salary-adjustment-notice-document .sa-item-number {
    display: block !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.salary-adjustment-document .sa-item-text,
.salary-adjustment-mass-print-document .sa-item-text,
.salary-adjustment-notice-document .sa-item-text {
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
}

.salary-adjustment-document .sa-row div.sa-item-lines,
.salary-adjustment-mass-print-document .sa-row div.sa-item-lines,
.salary-adjustment-notice-document .sa-row div.sa-item-lines {
    gap: 1px !important;
}

.salary-adjustment-document .sa-indent,
.salary-adjustment-mass-print-document .sa-indent,
.salary-adjustment-notice-document .sa-indent {
    padding-left: 0 !important;
}

@media print {
    .salary-adjustment-document .sa-item-line,
    .salary-adjustment-mass-print-document .sa-item-line,
    .salary-adjustment-notice-document .sa-item-line {
        grid-template-columns: 6.2mm minmax(0, 1fr) !important;
    }
}

/* Employee reference maintenance: department and position editor. */
.reference-maintenance-heading p {
    margin: .25rem 0 0;
    color: #64748B;
    font-size: .86rem;
}

.reference-maintenance-alert {
    margin-bottom: 1rem;
    border-radius: 14px;
}

.reference-maintenance-shell {
    display: grid;
    gap: 1.1rem;
}

.reference-maintenance-card {
    padding: 1rem;
    background: #FFFFFF;
    border: 1px solid #D8E2EE;
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06);
}

.reference-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.reference-card-heading h2 {
    margin: 0;
    color: var(--primary, #0F766E);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.reference-card-heading p {
    margin: .25rem 0 0;
    color: #64748B;
    font-size: .78rem;
}

.reference-add-button {
    min-width: 146px;
    white-space: nowrap;
}

.reference-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: .6rem;
    margin-bottom: .85rem;
}

.reference-table-wrap {
    overflow: auto;
    border: 1px solid #D8E2EE;
    border-radius: 16px;
}

.reference-maintenance-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
}

.reference-position-table {
    min-width: 1180px;
}

.reference-maintenance-table th {
    padding: .68rem .75rem;
    color: #1E293B;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #F8FAFC;
    border-bottom: 1px solid #CBD5E1;
    white-space: nowrap;
}

.reference-maintenance-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: middle;
}

.reference-maintenance-table tr:last-child td {
    border-bottom: none;
}

.reference-maintenance-table tr.is-new-reference td {
    background: #F0FDFA;
}

.reference-maintenance-table .form-control {
    min-height: 38px;
    font-size: .82rem;
    border-radius: 11px;
}

.reference-id-control {
    min-width: 90px;
}

.reference-item-control {
    min-width: 120px;
}

.reference-position-control {
    min-width: 260px;
}

.reference-sg-control,
.reference-step-control {
    max-width: 78px;
    text-align: center;
}

.reference-salary-control {
    min-width: 130px;
    text-align: right;
}

.reference-status-switch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 112px;
    padding: .3rem .5rem;
    border: 1px solid #D8E2EE;
    border-radius: 999px;
    background: #F8FAFC;
    cursor: pointer;
    user-select: none;
}

.reference-status-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reference-switch-track {
    position: relative;
    width: 31px;
    height: 18px;
    background: #CBD5E1;
    border: 1px solid #B6C2D1;
    border-radius: 999px;
    transition: background-color .18s ease, border-color .18s ease;
}

.reference-switch-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
    transform: translateY(-50%);
    transition: transform .18s ease;
}

.reference-status-switch.is-on .reference-switch-track {
    background: #BBF7D0;
    border-color: #86EFAC;
}

.reference-status-switch.is-on .reference-switch-track::after {
    transform: translate(12px, -50%);
}

.reference-status-switch strong {
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
}

.reference-status-switch.is-on strong {
    color: #0F766E;
}

.reference-empty-row {
    padding: 1rem !important;
    color: #64748B;
    text-align: center;
    font-weight: 700;
}

@media (max-width: 780px) {
    .reference-card-heading {
        display: grid;
    }

    .reference-toolbar {
        grid-template-columns: 1fr;
    }

    .reference-add-button {
        width: 100%;
    }
}

/* Employee Records submenus: Department and Position reference lists. */
.reference-list-panel {
    overflow: hidden;
}

.reference-records-toolbar {
    align-items: center;
    gap: 1rem;
}

.reference-list-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-left: auto;
}

.reference-list-actions .search-composer {
    min-width: min(360px, 38vw);
}

.reference-list-table-wrap {
    margin-top: 1rem;
}

.reference-list-table th,
.reference-list-table td {
    vertical-align: middle;
}

.reference-list-table tr.is-editing-reference td {
    background: #F8FAFC;
}

.reference-list-table strong {
    display: block;
    color: #10233F;
    font-weight: 850;
}

.reference-list-table small {
    display: block;
    margin-top: .14rem;
    color: #375A7F;
    font-size: .8rem;
}

.reference-list-table .form-control,
.reference-list-table .form-select {
    min-height: 36px;
    font-size: .82rem;
    border-radius: 10px;
}

.department-reference-table {
    min-width: 1050px;
}

.position-reference-table {
    min-width: 1180px;
}

.reference-code-control,
.reference-tranche-control,
.reference-annex-control,
.reference-sg-control,
.reference-step-control {
    max-width: 96px;
    text-align: center;
}

.reference-head-control {
    min-width: 220px;
}

.reference-name-control,
.reference-position-control,
.reference-department-control {
    min-width: 260px;
}

.reference-position-edit-stack {
    display: grid;
    gap: .35rem;
}

.reference-sgsi-edit {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.reference-sgsi-edit .form-control {
    width: 64px;
}

.reference-list-table .row-actions .btn-sm {
    min-height: 30px;
    padding: .32rem .68rem;
    border-radius: 9px;
    font-size: .74rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .reference-records-toolbar,
    .reference-list-actions {
        display: grid;
        width: 100%;
    }

    .reference-list-actions {
        margin-left: 0;
    }

    .reference-list-actions .search-composer {
        min-width: 0;
        width: 100%;
    }
}


/* Employee Records reference submenus: match Employee List panel and toolbar layout. */
.reference-page-heading-with-action {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

/* Keep list filter controls flat in both themes, including hover/open states. */
.page :is(
    .filter-toggle-button,
    .filter-slide-panel,
    .filter-slide-panel .form-control,
    .filter-slide-panel .form-select,
    .dashboard-filter-menu > summary,
    .dashboard-filter-panel,
    .filter-select-shell .smooth-select-button,
    .filter-select-shell .smooth-select-menu,
    .dashboard-native-select-button,
    .dashboard-native-select-menu
) {
    box-shadow: none !important;
}

.page :is(
    .filter-toggle-button,
    .filter-slide-panel .form-control,
    .filter-slide-panel .form-select,
    .dashboard-filter-menu > summary,
    .filter-select-shell .smooth-select-button,
    .dashboard-native-select-button
):focus-visible {
    outline: 2px solid var(--accent, #0f766e) !important;
    outline-offset: 2px !important;
}

.reference-heading-action-button {
    flex: 0 0 auto;
    margin-top: 0;
    white-space: nowrap;
}

.responsive-records-employees .records-toolbar > .reference-heading-action-button {
    border-radius: 10px;
    min-height: 44px;
}

/* Balance the toolbar between the employee panel edge and the table. */
.content-panel.responsive-records-employees {
    padding-top: 1.5rem;
}

.responsive-records-employees > .records-toolbar {
    margin-bottom: 1.5rem;
}

@media (min-width: 901px) {
    .responsive-records-employees > .records-toolbar {
        row-gap: 0;
    }

    .responsive-records-employees .filter-slide-panel:not(.is-open):not(.is-animating) {
        border-block-width: 0;
    }

    .responsive-records-employees .filter-slide-panel.is-open {
        margin-top: 1rem;
    }
}

.reference-heading-action-button .salary-annex-settings-icon {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    color: #0F766E;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.employee-reference-panel.reference-list-panel {
    overflow: visible;
}

.reference-filter-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.reference-filter-form .search-composer {
    flex: 0 1 auto;
}

.reference-filter-form .filter-actions {
    display: flex;
    align-items: center;
}

.reference-filter-panel {
    grid-column: 1 / -1;
    min-width: min(100%, 920px);
    margin-left: auto;
    align-items: end;
}

.reference-filter-panel.reference-filter-departments {
    grid-template-columns: minmax(180px, .75fr) minmax(180px, .75fr) auto;
}

.reference-filter-panel.reference-filter-positions {
    grid-template-columns: minmax(240px, 1.2fr) minmax(160px, .75fr) minmax(160px, .75fr) minmax(150px, .7fr) auto;
}

.reference-filter-panel label {
    display: grid;
    gap: .25rem;
    min-width: 0;
    margin: 0;
}

.reference-filter-panel label > span {
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.reference-filter-panel .form-select {
    min-height: 36px;
    border-radius: 11px;
    font-size: .8rem;
}

.reference-clear-filter-button {
    min-height: 36px;
    align-self: end;
    border-radius: 11px;
    font-size: .78rem;
    font-weight: 800;
}

.reference-list-table-wrap {
    margin-top: 1rem;
}

.reference-list-table.department-reference-table,
.reference-list-table.position-reference-table {
    min-width: 1060px;
}

.reference-list-table.department-reference-table {
    min-width: 900px;
}

.reference-list-table.position-reference-table {
    min-width: 1240px;
}

.reference-list-table.department-reference-table th:nth-child(1),
.reference-list-table.department-reference-table td:nth-child(1),
.reference-list-table.position-reference-table th:nth-child(1),
.reference-list-table.position-reference-table td:nth-child(1) {
    width: 52px;
    text-align: center;
}

.reference-list-table.department-reference-table th:nth-child(2),
.reference-list-table.department-reference-table td:nth-child(2),
.reference-list-table.position-reference-table th:nth-child(2),
.reference-list-table.position-reference-table td:nth-child(2) {
    width: 110px;
}

.reference-list-table.department-reference-table th:nth-child(3),
.reference-list-table.department-reference-table td:nth-child(3) {
    min-width: 330px;
    text-align: left;
}

.reference-list-table.position-reference-table th:nth-child(3),
.reference-list-table.position-reference-table td:nth-child(3) {
    min-width: 260px;
    text-align: left;
}

.reference-list-table.department-reference-table th:nth-child(4),
.reference-list-table.department-reference-table td:nth-child(4) {
    min-width: 220px;
    text-align: left;
}

.reference-list-table.position-reference-table th:nth-child(4),
.reference-list-table.position-reference-table td:nth-child(4) {
    min-width: 260px;
    text-align: left;
}

.reference-list-table.department-reference-table th:nth-child(5),
.reference-list-table.department-reference-table td:nth-child(5) {
    width: 190px;
    text-align: center;
    white-space: nowrap;
}

.reference-list-table.department-reference-table .department-name-cell strong,
.reference-list-table.department-reference-table .department-name-cell small,
.reference-list-table.department-reference-table .department-head-cell span {
    text-align: left;
}

.reference-list-table.department-reference-table .department-name-cell small {
    color: #64748B;
}

.reference-list-table.department-reference-table .department-head-cell span {
    display: block;
    font-weight: 500;
    text-transform: none;
}

.reference-list-table.department-reference-table .department-head-cell .department-head-id,
.reference-list-table.position-reference-table .position-assigned-employee,
.reference-list-table.position-reference-table .position-employment-status {
    display: block;
    margin-top: .14rem;
    color: #64748B;
    font-size: .8rem;
    font-weight: 500;
    text-transform: none;
}

.reference-list-table.position-reference-table th:nth-child(5),
.reference-list-table.position-reference-table td:nth-child(5) {
    width: 190px;
    text-align: center;
    white-space: nowrap;
}

.reference-list-table.position-reference-table th:nth-child(6),
.reference-list-table.position-reference-table td:nth-child(6) {
    width: 128px;
    text-align: center;
}

.reference-list-table th.action-cell,
.reference-list-table td.action-cell {
    width: 110px;
    text-align: center;
}

.reference-list-table td.action-cell .row-actions {
    justify-content: center;
}

.reference-list-table tr.is-editing-reference td {
    background: #F8FAFC !important;
}

.reference-list-table .form-control,
.reference-list-table .form-select {
    min-height: 34px;
    font-size: .8rem;
    border-radius: 10px;
}

.reference-list-table .row-actions .btn-sm {
    min-height: 30px;
    padding: .32rem .68rem;
    border-radius: 9px;
    font-size: .74rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .reference-page-heading-with-action {
        display: grid !important;
    }

    .reference-heading-action-button {
        width: fit-content;
    }

    .reference-filter-form {
        width: 100%;
        margin-left: 0;
    }

    .reference-filter-panel.reference-filter-departments,
    .reference-filter-panel.reference-filter-positions {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }
}


/* Align Department/Position reference toolbar with the Employee List toolbar. */
.reference-filter-form.records-search-form {
    display: contents;
}

.reference-filter-form .search-composer.animated-search {
    justify-self: end;
}

.reference-filter-form .filter-actions {
    justify-self: end;
}

.reference-filter-form .reference-filter-panel {
    grid-column: 1 / -1;
}

/* Side menu: hide scrollbar when submenus expand while keeping mouse-wheel scrolling. */
.sidebar .nav-scrollable,
.nav-scrollable {
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scrollbar-color: transparent transparent !important;
}

.sidebar .nav-scrollable::-webkit-scrollbar,
.nav-scrollable::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.sidebar .nav-scrollable::-webkit-scrollbar-track,
.nav-scrollable::-webkit-scrollbar-track,
.sidebar .nav-scrollable::-webkit-scrollbar-thumb,
.nav-scrollable::-webkit-scrollbar-thumb {
    background: transparent !important;
}


/* Position reference add popup. */
.reference-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, .32);
    backdrop-filter: blur(3px);
}

.reference-popup-panel {
    width: min(960px, calc(100vw - 2rem));
    max-width: min(960px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    overflow: visible;
    margin: 0;
    padding: 1rem 1rem 0;
    background: #FFFFFF;
    border: 1px solid #D6E0EB;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.reference-popup-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .15rem .1rem .85rem;
}

.reference-popup-heading h2 {
    margin: 0;
    color: #0F766E;
    font-size: 1.05rem;
    font-weight: 900;
}

.reference-popup-heading p {
    margin: .18rem 0 0;
    color: #64748B;
    font-size: .78rem;
    font-weight: 600;
}

.reference-popup-heading .dialog-close-button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    text-decoration: none;
}

.reference-popup-section {
    min-height: 0;
    margin: 0;
    padding: .1rem .1rem .65rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.reference-position-popup-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .72rem .95rem;
}

.reference-position-popup-grid label {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding-top: .45rem;
}

.reference-position-id-field {
    grid-column: span 3;
}

.reference-position-item-field {
    grid-column: span 4;
}

.reference-item-na-label {
    display: none;
    align-items: center;
    color: #64748B;
    font-style: normal;
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.reference-position-item-field.is-casual .reference-item-input {
    display: none;
}

.reference-position-item-field.is-casual .reference-item-na-label {
    display: flex;
}

.reference-position-popup-grid .reference-position-item-field.is-casual > span:first-child {
    color: #CA8A04 !important;
    background: var(--surface);
    transform: translateY(0) scale(1);
}

.reference-position-status-field {
    grid-column: span 5;
}

.reference-position-department-field,
.reference-position-name-field {
    grid-column: 1 / -1;
}

.reference-position-division-field,
.reference-position-section-field {
    grid-column: span 6;
}

.reference-position-short-field {
    grid-column: span 6;
}

.reference-position-sg-field,
.reference-position-step-field {
    grid-column: span 3;
}

.reference-position-bracket-field {
    grid-column: span 6;
}

.reference-position-tranche-field,
.reference-position-basic-field {
    grid-column: span 3;
}

/* Add Position: Casual records only require identity, status, rate, and names. */
.reference-position-popup.is-casual-layout {
    width: min(780px, calc(100vw - 2rem));
    max-width: min(780px, calc(100vw - 2rem));
}

.reference-position-popup.is-casual-layout .reference-position-popup-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.reference-position-popup.is-casual-layout :where(
    .reference-position-item-field,
    .reference-position-department-field,
    .reference-position-division-field,
    .reference-position-section-field,
    .reference-position-sg-field,
    .reference-position-step-field,
    .reference-position-bracket-field,
    .reference-position-tranche-field) {
    display: none;
}

.reference-position-popup.is-casual-layout .reference-position-id-field {
    grid-column: 1 / span 4;
    grid-row: 1;
}

.reference-position-popup.is-casual-layout .reference-position-status-field {
    grid-column: 5 / span 4;
    grid-row: 1;
}

.reference-position-popup.is-casual-layout .reference-position-basic-field {
    grid-column: 9 / span 4;
    grid-row: 1;
}

.reference-position-popup.is-casual-layout .reference-position-name-field {
    grid-column: 1 / span 8;
    grid-row: 2;
}

.reference-position-popup.is-casual-layout .reference-position-short-field {
    grid-column: 9 / span 4;
    grid-row: 2;
}

@media (max-width: 720px) {
    .reference-position-popup.is-casual-layout .reference-position-popup-grid {
        grid-template-columns: 1fr;
    }

    .reference-position-popup.is-casual-layout .reference-position-popup-grid > label {
        grid-column: 1 !important;
    }
}

.reference-department-popup {
    width: min(900px, calc(100vw - 2rem));
    max-width: min(900px, calc(100vw - 2rem));
}

.reference-department-popup-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .72rem .95rem;
}

.reference-department-popup-grid label {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding-top: .45rem;
}

.reference-department-id-field,
.reference-department-code-field {
    grid-column: span 3;
}

.reference-department-branch-field,
.reference-department-short-field {
    grid-column: span 6;
}

.reference-department-head-field,
.reference-department-tranche-field {
    grid-column: span 3;
}

.reference-department-name-field {
    grid-column: 1 / -1;
}

.reference-department-popup-grid label > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 3;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, font-weight .18s ease, background-color .16s ease .04s;
}

.reference-department-popup-grid label:focus-within > span:first-child,
.reference-department-popup-grid label.has-floating-label > span:first-child,
.reference-department-popup-grid label.is-dirty > span:first-child,
.reference-department-popup-grid label:has(.smooth-select-shell.is-open) > span:first-child {
    color: var(--primary);
    font-weight: 500;
    background: var(--surface);
    transform: translateY(0) scale(1);
}

.reference-department-popup-grid label.is-empty > span:first-child {
    color: #DC2626 !important;
}

.reference-department-popup-grid label.is-dirty > span:first-child {
    color: #CA8A04 !important;
}

.reference-department-popup-grid .form-control,
.reference-department-popup-grid .form-select,
.reference-department-popup-grid .smooth-select-shell {
    width: 100%;
}

.reference-department-popup-grid .form-control,
.reference-department-popup-grid .form-select,
.reference-department-popup-grid .smooth-select-button {
    min-height: 40px;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 500;
    box-shadow: none;
}

.reference-department-popup-grid label:focus-within > .form-control,
.reference-department-popup-grid label.has-floating-label > .form-control,
.reference-department-popup-grid label.is-dirty > .form-control {
    padding-top: .92rem;
    padding-bottom: .18rem;
}

.reference-department-popup-grid .form-control:hover,
.reference-department-popup-grid .form-select:hover,
.reference-department-popup-grid .smooth-select-button:hover {
    border-color: #94A3B8;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
}

.reference-department-popup-grid .form-control:focus,
.reference-department-popup-grid .form-select:focus,
.reference-department-popup-grid .smooth-select-button:focus-visible,
.reference-department-popup-grid .smooth-select-shell.is-open .smooth-select-button {
    border-color: #94A3B8;
    box-shadow: 0 0 0 .13rem rgba(148, 163, 184, .2), 0 14px 28px rgba(15, 23, 42, .11);
    outline: none;
    transform: translateY(-1px);
}

.reference-department-id-field .form-control:disabled {
    color: #64748B;
    background: #F8FAFC;
    border-color: #CBD5E1;
    opacity: 1;
}

.reference-department-popup-grid .smooth-select-menu {
    z-index: 80;
}

.reference-position-popup-grid label > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 3;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, font-weight .18s ease, background-color .16s ease .04s;
}

.reference-position-popup-grid label:focus-within > span:first-child,
.reference-position-popup-grid label.has-floating-label > span:first-child,
.reference-position-popup-grid label.is-dirty > span:first-child,
.reference-position-popup-grid label:has(.smooth-select-shell.is-open) > span:first-child {
    color: var(--primary);
    font-weight: 500;
    background: var(--surface);
    transform: translateY(0) scale(1);
}

.reference-position-popup-grid label.is-empty > span:first-child {
    color: #DC2626 !important;
}

.reference-position-popup-grid label.is-dirty > span:first-child {
    color: #CA8A04 !important;
}

.reference-position-popup-grid .form-control,
.reference-position-popup-grid .form-select,
.reference-position-popup-grid .smooth-select-shell {
    width: 100%;
}

.reference-position-popup-grid .form-control,
.reference-position-popup-grid .form-select,
.reference-position-popup-grid .smooth-select-button {
    min-height: 40px;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 500;
    box-shadow: none;
}

.reference-position-popup-grid label:focus-within > .form-control,
.reference-position-popup-grid label.has-floating-label > .form-control,
.reference-position-popup-grid label.is-dirty > .form-control {
    padding-top: .92rem;
    padding-bottom: .18rem;
}

.reference-position-popup-grid label:focus-within > .reference-item-input,
.reference-position-popup-grid label.has-floating-label > .reference-item-input,
.reference-position-popup-grid label.is-dirty > .reference-item-input {
    padding-top: .78rem;
    padding-bottom: .26rem;
    padding-left: .9rem;
    line-height: 1.15;
}

.reference-position-popup-grid .form-control:hover,
.reference-position-popup-grid .form-select:hover,
.reference-position-popup-grid .smooth-select-button:hover {
    border-color: #94A3B8;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
}

.reference-position-popup-grid .form-control:focus,
.reference-position-popup-grid .form-select:focus,
.reference-position-popup-grid .smooth-select-button:focus-visible,
.reference-position-popup-grid .smooth-select-shell.is-open .smooth-select-button {
    border-color: #94A3B8;
    box-shadow: 0 0 0 .13rem rgba(148, 163, 184, .2), 0 14px 28px rgba(15, 23, 42, .11);
    outline: none;
    transform: translateY(-1px);
}

.reference-position-basic-field .amount-control,
.reference-position-id-field .form-control:disabled {
    color: #64748B;
    background: #F8FAFC;
    border-color: #CBD5E1;
    opacity: 1;
}

.reference-position-bracket-field .smooth-select-menu {
    max-height: 150px;
    overflow-y: auto;
}

.reference-position-popup-grid .smooth-select-menu {
    z-index: 80;
}

.reference-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-inline: -1rem;
    padding: .95rem 1rem 1rem;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-radius: 0 0 22px 22px;
}

.reference-popup-actions .btn {
    min-height: 38px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 850;
}

@media (max-width: 860px) {
    .reference-popup-backdrop {
        align-items: start;
        padding: .8rem;
    }

    .reference-popup-panel {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 1.6rem);
        border-radius: 16px;
        overflow: auto;
    }

    .reference-popup-section {
        overflow: visible;
    }

    .reference-position-popup-grid,
    .reference-department-popup-grid {
        grid-template-columns: 1fr;
    }

    .reference-position-id-field,
    .reference-position-item-field,
    .reference-position-status-field,
    .reference-position-short-field,
    .reference-position-sg-field,
    .reference-position-step-field,
    .reference-position-tranche-field,
    .reference-position-basic-field,
    .reference-position-bracket-field,
    .reference-position-department-field,
    .reference-position-division-field,
    .reference-position-section-field,
    .reference-position-name-field,
    .reference-department-id-field,
    .reference-department-code-field,
    .reference-department-branch-field,
    .reference-department-name-field,
    .reference-department-short-field,
    .reference-department-head-field,
    .reference-department-tranche-field {
        grid-column: 1;
    }
}

@media (max-width: 520px) {
    .reference-popup-heading {
        gap: .75rem;
    }

    .reference-popup-actions {
        display: grid;
        grid-template-columns: 1fr;
        border-radius: 0 0 16px 16px;
    }
}

/* Personnel Print Options: expandable Clearance Form controls. */
.personnel-clearance-toggle {
    width: 100%;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-toggle {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    text-decoration: none;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-toggle .personnel-doc-chevron {
    position: absolute;
    right: 1rem;
    font-size: 0;
    line-height: 1;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-toggle .personnel-doc-chevron::before {
    content: "▾";
    display: block;
    color: #53647a;
    font-size: .85rem;
    transform-origin: center;
    transition: transform .2s ease;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-toggle.is-open .personnel-doc-chevron::before {
    transform: rotate(180deg);
}

.personnel-clearance-panel[data-personnel-clearance-panel] {
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0 .95rem;
    overflow: hidden;
    border-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        max-height .32s ease,
        margin .28s ease,
        padding .28s ease,
        opacity .2s ease,
        transform .28s ease,
        visibility 0s linear .32s,
        border-color .2s ease;
}

.personnel-clearance-panel[data-personnel-clearance-panel].is-open {
    max-height: 360px;
    margin: 0;
    padding: .95rem;
    border-color: #e5ebf2;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    overflow: visible;
    transition:
        max-height .36s ease,
        margin .28s ease,
        padding .28s ease,
        opacity .22s ease .06s,
        transform .28s ease,
        visibility 0s linear 0s,
        border-color .2s ease;
}

.personnel-clearance-fields {
    display: grid;
    gap: .7rem;
}

.personnel-clearance-field {
    position: relative;
    display: block;
}

.personnel-clearance-field[hidden] {
    display: none !important;
}

.personnel-clearance-field > span {
    position: absolute;
    z-index: 1;
    top: -7px;
    left: 11px;
    padding: 0 4px;
    color: #0f766e;
    background: #fff;
    font-size: .68rem;
    line-height: 1;
}

.personnel-clearance-purpose-field > .personnel-clearance-outside-label,
.personnel-clearance-effectivity-group > .personnel-clearance-outside-label {
    position: static;
    display: block;
    margin: 0 0 .45rem .1rem;
    padding: 0;
    color: #334155;
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
}

.personnel-clearance-field .form-control {
    width: 100%;
    min-height: 42px;
    padding: .75rem .8rem .45rem;
    border-color: #cbd8e6;
    color: #172033;
    background-color: #fff;
}

/* Clearance requests use the same custom calendar as Employee Edit. */
.personnel-clearance-field > input.modern-date-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.personnel-clearance-field .modern-date-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
    min-height: 44px;
    overflow: hidden;
    color: #172033;
    background: #fff;
    border: 1px solid #cbd8e6;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.personnel-clearance-field .modern-date-control:hover:not(.is-disabled) {
    border-color: #8bbdb6;
}

.personnel-clearance-field .modern-date-control.is-focused,
.personnel-clearance-field .modern-date-control.is-open {
    border-color: #0f8a7d;
    box-shadow: 0 0 0 .2rem rgba(15, 138, 125, .13), 0 10px 24px rgba(15, 23, 42, .08);
}

.personnel-clearance-field .modern-date-display.form-control {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: .62rem .75rem;
    color: #172033;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.personnel-clearance-field .modern-date-trigger {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    color: #0f766e;
    background: #f0faf8;
    border: 0;
    border-left: 1px solid #d9e5e3;
    border-radius: 0;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

.personnel-clearance-field .modern-date-trigger:hover:not(:disabled),
.personnel-clearance-field .modern-date-trigger:focus-visible {
    color: #0b5f58;
    background: #ddf4f0;
    outline: none;
}

.personnel-clearance-field .modern-date-trigger-icon {
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.personnel-clearance-field .modern-date-control.is-disabled {
    color: #64748b;
    background: #eef2f6;
    border-color: #cbd5e1;
    box-shadow: none;
}

.personnel-clearance-field .modern-date-control.is-disabled :is(.modern-date-display, .modern-date-trigger) {
    color: #94a3b8;
    cursor: default;
}

.personnel-clearance-field.is-required-missing > span {
    color: #dc2626;
}

.personnel-clearance-field.is-required-missing .form-control,
.personnel-clearance-field.is-required-missing .modern-date-control,
.personnel-clearance-field.is-required-missing .personnel-clearance-purpose-menu > summary {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

.personnel-clearance-date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.personnel-clearance-effectivity-group {
    display: grid;
}

.personnel-clearance-field.is-disabled {
    opacity: .55;
}

.personnel-clearance-field.is-disabled .form-control {
    color: #64748b;
    background: #eef2f6;
    cursor: not-allowed;
}

.personnel-clearance-to-field {
    position: relative;
}

.personnel-clearance-to-field .form-control {
    padding-right: .8rem;
}

.personnel-clearance-to-field.is-disabled {
    opacity: 1;
}

.personnel-clearance-to-field.is-disabled .form-control {
    opacity: .62;
}

.personnel-clearance-to-switch {
    position: absolute !important;
    z-index: 3;
    top: -1.55rem !important;
    left: auto !important;
    right: .35rem !important;
    transform: none !important;
}

.personnel-clearance-purpose-menu {
    position: relative;
    width: 100%;
}

.personnel-clearance-purpose-menu > summary {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: .75rem 2.4rem .45rem .8rem;
    border: 1px solid #cbd8e6;
    border-radius: 12px;
    color: #172033;
    background: #fff;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    list-style: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.personnel-clearance-purpose-menu > summary::-webkit-details-marker {
    display: none;
}

.personnel-clearance-purpose-menu > summary::after {
    position: absolute;
    top: 50%;
    right: .9rem;
    width: 8px;
    height: 8px;
    content: "";
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .22s ease;
}

.personnel-clearance-purpose-menu[open] > summary {
    border-color: #159589;
    box-shadow: 0 0 0 3px rgba(21, 149, 137, .12);
}

.personnel-clearance-purpose-menu[open] > summary::after {
    transform: translateY(-20%) rotate(225deg);
}

.personnel-clearance-purpose-options {
    position: absolute;
    z-index: 30;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    max-height: 245px;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid #cbd8e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
    transform-origin: top center;
    animation: personnel-clearance-menu-in .2s ease both;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-purpose-options button {
    justify-content: flex-start;
    min-height: 34px;
    padding: .45rem .65rem;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: transparent;
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-purpose-options button:hover,
.personnel-options-card .coe-other-documents-stacked .personnel-clearance-purpose-options button.is-selected {
    color: #0f766e;
    background: #e8f7f4;
}

@keyframes personnel-clearance-menu-in {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.personnel-clearance-print-row {
    display: flex;
    justify-content: flex-end;
    margin-top: .7rem;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-panel .coe-inline-print-button {
    width: 52px;
    min-height: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #159589;
}

.personnel-options-card .coe-other-documents-stacked .personnel-clearance-panel .coe-inline-print-button:hover {
    background: #0f7e75;
}

@media (prefers-reduced-motion: reduce) {
    .personnel-clearance-panel[data-personnel-clearance-panel] {
        transition: none;
    }

    .personnel-clearance-purpose-options {
        animation: none;
    }
}

@media (max-width: 520px) {
    .personnel-clearance-date-fields {
        grid-template-columns: 1fr;
    }
}

/* Login shell cleanup: remove the page-wide top line/shadow around the auth window. */
html.has-login-shell,
html.has-login-shell body,
.page.login-only-layout,
.page.login-only-layout main,
.page.login-only-layout .content,
.page.login-only-layout .login-shell {
    background: #F4F7FA !important;
    border: 0 !important;
    box-shadow: none !important;
}

.page.login-only-layout main::before,
.page.login-only-layout main::after,
.page.login-only-layout .content::before,
.page.login-only-layout .content::after,
.page.login-only-layout .login-shell::before,
.page.login-only-layout .login-shell::after {
    display: none !important;
    content: none !important;
}

/* Employee Records > Salary uses the salary annex editor as a normal page panel. */
.salary-annex-page-shell {
    display: block !important;
    padding: 18px !important;
    margin-top: 0 !important;
}

.salary-annex-settings-popup-panel.salary-annex-settings-page-panel {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.salary-annex-settings-page-panel .salary-annex-settings-header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: transparent !important;
}

.salary-annex-settings-page-panel .salary-annex-settings-header h3 {
    margin: 0 !important;
    color: #00796b !important;
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
}

.salary-annex-settings-page-panel .salary-annex-settings-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    min-height: 0 !important;
}

.salary-annex-settings-page-panel .salary-annex-list-panel,
.salary-annex-settings-page-panel .salary-annex-editor-panel {
    min-height: 0 !important;
}

.salary-annex-settings-page-panel .salary-annex-table-wrap {
    max-height: none !important;
    overflow: auto !important;
}

.salary-annex-settings-page-panel .salary-annex-actions {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    background: transparent !important;
}

.salary-annex-list-table-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #d8e3ef;
    border-radius: 14px;
    background: #fff;
}

.salary-annex-settings-page-panel .salary-annex-list-table-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.salary-annex-list-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.salary-annex-settings-page-panel .salary-annex-list-table-heading {
    min-height: 56px;
    align-items: flex-start;
}

.salary-annex-list-table-heading h2 {
    margin: 0;
    color: #10203a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.salary-annex-reference-table-wrap {
    margin-top: 1rem;
}

.salary-annex-reference-table {
    width: 100%;
    min-width: 1080px;
}

.salary-annex-settings-page-panel .salary-annex-reference-table th:nth-child(1),
.salary-annex-settings-page-panel .salary-annex-reference-table td:nth-child(1) {
    width: 52px;
    text-align: center;
}

.salary-annex-settings-page-panel .salary-annex-reference-table th:nth-child(2),
.salary-annex-settings-page-panel .salary-annex-reference-table td:nth-child(2) {
    min-width: 360px;
    text-align: left;
}

.salary-annex-settings-page-panel .salary-annex-reference-table th:nth-child(3),
.salary-annex-settings-page-panel .salary-annex-reference-table td:nth-child(3) {
    width: 220px;
    text-align: left;
}

.salary-annex-settings-page-panel .salary-annex-reference-table th:nth-child(4),
.salary-annex-settings-page-panel .salary-annex-reference-table td:nth-child(4) {
    width: 128px;
    text-align: center;
}

.salary-annex-settings-page-panel .salary-annex-reference-table th:nth-child(5),
.salary-annex-settings-page-panel .salary-annex-reference-table td:nth-child(5) {
    width: 170px;
    text-align: center;
}

.salary-annex-reference-table tbody tr.is-selected {
    background: #eefbf8;
}

.salary-annex-reference-table th:nth-child(1),
.salary-annex-reference-table td:nth-child(1),
.salary-annex-reference-table th:nth-child(4),
.salary-annex-reference-table td:nth-child(4) {
    text-align: center;
}

.salary-annex-reference-name {
    font-weight: 700;
    color: #10203a;
}

.salary-annex-reference-actions {
    min-width: 170px;
}

.salary-annex-reference-actions,
.salary-annex-reference-actions .inline-action-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.salary-annex-set-active-button {
    color: #0f766e;
    border-color: #99f6e4;
    background: #ecfdf5;
}

.salary-annex-active-status-box {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 9px 12px;
    border: 1px solid #cad8e8;
    border-radius: 12px;
    background: #f8fafc;
}

.salary-annex-active-status-box span {
    color: #00796b;
    font-size: 12px;
    font-weight: 700;
}

.salary-annex-active-status-box strong {
    color: #10203a;
    font-size: .95rem;
    font-weight: 800;
}

.salary-annex-detail-panel {
    margin-bottom: 12px;
    border: 1px solid #d8e3ef;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.salary-annex-detail-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 11px 14px;
    color: #10203a;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.salary-annex-detail-panel summary::-webkit-details-marker {
    display: none;
}

.salary-annex-detail-panel summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform .18s ease, border-color .18s ease;
}

.salary-annex-detail-panel[open] summary::after {
    transform: rotate(225deg);
    border-color: #0f766e;
}

.salary-annex-detail-panel summary span {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.salary-annex-detail-panel summary small {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #64748b;
    font-size: .86rem;
    font-weight: 600;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salary-annex-detail-panel[open] .salary-annex-editor-grid {
    padding: 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.salary-annex-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: grid;
    place-items: center;
    padding: 24px;
}

.salary-annex-editor-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(3px);
    cursor: default;
}

.salary-annex-editor-modal-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    width: min(1220px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 18px;
    border: 1px solid #d8e3ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.salary-annex-editor-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.salary-annex-editor-modal-header h2 {
    margin: 0;
    color: #00796b;
    font-size: 1.05rem;
    font-weight: 800;
}

.salary-annex-editor-modal-header p {
    margin: 4px 0 0;
    color: #52627a;
    font-size: .9rem;
    font-weight: 600;
}

.salary-annex-editor-modal-panel .salary-annex-editor-panel {
    display: grid;
    gap: 12px;
    min-height: 0;
}

.salary-annex-editor-modal-panel .salary-annex-editor-grid .form-control,
.salary-annex-editor-modal-panel .salary-annex-editor-grid .form-select {
    font-size: .84rem;
}

.salary-annex-editor-modal-panel .salary-annex-table-wrap {
    max-height: min(58vh, 560px) !important;
    overflow: auto !important;
}

.salary-annex-editor-modal-panel .salary-annex-actions {
    position: sticky !important;
    bottom: -18px !important;
    z-index: 2 !important;
    margin: 0 -18px -18px !important;
    padding: 12px 18px 18px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), #fff 22%) !important;
}

.salary-annex-reference-popup {
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: visible;
}

.salary-annex-reference-form {
    display: grid;
    gap: 10px;
}

.salary-annex-reference-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 14px;
}

.salary-annex-reference-grid label,
.salary-annex-status-field,
.salary-annex-grade-field,
.salary-annex-step-field {
    position: relative;
    display: block;
    align-content: center;
    min-height: 38px;
    margin: 0;
    padding-top: .45rem;
}

.salary-annex-reference-grid label > span,
.salary-annex-status-field > span,
.salary-annex-step-field > span {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 1;
    padding: 0 5px;
    background: transparent;
    color: #475569;
    font-size: .72rem;
    line-height: 1;
    font-weight: 500;
    pointer-events: none;
    transform-origin: left center;
    transform: translateY(calc(.45rem + 11px)) scale(1.14);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, background-color .16s ease .04s;
}

.salary-annex-reference-grid label:focus-within > span:first-child,
.salary-annex-reference-grid label.has-floating-label > span:first-child,
.salary-annex-reference-grid label.is-dirty > span:first-child,
.salary-annex-reference-grid label:has(input[type="date"]) > span:first-child,
.salary-annex-status-field > span,
.salary-annex-step-field > span {
    color: #00796b;
    background: #fff;
    transform: translateY(0) scale(1);
}

.salary-annex-reference-grid label.is-empty > span:first-child {
    color: #dc2626 !important;
}

.salary-annex-reference-grid label.is-dirty > span:first-child {
    color: #ca8a04 !important;
}

.salary-annex-reference-grid .form-control,
.salary-annex-grade-field .form-select,
.salary-annex-single-rate-table .form-control {
    min-height: 38px;
    border-color: #cbd8e6;
    border-radius: 10px;
    color: #10203a;
    font-size: .84rem;
}

.salary-annex-reference-grid label:focus-within > .form-control,
.salary-annex-reference-grid label.has-floating-label > .form-control,
.salary-annex-reference-grid label.is-dirty > .form-control,
.salary-annex-reference-grid label > input[type="date"].form-control {
    padding-top: .92rem;
    padding-bottom: .18rem;
}

.salary-annex-label-field {
    grid-column: span 6;
}

.salary-annex-budget-number-field,
.salary-annex-budget-date-field {
    grid-column: span 3;
}

.salary-annex-executive-date-field,
.salary-annex-executive-number-field,
.salary-annex-effective-date-field,
.salary-annex-status-field {
    grid-column: span 3;
}

.salary-annex-status-field {
    position: relative;
    min-height: 38px;
    padding: 10px 3.35rem 8px 12px;
    border: 1px solid #cbd8e6;
    border-radius: 10px;
    background: #f8fafc;
}

.salary-annex-status-field > span {
    top: -6px !important;
    left: 12px !important;
    color: #00796b !important;
    background: #fff !important;
    transform: translateY(0) scale(1) !important;
}

.salary-annex-status-field strong {
    color: #10203a;
    font-size: .86rem;
}

.salary-annex-status-field .salary-annex-status-switch {
    top: 50% !important;
    right: .65rem !important;
}

.salary-annex-status-field .salary-annex-status-switch:has(input:checked),
.salary-annex-status-field .salary-annex-status-switch.is-on {
    background: transparent !important;
    border-color: transparent !important;
}

.salary-annex-status-field .salary-annex-status-switch:has(input:checked) .optional-switch-track,
.salary-annex-status-field .salary-annex-status-switch.is-on .optional-switch-track {
    background: #bbf7d0 !important;
    border-color: #86efac !important;
}

.salary-annex-status-field .salary-annex-status-switch:has(input:checked) .optional-switch-track::after,
.salary-annex-status-field .salary-annex-status-switch.is-on .optional-switch-track::after {
    transform: translate(12px, -50%) !important;
}

.salary-annex-rate-section {
    display: grid;
    gap: 9px;
    padding: 10px 14px 12px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 14px !important;
    background: #fbfdff !important;
}

.salary-annex-table-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding-right: 126px;
}

.salary-annex-table-title {
    margin: 0 !important;
    color: #0f766e !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.salary-annex-rate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    justify-content: stretch;
}

.salary-annex-grade-field {
    position: absolute;
    top: 0;
    right: 0;
    width: 118px;
    min-height: 38px;
    margin-bottom: 0;
    padding-top: .45rem;
}

.salary-annex-grade-notice {
    position: absolute;
    top: .45rem;
    right: 126px;
    min-width: 150px;
    max-width: 260px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .85rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.salary-annex-grade-notice.is-success {
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #86efac;
}

.salary-annex-grade-notice.is-error {
    color: #b91c1c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.salary-annex-grade-field > span {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 2;
    display: inline-block;
    height: auto;
    padding: 0 5px;
    color: #00796b;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    text-transform: none;
    background: #fff;
    pointer-events: none;
    transform: none;
}

.salary-annex-grade-picker {
    z-index: 6;
}

.salary-annex-grade-picker.is-open {
    z-index: 20;
}

.salary-annex-grade-native,
.salary-annex-grade-native-bridge {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.salary-annex-grade-select {
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: .88rem 2rem .18rem .75rem;
    text-align: left;
    background-color: #fff;
    border: 1px solid #cbd8e6;
    border-radius: 10px;
    color: #10203a;
    font-size: .84rem;
    line-height: 1.2;
    cursor: pointer;
}

.salary-annex-grade-select:hover,
.salary-annex-grade-select:focus-visible,
.salary-annex-grade-picker.is-open .salary-annex-grade-select {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    outline: none;
}

.salary-annex-grade-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 25;
    display: none;
    width: 100%;
    max-height: 160px;
    overflow-y: auto;
    padding: 5px;
    background: #fff;
    border: 1px solid #cbd8e6;
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.salary-annex-grade-picker.is-open .salary-annex-grade-menu {
    display: block;
}

.salary-annex-grade-option {
    width: 100%;
    min-height: 30px;
    padding: .35rem .55rem;
    display: block;
    color: #10203a;
    font-size: .82rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.salary-annex-grade-option:hover,
.salary-annex-grade-option:focus-visible {
    background: #ecfdf5;
    color: #0f766e;
    outline: none;
}

.salary-annex-grade-option.is-selected {
    background: #0f766e;
    color: #fff;
}

.salary-annex-step-field {
    grid-column: 1 / -1;
    max-width: none;
    align-self: stretch;
}

.salary-annex-single-rate-wrap {
    overflow-x: auto;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    background: #fff;
}

.salary-annex-single-rate-table {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-collapse: collapse;
    table-layout: fixed;
}

.salary-annex-single-rate-table th,
.salary-annex-single-rate-table td {
    padding: 5px;
    border-right: 1px solid #e2e8f0;
    text-align: center;
}

.salary-annex-single-rate-table th:last-child,
.salary-annex-single-rate-table td:last-child {
    border-right: 0;
}

.salary-annex-single-rate-table th {
    background: #f5f8fb;
    color: #263b59;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.salary-annex-single-rate-table th.is-zero-rate {
    color: #dc2626 !important;
}

.salary-annex-single-rate-table .salary-annex-rate-input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: .45rem .65rem !important;
    text-align: left !important;
    direction: ltr !important;
    display: block;
    font-variant-numeric: tabular-nums;
}

.salary-annex-reference-popup .salary-annex-single-rate-table input.salary-annex-rate-input.form-control,
.salary-annex-reference-popup .salary-annex-single-rate-table input.salary-annex-rate-input.edit-control {
    text-align: left !important;
    padding-inline: .65rem !important;
}

.salary-annex-reference-popup .salary-annex-single-rate-table input.salary-annex-rate-input.is-invalid-rate {
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

.salary-annex-reference-actions {
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.salary-annex-reference-import-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.salary-annex-reference-import-actions .salary-annex-template-icon-button {
    width: 40px;
    min-width: 40px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.salary-annex-reference-import-actions .salary-annex-import-button {
    position: relative;
    min-width: 86px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.salary-annex-reference-import-actions .salary-annex-import-native-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .salary-annex-reference-grid {
        grid-template-columns: 1fr;
    }

    .salary-annex-label-field,
    .salary-annex-budget-number-field,
    .salary-annex-budget-date-field,
    .salary-annex-executive-date-field,
    .salary-annex-executive-number-field,
    .salary-annex-effective-date-field,
    .salary-annex-status-field,
    .salary-annex-grade-field,
    .salary-annex-step-field {
        grid-column: auto;
    }

    .salary-annex-rate-grid {
        grid-template-columns: 1fr;
    }

    .salary-annex-reference-actions {
        align-items: stretch;
    }

    .salary-annex-reference-import-actions {
        margin-right: 0;
    }
}

@media (max-width: 900px) {
    .salary-annex-settings-page-panel .salary-annex-settings-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Installable HRIS-EMS web app prompt */
.pwa-install-notice[hidden] {
    display: none !important;
}

.pwa-install-notice {
    z-index: 1200;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(440px, calc(100vw - 32px));
    min-height: 82px;
    padding: 13px 16px;
    color: #17233A;
    background: rgba(255, 255, 255, .99);
    border: 1px solid #DDE5EF;
    border-radius: 16px;
    box-shadow:
        0 22px 56px rgba(15, 23, 42, .22),
        0 4px 14px rgba(15, 23, 42, .10);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pwa-install-notice-bottom {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 14px) scale(.98);
}

.pwa-install-notice-login {
    position: relative;
    box-sizing: border-box;
    grid-template-columns: 46px minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 20px;
    padding: 16px;
    gap: 12px;
    background: #f3faf8;
    border-color: #d4e8e2;
    box-shadow: 0 4px 14px rgba(15, 118, 110, .06);
    transform: translateY(12px) scale(.98);
}

.pwa-install-notice-login .pwa-install-details strong {
    white-space: normal;
    overflow: visible;
    color: #173f3a;
    font-size: .94rem;
    line-height: 1.4;
}

.pwa-install-notice-login .pwa-install-details small {
    font-size: .8rem;
    line-height: 1.5;
}

.pwa-install-notice-login .pwa-install-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 2px;
}

.pwa-install-notice-login .pwa-install-actions button {
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    font-family: inherit;
    line-height: 1.3;
}

.pwa-install-notice-login .pwa-install-later-button {
    color: #47635d;
    background: #e5f0ec;
}

.pwa-install-notice-login .pwa-install-actions button:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 3px;
}

.pwa-install-notice.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.pwa-install-notice-bottom.is-visible {
    transform: translate(-50%, 0) scale(1);
}

.pwa-install-notice-login.is-visible {
    transform: translateY(0) scale(1);
}

.pwa-install-app-icon {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
    padding: 3px;
    border: 1px solid #DCE5EE;
    border-radius: 12px;
    background: #F8FAFC;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .10);
}

.pwa-install-details {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pwa-install-details strong {
    overflow: hidden;
    color: #17233A;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-install-details small {
    color: #66758A;
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.35;
}

.pwa-install-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pwa-install-later-button,
.pwa-install-confirm-button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.pwa-install-later-button {
    color: #64748B;
    background: #F1F5F9;
}

.pwa-install-later-button:hover,
.pwa-install-later-button:focus-visible {
    color: #334155;
    background: #E7EDF4;
    outline: none;
}

.pwa-install-confirm-button {
    min-width: 70px;
    color: #FFFFFF;
    background: #0F766E;
    box-shadow: 0 7px 17px rgba(15, 118, 110, .28);
}

.pwa-install-confirm-button:hover,
.pwa-install-confirm-button:focus-visible {
    background: #0B655F;
    box-shadow: 0 9px 21px rgba(15, 118, 110, .34);
    outline: none;
    transform: translateY(-1px);
}

.pwa-install-confirm-button:disabled {
    cursor: wait;
    opacity: .7;
    transform: none;
}

.login-window-stack {
    width: min(460px, calc(100vw - 2rem));
    display: grid;
    justify-items: stretch;
}

.login-window-stack .login-panel {
    width: 100%;
}

/* The inline install card increases the login stack height. Allow the auth
   shell to scroll on short browser or PWA windows instead of clipping it. */
.login-only-layout main,
.login-only-layout .content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.login-only-layout .login-shell {
    min-height: 100vh;
}

@media (display-mode: standalone) {
    .pwa-install-notice {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .pwa-install-notice {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px 11px;
        width: calc(100vw - 24px);
        padding: 12px 13px;
    }

    .pwa-install-app-icon {
        width: 42px;
        height: 42px;
    }

    .pwa-install-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .pwa-install-notice-login {
        width: 100%;
    }

    .login-window-stack {
        width: min(460px, calc(100vw - 2rem));
    }
}

@media (max-height: 720px) {
    .pwa-install-notice-bottom {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-notice,
    .pwa-install-later-button,
    .pwa-install-confirm-button {
        transition: none;
    }
}

/* Department and Position reference pages: responsive browser/PWA resize fix.
   The Employee List switches to a separate mobile card list below 1180px,
   but these reference pages do not have that alternate markup. Keep their
   tables rendered and provide horizontal scrolling at every window size. */
.employee-reference-panel.reference-list-panel {
    min-width: 0;
    max-width: 100%;
}

.employee-reference-panel .reference-list-table-wrap {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-gutter: stable;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.employee-reference-panel .reference-list-table {
    margin-bottom: 0;
}

@media (max-width: 1180px) {
    .employee-reference-panel .reference-list-table-wrap.employee-records-table-wrap {
        display: block !important;
        border: 1px solid #F1F5F9;
        border-radius: 14px;
    }

    .employee-reference-panel .pagination-row-with-jump {
        width: 100%;
        min-width: 0;
    }
}

/* Preserve the normal reference-table layout on compact windows. The global
   phone rules convert employee tables to cards and remove their headings;
   that card layout is intended only for the Employee List. */
@media (max-width: 720px) {
    .employee-reference-panel .reference-list-table-wrap {
        margin-inline: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        border: 1px solid #F1F5F9 !important;
        border-radius: 14px !important;
    }

    .employee-reference-panel .reference-list-table.department-reference-table {
        width: 900px !important;
        min-width: 900px !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .employee-reference-panel .reference-list-table.position-reference-table {
        width: 1240px !important;
        min-width: 1240px !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .employee-reference-panel .reference-list-table thead {
        display: table-header-group !important;
    }

    .employee-reference-panel .reference-list-table tbody {
        display: table-row-group !important;
    }

    .employee-reference-panel .reference-list-table tr {
        position: static !important;
        display: table-row !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .employee-reference-panel .reference-list-table th,
    .employee-reference-panel .reference-list-table td,
    .employee-reference-panel .reference-list-table td[data-label],
    .employee-reference-panel .reference-list-table td[data-label="#"] {
        position: static !important;
        display: table-cell !important;
        width: auto;
        max-width: none !important;
        min-height: 0 !important;
        padding: .75rem .7rem !important;
        border: 1px solid var(--border) !important;
        border-radius: 0 !important;
        background: transparent;
        box-shadow: none !important;
        white-space: normal;
        vertical-align: middle;
    }

    .employee-reference-panel .reference-list-table td::before {
        content: none !important;
        display: none !important;
    }

    .employee-reference-panel .reference-list-table td.action-cell {
        padding: .65rem !important;
        border-top: 1px solid var(--border) !important;
    }

    .employee-reference-panel .reference-list-table .row-actions {
        display: flex !important;
        width: auto !important;
        grid-template-columns: none !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    .employee-reference-panel .reference-list-table .inline-action-form {
        width: auto !important;
    }

    .employee-reference-panel .reference-list-table .action-button {
        width: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .employee-reference-panel .records-toolbar {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
    }

    .employee-reference-panel .records-result-count {
        grid-column: 1;
        min-width: 0;
        white-space: normal;
    }

    .employee-reference-panel .reference-filter-form .search-composer {
        grid-column: 2;
    }

    .employee-reference-panel .reference-filter-form .filter-actions {
        grid-column: 3;
    }

    .employee-reference-panel .reference-filter-form .reference-filter-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .employee-reference-panel .records-toolbar {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        column-gap: .45rem !important;
    }

    .employee-reference-panel .pagination-row-with-jump,
    .employee-reference-panel .pagination-jump-form {
        align-items: stretch;
    }

    .employee-reference-panel .pagination-row-with-jump > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        width: 100%;
    }

    .employee-reference-panel .pagination-row-with-jump > div .btn {
        width: 100%;
        text-align: center;
    }
}

/* Employee Edit modal and tabbed panels */
.employee-edit-modal {
    padding: clamp(.65rem, 1.4vw, 1.4rem);
}

.employee-edit-modal-panel {
    width: min(1500px, calc(100vw - 1.5rem));
    height: min(930px, calc(100vh - 1.5rem));
    border-radius: 18px;
}

.employee-edit-modal-header {
    min-height: 58px;
    padding: .9rem 1.25rem;
    background: #FFFFFF;
}

.employee-edit-modal-title {
    font-size: 1.05rem;
}

.employee-edit-tabs-shell {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #FFFFFF;
    overflow: hidden;
}

.employee-edit-tablist {
    display: flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    padding: .65rem .85rem 0;
    overflow-x: auto;
    scrollbar-width: thin;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.employee-edit-tab {
    position: relative;
    flex: 0 0 auto;
    min-width: 124px;
    padding: .72rem 1rem .8rem;
    color: #64748B;
    font-size: .86rem;
    font-weight: 750;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 10px 10px 0 0;
    transition: color .16s ease, background-color .16s ease;
}

.employee-edit-tab::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: -1px;
    height: 3px;
    background: transparent;
    border-radius: 999px 999px 0 0;
}

.employee-edit-tab:hover,
.employee-edit-tab:focus-visible {
    color: var(--primary);
    background: #ECFDF5;
    outline: none;
}

.employee-edit-tab.is-active {
    color: var(--primary);
    background: #FFFFFF;
}

.employee-edit-tab.is-active::after {
    background: var(--primary);
}

.employee-edit-tab-panels {
    min-height: 0;
    padding: 1rem;
    overflow: auto;
    overscroll-behavior: contain;
    background: #F8FAFC;
}

.employee-edit-tab-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.employee-edit-tab-panel[hidden] {
    display: none !important;
}

.employee-edit-tab-panel .edit-section {
    margin: 0;
    border-radius: 14px;
    box-shadow: none;
}

.employee-edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    min-height: 66px;
    padding: .8rem 1rem;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

.employee-edit-modal-footer .btn {
    min-width: 112px;
}

.employee-documents-empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .85rem;
    padding: 2rem;
    color: #64748B;
    text-align: center;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 14px;
}

.employee-documents-placeholder-icon {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--primary);
}

.employee-documents-empty-state h3 {
    margin: 0 0 .3rem;
    color: #334155;
    font-size: 1rem;
    font-weight: 800;
}

.employee-documents-empty-state p {
    max-width: 560px;
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
}

body.is-embedded-edit {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

body.is-embedded-edit .page,
body.is-embedded-edit main,
body.is-embedded-edit .content {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

body.is-embedded-edit .employee-edit-form {
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
}

body.is-embedded-edit .employee-edit-tabs-shell {
    width: 100%;
    height: 100vh;
    border: 0;
    border-radius: 0;
}

body.is-embedded-edit .alert {
    position: fixed;
    top: .75rem;
    left: 50%;
    z-index: 50;
    width: min(720px, calc(100% - 1.5rem));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .15);
}

@media (min-width: 1180px) {
    body.is-embedded-edit .employee-edit-form .personal-row-one {
        grid-template-columns: minmax(110px, .6fr) repeat(3, minmax(0, 1.35fr)) minmax(120px, .65fr);
    }

    body.is-embedded-edit .employee-edit-form .personal-row-two {
        grid-template-columns: minmax(145px, .9fr) minmax(260px, 2.1fr) repeat(3, minmax(140px, .9fr));
    }

    body.is-embedded-edit .employee-edit-form .personal-row-three {
        grid-template-columns: minmax(190px, .8fr) minmax(220px, 1fr) minmax(360px, 2fr);
    }

    body.is-embedded-edit .employee-edit-form .education-row-one {
        grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.5fr) minmax(260px, 1.5fr) minmax(120px, .65fr);
    }

    body.is-embedded-edit .employee-edit-form .other-row-one {
        grid-template-columns: minmax(250px, 1.7fr) repeat(3, minmax(165px, 1fr));
    }

    body.is-embedded-edit .employee-edit-form .other-row-two {
        grid-template-columns: repeat(4, minmax(145px, 1fr)) repeat(3, minmax(100px, .65fr));
    }

    body.is-embedded-edit .employee-edit-form .account-number-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.is-embedded-edit .employee-edit-form .employment-row-one {
        grid-template-columns: minmax(125px, .55fr) minmax(145px, .65fr) minmax(250px, 2.2fr) minmax(165px, .85fr) minmax(180px, .9fr);
    }

    body.is-embedded-edit .employee-edit-form .employment-row-two {
        grid-template-columns: minmax(250px, 2fr) repeat(4, minmax(155px, .85fr));
    }

    body.is-embedded-edit .employee-edit-form .eligibility-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 721px) and (max-width: 1179px) {
    body.is-embedded-edit .employee-edit-form :where(
        .personal-row,
        .personal-row-one,
        .personal-row-two,
        .personal-row-three,
        .employment-row,
        .employment-row-one,
        .employment-row-two,
        .other-row,
        .other-row-one,
        .other-row-two,
        .education-row,
        .education-row-one,
        .account-number-grid,
        .eligibility-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    body.is-embedded-edit .employee-edit-form .address-field,
    body.is-embedded-edit .employee-edit-form .birthplace-field,
    body.is-embedded-edit .employee-edit-form .employment-position-field,
    body.is-embedded-edit .employee-edit-form .employment-department-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .employee-edit-modal {
        padding: 0;
    }

    .employee-edit-modal-panel {
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .employee-edit-modal-header {
        min-height: 54px;
        padding: .7rem .85rem;
    }

    .employee-edit-tablist {
        padding-inline: .5rem;
    }

    .employee-edit-tab {
        min-width: 106px;
        padding-inline: .75rem;
    }

    .employee-edit-tab-panels {
        padding: .7rem;
    }

    .employee-edit-modal-footer {
        min-height: 62px;
        padding: .7rem;
    }

    .employee-edit-modal-footer .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Employee Edit portrait modal and Personal tab field order */
.employee-edit-modal-panel {
    width: min(820px, calc(100vw - 1.5rem));
    height: min(950px, calc(100vh - 1.5rem));
}

.employee-edit-form .personal-info-portrait-grid,
.employee-edit-form .education-info-portrait-grid {
    width: 100%;
    margin-inline: 0;
    gap: .85rem;
}

.employee-edit-form .personal-row-single {
    grid-template-columns: minmax(0, 1fr) !important;
}

.employee-edit-form .personal-row-pair,
.employee-edit-form .education-row-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .85rem 1rem;
}

.employee-edit-form .education-row-full {
    grid-template-columns: minmax(0, 1fr) !important;
}

.employee-edit-form .education-row-full > label {
    grid-column: 1 / -1 !important;
    width: 100%;
}

.employee-edit-form .strict-format-helper {
    display: block;
    margin: .3rem 0 0 .75rem;
    color: #DC2626;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
}

.employee-edit-form .strict-format-helper[hidden] {
    display: none !important;
}

.employee-edit-form .is-format-invalid.form-control {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, .12);
}

.employee-edit-form .education-info-portrait-grid .eligibility-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem;
}

.employee-edit-form .personal-info-portrait-grid .address-field,
.employee-edit-form .personal-info-portrait-grid .birthplace-field {
    grid-column: auto !important;
}

@media (max-width: 720px) {
    .employee-edit-form .personal-row-pair,
    .employee-edit-form .education-row-pair {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* Employee Edit compact tabs, portrait photo upload, and education menu sizing */
.employee-edit-modal-panel {
    height: min(820px, calc(100vh - 3rem));
}

.employee-edit-tablist {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.employee-edit-tablist::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.employee-edit-form .employee-id-photo-row {
    align-items: stretch;
}

.employee-photo-upload-field {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .45rem .65rem;
    min-width: 0;
    padding-top: .45rem;
}

.employee-photo-upload-caption {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 2;
    padding: 0 .25rem;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    background: #FFFFFF;
    border-radius: 4px;
}

.employee-photo-upload-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .85rem;
    color: var(--primary);
    font-size: .84rem;
    font-weight: 750;
    background: var(--teal-soft);
    border: 1px solid #99D8CF;
    border-radius: 13px;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.employee-photo-upload-button:hover,
.employee-photo-upload-button:focus-within {
    color: var(--primary-hover);
    background: var(--teal-selected);
    border-color: #5FB8AB;
}

.employee-photo-upload-button:active {
    transform: translateY(1px);
}

.employee-photo-upload-field > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.employee-photo-file-name {
    min-width: 0;
    color: #64748B;
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-edit-form select[data-visible-options="4"] + .smooth-select-shell .smooth-select-menu {
    max-height: 154px;
}

.employee-edit-tab-panel[data-employee-edit-panel="employment"] .employee-documents-empty-state {
    min-height: 190px;
}

@media (max-width: 720px) {
    .employee-edit-modal-panel {
        height: 100dvh;
    }

    .employee-photo-upload-field {
        grid-template-columns: minmax(0, 1fr);
    }
}

.icon-upload {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E");
}


/* Employee Edit: modern desktop date fields and calendar button. */
.employee-edit-form .employee-date-field {
    position: relative;
}

.employee-edit-form .employee-date-field > input[type="date"].form-control {
    min-height: 44px;
    padding: .62rem 3.1rem .62rem .88rem;
    color: #172033;
    font-size: .86rem;
    font-weight: 600;
    color-scheme: light;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
    border: 1px solid #CFDAE6;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

.employee-edit-form .employee-date-field > input[type="date"].form-control:hover:not(:disabled) {
    border-color: #8BBDB6;
    background: #FFFFFF;
}

.employee-edit-form .employee-date-field > input[type="date"].form-control:focus {
    border-color: #0F8A7D;
    background: #FFFFFF;
    box-shadow: 0 0 0 .2rem rgba(15, 138, 125, .13), 0 10px 24px rgba(15, 23, 42, .08);
    outline: none;
}

.employee-edit-form .employee-date-field > input[type="date"]::-webkit-datetime-edit {
    padding: 0;
}

.employee-edit-form .employee-date-field > input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.employee-edit-form .employee-date-field > input[type="date"]::-webkit-calendar-picker-indicator {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: .42rem;
    cursor: pointer;
    opacity: 1;
    border-radius: 10px;
    background-color: #E8F7F4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3Cpath d='M8 15h.01M12 15h.01M16 15h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.12rem;
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.employee-edit-form .employee-date-field > input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: #D7F1EC;
    box-shadow: 0 0 0 .14rem rgba(15, 118, 110, .1);
    transform: scale(1.04);
}

.employee-edit-form .employee-date-field > input[type="date"]:disabled::-webkit-calendar-picker-indicator {
    cursor: default;
    opacity: .45;
}

/* Employee Edit: custom modern calendar. The native browser calendar is hidden because
   Chromium does not expose its expanded popup for application styling. */
.employee-edit-form .employee-date-field > input.modern-date-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.employee-edit-form .employee-date-field .modern-date-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    width: 100%;
    min-height: 44px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #CFDAE6;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.employee-edit-form .employee-date-field .modern-date-control:hover:not(.is-disabled) {
    border-color: #8BBDB6;
}

.employee-edit-form .employee-date-field .modern-date-control.is-focused,
.employee-edit-form .employee-date-field .modern-date-control.is-open {
    border-color: #0F8A7D;
    box-shadow: 0 0 0 .2rem rgba(15, 138, 125, .13), 0 10px 24px rgba(15, 23, 42, .08);
}

.employee-edit-form .employee-date-field .modern-date-control.is-invalid {
    border-color: #DC2626;
    box-shadow: 0 0 0 .18rem rgba(220, 38, 38, .12);
}

.employee-edit-form .employee-date-field .modern-date-display.form-control {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: .62rem .86rem;
    color: #172033;
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.35;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.employee-edit-form .employee-date-field .modern-date-display::placeholder {
    color: #667085;
    font-weight: 400;
    opacity: 1;
}

.employee-edit-form .employee-date-field .modern-date-trigger {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0;
    color: #0F766E;
    background: #F0FAF8;
    border: 0;
    border-left: 1px solid #D9E5E3;
    border-radius: 0;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

.employee-edit-form .employee-date-field .modern-date-trigger:hover:not(:disabled),
.employee-edit-form .employee-date-field .modern-date-trigger:focus-visible {
    color: #0B5F58;
    background: #DDF4F0;
    outline: none;
}

.employee-edit-form .employee-date-field .modern-date-trigger-icon {
    width: 19px;
    height: 19px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.employee-edit-form .employee-date-field .modern-date-control.is-disabled {
    background: #F8FAFC;
    border-color: #D7DEE8;
    box-shadow: none;
}

.employee-edit-form .employee-date-field .modern-date-control.is-disabled .modern-date-display,
.employee-edit-form .employee-date-field .modern-date-control.is-disabled .modern-date-trigger {
    color: #94A3B8;
    cursor: default;
}

.modern-date-popover {
    position: fixed;
    z-index: 4000;
    width: min(326px, calc(100vw - 24px));
    padding: 14px;
    color: #172033;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #DCE5EC;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 4px 14px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px);
    animation: modernDateIn .16s ease-out;
}

/* Keep custom calendars above native modal dialogs by promoting them to the
   browser top layer. Reset the popover defaults so JS viewport positioning
   remains authoritative. */
.modern-date-popover[popover] {
    inset: auto;
    margin: 0;
}

.modern-date-popover[hidden] {
    display: none !important;
}

@keyframes modernDateIn {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modern-date-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.modern-date-nav {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #334155;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    transition: color .14s ease, background-color .14s ease, border-color .14s ease, transform .14s ease;
}

.modern-date-nav:hover,
.modern-date-nav:focus-visible {
    color: #0F766E;
    background: #ECFDF8;
    border-color: #B7E3DA;
    outline: none;
    transform: translateY(-1px);
}

.modern-date-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 6px;
}

.modern-picker-dropdown {
    position: relative;
    min-width: 0;
}

.modern-picker-dropdown-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 10px 0 11px;
    color: #172033;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    background: #fff;
    border: 1px solid #d7e1e9;
    border-radius: 10px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.modern-picker-dropdown-button:hover,
.modern-picker-dropdown-button:focus-visible,
.modern-picker-dropdown.is-open .modern-picker-dropdown-button {
    border-color: #0f8a7d;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 138, 125, .11);
}

.modern-picker-dropdown-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-picker-dropdown-chevron {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin: -3px 1px 0 8px;
    border-right: 1.5px solid #526174;
    border-bottom: 1.5px solid #526174;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.modern-picker-dropdown.is-open .modern-picker-dropdown-chevron {
    margin-top: 3px;
    transform: rotate(225deg);
}

.modern-picker-dropdown-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    display: grid;
    max-height: 183px;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff;
    border: 1px solid #d7e1e9;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
    animation: modernPickerMenuIn .14s ease-out;
}

.modern-picker-dropdown-menu[hidden] {
    display: none !important;
}

.modern-picker-dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 35px;
    padding: 6px 9px;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.modern-picker-dropdown-option:hover,
.modern-picker-dropdown-option:focus-visible {
    color: #0f766e;
    background: #edf8f6;
    outline: 0;
}

.modern-picker-dropdown-option.is-selected {
    color: #fff;
    font-weight: 600;
    background: #0f8177;
}

@keyframes modernPickerMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.modern-date-year-dropdown .modern-picker-dropdown-menu {
    min-width: 96px;
}

.modern-time-source {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.modern-time-control {
    width: 100%;
    height: var(--coc-control-height, 46px);
    min-height: var(--coc-control-height, 46px);
}

.modern-time-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: var(--coc-control-radius, 10px);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.modern-time-trigger:hover,
.modern-time-trigger:focus-visible,
.modern-time-control.is-open .modern-time-trigger {
    border-color: #0f8177;
    outline: 0;
    box-shadow: 0 0 0 .16rem rgba(20, 184, 166, .16);
}

.modern-time-trigger:disabled {
    color: #94a3b8;
    background: #f8fafc;
    cursor: not-allowed;
}

.modern-time-trigger-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.modern-time-popover {
    position: fixed;
    z-index: 4100;
    width: min(300px, calc(100vw - 24px));
    padding: 13px;
    color: #172033;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    background: rgba(255, 255, 255, .99);
    border: 1px solid #d7e1e9;
    border-radius: 14px;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .08);
    animation: modernDateIn .16s ease-out;
    overflow: visible;
}

.modern-time-popover[popover] {
    inset: auto;
    margin: 0;
}

.modern-time-popover[hidden] {
    display: none !important;
}

.modern-time-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.modern-time-heading strong {
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
}

.modern-time-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #64748b;
    font: 400 20px/1 Arial, sans-serif;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.modern-time-close:hover,
.modern-time-close:focus-visible {
    color: #0f766e;
    background: #edf8f6;
    border-color: #b7e3da;
    outline: 0;
}

.modern-time-select-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: 8px;
}

.modern-time-dropdown {
    position: relative;
    min-width: 0;
    padding-top: 7px;
}

.modern-time-dropdown-label {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 8px;
    padding: 0 4px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    background: #fff;
    pointer-events: none;
}

.modern-time-dropdown-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 9px;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
}

.modern-time-dropdown-button:hover,
.modern-time-dropdown-button:focus-visible,
.modern-time-dropdown.is-open .modern-time-dropdown-button {
    border-color: #0f8177;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 129, 119, .1);
}

.modern-time-dropdown-chevron {
    width: 7px;
    height: 7px;
    margin: -3px 1px 0 5px;
    border-right: 1.5px solid #64748b;
    border-bottom: 1.5px solid #64748b;
    transform: rotate(45deg);
}

.modern-time-dropdown-menu {
    position: fixed;
    z-index: 4200;
    display: grid;
    max-height: 178px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff;
    border: 1px solid #d7e1e9;
    border-radius: 9px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
    animation: modernPickerMenuIn .14s ease-out;
}

.modern-time-dropdown-menu[hidden] {
    display: none !important;
}

.modern-time-dropdown-option {
    min-height: 34px;
    padding: 5px 8px;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.modern-time-dropdown-option:hover,
.modern-time-dropdown-option:focus-visible {
    color: #0f766e;
    background: #edf8f6;
    outline: 0;
}

.modern-time-dropdown-option.is-selected {
    color: #fff;
    font-weight: 600;
    background: #0f8177;
}

.modern-time-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #edf1f5;
}

.modern-time-action {
    min-height: 35px;
    padding: 0 13px;
    color: #475569;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    background: #f8fafc;
    border: 1px solid #dbe4eb;
    border-radius: 9px;
}

.modern-time-action:hover,
.modern-time-action:focus-visible {
    color: #0f766e;
    border-color: #b7e3da;
    outline: 0;
}

.modern-time-action.is-primary {
    color: #fff;
    background: #0f8177;
    border-color: #0f8177;
}

body.dark-mode .modern-picker-dropdown-button,
body.dark-mode .modern-picker-dropdown-menu,
body.dark-mode .modern-time-trigger,
body.dark-mode .modern-time-popover,
body.dark-mode .modern-time-dropdown-button,
body.dark-mode .modern-time-dropdown-menu,
html[data-theme="dark"] .modern-picker-dropdown-button,
html[data-theme="dark"] .modern-picker-dropdown-menu,
html[data-theme="dark"] .modern-time-trigger,
html[data-theme="dark"] .modern-time-popover,
html[data-theme="dark"] .modern-time-dropdown-button,
html[data-theme="dark"] .modern-time-dropdown-menu {
    color: #e6f0f2;
    background: #10242d;
    border-color: #31505c;
}

body.dark-mode .modern-picker-dropdown-option,
body.dark-mode .modern-time-dropdown-option,
html[data-theme="dark"] .modern-picker-dropdown-option,
html[data-theme="dark"] .modern-time-dropdown-option {
    color: #dce8eb;
}

body.dark-mode .modern-time-dropdown-label,
html[data-theme="dark"] .modern-time-dropdown-label {
    color: #79e0d4;
    background: #10242d;
}

.modern-date-month-select,
.modern-date-year-select {
    width: 100%;
    height: 38px;
    padding: 0 28px 0 10px;
    color: #172033;
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    background-color: #FFFFFF;
    border: 1px solid #DCE5EC;
    border-radius: 11px;
    outline: none;
}

.modern-date-month-select:focus,
.modern-date-year-select:focus {
    border-color: #0F8A7D;
    box-shadow: 0 0 0 .16rem rgba(15, 138, 125, .12);
}

.modern-date-weekdays,
.modern-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.modern-date-weekdays {
    margin-bottom: 5px;
    color: #64748B;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.modern-date-weekdays span {
    display: grid;
    place-items: center;
    height: 28px;
}

.modern-date-day {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    color: #334155;
    font: inherit;
    font-size: .79rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    border-radius: 11px;
    transition: color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.modern-date-day:hover:not(:disabled),
.modern-date-day:focus-visible {
    color: #0F766E;
    background: #EAF8F5;
    outline: none;
    transform: translateY(-1px);
}

.modern-date-day.is-outside {
    color: #B0BAC7;
}

.modern-date-day.is-today:not(.is-selected) {
    color: #0F766E;
    box-shadow: inset 0 0 0 1px #79CFC1;
}

.modern-date-day.is-selected {
    color: #FFFFFF;
    font-weight: 750;
    background: #0F766E;
    box-shadow: 0 7px 14px rgba(15, 118, 110, .24);
}

.modern-date-day:disabled {
    color: #CBD5E1;
    cursor: not-allowed;
}

.modern-date-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 11px;
    border-top: 1px solid #EDF1F5;
}

.modern-date-footer-button {
    min-height: 34px;
    padding: 0 12px;
    color: #64748B;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.modern-date-footer-button:hover,
.modern-date-footer-button:focus-visible {
    color: #0F766E;
    background: #F0FAF8;
    outline: none;
}

.modern-date-footer-button.is-primary {
    color: #FFFFFF;
    background: #0F766E;
}

.modern-date-footer-button.is-primary:hover,
.modern-date-footer-button.is-primary:focus-visible {
    color: #FFFFFF;
    background: #115E59;
}

@media (max-width: 420px) {
    .modern-date-popover {
        padding: 12px;
        border-radius: 17px;
    }

    .modern-date-heading {
        grid-template-columns: minmax(0, 1fr) 82px;
    }
}

/* Employee Edit universal typography and spacing format.
   Keep all Employee Edit tabs, panels, dialogs, controls, and actions aligned to
   one sizing scale without affecting the rest of HRIS-EMS. */
.employee-edit-modal,
.employee-edit-modal-frame,
form[data-employee-edit-tabs],
.psgc-dialog,
.loyalty-overrides-dialog,
.account-dialog,
.modern-date-popover {
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
}

.employee-edit-modal {
    padding: 16px;
}

.employee-edit-modal-panel {
    width: min(820px, calc(100vw - 32px));
    height: min(800px, calc(100dvh - 32px));
    border-radius: 18px;
}

.employee-edit-modal-header {
    min-height: 58px;
    gap: 16px;
    padding: 12px 16px;
}

.employee-edit-modal-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

form[data-employee-edit-tabs] {
    --employee-edit-font-size: 14px;
    --employee-edit-label-size: 12px;
    --employee-edit-heading-size: 16px;
    --employee-edit-control-height: 44px;
    --employee-edit-radius: 12px;
    --employee-edit-panel-radius: 14px;
    --employee-edit-space: 16px;
    color: #374151;
    font-size: var(--employee-edit-font-size);
    font-weight: 400;
    line-height: 1.45;
}

form[data-employee-edit-tabs],
form[data-employee-edit-tabs] *,
form[data-employee-edit-tabs] *::before,
form[data-employee-edit-tabs] *::after {
    box-sizing: border-box;
}

form[data-employee-edit-tabs] .employee-edit-tabs-shell {
    border-radius: 16px;
}

form[data-employee-edit-tabs] .employee-edit-tablist {
    min-height: 56px;
    gap: 4px;
    padding: 8px 16px 0;
}

form[data-employee-edit-tabs] .employee-edit-tab {
    min-width: 124px;
    padding: 12px 16px 13px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 10px 10px 0 0;
}

form[data-employee-edit-tabs] .employee-edit-tab::after {
    left: 16px;
    right: 16px;
    height: 3px;
}

form[data-employee-edit-tabs] .employee-edit-tab-panels {
    padding: var(--employee-edit-space);
}

form[data-employee-edit-tabs] .employee-edit-tab-panel {
    gap: var(--employee-edit-space);
}

form[data-employee-edit-tabs] .edit-section {
    padding: var(--employee-edit-space);
    border-radius: var(--employee-edit-panel-radius);
}

form[data-employee-edit-tabs] .edit-section-heading {
    gap: 12px;
    margin-bottom: 14px;
}

form[data-employee-edit-tabs] .edit-section-heading h2 {
    font-size: var(--employee-edit-heading-size);
    font-weight: 700;
    line-height: 1.35;
}

form[data-employee-edit-tabs] .edit-section-heading > span,
form[data-employee-edit-tabs] .edit-section-heading p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .employment-info-grid,
    .other-info-grid,
    .education-info-grid) {
    gap: 14px;
}

form[data-employee-edit-tabs] :where(
    .personal-row,
    .employment-row,
    .other-row,
    .education-row,
    .account-number-grid,
    .eligibility-list) {
    gap: 14px 16px;
}

form[data-employee-edit-tabs] .eligibility-item {
    gap: 10px;
}

form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .personal-row,
    .employment-info-grid,
    .employment-row,
    .other-info-grid,
    .other-row,
    .education-info-grid,
    .education-row) label,
form[data-employee-edit-tabs] .account-number-grid label,
form[data-employee-edit-tabs] .eligibility-field {
    padding-top: 7px;
}

form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .personal-row,
    .employment-info-grid,
    .employment-row,
    .other-info-grid,
    .other-row,
    .education-info-grid,
    .education-row) label > span:first-child,
form[data-employee-edit-tabs] .account-number-grid label > span:first-child,
form[data-employee-edit-tabs] .eligibility-field > span:first-child,
form[data-employee-edit-tabs] .employee-photo-upload-caption {
    left: 10px;
    padding-inline: 4px;
    font-family: inherit;
    font-size: var(--employee-edit-label-size);
    font-weight: 500;
    line-height: 1.2;
}

form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .personal-row,
    .employment-info-grid,
    .employment-row,
    .other-info-grid,
    .other-row,
    .education-info-grid,
    .education-row) label > span:first-child,
form[data-employee-edit-tabs] .account-number-grid label > span:first-child,
form[data-employee-edit-tabs] .eligibility-field > span:first-child {
    transform: translateY(19px) scale(1.08);
}

form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .personal-row,
    .employment-info-grid,
    .employment-row,
    .other-info-grid,
    .other-row,
    .education-info-grid,
    .education-row) label:focus-within > span:first-child,
form[data-employee-edit-tabs] :where(
    .personal-info-grid,
    .personal-row,
    .employment-info-grid,
    .employment-row,
    .other-info-grid,
    .other-row,
    .education-info-grid,
    .education-row) label.has-floating-label > span:first-child,
form[data-employee-edit-tabs] .account-number-grid label:focus-within > span:first-child,
form[data-employee-edit-tabs] .account-number-grid label.has-floating-label > span:first-child,
form[data-employee-edit-tabs] .eligibility-field:focus-within > span:first-child,
form[data-employee-edit-tabs] .eligibility-field.has-floating-label > span:first-child {
    transform: translateY(0) scale(1);
}

form[data-employee-edit-tabs] .form-control,
form[data-employee-edit-tabs] .form-select,
form[data-employee-edit-tabs] .smooth-select-button {
    min-height: var(--employee-edit-control-height);
    padding: 10px 12px;
    font-family: inherit;
    font-size: var(--employee-edit-font-size);
    font-weight: 400;
    line-height: 20px;
    border-radius: var(--employee-edit-radius);
}

form[data-employee-edit-tabs] .form-control[readonly],
form[data-employee-edit-tabs] .form-select[readonly],
form[data-employee-edit-tabs] .form-control:disabled,
form[data-employee-edit-tabs] .form-select:disabled,
form[data-employee-edit-tabs] .employee-id-control,
form[data-employee-edit-tabs] .amount-control {
    font-size: var(--employee-edit-font-size);
    font-weight: 400;
}

form[data-employee-edit-tabs] textarea.form-control {
    min-height: 88px;
    padding-block: 12px;
    resize: vertical;
}

form[data-employee-edit-tabs] .smooth-select-button {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 10px;
}

form[data-employee-edit-tabs] .smooth-select-menu {
    margin-top: 4px;
    padding: 5px;
    border-radius: 12px;
}

form[data-employee-edit-tabs] .smooth-select-option {
    min-height: 36px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    border-radius: 9px;
}

form[data-employee-edit-tabs] .employee-photo-upload-field {
    gap: 8px 10px;
    padding-top: 7px;
}

form[data-employee-edit-tabs] .employee-photo-upload-button {
    min-height: var(--employee-edit-control-height);
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: var(--employee-edit-radius);
}

form[data-employee-edit-tabs] .employee-photo-file-name {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

form[data-employee-edit-tabs] .modern-date-control {
    min-height: var(--employee-edit-control-height);
    grid-template-columns: minmax(0, 1fr) 44px;
    border-radius: var(--employee-edit-radius);
}

form[data-employee-edit-tabs] .employee-date-field .modern-date-display.form-control {
    min-height: 42px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

form[data-employee-edit-tabs] .employee-date-field .modern-date-trigger {
    width: 44px;
    min-width: 44px;
    min-height: 42px;
}

form[data-employee-edit-tabs] .btn:not(.btn-sm),
.employee-edit-modal-footer .btn {
    min-height: 40px;
    padding: 8px 16px;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 10px;
}

form[data-employee-edit-tabs] .btn-sm {
    min-height: 32px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    border-radius: 8px;
}

form[data-employee-edit-tabs] .employee-edit-modal-footer {
    min-height: 64px;
    gap: 10px;
    padding: 12px 16px;
}

form[data-employee-edit-tabs] .employee-edit-modal-footer .btn {
    min-width: 112px;
}

form[data-employee-edit-tabs] .employee-documents-empty-state {
    min-height: 180px;
    gap: 12px;
    padding: 24px 16px;
    border-radius: 12px;
}

form[data-employee-edit-tabs] .employee-documents-empty-state h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

form[data-employee-edit-tabs] .employee-documents-empty-state p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.psgc-dialog-panel,
.loyalty-overrides-panel,
.account-dialog-panel {
    padding: 16px;
    border-radius: 18px;
}

.psgc-dialog-heading,
.loyalty-overrides-heading,
.account-dialog-heading {
    gap: 12px;
    margin-bottom: 14px;
}

.psgc-dialog-heading h3,
.loyalty-overrides-heading h3,
.account-dialog-heading h3 {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.psgc-dialog-heading p,
.loyalty-overrides-heading p {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.psgc-dialog-grid,
.account-dialog-grid {
    gap: 14px;
}

.psgc-dialog-actions,
.account-dialog-actions {
    gap: 10px;
    margin-top: 14px;
}

.loyalty-overrides-option {
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
}

.loyalty-overrides-option + .loyalty-overrides-option {
    margin-top: 12px;
}

.loyalty-overrides-option-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.modern-date-popover {
    padding: 14px;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    border-radius: 18px;
}

.modern-date-month-select,
.modern-date-year-select {
    height: 38px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

.modern-date-weekdays {
    font-size: 11px;
    font-weight: 600;
}

.modern-date-day {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
}

.modern-date-day.is-selected {
    font-weight: 600;
}

.modern-date-footer-button {
    min-height: 34px;
    padding-inline: 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 720px) {
    .employee-edit-modal {
        padding: 0;
    }

    .employee-edit-modal-panel {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    form[data-employee-edit-tabs] .employee-edit-tablist {
        min-height: 52px;
        padding: 6px 10px 0;
    }

    form[data-employee-edit-tabs] .employee-edit-tab {
        min-width: 104px;
        padding: 11px 12px 12px;
    }

    form[data-employee-edit-tabs] .employee-edit-tab-panels,
    form[data-employee-edit-tabs] .edit-section {
        padding: 12px;
    }

    form[data-employee-edit-tabs] .employee-edit-tab-panel {
        gap: 12px;
    }

    form[data-employee-edit-tabs] .employee-edit-modal-footer {
        min-height: 60px;
        padding: 10px 12px;
    }
}

/* Add Employee required-entry validation and universal Add/Edit modal format. */
.employee-required-summary {
    margin: 0 0 12px;
    padding: 10px 12px;
    color: #B91C1C;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.employee-required-summary[hidden] {
    display: none !important;
}

form[data-employee-edit-tabs] label.is-empty:not(.is-required-invalid) > span:first-child,
form[data-employee-edit-tabs] .eligibility-field.is-empty:not(.is-required-invalid) > span:first-child {
    color: #0F766E !important;
}

form[data-employee-edit-tabs] label:has([name="SSSNo"]).is-empty > span:first-child,
form[data-employee-edit-tabs] label:has([name="SSSNo"]) > span:first-child {
    color: #0F766E !important;
}

form[data-employee-edit-tabs] .is-required-invalid > span:first-child,
form[data-employee-edit-tabs] label.is-required-invalid > span:first-child,
form[data-employee-edit-tabs] .employee-photo-upload-field.is-required-invalid .employee-photo-upload-caption {
    color: #DC2626 !important;
}

form[data-employee-edit-tabs] .form-control.is-required-invalid,
form[data-employee-edit-tabs] .form-select.is-required-invalid,
form[data-employee-edit-tabs] label.is-required-invalid > .form-control,
form[data-employee-edit-tabs] label.is-required-invalid > .form-select,
form[data-employee-edit-tabs] .smooth-select-shell.is-required-invalid .smooth-select-button,
form[data-employee-edit-tabs] label.is-required-invalid .smooth-select-button,
form[data-employee-edit-tabs] .modern-date-control.is-required-invalid,
form[data-employee-edit-tabs] .employee-date-field.is-required-invalid .modern-date-control,
form[data-employee-edit-tabs] .employee-photo-upload-field.is-required-invalid .employee-photo-upload-button {
    color: #B91C1C !important;
    background-color: #FFF7F7 !important;
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

form[data-employee-edit-tabs] .employee-edit-tab.has-validation-error {
    color: #DC2626;
}

form[data-employee-edit-tabs] .employee-edit-tab.has-validation-error::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF4444;
}

/* Universal entry-window design tokens copied from Employee Edit. */
.universal-entry-modal,
.universal-entry-dialog,
.universal-entry-modal input,
.universal-entry-modal select,
.universal-entry-modal textarea,
.universal-entry-modal button,
.universal-entry-dialog input,
.universal-entry-dialog select,
.universal-entry-dialog textarea,
.universal-entry-dialog button {
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
}

.universal-entry-modal,
.universal-entry-dialog {
    --universal-entry-font-size: 14px;
    --universal-entry-label-size: 12px;
    --universal-entry-heading-size: 16px;
    --universal-entry-control-height: 44px;
    --universal-entry-radius: 12px;
    --universal-entry-panel-radius: 14px;
    --universal-entry-space: 16px;
    color: #374151;
    font-size: var(--universal-entry-font-size);
    font-weight: 400;
    line-height: 1.45;
}

.universal-entry-modal.reference-popup-panel {
    padding: 16px 16px 0;
    border-radius: 18px;
}

.universal-entry-modal .reference-popup-heading,
.universal-entry-modal .modal-heading {
    min-height: 54px;
    gap: 16px;
    margin: 0;
    padding: 8px 0 14px;
    align-items: center;
}

.universal-entry-modal .reference-popup-heading h2,
.universal-entry-modal .modal-heading h2,
.universal-entry-dialog :is(.system-user-dialog-heading, .personnel-style-dialog-heading) h3 {
    margin: 0;
    color: #0F766E;
    font-size: var(--universal-entry-heading-size);
    font-weight: 700;
    line-height: 1.35;
}

.universal-entry-modal .reference-popup-heading p,
.universal-entry-modal .modal-heading p,
.universal-entry-dialog :is(.system-user-dialog-heading, .personnel-style-dialog-heading) p {
    margin: 3px 0 0;
    color: #64748B;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.universal-entry-modal .reference-popup-section {
    padding: 16px;
    border: 1px solid #E2E8F0;
    border-radius: var(--universal-entry-panel-radius);
    background: #FFFFFF;
}

.universal-entry-modal :is(.reference-position-popup-grid, .reference-department-popup-grid, .salary-annex-reference-grid, .cos-history-form-grid) {
    gap: 14px 16px;
}

.universal-entry-modal :is(.reference-position-popup-grid, .reference-department-popup-grid, .salary-annex-reference-grid, .cos-history-form-grid) label {
    padding-top: 7px;
}

.universal-entry-modal :is(.reference-position-popup-grid, .reference-department-popup-grid, .salary-annex-reference-grid, .cos-history-form-grid) label > span:first-child,
.universal-entry-dialog label > span:first-child {
    font-size: var(--universal-entry-label-size);
    font-weight: 500;
    line-height: 1.2;
}

.universal-entry-modal :is(.form-control, .form-select, .smooth-select-button),
.universal-entry-dialog :is(.form-control, .form-select) {
    min-height: var(--universal-entry-control-height);
    padding: 10px 12px;
    font-size: var(--universal-entry-font-size);
    font-weight: 400;
    line-height: 20px;
    border-radius: var(--universal-entry-radius);
}

.universal-entry-modal .reference-popup-actions,
.universal-entry-modal .modal-actions,
.universal-entry-dialog .universal-dialog-actions,
.universal-entry-dialog .add-user-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.universal-entry-modal .reference-popup-actions {
    min-height: 64px;
    margin-inline: -16px;
    padding: 12px 16px;
    border-radius: 0 0 18px 18px;
}

.universal-entry-modal .modal-actions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
}

.universal-entry-modal .btn,
.universal-entry-dialog .btn,
.universal-cancel-button {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.universal-cancel-button {
    min-width: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569 !important;
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    text-decoration: none !important;
}

.universal-cancel-button:hover,
.universal-cancel-button:focus-visible {
    color: #334155 !important;
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
}

.universal-entry-dialog {
    border-radius: 18px;
}

.universal-entry-dialog :is(.system-user-dialog-heading, .personnel-style-dialog-heading) {
    padding: 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.universal-entry-dialog :is(.system-user-manage-form, .add-system-user-dialog-body) {
    gap: 14px;
    padding: 16px;
}

.universal-entry-dialog .system-user-manage-form label:not(.system-user-force-change),
.universal-entry-dialog .add-user-form label,
.universal-entry-dialog .employee-search-form label {
    gap: 7px;
}

.universal-entry-dialog .universal-dialog-actions {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
}

.universal-entry-dialog .system-user-delete-form {
    padding: 0 16px 16px;
}

.universal-entry-dialog .add-user-dialog-actions {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
}

.universal-entry-modal.cos-history-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: visible;
    overscroll-behavior: none;
    padding: 14px 16px;
    border-radius: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.universal-entry-modal.cos-history-dialog::-webkit-scrollbar {
    display: none;
}

.cos-history-dialog .modal-heading {
    min-height: 0;
    padding: 4px 0 10px;
}

.cos-history-dialog .cos-history-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.cos-history-dialog .cos-history-form-grid label {
    position: relative;
    padding-top: 7px;
}

.cos-history-dialog .cos-history-form-grid label > span:first-child {
    position: absolute;
    top: 0;
    left: .5rem;
    z-index: 3;
    max-width: calc(100% - 1rem);
    padding: 0 .25rem;
    color: #475569;
    font-size: var(--universal-entry-label-size);
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: left center;
    transform: translateY(calc(.45rem + 11px)) scale(1.08);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease, background-color .16s ease .04s;
}

.cos-history-dialog .cos-history-field-heading > label {
    position: static;
    padding: 0;
}

.cos-history-dialog .cos-history-form-grid label:focus-within > span:first-child,
.cos-history-dialog .cos-history-form-grid label.has-floating-label > span:first-child,
.cos-history-dialog .cos-history-form-grid label:has(.smooth-select-shell.is-open) > span:first-child,
.cos-history-dialog .cos-history-form-grid label.employee-date-field > span:first-child {
    color: #0f766e;
    background: #fff;
    transform: translateY(0) scale(1);
}

.cos-history-dialog .cos-history-form-grid label.is-empty > span:first-child,
.cos-history-dialog .cos-history-to-field.is-empty .cos-history-field-heading > label {
    color: #dc2626 !important;
}

.cos-history-dialog .cos-history-form-grid label.is-dirty > span:first-child,
.cos-history-dialog .cos-history-to-field.is-dirty .cos-history-field-heading > label {
    color: #ca8a04 !important;
}

.cos-history-dialog .cos-history-form-grid label:focus-within > .form-control,
.cos-history-dialog .cos-history-form-grid label.has-floating-label > .form-control {
    padding-top: .92rem;
    padding-bottom: .18rem;
}

.cos-history-date-row,
.cos-history-details-row {
    display: grid;
    gap: 10px 12px;
}

.cos-history-date-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.cos-history-details-row {
    grid-template-columns: minmax(120px, .75fr) minmax(120px, .75fr) minmax(190px, 1.5fr);
}

.cos-history-field {
    display: grid;
    gap: .35rem;
}

.cos-history-to-field {
    position: relative;
    gap: 0;
    padding-top: 7px;
}

.cos-history-field-heading {
    display: flex;
    min-height: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #334155;
    font-size: var(--universal-entry-label-size);
    font-weight: 500;
    line-height: 1.2;
}

.cos-history-to-field .cos-history-field-heading {
    position: absolute;
    top: -2px;
    left: .5rem;
    right: .25rem;
    z-index: 4;
    min-height: 18px;
    pointer-events: none;
}

.cos-history-to-field .cos-history-field-heading > label {
    padding: 0 .25rem;
    background: #fff;
}

.cos-history-present-switch {
    position: absolute !important;
    top: -10px;
    right: 0;
    display: inline-flex !important;
    align-items: center;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer;
    pointer-events: auto;
    background: #fff;
}

.cos-history-dialog .cos-history-present-switch > span:first-of-type {
    position: relative;
    inset: auto;
    max-width: none;
    padding: 0;
    background: #cbd5e1;
    pointer-events: auto;
    transform: none;
}

.cos-history-present-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cos-history-switch-track {
    position: relative;
    width: 30px;
    height: 18px;
    flex: 0 0 30px;
    border: 1px solid #b6c2d1;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .18s ease, border-color .18s ease;
}

.cos-history-switch-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
    transform: translateY(-50%);
    transition: transform .18s ease;
}

.cos-history-present-switch.is-on .cos-history-switch-track,
.cos-history-present-switch:has(input:checked) .cos-history-switch-track {
    border-color: #86efac;
    background: #bbf7d0;
}

.cos-history-present-switch.is-on .cos-history-switch-track::after,
.cos-history-present-switch:has(input:checked) .cos-history-switch-track::after {
    transform: translate(12px, -50%);
}

.cos-history-present-switch:has(input:focus-visible) .cos-history-switch-track {
    box-shadow: 0 0 0 .16rem rgba(20, 184, 166, .2);
}

.cos-history-to-field.is-present .form-control {
    color: #94a3b8;
    background: #f8fafc;
}

.cos-history-dialog .modal-actions {
    margin-top: 12px;
    padding-top: 10px;
}

/* COS employment history uses the same enhanced controls as Employee Edit. */
.cos-history-dialog .employee-date-field {
    position: relative;
}

.cos-history-dialog .employee-date-field > input.modern-date-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.cos-history-dialog .employee-date-field .modern-date-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    width: 100%;
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cos-history-dialog .employee-date-field .modern-date-control.is-invalid {
    border-color: #dc2626;
    background: #fff7f7;
    box-shadow: 0 0 0 .18rem rgba(220, 38, 38, .14);
}

.cos-history-dialog .employee-date-field:has(.modern-date-control.is-invalid) > span:first-child,
.cos-history-dialog .cos-history-to-field:has(.modern-date-control.is-invalid) .cos-history-field-heading > label {
    color: #dc2626 !important;
}

.cos-history-dialog .employee-date-field .modern-date-control:hover:not(.is-disabled) {
    border-color: #8bbdb6;
}

.cos-history-dialog .employee-date-field .modern-date-control.is-focused,
.cos-history-dialog .employee-date-field .modern-date-control.is-open {
    border-color: #0f8a7d;
    box-shadow: 0 0 0 .2rem rgba(15, 138, 125, .13), 0 10px 24px rgba(15, 23, 42, .08);
}

.cos-history-dialog .employee-date-field .modern-date-display.form-control {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    max-height: 42px;
    padding: .62rem .86rem;
    color: #172033;
    font-size: .86rem;
    font-weight: 400;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.cos-history-dialog .employee-date-field .modern-date-trigger {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0;
    color: #0f766e;
    border: 0;
    border-left: 1px solid #dce5ec;
    background: #f5fbfa;
    cursor: pointer;
}

.cos-history-dialog .employee-date-field .modern-date-trigger:hover:not(:disabled),
.cos-history-dialog .employee-date-field .modern-date-trigger:focus-visible {
    color: #0b5f58;
    background: #ddf4f0;
    outline: none;
}

.cos-history-dialog .employee-date-field .modern-date-trigger-icon {
    width: 19px;
    height: 19px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cos-history-dialog .employee-date-field .modern-date-control.is-disabled {
    border-color: #d7dee8;
    background: #f8fafc;
    box-shadow: none;
}

.cos-history-dialog .employee-date-field .modern-date-control.is-disabled :is(.modern-date-display, .modern-date-trigger) {
    color: #94a3b8;
    cursor: default;
}

.cos-history-dialog .smooth-select-shell,
.cos-history-dialog .smooth-select-button {
    width: 100%;
}

.cos-history-dialog .smooth-select-button {
    min-height: 44px;
    border-radius: 12px;
}

.cos-history-dialog .smooth-select-menu {
    z-index: 80;
    max-height: 147px;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .cos-history-date-row,
    .cos-history-details-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .employee-required-summary {
        margin: 0 0 10px;
    }

    .universal-entry-modal.reference-popup-panel,
    .universal-entry-modal.cos-history-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        padding: 12px 12px 0;
        border-radius: 16px;
    }

    .universal-entry-modal .reference-popup-section {
        padding: 12px;
    }

    .universal-entry-modal .reference-popup-actions {
        margin-inline: -12px;
        padding: 10px 12px;
        border-radius: 0 0 16px 16px;
    }

    .universal-entry-modal .reference-popup-actions,
    .universal-entry-modal .modal-actions,
    .universal-entry-dialog .universal-dialog-actions,
    .universal-entry-dialog .add-user-dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .universal-entry-modal .btn,
    .universal-entry-dialog .btn,
    .universal-cancel-button {
        width: 100%;
        min-width: 0;
    }
}


/* 2026-07-14: shared modern date picker for Employee and Salary Annex entry windows. */
/* Keep the generated date control as the only visible control inside Salary Annex fields.
   InputDate remains in the form for Blazor binding but is visually hidden. */
:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field {
    position: relative;
    display: block;
    min-width: 0;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field > .modern-date-control {
    margin: 0;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field > input.modern-date-source {
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
    min-height: 44px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #CFDAE6;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-control:hover:not(.is-disabled) {
    border-color: #8BBDB6;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-control.is-focused,
:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-control.is-open {
    border-color: #0F8A7D;
    box-shadow: 0 0 0 .2rem rgba(15, 138, 125, .13), 0 10px 24px rgba(15, 23, 42, .08);
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-control.is-invalid {
    border-color: #DC2626;
    box-shadow: 0 0 0 .18rem rgba(220, 38, 38, .12);
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-display.form-control {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    color: #172033;
    font-family: "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-display::placeholder {
    color: #667085;
    font-weight: 400;
    opacity: 1;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-trigger {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0;
    color: #0F766E;
    background: #F0FAF8;
    border: 0;
    border-left: 1px solid #D9E5E3;
    border-radius: 0;
    cursor: pointer;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-trigger:hover:not(:disabled),
:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-trigger:focus-visible {
    color: #0B5F58;
    background: #DDF4F0;
    outline: none;
}

:is(.salary-annex-editor-panel, .salary-annex-reference-form) label.modern-date-field .modern-date-trigger-icon {
    width: 19px;
    height: 19px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Employee entry field-state labels: green = saved/value, red = empty, yellow = edited. */
form[data-employee-edit-tabs] label:not(.is-empty):not(.is-dirty):not(.is-required-invalid) > span:first-child,
form[data-employee-edit-tabs] .eligibility-field:not(.is-empty):not(.is-dirty):not(.is-required-invalid) > span:first-child {
    color: #0F8A7D !important;
}

form[data-employee-edit-tabs] label.is-empty:not(.is-required-invalid) > span:first-child,
form[data-employee-edit-tabs] .eligibility-field.is-empty:not(.is-required-invalid) > span:first-child,
form[data-employee-edit-tabs] label:has([name="SSSNo"]).is-empty > span:first-child {
    color: #DC2626 !important;
}

form[data-employee-edit-tabs] label.is-dirty:not(.is-required-invalid) > span:first-child,
form[data-employee-edit-tabs] .eligibility-field.is-dirty:not(.is-required-invalid) > span:first-child {
    color: #CA8A04 !important;
}

/* Casual assignments require an explicit Position and Department selection. */
form[data-employee-edit-tabs] .employment-create-grid.is-unselected > label:is(
    .employment-create-item-field,
    .employment-create-position-field,
    .employment-create-department-field,
    .employment-create-sg-field,
    .employment-create-step-field,
    .employment-create-rate-field) > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid.is-casual > label:is(
    .employment-create-item-field,
    .employment-create-sg-field,
    .employment-create-step-field,
    .employment-create-rate-field) > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid.is-noncasual > label:is(
    .employment-create-position-field,
    .employment-create-department-field,
    .employment-create-sg-field,
    .employment-create-step-field,
    .employment-create-rate-field) > span:first-child {
    color: #0F8A7D !important;
}

form[data-employee-edit-tabs] .employment-create-grid.is-casual > label.employment-create-position-field > span:first-child,
form[data-employee-edit-tabs] .employment-create-grid.is-casual > label.employment-create-department-field > span:first-child {
    color: #DC2626 !important;
}

/* Non-casual assignments require the user to enter the Position Item No. */
form[data-employee-edit-tabs] .employment-create-grid.is-noncasual > label.employment-create-item-field.is-empty > span:first-child {
    color: #DC2626 !important;
}

/* Loyalty Pay current-month priority row: final specificity override.
   The universal dashboard table rules appear later in the stylesheet and set
   every body cell to white, so apply the highlight directly to the cells with
   equal-or-higher specificity and an explicit override. */
.table.dashboard-table.report-table tbody tr.report-row-loyalty-current-month > td {
    background-color: #ECFDF5 !important;
    border-bottom-color: #A7F3D0 !important;
}

.table.dashboard-table.report-table tbody tr.report-row-loyalty-current-month > td:first-child {
    box-shadow: inset 4px 0 0 #0F766E !important;
}

.table.dashboard-table.report-table tbody tr.report-row-loyalty-current-month:hover > td {
    background-color: #D1FAE5 !important;
}

/* Keep the highlight visible in the compact/card report layout as well. */
@media (max-width: 1180px) {
    .table.dashboard-table.report-table tbody tr.report-row-loyalty-current-month > td {
        background-color: #ECFDF5 !important;
    }

    .table.dashboard-table.report-table tbody tr.report-row-loyalty-current-month:hover > td {
        background-color: #D1FAE5 !important;
    }
}

/* Reports conditional formatting: Step Increment current month and retirement alerts.
   Apply colors directly to cells because the universal report table assigns cell backgrounds. */
.table.dashboard-table.report-table tbody tr.report-row-step-current-month > td {
    background-color: #ECFDF5 !important;
    border-bottom-color: #A7F3D0 !important;
}

.table.dashboard-table.report-table tbody tr.report-row-step-current-month > td:first-child {
    box-shadow: inset 4px 0 0 #0F766E !important;
}

.table.dashboard-table.report-table tbody tr.report-row-step-current-month:hover > td {
    background-color: #D1FAE5 !important;
}

/* Turns 65 within the next six months. */
.table.dashboard-table.report-table tbody tr.report-row-retirement-upcoming > td {
    background-color: #FFFBEB !important;
    border-bottom-color: #FDE68A !important;
}

.table.dashboard-table.report-table tbody tr.report-row-retirement-upcoming > td:first-child {
    box-shadow: inset 4px 0 0 #D97706 !important;
}

.table.dashboard-table.report-table tbody tr.report-row-retirement-upcoming:hover > td {
    background-color: #FEF3C7 !important;
}

/* Reached age 65 today or within the previous 30 days. */
.table.dashboard-table.report-table tbody tr.report-row-retirement-recent > td {
    background-color: #FEF2F2 !important;
    border-bottom-color: #FECACA !important;
}

.table.dashboard-table.report-table tbody tr.report-row-retirement-recent > td:first-child {
    box-shadow: inset 4px 0 0 #DC2626 !important;
}

.table.dashboard-table.report-table tbody tr.report-row-retirement-recent:hover > td {
    background-color: #FEE2E2 !important;
}

@media (max-width: 1180px) {
    .table.dashboard-table.report-table tbody tr.report-row-step-current-month > td {
        background-color: #ECFDF5 !important;
    }

    .table.dashboard-table.report-table tbody tr.report-row-step-current-month:hover > td {
        background-color: #D1FAE5 !important;
    }

    .table.dashboard-table.report-table tbody tr.report-row-retirement-upcoming > td {
        background-color: #FFFBEB !important;
    }

    .table.dashboard-table.report-table tbody tr.report-row-retirement-upcoming:hover > td {
        background-color: #FEF3C7 !important;
    }

    .table.dashboard-table.report-table tbody tr.report-row-retirement-recent > td {
        background-color: #FEF2F2 !important;
    }

    .table.dashboard-table.report-table tbody tr.report-row-retirement-recent:hover > td {
        background-color: #FEE2E2 !important;
    }
}



/* COS Modify: work and service fields belong to Other Information */
.cos-other-work-service-row {
    grid-template-columns: minmax(230px, 1.2fr) minmax(210px, 1.05fr) minmax(220px, 1.1fr) minmax(170px, .78fr) minmax(160px, .72fr);
}

.cos-employment-info-grid .cos-employment-row-two {
    grid-template-columns: minmax(180px, .9fr) minmax(180px, .9fr) minmax(190px, 1fr) !important;
}

@media (max-width: 1180px) {
    .cos-other-work-service-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .cos-other-work-service-row,
    .cos-employment-info-grid .cos-employment-row-two {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Employee editor: keep identity in the title bar and validation out of the tabs. */
.employee-edit-modal-heading {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.employee-edit-modal-employee-name {
    min-width: 0;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-edit-modal-footer .employee-required-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 auto 0 0;
    padding: 8px 10px;
}

.employee-edit-modal-footer .employee-required-summary[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .employee-edit-modal-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .employee-edit-modal-employee-name {
        max-width: 100%;
        text-align: left;
    }

    .employee-edit-modal-footer {
        flex-wrap: wrap;
    }

    .employee-edit-modal-footer .employee-required-summary {
        flex-basis: 100%;
    }
}

/* Refresh-stable Salary Adjustment mass-print fieldset controls. */
.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-field {
    position: relative !important;
    display: block !important;
    isolation: isolate !important;
    min-inline-size: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    z-index: 1 !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-field:focus-within {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 .12rem rgba(15, 118, 110, .14) !important;
    z-index: 20 !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-field > legend {
    position: absolute !important;
    top: -7px !important;
    left: 10px !important;
    z-index: 4 !important;
    float: none !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    overflow: visible !important;
    background: #fff !important;
    color: #0f766e !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-field > .form-select,
.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-field > .form-control {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-select-field > .form-select {
    padding-right: 2.1rem !important;
    border: 0 !important;
    border-radius: 11px !important;
    background-color: transparent !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-print-select-field:focus-within > .form-select {
    border: 0 !important;
    box-shadow: none !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-current-date-field {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
}

.salary-adjustment-list-print-dialog fieldset.salary-adjustment-current-date-field:focus-within {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 .12rem rgba(15, 118, 110, .14) !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-text,
.salary-adjustment-list-print-dialog .salary-adjustment-date-switch {
    top: 50% !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-text {
    left: 12px !important;
    transform: translateY(-50%) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field.is-current > .form-control {
    opacity: 1 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    pointer-events: none !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field > .form-control::-webkit-calendar-picker-indicator {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field > input[type="date"].form-control {
    -webkit-appearance: none !important;
    appearance: none !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field.is-custom > .form-control {
    opacity: 1 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    pointer-events: auto !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field .salary-adjustment-date-switch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 34px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field .salary-adjustment-date-switch .optional-switch-track {
    width: 30px !important;
    height: 18px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid #b6c2d1 !important;
    border-bottom-color: #cbd5e1 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    box-shadow: none !important;
    transform: none !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field .salary-adjustment-date-switch .optional-switch-track::after {
    top: 50% !important;
    left: 2px !important;
    width: 14px !important;
    height: 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field .salary-adjustment-date-switch:has(input:focus-visible) {
    box-shadow: 0 0 0 .14rem rgba(20, 184, 166, .18) !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field.is-current .salary-adjustment-date-switch .optional-switch-track,
.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field .salary-adjustment-date-switch.is-on .optional-switch-track {
    background: #bbf7d0 !important;
    border-color: #86efac !important;
}

.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field.is-current .salary-adjustment-date-switch .optional-switch-track::after,
.salary-adjustment-list-print-dialog .salary-adjustment-current-date-field .salary-adjustment-date-switch.is-on .optional-switch-track::after {
    transform: translate(12px, -50%) !important;
}

/* Salary Adjustment modal: match the proven Employee Edit floating-label pattern. */
.salary-adjustment-list-print-dialog label.salary-adjustment-print-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 51px !important;
    min-height: 51px !important;
    padding: 7px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field:focus-within {
    z-index: 20 !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > span:first-child {
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    z-index: 40 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    overflow: hidden !important;
    background: #fff !important;
    color: #0f766e !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transform: none !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .form-select:not(.is-native-hidden),
.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .form-control {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .form-select:not(.is-native-hidden) {
    padding-right: 2.1rem !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .form-select.is-native-hidden {
    position: absolute !important;
    top: 7px !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .print-list-select-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
}

.salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .print-list-select-shell > .smooth-select-button {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

/* Desktop sidebar auto-hide: hover expands with guarded click handling. */
@media (min-width: 641px) {
    .sidebar .brand-panel {
        height: 158px !important;
        min-height: 158px !important;
        padding: 1.15rem 1rem !important;
    }

    .sidebar .nav-scrollable {
        height: calc(100vh - 158px) !important;
    }

    .sidebar {
        /* Keep this shorter than sidebar-menu.js's 250ms pointer guard. */
        transition: width 240ms cubic-bezier(.4, 0, .2, 1),
                    min-width 240ms cubic-bezier(.4, 0, .2, 1) !important;
    }

    .sidebar .brand-panel,
    .sidebar .nav-scrollable {
        transition: height 240ms cubic-bezier(.4, 0, .2, 1),
                    min-height 240ms cubic-bezier(.4, 0, .2, 1),
                    padding 240ms cubic-bezier(.4, 0, .2, 1) !important;
    }

    .sidebar .brand-logo,
    .sidebar .brand-logo img {
        /* Scale both parts together so the seal never gets cropped mid-motion. */
        flex-shrink: 0;
        transition: width 240ms cubic-bezier(.4, 0, .2, 1),
                    height 240ms cubic-bezier(.4, 0, .2, 1),
                    flex-basis 240ms cubic-bezier(.4, 0, .2, 1) !important;
    }

    html.sidebar-collapsed .page > .sidebar {
        width: 82px !important;
        min-width: 82px !important;
    }

    html.sidebar-collapsed .sidebar .brand-panel {
        height: 85px !important;
        min-height: 85px !important;
        padding: 10px 8px !important;
    }

    html.sidebar-collapsed .sidebar .brand-logo {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
        box-shadow: 0 5px 14px rgba(39, 49, 66, .08) !important;
    }

    html.sidebar-collapsed .sidebar .brand-logo img {
        width: 58px !important;
        height: 58px !important;
    }

    html.sidebar-collapsed .sidebar .nav-scrollable {
        height: calc(100vh - 85px) !important;
        padding: 12px 12px 16px !important;
        overflow-x: hidden !important;
    }

    html.sidebar-collapsed .sidebar .nav-section-header,
    html.sidebar-collapsed .sidebar .nav-section-title,
    html.sidebar-collapsed .sidebar .nav-cos-break,
    html.sidebar-collapsed .sidebar .nav-submenu,
    html.sidebar-collapsed .sidebar .employee-drawer-profile,
    html.sidebar-collapsed .sidebar .employee-drawer-section-title,
    html.sidebar-collapsed .sidebar .employee-drawer-separator,
    html.sidebar-collapsed .sidebar .employee-drawer-chevron {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar .nav-item,
    html.sidebar-collapsed .sidebar .nav-reports-group {
        width: 100%;
        margin: 0 0 6px !important;
    }

    html.sidebar-collapsed .sidebar .nav-link,
    html.sidebar-collapsed .sidebar .nav-reports-toggle,
    html.sidebar-collapsed .sidebar .employee-drawer-button {
        min-height: 46px !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 9px !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
        white-space: nowrap !important;
    }

    html.sidebar-collapsed .sidebar .nav-reports-toggle::after {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar .nav-icon,
    html.sidebar-collapsed .sidebar .employee-drawer-icon {
        margin: 0 !important;
    }

    html.sidebar-collapsed .sidebar .nav-reports-group[open] > .nav-reports-toggle {
        box-shadow: none !important;
    }

    html.sidebar-collapsed .sidebar .nav-expanded-category-items {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar .nav-collapsed-category-icon {
        display: block !important;
    }
}

.nav-collapsed-category-icon {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar .brand-panel,
    .sidebar .brand-logo,
    .sidebar .brand-logo img,
    .sidebar .nav-scrollable {
        transition: none !important;
    }
}

/* Final sidebar presentation overrides. These deliberately follow the legacy
   shell rules so older global navigation styles cannot restore bold labels or
   restyle the expand/collapse lock as a menu tile. */
.sidebar .nav-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    width: 100% !important;
    padding-right: .2rem !important;
}

.sidebar .nav-section-header .nav-section-title {
    flex: 1 1 auto !important;
}

.sidebar .nav-section-header-lock-only {
    justify-content: flex-end !important;
    min-height: 38px !important;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-reports-toggle {
    font-weight: 500 !important;
}

.sidebar .nav-cos-break,
.sidebar .nav-section-title {
    font-weight: 600 !important;
}

.sidebar .sidebar-lock-button {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    color: #64748b !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.sidebar .sidebar-lock-button:hover,
.sidebar .sidebar-lock-button:focus-visible,
.sidebar .sidebar-lock-button.is-active {
    color: #0f766e !important;
    background: #e8f7f4 !important;
    border-color: #b9ded7 !important;
}

.sidebar .sidebar-lock-button.is-active {
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .06) !important;
}

.sidebar .sidebar-lock-button .lucide-icon {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
}

/* Keep the shell seamless except for the expanded sidebar's logo divider. */
.page:not(.login-only-layout) > .sidebar,
.page:not(.login-only-layout) > .sidebar .brand-panel,
.page:not(.login-only-layout) > main > .top-row {
    border: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 641px) {
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) > .sidebar .brand-panel {
        border-bottom: 1px solid var(--sidebar-highlight-border, #d6e1e5) !important;
    }
}

.page:not(.login-only-layout) .top-row .system-title {
    min-width: 0;
}

.page:not(.login-only-layout) .top-row .system-title span {
    font-size: .9rem;
    line-height: 1.4;
}

.page:not(.login-only-layout) .top-row .system-title strong {
    font-size: 1.2rem;
    line-height: 1.3;
}

@media (min-width: 641px) and (max-width: 1100px) {
    .page:not(.login-only-layout) .top-row .system-title span { font-size: .84rem; }
    .page:not(.login-only-layout) .top-row .system-title strong { font-size: 1.05rem; }
}

/* Keep hover highlights contained; the selected desktop tab joins the workspace. */
.page:not(.login-only-layout) > .sidebar {
    --hris-sidebar-bg: var(--primary, #0f766e);
    --sidebar-highlight: #ffffff;
    --sidebar-hover: #115e59;
    --sidebar-highlight-border: #438e88;
    --sidebar-highlight-text: var(--primary, #0f766e);
    background: var(--hris-sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-highlight-border);
    box-shadow: none;
}

html[data-theme="dark"] .page:not(.login-only-layout) > .sidebar {
    --hris-sidebar-bg: #14262e;
    --sidebar-highlight: #24434b;
    --sidebar-hover: #1c353e;
    --sidebar-highlight-border: #3e6770;
    --sidebar-highlight-text: #a0eee5;
    border-right-color: #2d4751;
}

/* Theme-teal light-mode sidebar with contrasting white labels.
   Active labels use the system primary color on the carved workspace surface. */
html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link:not(.active),
html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link:not(.active):hover,
html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar .nav-reports-toggle,
html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar .brand-link :is(strong, small) {
    color: #ffffff !important;
}

html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar :is(.nav-cos-break, .nav-section-title) {
    color: #ffffff !important;
}

html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link:focus-visible {
    outline-color: #ffffff;
    outline-offset: -3px;
}

html:not([data-theme="dark"]) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active:focus-visible {
    outline-color: var(--sidebar-highlight-text);
}

.page:not(.login-only-layout) > .sidebar :is(.brand-panel, .nav-scrollable) {
    background: var(--hris-sidebar-bg) !important;
    border-color: var(--sidebar-highlight-border);
}

/* Let the logo and navigation share the sidebar's blue-green background. */
html:not([data-theme="dark"]) .page:not(.login-only-layout) > .sidebar :is(.brand-panel, .nav-scrollable) {
    background: transparent !important;
}

.page:not(.login-only-layout) > .sidebar .nav-cos-break::after {
    background: var(--sidebar-highlight-border);
}

.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link {
    border-radius: 12px !important;
    box-sizing: border-box;
    transform: none !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link:hover {
    color: var(--sidebar-highlight-text) !important;
    background: var(--sidebar-hover) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active,
.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active:hover {
    color: var(--sidebar-highlight-text) !important;
    background: var(--sidebar-highlight) !important;
    border-color: var(--sidebar-highlight-border) !important;
    box-shadow: none !important;
    animation: none !important;
    font-weight: 600;
}

.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active::before,
.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active::after {
    content: none;
}

html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link {
    width: 100% !important;
}

.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link:focus-visible {
    outline: 2px solid var(--sidebar-highlight-text);
    outline-offset: 2px;
}

.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active .nav-icon {
    color: var(--sidebar-highlight-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Hover changes color only; do not lift or scale the menu icons. */
.page:not(.login-only-layout) .sidebar .nav-item > a.nav-link .nav-icon {
    transform: none !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* A soft light-gray workspace keeps white menu cards subtly separated. */
html:not([data-theme="dark"]) .page:not(.login-only-layout) {
    --hris-workspace-bg: #f3f5f7;
}

html:not([data-theme="dark"]) .page:not(.login-only-layout) > main > article.content {
    background: var(--hris-workspace-bg);
}

@media (min-width: 641px) {
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) {
        --sidebar-active-surface: var(--hris-workspace-bg, #f5f7fa);
    }

    html[data-theme="dark"]:not(.sidebar-collapsed) .page:not(.login-only-layout) {
        --sidebar-active-surface: var(--hris-page-bg, #0b1318);
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) > main > article.content {
        background: var(--sidebar-active-surface);
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) > .sidebar {
        border-right: 0;
        box-shadow: none;
    }

    /* Stable hitbox and persistent carved layers: selection only fades opacity.
       The outgoing curves remain present until their fade has finished. */
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link {
        position: relative;
        isolation: isolate;
        overflow: visible;
        border-color: transparent !important;
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active,
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active:hover {
        background: transparent !important;
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link::before,
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        box-shadow: none;
        opacity: 0;
        transform: none;
        transition: opacity .18s ease;
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link::before {
        inset: -1px calc(-.8rem - 1px) -1px -1px;
        width: auto;
        height: auto;
        border-radius: 16px 0 0 16px;
        background: var(--sidebar-active-surface);
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link::after {
        top: -15px;
        bottom: -15px;
        right: calc(-.8rem - 1px);
        left: auto;
        width: 14px;
        height: auto;
        border-radius: 0;
        background:
            radial-gradient(circle at top left, transparent 13.5px, var(--sidebar-active-surface) 14px) top / 14px 14px no-repeat,
            radial-gradient(circle at bottom left, transparent 13.5px, var(--sidebar-active-surface) 14px) bottom / 14px 14px no-repeat;
    }

    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active::before,
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link.active::after {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link,
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link::before,
    html:not(.sidebar-collapsed) .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link::after,
    .page:not(.login-only-layout) .sidebar .nav-item > a.nav-link .nav-icon {
        transition: none !important;
    }
}


/* ========================================================================== 
   ORGANIZATIONAL STRUCTURE DEPARTMENT MODAL (GLOBAL)
   The department chart is generated by JavaScript, so these rules must be
   global rather than dependent on Blazor CSS-isolation attributes.
   ========================================================================== */
.organization-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(3px);
}

.organization-detail-backdrop[hidden] {
    display: none !important;
}

body.organization-detail-modal-open {
    overflow: hidden;
}

.organization-detail-panel {
    width: min(980px, calc(100vw - 2rem));
    max-height: min(820px, calc(100dvh - 2rem));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .3);
}

.organization-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.organization-detail-header span {
    color: #0f766e;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.organization-detail-header h2,
.organization-detail-header p {
    margin: 0;
}

.organization-detail-header h2 {
    margin-top: .15rem;
    color: #10233f;
    font-size: 1.15rem;
}

.organization-detail-header p {
    margin-top: .12rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 650;
}

.organization-detail-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    padding: 0;
    color: #475569;
    font-size: 1.35rem;
    line-height: 1;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
}

/* Department organizational chart modal */
.organization-department-chart-panel {
    width: min(1500px, calc(100vw - 1.5rem));
    height: min(920px, calc(100dvh - 1.5rem));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 20px;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .34);
}

.organization-department-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    background: #fff;
    border-bottom: 1px solid #dbe5ea;
}

.organization-department-chart-heading {
    min-width: 0;
}

.organization-department-chart-heading > span {
    color: #0f766e;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.organization-department-chart-heading h2,
.organization-department-chart-heading p {
    margin: 0;
}

.organization-department-chart-heading h2 {
    margin-top: .14rem;
    overflow: hidden;
    color: #10233f;
    font-size: 1.08rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-department-chart-heading p {
    margin-top: .16rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 650;
}

.organization-department-chart-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.organization-department-zoom-controls {
    display: inline-flex;
    align-items: center;
    padding: .18rem;
    background: #f8fafc;
    border: 1px solid #d8e3e8;
    border-radius: 10px;
}

.organization-department-zoom-controls button {
    min-width: 34px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0 .45rem;
    color: #0f766e;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 850;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.organization-department-zoom-controls button:hover,
.organization-department-zoom-controls button:focus-visible {
    background: #e6f7f4;
    outline: none;
}

.organization-department-zoom-controls .organization-department-zoom-value {
    min-width: 56px;
    color: #475569;
    font-size: .69rem;
    border-inline: 1px solid #dce6ea;
    border-radius: 0;
}

.organization-department-zoom-controls .organization-department-fit-button {
    min-width: 45px;
    margin-left: .12rem;
    padding-inline: .55rem;
    color: #345b8c;
    font-size: .68rem;
}

.organization-department-chart-body {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: .7rem;
    background: #edf3f6;
}

.organization-department-chart-help {
    padding: 0 .2rem .55rem;
    color: #64748b;
    font-size: .68rem;
    font-weight: 650;
}

.organization-department-chart-help kbd {
    padding: .08rem .28rem;
    color: #334155;
    font-family: inherit;
    font-size: .63rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 4px;
}

.organization-department-chart-viewport {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background-color: #dfeaf0;
    background-image:
        linear-gradient(rgba(71, 85, 105, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(71, 85, 105, .045) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid #ccdbe2;
    border-radius: 14px;
    scrollbar-gutter: stable both-edges;
}

.organization-department-chart-viewport:focus-visible {
    outline: 2px solid rgba(15, 118, 110, .45);
    outline-offset: -2px;
}

.organization-department-chart-canvas {
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    padding: 2rem 2.2rem 3rem;
    transform-origin: top left;
}

.organization-department-chart,
.department-org-chart-inner {
    width: max-content;
    min-width: 100%;
}

.department-org-chart-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1e293b;
    font-family: var(--bs-body-font-family, "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif);
}

.department-org-leadership {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
}

.department-org-head-row {
    position: relative;
    display: flex;
    justify-content: center;
}

.department-org-head-row::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 34px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-assistant-row {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1.15rem;
    margin-top: 34px;
}

.department-org-assistant-row::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 42px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-person {
    width: 184px;
    display: grid;
    justify-items: center;
    align-content: start;
    color: #111827;
    text-align: center;
}

.department-org-person-photo {
    width: 76px;
    height: 88px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #64748b;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .04em;
    background: #eef2f5;
    border: 1px solid #7b8790;
}

.department-org-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.department-org-person-details {
    width: 100%;
    height: 48px;
    display: grid;
    align-content: center;
    justify-items: center;
    margin-top: 4px;
    padding: .24rem .36rem .2rem;
    overflow: hidden;
    background: rgba(246, 249, 250, .94);
    border: 1px solid #7b8790;
    box-sizing: border-box;
}

.department-org-person-name,
.department-org-person-position,
.department-org-person-item {
    display: block;
    overflow: hidden;
    line-height: 1.12;
    text-overflow: ellipsis;
}

.department-org-person-name {
    width: 100%;
    font-size: .64rem;
    font-weight: 650;
    text-transform: uppercase;
    white-space: nowrap;
}

.department-org-person-position {
    width: 100%;
    min-height: 2.24em;
    margin-top: .08rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .47rem;
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    white-space: normal;
}

.department-org-person-item {
    margin-top: .08rem;
    color: #64748b;
    font-size: .43rem;
    font-weight: 700;
}

.department-org-person.is-head {
    width: 220px;
}

.department-org-person.is-head .department-org-person-photo {
    width: 86px;
    height: 100px;
}

.department-org-person.is-head .department-org-person-name {
    font-size: .72rem;
}

.department-org-person.is-head .department-org-person-position {
    font-size: .5rem;
}

.department-org-person.is-assistant {
    width: 202px;
}

.department-org-person.is-leader {
    width: 198px;
}

.department-org-person.is-vacant .department-org-person-photo {
    color: #64748b;
    background:
        linear-gradient(135deg, transparent 48%, rgba(100, 116, 139, .14) 49%, rgba(100, 116, 139, .14) 51%, transparent 52%),
        #eef2f5;
}

.department-org-person.is-vacant .department-org-person-name {
    color: #475569;
    font-style: italic;
}

.department-org-units-area {
    position: relative;
    z-index: 1;
    margin-top: 42px;
    padding-top: 28px;
}

.department-org-units-area::before {
    content: "";
    position: absolute;
    top: -42px;
    left: 50%;
    width: 2px;
    height: 42px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-units-row {
    position: relative;
    width: max-content;
    min-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 28px 18px 0;
}

.department-org-units-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--department-edge-offset, 150px));
    left: calc(var(--department-edge-offset, 150px));
    height: 2px;
    background: #7b8790;
}

.department-org-unit {
    --department-unit-width: 270px;
    position: relative;
    width: var(--department-unit-width);
    min-width: var(--department-unit-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.department-org-unit::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-unit-title {
    position: relative;
    width: 310px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .5rem .72rem;
    color: #111827;
    font-size: .78rem;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.14;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    background: rgba(238, 244, 247, .96);
    border: 1px solid #7b8790;
    box-sizing: border-box;
}

.department-org-unit-title-text,
.department-org-section-title-text {
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow-wrap: anywhere;
    text-align: center;
}

.department-org-unit-title::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 22px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-unit-leaders {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 22px;
}

.department-org-unit-leaders::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 22px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-unit-staff {
    width: min(100%, 220px);
    margin-top: 22px;
}

.department-org-unit-leaders + .department-org-unit-staff {
    margin-top: 22px;
}

.department-org-group-label {
    display: block;
    margin-bottom: .42rem;
    color: #475569;
    font-size: .52rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.department-org-position-stack {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.department-org-position-stack .department-org-person {
    position: relative;
}

.department-org-position-stack .department-org-person + .department-org-person::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 2px;
    height: 14px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-sections {
    position: relative;
    width: max-content;
    min-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
    padding-top: 24px;
}

.department-org-sections::before {
    content: "";
    position: absolute;
    top: 0;
    right: 108px;
    left: 108px;
    height: 2px;
    background: #7b8790;
}

.department-org-sections::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 2px;
    height: 22px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-section {
    position: relative;
    width: 216px;
    min-width: 216px;
    display: grid;
    justify-items: center;
}

.department-org-section::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    width: 2px;
    height: 24px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-section-title {
    position: relative;
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    padding: .4rem .55rem;
    color: #111827;
    font-size: .64rem;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    background: rgba(238, 244, 247, .96);
    border: 1px solid #7b8790;
    box-sizing: border-box;
}

.department-org-section-title::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 16px;
    background: #7b8790;
    transform: translateX(-50%);
}

.department-org-empty-position {
    width: 184px;
    min-height: 74px;
    display: grid;
    place-items: center;
    padding: .55rem;
    color: #64748b;
    font-size: .52rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    background: rgba(238, 242, 245, .82);
    border: 1px dashed #87939c;
}

.department-org-empty-unit,
.department-org-chart-empty {
    padding: 1rem;
    color: #64748b;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    background: rgba(255, 255, 255, .72);
    border: 1px dashed #94a3b8;
    border-radius: 10px;
}

.department-org-empty-unit {
    width: 220px;
    margin-top: 22px;
}

.department-org-chart-empty {
    width: min(560px, calc(100vw - 5rem));
    margin-top: 42px;
}

/* Department chart connector and unassigned-position layout refinements. */
.department-org-chart-inner {
    display: block;
    align-items: initial;
}

.department-org-chart-layout {
    position: relative;
    width: max-content;
    min-width: 100%;
    display: grid;
    grid-template-columns: max-content;
    align-items: start;
    justify-content: center;
    gap: 42px;
}

.department-org-chart-layout.has-unassigned {
    grid-template-columns: 220px max-content;
    justify-content: start;
}

.department-org-main {
    position: relative;
    width: max-content;
    min-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
}

.department-org-connectors {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.department-org-connector-line {
    position: absolute;
    display: block;
    background: #7b8790;
    transform: translateZ(0);
}

.department-org-connector-line.is-vertical {
    width: 2px;
    margin-left: -1px;
}

.department-org-connector-line.is-horizontal {
    height: 2px;
    margin-top: -1px;
}

.department-org-leadership,
.department-org-units-area,
.department-org-unit,
.department-org-person,
.department-org-unit-title,
.department-org-section-title,
.department-org-empty-position,
.department-org-empty-unit,
.department-org-chart-empty {
    position: relative;
    z-index: 1;
}

.department-org-head-row::after,
.department-org-assistant-row::after,
.department-org-units-area::before,
.department-org-units-row::before,
.department-org-unit::before,
.department-org-unit-title::after,
.department-org-unit-leaders::after,
.department-org-position-stack .department-org-person + .department-org-person::before,
.department-org-sections::before,
.department-org-sections::after,
.department-org-section::before,
.department-org-section-title::after {
    content: none !important;
    display: none !important;
}

.department-org-units-area {
    margin-top: 38px;
    padding-top: 0;
}

.department-org-units-row {
    padding-top: 28px;
}

.department-org-unassigned {
    position: relative;
    z-index: 1;
    width: 220px;
    align-self: start;
    padding: 0 0 1rem;
}

.department-org-unassigned-title {
    width: 100%;
    min-height: 48px;
    display: grid;
    place-items: center;
    margin: 0 0 18px;
    padding: .48rem .62rem;
    color: #111827;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
    background: rgba(238, 244, 247, .96);
    border: 1px solid #7b8790;
}

.department-org-unassigned-stack {
    width: 100%;
    justify-items: start;
}

.department-org-unassigned-stack .department-org-person {
    width: 100%;
}

.department-org-unassigned-stack .department-org-person-photo {
    width: 72px;
    height: 84px;
}

.department-org-person-details,
.department-org-unit-title,
.department-org-section-title {
    background-color: #f6f9fa;
}

.department-org-upper-structure {
    position: relative;
    width: max-content;
    display: grid;
    grid-template-columns: max-content;
    align-items: start;
    justify-items: center;
}

.department-org-upper-structure.has-administrative-services {
    grid-template-columns: max-content;
    min-height: 510px;
}

.department-org-upper-structure.has-administrative-services > .department-org-leadership {
    padding-top: 104px;
}

.department-org-administrative-section {
    position: absolute;
    top: 300px;
    left: calc(100% - 47px);
    width: max-content;
    min-width: 216px;
    margin-top: 0;
    display: grid !important;
    grid-template-columns: max-content;
    grid-template-rows: auto auto;
    justify-items: start;
}

.department-org-administrative-section > .department-org-section-title {
    width: 216px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0 0 16px !important;
}

.department-org-administrative-position-row {
    width: max-content;
    grid-column: 1;
    grid-row: 2;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 184px;
    align-items: center;
    justify-content: flex-start;
    column-gap: 28px;
    padding-right: 16px;
    padding-left: 16px;
    box-sizing: border-box;
}

.department-org-administrative-position-row > .department-org-person {
    width: 184px;
    flex: 0 0 184px;
}

/* Modern department chart cards and connector polish. */
.department-org-person,
.department-org-unit-title,
.department-org-section-title {
    cursor: pointer;
    outline: none;
}

.department-org-person-photo,
.department-org-person-details,
.department-org-unit-title,
.department-org-section-title,
.department-org-empty-position,
.department-org-empty-unit,
.department-org-chart-empty,
.department-org-unassigned-title {
    border-color: #94a9ae;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(30, 65, 70, .08);
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.department-org-person:hover .department-org-person-photo,
.department-org-person:focus-visible .department-org-person-photo,
.department-org-person:hover .department-org-person-details,
.department-org-person:focus-visible .department-org-person-details,
.department-org-unit-title:hover,
.department-org-unit-title:focus-visible,
.department-org-section-title:hover,
.department-org-section-title:focus-visible {
    border-color: #2a9188;
    background-color: #e9f7f4;
    box-shadow: 0 6px 14px rgba(15, 118, 110, .11), 0 0 0 1px rgba(45, 167, 153, .08);
    filter: saturate(1.06);
}

.department-org-person.is-selected .department-org-person-photo,
.department-org-person.is-selected .department-org-person-details,
.department-org-unit-title.is-selected,
.department-org-section-title.is-selected,
.department-org-empty-position.is-selected {
    border-color: #0f766e;
    background: linear-gradient(145deg, #d9f3ee, #eefaf8);
    box-shadow: 0 6px 16px rgba(15, 118, 110, .14), 0 0 0 2px rgba(15, 118, 110, .08);
    animation: department-box-light-up .48s cubic-bezier(.22, .8, .28, 1) var(--department-highlight-delay, 0ms) both;
}

.department-org-person:focus-visible,
.department-org-unit-title:focus-visible,
.department-org-section-title:focus-visible {
    outline: 2px solid rgba(15, 118, 110, .72);
    outline-offset: 3px;
}

.department-org-connector-line {
    background: #557f7d;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 1px 4px rgba(24, 73, 72, .24);
    opacity: .9;
    animation: department-connector-reveal .32s ease-out both;
}

.department-org-main:has(.is-selected) .department-org-connector-line {
    background: #16877e;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 1px 3px rgba(15, 118, 110, .18);
}

@keyframes department-connector-reveal {
    from { opacity: 0; }
    to { opacity: .9; }
}

@keyframes department-box-light-up {
    0% {
        border-color: #94a9ae;
        box-shadow: 0 4px 12px rgba(30, 65, 70, .08);
        filter: brightness(1);
    }
    55% {
        border-color: #19a294;
        box-shadow: 0 7px 18px rgba(15, 118, 110, .16), 0 0 0 3px rgba(35, 174, 158, .09);
        filter: brightness(1.04);
    }
    100% {
        border-color: #0f766e;
        box-shadow: 0 6px 16px rgba(15, 118, 110, .14), 0 0 0 2px rgba(15, 118, 110, .08);
        filter: brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .department-org-person-photo,
    .department-org-person-details,
    .department-org-unit-title,
    .department-org-section-title,
    .department-org-empty-position,
    .department-org-connector-line {
        transition: none;
        animation: none;
    }
}

@media (max-width: 760px) {
    .organization-department-chart-panel {
        width: calc(100vw - .5rem);
        height: calc(100dvh - .5rem);
        border-radius: 14px;
    }

    .organization-department-chart-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        padding: .75rem;
    }

    .organization-department-chart-heading h2 {
        max-width: calc(100vw - 2rem);
        white-space: normal;
    }

    .organization-department-chart-actions {
        width: 100%;
        justify-content: space-between;
    }

    .organization-department-chart-help {
        display: none;
    }

    .organization-department-chart-body {
        grid-template-rows: minmax(0, 1fr);
        padding: .4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .organization-department-chart-canvas {
        scroll-behavior: auto;
    }
}


/* Ensure the latest connector layout wins even when an older scoped CSS bundle is cached. */
.organization-detail-backdrop .department-org-chart-inner {
    display: block !important;
    align-items: initial !important;
}

.organization-detail-backdrop .department-org-units-area {
    margin-top: 38px !important;
    padding-top: 0 !important;
}

.organization-detail-backdrop .department-org-units-row {
    padding-top: 28px !important;
}

.organization-detail-backdrop .department-org-head-row::after,
.organization-detail-backdrop .department-org-assistant-row::after,
.organization-detail-backdrop .department-org-units-area::before,
.organization-detail-backdrop .department-org-units-row::before,
.organization-detail-backdrop .department-org-unit::before,
.organization-detail-backdrop .department-org-unit-title::after,
.organization-detail-backdrop .department-org-unit-leaders::after,
.organization-detail-backdrop .department-org-position-stack .department-org-person + .department-org-person::before,
.organization-detail-backdrop .department-org-sections::before,
.organization-detail-backdrop .department-org-sections::after,
.organization-detail-backdrop .department-org-section::before,
.organization-detail-backdrop .department-org-section-title::after {
    content: none !important;
    display: none !important;
}

/* Appointment documents guided uploader */
.employee-documents-open-button {
    margin-top: 1rem;
}

/* Employee edit document workspace */
form[data-employee-edit-tabs] .employee-edit-documents-panel {
    height: 100%;
}

form[data-employee-edit-tabs] .employee-documents-workspace {
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

form[data-employee-edit-tabs] .employee-documents-workspace:has(> [data-appointment-documents-body][hidden]) {
    display: none;
}

form[data-employee-edit-tabs] .employee-documents-workspace-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    padding: var(--employee-edit-space);
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    color: #172b35;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

form[data-employee-edit-tabs] .employee-documents-workspace-heading:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -3px;
}

form[data-employee-edit-tabs] .employee-documents-workspace.is-nature-locked .employee-documents-workspace-heading {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: .72;
}

form[data-employee-edit-tabs] [data-appointment-documents-body][hidden] {
    display: none;
}

form[data-employee-edit-tabs] .employee-documents-kicker {
    display: block;
    margin-bottom: .2rem;
    color: #0f8b83;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

form[data-employee-edit-tabs] .employee-documents-workspace-heading > span {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: var(--employee-edit-heading-size);
    font-weight: 700;
    line-height: 1.35;
}

form[data-employee-edit-tabs] .employee-documents-workspace-heading p {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.45;
}

form[data-employee-edit-tabs] .employee-edit-documents-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 32%);
    align-items: center;
    gap: var(--employee-edit-space);
    padding: var(--employee-edit-space);
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

form[data-employee-edit-tabs] .employee-edit-documents-summary h3 {
    margin: 0;
    color: #172b35;
    font-family: inherit;
    font-size: var(--employee-edit-font-size);
    font-weight: 600;
    line-height: 1.4;
}

form[data-employee-edit-tabs] .employee-edit-documents-summary p {
    margin: 4px 0 0;
    color: #64748b;
    font-family: inherit;
    font-size: var(--employee-edit-label-size);
    font-weight: 500;
    line-height: 1.45;
}

form[data-employee-edit-tabs] .employee-edit-document-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: var(--employee-edit-space);
    background: #f8fafc;
}

form[data-employee-edit-tabs] .employee-edit-document-card {
    min-width: 0;
    border-radius: var(--employee-edit-panel-radius);
    box-shadow: none;
}

form[data-employee-edit-tabs] .employee-edit-document-card-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

form[data-employee-edit-tabs] .employee-edit-document-card-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -3px;
}

form[data-employee-edit-tabs] .employee-edit-document-card-toggle:disabled {
    cursor: not-allowed;
}

form[data-employee-edit-tabs] .employee-edit-document-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

form[data-employee-edit-tabs] .employee-edit-document-card-name {
    display: block;
    margin: 0;
    color: #374151;
    font-family: inherit;
    font-size: var(--employee-edit-font-size);
    font-weight: 600;
    line-height: 1.35;
}

form[data-employee-edit-tabs] .employee-edit-document-card-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #71858f;
    border-bottom: 2px solid #71858f;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

form[data-employee-edit-tabs] .employee-edit-document-card-toggle[aria-expanded="true"] .employee-edit-document-card-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

form[data-employee-edit-tabs] .employee-edit-document-card-body {
    border-top: 1px solid #e6edf2;
}

form[data-employee-edit-tabs] .employee-edit-document-card-body[hidden] {
    display: none;
}

form[data-employee-edit-tabs] .employee-edit-document-card .appointment-document-checklist-copy p,
form[data-employee-edit-tabs] .employee-edit-document-card .appointment-document-row-status {
    color: #64748b;
    font-family: inherit;
    font-size: var(--employee-edit-label-size);
    font-weight: 500;
    line-height: 1.45;
}

form[data-employee-edit-tabs] .employee-edit-document-card .appointment-document-checklist-copy p {
    margin: 4px 0 0;
}

form[data-employee-edit-tabs] .employee-edit-document-card.is-current .appointment-document-row-status,
form[data-employee-edit-tabs] .employee-edit-document-card.is-complete .appointment-document-row-status {
    color: var(--primary);
    font-weight: 600;
}

form[data-employee-edit-tabs] .employee-edit-document-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px 16px;
}

form[data-employee-edit-tabs] .employee-edit-document-card-actions .btn {
    min-width: 82px;
    font-family: inherit;
    font-size: var(--employee-edit-font-size);
    font-weight: 600;
}

form[data-employee-edit-tabs] .employee-edit-document-files {
    display: grid;
    align-content: start;
    gap: 6px;
    max-height: 154px;
    padding: 0 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

form[data-employee-edit-tabs] .employee-edit-document-files .appointment-document-row-file {
    min-height: 40px;
    padding: 6px 8px;
}

form[data-employee-edit-tabs] .employee-edit-document-files .appointment-document-row-file strong {
    font-family: inherit;
    font-size: var(--employee-edit-label-size);
    font-weight: 600;
    line-height: 1.25;
}

form[data-employee-edit-tabs] .employee-edit-document-files .appointment-document-row-file small {
    margin-top: 2px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

form[data-employee-edit-tabs] .employee-document-workspace-message {
    margin: 1rem;
}

@media (max-width: 640px) {
    form[data-employee-edit-tabs] .employee-documents-workspace-heading {
        align-items: stretch;
        flex-direction: column;
    }

    form[data-employee-edit-tabs] .employee-edit-documents-summary,
    form[data-employee-edit-tabs] .employee-edit-document-grid {
        grid-template-columns: 1fr;
    }

    form[data-employee-edit-tabs] .employee-edit-document-card-actions {
        padding-inline: 16px;
    }

    form[data-employee-edit-tabs] .employee-edit-document-card-actions .btn {
        flex: 1;
    }
}

.employee-profile-empty-state:has(.btn) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.appointment-documents-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.appointment-documents-page-heading h1,
.appointment-documents-page-heading p {
    margin: 0;
}

.appointment-documents-page-heading p {
    margin-top: .35rem;
    color: #64748b;
}

.appointment-documents-shell {
    display: grid;
    gap: 1rem;
}

.appointment-documents-summary,
.appointment-document-sequence,
.appointment-document-uploader {
    border: 1px solid #d9e4e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.appointment-documents-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.4rem;
}

.appointment-documents-kicker,
.appointment-document-uploader-heading > div > span {
    display: block;
    margin-bottom: .25rem;
    color: #0f8b83;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.appointment-documents-summary h2,
.appointment-document-uploader-heading h2,
.appointment-document-files-heading h3 {
    margin: 0;
    color: #172b35;
}

.appointment-documents-summary h2 {
    font-size: 1.15rem;
}

.appointment-documents-summary p {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .88rem;
}

.appointment-documents-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8f1f3;
}

.appointment-documents-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f8b83, #18b7a6);
    transition: width .25s ease;
}

.appointment-documents-layout {
    display: grid;
    grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.appointment-document-sequence {
    max-height: calc(100vh - 255px);
    margin: 0;
    padding: .65rem;
    overflow: auto;
    list-style: none;
}

.appointment-document-sequence li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid transparent;
    border-radius: 12px;
}

.appointment-document-sequence li + li {
    margin-top: .2rem;
}

.appointment-document-sequence li.is-current {
    border-color: #8dd8d0;
    background: #effbf9;
}

.appointment-document-step-number {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #64748b;
    background: #edf2f4;
    font-size: .76rem;
    font-weight: 800;
}

.is-current .appointment-document-step-number,
.is-complete .appointment-document-step-number {
    color: #fff;
    background: #0f8b83;
}

.appointment-document-step-copy {
    min-width: 0;
}

.appointment-document-step-copy strong,
.appointment-document-step-copy small {
    display: block;
}

.appointment-document-step-copy strong {
    overflow: hidden;
    color: #243b46;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-document-step-copy small,
.appointment-document-step-status {
    color: #71858f;
    font-size: .69rem;
}

.appointment-document-step-status {
    white-space: nowrap;
}

.is-complete .appointment-document-step-status {
    color: #08796f;
    font-weight: 700;
}

.appointment-document-uploader {
    min-width: 0;
    padding: 1.4rem;
}

.appointment-document-uploader-heading,
.appointment-document-files-heading,
.appointment-document-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointment-document-uploader-heading h2 {
    font-size: 1.3rem;
}

.appointment-document-requirement {
    flex: 0 0 auto;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.appointment-document-requirement.is-required {
    color: #9f1239;
    background: #ffe4e6;
}

.appointment-document-requirement.is-optional {
    color: #475569;
    background: #edf2f4;
}

.appointment-document-rule {
    margin: .7rem 0 1.1rem;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.55;
}

.appointment-document-message {
    margin-bottom: 1rem;
}

.appointment-document-dropzone {
    position: relative;
    display: grid;
    min-height: 190px;
    place-items: center;
    align-content: center;
    gap: .35rem;
    padding: 1.5rem;
    overflow: hidden;
    border: 2px dashed #9bcac6;
    border-radius: 16px;
    color: #526b75;
    background: #f6fbfb;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.appointment-document-dropzone:hover {
    border-color: #0f8b83;
    background: #effbf9;
    transform: translateY(-1px);
}

.appointment-document-dropzone.is-uploading {
    border-style: solid;
    border-color: #0f8b83;
    background: #effbf9;
    cursor: progress;
}

.appointment-document-dropzone .lucide-icon {
    width: 2.4rem;
    height: 2.4rem;
    color: #0f8b83;
}

.appointment-document-dropzone strong {
    color: #17343c;
    font-size: .95rem;
}

.appointment-document-dropzone small {
    font-size: .76rem;
}

.appointment-document-upload-progress {
    width: min(100%, 420px);
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #d9e9ea;
}

.appointment-document-upload-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f8b83, #21b5a7);
    transition: width .16s ease;
}

.appointment-document-upload-status {
    display: block;
    width: min(100%, 520px);
    overflow: hidden;
    color: #45616b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-document-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.appointment-document-files {
    margin-top: 1.15rem;
}

.appointment-document-files-heading {
    padding-bottom: .65rem;
    border-bottom: 1px solid #e3eaed;
}

.appointment-document-files-heading h3 {
    font-size: .88rem;
}

.appointment-document-files-heading span,
.appointment-document-no-files {
    color: #71858f;
    font-size: .76rem;
}

.appointment-document-no-files {
    margin: 0;
    padding: 1.15rem 0;
}

.appointment-document-file-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .65rem;
    padding: .75rem 0;
    border-bottom: 1px solid #edf1f3;
}

.appointment-document-file-row > .lucide-icon {
    color: #0f8b83;
}

.appointment-document-file-row > span:nth-child(2) {
    min-width: 0;
}

.appointment-document-file-row strong,
.appointment-document-file-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-document-file-row strong {
    color: #243b46;
    font-size: .8rem;
}

.appointment-document-file-row small {
    margin-top: .12rem;
    color: #71858f;
    font-size: .69rem;
}

.appointment-document-navigation {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #e3eaed;
}

.appointment-document-required-note {
    margin: .65rem 0 0;
    color: #be123c;
    font-size: .76rem;
    text-align: right;
}

.appointment-document-checklist {
    display: grid;
    gap: .7rem;
}

.appointment-document-checklist-row {
    overflow: hidden;
    border: 1px solid #d8e4e8;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .045);
    transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}

.appointment-document-checklist-row.is-current {
    border-color: #20a69b;
    box-shadow: 0 8px 24px rgba(15, 139, 131, .1);
}

.appointment-document-checklist-row.is-complete {
    border-color: #b9ddd8;
    background: #f7fcfb;
}

.appointment-document-checklist-row.is-locked {
    background: #f8fafb;
}

.appointment-document-checklist-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
}

.appointment-document-checklist-copy {
    min-width: 0;
}

.appointment-document-checklist-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.appointment-document-checklist-title h2 {
    overflow: hidden;
    margin: 0;
    color: #203943;
    font-size: .9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-document-checklist-title .appointment-document-requirement {
    padding: .25rem .5rem;
    font-size: .62rem;
}

.appointment-document-checklist-copy p {
    margin: .24rem 0 0;
    color: #71858f;
    font-size: .73rem;
}

.appointment-document-row-status {
    min-width: 66px;
    color: #71858f;
    font-size: .72rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.is-current .appointment-document-row-status {
    color: #087c74;
}

.is-complete .appointment-document-row-status {
    color: #087c74;
}

.appointment-document-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.appointment-document-row-actions .btn {
    min-width: 82px;
    min-height: 38px;
    justify-content: center;
}

.appointment-document-inline-upload {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    gap: .4rem;
    margin: 0;
    cursor: pointer;
}

.appointment-document-inline-upload > .lucide-icon {
    width: 1rem;
    height: 1rem;
}

.appointment-document-inline-upload strong {
    font-size: inherit;
    font-weight: inherit;
}

.appointment-document-inline-upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.appointment-document-inline-upload .appointment-document-upload-progress {
    position: absolute;
    right: 5px;
    bottom: 3px;
    left: 5px;
    width: auto;
    height: 3px;
}

.appointment-document-inline-upload .appointment-document-upload-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.appointment-document-inline-upload.is-uploading {
    pointer-events: none;
}

.appointment-document-row-message {
    margin: 0 .9rem .8rem;
    padding: .6rem .75rem;
    font-size: .76rem;
}

.appointment-document-notices {
    position: fixed;
    z-index: 1550;
    top: 72px;
    right: 16px;
    width: min(310px, calc(100vw - 32px));
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.appointment-document-notice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 9px 8px 11px;
    border: 1px solid #b9ded7;
    border-radius: 9px;
    background: #f0fbf8;
    color: #195f57;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    opacity: 0;
    pointer-events: auto;
    transform: translate3d(18px, -4px, 0);
    transition: opacity .18s ease, transform .18s ease;
}

.appointment-document-notice.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.appointment-document-notice.is-leaving {
    opacity: 0;
    transform: translate3d(18px, -4px, 0);
}

.appointment-document-notice.is-error {
    border-color: #fecaca;
    background: #fff7f7;
    color: #a51d2d;
}

.appointment-document-notice-mark {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d5f2eb;
    color: #087b70;
    font-size: 12px;
    font-weight: 900;
}

.appointment-document-notice-mark::before {
    content: "\2713";
}

.appointment-document-notice.is-error .appointment-document-notice-mark {
    background: #fee2e2;
    color: #c4283a;
}

.appointment-document-notice.is-error .appointment-document-notice-mark::before {
    content: "!";
}

.appointment-document-notice button {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: currentColor;
    font-size: 18px;
    line-height: 1;
    opacity: .68;
}

.appointment-document-notice button:hover,
.appointment-document-notice button:focus-visible {
    background: rgba(15, 118, 110, .1);
    opacity: 1;
}

.appointment-document-delete-confirmation .record-action-confirmation-copy strong {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .appointment-document-notices {
        top: 62px;
        right: 10px;
        width: min(290px, calc(100vw - 20px));
    }
}

.appointment-document-row-files {
    display: grid;
    gap: .2rem;
    padding: 0 .75rem .5rem 3.7rem;
}

.appointment-document-row-file {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .25rem .4rem;
    border: 1px solid #e2eaed;
    border-radius: 8px;
    background: #fbfdfd;
}

.appointment-document-row-file > .lucide-icon {
    width: .85rem;
    height: .85rem;
    color: #0f8b83;
}

.appointment-document-row-file > span:nth-child(2) {
    min-width: 0;
}

.appointment-document-row-file strong,
.appointment-document-row-file small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-document-row-file strong {
    color: #29424c;
    font-size: .71rem;
    line-height: 1.1;
}

.appointment-document-row-file small {
    color: #71858f;
    margin-top: .05rem;
    font-size: .6rem;
    line-height: 1.05;
}

.appointment-document-row-file .btn {
    min-height: 28px;
    height: 28px;
    padding: .12rem .45rem;
    border-radius: 7px;
    font-size: .66rem;
    line-height: 1;
}

.appointment-sequence-confirmation-backdrop {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(7, 19, 26, .62);
    backdrop-filter: blur(4px);
}

.appointment-sequence-confirmation {
    width: min(100%, 470px);
    padding: 1.5rem;
    border: 1px solid #dbe5e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.appointment-sequence-confirmation-icon {
    width: 2.3rem;
    height: 2.3rem;
    margin-bottom: .8rem;
    color: #be123c;
}

.appointment-sequence-confirmation h2 {
    margin: 0;
    color: #172b35;
    font-size: 1.15rem;
}

.appointment-sequence-confirmation p {
    margin: .65rem 0 1.25rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.55;
}

.appointment-sequence-confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

@media (max-width: 980px) {
    .appointment-documents-layout {
        grid-template-columns: 1fr;
    }

    .appointment-document-sequence {
        max-height: 390px;
    }
}

@media (max-width: 640px) {
    .appointment-documents-page-heading,
    .appointment-documents-summary {
        grid-template-columns: 1fr;
    }

    .appointment-documents-page-heading {
        flex-direction: column;
    }

    .appointment-document-uploader {
        padding: 1rem;
    }

    .appointment-document-file-row {
        grid-template-columns: 26px minmax(0, 1fr) auto;
    }

    .appointment-document-file-row .btn-outline-secondary {
        grid-column: 2;
    }

    .appointment-document-file-row .btn-outline-danger {
        grid-column: 3;
    }

    .appointment-sequence-confirmation-actions .btn {
        flex: 1;
    }

    .appointment-document-checklist-main {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: .65rem;
        padding: .8rem;
    }

    .appointment-document-row-status {
        grid-column: 3;
        grid-row: 1;
    }

    .appointment-document-row-actions {
        grid-column: 2 / 4;
        justify-content: flex-start;
    }

    .appointment-document-row-actions .btn {
        flex: 1;
    }

    .appointment-document-row-files {
        padding: 0 .65rem .5rem;
    }

    .appointment-document-row-file {
        grid-template-columns: 20px minmax(0, 1fr) auto;
    }

    .appointment-document-row-file .btn-outline-secondary {
        grid-column: 2;
    }

    .appointment-document-row-file .btn-outline-danger {
        grid-column: 3;
    }
}
/* Employee Data Exporter modal */
.hr-tools-dialog.is-exporter {
    width: min(980px, calc(100vw - 32px));
    height: min(820px, calc(100dvh - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 18px;
    background: #FFFFFF;
}

.hr-tools-dialog.is-exporter .hr-tools-dialog-header {
    min-height: 72px;
    padding: 12px 16px;
    background: #FFFFFF;
}

.hr-tools-dialog-title > div {
    min-width: 0;
}

.hr-tools-dialog-title p {
    margin: 2px 0 0;
    color: #64748B;
    font-size: 12px;
    font-weight: 500;
}

.hr-tools-dialog-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #0F766E;
    background: #E9F8F5;
}

.hr-tools-dialog-icon .lucide-icon {
    width: 19px;
    height: 19px;
}

.hr-tools-exporter-shell {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    background: #F8FAFC;
}

.employee-exporter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
    min-height: 0;
    padding: 16px 16px 0;
    color: #334155;
    font-size: 14px;
}

.exporter-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #DCE6EF;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .045);
}

.employee-selection-card {
    border-radius: 14px;
}

.employee-selection-card .exporter-card-header {
    border-radius: 13px 13px 0 0;
}

.employee-selection-card .exporter-filters {
    border-radius: 0 0 13px 13px;
}

.field-selection-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.field-selection-card .exporter-collapsible-content {
    min-height: 0;
    overflow: hidden;
}

.exporter-card-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid #E5EDF4;
    background: #FFFFFF;
}

.exporter-card-header > div:first-child {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.exporter-card-header h2 {
    margin: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.exporter-card-header p {
    margin: 2px 0 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.35;
}

.exporter-step {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #FFFFFF;
    background: #0F766E;
    font-size: 12px;
    font-weight: 800;
}

.exporter-card-meta,
.exporter-header-actions,
.exporter-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.exporter-match-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #A7E4D8;
    border-radius: 999px;
    color: #0F766E;
    background: #ECFDF8;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.exporter-card .btn-sm {
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.exporter-filters {
    display: grid;
    grid-template-columns: minmax(170px, .85fr) minmax(280px, 1.6fr) minmax(180px, .85fr);
    gap: 12px;
    padding: 14px;
    background: #FBFDFE;
}

.exporter-filter-grid label {
    min-width: 0;
    display: grid;
    gap: 6px;
    margin: 0;
}

.exporter-filter-grid label > span {
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.exporter-filter-grid .form-select {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px 8px 12px;
    border-color: #CBD8E2;
    border-radius: 10px;
    color: #243247;
    background-color: #FFFFFF;
    font-size: 13px;
}

.exporter-filter-grid .form-select:focus {
    border-color: #0F8B84;
    box-shadow: 0 0 0 3px rgba(15, 139, 132, .12);
}

.export-field-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    height: 100%;
    max-height: none;
    padding: 12px;
    overflow: auto;
    background: #F8FAFC;
}

.export-field-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #DCE6EF;
    border-radius: 11px;
    background: #FFFFFF;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.export-field-group.is-expanded {
    grid-column: 1 / -1;
    border-color: #9AD9CE;
    box-shadow: 0 4px 14px rgba(15, 118, 110, .08);
}

.export-field-group-header {
    min-height: 48px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
}

.export-field-group input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #0F766E;
}

.export-group-heading-toggle {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
    color: #26364A;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-align: left;
}

.export-group-heading-toggle:hover,
.export-group-heading-toggle:focus-visible {
    color: #0F766E;
    outline: none;
}

.export-group-heading-toggle .lucide-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #64748B;
    transition: transform .18s ease;
}

.export-field-group.is-collapsed .export-group-heading-toggle .lucide-icon {
    transform: rotate(-90deg);
}

.export-field-group-header small {
    min-width: 38px;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.export-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    padding: 10px;
    border-top: 1px solid #E7EEF4;
    background: #FBFDFE;
}

.export-field-grid label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 8px;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
}

.export-field-grid label:hover {
    color: #0F766E;
    background: #ECFDF8;
}

.exporter-payroll-content {
    border-top: 1px solid #E7EEF4;
    background: #FBFDFE;
}

.exporter-payroll-period {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(130px, .55fr);
    gap: 12px;
    padding: 12px 12px 10px;
}

.exporter-payroll-period label {
    min-width: 0;
    display: grid;
    gap: 5px;
    margin: 0;
}

.exporter-payroll-period label > span {
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.exporter-payroll-period .form-select {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px 8px 12px;
    border-color: #CBD8E2;
    border-radius: 10px;
    color: #243247;
    background-color: #FFFFFF;
    font-size: 13px;
}

.exporter-payroll-period .form-select:focus {
    border-color: #0F8B84;
    box-shadow: 0 0 0 3px rgba(15, 139, 132, .12);
}

.exporter-payroll-field-grid {
    border-top: 1px solid #E7EEF4;
}

.exporter-footer {
    position: static;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -16px;
    padding: 12px 16px;
    border-top: 1px solid #DCE6EF;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), #FFFFFF 24%);
    box-shadow: 0 -8px 22px rgba(15, 23, 42, .045);
}

/* Reserve the footer row; the notice, filters and fields share one scroll area. */
.hr-tools-dialog.is-exporter .employee-exporter-form {
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0 16px;
}

.hr-tools-dialog.is-exporter .exporter-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 0 0;
}

.hr-tools-dialog.is-exporter .employee-selection-card {
    border-radius: 14px;
}

.hr-tools-dialog.is-exporter .employee-selection-card .exporter-card-header {
    border-radius: 13px 13px 0 0;
}

.hr-tools-dialog.is-exporter .employee-selection-card .exporter-filters {
    border-radius: 0 0 13px 13px;
}

.hr-tools-dialog.is-exporter .field-selection-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto;
    overflow: hidden;
}

.hr-tools-dialog.is-exporter .exporter-collapsible-content {
    min-height: 0;
    overflow: hidden;
}

.hr-tools-dialog.is-exporter .export-field-groups {
    height: auto;
    min-height: 0;
    max-height: none;
    align-content: start;
    grid-auto-rows: max-content;
    overflow: visible;
}

.hr-tools-dialog.is-exporter .exporter-footer {
    position: static;
    bottom: auto;
    margin: 0 -16px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
}

.exporter-summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exporter-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 9px;
    border-radius: 8px;
    color: #64748B;
    background: #F1F5F9;
    font-size: 12px;
    font-weight: 600;
}

.exporter-summary strong {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.exporter-footer .btn {
    min-height: 40px;
    min-width: 104px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.exporter-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 148px !important;
}

.exporter-download .lucide-icon {
    width: 16px;
    height: 16px;
}

.exporter-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #64748B;
    font-size: 13px;
}

html[data-theme="dark"] .hr-tools-dialog.is-exporter,
html[data-theme="dark"] .hr-tools-dialog.is-exporter .hr-tools-dialog-header,
html[data-theme="dark"] .exporter-card,
html[data-theme="dark"] .export-field-group {
    border-color: #29404B;
    background: #102129;
}

html[data-theme="dark"] .hr-tools-exporter-shell,
html[data-theme="dark"] .export-field-groups {
    background: #0B1A21;
}

html[data-theme="dark"] .exporter-card-header,
html[data-theme="dark"] .exporter-footer,
html[data-theme="dark"] .export-field-grid {
    border-color: #29404B;
    background: #102129;
}

html[data-theme="dark"] .exporter-filters,
html[data-theme="dark"] .export-field-grid,
html[data-theme="dark"] .exporter-payroll-content {
    background: #0E1E26;
}

html[data-theme="dark"] .hr-tools-dialog-title p,
html[data-theme="dark"] .exporter-card-header p,
html[data-theme="dark"] .exporter-filter-grid label > span,
html[data-theme="dark"] .export-field-group-header small {
    color: #94A3B8;
}

html[data-theme="dark"] .exporter-card-header h2,
html[data-theme="dark"] .export-group-heading-toggle,
html[data-theme="dark"] .exporter-summary strong {
    color: #E2E8F0;
}

html[data-theme="dark"] .exporter-filter-grid .form-select {
    border-color: #37515D;
    color: #E2E8F0;
    background-color: #102129;
}

html[data-theme="dark"] .exporter-payroll-period label > span {
    color: #94A3B8;
}

html[data-theme="dark"] .exporter-payroll-period .form-select {
    border-color: #37515D;
    color: #E2E8F0;
    background-color: #102129;
}

html[data-theme="dark"] .exporter-summary > span {
    color: #94A3B8;
    background: #172B34;
}

html[data-theme="dark"] .exporter-footer {
    background: linear-gradient(180deg, rgba(16, 33, 41, .92), #102129 24%);
}

@media (max-width: 760px) {
    .hr-tools-dialog.is-exporter {
        width: calc(100vw - 18px);
        height: calc(100dvh - 18px);
        max-height: calc(100dvh - 18px);
    }

    .exporter-filters,
    .export-field-groups,
    .export-field-grid,
    .exporter-payroll-period {
        grid-template-columns: 1fr;
    }

    .export-field-group.is-expanded {
        grid-column: auto;
    }

    .exporter-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .exporter-card-meta,
    .exporter-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .exporter-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .exporter-footer-actions .btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .hr-tools-modal {
        padding: 0;
    }

    .hr-tools-dialog.is-exporter {
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .hr-tools-dialog-icon {
        display: none;
    }

    .hr-tools-dialog.is-exporter .employee-exporter-form {
        padding: 0 10px;
    }

    .hr-tools-dialog.is-exporter .exporter-footer {
        margin: 0 -10px;
        padding: 10px;
    }
}

/* Keep the requested COS two-entry rows intact inside the standard edit modal.
   This overrides the older Organization tablet rule that makes Birthplace full width. */
@media (min-width: 601px) {
    body.is-embedded-edit .cos-employee-edit-form .cos-personal-layout .birthplace-field {
        grid-column: 4 / 7 !important;
    }
}

/* COS education: keep attainment and graduation year paired at every modal width. */
.employee-edit-form .education-info-grid.cos-education-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-edit-form .education-info-grid.cos-education-layout > label {
    grid-column: auto;
    width: 100%;
}

.employee-edit-form .education-info-grid.cos-education-layout > .cos-full-row,
.employee-edit-form .education-info-grid.cos-education-layout > .eligibility-list {
    grid-column: 1 / -1;
}

/* Header actions: full-height right-side drawers. */
.notification-drawer-backdrop,
.hr-tools-modal {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(15, 23, 42, .43);
    backdrop-filter: blur(1.5px);
    animation: header-drawer-backdrop-in .18s ease-out both;
}

.notification-panel.notification-drawer,
.hr-tools-dialog,
.hr-tools-dialog.is-exporter {
    position: relative;
    inset: auto;
    width: min(500px, calc(100vw - 24px));
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    overflow: auto;
    border: 0;
    border-left: 1px solid #D8E3ED;
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: -20px 0 48px rgba(15, 23, 42, .18);
    outline: none;
    animation: header-drawer-slide-in .24s cubic-bezier(.2, .8, .2, 1) both;
}

.notification-panel.notification-drawer {
    z-index: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
}

.hr-tools-dialog.is-exporter {
    width: min(760px, calc(100vw - 24px));
}

.notification-panel.notification-drawer > header,
.hr-tools-dialog-header,
.hr-tools-dialog.is-exporter .hr-tools-dialog-header {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 78px;
    padding: 14px 18px 14px 20px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.notification-panel.notification-drawer > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-drawer-title {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.notification-panel.notification-drawer .notification-drawer-title strong {
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
}

.notification-drawer-title > span {
    color: #94A3B8;
    font-size: .78rem;
    font-weight: 500;
}

.notification-drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-panel.notification-drawer .notification-mark-all {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
}

.notification-panel.notification-drawer .notification-drawer-close,
.notification-drawer-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #FFFFFF;
    background: #7C879C;
    box-shadow: 0 6px 16px rgba(51, 65, 85, .22);
}

.notification-drawer-close:hover,
.notification-drawer-close:focus-visible {
    color: #FFFFFF;
    background: #64748B;
    outline: 3px solid rgba(100, 116, 139, .18);
}

.notification-drawer-close .lucide-icon {
    width: 18px;
    height: 18px;
}

.notification-panel.notification-drawer .notification-list {
    align-content: start;
    overflow: auto;
    padding: 14px 16px 24px;
}

.notification-panel.notification-drawer .notification-empty {
    align-self: start;
    margin: 20px 16px;
}

body:has(.notification-drawer-backdrop),
body:has(.hr-tools-modal) {
    overflow: hidden;
}

@keyframes header-drawer-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes header-drawer-backdrop-in {
    from { background-color: rgba(15, 23, 42, 0); }
    to { background-color: rgba(15, 23, 42, .43); }
}

@media (max-width: 600px) {
    .notification-panel.notification-drawer,
    .hr-tools-dialog,
    .hr-tools-dialog.is-exporter {
        width: min(100vw, 440px);
        height: 100dvh;
        max-height: 100dvh;
        border-left: 0;
    }

    .notification-panel.notification-drawer > header,
    .hr-tools-dialog-header,
    .hr-tools-dialog.is-exporter .hr-tools-dialog-header {
        padding-inline: 14px;
    }
}

/* Final Leave Ledger row palette: mirror the balance-card categories. */
.leave-ledger-merged-table tbody tr.leave-row-vacation > td { background: #eaf5ff !important; }
.leave-ledger-merged-table tbody tr.leave-row-vacation:hover > td { background: #dceeff !important; }
.leave-ledger-merged-table tbody tr.leave-row-sick > td { background: #eaf8ee !important; }
.leave-ledger-merged-table tbody tr.leave-row-sick:hover > td { background: #dcf2e3 !important; }
.leave-ledger-merged-table tbody tr.leave-row-other > td { background: #fff8d9 !important; }
.leave-ledger-merged-table tbody tr.leave-row-other:hover > td { background: #fff1bd !important; }
.leave-ledger-merged-table tbody tr.leave-row-monetization > td { background: #f0e8ff !important; }
.leave-ledger-merged-table tbody tr.leave-row-monetization:hover > td { background: #e7dcfb !important; }

body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-vacation > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-vacation > td { background: #17384b !important; }
body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-sick > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-sick > td { background: #1d3c2c !important; }
body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-other > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-other > td { background: #453c1f !important; }
body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-monetization > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-monetization > td { background: #332a48 !important; }

.leave-ledger-merged-table tbody tr.leave-row-pass-locator > td { background: #fff0f0 !important; }
.leave-ledger-merged-table tbody tr.leave-row-pass-locator:hover > td { background: #ffe2e2 !important; }
body.dark-mode .leave-ledger-merged-table tbody tr.leave-row-pass-locator > td,
html[data-theme="dark"] .leave-ledger-merged-table tbody tr.leave-row-pass-locator > td { background: #47292b !important; }

/* Keep the summary-card palette consistent with the ledger row categories. */
.leave-ledger-summary-card.is-vacation {
    --leave-accent: #1680d4;
    --leave-soft: #eaf5ff;
}

.leave-ledger-summary-card.is-sick {
    --leave-accent: #2f8f4e;
    --leave-soft: #eaf8ee;
}

.leave-ledger-summary-card.is-others {
    --leave-accent: #b77900;
    --leave-soft: #fff8d9;
}

/* Leave Ledger has four metadata columns plus nine compact balance columns. */
.leave-ledger-merged-table col.leave-col-number { width: 4.75%; }
.leave-ledger-merged-table col.leave-col-reference { width: 10%; }
.leave-ledger-merged-table col.leave-col-description { width: 20%; }
.leave-ledger-merged-table col.leave-col-inclusive { width: 20.25%; }
.leave-ledger-merged-table th:nth-child(3),
.leave-ledger-merged-table td:nth-child(3) { min-width: 210px; }
.leave-ledger-merged-table th:nth-child(4),
.leave-ledger-merged-table td:nth-child(4) { min-width: 190px; }
.table.dashboard-table.leave-ledger-header-table thead tr:nth-child(2) th:last-child {
    border-right: 0 !important;
}

/* Keep the Leave Ledger filters and actions together at the right edge. */
.leave-ledger-toolbar .records-search-form {
    flex: 1 1 auto !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 0 16px !important;
}
.leave-ledger-toolbar .leave-ledger-search-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    justify-content: flex-end !important;
}
.leave-ledger-toolbar .leave-ledger-employee-filter { flex: 0 1 520px; width: min(520px, 46vw); margin-left: auto; }
.leave-ledger-toolbar .leave-ledger-year-filter { flex: 0 0 132px; width: 132px; }
.leave-ledger-toolbar .leave-ledger-print-action,
.leave-ledger-toolbar .leave-ledger-export-action {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
}
.leave-ledger-toolbar .leave-ledger-export-action { margin-left: 0; }
.leave-ledger-toolbar .leave-ledger-print-action .lucide-icon,
.leave-ledger-toolbar .leave-ledger-export-action .lucide-icon {
    width: 18px;
    height: 18px;
}
.leave-ledger-toolbar .leave-ledger-employee-filter > .leave-ledger-search-suggestions { right: 0 !important; left: 0; width: 100%; }
@media (max-width: 760px) {
    .leave-ledger-toolbar .leave-ledger-search-controls { flex-wrap: wrap; }
    .leave-ledger-toolbar .leave-ledger-employee-filter { flex: 1 1 calc(100% - 120px); width: auto; margin-left: 0; }
    .leave-ledger-toolbar .leave-ledger-year-filter { flex-basis: 110px; width: 110px; }
    .leave-ledger-toolbar .leave-ledger-print-action { margin-left: 0; }
    .leave-ledger-toolbar .leave-ledger-export-action { margin-left: auto; }
    .leave-ledger-toolbar .leave-ledger-employee-filter > .leave-ledger-search-suggestions { width: 100%; }
}

/* Keep every employee searchable while showing seven dropdown rows at a time. */
.leave-ledger-toolbar .leave-ledger-employee-filter > .leave-ledger-search-suggestions {
    max-height: 268px !important;
    overflow-y: auto !important;
}

/* Leave Ledger search actions: clear selection beside the dropdown arrow. */
.leave-ledger-toolbar .leave-ledger-employee-filter > .form-control { padding-right: 76px; }
.leave-ledger-toolbar .leave-ledger-search-clear,
.leave-ledger-toolbar .leave-ledger-search-clear:hover,
.leave-ledger-toolbar .leave-ledger-search-clear:focus,
.leave-ledger-toolbar .leave-ledger-search-clear:focus-visible,
.leave-ledger-toolbar .leave-ledger-search-clear:active { right: 31px; }
.leave-ledger-search-chevron {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 15px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
}

/* Leave Ledger detail subheaders use regular weight; group headings remain bold. */
.leave-ledger-header-table thead tr:nth-child(2) th { font-weight: 400 !important; }
.leave-ledger-table-legend { font-size: 9pt; }

/* Formal Certificate of COC Earned: synchronized with the approved COC samples. */
.coc-certification-sheet {
    box-sizing: border-box;
    width: 210mm;
    max-width: calc(100vw - 3rem);
    min-height: 297mm;
    margin: 20px auto;
    padding: 15mm 18mm 12mm;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
    color: #000;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
}

.coc-certification-letterhead.universal-print-header {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: start;
    min-height: 86px;
    margin: 0 0 9mm;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    text-align: center;
}

.coc-certification-letterhead.universal-print-header img {
    position: static !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    width: 86px !important;
    height: 86px !important;
    justify-self: start !important;
    margin: -8px 0 0 120px !important;
    transform: none !important;
    object-fit: contain !important;
}

.coc-certification-letterhead.universal-print-header > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

.coc-certification-letterhead.universal-print-header :is(p, h3, h4) {
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    line-height: 1.25 !important;
}

.coc-certification-letterhead.universal-print-header p {
    font-size: 12pt !important;
    font-weight: 400 !important;
}

.coc-certification-letterhead.universal-print-header h3 {
    margin-top: 4px !important;
    font-size: 12pt !important;
    font-weight: 700 !important;
}

.coc-certification-letterhead.universal-print-header h4 {
    margin-top: 24px !important;
    font-size: 14pt !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.coc-certification-sheet > h1 {
    margin: 0 0 9mm;
    color: #000;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 18pt;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.coc-certification-body {
    margin: 0 0 5mm;
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.5;
    text-align: justify;
    text-indent: .48in;
}

.coc-certification-introduction {
    width: 100%;
    margin: 0 0 7mm;
    text-align: justify;
    text-indent: .48in;
}

.coc-certification-particulars {
    width: calc(100% - .48in);
    margin: 0 0 9mm .48in;
    border-collapse: collapse;
    table-layout: fixed;
    color: #000;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 12pt;
    line-height: 1.35;
}

.coc-certification-particulars :is(th, td) {
    padding: .35mm 2.2mm;
    border: 0;
    color: #000 !important;
    background: transparent !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 12pt !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: top;
    text-align: left;
}

.coc-certification-particulars :is(th, td):first-child {
    width: 21%;
    padding-left: 0;
    border-right: .25mm solid #000;
}

.coc-certification-particulars :is(th, td):last-child {
    width: 79%;
}

.coc-certification-particulars thead th {
    padding-bottom: 1.2mm;
    font-weight: 700;
}

.coc-certification-particulars tbody td {
    font-weight: 400;
}

.coc-certification-issuance {
    width: 100%;
    margin: 0 0 5mm;
    text-align: left;
    text-indent: .48in;
}

.coc-certification-signatory {
    display: flex;
    width: 44%;
    margin: 18mm 2mm 0 auto;
    flex-direction: column;
    align-items: center;
    color: #000;
    text-align: center;
}

.coc-certification-signatory strong {
    font-size: 14pt;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: underline;
}

.coc-certification-signatory span {
    margin-top: 1mm;
    font-size: 12pt;
    line-height: 1.35;
}

.coc-certification-ledger {
    margin-top: 14mm;
    color: #000;
}

.coc-certification-ledger h2 {
    margin: 0 0 3mm;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 12pt;
    font-weight: 700;
    text-align: center;
}

.coc-certification-ledger table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif;
    font-size: 10pt;
    line-height: 1.2;
}

.coc-certification-ledger :is(th, td) {
    padding: 2.2mm 1.8mm;
    border: .25mm solid #60656b;
    vertical-align: middle;
}

.coc-certification-ledger thead th {
    color: #000 !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
    font-weight: 700;
    text-align: center;
}

.coc-certification-ledger tbody td,
.coc-certification-ledger tfoot th {
    padding: .3mm 1.2mm;
    color: #000 !important;
    font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.1 !important;
}

.coc-label-lowercase {
    text-transform: lowercase;
}

.coc-certification-ledger tbody td:nth-child(-n+4),
.coc-certification-ledger tfoot th:nth-child(-n+4) {
    text-align: center;
}

.coc-certification-ledger :is(th, td):nth-child(1) { width: 24%; }
.coc-certification-ledger :is(th, td):nth-child(2) { width: 20%; }
.coc-certification-ledger :is(th, td):nth-child(3) { width: 14%; }
.coc-certification-ledger :is(th, td):nth-child(4) { width: 14%; }
.coc-certification-ledger :is(th, td):nth-child(5) { width: 28%; }

.coc-certification-ledger tfoot th {
    font-weight: 700;
}

.coc-certification-ledger tr {
    break-inside: avoid;
}

.coc-ledger-empty {
    height: 10mm;
    color: #505861;
    text-align: center;
}

.coc-limit-confirmation-backdrop {
    z-index: 1900;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(5px);
}

.coc-limit-confirmation-panel {
    width: min(500px, calc(100vw - 32px));
    height: auto;
    max-height: min(420px, calc(100dvh - 32px));
    border-radius: 9px;
    overflow: hidden;
}

.coc-limit-confirmation-layout {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
}

.coc-limit-confirmation-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #fdba74;
    border-radius: 50%;
    background: #fff7ed;
    color: #c2410c;
}

.coc-limit-confirmation-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
}

.coc-limit-confirmation-copy h2 {
    margin: 1px 0 5px;
    color: #17233a;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.coc-limit-confirmation-copy p {
    margin: 0;
    color: #334155;
    font-size: .9rem;
    line-height: 1.5;
}

.coc-limit-confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.coc-limit-confirmation-actions .btn {
    min-width: 88px;
}

body.dark-mode .coc-limit-confirmation-copy h2 {
    color: #f1f5f9;
}

body.dark-mode .coc-limit-confirmation-copy p {
    color: #dbe7ec;
}

body.dark-mode .coc-limit-confirmation-icon {
    border-color: #9a5a24;
    background: #3a2719;
    color: #fdba74;
}

@media (max-width: 520px) {
    .coc-limit-confirmation-layout {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .coc-limit-confirmation-icon {
        width: 38px;
        height: 38px;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    .coc-certification-sheet {
        width: 210mm;
        max-width: none;
        min-height: 297mm;
        margin: 0;
        padding: 15mm 18mm 12mm;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Final Users permission layout override: fill the full action panel. */
.permission-menu-access .permission-card-actions.permission-actions-details {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

.permission-menu-access .permission-card-actions.permission-actions-details > summary {
    width: 100% !important;
}

.permission-menu-access .permission-card-actions.permission-actions-details > .permission-direct-actions-grid {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .35rem !important;
}

@media (max-width: 820px) {
    .permission-menu-access .permission-card-actions.permission-actions-details > .permission-direct-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Step Increment and Salary Adjustment appointment dates align with text columns. */
.report-table th.appointment-date-column,
.report-table td.appointment-date-column,
.step-list-print-table th.appointment-date-column,
.step-list-print-table td.appointment-date-column {
    text-align: left !important;
}

.report-table th.appointment-date-column > .sortable-header {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Compact record-range pagination used by all data-list menus. */
.pagination-records-footer {
    min-height: 54px;
    padding: .65rem .8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.pagination-size-form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 500;
}

.pagination-size-form label {
    margin: 0;
    font-weight: 650;
}

.pagination-size-form select {
    width: 82px;
    min-height: 38px;
    padding: .42rem 2rem .42rem .75rem;
    border: 1px solid #86a8b8;
    border-radius: 10px;
    color: var(--text);
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #476274 50%), linear-gradient(135deg, #476274 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.pagination-size-form select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.pagination-size-form select:hover {
    border-color: var(--primary);
    background-color: #f0fdfa;
}

.pagination-size-form select option {
    padding: .55rem .75rem;
    color: #183247;
    background: #fff;
    font-weight: 600;
}

body.dark-mode .pagination-records-footer {
    border-color: #31465a;
    background: #132132;
}

body.dark-mode .pagination-size-form select {
    border-color: #496176;
    color: #e5edf5;
    background-color: #182a3d;
    background-image: linear-gradient(45deg, transparent 50%, #b8cad6 50%), linear-gradient(135deg, #b8cad6 50%, transparent 50%);
}

body.dark-mode .pagination-size-form select option {
    color: #e5edf5;
    background: #182a3d;
}

@media (max-width: 680px) {
    .pagination-records-footer {
        align-items: stretch;
    }

    .pagination-size-form {
        width: 100%;
    }
}