/* Light office layout: the existing role checks and mobile navigation remain in app.js. */
:root{font-family:"Segoe UI",Arial,sans-serif;color:#273b4b;background:#f7f8fa;--office-blue:#0878b4;--office-green:#42936e}
body{background:#f7f8fa}a,.linkbutton{color:var(--office-blue)}
aside{background:#fafbfc;color:#465565;border-right:1px solid #d6dce2;padding:22px 12px 16px;box-shadow:1px 0 5px #243a5010}
.brand{font-size:24px;color:#314b61;letter-spacing:-.6px;padding:0 8px}.brand span{color:#0878b4}.brand small{color:#6d8091;font-size:10px;letter-spacing:1.4px}
.nav-group{margin-top:6px;border-bottom:1px solid #e2e6ea;padding-bottom:5px}.nav-group>summary{color:#536779;border-radius:3px;letter-spacing:.35px;padding:10px 9px;font-weight:650}.nav-group>summary::after{color:#8295a4}.nav-group>summary:hover,.nav-group>summary:focus-visible{background:#eaf0f5;color:#176792}
nav button{color:#3e5364;border-radius:3px;padding:9px 11px;gap:10px;margin:1px 0}nav button>span{color:#0878b4;font-size:16px;min-width:17px}nav button.active{background:#e6f1f8;color:#066ca2;border-left:3px solid #0781bd;font-weight:650}nav button.active>span{color:#0878b4}nav button:hover{background:#edf2f6;color:#086d9d}
.sidefoot{color:#7a8995;padding:14px 8px 0;font-size:10px}.nav-close{color:#34516b}
header{box-shadow:0 1px 5px #243a5010;border-bottom:1px solid #dbe1e7;background:#fff}header small{color:#7b8c99}.avatar{background:#e6f3fa;color:#0878b4}
h1{font-size:25px;font-weight:650;letter-spacing:-.45px}h2{font-size:15px;font-weight:650}.eyebrow{color:#738b9e;letter-spacing:.7px}.heading{margin-bottom:20px}.panel,.card{border-radius:5px;border-color:#dbe2e8;box-shadow:0 1px 2px #243a5004}.panel-title{padding:15px 18px;background:#fdfefe;border-color:#e3e8ed}.panel-body{padding:18px}.card{padding:18px}.number{font-size:28px}.card small{color:#718597}
button{border-radius:4px;font-weight:500;border-color:#ccd7e0;color:#36536a}button.primary{background:#087bb9;border-color:#087bb9}button.primary:hover{background:#07699e}.linkbutton{background:transparent;border-color:transparent}.linkbutton:hover{background:#edf5fa}
input,select,textarea{border-radius:3px;border-color:#ccd7e0}input:focus,select:focus,textarea:focus{outline:2px solid #6faedc;outline-offset:1px}.notice{border-radius:4px}.badge{border-radius:3px;font-size:11px}
.responsive-table th{text-transform:none;letter-spacing:0;background:#f1f4f7;color:#546c7d;font-size:12px}.responsive-table tbody tr:hover{background:#f5f9fc}.workbook thead th{background:#f1f4f7}.workbook th:first-child{text-transform:none;letter-spacing:0}.workbook .workbook-total{background:#eaf3f9}.workbook .has-absence{background:#eaf4ee}.workbook-details>summary{border-radius:4px}
.approval-flow{list-style:none;padding:0;margin:16px 0}.approval-flow li{display:grid;grid-template-columns:minmax(130px,1fr) minmax(90px,1fr);gap:6px 12px;padding:12px 14px;border:1px solid #dce3ea;border-left:4px solid #a9b7c2;border-radius:4px;margin:8px 0;background:#f8fafb}.approval-flow li span{font-size:12px;color:#728393}.approval-flow li small{grid-column:1/-1;white-space:normal;overflow-wrap:anywhere}.approval-flow .flow-pending{border-left-color:#0982bc;background:#edf7fc}.approval-flow .flow-pending span{color:#0872aa;font-weight:650}.approval-flow .flow-approved{border-left-color:#4d9d77;background:#f0f8f3}.approval-flow .flow-skipped{opacity:.75}
@media(min-width:1101px){header{height:66px;padding:0 28px}.content{padding:25px 28px;max-width:1800px}.responsive-table td,.responsive-table th{padding:11px 16px}.nav-group>summary{min-height:36px}nav button{min-height:35px}.toolbar{gap:8px}.panel{margin-bottom:18px}.cards{gap:14px}}
@media(max-width:1100px){aside{box-shadow:5px 0 25px #243a5020}.nav-group>summary,nav button{min-height:44px}.panel-title{padding:16px}.content{background:#f7f8fa}}
@media(max-width:600px){.brand{font-size:23px}.approval-flow li{grid-template-columns:1fr}.approval-flow li small{grid-column:1}h1{font-size:23px}.panel-body{padding:16px}}
@media print{.panel,.card{box-shadow:none}.panel-title{background:#fff}.approval-flow li{break-inside:avoid}}

nav{overflow-x:hidden}.nav-group{min-width:0}nav button{min-width:0;white-space:normal}.nav-group>summary{overflow-wrap:normal}
.role-switch{min-width:145px;font-size:10px;color:#647e91;gap:3px;font-weight:600}.role-switch select{padding:7px 10px;background:#eef6fb;border-color:#8fbad5;color:#075e8d;font-size:13px;font-weight:650;min-height:36px}.role-switch select:disabled{opacity:.65}
@media(max-width:600px){header .profile .role-switch{flex-basis:100%;width:100%;font-size:11px}.role-switch select{width:100%;min-height:44px;font-size:16px}}
@media print{.role-switch{display:none!important}}

.month-flow{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;padding:18px;margin:0;counter-reset:none}.month-flow li{padding:14px;border:1px solid #d9e4ec;background:#f3f8fb;border-radius:5px;font-size:13px}.task-list{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.task-list p{margin:0}.calculation-details{margin:18px 0;border:1px solid #dbe2e8;border-radius:5px}.calculation-details>summary{padding:14px;cursor:pointer;color:#086da3;font-weight:600}.mobile-agenda{display:none}[data-card-tab][aria-selected=true]{background:#e6f1f8;border-color:#087bb9;color:#086da3}[data-card-panel]{margin-top:18px}.agenda-day{display:grid;gap:5px;padding:14px;border-bottom:1px solid #dbe2e8}.agenda-day small{color:#526d80}@media(max-width:600px){.mobile-agenda{display:block;max-height:340px;overflow:auto;padding:14px}.mobile-agenda>summary{font-weight:600;padding-bottom:10px}.month-flow{grid-template-columns:1fr}.workbook-scroll{max-height:320px}.toolbar button{min-height:44px}.calculation-details .tablewrap{max-width:100%;overflow:auto}}
@media print{.mobile-agenda,.month-flow,.task-list{display:none}.calculation-details{break-inside:auto}}

.chat-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}.chat-topics{padding:10px;display:grid;gap:6px;max-height:650px;overflow:auto}.chat-topics button{text-align:left;display:grid;gap:6px;white-space:normal}.chat-topics small{color:#647b8a}.chat-topics .selected{background:#e7f3fb;border-color:#087bb9}.chat-messages{max-height:580px;overflow:auto;display:grid;gap:12px;padding:4px 0 18px}.chat-message{padding:14px;border:1px solid #dce5ec;border-radius:7px;background:#f8fafc;min-width:0}.chat-message.own{background:#edf7fc}.chat-message header{height:auto;padding:0;position:static;display:flex;flex-wrap:wrap;gap:12px;box-shadow:none;border:0;background:none;justify-content:space-between}.chat-message time{font-size:11px;color:#647b8a}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0}@media(max-width:700px){.chat-layout{grid-template-columns:1fr}.chat-topics{max-height:210px}.chat-messages{max-height:480px}.chat-message{padding:12px}}
/* Compact employee-portal layout, based on the reference screenshots. */
@media screen{
:root{font-family:Arial,"Segoe UI",sans-serif;color:#343b40;background:#fff;--office-blue:#0876ad;--office-green:#3e956c}
body{background:#fff}
#main-navigation{background:#f8f8f8;border-right:1px solid #cecece;box-shadow:none;padding:0 0 12px}
#main-navigation .brand{padding:17px 15px 16px;font-size:21px;letter-spacing:-.5px;border-bottom:1px solid #d1d1d1;background:#fff}
#main-navigation .brand small{font-size:9px;letter-spacing:1px;margin-top:5px}
#main-navigation nav{padding:0}
#main-navigation .nav-group{margin:0;padding:0;border:0}
#main-navigation .nav-group>summary{position:relative;padding:10px 14px 10px 27px;margin:0;border-radius:0;border-bottom:1px solid #cfcfcf;background:#f7f7f7;color:#086b9e;min-height:36px;letter-spacing:0;text-transform:none;font-size:13px;font-weight:400;text-decoration:underline}
#main-navigation .nav-group>summary::after{content:'▸';position:absolute;left:11px;right:auto;color:#93999c;font-size:12px}
#main-navigation .nav-group[open]>summary::after{transform:rotate(90deg)}
#main-navigation nav button{padding:8px 12px 8px 16px;min-height:35px;margin:0;border-radius:0;border-bottom:1px solid #ddd;background:#fff;font-size:12px;font-weight:400;color:#343f47;gap:10px;line-height:1.4}
#main-navigation nav button>span{color:#439a71;font-size:15px;min-width:17px}
#main-navigation nav button:hover{background:#edf3f6;color:#076d9d}
#main-navigation nav button.active{background:#e8eef1;border-left:3px solid #0781b9;padding-left:13px;color:#075f8d;font-weight:600}
#main-navigation .sidefoot{padding:13px 14px;font-size:10px;background:#f8f8f8}
#app>main>header{background:#fff;border-bottom:1px solid #ccc;box-shadow:0 2px 4px #0000000d}
#app>main>header strong{font-size:13px;font-weight:500}
#app>main>header small{font-size:10px;color:#707d86}
.role-switch select{background:#0877b3;border-color:#0877b3;color:#fff;border-radius:0;font-weight:400;font-size:12px}
.avatar{border-radius:2px;background:#edf3f6;color:#0877b3}
.content{background:#fff;max-width:none}
.heading{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #ddd}
h1{font-size:21px;letter-spacing:0;font-weight:500;margin:4px 0 7px}h2{font-size:14px;font-weight:600}
.eyebrow{font-size:10px;letter-spacing:.3px;color:#6b7e8c}.muted{color:#6d7a85;font-size:12px;line-height:1.6}
.panel,.card{border-radius:0;box-shadow:none;border-color:#cecece}.panel-title{padding:10px 12px;background:#f8f8f8;border-bottom:1px solid #d4d4d4}.panel-body{padding:14px}
.cards{gap:10px;margin:14px 0}.card{padding:13px;border-top:2px solid #459575;background:#fcfdfc}.number{font-size:25px;margin:9px 0 7px;font-weight:500}.card .tag{color:#52735d}
button{border-radius:2px;border-color:#c7cbce;padding:7px 12px;font-size:12px;font-weight:400;background:linear-gradient(#fff,#f1f1f1);color:#36505e;box-shadow:none}button.primary{background:#0878b4;border-color:#0878b4;color:#fff}button.primary:hover{background:#07679b}
.linkbutton{border:0;box-shadow:none;background:none;color:#0873a8;text-decoration:underline;padding:4px 7px}
.toolbar{gap:6px;margin-bottom:12px}.toolbar>button[aria-pressed=true],[data-card-tab][aria-selected=true]{background:#e5e5e5;color:#285567;border-color:#bfc6cb;border-bottom:2px solid #087bb9}
input,select,textarea{border-radius:1px;border-color:#c5c9cc;background:#fff}input:focus,select:focus,textarea:focus{outline:2px solid #6daed1;outline-offset:1px}
.responsive-table{border-collapse:collapse}.responsive-table th{background:#f6f6f6;font-size:12px;font-weight:400;color:#47616f;border:1px solid #ccc;text-transform:none;letter-spacing:0}.responsive-table td{border:1px solid #d4d4d4;color:#356a49;font-size:12px}.responsive-table tbody tr:nth-child(even){background:#fafafa}.responsive-table tbody tr:hover{background:#eef6fa}.responsive-table td button{min-height:28px}
.tablewrap{border-bottom:0}.badge{border-radius:2px;padding:3px 7px;font-size:11px;white-space:normal}
.notice{border-radius:0;padding:11px 13px;font-size:12px;line-height:1.7}
.workbook thead th{background:#f2f2f2;color:#607380;font-weight:400;border-color:#ccc}.workbook td,.workbook th{border-color:#d0d0d0}.workbook th:first-child{background:#fafafa}.workbook .weekend{background:#f0e8dc}.workbook .workbook-total{background:#edf3f1}.workbook-legend{padding:10px 12px;background:#fafafa;border-top:1px solid #ddd}
.month-flow{gap:0;padding:0;background:#f5f5f5}.month-flow li{border:0;border-right:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;border-radius:0;background:transparent;padding:12px;font-size:12px}
.calculation-details,.workbook-details>summary{border-radius:0}.calculation-details>summary{font-size:12px;padding:10px;background:#f7f7f7}
dialog{border-radius:3px;border-color:#b8c3ca}dialog .panel-title{background:#f2f3f4}dialog .actions{padding-top:12px}
.chat-topics button,.chat-message{border-radius:2px}.chat-message{background:#f8faf9}.chat-message.own{background:#edf5f9}
}
@media screen and (min-width:1101px){
#main-navigation{width:240px}#app>main{margin-left:240px}#app>main>header{height:54px;padding:0 20px;gap:12px}.content{padding:20px 22px}.responsive-table th,.responsive-table td{padding:7px 10px}.panel{margin-bottom:15px}.formgrid{gap:13px}.profile{gap:9px}.profile button{padding:6px 10px}.role-switch{min-width:140px}.role-switch select{min-height:30px;padding:5px 8px}.avatar{width:30px;height:30px}.calendar .calhead{padding:8px}.calendar .day{min-height:85px}
}
@media screen and (max-width:1100px){
#main-navigation{padding-top:44px;width:min(300px,88vw)}#main-navigation .brand{padding-top:12px}#main-navigation .nav-close{color:#36505e;background:#fff;border:1px solid #ccd1d4}#main-navigation nav button,#main-navigation .nav-group>summary{min-height:44px}#app>main>header{min-height:64px}.content{padding:18px}
}
@media screen and (max-width:600px){
.content{padding:12px}h1{font-size:20px}.heading{padding-bottom:10px}.heading>button,.toolbar button,.profile button{min-height:44px}input,select,textarea,.role-switch select{font-size:16px;min-height:44px}.panel-title{padding:12px}.panel-body{padding:13px}.responsive-table td{font-size:13px}.responsive-table td button{min-height:44px}.cards{gap:8px}.card{padding:12px}.number{font-size:23px}.month-flow li{padding:12px}.linkbutton{padding:9px 7px}.notice{font-size:12px}dialog{border-radius:3px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#main-navigation .external-system-link{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;border-bottom:1px solid #ddd;background:#fff;color:#086d9e;font-size:12px;line-height:1.5;text-decoration:none;min-height:36px}#main-navigation .external-system-link>span:first-child{color:#439a71;width:17px;flex-shrink:0}#main-navigation .external-system-link>span:nth-child(2){flex:1;overflow-wrap:anywhere}#main-navigation .external-system-link small{color:#758995}#main-navigation .external-system-link:hover{background:#edf3f6;text-decoration:underline}#main-navigation .external-system-link:focus-visible{outline:2px solid #087bb9;outline-offset:-2px}@media(max-width:1100px),(pointer:coarse){#main-navigation .external-system-link{min-height:44px}}

#version-update-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:2147483647;max-width:calc(100vw - 24px);width:480px;padding:12px 16px;background:#eef6fb;border:1px solid #8eb7ce;color:#24516b;box-shadow:0 3px 12px #0002;font-size:13px;line-height:1.6;pointer-events:none}@media print{#version-update-notice{display:none}}

dialog.file-preview{width:min(1200px,96vw);max-width:96vw;height:min(900px,94dvh);max-height:94dvh;padding:0;overflow:hidden;display:none;grid-template-rows:auto minmax(0,1fr) auto}dialog.file-preview[open]{display:grid}.file-preview .panel-title{flex-wrap:nowrap}.file-preview .panel-title h2{overflow-wrap:anywhere}.file-preview .panel-title button{min-width:44px;min-height:44px}.file-preview-content{min-height:0;overflow:auto;background:#eef0f2;display:flex;align-items:center;justify-content:center}.file-preview-content iframe{border:0;width:100%;height:100%;background:#fff}.file-preview-content img,.file-preview-content video{display:block;max-width:100%;max-height:100%;object-fit:contain}.file-preview-content p{padding:20px}.file-preview-actions{padding:12px 16px;border-top:1px solid #ccc;background:#fff}.file-preview-actions a{display:inline-block;min-height:32px;padding:6px}.file-preview::backdrop{background:#182737b3}@media(max-width:600px){dialog.file-preview{width:98vw;max-width:98vw;height:94dvh}.file-preview-actions a{min-height:44px}}

.calendar .day.calendar-weekend{background:#f1f4f8}.calendar .day.calendar-holiday,.workbook .calendar-holiday{background:#fff0ed!important;color:#a53225}.calendar-day-label{display:block;font-size:10px;line-height:1.3;margin:4px 0 7px;color:#7b5260;overflow-wrap:anywhere}.calendar .calendar-holiday>strong{color:#a53225}

.heading>.chat-heading-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto;flex-shrink:0;align-self:flex-start}@media(max-width:700px){.heading>.chat-heading-actions{margin-left:0;justify-content:flex-start;flex-shrink:1;width:100%}}

/* Training is a compact top dock on touch devices; dialogs use the remaining screen. */
#training-details{display:none}
body.training-mobile #training-coach,body.training-mobile #training-coach.training-top{top:32px;right:8px;left:8px;bottom:auto;width:auto;max-width:none;max-height:38dvh;box-sizing:border-box;padding:10px;overflow:auto;border-radius:5px}
body.training-mobile #training-coach:not(.training-expanded)>p,body.training-mobile #training-coach:not(.training-expanded)>.training-jump-label{display:none}
body.training-mobile #training-details{display:inline-block;margin:0 0 4px}
body.training-mobile #training-coach h2{font-size:14px;line-height:1.3;margin:5px 0}
body.training-mobile #training-coach .guide-progress{margin:4px 0;height:3px}
body.training-mobile #training-coach button{min-height:36px;padding:6px 9px;font-size:12px}
body.training-mobile #training-coach .toolbar,body.training-mobile #training-coach .guide-actions{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0}
body.training-mobile #training-coach .toolbar button,body.training-mobile #training-coach .guide-actions button{flex:1}
body.training-mobile dialog[open]{top:var(--training-reserve,220px);bottom:auto;margin:8px auto;max-height:calc(100dvh - var(--training-reserve,220px) - 16px)}
body.training-mobile dialog[open] .panel-body{max-height:calc(100dvh - var(--training-reserve,220px) - 85px);overflow:auto}
body.training-mobile .content{padding-top:var(--training-reserve,220px)}
body.training-mobile aside.open{padding-top:var(--training-reserve,220px);box-sizing:border-box}
body.training-mobile :is(input,select,textarea,button){scroll-margin-top:var(--training-reserve,220px);scroll-margin-bottom:20px}