/* =====================================================================================================================
   Work pages (design-work.css): Projects, My tasks and All tasks, the task page and Planning, with the forms they open
   ---------------------------------------------------------------------------------------------------------------------
   Loaded after design.css. Colors only through its tokens, so Light, Dark and System all follow. Rules are scoped to
   #metrics, the classes app.js renders into #content for these pages, the body classes .task-page and .planning-page,
   and the sheets these pages open: #odoo-write-dialog.work-form (task and planning forms; request forms keep the shared
   sheet), #task-chat-dialog (Create Teams group) and #planning-detail (a shift). Utilization is not restyled here yet.

   Pieces app.js renders for these pages
     .work-swatch     a project's color dot (--sw), ringed so the dark project colors still show on dark panels
     .work-prog       a small bar for progress a record carries (closed subtasks, hours logged); b.over turns orange
     .st-new_open .st-in_progress .st-completed .st-other
                      a task's workflow status as one color (--st) for its pill, board column, filter chip and total
     .work-table      a task, project or shift table: names wrap, IDs, dates and numbers (.n) stay on one line
     .write-icon      the colored icon block at the head of a work sheet (--sw), as in the design's request sheets
   ===================================================================================================================== */

/* ---------- Shared: icons, swatches, avatars, progress, status colors ---------- */
#planning-detail .button .i,#odoo-write-dialog.work-form .button .i{width:18px;height:18px}
.i.i-fill{fill:currentColor}
.i.i-sm{width:14px;height:14px}
.work-swatch{display:inline-block;width:10px;height:10px;flex:none;border-radius:50%;background:var(--sw,var(--line-strong));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
.work-cell{display:inline-flex;align-items:center;gap:var(--s2);min-width:0}
.work-prog{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;font:500 12.5px/1.3 var(--sans);color:var(--ink-soft);white-space:nowrap}
.work-prog i{position:relative;display:block;width:56px;height:4px;flex:none;overflow:hidden;background:var(--line)}
.work-prog b{position:absolute;inset-block:0;inset-inline-start:0;background:var(--ink)}
.work-prog b.over{background:var(--orange)}
.st-new_open{--st:var(--lavender)}
.st-in_progress{--st:var(--yellow)}
.st-completed{--st:transparent}
.st-other{--st:var(--light-teal)}
#content .avatar-stack{display:inline-flex;align-items:center;flex:none;padding:0}
#content .avatar-stack .avatar{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;margin:0;border:2px solid var(--panel);border-radius:50%;background:var(--sw,var(--lavender));color:var(--dark-teal);font:700 10.5px/1 var(--sans);letter-spacing:0}
#content .avatar-stack .avatar+.avatar{margin-inline-start:-6px}
#content .task-card .avatar-stack .avatar{border-color:var(--bg)}
#content .priority{display:inline-flex;vertical-align:-2px;color:var(--danger)}
#content .priority .i{width:15px;height:15px}

/* Status swatches: the filter chips, the board columns and the project totals share the workflow colors. */
#status-filter button{display:inline-flex;align-items:center;gap:var(--s2)}
#status-filter [data-status-filter=new_open]{--st:var(--lavender)}
#status-filter [data-status-filter=in_progress]{--st:var(--yellow)}
#status-filter [data-status-filter=completed]{--st:transparent}
#status-filter [data-status-filter]:not([data-status-filter=all])::before,#content .column .stage-dot,#metrics .metric:not(:first-child) .metric-label::before{content:"";display:block;width:10px;height:10px;flex:none;border-radius:50%;background:var(--st);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dark-teal) 25%,transparent)}
#status-filter [data-status-filter=completed]:not([data-status-filter=all])::before,#content .column.st-completed .stage-dot,#metrics .metric:nth-child(4) .metric-label::before{box-shadow:inset 0 0 0 1.5px currentColor}

/* Task status pills: New / Open lavender, In Progress yellow, other open stages light teal, closed as an outline. */
#content .task-status-label{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:0;border-radius:999px;background:var(--st,var(--light-teal));color:var(--dark-teal);font:700 12px/1.1 var(--sans);white-space:nowrap}
#content .task-status-label.st-completed,#content .task-status-label.closed{border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft)}

/* ---------- Projects: totals ---------- */
#metrics{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
#metrics .metric{align-content:space-between;min-height:116px}
#metrics .metric:not(:first-child) .metric-label{display:flex;align-items:center;gap:var(--s2)}
#metrics .metric:nth-child(2){--st:var(--lavender)}
#metrics .metric:nth-child(3){--st:var(--yellow)}
#metrics .metric:nth-child(4){--st:transparent}
#metrics .metric:first-child{background:var(--dark-teal);color:var(--off-white)}
#metrics .metric:first-child .metric-label{color:var(--slate-300)}
#metrics .metric:first-child .metric-value{margin-top:var(--s2);font:italic 200 64px/.9 var(--editorial);letter-spacing:-.04em;color:var(--light-teal)}
:root[data-theme="dark"] #metrics .metric:first-child{background:var(--light-teal);color:var(--dark-teal)}
:root[data-theme="dark"] #metrics .metric:first-child .metric-label,:root[data-theme="dark"] #metrics .metric:first-child .metric-value{color:var(--dark-teal)}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) #metrics .metric:first-child{background:var(--light-teal);color:var(--dark-teal)}
 :root:not([data-theme="light"]) #metrics .metric:first-child .metric-label,:root:not([data-theme="light"]) #metrics .metric:first-child .metric-value{color:var(--dark-teal)}
}

/* ---------- Projects: cards (square panel blocks, 2px apart) ---------- */
#content .project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:2px}
#content .project-card{display:flex;flex-direction:column;gap:var(--s3);min-width:0;padding:var(--s5)}
#content .project-card:hover{outline:0}
#content .project-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin:0}
#content .project-card h2{display:flex;align-items:baseline;gap:10px;min-width:0;margin:0;font:700 17px/1.3 var(--sans);letter-spacing:-.015em}
#content .project-card h2 .work-swatch{transform:translateY(-1px)}
#content .project-card h2 button{min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:start;overflow-wrap:anywhere;cursor:pointer}
#content .project-card h2 button .go{width:18px;height:18px;margin-inline-start:6px;vertical-align:-3px;transition:transform .15s ease}
#content .project-card h2 button:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#content .project-card h2 button:hover .go{transform:translateX(3px)}
#content .project-card .star{display:grid;place-items:center;width:32px;height:32px;flex:none;margin:-6px -8px 0 0;padding:0;border:0;background:none;color:var(--ink-soft);cursor:pointer}
#content .project-card .star .i{width:20px;height:20px}
#content .project-card .star:hover,#content .project-card .star.on{color:var(--ink)}
#content .project-card>p{display:-webkit-box;min-height:0;margin:0;overflow:hidden;font-size:13px;line-height:1.5;color:var(--ink-soft);-webkit-box-orient:vertical;-webkit-line-clamp:2}
#content .project-progress{display:grid;gap:var(--s2);margin-top:auto;padding-top:var(--s2)}
#content .project-progress-label{display:flex;align-items:baseline;justify-content:flex-start;gap:var(--s2);margin:0;font-size:12.5px;color:var(--ink-soft)}
#content .project-percent{font-size:34px;line-height:.95;color:var(--ink)}
#content .project-card .progress-track{height:4px;margin:0;background:var(--line)}
#content .project-card .progress-track>div{height:100%;background:var(--ink)}
#content .project-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:26px;margin:0;padding:0;border:0}
#content .project-card .task-number{margin-inline-start:auto;font-size:12.5px;color:var(--ink-soft)}

/* ---------- Tables: tasks, projects and shifts ---------- */
#content .work-table table{white-space:normal}
#content .work-table td:first-child{min-width:0;font-weight:inherit}
#content .work-table .t-id,#content .work-table .t-date,#content .work-table .t-time,#content .work-table .n{white-space:nowrap}
#content .work-table th.n,#content .work-table td.n{text-align:end;font-variant-numeric:tabular-nums}
#content .work-table .t-name{min-width:220px;max-width:440px}
#content .work-table .t-project{min-width:140px;max-width:240px}
#content .work-table .t-name button,#content .work-table .work-cell button{color:var(--ink);font-weight:700;text-align:start;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 28%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}
#content .work-table .t-name button:hover,#content .work-table .work-cell button:hover{text-decoration-color:currentColor}
#content .work-table .t-id button{color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none}
#content .work-table .t-id button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#content .work-table .t-id{color:var(--ink-soft);font-variant-numeric:tabular-nums}
#content .work-table .t-date{color:var(--ink-soft)}
#content .task-customer{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink-soft)}
#content .work-table .work-cell>span:last-child{min-width:0}
#content .work-table td.n .work-prog{justify-content:flex-end;color:var(--ink);font-weight:600}
#content .work-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) 0 0;font-size:13px;color:var(--ink-soft)}
#content .work-pagination .button{min-width:0;min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
#content .work-pagination .button .i{width:16px;height:16px}

/* My tasks: Log time sits above the reason it is off. */
.my-task-time{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.my-task-time .button{gap:6px;min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
#content .my-task-time .button .i,#planning-detail .my-task-time .button .i{width:16px;height:16px}
.task-time-flag{display:block;max-width:240px;padding:0;background:none;color:var(--ink-soft);font:500 12px/1.35 var(--sans);white-space:normal}

/* ---------- Task boards: three status columns as one block, cards in white ---------- */
#content .board{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:2px;align-items:stretch;min-height:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain}
#content .column{display:flex;flex-direction:column;gap:var(--s2);min-width:0;min-height:320px;padding:var(--s3);background:var(--panel)}
#content .column-header{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s1) var(--s2);font:700 14px/1.2 var(--sans);color:var(--ink)}
#content .column-header .count{min-width:24px;margin-inline-start:auto;padding:3px 8px;border-radius:999px;background:var(--bg);color:var(--ink-soft);font:700 11.5px/1.2 var(--sans);text-align:center;font-variant-numeric:tabular-nums}
#content .task-card{display:grid;gap:var(--s2);margin:0;padding:var(--s3) var(--s4) var(--s4);border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
#content .task-card:hover{border-color:var(--ink)}
#content .task-card-static{cursor:default}
#content .task-card-static:hover{border-color:var(--line)}
#content .task-card .task-tags{display:flex;flex-wrap:wrap;gap:4px}
#content .task-card .tag{padding:2px 6px;font-size:11px}
#content .task-card .task-code{margin:0;overflow:hidden;font-size:12px;line-height:1.35;color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
#content .task-card h3{margin:0;font:700 14.5px/1.35 var(--sans);letter-spacing:-.01em;overflow-wrap:anywhere}
#content .card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);font-size:12.5px;color:var(--ink-soft)}
#content .card-meta .due{font-size:12.5px;color:var(--ink-soft)}
#content .card-meta .avatar-stack{margin-inline-start:auto}
#content .task-project{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--ink);font-weight:600}
#content .card-bottom{display:flex;flex-wrap:wrap;gap:6px var(--s4);margin:2px 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--line);font-size:12.5px}
#content .task-card .my-task-time{margin-top:var(--s1)}
#content .other-task-stages{display:grid;gap:var(--s3);margin-top:var(--s5)}
#content .other-task-stages>p{margin:0;font:700 11.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Task page ---------- */
.task-page main{padding-block:28px 64px;padding-inline:max(var(--gutter),calc((100% - var(--content-max)) / 2))}
.task-page .breadcrumbs{flex-wrap:nowrap;min-width:0;margin:0 0 var(--s4);font-size:12.5px}
.task-page .breadcrumbs button{flex:none;font-size:inherit;white-space:nowrap}
.task-page .breadcrumbs>span:last-child{min-width:0;overflow:hidden;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.task-page-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s4);padding:0 0 var(--s4);border-bottom:1px solid var(--line)}
.task-page-controls .button{gap:6px;min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
.task-page-controls .button.ghost{padding-inline:var(--s2) var(--s3)}
.task-page-controls .i{width:16px;height:16px}
.task-page-controls [aria-busy=true]{cursor:progress}
.task-record-nav{display:flex;align-items:center;gap:var(--s1);margin-inline-start:auto;font-size:12.5px;color:var(--ink-soft)}
.task-record-nav>span{margin-inline-end:var(--s2)}
.task-page-controls .task-record-nav .button.icon{width:var(--control-sm);padding:0;border-color:var(--line)}
.task-page-controls .task-record-nav .button.icon:not(:disabled):hover{border-color:var(--ink);background:var(--bg)}
.task-page .task-sync-error{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-inline-start:3px solid var(--orange);background:var(--panel);color:var(--ink);font-size:13px;line-height:1.5}
.task-page .task-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}
.task-page .task-main{display:grid;gap:var(--s3);min-width:0}

/* Stages: blocks 2px apart; the ones passed carry a filled dot, the current one is light teal with the orange "now" dot. */
.task-page .task-stagebar{display:flex;gap:2px;justify-content:flex-start;min-height:0;margin:0;overflow-x:auto;scrollbar-width:thin}
.task-page .task-stage{display:flex;flex:1 1 0;align-items:center;gap:var(--s2);min-width:max-content;padding:10px var(--s4);background:var(--panel);color:var(--ink-soft);font:600 13px/1.2 var(--sans);white-space:nowrap}
.task-page .task-stage::before{content:"";width:9px;height:9px;flex:none;border:1.5px solid var(--line-strong);border-radius:50%;background:transparent;box-shadow:none}
.task-page .task-stage:not(:last-child)::after{display:none}
.task-page .task-stage:has(~ .current-stage){color:var(--ink)}
.task-page .task-stage:has(~ .current-stage)::before{border-color:var(--ink);background:var(--ink)}
.task-page .task-stage.current-stage{background:var(--accent);color:var(--dark-teal);font-weight:700}
.task-page .task-stage.current-stage::before{border-color:var(--orange);background:var(--orange);box-shadow:none}

/* The sheet: a panel with the title, your Odoo actions, two columns of fields and the form's tabs. */
.task-page .task-sheet{display:grid;min-width:0;padding:0;overflow:visible;background:var(--panel)}
.task-page .task-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding:var(--s5) var(--s5) var(--s4)}
.task-page .task-title-row h1{flex:1;margin:0;font:700 28px/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.task-page .task-reference{margin:var(--s2) 0 0;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.task-page .task-state{flex:none;min-height:24px;padding:4px 10px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink-soft);font:700 12px/1.1 var(--sans);white-space:nowrap}
.task-page .task-write-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;padding:0 var(--s5) var(--s5)}
.task-page .task-write-actions .button{gap:6px;min-height:var(--control-sm);padding:0 var(--s3);background:var(--bg);font-size:13px}
.task-page .task-write-actions .button:not(:disabled):not(.primary):hover{background:var(--bg)}
.task-page .task-write-actions .i{width:16px;height:16px}
.task-page .task-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);padding:0 var(--s5) var(--s5)}
.task-page .task-fields dl{margin:0;min-width:0}
.task-page .task-field{display:grid;grid-template-columns:minmax(104px,40%) minmax(0,1fr);gap:var(--s3);padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}
.task-page .task-field dt{font-weight:500;color:var(--ink-soft)}
.task-page .task-field dd{margin:0;min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.task-page .task-blank{font-weight:500;color:var(--ink-soft)}
.task-page .task-detail-tabs{display:flex;gap:var(--s1);padding:0 var(--s5);overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scrollbar-width:thin}
.task-page .task-detail-tabs button{display:inline-flex;flex:none;align-items:center;gap:6px;margin:0;padding:13px var(--s3);border:0;background:transparent;color:var(--ink-soft);font:600 13.5px/1.2 var(--sans);white-space:nowrap;box-shadow:none;cursor:pointer}
.task-page .task-detail-tabs button:hover{color:var(--ink)}
.task-page .task-detail-tabs button.active{border:0;background:transparent;color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.task-page .task-detail-tabs button:focus-visible{outline-offset:-2px}
.task-page .task-detail-tabs small{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg);color:var(--ink-soft);font:700 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.task-page .task-detail-tabs button.active small{background:var(--ink);color:var(--bg)}
.task-page .task-tab-panel{min-height:160px;padding:var(--s5);font-size:14px;line-height:1.6;color:var(--ink)}
.task-page .task-tab-panel>.task-field:first-child{border-top:0}
.task-page .odoo-rich-text p{margin:0 0 var(--s3)}
.task-page .odoo-rich-text p:last-child{margin-bottom:0}
.task-page .odoo-rich-text :is(ul,ol){margin:0 0 var(--s3);padding-inline-start:var(--s5)}
.task-page .odoo-rich-text :is(h1,h2,h3,h4){margin:var(--s4) 0 var(--s2);font:700 16px/1.3 var(--sans);letter-spacing:-.01em}
.task-page .odoo-rich-text blockquote{margin:0 0 var(--s3);padding:var(--s2) var(--s4);border-inline-start:3px solid var(--line-strong);color:var(--ink-soft)}
.task-page .task-tab-panel .table-wrap{border:1px solid var(--line);background:var(--bg)}
.task-page .task-tab-panel .task-related-table td button{color:var(--ink);font-weight:700}

/* Activity: a panel beside the sheet, each record on a timeline. */
.task-page .task-chatter{display:grid;gap:var(--s4);align-content:start;min-width:0;padding:var(--s5);background:var(--panel)}
.task-page .task-chatter-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.task-page .task-chatter h2{margin:0;padding:0;border:0;font:700 17px/1.2 var(--sans);letter-spacing:-.015em}
.task-page .task-chatter-head .muted{font-size:12.5px;line-height:1.3}
.task-page .task-chatter>.task-sync-error{margin:0}
.task-page .task-activity{display:grid}
.task-page .task-message{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s3);margin:0;padding:0 0 var(--s4);font-size:13.5px;line-height:1.5}
.task-page .task-message::before{content:"";position:absolute;inset-inline-start:14.5px;top:34px;bottom:4px;width:1px;background:var(--line-strong)}
.task-page .task-message:last-child{padding-bottom:0}
.task-page .task-message:last-child::before{display:none}
.task-page .task-message .resource-initials{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sw,var(--lavender));color:var(--dark-teal);font:700 11px/1 var(--sans)}
.task-page .task-message strong{display:block;font-size:13.5px;line-height:1.3}
.task-page .task-message time{display:block;margin:2px 0 var(--s2);font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.task-page .task-message h4{margin:0 0 var(--s1);font:700 13.5px/1.35 var(--sans)}
.task-page .task-message .odoo-rich-text{min-width:0;color:var(--ink)}
.task-page .task-sync-time{margin:var(--s4) 0 0;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* The Teams group button carries the chat icon; Open adds the new-tab arrow. */
.task-chat-button{gap:6px}
.task-page-controls .task-chat-button .i-sm{width:14px;height:14px;opacity:.75}

/* ---------- Planning ---------- */
.planning-page main{padding-block:28px 64px;padding-inline:var(--gutter)}
.planning-page .page-heading{margin:var(--s3) 0 var(--s5)}
.planning-page .page-heading h1{margin:0;font-size:34px}
.planning-page .toolbar{padding-bottom:var(--s4)}
.planning-page .search-box input{font-size:14px}
.planning-page .surface-meta{padding:var(--s4) 0 var(--s3)}
.planning-page .planning-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s3)}
.planning-page .planning-actions .button{gap:6px;min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
.planning-page .planning-actions .i{width:16px;height:16px}
.planning-page .planning-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);margin:0 0 var(--s4)}
.planning-page .planning-week-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;padding:0;border:0;background:none}
.planning-page .planning-week-nav>.button{min-height:var(--control);padding:0 var(--s4)}
.planning-page .planning-nav-segment{display:inline-flex;align-items:stretch;margin:0}
.planning-page .planning-nav-segment .button.icon{width:var(--control);min-height:var(--control);padding:0;border-color:var(--line);background:var(--bg)}
.planning-page .planning-nav-segment .button.icon:not(:disabled):hover{border-color:var(--ink);background:var(--bg)}
.planning-page .planning-nav-segment select{min-height:var(--control);margin:0;padding:0 30px 0 12px;border-inline:0;font-size:13.5px}
.planning-page .planning-range{margin:0 var(--s1);font:700 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.planning-page .planning-week-nav input[type=date]{width:auto;min-width:0;padding:0 10px;font-size:13.5px}
.planning-page .planning-zone{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.planning-page .planning-zone .i{width:16px;height:16px}
.planning-page .planning-controls{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:0;padding:0}
.planning-page .planning-group-label{display:inline-flex;flex-direction:row;align-items:center;gap:var(--s2);margin:0;font:600 13px/1.2 var(--sans);color:var(--ink-soft);white-space:nowrap}
.planning-page .planning-group-label select{width:auto;min-height:var(--control);padding:0 30px 0 12px;font-size:13.5px}
.planning-page .planning-view-switch{margin:0}
.planning-page .planning-view-switch .i{width:16px;height:16px}

/* The schedule: a panel; day heads read weekday over date (today in light teal), resources stay pinned on the left. */
.planning-page .planning-scroll{max-height:calc(100vh - 300px);min-height:280px;overflow:auto;border:0;background:var(--panel);overscroll-behavior:contain}
.planning-page .planning-grid{min-width:1000px}
.planning-page .planning-row{grid-template-columns:240px repeat(var(--days,7),minmax(110px,1fr))}
.planning-page .planning-header{position:sticky;top:0;z-index:5;min-height:0;border-bottom:1px solid var(--line-strong);background:var(--panel)}
.planning-page .planning-resource-head{position:sticky;left:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s4);border-right:1px solid var(--line);background:var(--panel);color:var(--ink-soft);font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.planning-page .planning-resource-head span{min-width:24px;padding:3px 8px;border-radius:999px;background:var(--bg);color:var(--ink-soft);font:700 11.5px/1.2 var(--sans);letter-spacing:0;text-align:center}
.planning-page .planning-day-head{display:grid;justify-items:center;align-content:center;gap:2px;padding:10px 6px;border-right:1px solid var(--line);background:transparent;color:var(--ink-soft)}
.planning-page .planning-day-head small{font:600 12px/1.2 var(--sans)}
.planning-page .planning-day-head strong{font:700 18px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.planning-page .planning-day-head.is-today{background:var(--accent);color:var(--dark-teal)}
.planning-page .planning-day-head.is-today strong{color:var(--dark-teal)}
.planning-page .timeline-row{border-bottom:1px solid var(--line)}
.planning-page .timeline-row .planning-resource{position:sticky;left:0;z-index:3;display:flex;flex-direction:row;align-items:center;gap:var(--s3);min-width:0;padding:var(--s2) var(--s4);border:0;border-right:1px solid var(--line);background:var(--bg)}
.planning-page .planning-resource>div{display:grid;gap:2px;min-width:0}
.planning-page .timeline-row .planning-resource strong{overflow:hidden;font:600 13.5px/1.25 var(--sans);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.planning-page .planning-resource>div>span{font-size:12px;color:var(--ink-soft)}
.planning-page .planning-resource .resource-initials{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent);color:var(--dark-teal);font:700 11px/1 var(--sans);text-transform:uppercase}
.planning-page .timeline-cell{border:0;border-right:1px solid var(--line);background:var(--bg)}
.planning-page .timeline-cell.is-weekend{background:color-mix(in srgb,var(--panel) 65%,var(--bg))}
.planning-page .timeline-cell.is-today{background:color-mix(in srgb,var(--accent) 22%,var(--bg));box-shadow:none}
.planning-page button.timeline-cell:not(:disabled):hover{background:var(--soft)}
.planning-page .timeline-shift{height:28px;gap:var(--s2);padding:0 var(--s2) 0 10px;border:0;border-left:3px solid var(--dark-teal);border-radius:0;background:var(--light-teal);color:var(--dark-teal);box-shadow:none}
.planning-page .timeline-shift.draft{border-left-color:var(--slate);background:repeating-linear-gradient(135deg,var(--sand) 0 7px,color-mix(in srgb,var(--sand) 55%,var(--white)) 7px 14px)}
.planning-page .timeline-shift>strong{font:600 12px/1.2 var(--sans)}
.planning-page .timeline-shift>span{font:600 11px/1 var(--sans);opacity:.85}
.planning-page .timeline-shift:hover{filter:brightness(.95);box-shadow:none}
.planning-page .timeline-shift:focus-visible{z-index:4;outline:2px solid var(--focus);outline-offset:1px}
.planning-page .planning-total{position:sticky;bottom:0;z-index:4;min-height:52px;border-top:2px solid var(--ink);background:var(--panel)}
.planning-page .planning-total .planning-resource{position:sticky;left:0;z-index:5;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border:0;border-right:1px solid var(--line);background:var(--panel)}
.planning-page .planning-total .planning-resource strong{font:600 13px/1.2 var(--sans);color:var(--ink-soft)}
.planning-page .planning-total .planning-resource span{font:700 14px/1.2 var(--sans);color:var(--ink)}
.planning-page .planning-total-day{display:flex;align-items:center;justify-content:center;border-left:0;border-right:1px solid var(--line)}
.planning-page .planning-total-day strong{font:700 14px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.planning-page .planning-total-day.is-today{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.planning-page .planning-empty{margin-top:2px;padding:var(--s6) var(--s4);background:var(--panel)}
.planning-page .planning-list td button{text-align:start}

/* ---------- The shift sheet (#planning-detail) ---------- */
#planning-detail-body{display:grid;gap:var(--s4)}
#planning-detail .planning-detail-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
#planning-detail .planning-detail-title h2{margin:0;font:700 22px/1.2 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
#planning-detail .planning-detail-title .pill{flex:none;margin-top:2px}
#planning-detail-body>p.muted{margin:calc(var(--s2) * -1) 0 0;font-size:13px;line-height:1.4}
#planning-detail .planning-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0}
#planning-detail .planning-detail-grid>div{display:grid;align-content:start;gap:4px;min-width:0;padding:var(--s3) var(--s4);border-radius:0;background:var(--panel)}
#planning-detail .planning-detail-grid span{font:700 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#planning-detail .planning-detail-grid strong{font:600 14px/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere}
#planning-detail .planning-detail-grid .planning-detail-time{grid-column:1/-1;background:var(--accent)}
#planning-detail .planning-detail-time span,#planning-detail .planning-detail-time strong{color:var(--dark-teal)}
#planning-detail .planning-detail-time .ed{font-size:30px;font-weight:400;line-height:1}
#planning-detail .planning-task-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0}
#planning-detail .planning-task-links .button{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;justify-content:stretch;justify-items:start;gap:3px;min-height:0;height:auto;padding:var(--s3) 40px var(--s3) var(--s4);border:1px solid var(--line);background:var(--bg);color:var(--ink);line-height:1.35;text-align:start;white-space:normal}
#planning-detail .planning-task-links .button:not(:disabled):hover{border-color:var(--ink);background:var(--bg)}
#planning-detail .planning-task-links .button:disabled{opacity:1;background:var(--panel);border-color:var(--panel);color:var(--ink-soft)}
#planning-detail .planning-task-links small{font:500 12px/1.3 var(--sans);letter-spacing:0;color:var(--ink-soft)}
#planning-detail .planning-task-links small:first-child{font:700 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}
#planning-detail .planning-task-links span{font:700 14px/1.35 var(--sans);overflow-wrap:anywhere}
#planning-detail .planning-task-links .go{position:absolute;top:50%;right:var(--s3);width:18px;height:18px;translate:0 -50%}
#planning-detail .planning-task-none{margin:0;font-size:13px}
#planning-detail .planning-log-time{margin:0}
#planning-detail .planning-edit-shift{justify-self:start;gap:6px}

/* ---------- Work sheets: task and planning forms (#odoo-write-dialog.work-form) and Create Teams group ---------- */
#odoo-write-dialog.work-form .dialog-heading,#task-chat-dialog .dialog-heading{justify-content:flex-start}
#odoo-write-dialog.work-form .dialog-heading .icon-button,#task-chat-dialog .dialog-heading .icon-button{margin-inline-start:auto}
#odoo-write-dialog .dialog-heading .icon-button .i,#task-chat-dialog .dialog-heading .icon-button .i{width:20px;height:20px}
#odoo-write-dialog.work-form .write-icon,#task-chat-dialog .write-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;background:var(--sw,var(--accent));color:var(--dark-teal)}
#odoo-write-dialog.work-form .write-icon .i,#task-chat-dialog .write-icon .i{width:20px;height:20px}
#odoo-write-dialog.work-form #odoo-write-heading{margin:0;font:700 19px/1.2 var(--sans);letter-spacing:-.02em;text-transform:none;color:var(--ink)}
#odoo-write-dialog.work-form #odoo-write-body{display:grid;gap:var(--s4)}
#odoo-write-dialog.work-form #odoo-write-body>p,#odoo-write-dialog.work-form #odoo-write-body>div>p:not(.eyebrow){margin:0;font-size:14px;line-height:1.5}
#odoo-write-dialog.work-form #odoo-write-body .eyebrow{margin:0}
#odoo-write-dialog.work-form #odoo-write-body p.muted{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
#odoo-write-dialog.work-form #odoo-write-body>label+p.muted{margin-top:calc(var(--s2) * -1)}
#odoo-write-dialog.work-form #document-options{display:grid;gap:var(--s4)}
#odoo-write-dialog.work-form #document-options p{margin:0}
#odoo-write-dialog.work-form label{display:grid;gap:6px;margin:0;font:700 13px/1.3 var(--sans);color:var(--ink)}
#odoo-write-dialog.work-form label :is(input,select,textarea){width:100%;min-width:0}
#odoo-write-dialog.work-form label input[readonly]{border-color:transparent;background:var(--panel);color:var(--ink-soft);box-shadow:none}
#odoo-write-dialog.work-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
#odoo-write-dialog.work-form .write-full{grid-column:1/-1}
#odoo-write-dialog.work-form input[type=file]{min-height:var(--control);padding:var(--s2);border:1px dashed var(--line-strong);background:var(--bg);color:var(--ink);font:500 13px/1.3 var(--sans)}
#odoo-write-dialog.work-form input[type=file]::file-selector-button{min-height:32px;margin-inline-end:var(--s3);padding:0 var(--s3);border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:700 13px/1 var(--sans);cursor:pointer}
#odoo-write-dialog.work-form .write-destination{display:grid;gap:4px;padding:var(--s4);background:var(--panel)}
#odoo-write-dialog.work-form .write-destination strong{font:700 15px/1.35 var(--sans);overflow-wrap:anywhere}
#odoo-write-dialog.work-form .write-destination p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);overflow-wrap:anywhere}
#odoo-write-dialog #odoo-write-status:not(:empty){margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-inline-start:3px solid var(--orange);background:var(--panel);color:var(--ink);font-size:13px;line-height:1.5}
#odoo-write-dialog.work-form #odoo-write-attribution:empty{display:none}
#odoo-write-dialog.work-form .shift-preview{display:grid;gap:var(--s2)}
#odoo-write-dialog.work-form .shift-preview-list{display:grid;gap:2px;max-height:300px;margin:0;padding:0;overflow:auto;list-style:none}
#odoo-write-dialog.work-form .shift-preview-list li{display:grid;gap:2px;padding:var(--s3) var(--s4);background:var(--panel)}
#odoo-write-dialog.work-form .shift-preview-list span{font-size:12.5px;color:var(--ink-soft)}
#odoo-write-dialog.work-form .shift-preview-list strong{font:700 14px/1.35 var(--sans);overflow-wrap:anywhere}
#odoo-write-dialog.work-form .shift-preview-list small{font-size:12px;line-height:1.4;color:var(--ink-soft)}
#odoo-write-dialog.work-form #odoo-write-body .empty{padding:var(--s5) var(--s4);background:var(--panel)}

/* Create Teams group: the people as rows (ticked rows tinted light teal), who was left out in a note. */
#task-chat-dialog form>.eyebrow{margin:0 0 var(--s2)}
#task-chat-dialog h2{margin:0 0 var(--s2);font:700 22px/1.2 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
#task-chat-dialog form>p.muted{margin:0 0 var(--s5);font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
#task-chat-dialog .task-chat-people{display:grid;gap:2px;margin:0 0 var(--s4);padding:0;border:0}
#task-chat-dialog .task-chat-people legend{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s2);padding:0;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#task-chat-dialog .task-chat-people legend span{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--panel);font-size:11px;letter-spacing:0;text-align:center}
#task-chat-dialog .task-chat-people .admin-check{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--s3);margin:0;padding:10px var(--s4);border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 14px/1.3 var(--sans);cursor:pointer}
#task-chat-dialog .task-chat-people .admin-check:hover{border-color:var(--line-strong)}
#task-chat-dialog .task-chat-people .admin-check:has(input:checked){border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:color-mix(in srgb,var(--accent) 22%,var(--bg))}
#task-chat-dialog .task-chat-people .admin-check:has(input:disabled){cursor:default}
#task-chat-dialog .task-chat-people .admin-check input{width:18px;height:18px;margin:0}
#task-chat-dialog .task-chat-face{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sw,var(--lavender));color:var(--dark-teal);font:700 11.5px/1 var(--sans);font-style:normal}
#task-chat-dialog .task-chat-people .admin-check span{min-width:0;overflow-wrap:anywhere}
#task-chat-dialog .task-chat-people .admin-check small{display:block;margin-top:2px;font:500 12px/1.35 var(--sans);color:var(--ink-soft)}
#task-chat-dialog .task-chat-skipped{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-inline-start:3px solid var(--sand);background:var(--panel)}
#task-chat-dialog .task-chat-skipped p{margin:0 0 var(--s1);font:700 11.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#task-chat-dialog .task-chat-skipped ul{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.6;color:var(--ink)}
#task-chat-dialog .task-chat-status{margin:0;font-size:13px;line-height:1.5}
#task-chat-dialog .task-chat-status:not(:empty){margin:0 0 var(--s4);padding:var(--s3) var(--s4);background:var(--panel);color:var(--ink)}
#task-chat-dialog .task-chat-status.error:not(:empty){border-inline-start:3px solid var(--orange);color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
 #metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
 #metrics .metric:first-child{grid-column:1/-1}
 .task-page .task-detail-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
 .task-page main{padding:20px var(--gutter) calc(96px + env(safe-area-inset-bottom))}
 .planning-page main{padding:20px var(--gutter) calc(96px + env(safe-area-inset-bottom))}
 .planning-page .page-heading{margin-bottom:var(--s4)}
 .planning-page .page-heading h1{font-size:28px}
 .planning-page .planning-bar{align-items:stretch;gap:var(--s3)}
 .planning-page .planning-week-nav,.planning-page .planning-controls{width:100%}
 .planning-page .planning-range{order:-1;flex:1 1 100%;margin:0 0 var(--s1);font-size:17px}
 .planning-page .planning-zone{margin-inline-start:auto}
 .planning-page .planning-group-label,.planning-page .planning-view-switch{flex:1 1 100%}
 .planning-page .planning-group-label select{flex:1 1 auto}
 .planning-page .planning-view-switch button{flex:1 1 0}
 .planning-page .planning-scroll{max-height:65vh}
 .planning-page .planning-row{grid-template-columns:170px repeat(var(--days,7),minmax(96px,1fr))}
 .planning-page .planning-grid{min-width:840px}
 .task-page .task-title-row{flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s4) var(--s3)}
 .task-page .task-title-row h1{font-size:23px}
 .task-page .task-write-actions,.task-page .task-fields{padding-inline:var(--s4)}
 .task-page .task-fields{grid-template-columns:minmax(0,1fr)}
 .task-page .task-fields dl+dl .task-field:first-child{border-top:1px solid var(--line)}
 .task-page .task-detail-tabs{padding:0 var(--s2)}
 .task-page .task-tab-panel{padding:var(--s4)}
 .task-page .task-chatter{padding:var(--s4)}
 #content .project-card{padding:var(--s4)}
 #odoo-background-status{right:var(--s4);left:var(--s4);bottom:calc(74px + env(safe-area-inset-bottom));max-width:none}
}
@media (max-width:480px){
 #metrics .metric{min-height:0}
 #metrics .metric:first-child .metric-value{font-size:52px}
 #metrics .metric:not(:first-child) .metric-label{align-items:flex-start;font-size:10.5px;letter-spacing:.04em}
 .task-page-controls .button{padding:0 10px}
 .task-record-nav>span{display:none}
 .task-page .task-stage{gap:6px;padding:10px var(--s3)}
 #planning-detail .planning-detail-grid,#planning-detail .planning-task-links{grid-template-columns:minmax(0,1fr)}
 #odoo-write-dialog.work-form .form-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
 #content .project-card h2 button .go{transition:none}
}
@media (forced-colors:active){
 .work-swatch,.task-page .task-stage::before,#content .column .stage-dot{forced-color-adjust:none}
 .task-page .task-stage.current-stage{outline:2px solid CanvasText;outline-offset:-2px}
}