/* Employee dark surfaces: scoped to the employee portal only. */
html body[data-employee-theme="dark"] {
 --employee-surface:#192637;
 --employee-field:#111c29;
 --employee-line:#344253;
 --employee-text:#edf3ff;
 --employee-muted:#b3bfd0;
}
html body[data-employee-theme="dark"] #notificationPanel.notification-panel,
html body[data-employee-theme="dark"] #notificationPanel .employee-notification {
 background:var(--employee-surface)!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important;
}
html body[data-employee-theme="dark"] #notificationPanel .employee-notification.unread {
 background:#20344b!important;border-radius:12px!important;padding:14px!important;
}
html body[data-employee-theme="dark"] #notificationPanel :is(b,h2,h3) {color:var(--employee-text)!important}
html body[data-employee-theme="dark"] #notificationPanel :is(p,small,.muted,.employee-notification-meta) {color:var(--employee-muted)!important;opacity:1!important}
html body[data-employee-theme="dark"] #notificationPanel :is(.notification-panel-head,.notification-panel-actions) {border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #notificationPanel :is(button.secondary,.notification-panel-close) {background:#26374d!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #notificationPanel .employee-notification-delete {background:#482730!important;color:#ffb3bc!important;border-color:#75404c!important}
html body[data-employee-theme="dark"] #header .head-actions>button.secondary {background:#223547!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}

html body[data-employee-theme="dark"] #app main #week :is(.week-table-card,.week-stat,.week-actions-card,.week-row,.week-rate-breakdown,.week-expenses-summary) {
 background:var(--employee-surface)!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important;
}
html body[data-employee-theme="dark"] #app main #week .week-total {background:#223b59!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main #week :is(.week-date,.week-day-details,.week-notice,.employee-expense-row) {background:var(--employee-field)!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main #week :is(h2,h3,h4,b,strong,.week-time,.week-day) {color:var(--employee-text)!important}
html body[data-employee-theme="dark"] #app main #week :is(small,.muted,.small,.week-rate-breakdown>span,.week-notice span,.week-stat em,.week-stat small) {color:var(--employee-muted)!important}
html body[data-employee-theme="dark"] #app main #week :is(button.secondary,.week-details-toggle,.week-controls>button) {background:#26374d!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main #week .week-row-status {color:var(--employee-muted)!important}
html body[data-employee-theme="dark"] #app main #week .week-row-status.approved {color:#81dfad!important}
html body[data-employee-theme="dark"] #app main #week .week-row-status.edited {color:#ffd285!important}
html body[data-employee-theme="dark"] #app main #week .week-row-status.waiting {color:#ffabb5!important}
html body[data-employee-theme="dark"] #app main #week :is(.week-status-pill,.week-status-pill span) {background:#26374d!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main :is(#hours,#week) :is(input,select,textarea) {background:var(--employee-field)!important;color:var(--employee-text)!important;-webkit-text-fill-color:var(--employee-text)!important;border-color:var(--employee-line)!important;color-scheme:dark!important}
html body[data-employee-theme="dark"] #app main :is(#hours,#week) :is(input,textarea)::placeholder {color:#a5b4c6!important;-webkit-text-fill-color:#a5b4c6!important;opacity:1!important}
html body[data-employee-theme="dark"] #app main :is(#hours,#week) input::file-selector-button {background:#26374d!important;color:var(--employee-text)!important;border:1px solid var(--employee-line)!important;border-radius:8px;padding:7px 10px}
html body[data-employee-theme="dark"] #app main #hours #addHoursCard :is(.add-hours-calculation,.nightout-toggle,.hours-card,.additional-hours-card,.st-card,.employee-expense-form) {background:var(--employee-field)!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main #hours #addHoursCard :is(h2,h3,h4,b,strong,label,.welcome) {color:var(--employee-text)!important}
html body[data-employee-theme="dark"] #app main #hours #addHoursCard :is(p,small,.hours-help,.hint,.muted) {color:var(--employee-muted)!important}
html body[data-employee-theme="dark"] #app main #hours :is(.entry-card,.employee-expense-row,.quick-card) {background:var(--employee-surface)!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main :is(#hours,#week) button.danger {background:#482730!important;color:#ffb3bc!important;border-color:#75404c!important}
html body[data-employee-theme="dark"] #app main :is(#hours,#week) :is(button,input,select,textarea):focus-visible,
html body[data-employee-theme="dark"] #notificationPanel button:focus-visible {outline:2px solid #93c5fd!important;outline-offset:3px!important}

html body[data-employee-theme="dark"] #app main #hours #addHoursCard #employeeDailyPayNotice {background:#223b59!important;color:#c5dfff!important}
html body[data-employee-theme="dark"] #app main #week .week-row.not-worked {opacity:1!important}
html body[data-employee-theme="dark"] #app main #week .week-row.not-worked :is(b,strong) {color:var(--employee-muted)!important}

html body[data-employee-theme="dark"] #app main #week .week-head .week-controls>.week-date {background:var(--employee-field)!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}
html body[data-employee-theme="dark"] #app main #week .week-head .week-controls>.week-date>b {color:var(--employee-text)!important}
html body[data-employee-theme="dark"] #app main #week .week-head .week-controls>button {background:#26374d!important;color:var(--employee-text)!important;border-color:var(--employee-line)!important}

/* My Hours — mobile row polish from the 13 Oct reference screen. */
@media (max-width:700px){
  html:root body[data-employee-theme="dark"] #app main #week .week-table-card{
    position:relative!important;
    isolation:isolate!important;
    border-color:#3d5570!important;
    box-shadow:0 8px 24px rgba(3,12,25,.22)!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-table-card::before,
  html:root body[data-employee-theme="dark"] #app main #week .week-table-card::after{
    content:""!important;
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    width:4px!important;
    z-index:5!important;
    pointer-events:none!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-table-card::before{
    left:0!important;
    background:#2f8cff!important;
    box-shadow:1px 0 8px rgba(47,140,255,.18)!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-table-card::after{
    right:0!important;
    background:#ff9f2f!important;
    box-shadow:-1px 0 8px rgba(255,159,47,.16)!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-rows{
    padding-left:0!important;
    padding-right:0!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-day{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    padding:6px 7px!important;
    box-sizing:border-box!important;
    border:1px solid #416583!important;
    border-radius:9px!important;
    background:linear-gradient(180deg,#284a68 0%,#213c55 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 7px rgba(0,0,0,.18)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:start!important;
    overflow:hidden!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-day b{
    color:#f5f9ff!important;
    font-weight:800!important;
    line-height:1.1!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-day small{
    color:#c5d5e7!important;
    opacity:1!important;
    line-height:1.1!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row.not-worked .week-day{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    background:linear-gradient(180deg,#233b52 0%,#1d3246 100%)!important;
    border-color:#36536d!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 4px rgba(0,0,0,.12)!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row:has(.week-row-actions:not(:empty)) .week-day{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row-status{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    justify-self:end!important;
    width:max-content!important;
    max-width:100%!important;
    min-height:21px!important;
    padding:3px 7px!important;
    border:1px solid #49627d!important;
    border-radius:999px!important;
    background:#20364c!important;
    color:#dbe8f7!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    opacity:1!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row-status.saved{
    background:#173d35!important;
    border-color:#2e725c!important;
    color:#a8f0ce!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row-status.approved{
    background:#174636!important;
    border-color:#2f8060!important;
    color:#b8f3d4!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row-status.edited{
    background:#493a1d!important;
    border-color:#8b6b2e!important;
    color:#ffe0a1!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row-status.waiting{
    background:#4a2f36!important;
    border-color:#7b4c58!important;
    color:#ffc4cc!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row.not-worked .week-row-status{
    background:#26384b!important;
    border-color:#40556c!important;
    color:#c2cedd!important;
  }
}

/* Keep the Week view painted while Month data is loading. The month pane replaces it only when ready, avoiding the visible flash. */
@media (max-width:700px){
  html:root body #app main #week .week-page.period-host.period-month-active:has(> .period-month-pane .period-month-body > .period-note[role="status"]) > .period-month-pane{
    display:none!important;
  }
  html:root body #app main #week .week-page.period-host.period-month-active:has(> .period-month-pane .period-month-body > .period-note[role="status"]) > .week-head{
    display:flex!important;
  }
  html:root body #app main #week .week-page.period-host.period-month-active:has(> .period-month-pane .period-month-body > .period-note[role="status"]) > .week-table-card{
    display:block!important;
  }
  html:root body #app main #week .week-page.period-host.period-month-active:has(> .period-month-pane .period-month-body > .period-note[role="status"]) > .week-actions-card{
    display:grid!important;
  }
}

/* My Hours — final mobile geometry lock. Later HGVera styles use 84px only on worked rows; lock both worked and not-worked rows to the same geometry and make the week frame full-bleed. */
@media (max-width:700px){
  html:root body[data-employee-theme="dark"] #app main #week .week-table-card{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-rows{
    padding-left:0!important;
    padding-right:0!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row,
  html:root body[data-employee-theme="dark"] #app main #week .week-row.week-day-row,
  html:root body[data-employee-theme="dark"] #app main #week .week-row:has(.week-row-actions:not(:empty)){
    grid-template-columns:78px minmax(0,1fr) auto!important;
    column-gap:10px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    box-sizing:border-box!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-row .week-day,
  html:root body[data-employee-theme="dark"] #app main #week .week-row.week-day-row .week-day,
  html:root body[data-employee-theme="dark"] #app main #week .week-row.not-worked .week-day{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    padding:6px 7px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    align-self:center!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-day :is(b,small){
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-day b{
    font-size:12px!important;
  }
  html:root body[data-employee-theme="dark"] #app main #week .week-day small{
    font-size:10px!important;
    letter-spacing:-.1px!important;
  }
}