/* UI review batch (2026-10): presentation only. Loaded last. Nothing here changes behaviour, data, saving or brand colours. */

/* 1. Employee Statistics in dark mode: Sick days strip and My pay figures readable (4.5:1 or better) */
html[data-theme="dark"] .sick-countdown{background:#2b2f57;color:#eef0ff}
html[data-theme="dark"] .sick-countdown strong{color:#ffffff}
html[data-theme="dark"] .sick-countdown span{color:#d6dafc}
html[data-theme="dark"] .sick-countdown.low{background:#5a2626;color:#ffeceb}
html[data-theme="dark"] .sick-countdown.low strong{color:#ffb3a8}
html[data-theme="dark"] .pay-balance>div{background:rgba(47,208,166,.12)}
html[data-theme="dark"] .pay-balance strong{color:#6ff0cb}
html[data-theme="dark"] .pay-balance small,html[data-theme="dark"] .pay-balance span{opacity:1;color:#c3dedb}

/* 2. FULLY VISIBLE HEADER (Kurt decided yes, 2026-10-15). On a phone the toolbar wraps onto rows instead of scrolling sideways, buttons are 44px and the Account initials show. Gaps are tight so it is no taller than needed. */
@media (max-width:700px){
 html body .premium-workspace-hero .v10-global-controls.premium-header-controls,html body .v10-global-controls{flex-wrap:wrap!important;overflow:visible!important;row-gap:4px!important;gap:4px!important}
 html body .v10-global-controls .hdr-group{gap:4px;padding:2px 4px}
 html body .v10-global-controls .hdr-group{flex-wrap:wrap}
 html body .v10-global-controls .hdr-avatar>.hdr-avatar-dot{display:inline-flex!important}
}
@media (max-width:360px){
 html body .premium-workspace-hero{padding-left:8px!important;padding-right:8px!important}
 html body .premium-workspace-hero .v10-global-controls.premium-header-controls{gap:3px!important;row-gap:3px!important}
}
@media (pointer:coarse),(max-width:700px){
 html body :is(.premium-workspace-hero,.compact-global-header,.main) .v10-global-controls :is(.hdr-icon,.hdr-avatar,.header-icon-btn,.header-text-btn,.hdr-new-btn,.account-control,#empAbsentBtn,.hdr-save,[data-save-workspace]){min-height:44px!important;min-width:44px}
 html body :is(.premium-workspace-hero,.compact-global-header,.main) .v10-global-controls :is(.hdr-icon,.hdr-avatar){height:44px!important}
 html body :is(.premium-workspace-hero,.compact-global-header,.main) .v10-global-controls .hdr-avatar{width:44px!important}
}

/* 3. Employee Today on a narrow phone: the buttons sit under the task, so the title and code keep their width */
@media (max-width:400px){
 .emp-task{flex-wrap:wrap}
 .emp-task .emp-task-main{flex:1 1 calc(100% - 64px)}
 .emp-task .emp-task-main :is(strong,h3,h4,p,span){overflow-wrap:anywhere}
 .emp-task .emp-task-actions{flex:1 1 100%;margin-left:0;gap:8px}
 html body .emp-task .emp-task-actions button{flex:1 1 0;min-height:44px!important}
 .emp-task .today-video-link{flex:1 1 100%}
}

/* 5. Statistics heatmap: the grid scrolls inside its card with a visible bar, and squares are bigger on touch */
.stats-activity-layout>*{min-width:0}
@media(max-width:1050px){.stats-activity-layout{grid-template-columns:minmax(0,1fr)!important}}
.wf-scroll{overflow-x:auto;max-width:100%;scrollbar-width:auto;scrollbar-color:#8fa3ad transparent;padding-bottom:10px}
.wf-scroll::-webkit-scrollbar{height:10px}.wf-scroll::-webkit-scrollbar-thumb{background:#8fa3ad;border-radius:6px}.wf-scroll::-webkit-scrollbar-track{background:rgba(120,140,160,.15);border-radius:6px}
.wf-controls{max-width:100%}
/* squares stay about 14px on a mouse and about 21px on touch; the grid scrolls instead of shrinking */
.wg-activity{min-width:calc(44px + var(--wg-cols)*17px)}
@media (pointer:coarse){.wg-activity{min-width:calc(44px + var(--wg-cols)*24px)}}
.scroll-hint{display:none;margin:2px 0 4px;font-size:12px;color:var(--muted,#5d6d65)}
@media (max-width:1100px),(pointer:coarse){.scroll-hint{display:block}}

/* 6. Calendar week view: wider day columns that scroll with a visible bar and a hint, titles wrap inside the card and stop after a few lines */
@media (min-width:701px){
 .calendar-board:not(.calendar-month){grid-template-columns:repeat(7,minmax(176px,1fr));scrollbar-width:auto;scrollbar-color:#8fa3ad rgba(120,140,160,.15);padding-bottom:12px}
 .calendar-board::-webkit-scrollbar{height:10px}.calendar-board::-webkit-scrollbar-thumb{background:#8fa3ad;border-radius:6px}.calendar-board::-webkit-scrollbar-track{background:rgba(120,140,160,.15);border-radius:6px}
}
@media (min-width:701px) and (max-width:1500px){
 .calendar-surface::after{content:"Scroll sideways to see the whole week.";display:block;margin-top:4px;font-size:12px;color:var(--muted,#5d6d65)}
}
.calendar-task{min-width:0;overflow:hidden}
.calendar-task-context{min-width:0}
.calendar-task-context strong,.calendar-task-context span,.calendar-task-context small{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.calendar-task-context strong{-webkit-line-clamp:3;line-clamp:3}
.calendar-task-context span{-webkit-line-clamp:2;line-clamp:2}
.calendar-task-context small{-webkit-line-clamp:1;line-clamp:1}

/* 7. Project detail on a phone: logo above the title, the "Team tasks go to" menu stays inside the pop-up, the tab row scrolls with a visible bar and edge shading */
@media (max-width:650px){
 #modalRoot .project-modal-head .project-headline{display:flex;flex-direction:column;align-items:flex-start;gap:10px!important}
 #modalRoot .project-modal-head .project-headline>div{width:100%}
 #modalRoot .project-modal-head .project-icon-button,#modalRoot .project-modal-head .project-icon-button .project-image-shell{width:72px!important;height:72px!important;min-width:72px!important}
 #modalRoot .project-modal-head .project-header-name{width:100%;max-width:100%;box-sizing:border-box;field-sizing:content;min-height:1.2em;height:auto!important;max-height:none!important;overflow:hidden;padding:0 0 4px!important}
}
@media (max-width:700px){
 .task-list-heading{flex-wrap:wrap}
 .bulk-assign{flex-wrap:wrap;width:100%;max-width:100%;margin-left:0;box-sizing:border-box}
 .bulk-assign select{min-width:0;flex:1 1 150px;max-width:100%}
 .project-tabs{scrollbar-width:thin;scrollbar-color:#8fa3ad transparent;padding-bottom:8px;
  --tabs-bar:color-mix(in srgb,var(--text,#10213e) 6%,var(--panel,#fff));
  background:linear-gradient(to right,var(--panel,#fff) 30%,transparent) left center/28px 100% no-repeat local,linear-gradient(to left,var(--panel,#fff) 30%,transparent) right center/28px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(20,40,60,.35),transparent) left center/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(20,40,60,.35),transparent) right center/12px 100% no-repeat scroll,linear-gradient(var(--tabs-bar),var(--tabs-bar))}
 @media (pointer:coarse){.project-tabs>button,.project-tabs .project-tab{min-height:44px}}
 .project-tabs::-webkit-scrollbar{display:block;height:6px}.project-tabs::-webkit-scrollbar-thumb{background:#8fa3ad;border-radius:6px}
}

/* 4. New Project in dark mode: the Project Location panel was a pale box under pale text */
html[data-theme="dark"] .project-information-section.loc-modern,html[data-theme="dark"] #modalRoot form#projectForm .project-location-description>.project-information-section:first-child{background:rgba(15,38,49,.92);border-color:rgba(160,220,225,.16);box-shadow:none}
html[data-theme="dark"] .project-information-section.loc-modern :is(h4,label,p,span,small),html[data-theme="dark"] #modalRoot form#projectForm .project-location-description>.project-information-section:first-child :is(h4,label){color:#effaf8}

/* 8. Small touches: pointer on the owner's business rows (not for employees), bigger hit areas for small checkboxes and radio buttons */
.sidebar .legend-business[data-action=editBusiness]{cursor:pointer}
body[data-employee] .sidebar .legend-business{cursor:default}
.calendar-completed{display:inline-flex;align-items:center;gap:8px;padding:8px 6px;min-height:36px;cursor:pointer}
.calendar-completed input[type=checkbox]{width:20px;height:20px;margin:0;flex:0 0 20px;cursor:pointer}
.absence-reasons .check-row{padding:12px 10px;min-height:44px}
.absence-reasons input[type=radio]{width:22px;height:22px;min-width:22px;flex-basis:22px}

/* 9. Small grey text contrast (Kurt decided yes, 2026-10-15): the light-mode greys were darkened in styles.css and batch9.css to reach 4.5:1. These dark-mode lines keep the small grey text readable on the dark panels (the same greys, lightened as little as needed). */
html[data-theme="dark"] .hdr-status.unsaved{color:#c77a00}
html[data-theme="dark"] .sidebar-add{color:#7d90a2}
html[data-theme="dark"] .section-title span{color:#7e90a2}
html[data-theme="dark"] .active-business-head{color:#7f90a7}
html[data-theme="dark"] .active-business-head strong{color:#808fa6}
html[data-theme="dark"] .page-head p{color:#7e90a1}
html[data-theme="dark"] .table th{color:#7d91a1}
html[data-theme="dark"] .brand .eyebrow,html[data-theme="dark"] .sidebar-section-label,html[data-theme="dark"] .profile span{color:#7890a4}
html[data-theme="dark"] .legend-business small{color:#7a8da0}

/* 10. Layout batch (2026-10-15, presentation only). Today cards: title and actions wrap instead of overlapping, at every width. */
html body .today-task{min-width:0;max-width:100%;overflow-wrap:anywhere}
html body .today-task .task-main:has(> .today-video-link){flex-wrap:wrap;row-gap:8px}
html body .today-task .task-main:has(> .today-video-link) > .today-task-copy{flex:1 1 150px!important;min-width:0!important;max-width:100%!important}
html body .today-task .task-main:has(> .today-video-link) .today-task-title-line strong,html body .today-task .today-task-title-line strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;min-width:0;max-width:100%}
html body .today-task .task-main > .today-video-link{margin:0!important;flex:0 0 auto;max-width:100%;white-space:nowrap}
html body .today-task .task-main{min-width:0}
html body .today-task .task-right.today-row-actions{flex-wrap:wrap;min-width:0;max-width:100%;justify-content:flex-end;row-gap:6px}
html body .today-task .today-completion-actions{flex-wrap:wrap!important;justify-content:flex-end!important;min-width:0}
html body .today-task .today-completion-actions .task-check{width:auto!important;height:auto!important;min-width:0!important;min-height:32px;padding:5px 12px!important;border-radius:9px!important;white-space:nowrap;font-size:12px;line-height:1.2;overflow:visible;flex:0 0 auto}
html body .today-task .today-completion-actions .tiny-btn{min-height:32px;padding:5px 12px;font-size:12px;white-space:nowrap}
html[data-theme="dark"] body .today-task .completion-available,html[data-theme="dark"] .today-task .completion-available{background:rgba(47,208,166,.2)!important;border-color:#2fd0a6!important;color:#cffaee!important;box-shadow:none}
html[data-theme="dark"] .today-task .completion-blocked{background:rgba(255,255,255,.1)!important;border-color:rgba(160,220,225,.3)!important;color:#d3e2e4!important}
@media(max-width:650px){html body .today-task.revision-today-task{flex-wrap:wrap!important}html body .today-task .task-right.today-row-actions{flex:1 1 100%;margin-left:0!important;justify-content:flex-start;max-width:100%!important}html body .today-task .today-completion-actions{justify-content:flex-start!important}html body .today-task .today-drag-handle{flex-basis:14px}}
/* Employee Today: a long unbroken name wraps inside the card */
.emp-task,.emp-task *{min-width:0}.emp-task{max-width:100%;overflow-wrap:anywhere}.emp-task a,.emp-task .today-video-link{max-width:100%;flex-wrap:wrap}

/* Project window on a phone: tabs wrap so none is clipped, the footer buttons wrap inside the window */
@media(max-width:560px){.project-tabs{flex-wrap:wrap}.project-tabs .project-tab{flex:1 1 auto;padding:9px 12px;min-width:0}.project-view-body .project-actions-zone{flex-wrap:wrap;justify-content:flex-end}.project-view-body .project-actions-zone>*{min-width:0;max-width:100%}}

/* Projects Timeline (presentation only). Phone: a narrow project column so the bars and today marker are on screen. */
@media(max-width:600px){.compound-timeline:not(.col-collapsed){--label:132px}.compound-timeline:not(.col-collapsed) .compound-label{padding:8px 6px;gap:6px}.compound-timeline:not(.col-collapsed) .compound-label .project-image-shell{width:26px!important;height:26px!important;min-width:26px!important;flex:0 0 26px!important;font-size:9px}.compound-timeline:not(.col-collapsed) .compound-label strong{font-size:11px;overflow-wrap:anywhere}.compound-timeline:not(.col-collapsed) .compound-group-label{letter-spacing:.04em}}
/* Collapse buttons: at least 24px (44px on touch); negative margins keep the layout unchanged */
.proj-col-head button,.phase-col-toggle,.biz-toggle{min-width:24px;min-height:24px}
.phase-chevron{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;margin:-6px -6px -6px -6px;padding:0!important;box-sizing:border-box}
@media(pointer:coarse){.proj-col-head button,.phase-col-toggle,.phase-chevron,.biz-toggle{min-width:44px;min-height:44px}.proj-col-head button,.phase-col-toggle{margin:-10px}.phase-chevron{margin:-16px -14px -16px -16px}}
/* Month and year labels in the timeline header are never cut by their own box */
.v5-header-track .month-label{max-width:none!important;overflow:visible!important;text-overflow:clip}
.v5-header-track{overflow:clip;overflow-clip-margin:28px}
/* Project bars: no offset ghost box behind long names; a name that cannot fit on a short bar sits just to the right of it */
.compound-bar.has-outside>span{border:0!important;background:none!important;margin:0!important;box-shadow:none;border-radius:0!important;flex:0 0 auto;width:max-content}
.compound-bar.has-outside{container-type:inline-size}
@container (max-width:90px){.compound-bar.has-outside>span{position:absolute;left:100%;top:0;padding:0 6px 0 4px;min-width:0}}
/* Person filter: long names stop before the arrow */
html body select[data-schedule-person]{padding-right:34px!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}

/* Calendar: day columns shrink so the month (and the week on tablets) fit the screen; task chips stack so text keeps room. The week on a laptop keeps its readable 176px columns and its scroll hint (pinned by tests/ui-review.cjs). */
@media(min-width:701px){
 .calendar-board.calendar-month{grid-template-columns:repeat(7,minmax(92px,1fr))}
 .calendar-board.calendar-month .calendar-task{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
}
@media(min-width:701px) and (max-width:1099px){
 .calendar-board:not(.calendar-month){grid-template-columns:repeat(7,minmax(92px,1fr))}
 .calendar-board .calendar-task{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
}
@media(min-width:701px){.calendar-board.calendar-month .calendar-task .calendar-project-image,.calendar-board.calendar-month .calendar-task .project-image-shell{width:26px!important;height:26px!important;min-width:26px!important;font-size:9px!important}}
@media(min-width:701px) and (max-width:1099px){.calendar-board .calendar-task .calendar-project-image,.calendar-board .calendar-task .project-image-shell{width:26px!important;height:26px!important;min-width:26px!important;font-size:9px!important}}
@media(min-width:701px){.calendar-board.calendar-month .calendar-day h3,.calendar-board.calendar-month .calendar-day-tasks{padding:6px}.calendar-board.calendar-month .calendar-task{padding:6px 4px!important}.calendar-board.calendar-month .calendar-task-context strong{font-size:10.5px}}
@media(min-width:701px) and (max-width:1099px){.calendar-board .calendar-day h3{padding:10px}.calendar-board .calendar-day-tasks{padding:4px;gap:6px}.calendar-board .calendar-task{padding:6px 4px!important}.calendar-board .calendar-task-context strong{font-size:10.5px}}
@media(min-width:760px) and (max-width:1099px){.calendar-surface::after{display:none!important}}
@media(min-width:701px){.calendar-surface:has(.calendar-month)::after{display:none!important}}
/* Statistics: wide tables show a cue that they scroll sideways; heat-map squares keep their size but get a bigger tap area; the day names stay visible while the grid scrolls */
@media(max-width:760px){.table-scroll,.bt-scroll{scrollbar-width:thin;scrollbar-color:#8fa3ad transparent}.table-scroll::-webkit-scrollbar,.bt-scroll::-webkit-scrollbar{height:8px}.table-scroll::-webkit-scrollbar-thumb,.bt-scroll::-webkit-scrollbar-thumb{background:#8fa3ad;border-radius:6px}.table-scroll::after,.bt-scroll::after{content:"Scroll sideways to see every column.";display:block;position:sticky;left:0;width:max-content;max-width:100%;margin-top:6px;font-size:12px;color:var(--muted,#5d6d65)}}
.wg-small .wg-cell{position:relative}
.wg-small .wg-cell::before{content:"";position:absolute;inset:-5px}
.wg-activity .wg-rowname{position:sticky;left:0;z-index:3;background:var(--panel,#fff)}