/* eLeave brand and application-specific components on Bootstrap 5.3.8. */
:root { --blue:#2563eb; --navy:#16324f; --ink:#172b4d; --muted:#526075; --canvas:#f5f7fb; --line:#dce3ec; --radius:12px; --shadow:0 4px 20px #16324f06; --bs-body-font-family:"Segoe UI",system-ui,Arial,sans-serif; --bs-body-color:var(--ink); --bs-body-bg:var(--canvas); --bs-primary:#2563eb; --bs-primary-rgb:37,99,235; --bs-link-color:#1d4ed8; --bs-link-hover-color:#163eb0; --bs-border-color:var(--line); --bs-border-radius:.5rem; }
a { text-decoration:none; } a:hover { text-decoration:underline; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
:focus-visible { outline:3px solid #3b82f6; outline-offset:3px; }
[hidden] { display:none!important; }
h1,.title { font-size:28px; font-weight:650; letter-spacing:-.8px; line-height:1.25; color:var(--ink); }
h2 { font-size:20px; letter-spacing:-.35px; line-height:1.4; } h3 { font-size:16px; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:1100; background:white; padding:12px 20px; border-radius:8px; }
.skip-link:focus { top:10px; }
.app-shell { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100dvh; }
.app-sidebar.offcanvas-lg { --bs-offcanvas-width:280px; --bs-offcanvas-bg:var(--navy); --bs-offcanvas-color:#e9f1fc; height:100dvh!important; overflow-y:auto; color:#e9f1fc; background:var(--navy)!important; flex-direction:column; padding:28px 16px 18px; scrollbar-width:thin; }
.app-sidebar nav { flex:1; } .app-sidebar .brand { padding:0 10px 34px; }
@media(min-width:992px) { .app-sidebar.offcanvas-lg { display:flex; position:sticky; top:0; } }
@media(max-width:991px) { .app-shell { display:block; } .app-sidebar.offcanvas-lg { max-width:calc(100vw - 40px); } .app-workspace { min-height:100dvh; } .app-main { padding:28px 24px; } }
.icon-button { display:inline-grid; place-items:center; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); }
.nav-close { margin-left:auto; color:white; background:transparent; border-color:#ffffff30; font-size:24px; }
.account-toggle { display:flex; align-items:center; gap:10px; min-height:44px; border:0; background:transparent; color:var(--ink); font-size:14px; }
.account-links { --bs-dropdown-min-width:220px; --bs-dropdown-font-size:14px; --bs-dropdown-link-color:var(--ink); --bs-dropdown-link-hover-bg:var(--canvas); --bs-dropdown-border-radius:12px; padding:8px; box-shadow:0 8px 30px #16324f1a; }
.account-links .dropdown-item { padding:11px 12px; border-radius:6px; }
.card { --bs-card-bg:white; --bs-card-border-color:var(--line); --bs-card-border-radius:12px; box-shadow:var(--shadow); }
.surface { padding:28px; margin-bottom:24px; min-width:0; }
.surface h2 { margin-bottom:20px; }
.field { display:flex; flex-direction:column; gap:8px; min-width:0; margin-bottom:20px; }
.row .field { margin-bottom:0; }
.field small,.field-hint { font-size:12px; color:var(--muted); }
.form-label,.field-label { margin-bottom:0; font-size:14px; font-weight:600; color:var(--ink); }
.form-control,.form-select { font-family:var(--bs-body-font-family); min-height:44px; font-size:16px; border-color:#c3cfde; border-radius:7px; padding-top:10px; padding-bottom:10px; }
.form-control[readonly] { background:#f3f6fa; color:var(--muted); }
textarea.form-control { min-height:120px; }
.form-check-input { width:1.125em; height:1.125em; } .form-check-input:checked { background-color:var(--blue); border-color:var(--blue); }
.form-check-label { font-size:14px; }
.btn { --bs-btn-font-family:var(--bs-body-font-family); --bs-btn-font-size:14px; --bs-btn-font-weight:600; --bs-btn-padding-y:10px; --bs-btn-padding-x:18px; --bs-btn-border-radius:8px; min-height:44px; white-space:normal; }
.btn-primary { --bs-btn-bg:#2563eb; --bs-btn-border-color:#2563eb; --bs-btn-hover-bg:#1d4ed8; --bs-btn-hover-border-color:#1d4ed8; --bs-btn-active-bg:#1d4ed8; --bs-btn-active-border-color:#1d4ed8; --bs-btn-disabled-bg:#2563eb; --bs-btn-disabled-border-color:#2563eb; }
.btn-outline-secondary { --bs-btn-color:#243e60; --bs-btn-border-color:#c3cfde; --bs-btn-hover-color:#243e60; --bs-btn-hover-bg:#f0f5fc; --bs-btn-hover-border-color:#9cb4d4; --bs-btn-active-bg:#e5edfa; --bs-btn-active-color:#243e60; background-color:white; }
.form-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px; }
.filter-grid>.form-actions { margin-top:var(--bs-gutter-y); }
.filter-panel { padding:28px; background:white; border:1px solid var(--line); border-radius:0 0 10px 10px; }
.filter-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; font-size:14px; font-weight:600; color:var(--ink); }
.filter-toggle img { width:12px; height:12px; } .filter-toggle:hover { text-decoration:none; }
.filter-options { border:0; margin:0; min-width:0; } .filter-options legend { margin-bottom:8px; }
.reqField,.error,.selection-error { color:#b42318; font-size:13px; } .success { color:#187547; font-size:14px; }
.empty-state { padding:40px 24px; text-align:center; color:var(--muted); background:#f8faff; border:1px dashed #cbd7e5; border-radius:10px; margin:16px 0; }
.badge { font-size:12px; line-height:1.5; font-weight:600; white-space:nowrap; }
.status-pending { color:#805900; background:#fff4d6; } .status-approved { color:#14653a; background:#e8f7ee; } .status-rejected { color:#a82820; background:#fff0ef; } .status-cancelled { color:#526075; background:#edf0f5; }
.table { --bs-table-bg:white; --bs-table-color:var(--ink); --bs-table-border-color:#e8edf3; --bs-table-striped-bg:#fbfcfe; --bs-table-hover-bg:#f5f8fe; font-size:14px; margin-bottom:0; }
.table>:not(caption)>*>* { padding:11px 14px; vertical-align:middle; overflow-wrap:anywhere; }
.table th { background:#f8fafd; color:var(--muted); font-size:12px; font-weight:600; }
.table-responsive { min-width:0; border:1px solid var(--line); border-radius:10px; background:white; margin:12px 0; scrollbar-width:thin; }
.app-main .table-responsive { width:100%; } .overview-columns .table-responsive { margin:0; border:0; border-radius:0; }
.stat-card { padding:24px; min-width:0; }
.stats-grid { margin-bottom:28px; }
#selectionDialog[open] { display:flex; flex-direction:column; }
#selectionDialog::backdrop { background:#0006; }
#selectionDialog .selection-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
#selectionDialog h2 { margin:0; }
#selectionDialogStatus { margin:10px 0; } #selectionDialogStatus:empty { display:none; }
#selectionDialogFrame { display:block; width:100%; flex:1; min-height:0; border:0; }
.selection-page table { width:100%; max-width:100%; }
.selection-error:empty { display:none; }
.brand { display:flex;align-items:center;gap:12px;font-size:25px;font-weight:700;letter-spacing:-.8px;line-height:1.2 }
.brand small { display:block;margin-top:5px;color:#bbcee2;font-size:11px;font-weight:400;letter-spacing:1.2px }
.brand-mark { display:grid;place-items:center;background:#3878ee;color:white;width:39px;height:39px;border-radius:12px;font-size:28px;font-weight:650;letter-spacing:-2px;box-shadow:0 6px 14px #0002 }
.nav-group { margin:0 0 7px }
.nav-group>summary { display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;list-style:none;color:#d3e0ee;font-size:14px;font-weight:600;border-radius:8px }
.nav-group>summary::-webkit-details-marker { display:none }
.nav-group>summary:after { content:'\2304';margin-left:auto;transition:transform .15s }
.nav-group[open]>summary:after { transform:rotate(180deg) }
.nav-group>summary:hover { background:#ffffff0a }
.nav-links { padding:2px 0 8px 15px }
.nav-link { display:block;min-height:42px;padding:10px 12px 10px 25px;border-radius:8px;color:#b9cce1;font-size:13px;line-height:1.65 }
.nav-link:hover { background:#ffffff0b;color:white;text-decoration:none }
.nav-link[aria-current] { background:#2e5480;color:white;box-shadow:inset 3px 0 #7baaff }
.nav-group-home { display:none }
.sidebar-footer { margin:24px 12px 0;padding-top:18px;border-top:1px solid #ffffff15;font-size:12px;color:#d6e3f1 }
.sidebar-footer span { font-size:11px;color:#a5bfd7 }
.app-workspace { min-width:0;display:flex;flex-direction:column }
.app-topbar { height:72px;flex:none;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:white;gap:12px }
.topbar-context { display:flex;align-items:center;gap:12px }
.workspace-label { font-size:11px;letter-spacing:1.6px;font-weight:700;color:#738198 }
.account-avatar { display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf3ff;color:#3865a2 }
.account-avatar svg { width:18px;height:18px }
.app-main { padding:32px;flex:1;min-width:0;outline:none }
.app-footer { padding:16px 32px 24px;color:#748197;font-size:12px }
.page-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 28px;flex-wrap:wrap }
.page-heading h1 { margin:0 0 8px }
.page-description { font-size:14px;line-height:1.6;color:var(--muted);margin:4px 0 0 }
.eyebrow { color:#3767a8;font-size:11px;font-weight:700;letter-spacing:1.7px;margin-bottom:12px }
.indicator { padding:0;margin:0 4px;vertical-align:middle }
.app-main table { max-width:100% }
.overview-hero { display:flex;justify-content:space-between;align-items:center;gap:24px;background:#eaf1fe;border:1px solid #dbe7fd;border-radius:14px;padding:28px 32px;margin-bottom:24px }
.overview-hero h1 { margin-bottom:10px }
.overview-hero p { margin-bottom:0;max-width:550px }
.overview-hero .eyebrow { margin-bottom:10px }
.stat-label { color:var(--muted);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:10px }
.stat-label svg { color:#7395c3 }
.stat-value { display:block;font-size:34px;font-weight:650;letter-spacing:-1px;line-height:1.2;margin:14px 0 8px }
.stat-value small { font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted) }
.stat-note { font-size:12px;color:var(--muted);margin:0 }
.overview-columns { display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:24px;align-items:start }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px }
.section-heading h2 { margin:0 }
.section-heading>a { font-size:13px;font-weight:600 }
.overview-table { width:100%;border-collapse:collapse;font-size:14px }
.overview-table th { text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:0 12px 12px;border-bottom:1px solid var(--line) }
.overview-table td { padding:16px 12px;border-bottom:1px solid #edf1f6 }
.overview-table th:first-child,
.overview-table td:first-child { padding-left:0 }
.overview-table tr:last-child td { border-bottom:0 }
.upcoming-item { padding:16px 0;border-bottom:1px solid #edf1f6;display:flex;gap:14px }
.upcoming-item:last-child { border:0 }
.date-tile { background:#edf3ff;border:1px solid #e0e9fa;border-radius:8px;min-width:48px;min-height:54px;text-align:center;font-size:20px;font-weight:650;padding:5px 8px;line-height:1.2 }
.date-tile small { display:block;font-size:10px;font-weight:600;letter-spacing:.5px;color:#526c96;margin-top:3px }
.upcoming-item strong { display:block;font-size:14px;margin:0 0 4px }
.upcoming-item p { font-size:12px;color:var(--muted);margin:0 }
.overview-filter { display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:14px }
.overview-filter select { width:120px }
.leave-calendar { width:100%;table-layout:fixed;border:0!important;background:white!important;font:14px "Segoe UI",system-ui,sans-serif!important }
.leave-calendar th,
.leave-calendar td { border:1px solid var(--line);padding:10px!important }
.leave-calendar th { font-size:12px!important;background:#f8fafd!important;color:var(--muted) }
.leave-calendar>tbody>tr:first-child>td { background:white!important;padding:16px!important }
.leave-calendar>tbody>tr:first-child table td { border:0 }
.leave-calendar>tbody>tr:first-child a { padding:10px;font-size:14px }
.leave-calendar .calendar-day { height:100px!important;min-width:0;font-size:13px }
.leave-calendar .calendar-day a { display:inline-block;min-width:32px;min-height:32px;padding:5px }
.calendar-event { display:block!important;background:#eef4ff;border-radius:5px;margin:4px 0;padding:4px 6px!important;font:12px/1.4 "Segoe UI",sans-serif!important;text-align:left;color:#204e89;white-space:normal;overflow-wrap:anywhere }
.calendar-details { padding:16px 20px;margin:20px 0;background:#f8faff;border:1px solid var(--line);border-radius:10px }
.calendar-details h2 { font-size:16px;margin:0 0 8px }
.calendar-details ul { margin:0;padding-left:20px;font-size:14px }
.calendar-agenda { display:none }
.calendar-toolbar { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px }
.calendar-toolbar .btn { min-width:100px }
.calendar-legend { font-size:13px;color:var(--muted);padding:16px 0 }
.calendar-legend img { vertical-align:middle;margin:0 6px }
.calendar-agenda-item { padding:16px 0;border-bottom:1px solid var(--line) }
#selectionDialog { width:min(900px,calc(100vw - 32px));height:min(680px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px #142b4c33;font:14px/1.5 "Segoe UI",system-ui,sans-serif }
#selectionDialog .selection-heading { padding-bottom:18px;border-color:var(--line);gap:16px }
#selectionDialog h2 { font-size:20px;letter-spacing:-.3px }
#selectionDialogFrame { margin-top:12px }
.selection-page { padding:8px;margin:0;background:white;font:14px/1.5 "Segoe UI",system-ui,sans-serif }
.selection-page .dateNews { font:14px/1.5 "Segoe UI",system-ui,sans-serif;text-align:left!important;height:auto!important }
.selection-page #txtSearch { flex:1; width:0; min-width:0; max-width:none; margin:0; }
.selection-page .selection-hint { font-size:12px;display:block;margin:8px 0 20px }
.selection-page .selection-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0 }
.selection-page #dgParent { table-layout:fixed }
.selection-page #dgParent td { overflow-wrap:anywhere }
.selection-page #dgParent td:first-child { width:44px }
.selection-page .btn { min-width:80px }
.selection-page .title { font-size:20px }
.login-page { min-height:100dvh;display:grid;place-items:center;padding:40px 24px;background:#eef3fa }
.login-shell { width:min(1020px,100%);min-height:600px;display:grid;grid-template-columns:1.05fr 1fr;background:white;border:1px solid #dce5f1;border-radius:24px;overflow:hidden;box-shadow:0 24px 80px #16324f0b }
.login-intro { position:relative;overflow:hidden;background:#16324f;color:white;padding:48px }
.login-intro .brand { margin-bottom:70px }
.login-intro>.eyebrow { color:#a4c5f6 }
.login-intro h1 { color:white;font-size:38px;font-weight:600;line-height:1.25;letter-spacing:-1.3px;position:relative;z-index:1 }
.login-intro>p:not(.eyebrow) { font-size:15px;line-height:1.7;color:#bdd0e5;max-width:340px;position:relative;z-index:1 }
.login-illustration { position:absolute;inset:auto 0 0;height:190px;overflow:hidden }
.illustration-sun { position:absolute;width:90px;height:90px;border-radius:50%;right:60px;top:0;background:#8bb7fa }
.illustration-hill { position:absolute;width:550px;height:300px;left:-80px;top:70px;background:#295477;border-radius:50% 50% 0 0;transform:rotate(-15deg) }
.illustration-leaf { position:absolute;width:450px;height:240px;right:-160px;top:100px;background:#3b7194;border-radius:50% 50% 0 0;transform:rotate(25deg) }
.login-panel { display:flex;align-items:center;padding:60px 48px }
.login-panel form { width:100% }
.login-panel h2 { font-size:27px;margin:0 0 8px;letter-spacing:-.8px }
.login-panel .page-description { margin-bottom:32px }
.login-panel .field { margin-bottom:22px }
.login-panel .btn { width:100%;margin-top:8px }
.forgot-link { display:block;text-align:center;font-size:14px;margin-top:20px }
.login-footnote { font-size:12px;color:#8090a6;text-align:center;margin:40px 0 0 }
@media(min-width:1600px) {
.app-main { padding:40px 48px }
.app-topbar { padding:0 48px }
}
@media(max-width:1100px) {
.overview-columns { grid-template-columns:1fr }
.overview-hero { padding:24px }
}
@media(max-width:767px) {
.app-main { padding:24px 16px }
.app-topbar { padding:0 16px }
.workspace-label { font-size:10px;letter-spacing:1px }
.app-footer { padding:16px }
.page-heading { align-items:flex-start;margin-bottom:22px;gap:16px }
.page-heading .btn { min-height:42px }
.stat-label { grid-column:1 }
.stat-value { grid-column:2;grid-row:1/3;font-size:30px;align-self:center;margin:0 }
.stat-note { grid-column:1;margin-top:8px }
.overview-hero { display:block;padding:24px 20px }
.overview-hero h1 { font-size:26px }
.overview-hero .btn { margin-top:20px }
.overview-table { min-width:480px }
.overview-columns { display:block }
.calendar-desktop { display:none }
.calendar-agenda { display:block }
.calendar-legend { font-size:12px }
.login-page { padding:24px 16px }
.login-shell { grid-template-columns:1fr;min-height:0;max-width:440px;border-radius:16px }
.login-intro { padding:28px }
.login-intro .brand { margin:0 }
.login-intro>.eyebrow,
.login-intro>h1,
.login-intro>p,
.login-illustration { display:none }
.login-panel { padding:32px 24px }
.login-panel h2 { font-size:24px }
.login-footnote { margin-top:28px }
#selectionDialog { padding:16px;width:calc(100vw - 16px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border-radius:12px }
#selectionDialog .selection-heading { padding-bottom:12px }
#selectionDialog h2 { font-size:18px }
.selection-page #txtSearch { flex:1; width:0; min-width:0; max-width:none; margin:0; }
.selection-page .btn { padding:10px 12px }
.selection-page .selection-actions { font-size:13px }
}
.approval-callout { display:flex;justify-content:space-between;align-items:center;gap:20px }
.approval-callout h2 { margin:0 0 6px }
.overview-table { background:white }
.overview-columns .table-scroll { margin:0;border:0;border-radius:0 }
@media(max-width:767px) {
.approval-callout { align-items:flex-start;flex-direction:column }
}
.calendar-date { border:0;background:transparent;border-radius:6px;color:inherit;min-height:36px;min-width:36px;font:600 14px inherit;cursor:pointer }
.calendar-date:hover { background:#e0ebfb }
.calendar-event { border:0;cursor:pointer;width:100% }
.calendar-holiday { display:block;font-size:12px;color:#7a6223;margin-top:8px }
.calendar-agenda-item ul { font-size:14px;padding-left:20px;margin-bottom:0 }
.cnonworking { background:#f8f6ed }
.calendar-toolbar input { width:200px }
.reset-shell { display:block;max-width:500px;min-height:0 }
.reset-shell .login-panel { padding:40px }
.reset-shell .brand { color:var(--navy);margin-bottom:32px }
.selection-search-label { display:block;font-weight:600;margin-bottom:8px }
.login-error:empty { display:none }
.login-error { display:block;padding:12px 14px;margin:0 0 20px;border:1px solid #f3c6c6;background:#fff5f5;border-radius:8px;color:#a82820;font-size:14px }
@media(max-width:767px) {
.reset-shell .login-panel { padding:28px 24px }
.selection-page .selection-actions { position:sticky;bottom:0;background:white;padding:12px 0 }
}
img.indicator { width:16px;height:16px;align-self:flex-start;flex:none }
.login-panel select,
.login-panel textarea,
.selection-page select,
.selection-page textarea { font:400 16px/1.4 "Segoe UI",system-ui,Arial,sans-serif }
input.date-postback-value { position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important }
/* Layout supplements retain domain-specific presentation; Bootstrap owns the grid. */
.app-main { padding:32px; } .form-grid { min-width:0; } .form-grid-wide { min-width:0; }
.app-main .TableCell.filter-grid { padding:28px; margin:0; background:white; border:1px solid var(--line); border-radius:0 0 10px 10px; }
.app-main .TableCell.filter-grid>.field,.app-main .TableCell.filter-grid>.form-actions { padding-right:calc(var(--bs-gutter-x)*.5); padding-left:calc(var(--bs-gutter-x)*.5); }
img.indicator { width:16px; height:16px; flex:none; } .field img.indicator { display:none; }
.application-form { max-width:1040px; }
@media(max-width:991px) { .app-main { padding:28px 24px; } }
@media(max-width:767px) { .app-main { padding:24px 16px; } .surface { padding:20px 16px; } .app-main .TableCell.filter-grid { padding:20px 8px; } .app-main .table { min-width:620px; } .title,h1 { font-size:24px; } .form-actions .btn { flex:1; } .filter-grid .form-actions .btn { flex:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
@media print { .app-sidebar,.app-topbar,.app-footer,.form-actions,.navControl,.skip-link,.calendar-toolbar { display:none!important; } .app-shell,.app-workspace { display:block; } .app-main { padding:0; } .surface,.table-responsive { box-shadow:none; border:0; overflow:visible; } .app-main .table { min-width:0; } .calendar-desktop { display:block; } .calendar-agenda { display:none; } body { background:white; color:black; } }

.btn-secondary { --bs-btn-color:#243e60; --bs-btn-bg:white; --bs-btn-border-color:#c3cfde; --bs-btn-hover-color:#243e60; --bs-btn-hover-bg:#f0f5fc; --bs-btn-hover-border-color:#9cb4d4; --bs-btn-active-bg:#e5edfa; --bs-btn-active-color:#243e60; }
.filter-toggle.btn-link { --bs-btn-color:var(--ink); --bs-btn-hover-color:var(--ink); text-decoration:none; padding:0; }
.filter-toggle::after { content:'\2304'; margin-left:auto; transition:transform .15s; }
.filter-toggle[aria-expanded=true]::after { transform:rotate(180deg); }
.approval-callout { flex-direction:row; }
@media(max-width:767px) { .approval-callout { flex-direction:column; } }

.badge[data-status=PEN] { color:#805900; background:#fff4d6; } .badge[data-status=APP] { color:#14653a; background:#e8f7ee; } .badge[data-status=REJ] { color:#a82820; background:#fff0ef; } .badge[data-status=CAN] { color:#526075; background:#edf0f5; }

/* Standalone employee calendar retains seven readable columns inside its scroll region. */
.table-responsive > .leave-calendar { min-width:840px; }
.table-responsive > .leave-calendar td { white-space:normal; overflow-wrap:anywhere; }
.table-responsive > .leave-calendar > tbody > tr:first-child a { white-space:nowrap; }

/* Leave tasks: compact filters, readable summaries and mobile request cards. */
.balance-hint { padding:12px 16px; background:#eef4ff; border-radius:8px; color:var(--ink); font-size:14px; margin-bottom:24px; }
.calculation-summary { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:10px; background:#f8faff; }
.calculation-summary h2 { font-size:14px; margin-bottom:8px; }
.duration-summary { display:block; font-size:24px; font-weight:650; line-height:1.4; }
.balance-impact { display:block; margin-top:8px; font-size:14px; color:var(--muted); }
.calculation-retry.btn { padding:8px 0 0; min-height:36px; font-size:13px; }
.calculation-feedback { font-size:14px; margin:12px 0 0; }
.calculation-feedback:empty { display:none; }
.request-filters.surface { padding:16px 20px; margin-bottom:16px; }
.status-shortcuts { display:flex; gap:8px; flex-wrap:wrap; }
.status-shortcuts .btn { padding:8px 14px; }
.advanced-filters { margin-top:12px; }
.advanced-filters summary { cursor:pointer; color:var(--bs-link-color); font-size:14px; padding:8px 0; width:fit-content; }
.advanced-filters[open] summary { margin-bottom:12px; }
.request-list .table-responsive { margin-top:12px; }
.request-list .empty-grid-row { display:none; }
.request-details .field,.response-history .field { gap:4px; }
.request-details .form-label,.response-history .form-label { color:var(--muted); font-size:13px; }
.read-value { display:block; min-height:24px; font-size:16px; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.request-details .badge { align-self:flex-start; font-size:14px; padding:8px 12px; }
.response-history .form-grid { border-left:2px solid #cbd8eb; padding-left:16px; margin-bottom:16px; }
.response-history .layout-table { width:100%; }
.response-history .field { margin-bottom:0; }
.balance-breakdown summary { cursor:pointer; font-size:14px; color:var(--bs-link-color); padding:10px 0; }
.request-balance { display:block; margin-bottom:12px; font-size:16px; }
@media(max-width:767px) {
 .request-filters.surface { padding:12px 16px; }
 .status-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .status-shortcuts .btn { padding:8px 6px; }
 .request-list .table-responsive { overflow:visible; border:0; border-radius:0; }
 .request-list table.table { display:block; width:100%!important; min-width:0; margin:0; border:0; }
 .request-list table.table > tbody { display:block; }
 .request-list table.table > tbody > tr:first-child { display:none; }
 .request-list .request-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:12px; padding:16px; border:1px solid var(--line); border-radius:10px; background:white; }
 .request-list .request-row > td { display:block; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; font-size:14px; overflow-wrap:anywhere; }
 .request-list .request-row > td::before { content:attr(data-label); display:block; color:var(--muted); font-size:12px; font-weight:500; margin-bottom:4px; }
 .request-list td[data-field="leave-type"] { order:-3; font-weight:600; font-size:16px; }
 .request-list td[data-field="status"] { order:-2; text-align:right; }
 .request-list td[data-field="status"]::before { display:none; }
 .request-list td[data-field="applicant"] { order:-1; grid-column:1/-1; }
 .request-list td[data-field=""] { order:5; grid-column:1/-1; }
 .request-list td[data-field=""]::before { display:none; }
 .request-list td[data-field=""] a { display:block; padding:10px 0 0; min-height:44px; font-weight:600; }
 .request-list td[data-field="submitted"] { display:none; }
 .request-list td[data-field="approver"] { grid-column:1/-1; }
 .request-details .form-grid > .col-md-6,.response-history .form-grid > .col-md-6 { width:50%; }
 .request-details .read-value,.response-history .read-value { font-size:14px; }
}

/* Personal leave stays distinct from colleague availability. */
.leave-calendar .calendar-own-day { box-shadow:inset 0 0 0 2px #8bb3e8 }
.calendar-own-leave { background:#204e89;color:#fff;border-radius:5px;padding:4px 6px;font-weight:600 }
.calendar-event.calendar-own-leave { background:#204e89;color:#fff;font-weight:600!important }
.calendar-event.calendar-colleagues { background:#f1f3f5;color:#526071 }
.calendar-event:focus-visible,.calendar-date:focus-visible { outline:3px solid #204e89;outline-offset:2px }
.calendar-toolbar .calendar-personal-filter { display:flex;align-items:center;gap:8px;margin:0;padding:10px 0;cursor:pointer }
.calendar-toolbar .form-check-input { width:1em;float:none;margin:0 }
.calendar-agenda-item li.calendar-own-leave { list-style:none;margin:6px 0 6px -20px;overflow-wrap:anywhere }

/* Holiday maintenance: yearly rows collapse into cards on smaller screens. */
.holiday-filters { display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:24px }
.holiday-filters > div:first-child { width:110px }
.holiday-filters > div:nth-child(2) { flex:1;min-width:200px }
.holiday-view-toolbar { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px }
.holiday-view-toolbar > p { margin-left:auto }
.holiday-month { margin-top:28px }
.holiday-month h2 { font-size:18px;margin-bottom:12px }
.holiday-list { list-style:none;padding:0;margin:0 }
.holiday-row { display:grid;grid-template-columns:130px minmax(0,1fr) 185px auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line) }
.holiday-row time { color:var(--muted);font-size:14px }
.holiday-description { overflow-wrap:anywhere;font-size:15px }
.holiday-type { display:inline-block;justify-self:start;padding:5px 8px;border-radius:5px;font-size:12px;line-height:1.4;white-space:normal }
.holiday-nonworking,.calendar-event.holiday-nonworking { background:#f6edcf;color:#705514 }
.holiday-working,.calendar-event.holiday-working { background:#e9f1ff;color:#204e89 }
.holiday-month-toolbar h2 { font-size:20px;margin:0 }
.holiday-calendar-scroll { overflow-x:auto }
.holiday-calendar-scroll .leave-calendar { min-width:650px }
.holiday-other-month { background:#f8f9fb;color:#7b8798 }
.holiday-editor { max-width:800px }
.holiday-day-options { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.holiday-day-options label { margin:0 24px 0 0 }
.holiday-day-options input { flex:none;margin:0 }
.holiday-day-options br { display:none }
#holidayTypeHelp { margin-top:12px }
#holidayTypeHelp p { margin-bottom:6px }
.holiday-remove { border-top:1px solid var(--line);margin-top:28px;padding-top:24px }
.holiday-remove h2 { font-size:16px }
.holiday-remove p { font-size:14px;color:var(--muted) }
@media(max-width:767px) {
 .holiday-filters > div { width:100%!important;flex:auto!important;min-width:0!important }
 .holiday-filters > button { flex:1 }
 .holiday-row { grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:18px 0 }
 .holiday-row time { grid-column:1 }
 .holiday-description { grid-column:1/-1;grid-row:2 }
 .holiday-row .holiday-type { grid-column:1;grid-row:3 }
 .holiday-row > a { grid-column:2;grid-row:1 }
 .holiday-view-toolbar > p { width:100%;margin-left:0 }
 .holiday-day-options { display:grid;grid-template-columns:auto 1fr }
 .holiday-day-options label { margin:0 }
 .holiday-month-toolbar { gap:10px }
 .holiday-month-toolbar h2 { order:-1;width:100% }
}

/* Focused task controls for the leave flow. */
.list-sort { display:flex; align-items:center; gap:12px; margin:12px 0; }
.list-sort .form-label { margin:0; white-space:nowrap; }
.list-sort .form-select { width:auto; max-width:100%; }
.stat-link { display:block; width:fit-content; text-decoration:none; }
.stat-link:hover { text-decoration:underline; }
.calculation-summary { margin-top:16px; padding:16px; }
textarea.application-remarks { min-height:96px; }
.calendar-mobile-help { display:none; }
.calendar-secondary { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
@media(max-width:767px) {
 .calendar-toolbar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; }
 .calendar-toolbar .btn { min-width:0; }
 .calendar-toolbar input[type=month] { width:100%; min-width:0; }
 .calendar-nav-word,.calendar-desktop-help,.calendar-desktop-details { display:none; }
 .calendar-mobile-help { display:block; }
 .calendar-secondary { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .calendar-secondary .calendar-personal-filter { grid-column:1/-1; grid-row:2; }
 .calendar-secondary input[type=submit] { grid-column:2; grid-row:1; }
 .list-sort .form-select { flex:1; min-width:0; }
}

/* Request-scoped approval availability; no nested layout-table adapter. */
.availability-expand > summary { cursor:pointer; color:var(--bs-link-color); padding:10px 0; }
.availability-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:16px 0; }
.availability-toolbar > div:first-child { min-width:180px; flex:1; }
.availability-month-actions { display:flex; flex-wrap:wrap; gap:8px; }
.availability-legend { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; }
.availability-review { background:#e8f0ff; border-left:3px solid #2563eb; color:#173c75; padding:5px 8px; border-radius:4px; font-weight:600; }
.availability-month { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; }
.availability-month th,.availability-month td { border:1px solid var(--line); padding:8px; vertical-align:top; overflow-wrap:anywhere; }
.availability-month th { background:#f6f8fc; }
.availability-month td { height:100px; }
.availability-month .availability-nonworking { background:#f1f3f6; }
.availability-month .availability-request-day { outline:2px solid #2563eb; outline-offset:-2px; }
.availability-other-month .availability-day-number { color:#6b7280; }
.availability-month-title { font-size:18px; margin:18px 0 12px; }
.availability-entry,.availability-review,.availability-holiday { margin:6px 0; font-size:12px; }
.availability-entry .badge { white-space:normal; }
.availability-holiday { color:#675014; }
.availability-scope { font-size:13px; color:var(--muted); margin-top:16px; }
.availability-agenda { display:none; }
.availability-summary { font-weight:600; }
@media(max-width:767px) {
 .availability-desktop { display:none; }
 .availability-agenda { display:block; }
 .availability-agenda-day { padding:12px 0; border-bottom:1px solid var(--line); }
 .availability-agenda-day h4 { font-size:15px; }
 .availability-agenda .availability-entry,.availability-agenda .availability-review { font-size:14px; }
 .availability-toolbar > div { width:100%; }
 .availability-toolbar .form-control { width:100%; }
 .availability-month-actions .btn { flex:1; padding:8px; font-size:13px; }
}

.availability-feedback:empty { display:none; }
.availability-feedback { font-size:14px; margin-top:12px; }